/* ============================================================
   Femto Vision — طبقة نظام التصميم (v8)
   ------------------------------------------------------------
   طبقة مُحسِّنة تُحمَّل بعد main.css. لا تحذف شيئاً من القديم،
   بل توحّد: مقياس الخط · سلّم المسافات · الأيقونات · البطاقات ·
   الجداول · الأزرار · الوضع الليلي · الطباعة.
   كل قيمة هنا رمز (token) — لا ألوان ولا مقاسات متناثرة.
   ============================================================ */

:root{
  /* ---- مقياس الخط: نسبة 1.2 ---- */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:14px;
  --fs-md:  16px;
  --fs-lg:  19px;
  --fs-xl:  23px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-body:  1.7;

  /* ---- سلّم المسافات (قاعدة 4px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- أوزان ---- */
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

  /* ---- دلالات اللون (مشتقّة، لا تُكرَّر) ---- */
  --ds-ink:        var(--text);
  --ds-ink-2:      var(--text-secondary);
  --ds-ink-3:      var(--muted);
  --ds-line:       var(--border);
  --ds-line-soft:  var(--border-light);
  --ds-surface:    var(--surface);
  --ds-raise:      var(--bg-secondary);
  --ds-brand:      var(--primary);
  --ds-brand-ink:  #ffffff;
  --ds-pos:        #0f8a5f;
  --ds-pos-bg:     #e6f6ef;
  --ds-neg:        #c23b35;
  --ds-neg-bg:     #fdecea;
  --ds-warn:       #9a6a04;
  --ds-warn-bg:    #fdf3dd;
  --ds-info:       #2563eb;
  --ds-info-bg:    #e8efff;
  --ds-focus:      0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);

  /* ---- ارتفاعات موحَّدة للعناصر التفاعلية ---- */
  --ctl-h:    40px;
  --ctl-h-sm: 32px;
  --ctl-r:    10px;
}

/* الوضع الليلي: إعادة تعريف الرموز فقط — لا قواعد مكرَّرة */
body.dark-mode,
:root[data-theme="dark"]{
  --ds-brand-ink: #06201c;
  --ds-pos:     #4ed19a;  --ds-pos-bg:  #12332a;
  --ds-neg:     #ff8a80;  --ds-neg-bg:  #3a1f1d;
  --ds-warn:    #e9c766;  --ds-warn-bg: #352c14;
  --ds-info:    #7fb0ff;  --ds-info-bg: #16233d;
}

/* ============================================================
   1) الطباعة والأرقام
   ============================================================ */
body{ font-size: var(--fs-base); line-height: var(--lh-body); }

h1,h2,h3,h4,.card-title,.page-title,.stat-value,.modal-title{
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1,.page-title{ font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing:-.01em; }
h2{ font-size: var(--fs-lg); font-weight: var(--fw-semi); }
h3{ font-size: var(--fs-md); font-weight: var(--fw-semi); }
.card-title{ font-size: var(--fs-md); font-weight: var(--fw-semi); margin-bottom: var(--sp-4); }
small,.small,.form-hint,.muted{ font-size: var(--fs-xs); line-height: var(--lh-snug); }

/* أرقام متساوية العرض في كل مكان يُقارَن فيه رقم برقم */
.stat-value,.data-table td,.data-table th,.kpi,.num,.eqbar,.yr-card,
.table-wrapper table,.stat-change,.dt-pager,.tile .n{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   2) الأيقونات (بدل الإيموجي)
   ============================================================ */
.ds-ico{ width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-0.17em; }
.ds-ico-inline{ margin-inline-end: var(--sp-2); }
.ds-ico-box{ width:20px; height:20px; }
.ds-lbl{ display:inline; }
.sidebar-nav-icon{ display:inline-flex; align-items:center; justify-content:center; width:22px; }
.sidebar-nav-icon .ds-ico{ width:19px; height:19px; opacity:.92; }
.card-title > .icon{
  width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); flex:0 0 auto;
}
.card-title > .icon .ds-ico{ width:17px; height:17px; }
.btn .ds-ico{ width:16px; height:16px; }

/* ============================================================
   3) البطاقات
   ============================================================ */
.card{
  padding: var(--sp-5);
  border: 1px solid var(--ds-line-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  margin-bottom: var(--sp-4);
}
body.dark-mode .card{ box-shadow:none; border-color: var(--ds-line); }
.card:hover{ box-shadow: 0 1px 2px rgba(15,23,42,.04); }

/* ---- بطاقات الأرقام: مدمجة ومتّسقة ---- */
.stats-grid,.stat-grid{
  display:grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat-card{
  padding: var(--sp-4) var(--sp-4);
  border-radius: 14px;
  border: 1px solid var(--ds-line-soft);
  box-shadow: none;
  display:flex; flex-direction:column; gap: var(--sp-1);
  min-height: 0;
}
.stat-card:hover{ transform:none; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
/* الشريط الجانبي الملوّن: أرفع وأهدأ */
.stat-card::after{ width:3px; opacity:.85; }
.stat-card::before{ display:none; }
.stat-label{
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--ds-ink-3); letter-spacing:.015em; order:1;
}
.stat-value{
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--ds-ink); letter-spacing:-.02em; order:2; line-height:1.15;
}
.stat-change{ font-size: var(--fs-xs); font-weight: var(--fw-medium); order:3; }
.stat-card .stat-icon,.stat-icon{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary); order:0; margin-bottom: var(--sp-1);
  box-shadow:none; font-size:0;
}
.stat-card .stat-icon{ position:static; margin-bottom: var(--sp-1); }
.stat-icon .ds-ico,.stat-card .stat-icon .ds-ico{ width:18px; height:18px; }
body.dark-mode .stat-card .stat-icon{ filter:none; background: color-mix(in srgb, var(--primary) 20%, transparent) !important; color: var(--primary-lighter) !important; }
/* نغمات دلالية للبطاقات حسب دورها */
.stat-card.success .stat-icon{ background: var(--ds-pos-bg) !important; color: var(--ds-pos) !important; }
.stat-card.warning .stat-icon{ background: var(--ds-warn-bg) !important; color: var(--ds-warn) !important; }
.stat-card.danger  .stat-icon{ background: var(--ds-neg-bg) !important; color: var(--ds-neg) !important; }
.stat-card.info    .stat-icon{ background: var(--ds-info-bg) !important; color: var(--ds-info) !important; }
.stat-card.purple  .stat-icon{ background: color-mix(in srgb, var(--purple) 13%, transparent) !important; color: var(--purple) !important; }

/* ============================================================
   4) الجداول
   ============================================================ */
.data-table{ font-size: var(--fs-sm); border-collapse: separate; border-spacing:0; }
.data-table th{
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--ds-ink-3); letter-spacing:.02em;
  background: var(--ds-raise);
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--ds-line);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.data-table td{
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--ds-line-soft);
  vertical-align: middle;
}
.data-table tbody tr:nth-child(even) td{
  background: color-mix(in srgb, var(--ds-raise) 45%, transparent);
}
.data-table tbody tr:hover td{
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.data-table tfoot td{
  background: var(--ds-raise); font-weight: var(--fw-bold);
  border-top: 2px solid var(--ds-line); border-bottom: none;
}
.table-wrapper{ border:1px solid var(--ds-line-soft); border-radius:12px; overflow:auto; }
.table-wrapper > table{ margin:0; }

/* ============================================================
   5) الأزرار والشرائح
   ============================================================ */
.btn{
  min-height: var(--ctl-h); border-radius: var(--ctl-r);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  padding: 0 var(--sp-4); gap: var(--sp-2);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active{ transform: translateY(1px); }
.btn-sm{ min-height: var(--ctl-h-sm); font-size: var(--fs-xs); padding: 0 var(--sp-3); border-radius:8px; }
.btn-icon{ width: var(--ctl-h-sm); height: var(--ctl-h-sm); min-height:0; padding:0; border-radius:8px; }
.btn-primary{ background: var(--primary); color: var(--ds-brand-ink); border:1px solid var(--primary); }
.btn-primary:hover{ background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary{
  background: var(--ds-surface); color: var(--ds-ink);
  border:1px solid var(--ds-line);
}
.btn-secondary:hover{ border-color: var(--primary); color: var(--primary); background: var(--ds-surface); }
.btn:focus-visible,.chip:focus-visible,.form-input:focus-visible,
.form-select:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: var(--ds-focus);
}
/* شريحة فترة/فلتر: حالة نشطة واضحة */
.chip,.pill{
  min-height: var(--ctl-h-sm); border-radius:999px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 0 var(--sp-3); display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-2);
}
.chip.active,.pill.active,.chip[aria-pressed="true"]{
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary); color: var(--primary); font-weight: var(--fw-semi);
}

/* ============================================================
   6) الحقول
   ============================================================ */
.form-input,.form-select,input[type="text"],input[type="date"],input[type="time"],
input[type="number"],input[type="search"],input[type="password"],select,textarea{
  min-height: var(--ctl-h); border-radius: var(--ctl-r);
  font-size: var(--fs-sm); border:1px solid var(--ds-line);
  background: var(--ds-surface); color: var(--ds-ink);
  padding: 0 var(--sp-3);
}
textarea{ padding: var(--sp-3); min-height: 90px; line-height: var(--lh-snug); }
.form-label{
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--ds-ink-2); margin-bottom: 6px; display:flex; align-items:center; gap:6px;
}

/* ============================================================
   7) التنبيهات
   ============================================================ */
.alert{
  border-radius: 12px; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  border:1px solid transparent; display:flex; gap: var(--sp-2); align-items:flex-start;
}
.alert-warning{ background: var(--ds-warn-bg); color: var(--ds-warn); border-color: color-mix(in srgb, var(--ds-warn) 28%, transparent); }
.alert-danger { background: var(--ds-neg-bg);  color: var(--ds-neg);  border-color: color-mix(in srgb, var(--ds-neg) 28%, transparent); }
.alert-success{ background: var(--ds-pos-bg);  color: var(--ds-pos);  border-color: color-mix(in srgb, var(--ds-pos) 28%, transparent); }
.alert-info   { background: var(--ds-info-bg); color: var(--ds-info); border-color: color-mix(in srgb, var(--ds-info) 28%, transparent); }

/* شارات الحالة */
.badge,.status-badge{
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  padding: 3px 9px; border-radius:999px; letter-spacing:.01em;
}

/* ============================================================
   8) القائمة الجانبية
   ============================================================ */
.sidebar-nav-item{
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border-radius: 10px; gap: var(--sp-3);
}
.sidebar-nav-section{
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  letter-spacing:.08em; text-transform:none; opacity:.55;
  margin: var(--sp-4) 0 var(--sp-1);
}

/* ============================================================
   9) الهاتف — كثافة أعلى
   ============================================================ */
@media (max-width: 560px){
  .stats-grid,.stat-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-2); }
  .stat-card{ padding: var(--sp-3); }
  .stat-value{ font-size: var(--fs-xl); }
  .stat-icon{ width:28px; height:28px; border-radius:8px; }
  .stat-icon .ds-ico{ width:15px; height:15px; }
  .card{ padding: var(--sp-4); border-radius:12px; }
  .quick-book-btn{ min-height:52px; font-size: var(--fs-md); }
  h1,.page-title{ font-size: var(--fs-lg); }
  .data-table th,.data-table td{ padding: var(--sp-2); }
}

/* ============================================================
   10) الطباعة — التقارير على ورق
   ============================================================ */
@media print{
  @page{ size: A4; margin: 14mm 12mm; }
  html,body{ background:#fff !important; color:#000 !important; font-size:11.5pt; }
  .sidebar,.topbar,.fab,#fabBooking,.no-print,.btn,.chip,.pill,
  .sidebar-overlay,.toast-container,.modal-overlay,.dt-pager,.tb-search{ display:none !important; }
  .app-layout,.main-content{ margin:0 !important; padding:0 !important; display:block !important; }
  .card{
    box-shadow:none !important; border:1px solid #cfd6d2 !important;
    break-inside: avoid; page-break-inside: avoid; margin-bottom:8mm;
  }
  .card-title{ font-size:13pt; }
  .stats-grid,.stat-grid{ grid-template-columns: repeat(4,1fr) !important; gap:4mm !important; }
  .stat-card{ border:1px solid #cfd6d2 !important; }
  .stat-value{ font-size:16pt; }
  .table-wrapper{ overflow: visible !important; border:none !important; }
  .data-table{ font-size:9.5pt; width:100% !important; }
  .data-table thead{ display: table-header-group; }   /* ترويسة تتكرّر في كل صفحة */
  .data-table tr{ break-inside: avoid; page-break-inside: avoid; }
  .data-table th{ background:#eef2f0 !important; color:#000 !important; position: static !important; }
  .data-table tbody tr:nth-child(even) td{ background:#f7f9f8 !important; }
  svg{ max-width:100% !important; }
  a[href]:after{ content:""; }
  .print-only{ display:block !important; }
}
.print-only{ display:none; }

/* ============================================================
   11) إمكانية الوصول
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:8px; z-index:9999;
  background: var(--primary); color:#fff; padding:10px 16px; border-radius:8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.skip-link:focus{ inset-inline-start:12px; }

/* ============================================================
   12) توحيد مكوّنات لوحة التحكم مع نظام التصميم
   ------------------------------------------------------------
   كانت بطاقة الأرقام مكتوبة مرتين بفئتين مختلفتين: .stat-card في
   main.css و.dash-stat داخل dashboard.php. النتيجة مقاسان وحشوتان
   وخطّان مختلفان لنفس العنصر. هنا نوحّدهما على نفس الرموز.
   ============================================================ */
.dash-stat{
  background: var(--ds-surface);
  border: 1px solid var(--ds-line-soft);
  border-radius: 14px;
  padding: var(--sp-4);
  box-shadow: none;
}
.dash-stat:hover{ box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.ds-label{ font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ds-ink-3); margin-bottom: 4px; }
.ds-value{ font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.ds-sub{ font-size: var(--fs-xs); color: var(--ds-ink-3); margin-top: 3px; }
.ds-change{ font-size: var(--fs-xs); font-weight: var(--fw-medium); margin-top: var(--sp-2); }
.ds-icon{
  width:34px; height:34px; border-radius:10px; font-size:0;
  background: color-mix(in srgb, var(--primary) 11%, transparent) !important;
  color: var(--primary) !important;
}
.ds-icon .ds-ico{ width:18px; height:18px; }
/* الشبكة تملأ ما يوجد من بطاقات بدل ترك فراغ في الصف */
.dash-stats{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: var(--sp-3) !important; }
.dash-grid-3{ gap: var(--sp-4) !important; }

/* خلايا حالة العمليات */
.ops-cell,.quick-box{
  background: var(--ds-raise); border:1px solid var(--ds-line-soft);
  border-radius:12px; padding: var(--sp-3);
}
.ops-cell .ds-ico,.quick-box .ds-ico{ width:15px; height:15px; opacity:.75; }
.quick-box .qv{ font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.quick-box .ql{ font-size: var(--fs-xs); }
.alert-row{ background: var(--ds-raise); border:1px solid var(--ds-line-soft); border-radius:12px; }
.alert-row .ar-icon{ display:inline-flex; color: var(--ds-ink-3); }
.alert-row .ar-icon .ds-ico{ width:18px; height:18px; }

/* زر الحجز السريع: كان يملأ ثلث الشاشة */
.quick-book-btn{
  min-height:56px; max-height:64px; font-size: var(--fs-md);
  font-weight: var(--fw-semi); border-radius:14px;
}

/* التقويم المصغّر: أرقام متساوية العرض */
.mini-cal{ font-variant-numeric: tabular-nums; }
.doc-rank{ font-variant-numeric: tabular-nums; }

/* شريط التقدّم */
.ops-track{ height:8px; border-radius:99px; }

/* ============================================================
   13) تفاصيل RTL وتباين الوضع الليلي
   ============================================================ */
body.dark-mode .data-table th{ background: color-mix(in srgb, var(--surface) 70%, #000); color: var(--ds-ink-2); }
body.dark-mode .data-table tbody tr:nth-child(even) td{ background: color-mix(in srgb, var(--surface) 86%, #fff 2%); }
body.dark-mode .table-wrapper{ border-color: var(--ds-line); }
body.dark-mode .btn-secondary{ background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink); }
body.dark-mode .chip,body.dark-mode .pill{ background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink-2); }
body.dark-mode .card-title > .icon{ background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-lighter); }

/* الأسهم النصّية ← → تتبع اتجاه الصفحة بدل أن تُقلب يدوياً */
[dir="rtl"] .ds-flip{ transform: scaleX(-1); }

/* ============================================================
   14) ترويسة الطباعة
   ============================================================ */
.print-head{ display:none; }
@media print{
  .print-head{
    display:flex !important; justify-content:space-between; align-items:baseline;
    border-bottom:2px solid #0d8a7a; padding-bottom:3mm; margin-bottom:6mm;
  }
  .print-head .ph-brand{ font-size:13pt; font-weight:700; color:#0d8a7a; }
  .print-head .ph-meta{ font-size:9.5pt; color:#444; font-variant-numeric: tabular-nums; }
}

/* ============================================================
   15) معاينة لون العلامة في الإعدادات
   ============================================================ */
.brand-preview{
  display:flex; gap: var(--sp-3); align-items:center; flex-wrap:wrap;
  padding: var(--sp-3); border:1px solid var(--ds-line-soft); border-radius:12px;
  background: var(--ds-raise); margin-top: var(--sp-2);
}
.brand-swatch{ width:38px; height:38px; border-radius:10px; border:1px solid var(--ds-line); }
.brand-chipset{ display:flex; gap:6px; align-items:center; }
.brand-chipset .bc{ width:26px; height:26px; border-radius:7px; border:1px solid var(--ds-line); }
.brand-note{ font-size: var(--fs-xs); color: var(--ds-ink-3); }
.brand-note.bad{ color: var(--ds-neg); font-weight: var(--fw-semi); }

/* ============================================================
   16) تباين مطابق لمعيار WCAG AA
   ------------------------------------------------------------
   لون العلامة #0d9488 مع نص أبيض يعطي 3.74:1 وهو تحت الحدّ (4.5:1)
   لحجم النص المستعمل في الأزرار. نستعمل الدرجة «القوية» المحسوبة
   في includes/layout.php للأسطح الصلبة، ونُبقي لون العلامة نفسه
   للحدود والأيقونات والنصوص الكبيرة حيث التباين كافٍ.
   ============================================================ */
.btn-primary,
.sidebar-nav-item.active,
.mini-cal .today,
.badge-primary,
.fab,
#fabBooking{
  background: var(--ds-brand-strong, var(--primary)) !important;
  border-color: var(--ds-brand-strong, var(--primary)) !important;
  color: var(--ds-brand-ink, #fff) !important;
}
.btn-primary:hover{ background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; }
.quick-book-btn{ background: var(--ds-brand-strong, var(--primary)) !important; }

/* ترويسات الجداول: كان 4.34:1 — تحت الحد لحجم 12px */
.data-table th{ color: var(--ds-ink-2); }

/* رابط التخطّي: أخفِه بالطريقة المعيارية بدل إزاحته 9999px (كان يوسّع الصفحة) */
.skip-link{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap;
  inset-inline-start:auto; top:auto;
  background: var(--ds-brand-strong, var(--primary)); color:#fff;
}
.skip-link:focus{
  width:auto; height:auto; clip:auto; clip-path:none;
  inset-inline-start:12px; top:12px; padding:10px 16px; border-radius:8px; z-index:9999;
}

/* مساحة لمس 32px كحدّ أدنى لكل زر */
.btn-icon,.tb-icon,.chip,.pill{ min-width:32px; min-height:32px; }

/* ---- تصحيحات تباين مقيسة (كلها كانت تحت 4.5:1) ---- */
a:not(.btn):not(.sidebar-nav-item):not(.skip-link),
.link, .card-link, .view-all, .text-primary{
  color: var(--ds-brand-strong, var(--primary));
}
.ds-sub,.muted-light,.stat-sub{ color: var(--ds-ink-3) !important; }          /* كان #94a3b8 = 2.56:1 */
.ds-label,.data-table th,.quick-box .ql,.ops-cell .l{ color: var(--ds-ink-2); } /* كان 4.34:1 */
.ds-down,.text-danger,.stat-change.down{ color: var(--ds-neg) !important; }    /* كان #ef4444 = 3.76:1 */
.ds-up,.text-success,.stat-change.up{ color: var(--ds-pos) !important; }
.tb-badge,.badge-danger{ background: var(--ds-neg) !important; color:#fff !important; }
.sidebar-logo-text small{ color: rgba(255,255,255,.72) !important; }
.sidebar-user-role,.sbp-sub{ color: rgba(255,255,255,.72) !important; }
body.dark-mode a:not(.btn):not(.sidebar-nav-item):not(.skip-link){ color: var(--primary-lighter); }

/* ---- الرماديات: الدرجات القديمة كانت تحت 4.5:1 على الخلفيات الفاتحة ---- */
:root{
  --muted: #5b6878;        /* كان #64748b = 4.34:1 على الرمادي الفاتح */
  --muted-light: #5f6c7d;  /* كان #94a3b8 = 2.34:1 — غير مقروء */
}
body.dark-mode{
  --muted: #9aa8b8;
  --muted-light: #8b99aa;
}

/* ---- بطاقة الأرقام: الأيقونة بجانب التسمية والرقم تحتهما ---- */
.stat-card{
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico lbl" "val val" "chg chg";
  align-items:center; column-gap: var(--sp-3); row-gap: 2px;
}
.stat-card > *{ grid-column: 1 / -1; }
.stat-card .stat-icon{ grid-area: ico; margin:0; }
.stat-card .stat-label{ grid-area: lbl; order:0; }
.stat-card .stat-value{ grid-area: val; order:0; margin-top: 2px; }
.stat-card .stat-change{ grid-area: chg; order:0; }

/* ---- نغمات أيقونات لوحة التحكم (كانت ألواناً مكتوبة داخل style=") ---- */
.ds-ic-brand { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; color: var(--ds-brand-strong, var(--primary)) !important; }
.ds-ic-green { background: var(--ds-pos-bg)  !important; color: var(--ds-pos)  !important; }
.ds-ic-blue  { background: var(--ds-info-bg) !important; color: var(--ds-info) !important; }
.ds-ic-amber { background: var(--ds-warn-bg) !important; color: var(--ds-warn) !important; }
.ds-ic-red   { background: var(--ds-neg-bg)  !important; color: var(--ds-neg)  !important; }
.ds-ic-violet{ background: color-mix(in srgb, var(--purple) 13%, transparent) !important; color: #6d28d9 !important; }
body.dark-mode .ds-ic-violet{ color: #c4b5fd !important; }
.ds-icon{ width:34px !important; height:34px !important; border-radius:10px !important; font-size:0 !important; }

/* ---- زر الحجز السريع: كان 118px على الحاسب و104px على الهاتف ---- */
.btn.quick-book-btn, a.quick-book-btn, .quick-book-btn{
  min-height:60px !important; font-size: var(--fs-md) !important;
  padding: 0 var(--sp-5) !important; border-radius:14px !important;
  box-shadow:0 4px 14px rgba(13,148,136,.22) !important;
}

/* ---- الهاتف: كثافة بطاقات لوحة التحكم ---- */
@media (max-width:560px){
  .dash-stats{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dash-stat{ padding: var(--sp-3) !important; }
  .ds-value{ font-size: var(--fs-xl); }
  .ds-icon{ width:28px !important; height:28px !important; border-radius:8px !important; }
  .ds-icon .ds-ico{ width:15px; height:15px; }
  .dash-stat .spark,.dash-stat canvas{ display:none; }   /* الرسم الصغير يضاعف ارتفاع البطاقة */
  .btn.quick-book-btn,.quick-book-btn{ min-height:52px !important; font-size: var(--fs-sm) !important; }
  .ds-sub{ display:none; }
}