:root {
  --navy-950: #0f1830;
  --navy-900: #142140;
  --navy-800: #1a2b4d;
  --navy-700: #21365e;
  --accent-gold: #e8b64a;
  --accent-blue: #3b6fe0;
  --accent-green: #1fab5f;
  --accent-red: #e5484d;
  --accent-orange: #f2994a;
  --accent-pink: #e0559b;
}

/* الخطّ: مكدّس عربيّ أولًا بدل "Segoe UI", Tahoma وحدهما.
   Segoe UI لا يغطّي العربية على غير ويندوز، فكان النص يسقط إلى Tahoma
   (أو أسوأ) على ماك وأندرويد ويبدو النظام مختلفًا عند كل مستخدم. هذا
   المكدّس يطلب من كل نظام خطّه العربي الأصلي أولًا، ويبقي اللاتيني
   على Segoe UI حيث يوجد. ولا خطّ من شبكة خارجية عمدًا: نصٌّ ينتظر
   تحميلًا يقفز أمام المستخدم، وقراءة النظام لا يجوز أن تتوقّف على
   مزوّد لا نملكه.

   تنبيه لمن يعدّل لاحقًا: لا تضف letter-spacing على نصّ عربي --
   العربية متّصلة الحروف وأي تباعد يفكّ الوصل في بعض المحرّكات. */
body {
  background: #eef1f7;
  font-family: "SF Arabic", "Segoe UI Variable Text", "Segoe UI", "Noto Sans Arabic",
               system-ui, -apple-system, Tahoma, Arial, sans-serif;
  line-height: 1.7;          /* العربية تحتاج تنفّسًا أكثر من اللاتينية */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* الأرقام بعرض ثابت في الجداول والمبالغ: بلا هذا يتذبذب عرض العمود مع
   كل تغيير رقم لأن "1" أضيق من "8". */
table, .money, .kpi-value, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 270px; min-width: 270px; max-width: 270px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #fff; overflow-x: hidden;
}
.sidebar ul.nav { display: flex; flex-direction: column; width: 100%; gap: 1px; overflow-x: hidden !important; overflow-y: auto; }
.sidebar .nav-item, .sidebar .nav-link, .sidebar .nav-group-label { width: 100%; box-sizing: border-box; }
.sidebar .brand { display:flex; align-items:center; gap:.6rem; font-size:1.1rem; }
.sidebar .brand i { font-size: 1.8rem; color: var(--accent-gold); }
.sidebar .nav-group-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: #7c8bad; margin: .55rem .5rem .2rem; font-weight: 600;
  white-space: nowrap; list-style: none;
}
.sidebar .nav-group-label:first-of-type { margin-top: .25rem; }
.sidebar .nav-item { list-style: none; }
.sidebar .nav-link {
  color: #c7d0e6; border-radius: 8px; padding: .38rem .8rem;
  display: flex; align-items: center; justify-content: space-between; gap:.5rem;
  white-space: nowrap; overflow: hidden; line-height: 1.3;
}
.sidebar .nav-link > span { display:flex; align-items:center; gap:.55rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar ul.nav { list-style: none; padding-inline-start: 0; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color:#fff; }
.sidebar .nav-link.active, .sidebar .nav-link:focus {
  background: var(--navy-700); color:#fff; font-weight:600;
  box-shadow: inset 3px 0 0 var(--accent-gold);
}
.sidebar .nav-badge {
  min-width: 20px; height: 20px; border-radius: 10px; font-size: .68rem;
  display:flex; align-items:center; justify-content:center; padding: 0 6px; color:#fff; font-weight:700;
}
.badge-red { background: var(--accent-red); }
.badge-orange { background: var(--accent-orange); }
.badge-green { background: var(--accent-green); }
.badge-blue { background: var(--accent-blue); }

/* ---------- Top header bar ---------- */
.topbar {
  background: #fff; border-radius: 14px; padding: .7rem 1.1rem;
  box-shadow: 0 2px 10px rgba(20,33,64,.06); display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap:.6rem;
}
.topbar .user-chip { display:flex; align-items:center; gap:.6rem; }
.topbar .user-avatar {
  width: 42px; height:42px; border-radius:50%; background: var(--navy-800); color: var(--accent-gold);
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.status-pill {
  background: #e6f7ee; color: var(--accent-green); border-radius: 20px; padding: .3rem .8rem;
  font-size: .8rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}
.status-pill .dot { width:8px; height:8px; border-radius:50%; background: var(--accent-green); }

.topbar .search-box {
  flex: 1 1 320px; max-width: 420px; display:flex; align-items:center; gap:.5rem;
  background: #eef1f7; border-radius: 10px; padding: .45rem .9rem; margin: 0 .5rem;
}
.topbar .search-box i { color:#7c8bad; }
.topbar .search-box input {
  border: none; background: transparent; outline: none; width: 100%; font-size: .88rem; color: var(--navy-900);
}
.topbar .search-box input::placeholder { color:#a3adc2; }

/* min-width:0 ليست تزيينًا: القيمة الافتراضية لعنصر flex هي
   min-width:auto، وهي تمنعه من الانكماش تحت عرض محتواه الأدنى. و
   main هنا عنصرٌ في .d-flex يحوي جداول عريضة (جدول الحجوزات 762px
   في أحد عشر عمودًا)، فكان يتمدّد إلى 822px على شاشة 375px --
   فتنزلق الصفحة كلها أفقيًّا: الترويسة والتذييل وبطاقات الأرقام معها،
   لا الجدول وحده.

   وهذا يُبطل مفعول .table-responsive: الغلاف يحمل overflow-x:auto
   ليأخذ الانزلاق على عاتقه، لكنه لا يُفعّل ما دام أبوه يتّسع للمحتوى
   بدل أن يضغطه. وبهذا السطر يعود main إلى 375px وينزلق الجدول داخل
   إطاره كما أُريد له. */
.content-area { max-width: 1500px; min-width: 0; }

.customer-info-box {
  background: #f7f8fc; border: 1px solid #e9ecf3; border-radius: 10px;
  padding: .7rem .9rem; min-height: 44px; display:flex; flex-direction:column; justify-content:center;
}
.customer-info-box .ci-row { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color: var(--navy-900); padding:.15rem 0; }
.customer-info-box .ci-row i { color:#7c8bad; width:16px; text-align:center; }

/* ---------- KPI cards ---------- */
.card-kpi { border: none; border-radius: 16px; box-shadow: 0 2px 10px rgba(20,33,64,.06); background:#fff; }
.card-kpi .icon-box {
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; color:#fff; flex-shrink:0;
}
.kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--navy-900); }
.kpi-label { color:#7c8bad; font-size:.85rem; }
.kpi-trend-up { color: var(--accent-green); font-weight:600; font-size:.8rem; }
.kpi-trend-down { color: var(--accent-red); font-weight:600; font-size:.8rem; }

.section-card { border:none; border-radius:16px; box-shadow: 0 2px 10px rgba(20,33,64,.06); background:#fff; }

.attention-item { border-radius:10px; padding:.65rem .8rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; }
.attention-red { background:#fdecec; }
.attention-orange { background:#fdf3e6; }
.attention-blue { background:#eaf1fd; }

/* ---------- Auth pages ---------- */
.auth-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--navy-900),#3c5691); }
.auth-card { max-width: 460px; width:100%; border:none; border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* ---------- Calendar ---------- */
.cal-table { table-layout: fixed; width: 100%; }
.cal-table td { height: 110px; vertical-align: top; border: 1px solid #e2e2e2; padding: 4px; position: relative; }
.cal-table td.today { background: #fff7e0; }
.cal-day-num { font-weight:600; font-size:.85rem; color:#555; }
.cal-hijri-num { font-size:.66rem; color:#9aa5bd; }
.cal-add-btn { color:#c7cede; font-size:1rem; line-height:1; text-decoration:none; }
.cal-add-btn:hover { color: var(--navy-800); }
.cal-badge { display:block; font-size:.72rem; background: var(--navy-800); color:#fff; border-radius:6px; padding:2px 4px; margin-top:2px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Section-colored calendar lines: blue = رجال section, pink = نساء section.
   A "القعتان" booking renders both lines (see bookings/calendar.html). */
.cal-badge-men { background: var(--accent-blue); }
.cal-badge-women { background: var(--accent-pink); }

/* عرض العميل (Customer View) -- a presentation-only calendar mode that
   hides every booking detail (names, phone numbers, booking/contract
   numbers, event titles, notes) and shows nothing but which half of the
   hall (men/women) is taken each day. Both the normal admin content and
   this simplified overlay are always rendered server-side in the same
   cell; toggleCustomerView() in calendar.html just flips which one is
   visible via the .customer-view-mode class on the table, with a soft
   200-300ms crossfade (see transitions below) and no page reload. */
.cal-customer-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  background: #fff;
}
.cal-normal-content {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.customer-view-mode .cal-normal-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.customer-view-mode .cal-customer-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.cal-customer-daynum { padding: 4px 6px 0; }
.cal-customer-splitwrap { position: relative; flex: 1; }
.cal-customer-half { position: absolute; left: 0; right: 0; height: 50%; background: #fff; }
.cal-customer-top { top: 0; }
.cal-customer-bottom { bottom: 0; }
.cal-customer-top.is-booked-men { background: #DCEEFF; }
.cal-customer-bottom.is-booked-women { background: #F9D8E8; }
.cal-customer-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-weight: 700; color: #444; font-size: .8rem; z-index: 2; letter-spacing: .2px;
}

/* ---------- عمود "إجراءات" في كل الجداول ----------
   كانت الأزرار عناصر inline-block تتبع تدفّق النصّ، فمتى ضاق العمود
   نزل ثالثها سطرًا ثانيًا -- وشوهد ذلك في جدول الحجوزات: زرّان فوق
   وزرّ إلغاءٍ أحمر وحده تحتهما. والعمود يضيق ويتّسع بحسب طول أسماء
   العملاء في بقيّة الصفوف، فكان شكل الأزرار يتغيّر من جدولٍ لآخر ومن
   صفحةٍ لأخرى بلا سبب يخصّها.

   صفٌّ مرن لا يلتفّ: الثلاثة جنبًا إلى جنب دائمًا. والعمود يأخذ عرضه
   من محتواه (width:1%‏ + nowrap) فلا يقضم من أعمدة البيانات.

   القاعدة هنا لا في قالبٍ واحد: الأزرار نفسها في عشرة جداول، وإصلاح
   واحدٍ منها يترك التسعة الباقية على حالها. */
.table-actions {
  white-space: nowrap;   /* الأزرار في سطرٍ واحد مهما ضاق العمود */
  width: 1%;             /* والعمود بعرض محتواه لا أكثر */
}
.table-actions a, .table-actions form { display:inline-block; }
.table-actions > * { vertical-align: middle; }
.low-stock-row { background: #fff3f3 !important; }

.btn-navy { background: var(--navy-800); color:#fff; border:none; }
.btn-navy:hover { background: var(--navy-700); color:#fff; }

/* ---------- Mini stat cards (dashboards) ---------- */
.mini-stat { text-align:center; padding: .75rem 0; }
.mini-stat .num { font-size:1.8rem; font-weight:800; color:var(--navy-900); }
.mini-stat .label { color:#7c8bad; font-size:.82rem; }

/* ---------- Tab pills (page-level tabs) ---------- */
.tab-pills { border-bottom: 2px solid #e9ecf3; gap: .5rem; }
.tab-pills .nav-link {
  color:#7c8bad; border:none; border-bottom:3px solid transparent; border-radius:0;
  padding:.6rem 1.1rem; font-weight:600; background:none;
}
.tab-pills .nav-link.active {
  color: var(--navy-900); border-color: var(--navy-900); background:none;
}

/* ---------- Navy-header tables ---------- */
.table-navy thead { background: var(--navy-900); }
.table-navy thead th { color:#fff; border:none; font-weight:600; padding-top:.75rem; padding-bottom:.75rem; }
.table-navy tbody td { vertical-align: middle; }

.status-chip { border-radius: 20px; padding:.25rem .75rem; font-size:.78rem; font-weight:700; display:inline-block; }
.status-paid, .status-done { background:#e6f7ee; color: var(--accent-green); }
.status-pending, .status-waiting { background:#fdf3e6; color: var(--accent-orange); }
.status-progress { background:#eaf1fd; color: var(--accent-blue); }
.status-urgent { background:#fdecec; color: var(--accent-red); }

.level-bar { height:8px; border-radius:4px; background:#eef1f7; overflow:hidden; }
.level-bar > div { height:100%; border-radius:4px; }

/* ===================================================================
   شاشات الهاتف -- تطبيق الموظفين
   ===================================================================
   يُثبَّت هذا التطبيق على الشاشة الرئيسية (PWA: manifest + أيقونات في
   base.html)، و apple-mobile-web-app-status-bar-style=black-translucent
   تعني أن الصفحة تمتدّ خلف شريط الحالة والنوتش لا تحتها. بلا حشوة
   للمنطقة الآمنة يختفي أعلى الواجهة تحت الساعة والبطارية عند من ثبّته.
   env() تعطي صفرًا على المتصفح العادي وعلى الأجهزة بلا نوتش، فلا أثر
   لها إلا حيث تلزم. */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top);
         padding-bottom: env(safe-area-inset-bottom); }
}

/* منع التكبير التلقائي في iOS عند لمس أي حقل.
   سفاري يكبّر الصفحة تلقائيًا -- ولا يعيدها -- إذا كان حجم خطّ الحقل
   أقلّ من 16px. أحد عشر قالبًا هنا تستخدم form-control-sm (14px)،
   فمديرُ القاعة الذي يفتح النظام من جواله كان يلمس أي فلتر فتقفز
   الصفحة ويضطر لتصغيرها بإصبعيه. 16px هي العتبة بالضبط، لا تقلّ. */
@media (max-width: 860px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input[type="text"], input[type="tel"], input[type="number"],
  input[type="email"], input[type="date"], input[type="time"],
  input[type="search"], input[type="password"], select, textarea {
    font-size: 16px;
  }
  /* ٤٤×٤٤ هو الحد الأدنى الموصى به من أبل وجوجل معًا لهدف اللمس. */
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding-inline: .9rem; }
}

/* ===================================================================
   درج القائمة الجانبية -- تطبيق الموظفين على الجوال
   ===================================================================
   القائمة عرضها 270px مثبَّت (min/max-width أعلاه). على شاشة عرضها
   360px كان يبقى للمحتوى 90px -- أي أن النظام كان غير قابل للاستخدام
   من الجوال أصلًا، لا "ضيّقًا" فحسب.

   الحلّ: فوق 991.98px لا شيء من هذا يُطبَّق والقائمة تبقى عمودًا
   ثابتًا كما هي. تحتها تصير درجًا مثبَّتًا خارج الشاشة ينزلق فوق
   المحتوى عند الضغط على الزر. */

/* الزر: مخفيّ على سطح المكتب، لا يشغل مكانًا. */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .sidebar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;            /* هدف لمس كامل */
    flex: 0 0 auto;
    border: 1px solid #e9ecf3; border-radius: 10px;
    background: #fff; color: var(--navy-900);
    font-size: 1.4rem; line-height: 1;
  }
  .sidebar-toggle:active { background: #eef1f7; }

  /* position-sticky و vh-100 من Bootstrap تحملان !important،
     فلا سبيل لتجاوزهما إلا بمثلها. */
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0;
    inset-inline-start: 0;
    height: 100% !important;
    z-index: 1045;                        /* فوق المحتوى، تحت الـ modal */
    transition: transform .25s ease;
    box-shadow: 0 0 24px rgba(0,0,0,.35);
  }
  /* التحويلات ليست واعيةً بالاتجاه، فيلزم صفّان: في RTL تبدأ
     القائمة من اليمين فتنزلق إليه، وفي LTR من اليسار. */
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }

  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(15,24,48,.5); z-index: 1040;
  }

  /* القائمة خرجت من تدفّق flex، فالمحتوى يأخذ العرض كاملًا.
     و p-4 (24px من كل جهة) تلتهم 48px من 360px. */
  main.content-area { padding: 14px !important; }

  .topbar { gap: .5rem; padding: .6rem .7rem; }

  /* ترتيب الصفّ الأول: زرّ القائمة، ثم الجرس وتبديل اللغة، ثم اسم
     المستخدم. كان الزرّان ينزلان إلى سطرٍ ثانٍ تحت الصفّ الأول بينما
     يبقى بين الزرّ والاسم فراغٌ بعرضهما -- سطرٌ كامل من الترويسة ثمنًا
     لفجوةٍ لا تحمل شيئًا. وjustify-content:space-between يضعهما في
     تلك الفجوة نفسها بلا إحداثيّات.

     order لا margin: العناصر الثلاثة تُرتَّب في RTL وLTR معًا بلا
     صفّين متقابلين، والبحث يبقى آخرها في سطره. */
  .topbar .sidebar-toggle { order: 1; }
  .topbar .topbar-actions { order: 2; gap: .55rem !important; }
  .topbar .user-chip { order: 3; min-width: 0; }
  /* حقل البحث يطلب 320px أساسًا -- أوسع من الشاشة، فيلتفّ ويكسر
     الصفّ. على الجوال يأخذ سطرًا كاملًا. */
  .topbar .search-box { flex: 1 1 100%; order: 4; margin: 0; }

  /* الثلاثة تتقاسم 310px، فالاسم هو ما يُقصّ عند الضيق -- لا الزرّ
     ولا الجرس، وكلاهما هدفُ لمسٍ لا يصحّ أن ينكمش. */
  .topbar .user-chip > div { min-width: 0; }
  .topbar .user-chip .fw-bold,
  .topbar .user-chip small {
    display: block; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .lang-switch-btn {
    padding: .25rem .5rem; font-size: .78rem; white-space: nowrap;
  }
  /* الساعة و"النظام متصل" ورمز الرسم البياني: زينةٌ على شاشة
     ضيّقة، تزاحم الإشعارات وتبديل اللغة وهما الفعليّان. */
  .topbar .status-pill,
  .topbar #live-clock,
  .topbar .bi-bar-chart { display: none; }
  .topbar .user-chip .fw-bold { font-size: .9rem; }

  /* قائمة الإشعارات عرضها 320px مثبَّت inline في base.html --
     تفيض على 360px بعد حشوة الصفحة. */
  .dropdown-menu[aria-labelledby="notifBell"] {
    width: min(320px, calc(100vw - 28px)) !important;
  }
}

/* ===================================================================
   لوحة الهاتف لصاحب القاعة (.hm-)
   ================================
   انظر تعليق الكتلة في dashboard.html: لوحةٌ تجيب سؤالًا واحدًا في
   شاشةٍ واحدة بدل أربع عشرة بطاقة في عمودٍ طويل.

   مبدأ الأحجام هنا: كل هدف لمس 56px فأكثر -- إصبعٌ في قاعةٍ مزدحمة
   لا تصيب هدفًا 32px، والشاشة تُقرأ بذراعٍ ممدودة لا على مكتب.
   =================================================================== */
.hm { display:flex; flex-direction:column; gap:14px; }

/* ---- اليوم ---- */
/* بطاقة اليوم أنحفَ قليلًا: صفّ الإجراءات صعد إلى ما تحتها مباشرةً،
   فلا بدّ أن يظهرا معًا في أول شاشةٍ بلا تمرير. الحشوةُ والترويسةُ
   والعنوان هي ما قُلّص -- لا صفُّ المناسبة نفسه: هو رابطٌ يُلمس،
   و56px حدُّه الأدنى في كل هذه اللوحة. */
.hm-today { background:var(--navy-900,#1c2a4a); color:#fff;
            border-radius:18px; padding:12px 14px; }
.hm-today-head { display:flex; align-items:baseline; justify-content:space-between;
                 margin-bottom:9px; }
.hm-today-label { font-size:1rem; font-weight:800; }
.hm-today-date { font-size:.8rem; opacity:.7; }
/* صفُّ المناسبة يُستعمل في موضعين: داخل بطاقة "اليوم" الكحليّة، وفي
   "الحفلات القادمة" على خلفية الصفحة الفاتحة. وكان مكتوبًا للأولى
   وحدها -- نصٌّ أبيض وخلفيةٌ بيضاء شفّافة -- فكانت الحفلات القادمة
   تُطبع بأبيض على أبيض: صفوفٌ موجودةٌ لا تكاد تُرى. فالأصل الآن بطاقةٌ
   فاتحة كبقيّة اللوحة، والداكنُ استثناءٌ مقيَّدٌ بأبيه. */
.hm-ev { display:flex; align-items:center; gap:12px; min-height:56px;
         padding:10px 12px; border-radius:12px; text-decoration:none;
         background:#fff; border:1px solid #e9ecf3;
         color:var(--navy-900,#142140); margin-bottom:8px; }
.hm-ev:last-child { margin-bottom:0; }
.hm-ev:hover { background:#f7f8fc; color:var(--navy-900,#142140); }
.hm-today .hm-ev { background:rgba(255,255,255,.1);
                   border-color:transparent; color:#fff; }
.hm-today .hm-ev:hover { background:rgba(255,255,255,.18); color:#fff; }
.hm-ev-time { font-weight:800; font-size:1rem; flex:0 0 auto; }
.hm-ev-body { flex:1 1 auto; min-width:0; }
.hm-ev-name { display:block; font-weight:700; font-size:.95rem;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-ev-hall { display:block; font-size:.75rem; color:#64748b; }
.hm-today .hm-ev-hall { color:inherit; opacity:.75; }
.hm-ev-go { flex:0 0 auto; color:#94a3b8; }
.hm-today .hm-ev-go { color:inherit; opacity:.55; }
.hm-empty { text-align:center; padding:14px; opacity:.75; font-size:.9rem; }

/* ---- يحتاجك الآن ---- */
.hm-h { font-size:1rem; font-weight:800; margin:0 0 10px;
        display:flex; align-items:center; gap:8px; }
.hm-count { background:#e11d48; color:#fff; border-radius:999px;
            min-width:22px; height:22px; display:inline-flex;
            align-items:center; justify-content:center; font-size:.72rem; }
.hm-att { display:flex; align-items:center; gap:12px; min-height:56px;
          background:#fff; border:1px solid #e9ecf3; border-inline-start:4px solid #94a3b8;
          border-radius:12px; padding:10px 12px; margin-bottom:8px;
          text-decoration:none; color:inherit; }
.hm-att:hover { background:#f7f8fc; color:inherit; }
.hm-att-green { border-inline-start-color:#1fab5f; }
.hm-att-red   { border-inline-start-color:#e11d48; }
.hm-att-amber { border-inline-start-color:#d6b26e; }
.hm-att > .bi:first-child { font-size:1.15rem; flex:0 0 auto; opacity:.75; }
.hm-att-body { flex:1 1 auto; min-width:0; }
.hm-att-title { display:block; font-weight:700; font-size:.88rem; line-height:1.5;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-att-detail { display:block; font-size:.75rem; opacity:.7; }

/* ---- المال ---- */
/* رقمان لا أربعة عشر: محصَّلٌ ومستحقّ. وكلٌّ منهما رابطٌ يفتح موضعه،
   فالرقم ليس خبرًا يُقرأ بل بابٌ يُدخل منه. */
.hm-money { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hm-money-cell { background:#fff; border:1px solid #e9ecf3; border-radius:16px;
                 padding:14px; text-decoration:none; color:inherit;
                 min-height:86px; display:flex; flex-direction:column;
                 justify-content:center; gap:2px; }
.hm-money-cell:hover { background:#f7f8fc; color:inherit; }
.hm-money-label { font-size:.72rem; opacity:.7; }
.hm-money-val { font-size:1.5rem; font-weight:800; color:#1fab5f; line-height:1.2; }
.hm-money-due .hm-money-val { color:#e11d48; }
.hm-money-sub { font-size:.7rem; opacity:.65; }

/* ---- إجراءات ---- */
.hm-acts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hm-act { background:#fff; border:1px solid #e9ecf3; border-radius:14px;
          min-height:66px; display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:5px;
          text-decoration:none; color:inherit; font-size:.7rem; font-weight:700;
          text-align:center; padding:6px 3px; }
.hm-act:hover { background:#f7f8fc; color:inherit; }
.hm-act .bi { font-size:1.3rem; }

/* ---- أرقام تفصيلية (مطويّة) ---- */
.hm-more { background:#fff; border:1px solid #e9ecf3; border-radius:14px;
           padding:12px 14px; }
.hm-more summary { font-weight:700; font-size:.85rem; cursor:pointer; min-height:32px;
                   display:flex; align-items:center; }
.hm-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.hm-more-grid > div { display:flex; flex-direction:column; gap:2px; }
.hm-more-grid span { font-size:.7rem; opacity:.7; }
.hm-more-grid b { font-size:1.05rem; }

/* ===================================================================
   تقويم الهاتف (.mcal) -- انظر تعليق الكتلة في bookings/calendar.html
   =================================================================== */
.mcal { display:none; }
@media (max-width:991.98px){ .mcal{ display:block; } }

.mcal-nav { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mcal-arrow { width:44px; height:44px; flex:0 0 auto; border-radius:12px;
              border:1px solid #e9ecf3; background:#fff; color:var(--navy-900,#1c2a4a);
              display:inline-flex; align-items:center; justify-content:center;
              text-decoration:none; font-size:1.05rem; }
.mcal-arrow:hover { background:#f7f8fc; color:var(--navy-900,#1c2a4a); }
.mcal-month { flex:1 1 auto; text-align:center; line-height:1.4; min-width:0; }
.mcal-month strong { display:block; font-size:1.02rem; }
.mcal-month span { display:block; font-size:.7rem; opacity:.65; }

/* سبعة أعمدة متساوية بلا جدول: الجدول يفرض عرضًا أدنى على الخلية
   بحسب محتواها، والشبكة تقسم المتاح بالتساوي مهما ضاق. */
.mcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mcal-dow { text-align:center; font-size:.72rem; font-weight:800;
            color:#8a93a5; padding:4px 0; }
.mcal-cell { border:1px solid #e9ecf3; background:#fff; border-radius:10px;
             /* 52px: هدف لمسٍ مريح، وأطول من عرض العمود (نحو 46px)
                فتبقى الخلية مربّعةً تقريبًا لا شريطًا. */
             min-height:52px; padding:4px 2px 5px;
             display:flex; flex-direction:column; align-items:center;
             justify-content:flex-start; gap:1px; cursor:pointer;
             font:inherit; color:inherit; }
.mcal-cell:hover { background:#f7f8fc; }
.mcal-cell.is-today { border-color:var(--navy-900,#1c2a4a); border-width:2px; }
.mcal-cell.is-sel { background:var(--navy-900,#1c2a4a); border-color:var(--navy-900,#1c2a4a); }
.mcal-cell.is-sel .mcal-num, .mcal-cell.is-sel .mcal-hijri { color:#fff; }
.mcal-empty { border:0; background:transparent; cursor:default; }
.mcal-num { font-size:.95rem; font-weight:800; line-height:1.1; }
.mcal-hijri { font-size:.55rem; opacity:.55; line-height:1.1; }
/* شريطان لا نصّ: الخلية 46px، ولا يسعها اسم عميل. واللونان هما
   لونا شارات الجدول على الحاسب، فالدلالة واحدة في الاثنين. */
.mcal-bars { display:flex; gap:2px; margin-top:auto; min-height:4px; }
.mcal-bar { display:block; width:12px; height:4px; border-radius:2px; }
.mcal-bar-men { background:#3b82f6; }
.mcal-bar-women { background:#ec4899; }
.mcal-legend { display:flex; gap:14px; justify-content:center;
               margin-top:10px; font-size:.72rem; color:#6b7280; }
.mcal-legend span { display:inline-flex; align-items:center; gap:5px; }

/* لوحة اليوم */
.mcal-panel { margin-top:12px; background:#fff; border:1px solid #e9ecf3;
              border-radius:14px; padding:14px; }
.mcal-panel-head { display:flex; align-items:center; justify-content:space-between;
                   margin-bottom:10px; }
.mcal-panel-x { border:0; background:transparent; color:#6b7280;
                width:36px; height:36px; border-radius:9px; cursor:pointer; }
.mcal-panel-x:hover { background:#f1f3f8; }
.mcal-bk { display:flex; align-items:center; gap:10px; min-height:56px;
           border:1px solid #e9ecf3; border-radius:11px; padding:8px 10px;
           margin-bottom:8px; text-decoration:none; color:inherit; }
.mcal-bk:hover { background:#f7f8fc; color:inherit; }
.mcal-bk-bars { display:flex; flex-direction:column; gap:3px; flex:0 0 auto; }
.mcal-bk-bars .mcal-bar { width:5px; height:16px; }
.mcal-bk-body { flex:1 1 auto; min-width:0; }
.mcal-bk-name { display:block; font-weight:700; font-size:.9rem;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcal-bk-hall { display:block; font-size:.72rem; opacity:.7; }
.mcal-none { text-align:center; padding:10px; font-size:.85rem; opacity:.7; }
.mcal-new { display:flex; align-items:center; justify-content:center; gap:7px;
            min-height:50px; border-radius:12px; background:var(--navy-900,#1c2a4a);
            color:#fff; text-decoration:none; font-weight:700; font-size:.92rem; }
.mcal-new:hover { background:#16213a; color:#fff; }
/* أزرار التقويم على الهاتف: صفٌّ واحد بدل ثلاثة. */
.mcal-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.mcal-acts > * { min-height:44px; border:1px solid #e9ecf3; background:#fff;
                 border-radius:11px; display:inline-flex; align-items:center;
                 justify-content:center; gap:6px; font-size:.82rem; font-weight:700;
                 color:inherit; text-decoration:none; cursor:pointer; }
.mcal-acts > *:hover { background:#f7f8fc; color:inherit; }