/* ══════════════════════════════════════════════════════════════════════════
   sp-ui.css — مكوّنات الهوية الرسمية لسلوكي بلس («الوجه الجديد»، المرحلة 0)
   ══════════════════════════════════════════════════════════════════════════
   المصدر: البوابة الجديدة (portal_v2.html + portal-screens/screens.css) مُعمَّمةً.
   يعتمد على sp-tokens.css **حصرًا** — لا لون hex خارج الدلالات الفاتحة المعرَّفة هنا
   كرموز (--sp-*-bg). يُحمَّل بعد sp-tokens.css:

     <link rel="stylesheet" href="/static/fonts/google-fonts.css">
     <link rel="stylesheet" href="/static/sp-tokens.css?v=1">
     <link rel="stylesheet" href="/static/bootstrap-icons.css">
     <link rel="stylesheet" href="/static/css/sp-ui.css?v=1">

   ■ القواعد: Cairo وحده · أسطح مسطّحة (لا تدرّج ولا ظلّ ثقيل) · أيقونات Bootstrap Icons
     (لا إيموجي) · أرقام غربية (font-variant-numeric) · خصائص منطقية (inline/inset) فتعمل
     RTL وLTR معًا · البرتقالي للصعود وحده، والخصم أحمر.
   ■ النطاق: كل شيء تحت أصناف .sp-* — صفحةٌ تحمّل الملف لا يتغيّر فيها شيء حتى تستعمل
     الأصناف. الاستثناء الوحيد: body.sp-page (أساس الصفحة) وbody.sp-bs (جسر Bootstrap) —
     كلاهما باختيار الصفحة.
   ■ المعاينة: /static/redesign/components.html
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* أرضيات الدلالة الفاتحة (للشارات والتنبيهات) — مشتقّة من ألوان الدلالة */
  --sp-positive-bg: #E8F5EC;  --sp-positive-line: #CDE8D5;
  --sp-negative-bg: #FDECEA;  --sp-negative-line: #F6D3CF;
  --sp-warn:        #8A4B08;  /* نصّ التحذير — كهرماني داكن (تباين 6.9)، لا البرتقالي */
  --sp-warn-bg:     #FDF3E1;  --sp-warn-line:     #F3DDB5;

  /* المقاسات */
  --sp-radius-sm: 4px;
  --sp-radius:    6px;   /* الأزرار والحقول */
  --sp-radius-lg: 8px;   /* البطاقات واللوحات والنوافذ */
  --sp-control-h: 40px;
  --sp-control-h-sm: 32px;
  --sp-shadow-pop: 0 8px 24px rgba(19, 42, 48, .10);   /* القوائم المنبثقة والنوافذ وحدها */
  --sp-focus: 0 0 0 2px var(--sp-surface), 0 0 0 4px var(--sp-teal-500);
}

/* ── أساس الصفحة (اختياري: <body class="sp-page">) ─────────────────────────── */
body.sp-page {
  margin: 0; font-family: var(--sp-font-ui); background: var(--sp-ground); color: var(--sp-ink);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body.sp-page *, body.sp-page *::before, body.sp-page *::after { box-sizing: border-box; }
body.sp-page a { color: inherit; text-decoration: none; }
body.sp-page button, body.sp-page input, body.sp-page select, body.sp-page textarea { font-family: inherit; }
.sp-num, .sp-table td.num, .sp-stat b { font-variant-numeric: tabular-nums; }
.sp-muted { color: var(--sp-muted); }
.sp-pos { color: var(--sp-positive); }
.sp-neg { color: var(--sp-negative); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.sp-page [hidden] { display: none !important; }   /* hidden يغلب display أي صنف (sp-btn مثلًا) */

/* ── الهيكل: شريط جانبي + محتوى ─────────────────────────────────────────── */
.sp-shell { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.sp-shell.no-side { grid-template-columns: 1fr; }
.sp-side {
  background: var(--sp-surface); border-inline-start: 1px solid var(--sp-line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
}
.sp-brand { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--sp-line); }
.sp-brand img { width: 36px; height: 36px; object-fit: contain; }
.sp-brand b { display: block; font-size: 1rem; color: var(--sp-teal-700); line-height: 1.2; }
.sp-brand small { color: var(--sp-muted); font-size: .78rem; }
.sp-nav { padding: 8px 12px 24px; flex: 1; }
.sp-nav-label { padding: 14px 12px 6px; color: var(--sp-muted); font-size: .76rem; font-weight: 700; }
.sp-nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--sp-radius);
  font-size: .9rem; color: var(--sp-ink); transition: background var(--sp-dur-tap) var(--sp-ease);
}
.sp-nav a .bi { color: var(--sp-teal-700); width: 18px; text-align: center; }
.sp-nav a:hover { background: var(--sp-ground); }
.sp-nav a.active, .sp-nav a[aria-current="page"] { background: var(--sp-teal-50); color: var(--sp-teal-700); font-weight: 700; }
.sp-main { min-width: 0; }

/* ── الشريط العلوي ───────────────────────────────────────────────────────── */
.sp-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  background: var(--sp-surface); border-bottom: 1px solid var(--sp-line); padding: 12px 32px; min-height: 64px;
}
.sp-top-title { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-top-title img { width: 32px; height: 32px; object-fit: contain; }
.sp-top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

/* ── المحتوى ورأس الصفحة ─────────────────────────────────────────────────── */
.sp-content { padding: 28px 32px 48px; max-width: 1180px; }
.sp-content.wide { max-width: none; }
.sp-content.narrow { max-width: 640px; }
.sp-page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.sp-page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
.sp-page-head p { margin: 2px 0 0; color: var(--sp-muted); font-size: .9rem; }
.sp-page-head .sp-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-back {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); color: var(--sp-ink);
}
.sp-back:hover { background: var(--sp-ground); }
html[dir="ltr"] .sp-back .bi-arrow-right, html[dir="ltr"] .sp-flip { transform: scaleX(-1); }
.sp-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.sp-section-title .bi { color: var(--sp-teal-700); }

/* ── الأزرار ─────────────────────────────────────────────────────────────── */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--sp-control-h); padding: 0 16px; border-radius: var(--sp-radius);
  border: 1px solid var(--sp-line); background: var(--sp-surface); color: var(--sp-ink);
  font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background var(--sp-dur-tap) var(--sp-ease), border-color var(--sp-dur-tap) var(--sp-ease);
}
.sp-btn:hover { background: var(--sp-ground); }
.sp-btn:focus-visible, .sp-input:focus-visible, .sp-select:focus-visible, .sp-textarea:focus-visible,
.sp-tab:focus-visible, .sp-icon-btn:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.sp-btn.primary { background: var(--sp-teal-700); border-color: var(--sp-teal-700); color: #fff; }
.sp-btn.primary:hover { background: var(--sp-teal-900); border-color: var(--sp-teal-900); }
/* الزرّ الصاعد الواحد في الصفحة (منح نقطة، اعتماد) — برتقالي بنصّ تركواز الليل */
.sp-btn.ascend { background: var(--sp-orange-500); border-color: var(--sp-orange-500); color: var(--sp-teal-900); }
.sp-btn.ascend:hover { filter: brightness(.95); }
.sp-btn.danger { background: var(--sp-surface); border-color: var(--sp-negative-line); color: var(--sp-negative); }
.sp-btn.danger:hover { background: var(--sp-negative-bg); }
.sp-btn.danger.solid { background: var(--sp-negative); border-color: var(--sp-negative); color: #fff; }
.sp-btn.ghost { border-color: transparent; background: none; color: var(--sp-teal-700); }
.sp-btn.ghost:hover { background: var(--sp-teal-50); }
.sp-btn.sm { height: var(--sp-control-h-sm); padding: 0 12px; font-size: .82rem; }
.sp-btn.block { width: 100%; }
.sp-btn[disabled], .sp-btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
.sp-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.sp-btn.is-busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--sp-line); border-top-color: var(--sp-teal-700);
  animation: sp-spin .8s linear infinite;
}
.sp-btn.primary.is-busy::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.sp-icon-btn {
  display: grid; place-items: center; flex: none; width: var(--sp-control-h); height: var(--sp-control-h);
  border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: none; color: var(--sp-ink);
  font-size: 1.05rem; cursor: pointer; position: relative;
}
.sp-icon-btn:hover { background: var(--sp-ground); }
.sp-icon-btn.sm { width: var(--sp-control-h-sm); height: var(--sp-control-h-sm); font-size: .9rem; }
.sp-icon-btn .sp-count {
  position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--sp-negative); color: #fff; font-size: .68rem; font-weight: 800;
  line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.sp-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── الحقول ─────────────────────────────────────────────────────────────── */
.sp-field { margin-bottom: 14px; }
.sp-field > label, .sp-label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--sp-ink); }
.sp-field .sp-hint { font-size: .78rem; color: var(--sp-muted); margin-top: 4px; }
.sp-field .sp-err { font-size: .78rem; color: var(--sp-negative); margin-top: 4px; }
.sp-input, .sp-select, .sp-textarea {
  width: 100%; min-height: var(--sp-control-h); padding: 8px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
  font-family: inherit; font-size: .92rem; background: var(--sp-surface); color: var(--sp-ink);
  transition: border-color var(--sp-dur-tap) var(--sp-ease);
}
.sp-input::placeholder, .sp-textarea::placeholder { color: var(--sp-zero); }
.sp-input:hover, .sp-select:hover, .sp-textarea:hover { border-color: var(--sp-zero); }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus { outline: none; border-color: var(--sp-teal-500); box-shadow: 0 0 0 3px var(--sp-teal-100); }
.sp-input.invalid, .sp-select.invalid, .sp-textarea.invalid { border-color: var(--sp-negative); }
.sp-input[disabled], .sp-select[disabled], .sp-textarea[disabled] { background: var(--sp-ground); color: var(--sp-muted); }
.sp-input.sm, .sp-select.sm { min-height: var(--sp-control-h-sm); padding: 4px 10px; font-size: .85rem; }
.sp-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.sp-input-icon { position: relative; }
.sp-input-icon > .bi { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--sp-muted); pointer-events: none; }
.sp-input-icon > .sp-input { padding-inline-start: 38px; }
.sp-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.sp-check input { width: 18px; height: 18px; accent-color: var(--sp-teal-700); margin: 0; }
.sp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; }
.sp-switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--sp-track);
  position: relative; margin: 0; cursor: pointer; transition: background var(--sp-dur-ui) var(--sp-ease); flex: none; }
.sp-switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(19,42,48,.25); transition: inset-inline-start var(--sp-dur-ui) var(--sp-ease); }
.sp-switch input:checked { background: var(--sp-teal-700); }
.sp-switch input:checked::after { inset-inline-start: 19px; }
.sp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* ── البطاقات واللوحات ───────────────────────────────────────────────────── */
.sp-card { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); padding: 18px; }
.sp-card + .sp-card { margin-top: 16px; }
.sp-card > h2, .sp-card > h3 { margin: 0 0 12px; font-size: .98rem; font-weight: 700; }
.sp-panel { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); min-width: 0; overflow: hidden; }
.sp-panel-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--sp-line); }
.sp-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sp-panel-head h2 .bi { color: var(--sp-teal-700); }
.sp-panel-head a { font-size: .84rem; color: var(--sp-teal-700); font-weight: 600; }
.sp-panel-body { padding: 16px 18px; }
.sp-grid { display: grid; gap: 16px; }
.sp-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── بطاقات المؤشرات (لوحة «اليوم») ─────────────────────────────────────── */
.sp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--sp-line); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); overflow: hidden; margin-bottom: 20px;
}
.sp-stat { background: var(--sp-surface); padding: 14px 18px; min-width: 0; }
.sp-stat small { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); font-size: .8rem; }
.sp-stat small .bi { color: var(--sp-teal-700); }
.sp-stat b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.3; }
.sp-stat b.na { color: var(--sp-zero); }
.sp-stat .sp-delta { font-size: .78rem; color: var(--sp-muted); }
.sp-delta.up { color: var(--sp-positive); }
.sp-delta.down { color: var(--sp-negative); }

/* ── الجداول ─────────────────────────────────────────────────────────────── */
.sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--sp-surface); }
.sp-table th {
  text-align: start; font-weight: 600; color: var(--sp-muted); font-size: .78rem; padding: 10px 14px;
  border-bottom: 1px solid var(--sp-line); background: var(--sp-surface); white-space: nowrap;
}
.sp-table.sticky th { position: sticky; top: 0; z-index: 1; }
.sp-table td { padding: 11px 14px; border-bottom: 1px solid var(--sp-line); vertical-align: middle; }
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table tbody tr:hover td { background: var(--sp-ground); }
.sp-table td.num, .sp-table th.num { text-align: end; }
.sp-table.compact th, .sp-table.compact td { padding: 7px 10px; }
.sp-table.striped tbody tr:nth-child(even) td { background: #FAFCFC; }

/* ── الشارات والحالات ────────────────────────────────────────────────────── */
.sp-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: .76rem; font-weight: 700;
  padding: 2px 10px; border-radius: var(--sp-radius-sm); border: 1px solid var(--sp-line);
  background: var(--sp-ground); color: var(--sp-muted); line-height: 1.6; font-variant-numeric: tabular-nums;
}
.sp-badge.pos  { background: var(--sp-positive-bg); color: var(--sp-positive); border-color: var(--sp-positive-line); }
.sp-badge.neg  { background: var(--sp-negative-bg); color: var(--sp-negative); border-color: var(--sp-negative-line); }
.sp-badge.info { background: var(--sp-teal-50); color: var(--sp-teal-700); border-color: var(--sp-teal-100); }
.sp-badge.warn { background: var(--sp-warn-bg); color: var(--sp-warn); border-color: var(--sp-warn-line); }
.sp-badge.ascend { background: var(--sp-orange-100); color: var(--sp-orange-text); border-color: #F8CDB0; }
.sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-zero); flex: none; }
.sp-dot.pos { background: var(--sp-positive); } .sp-dot.neg { background: var(--sp-negative); }
.sp-dot.info { background: var(--sp-teal-500); } .sp-dot.warn { background: #B7791F; }
.sp-count-pill {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sp-teal-700); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; display: inline-block;
}
.sp-count-pill.neg { background: var(--sp-negative); }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px;
  border: 1px solid var(--sp-line); background: var(--sp-surface); font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--sp-ink);
}
.sp-chip.on, .sp-chip[aria-pressed="true"] { background: var(--sp-teal-50); border-color: var(--sp-teal-500); color: var(--sp-teal-700); }

/* ── تنبيه داخل الصفحة ───────────────────────────────────────────────────── */
.sp-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-teal-100); background: var(--sp-teal-50); color: var(--sp-ink); font-size: .88rem; margin-bottom: 16px;
}
.sp-alert > .bi { font-size: 1.05rem; color: var(--sp-teal-700); margin-top: 1px; }
.sp-alert.pos  { background: var(--sp-positive-bg); border-color: var(--sp-positive-line); } .sp-alert.pos > .bi { color: var(--sp-positive); }
.sp-alert.neg  { background: var(--sp-negative-bg); border-color: var(--sp-negative-line); } .sp-alert.neg > .bi { color: var(--sp-negative); }
.sp-alert.warn { background: var(--sp-warn-bg); border-color: var(--sp-warn-line); }       .sp-alert.warn > .bi { color: var(--sp-warn); }
.sp-alert b { display: block; }

/* ── التبويبات والمقطّع ──────────────────────────────────────────────────── */
.sp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sp-line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--sp-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sp-tab:hover { color: var(--sp-ink); }
.sp-tab.on, .sp-tab[aria-selected="true"] { color: var(--sp-teal-700); border-bottom-color: var(--sp-teal-700); font-weight: 700; }
.sp-segmented { display: inline-flex; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; background: var(--sp-surface); }
.sp-segmented button { border: 0; background: none; padding: 0 14px; height: 36px; font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--sp-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sp-segmented button + button { border-inline-start: 1px solid var(--sp-line); }
.sp-segmented button.on, .sp-segmented button[aria-pressed="true"] { background: var(--sp-teal-700); color: #fff; }

/* ── شريط الأدوات (بحث + فلاتر) ──────────────────────────────────────────── */
.sp-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.sp-toolbar .sp-input-icon { flex: 1; min-width: 200px; max-width: 420px; }

/* ── الحالات: فارغ · خطأ · تحميل ─────────────────────────────────────────── */
.sp-empty { text-align: center; padding: 32px 18px; color: var(--sp-muted); font-size: .9rem; }
.sp-empty > .bi { display: block; font-size: 2rem; color: var(--sp-zero); margin-bottom: 8px; }
.sp-empty b { display: block; color: var(--sp-ink); font-size: .95rem; margin-bottom: 2px; }
.sp-empty.inline { text-align: start; padding: 10px 0; }
.sp-error { color: var(--sp-negative); font-size: .88rem; padding: 10px 0; display: flex; gap: 8px; align-items: center; }
.sp-spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sp-line); border-top-color: var(--sp-teal-700); animation: sp-spin .8s linear infinite; vertical-align: middle; }
.sp-spinner.lg { width: 32px; height: 32px; border-width: 3px; }
.sp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 18px; color: var(--sp-muted); font-size: .88rem; }
.sp-skeleton { background: var(--sp-track); border-radius: var(--sp-radius-sm); min-height: 12px; animation: sp-pulse 1.4s ease-in-out infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── النافذة (dialog) ────────────────────────────────────────────────────── */
.sp-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(19, 42, 48, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sp-modal {
  background: var(--sp-surface); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-pop);
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
}
.sp-modal.lg { max-width: 820px; }
.sp-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sp-line); }
.sp-modal-head h2 { margin: 0; font-size: 1.02rem; font-weight: 800; flex: 1; }
.sp-modal-body { padding: 18px; overflow-y: auto; }
.sp-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--sp-line); background: var(--sp-ground); }
dialog.sp-modal { border: 0; padding: 0; }
dialog.sp-modal::backdrop { background: rgba(19, 42, 48, .45); }

/* ── القائمة المنبثقة ────────────────────────────────────────────────────── */
.sp-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 220px; z-index: 30; padding: 6px;
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-pop);
}
.sp-menu button, .sp-menu a {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none;
  border-radius: var(--sp-radius); font-size: .88rem; color: var(--sp-ink); cursor: pointer; text-align: start; font-family: inherit;
}
.sp-menu button:hover, .sp-menu a:hover { background: var(--sp-ground); }
.sp-menu .bi { color: var(--sp-teal-700); width: 18px; text-align: center; }
.sp-menu hr { border: 0; border-top: 1px solid var(--sp-line); margin: 6px 0; }
.sp-menu .danger, .sp-menu .danger .bi { color: var(--sp-negative); }

/* ── الإشعار العابر (toast) ──────────────────────────────────────────────── */
.sp-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 8px); z-index: 2000;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: var(--sp-radius); font-size: .88rem; font-weight: 600;
  background: var(--sp-ink); color: #fff; opacity: 0; pointer-events: none;
  transition: opacity var(--sp-dur-ui) var(--sp-ease), transform var(--sp-dur-ui) var(--sp-ease);
}
.sp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sp-toast.success { background: var(--sp-positive); }
.sp-toast.warn    { background: var(--sp-teal-900); }
.sp-toast.error   { background: var(--sp-negative); }

/* ── الصورة الرمزية والقوائم ─────────────────────────────────────────────── */
.sp-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sp-teal-700); color: #fff; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem; overflow: hidden;
}
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-avatar.lg { width: 48px; height: 48px; font-size: 1rem; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sp-line); font-size: .88rem; }
.sp-list > li:last-child { border-bottom: 0; }
.sp-list .grow { flex: 1; min-width: 0; }
.sp-list small { display: block; color: var(--sp-muted); font-size: .78rem; }

/* ── الترقيم ─────────────────────────────────────────────────────────────── */
.sp-pager { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 12px 0; font-size: .85rem; }
.sp-pager button { min-width: 32px; height: 32px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); cursor: pointer; font-family: inherit; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-pager button.on { background: var(--sp-teal-700); border-color: var(--sp-teal-700); color: #fff; }
.sp-pager button[disabled] { opacity: .5; cursor: default; }

/* ── شريط التقدّم ────────────────────────────────────────────────────────── */
.sp-progress { height: 6px; border-radius: 3px; background: var(--sp-track); overflow: hidden; }
.sp-progress > span { display: block; height: 100%; background: var(--sp-teal-500); border-radius: inherit; transition: width var(--sp-dur-ui) var(--sp-ease); }
.sp-progress.ascend > span { background: var(--sp-orange-500); }

/* ── الجوال ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .sp-grid.cols-3, .sp-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sp-shell { grid-template-columns: 1fr; }
  .sp-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 86%; max-width: 320px; z-index: 20;
    transform: translateX(100%); transition: transform var(--sp-dur-ui) var(--sp-ease); box-shadow: 0 0 0 1px var(--sp-line); }
  html[dir="ltr"] .sp-side { transform: translateX(-100%); }
  body.sp-nav-open .sp-side { transform: none; }
  .sp-top { padding: 10px 16px; gap: 8px; min-height: 56px; }
  .sp-content { padding: 20px 16px 40px; }
  .sp-page-head h1 { font-size: 1.25rem; }
  .sp-grid.cols-2, .sp-grid.cols-3, .sp-grid.cols-4 { grid-template-columns: 1fr; }
  .sp-stats { grid-template-columns: repeat(2, 1fr); }
  .sp-modal-backdrop { align-items: flex-end; padding: 0; }
  .sp-modal { max-width: none; border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0; max-height: 92vh; }
  .sp-hide-mobile { display: none !important; }
}
@media (min-width: 861px) { .sp-show-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .sp-spinner, .sp-btn.is-busy::after, .sp-skeleton { animation-duration: 2.4s; }
  .sp-toast, .sp-side, .sp-switch input::after { transition: none; }
}

@media print {
  .sp-side, .sp-top, .sp-toast, .sp-no-print { display: none !important; }
  .sp-shell { display: block; }
  .sp-content { padding: 0; max-width: none; }
  .sp-card, .sp-panel, .sp-stats { border-color: #999; }
}

/* ══════════════════════════════════════════════════════════════════════════
   جسر Bootstrap 5 (اختياري: <body class="sp-bs">)
   صفحاتٌ كثيرة مبنيّة على Bootstrap (42 من 87 في static/). هذا الجسر يعيد تلوين مكوّناته
   برموز الهوية — أزرار وحقول وجداول وتنبيهات ونوافذ — دون تغيير الـHTML، ليكون الخطوة الأولى
   الآمنة لكل صفحة Bootstrap قبل استبدال مكوّناتها بأصناف sp-*.
   ══════════════════════════════════════════════════════════════════════════ */
body.sp-bs {
  --bs-body-font-family: var(--sp-font-ui);
  --bs-body-color: var(--sp-ink);
  --bs-body-bg: var(--sp-ground);
  --bs-border-color: var(--sp-line);
  --bs-border-radius: var(--sp-radius);
  --bs-border-radius-lg: var(--sp-radius-lg);
  --bs-primary: var(--sp-teal-700);
  --bs-primary-rgb: 18, 94, 110;
  --bs-success: var(--sp-positive);
  --bs-success-rgb: 21, 128, 61;
  --bs-danger: var(--sp-negative);
  --bs-danger-rgb: 180, 35, 24;
  --bs-secondary-color: var(--sp-muted);
  --bs-link-color: var(--sp-teal-700);
  --bs-link-color-rgb: 18, 94, 110;
  --bs-link-hover-color: var(--sp-teal-900);
  --bs-focus-ring-color: rgba(47, 132, 148, .35);
  font-family: var(--sp-font-ui);
}
body.sp-bs .btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: var(--sp-radius); box-shadow: none; }
body.sp-bs .btn-primary {
  --bs-btn-bg: var(--sp-teal-700); --bs-btn-border-color: var(--sp-teal-700);
  --bs-btn-hover-bg: var(--sp-teal-900); --bs-btn-hover-border-color: var(--sp-teal-900);
  --bs-btn-active-bg: var(--sp-teal-900); --bs-btn-active-border-color: var(--sp-teal-900);
  --bs-btn-disabled-bg: var(--sp-teal-700); --bs-btn-disabled-border-color: var(--sp-teal-700);
}
body.sp-bs .btn-outline-primary {
  --bs-btn-color: var(--sp-teal-700); --bs-btn-border-color: var(--sp-teal-700);
  --bs-btn-hover-bg: var(--sp-teal-700); --bs-btn-hover-border-color: var(--sp-teal-700);
  --bs-btn-active-bg: var(--sp-teal-900);
}
body.sp-bs .btn-success { --bs-btn-bg: var(--sp-positive); --bs-btn-border-color: var(--sp-positive); --bs-btn-hover-bg: #116632; --bs-btn-hover-border-color: #116632; }
body.sp-bs .btn-danger  { --bs-btn-bg: var(--sp-negative); --bs-btn-border-color: var(--sp-negative); --bs-btn-hover-bg: #8F1C13; --bs-btn-hover-border-color: #8F1C13; }
body.sp-bs .btn-secondary, body.sp-bs .btn-light {
  --bs-btn-bg: var(--sp-surface); --bs-btn-color: var(--sp-ink); --bs-btn-border-color: var(--sp-line);
  --bs-btn-hover-bg: var(--sp-ground); --bs-btn-hover-color: var(--sp-ink); --bs-btn-hover-border-color: var(--sp-line);
}
body.sp-bs .form-control, body.sp-bs .form-select { border-color: var(--sp-line); border-radius: var(--sp-radius); }
body.sp-bs .form-control:focus, body.sp-bs .form-select:focus { border-color: var(--sp-teal-500); box-shadow: 0 0 0 3px var(--sp-teal-100); }
body.sp-bs .form-check-input:checked { background-color: var(--sp-teal-700); border-color: var(--sp-teal-700); }
body.sp-bs .card { --bs-card-border-color: var(--sp-line); --bs-card-border-radius: var(--sp-radius-lg); --bs-card-cap-bg: var(--sp-surface); box-shadow: none; }
body.sp-bs .table { --bs-table-color: var(--sp-ink); --bs-table-border-color: var(--sp-line); --bs-table-hover-bg: var(--sp-ground); --bs-table-striped-bg: #FAFCFC; }
body.sp-bs .table > thead th { color: var(--sp-muted); font-weight: 600; font-size: .8rem; }
body.sp-bs .modal { --bs-modal-border-radius: var(--sp-radius-lg); --bs-modal-border-color: var(--sp-line); }
body.sp-bs .nav-tabs .nav-link.active, body.sp-bs .nav-pills .nav-link.active { color: var(--sp-teal-700); }
body.sp-bs .nav-pills .nav-link.active { background: var(--sp-teal-700); color: #fff; }
body.sp-bs .alert-info    { --bs-alert-bg: var(--sp-teal-50); --bs-alert-border-color: var(--sp-teal-100); --bs-alert-color: var(--sp-ink); }
body.sp-bs .alert-success { --bs-alert-bg: var(--sp-positive-bg); --bs-alert-border-color: var(--sp-positive-line); --bs-alert-color: var(--sp-positive); }
body.sp-bs .alert-danger  { --bs-alert-bg: var(--sp-negative-bg); --bs-alert-border-color: var(--sp-negative-line); --bs-alert-color: var(--sp-negative); }
body.sp-bs .alert-warning { --bs-alert-bg: var(--sp-warn-bg); --bs-alert-border-color: var(--sp-warn-line); --bs-alert-color: var(--sp-warn); }
body.sp-bs .badge.bg-primary { background-color: var(--sp-teal-700) !important; }
body.sp-bs .badge.bg-success { background-color: var(--sp-positive) !important; }
body.sp-bs .badge.bg-danger  { background-color: var(--sp-negative) !important; }
body.sp-bs .text-primary { color: var(--sp-teal-700) !important; }
body.sp-bs .bg-primary   { background-color: var(--sp-teal-700) !important; }