/* =============================================================================
   إيثار — Eythar Components
   Styles for Eythar-specific UI pieces that have no base definition in
   components.css: page-header/modal illustrations and the shared
   empty-state pattern.
   No decorative "luxury glass" overrides here (floating panels, blur, gold
   gradients/glow, animated background) — sidebar/header/cards/buttons/
   tables/modals all use their plain components.css definitions.
   Load order: variables.css -> base.css -> layout.css -> components.css ->
   plugins.css -> eythar-components.css -> page-specific CSS.
============================================================================= */

/* -----------------------------------------------------------------------------
   رسمة رأس الصفحة / رسمة المودال
----------------------------------------------------------------------------- */
.app-page-header__art {
  width: 150px;
  height: auto;
  flex-shrink: 0;
  margin-inline-start: auto;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 767.98px) {
  .app-page-header__art { display: none; }
}

.cat-modal__art {
  width: 140px;
  margin: -4px auto 2px;
  display: block;
}

/* -----------------------------------------------------------------------------
   الرسومات التوضيحية (Illustrations)
----------------------------------------------------------------------------- */
.illus {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.illus--xs { width: 150px; }
.illus--sm { width: 220px; }
.illus--md { width: 300px; }
.illus--lg { width: 380px; }

/* حالة فارغة موحّدة */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 16px;
  text-align: center;
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 10px 0 0;
}
.empty-state__text {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 340px;
}