/* نظام تصميم تطبيقاتنا (مبني على سلة). مولّد من salla-rabz/design-system/build.py، لا تعدّله هنا */
/*
 * توكنز نظام التصميم — نفس أسماء ومقاييس سلة (apps.salla.sa) عشان تطبيقاتنا تبان جزء من سلة.
 * الألوان كلها hsl triplets مثل سلة: استخدمها كذا hsl(var(--primary)) أو hsl(var(--primary) / .5)
 * ألوان كل تطبيق في themes.css (يتولد من build.py) وتتفعّل بـ <html data-app="hizma">
 */

:root {
  /* المقاسات من سلة */
  --sm-height: 2rem;
  --md-height: 2.5rem;
  --lg-height: 3rem;
  --transition-duration: .25s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* الخط: PingARLT خط سلة الرسمي داخل لوحة سلة. العناوين الكبيرة لها خط ومجموعة أسلوبية (stylistic set) منفصلة */
  --font: pingarlt, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --font-heading: var(--font);
  --heading-features: normal;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* الزوايا: سلة تستخدم .5rem في أغلب العناصر و 1rem للبطاقات الكبيرة */
  --radius-xs: .25rem;
  --radius-sm: .375rem;
  --radius: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* المسافات (4px grid) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* ألوان الحالات من سلة */
  --success: 157 100% 34%;
  --success-100: 152 76% 95%;
  --info: 214 87% 64%;
  --info-100: 214 90% 96%;
  --warning: 34 100% 63%;
  --warning-100: 38 100% 95%;
  --warning-700: 28 80% 38%;
  --danger: 358 89% 64%;
  --danger-100: 0 90% 97%;
  --danger-700: 358 65% 46%;

  /* الرماديات من سلة */
  --gray-50: 0 0% 98%;
  --gray-100: 0 0% 99%;
  --gray-200: 0 0% 97%;
  --gray-300: 0 0% 96%;
  --gray-400: 0 0% 93%;
  --gray-500: 0 0% 87%;
  --dark: 0 0% 20%;
  --dark-100: 0 0% 38%;

  /* الأسطح (فاتح) */
  --bg: var(--gray-200);
  --surface: 0 0% 100%;
  --surface-2: var(--gray-50);
  --line: var(--gray-400);
  --line-strong: var(--gray-500);
  --text: var(--dark);
  --muted: var(--dark-100);
  --placeholder: 0 0% 60%;

  /* الظلال خفيفة جدًا مثل لوحة سلة */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .04);
  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / .1);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .16);
  --ring: 0 0 0 3px hsl(var(--primary) / .18);

  /* ألوان الرسوم من سلة */
  --chart-bars: #348d9c;
  --chart-empty: #92c3cb;
  --chart-hover: #ffaf44;

  color-scheme: light;
}

/* الوضع الداكن: نفس قيم لوحة سلة الداكنة (#1d1e20) */
:root[data-theme="dark"] {
  --bg: 220 5% 12%;
  --surface: 225 4% 16%;
  --surface-2: 220 4% 14%;
  --line: 220 4% 23%;
  --line-strong: 220 4% 30%;
  --text: 200 10% 94%;
  --muted: 200 6% 66%;
  --placeholder: 200 4% 48%;
  --success-100: 157 50% 14%;
  --info-100: 214 40% 16%;
  --warning-100: 34 45% 15%;
  --danger-100: 358 40% 16%;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / .5);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .6);
  color-scheme: dark;
}
/* مولّد من build.py — لا تعدّله يدويًا */
:root {
  /* سلة (القيم الأصلية) */
  --primary: 189 100% 17%;
  --primary-100: 187 40% 96%;
  --primary-200: 188 39% 70%;
  --primary-300: 188 38% 54%;
  --primary-400: 189 50% 41%;
  --primary-500: 189 100% 18%;
  --primary-600: 189 100% 15%;
  --primary-700: 191 76% 16%;
  --primary-reverse: 0 0% 100%;
  --secondary: 163 100% 82%;
  --secondary-100: 163 100% 97%;
  --secondary-200: 166 100% 95%;
  --secondary-300: 165 100% 93%;
  --secondary-400: 164 96% 72%;
  --secondary-500: 164 89% 63%;
  --secondary-600: 164 83% 55%;
  --secondary-700: 163 78% 52%;
  --secondary-reverse: 189 100% 17%;
}
:root[data-theme="dark"] {
  --primary: 166 61% 83%;
  --primary-reverse: 189 100% 12%;
  --primary-100: 180 20% 15%;
}

[data-app="tijwar"] {
  /* تِجوار (الشركة) */
  --primary: 217 92% 60%;
  --primary-100: 217 92% 98%;
  --primary-200: 217 92% 84%;
  --primary-300: 217 92% 75%;
  --primary-400: 217 92% 66%;
  --primary-500: 217 92% 60%;
  --primary-600: 217 65% 52%;
  --primary-700: 217 61% 43%;
  --primary-reverse: 0 0% 100%;
  --secondary: 163 78% 79%;
  --secondary-100: 163 78% 99%;
  --secondary-200: 163 78% 92%;
  --secondary-300: 163 78% 87%;
  --secondary-400: 163 78% 82%;
  --secondary-500: 163 78% 79%;
  --secondary-600: 163 44% 68%;
  --secondary-700: 163 27% 57%;
  --secondary-reverse: 163 21% 20%;
}
:root[data-theme="dark"][data-app="tijwar"] {
  --primary: 217 92% 74%;
  --primary-reverse: 217 61% 21%;
  --primary-100: 218 39% 22%;
}

[data-app="hizma"] {
  /* حُزمة */
  --primary: 248 53% 50%;
  --primary-100: 248 52% 97%;
  --primary-200: 248 52% 80%;
  --primary-300: 248 52% 69%;
  --primary-400: 248 52% 58%;
  --primary-500: 248 53% 50%;
  --primary-600: 248 53% 43%;
  --primary-700: 248 53% 36%;
  --primary-reverse: 0 0% 100%;
  --secondary: 40 100% 74%;
  --secondary-100: 40 100% 98%;
  --secondary-200: 40 100% 90%;
  --secondary-300: 40 100% 84%;
  --secondary-400: 40 100% 78%;
  --secondary-500: 40 100% 74%;
  --secondary-600: 40 62% 64%;
  --secondary-700: 40 40% 53%;
  --secondary-reverse: 40 35% 18%;
}
:root[data-theme="dark"][data-app="hizma"] {
  --primary: 248 60% 74%;
  --primary-reverse: 248 53% 17%;
  --primary-100: 246 30% 20%;
}

[data-app="nabd"] {
  /* نبض */
  --primary: 8 55% 46%;
  --primary-100: 8 47% 97%;
  --primary-200: 8 47% 79%;
  --primary-300: 8 47% 67%;
  --primary-400: 8 47% 55%;
  --primary-500: 8 55% 46%;
  --primary-600: 8 55% 40%;
  --primary-700: 8 55% 33%;
  --primary-reverse: 0 0% 100%;
  --secondary: 17 80% 79%;
  --secondary-100: 17 80% 99%;
  --secondary-200: 17 80% 91%;
  --secondary-300: 17 80% 87%;
  --secondary-400: 17 80% 82%;
  --secondary-500: 17 80% 79%;
  --secondary-600: 17 45% 68%;
  --secondary-700: 17 28% 57%;
  --secondary-reverse: 17 22% 20%;
}
:root[data-theme="dark"][data-app="nabd"] {
  --primary: 8 60% 74%;
  --primary-reverse: 8 55% 16%;
  --primary-100: 5 26% 19%;
}

[data-app="lafta"] {
  /* لافتة */
  --primary: 152 26% 28%;
  --primary-100: 152 10% 96%;
  --primary-200: 152 10% 71%;
  --primary-300: 152 10% 56%;
  --primary-400: 152 16% 40%;
  --primary-500: 152 26% 28%;
  --primary-600: 152 26% 24%;
  --primary-700: 152 26% 20%;
  --primary-reverse: 0 0% 100%;
  --secondary: 73 80% 60%;
  --secondary-100: 73 80% 98%;
  --secondary-200: 73 80% 84%;
  --secondary-300: 73 80% 75%;
  --secondary-400: 73 80% 66%;
  --secondary-500: 73 80% 60%;
  --secondary-600: 73 57% 51%;
  --secondary-700: 73 54% 43%;
  --secondary-reverse: 73 54% 15%;
}
:root[data-theme="dark"][data-app="lafta"] {
  --primary: 73 80% 60%;
  --primary-reverse: 152 26% 10%;
  --primary-100: 167 12% 15%;
}

/*
 * مكونات لوحات تطبيقاتنا داخل سلة (الصفحات المدمجة). نفس شكل لوحة سلة: خلفية رمادية فاتحة،
 * بطاقات بيضاء بحد خفيف، أزرار بارتفاع 2.5rem وزوايا .5rem، أيقونات sallaicons.
 * يعتمد على tokens.css + themes.css
 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: hsl(var(--bg)); color: hsl(var(--text));
  font-family: var(--font); font-size: var(--text-sm); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, .heading { font-family: var(--font-heading); font-feature-settings: var(--heading-features); }
h1 { font-size: var(--text-xl); font-weight: 700; line-height: 1.4; }
h2 { font-size: var(--text-md); font-weight: 700; line-height: 1.5; }
h3 { font-size: var(--text-sm); font-weight: 700; }
a { color: hsl(var(--primary)); }
.muted { color: hsl(var(--muted)); }
.small { font-size: var(--text-xs); }
.num { font-variant-numeric: tabular-nums; }
[class^="sicon-"], [class*=" sicon-"] { font-size: 1.15em; line-height: 1; display: inline-block; }

/* تخطيط */
.page { padding: var(--space-5) max(var(--space-4), env(safe-area-inset-left)) var(--space-8); max-width: 1200px; margin: 0 auto; }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* بطاقة */
.card {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--line)); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-xs);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-md); }
.divider { height: 1px; background: hsl(var(--line)); border: 0; margin: var(--space-3) 0; }

/* مربع الأيقونة (مثل أيقونات أقسام لوحة سلة) */
.icon-box {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius); flex: none;
  display: grid; place-items: center; font-size: 1.25rem;
  background: hsl(var(--primary-100)); color: hsl(var(--primary));
}
.icon-box.sm { width: 2rem; height: 2rem; font-size: 1rem; }
.icon-box.lg { width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: var(--radius-lg); }
.icon-box.success { background: hsl(var(--success-100)); color: hsl(var(--success)); }
.icon-box.warning { background: hsl(var(--warning-100)); color: hsl(var(--warning-700)); }
.icon-box.danger { background: hsl(var(--danger-100)); color: hsl(var(--danger)); }

/* أزرار (salla-button) */
.btn {
  font: inherit; font-weight: 500; font-size: var(--text-sm); line-height: 1;
  height: var(--md-height); padding: 0 var(--space-4); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap;
  border: 1px solid hsl(var(--line-strong)); background: hsl(var(--surface)); color: hsl(var(--text));
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color var(--transition-duration) var(--ease), border-color var(--transition-duration) var(--ease), color var(--transition-duration) var(--ease), opacity var(--transition-duration) var(--ease);
}
.btn:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-reverse)); font-weight: 700; }
.btn.primary:hover { background: hsl(var(--primary-600)); border-color: hsl(var(--primary-600)); color: hsl(var(--primary-reverse)); }
:root[data-theme="dark"] .btn.primary:hover { opacity: .88; background: hsl(var(--primary)); }
.btn.secondary { background: hsl(var(--secondary)); border-color: hsl(var(--secondary)); color: hsl(var(--secondary-reverse)); font-weight: 700; }
.btn.secondary:hover { background: hsl(var(--secondary-600)); border-color: hsl(var(--secondary-600)); color: hsl(var(--secondary-reverse)); }
.btn.soft { background: hsl(var(--primary-100)); border-color: transparent; color: hsl(var(--primary)); }
.btn.soft:hover { background: hsl(var(--primary) / .14); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: hsl(var(--primary-100)); color: hsl(var(--primary)); }
.btn.danger { color: hsl(var(--danger)); }
.btn.danger:hover { border-color: hsl(var(--danger)); background: hsl(var(--danger-100)); color: hsl(var(--danger)); }
.btn.sm { height: var(--sm-height); padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn.lg { height: var(--lg-height); padding: 0 var(--space-6); font-size: var(--text-md); }
.btn.round { border-radius: var(--radius-full); }
.btn.icon { width: var(--md-height); padding: 0; }
.btn.icon.sm { width: var(--sm-height); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .sicon-spin, .spin { animation: s-spin 1s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:focus-visible { box-shadow: var(--ring); }

/* حقول (salla-input) */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > span, .label { font-weight: 500; font-size: var(--text-sm); color: hsl(var(--text)); }
.hint { font-size: var(--text-xs); color: hsl(var(--muted)); }
.input, input[type=text], input[type=number], input[type=search], input[type=email], input[type=url], input[type=datetime-local], input[type=date], select, textarea {
  font: inherit; font-size: var(--text-sm); color: hsl(var(--text)); width: 100%;
  height: var(--md-height); padding: 0 var(--space-3); border-radius: var(--radius);
  background: hsl(var(--surface)); border: 1px solid hsl(var(--line-strong));
  transition: border-color var(--transition-duration) var(--ease), box-shadow var(--transition-duration) var(--ease);
}
textarea { height: auto; min-height: 5rem; padding: var(--space-2) var(--space-3); resize: vertical; }
select { appearance: none; padding-inline-end: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: right .75rem center; }
[dir="rtl"] select { background-position: left .75rem center; }
input::placeholder, textarea::placeholder { color: hsl(var(--placeholder)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--ring); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted)); pointer-events: none; }
.input-icon > input { padding-inline-start: 2.25rem; }
.input-addon { display: flex; }
.input-addon > input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-addon > span { display: grid; place-items: center; padding: 0 var(--space-3); border: 1px solid hsl(var(--line-strong)); border-inline-start: 0; border-radius: 0 var(--radius) var(--radius) 0; background: hsl(var(--surface-2)); color: hsl(var(--muted)); font-size: var(--text-xs); }
[dir="rtl"] .input-addon > span { border-radius: var(--radius) 0 0 var(--radius); }
input[type=range] { accent-color: hsl(var(--primary)); width: 100%; height: 1.25rem; padding: 0; border: 0; box-shadow: none; background: none; }
input[type=color] { width: 2.5rem; height: var(--md-height); border: 1px solid hsl(var(--line-strong)); border-radius: var(--radius); background: hsl(var(--surface)); padding: 3px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: hsl(var(--primary)); width: 1.05rem; height: 1.05rem; }

/* مفتاح تشغيل (salla toggle) */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { width: 2.5rem; height: 1.5rem; border-radius: var(--radius-full); background: hsl(var(--line-strong)); position: relative; transition: background var(--transition-duration) var(--ease); flex: none; }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition-duration) var(--ease); }
.switch input:checked + i { background: hsl(var(--primary)); }
.switch input:checked + i::after { transform: translateX(1rem); }
[dir="rtl"] .switch input:checked + i::after { transform: translateX(-1rem); }
.switch input:focus-visible + i { box-shadow: var(--ring); }

/* شارات (salla-badge) */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 500; line-height: 1; padding: .35rem .6rem; border-radius: var(--radius-sm);
  background: hsl(var(--primary-100)); color: hsl(var(--primary));
}
.badge.round { border-radius: var(--radius-full); }
.badge.success { background: hsl(var(--success-100)); color: hsl(var(--success)); }
.badge.warning { background: hsl(var(--warning-100)); color: hsl(var(--warning-700)); }
.badge.danger { background: hsl(var(--danger-100)); color: hsl(var(--danger-700)); }
.badge.muted { background: hsl(var(--line)); color: hsl(var(--muted)); }
.badge.solid { background: hsl(var(--primary)); color: hsl(var(--primary-reverse)); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; display: inline-block; }

/* شريحة قابلة للحذف */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--sm-height); padding: 0 .35rem 0 .75rem; border-radius: var(--radius-full); background: hsl(var(--primary-100)); color: hsl(var(--primary)); font-size: var(--text-xs); font-weight: 500; }
[dir="rtl"] .chip { padding: 0 .75rem 0 .35rem; }
.chip button { border: 0; background: none; color: inherit; cursor: pointer; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.chip button:hover { background: hsl(var(--primary) / .12); }

/* أزرار مجمعة / تبويبات */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius); background: hsl(var(--surface-2)); border: 1px solid hsl(var(--line)); }
.seg button { font: inherit; font-size: var(--text-sm); border: 0; background: transparent; color: hsl(var(--muted)); height: calc(var(--md-height) - 8px); padding: 0 var(--space-3); border-radius: calc(var(--radius) - 2px); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: hsl(var(--surface)); color: hsl(var(--primary)); font-weight: 700; box-shadow: var(--shadow-sm); }
.tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid hsl(var(--line)); }
.tabs button { font: inherit; border: 0; background: none; color: hsl(var(--muted)); padding: var(--space-3) 0; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: hsl(var(--primary)); border-color: hsl(var(--primary)); font-weight: 700; }

/* مؤشرات (KPI) */
.stat { display: flex; gap: var(--space-3); align-items: center; }
.stat b { display: block; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat span { color: hsl(var(--muted)); font-size: var(--text-xs); }
.trend-up { color: hsl(var(--success)); }
.trend-down { color: hsl(var(--danger)); }

/* شريط تقدم (salla-progress-bar) */
.progress { height: .5rem; border-radius: var(--radius-full); background: hsl(var(--line)); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--primary)); transition: width .6s var(--ease); }
.progress.warning > i { background: hsl(var(--warning)); }
.progress.danger > i { background: hsl(var(--danger)); }

/* تنبيه (salla-alert) */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid transparent; font-size: var(--text-sm); }
.alert > i { font-size: 1.25rem; margin-top: 1px; }
.alert.info { background: hsl(var(--info-100)); border-color: hsl(var(--info) / .3); color: hsl(214 60% 38%); }
.alert.success { background: hsl(var(--success-100)); border-color: hsl(var(--success) / .3); color: hsl(157 100% 24%); }
.alert.warning { background: hsl(var(--warning-100)); border-color: hsl(var(--warning) / .4); color: hsl(var(--warning-700)); }
.alert.danger { background: hsl(var(--danger-100)); border-color: hsl(var(--danger) / .3); color: hsl(var(--danger-700)); }
.alert.brand { background: hsl(var(--primary-100)); border-color: hsl(var(--primary) / .2); color: hsl(var(--primary)); }
:root[data-theme="dark"] .alert.info { color: hsl(var(--info)); }
:root[data-theme="dark"] .alert.success { color: hsl(var(--success)); }
:root[data-theme="dark"] .alert.warning { color: hsl(var(--warning)); }
:root[data-theme="dark"] .alert.danger { color: hsl(var(--danger)); }

/* قوائم وجداول */
.list { display: flex; flex-direction: column; border: 1px solid hsl(var(--line)); border-radius: var(--radius-lg); background: hsl(var(--surface)); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid hsl(var(--line)); background: none; color: inherit; font: inherit; text-align: start; width: 100%; }
.list-item:last-child { border-bottom: 0; }
button.list-item { cursor: pointer; }
button.list-item:hover { background: hsl(var(--primary-100)); }
.thumb { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); object-fit: cover; background: hsl(var(--line)); flex: none; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: start; font-weight: 500; font-size: var(--text-xs); color: hsl(var(--muted)); padding: var(--space-2) var(--space-3); border-bottom: 1px solid hsl(var(--line)); background: hsl(var(--surface-2)); }
.table td { padding: var(--space-3); border-bottom: 1px solid hsl(var(--line)); }

/* حالة فارغة */
.empty { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.empty .icon-box { margin-bottom: var(--space-1); }

/* إشعار */
.toast { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: 50; display: inline-flex; align-items: center; gap: var(--space-2); background: hsl(var(--dark)); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-weight: 500; box-shadow: var(--shadow-lg); animation: s-toast .25s var(--ease); }
.toast.success i { color: hsl(var(--secondary)); }
.toast.danger { background: hsl(var(--danger-700)); }
@keyframes s-toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* هيكل تحميل */
.skeleton { background: linear-gradient(90deg, hsl(var(--line)) 25%, hsl(var(--surface-2)) 50%, hsl(var(--line)) 75%); background-size: 200% 100%; animation: s-sk 1.4s ease infinite; border-radius: var(--radius); }
@keyframes s-sk { to { background-position: -200% 0; } }

/* عنوان الصفحة (لوحة سلة: عنوان + وصف + أزرار يسار) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head .title { display: flex; align-items: center; gap: var(--space-3); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }