/* VRIXO CONTROL — نظام التصميم (نفس هوية البرنامج: تركواز #00C48C + كحلي #0F172A)
 *
 * ── الوضع الليلي والنهاري ──
 * كل لون في اللوحة بيعدّي من متغيّر هنا، فتبديل الثيم بيغيّر القيم في مكان واحد
 * بدل ما نكتب اللوحة مرتين. مفيش لون مكتوب صريحًا جوه أي قاعدة تحت — لأن أول
 * لون ثابت بينسى في التبديل هو اللي بيطلع نص أبيض على خلفية بيضا.
 *
 * تلات حالات مقصودة:
 *   • بلا اختيار      → إعداد نظام المستخدم هو الحكم (prefers-color-scheme)
 *   • data-theme=dark  → داكن مهما كان إعداد النظام
 *   • data-theme=light → فاتح مهما كان إعداد النظام
 * الافتراضي داكن لأنه هوية VRIXO، والفاتح بيتفعّل بإعداد النظام أو باختيار صريح.
 */

:root{
  /* ثوابت لا علاقة لها بالثيم */
  --c-accent:#00C48C; --c-accent-dim:#00a074;
  --r:14px; --sp:16px;
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  --font-num:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  /* اللوحة الداكنة — الافتراضية */
  color-scheme:dark;
  --c-bg:#0F172A; --c-surface:#16203a; --c-surface-2:#1c2947;
  --c-border:#26334f; --c-text-1:#f1f5f9; --c-text-2:#94a3b8; --c-text-3:#64748b;
  --c-danger:#f43f5e; --c-warn:#f59e0b; --c-danger-soft:#fb7185;
  --c-accent-ink:#04231a;          /* نص فوق خلفية تركوازية */
  --c-accent-text:var(--c-accent); /* التركوازي كنص فوق الخلفية */
  --c-topbar:rgba(15,23,42,.92);
  --c-scrim:rgba(2,6,18,.72);
  --c-shadow:0 14px 40px rgba(0,0,0,.5);
  --a-accent-soft:rgba(0,196,140,.14);
  --a-accent-line:rgba(0,196,140,.3);
  --a-warn-soft:rgba(245,158,11,.15);
  --a-danger-soft:rgba(244,63,94,.15);
  --a-danger-line:rgba(244,63,94,.35);
  /* قفل الشعار (Master Lockup) — التنفيذ الهندسي المعتمد: المربعات المحايدة في
     شعار الأربع مربعات أبيض فوق Dark Canvas، وكحلي #0F172A فوق Light Mode
     لضمان تباين AAA (مش نفس اللون الرمادي الفاتح تابت في الحالتين). */
  --c-logo-neutral:#FFFFFF;
}

/* اللوحة الفاتحة — تُكتب مرة واحدة وتُستدعى من مكانين (اختيار صريح، وإعداد النظام).
   التركوازي الأصلي على أبيض بيبقى فاتح على النص، فله نسخة أغمق للنصوص وحدها. */
:root[data-theme="light"]{
  color-scheme:light;
  --c-bg:#f5f7fb; --c-surface:#ffffff; --c-surface-2:#eef2f8;
  --c-border:#dfe5ee; --c-text-1:#0f172a; --c-text-2:#55637a; --c-text-3:#7a8699;
  --c-danger:#e11d48; --c-warn:#b45309; --c-danger-soft:#be123c;
  --c-accent-ink:#04231a;
  --c-accent-text:#00805a;
  --c-topbar:rgba(255,255,255,.92);
  --c-scrim:rgba(15,23,42,.45);
  --c-shadow:0 14px 40px rgba(15,23,42,.14);
  --a-accent-soft:rgba(0,196,140,.12);
  --a-accent-line:rgba(0,150,107,.35);
  --a-warn-soft:rgba(180,83,9,.12);
  --a-danger-soft:rgba(225,29,72,.10);
  --a-danger-line:rgba(225,29,72,.3);
  --c-logo-neutral:#0F172A;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --c-bg:#f5f7fb; --c-surface:#ffffff; --c-surface-2:#eef2f8;
    --c-border:#dfe5ee; --c-text-1:#0f172a; --c-text-2:#55637a; --c-text-3:#7a8699;
    --c-danger:#e11d48; --c-warn:#b45309; --c-danger-soft:#be123c;
    --c-accent-ink:#04231a;
    --c-accent-text:#00805a;
    --c-topbar:rgba(255,255,255,.92);
    --c-scrim:rgba(15,23,42,.45);
    --c-shadow:0 14px 40px rgba(15,23,42,.14);
    --c-logo-neutral:#0F172A;
    --a-accent-soft:rgba(0,196,140,.12);
    --a-accent-line:rgba(0,150,107,.35);
    --a-warn-soft:rgba(180,83,9,.12);
    --a-danger-soft:rgba(225,29,72,.10);
    --a-danger-line:rgba(225,29,72,.3);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--c-bg);color:var(--c-text-1);font-family:var(--font);font-size:15px;line-height:1.6}
body{min-height:100vh;padding-bottom:40px}
button{font-family:inherit;cursor:pointer;border:0}
.hidden{display:none !important}

/* ── الشريط العلوي ── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px var(--sp);background:var(--c-topbar);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border)}
.brand{display:flex;align-items:center;gap:9px;margin-inline-end:auto}
.brand svg{width:26px;height:26px;flex:none}
.brand-name{font-weight:700;letter-spacing:.08em;font-size:15px}
.brand-sub{font-size:10px;color:var(--c-accent-text);letter-spacing:.16em;font-weight:600}
/* مربعات الشعار المحايدة — تتبع قاعدة القفل المعتمد (أبيض/كحلي حسب الثيم)،
   مش لون ثابت. أي شعار جديد في الصفحة (شاشة الدخول، التوب بار) يستخدم
   الكلاس ده على المربعين المحايدين بدل fill ثابت. */
.q-neutral{fill:var(--c-logo-neutral)}

/* ═══ ك — أنيميشن هوية VRIXO (منقول بالحرف من الموقع وبرنامج الكاشير) ═══
   حاجتان منفصلتان على نفس الشعار:
   1) logo-intro — تجميع المربعات الأربعة من الاتجاهات الأربعة، مرة واحدة
      عند ظهور العنصر. المسافة بوحدات الـviewBox (200×200) لا بالبكسل،
      وبتتعدّل حسب حجم العرض: 38px لشاشة الدخول، 26px للتوب بار.
   2) logo-idle — الحركة الدائمة: طفو 14 وحدة + تكبير 1.11 في 3.6 ثانية،
      بتأخير 0.18 ثانية بين كل مربع واللي بعده.
   الكلاس هنا على الـsvg نفسه (مش على أب خارجي زي الكاشير). */
.logo-intro { overflow:visible; --logo-fly:300 }
.logo-intro.logo-sm { --logo-fly:230 }
.logo-idle rect { transform-box:fill-box; transform-origin:center }
/* الاتنين في إعلان واحد: اختصار animation بيستبدل السابق بالكامل لو
   اتكرر، فلازم يتكتبوا مع بعض. الحركة الدائمة تبدأ بعد ما الانترو يخلص. */
.logo-intro.logo-idle .logo-r1 { animation: vx-in-tl .95s cubic-bezier(.16,.88,.36,1) both, vx-idle 3.6s ease-in-out 1.1s infinite }
.logo-intro.logo-idle .logo-r2 { animation: vx-in-tr 1s cubic-bezier(.16,.88,.36,1) both, vx-idle 3.6s ease-in-out 1.28s infinite }
.logo-intro.logo-idle .logo-r3 { animation: vx-in-bl .9s cubic-bezier(.16,.88,.36,1) both, vx-idle 3.6s ease-in-out 1.46s infinite }
.logo-intro.logo-idle .logo-r4 { animation: vx-in-br 1.05s cubic-bezier(.16,.88,.36,1) both, vx-idle 3.6s ease-in-out 1.64s infinite }
@keyframes vx-in-tl { from{opacity:0; transform:translate(calc(var(--logo-fly) * -1px),calc(var(--logo-fly) * -1px))} to{opacity:1; transform:translate(0,0)} }
@keyframes vx-in-tr { from{opacity:0; transform:translate(calc(var(--logo-fly) * 1px),calc(var(--logo-fly) * -1px))} to{opacity:1; transform:translate(0,0)} }
@keyframes vx-in-bl { from{opacity:0; transform:translate(calc(var(--logo-fly) * -1px),calc(var(--logo-fly) * 1px))} to{opacity:1; transform:translate(0,0)} }
@keyframes vx-in-br { from{opacity:0; transform:translate(calc(var(--logo-fly) * 1px),calc(var(--logo-fly) * 1px))} to{opacity:1; transform:translate(0,0)} }
@keyframes vx-idle { 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-14px) scale(1.11) } }
@media (prefers-reduced-motion: reduce) {
  .logo-intro.logo-idle .logo-r1, .logo-intro.logo-idle .logo-r2,
  .logo-intro.logo-idle .logo-r3, .logo-intro.logo-idle .logo-r4 { animation:none }
}
#theme-icon{width:16px;height:16px;display:block}
#theme-icon svg{width:100%;height:100%;stroke:currentColor;fill:none}
.who{font-size:12px;color:var(--c-text-2);text-align:start}
.who b{display:block;color:var(--c-text-1);font-size:13px;font-weight:600}
.icon-btn{background:var(--c-surface);color:var(--c-text-2);border:1px solid var(--c-border);
  border-radius:10px;padding:8px 11px;font-size:12px;font-weight:600}
.icon-btn:hover{color:var(--c-text-1);border-color:var(--c-accent)}
/* قائمة اللغة تلبس شكل أزرار الشريط نفسه بدل شكل المتصفح الافتراضي،
   وتُقصّ عند عرض معقول عشان اسم لغة طويل (Português) ميزحمش الشريط. */
select.icon-btn{max-width:118px;appearance:none;padding-inline-end:11px;
  font-weight:600;text-align:center;text-align-last:center}
select.icon-btn option{background:var(--c-surface);color:var(--c-text-1)}

/* ── تسجيل الدخول ── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--sp)}
.login-card{width:100%;max-width:380px;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r);padding:28px 24px}
.login-card h1{font-size:19px;margin:14px 0 4px}
.login-card p.sub{color:var(--c-text-2);font-size:13px;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--c-text-2);margin-bottom:6px;font-weight:600}
.field input{width:100%;background:var(--c-bg);border:1px solid var(--c-border);border-radius:10px;
  padding:11px 13px;color:var(--c-text-1);font-family:inherit;font-size:14px}
.field input:focus{outline:0;border-color:var(--c-accent)}
.btn-primary{width:100%;background:var(--c-accent);color:var(--c-accent-ink);font-weight:700;font-size:15px;
  border-radius:10px;padding:12px;transition:background .15s}
.btn-primary:hover{background:var(--c-accent-dim)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.err{background:var(--a-danger-soft);border:1px solid var(--a-danger-line);color:var(--c-danger-soft);
  border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.msg-ok{background:var(--a-accent-soft);border:1px solid var(--a-accent-line);color:var(--c-accent-text);
  border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:14px}

/* ── التبويبات ── */
.tabs{display:flex;gap:6px;padding:12px var(--sp) 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;color:var(--c-text-2);border:1px solid var(--c-border);border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:600;white-space:nowrap}
.tab.active{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}

/* ── المحتوى ── */
main{padding:var(--sp);max-width:820px;margin:0 auto}
.range-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chip{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-2);
  border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600}
.chip.active{background:var(--a-accent-soft);border-color:var(--c-accent);color:var(--c-accent-text)}
.stamp{margin-inline-start:auto;font-size:11px;color:var(--c-text-3)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.kpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);padding:14px}
.kpi .label{font-size:11px;color:var(--c-text-2);font-weight:600;margin-bottom:5px}
.kpi .value{font-size:22px;font-weight:700;font-family:var(--font-num);letter-spacing:-.02em}
.kpi .unit{font-size:12px;color:var(--c-text-3);font-weight:500;margin-inline-start:3px;font-family:var(--font)}
.kpi.hero{grid-column:1/-1;background:linear-gradient(135deg,var(--a-accent-soft),var(--c-surface));
  border-color:var(--a-accent-line)}
.kpi.wide{grid-column:1/-1}
.kpi.hero .value{font-size:30px;color:var(--c-accent-text)}

.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
  padding:16px;margin-bottom:14px}
.card h2{font-size:14px;font-weight:700;margin-bottom:13px;display:flex;align-items:center;gap:7px}
.card h2::before{content:'';width:3px;height:14px;background:var(--c-accent);border-radius:2px}
.empty{color:var(--c-text-3);font-size:13px;text-align:center;padding:18px 0}

.row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--c-border)}
.row:last-child{border-bottom:0}
.row .nm{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .qty{font-size:11px;color:var(--c-text-3);white-space:nowrap;flex:none}
.row .amt{font-family:var(--font-num);font-size:13px;font-weight:600;white-space:nowrap}
.bar{height:5px;background:var(--c-surface-2);border-radius:3px;overflow:hidden;margin-top:5px}
.bar span{display:block;height:100%;background:var(--c-accent);border-radius:3px}

/* محور الوقت يُقرأ من اليسار لليمين (00 ← 23) حتى داخل صفحة RTL —
   وهو العُرف المتبع في الرسوم الزمنية، وأوضح من عكس اتجاه الزمن. */
.hours{display:flex;align-items:flex-end;gap:3px;height:96px;padding-top:8px;direction:ltr}
.hours .h{flex:1;background:var(--c-surface-2);border-radius:3px 3px 0 0;position:relative;min-height:2px}
.hours .h.on{background:var(--c-accent)}
.hours-x{display:flex;gap:3px;margin-top:5px;direction:ltr}
.hours-x span{flex:1;text-align:center;font-size:8px;color:var(--c-text-3);font-family:var(--font-num)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
/* جدول أعرض من الكارت (أرقام فواتير طويلة على شاشة 360px) كان بيطلّع الصفحة كلها
   بره الشاشة أفقيًا. الحاوية المباشرة للجدول هي اللي تتزحلق، مش الصفحة. */
:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
th{text-align:start;font-size:11px;color:var(--c-text-2);font-weight:600;padding:0 0 8px;
  border-bottom:1px solid var(--c-border)}
td{padding:9px 0;border-bottom:1px solid var(--c-border);font-family:var(--font-num);font-size:12px}
td.t{font-family:var(--font)}
tr:last-child td{border-bottom:0}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;font-family:var(--font)}
.pill.ok{background:var(--a-accent-soft);color:var(--c-accent-text)}
.pill.warn{background:var(--a-warn-soft);color:var(--c-warn)}
.pill.bad{background:var(--a-danger-soft);color:var(--c-danger-soft)}
.pill.idle{background:var(--c-surface-2);color:var(--c-text-3)}

.soon{opacity:.5;font-size:12px;color:var(--c-text-3);text-align:center;padding:26px 12px;
  border:1px dashed var(--c-border);border-radius:var(--r)}

/* ── طلبات الموافقة ── */
#approvals-card{border-color:var(--c-warn);background:linear-gradient(135deg,var(--a-warn-soft),var(--c-surface))}
.appr-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--c-border);flex-wrap:wrap}
.appr-row:last-child{border-bottom:0}
.appr-info{flex:1;min-width:160px}
.appr-info .k{font-size:13px;font-weight:700}
.appr-info .m{font-size:11px;color:var(--c-text-3);margin-top:2px}
.appr-amt{font-family:var(--font-num);font-weight:700;font-size:15px;color:var(--c-warn)}
.appr-actions{display:flex;gap:6px}
.btn-approve,.btn-deny{border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700}
.btn-approve{background:var(--c-accent);color:var(--c-accent-ink)}
.btn-deny{background:var(--a-danger-soft);color:var(--c-danger-soft);border:1px solid var(--a-danger-line)}
.btn-approve:disabled,.btn-deny:disabled{opacity:.5;cursor:not-allowed}

/* خلايا الجدول تلتصق ببعضها لما تكتر الأعمدة على شاشة ضيقة، فالأرقام تبان
   كأنها رقم واحد (‎200.07‎ و‎19.50‎ جنب بعض). مسافة أفقية صريحة + منع الالتفاف. */
th, td{padding-inline:6px;white-space:nowrap}
th:first-child, td:first-child{padding-inline-start:0}
th:last-child,  td:last-child{padding-inline-end:0}

/* أعمدة ثانوية تُخفى على الموبايل: ستة أعمدة لا تدخل في 400px بشكل مقروء.
   التفاصيل كاملة موجودة في نافذة الفاتورة بضغطة على الصف. */
@media(max-width:560px){
  .col-sm{display:none}
  .who{display:none}          /* المستخدم عارف هو مين — المساحة أهم على الموبايل */

  /* الشريط بقى فيه ست عناصر (شعار · جرس · لغة · مظهر · تحديث · خروج) وما عادش
     يسع 430px، فكان بيدفع «خروج» بره الشاشة ويخلّي الصفحة تتزحلق أفقيًا.
     الحل تضييق لا حذف: كلمة «الإشعارات» بتتشال من على الجرس (العنوان والأيقونة
     كفاية، والعدّاد بيفضل)، والمسافات والحشو بيقلّوا. مفيش زر بيختفي — إخفاء
     زر عشان المساحة بيخلّي المستخدم يدوّر على حاجة موجودة إمبارح. */
  .topbar{gap:6px;padding-inline:10px}
  .icon-btn{padding:8px 9px;font-size:11.5px}
  select.icon-btn{max-width:76px}
  .bell > span:not(.badge){display:none}
  /* أيقونة جرس SVG بدل الإيموجي 🔔 — mask بلون currentColor بدل نص عادي،
     فبيتلوّن مع الدارك/لايت تيم زي أي أيقونة تانية بلا أي اعتماد على خط النظام. */
  .bell::before{
    content:'';display:inline-block;width:14px;height:14px;line-height:1;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>") center/contain no-repeat;
  }
  .badge{margin-inline-start:3px}
  /* «تحديث» و«تسجيل الخروج» كانوا لسه بيزقّوا الشريط بره الشاشة تحت ~400px
     (اتقاس: الخروج بيبدأ عند -35px على 360px). نفس حل الجرس: أيقونة بدل الكلمة
     على الموبايل — الزر موجود ومكانه ثابت، والنص فاضل للقارئ الصوتي والـtitle. */
  #btn-refresh,#btn-logout{font-size:0;line-height:0;min-width:34px;min-height:34px}
  #btn-refresh::before,#btn-logout::before{
    content:'';display:inline-block;width:15px;height:15px;background-color:currentColor}
  #btn-refresh::before{
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7L21 8'/><path d='M21 3v5h-5'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7L21 8'/><path d='M21 3v5h-5'/></svg>") center/contain no-repeat}
  #btn-logout::before{
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>") center/contain no-repeat}
}

/* ── التبويبات الفرعية داخل المنتج ── */
.subtabs{display:flex;gap:4px;margin-bottom:14px;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:999px;padding:4px;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:1;background:transparent;color:var(--c-text-2);border-radius:999px;padding:8px 12px;
  font-size:12.5px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.subtab.active{background:var(--c-surface-2);color:var(--c-text-1)}

/* ── مقارنة بالفترة السابقة ── */
.delta{font-size:11px;font-weight:600;margin-top:4px;color:var(--c-text-3);font-family:var(--font)}
.delta.up{color:var(--c-accent-text)}
.delta.down{color:var(--c-danger-soft)}

/* ── الفلاتر ── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.inp{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:9px 12px;
  color:var(--c-text-1);font-family:inherit;font-size:12.5px;min-width:0}
.inp:focus{outline:0;border-color:var(--c-accent)}
.inp[type=search]{flex:1;min-width:180px}
.inp[type=date]{font-family:var(--font-num)}
.sel{cursor:pointer}
.btn-ghost{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-2);
  border-radius:10px;padding:9px 14px;font-size:12px;font-weight:600}
.btn-ghost:hover{color:var(--c-text-1);border-color:var(--c-accent)}
.btn-ghost.accent{color:var(--c-accent-text);border-color:var(--a-accent-line)}

.totals-strip{display:flex;gap:14px;flex-wrap:wrap;padding:11px 15px;margin-bottom:12px;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);font-size:12px}
.totals-strip b{font-family:var(--font-num);color:var(--c-text-1);font-size:13px}
.totals-strip span{color:var(--c-text-2)}

.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:4px;font-size:12px;color:var(--c-text-2)}
.hint{font-size:10px;color:var(--c-text-3);font-weight:500;margin-inline-start:auto}

.kpis-3{grid-template-columns:repeat(3,1fr)}
.kpi .value.warn{color:var(--c-warn)}
.kpi .value.bad{color:var(--c-danger-soft)}

/* الصف قابل للنقر لفتح التفاصيل — المؤشر وحده لا يكفي كإشارة، فنضيف تغيّر الخلفية. */
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--c-surface-2)}

/* ── جرس الإشعارات ── */
.bell-wrap{position:relative}
.bell{position:relative}
.badge{display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 4px;margin-inline-start:5px;
  background:var(--c-danger);color:#fff;border-radius:999px;font-size:10px;font-weight:700;text-align:center;
  font-family:var(--font-num)}
.notif-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(340px,88vw);max-height:70vh;
  overflow-y:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
  box-shadow:var(--c-shadow);z-index:40;padding:6px 14px 10px}

/* على الموبايل الجرس واقف في نص الشريط، فأي قائمة معلّقة بيه تخرج بره الشاشة من
   ناحية أو التانية مهما ظبطنا الاتجاه (عرضها أوسع من المسافة على أي من الجانبين).
   الحل الصحيح شيت بعرض الشاشة تحت الشريط، لا قائمة معلّقة. */
@media(max-width:560px){
  .notif-panel{position:fixed;top:56px;inset-inline:12px;width:auto;max-height:76vh}
}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 0 8px;
  border-bottom:1px solid var(--c-border);margin-bottom:4px;font-size:13px;position:sticky;top:0;
  background:var(--c-surface)}
.link-btn{background:transparent;color:var(--c-accent-text);font-size:11px;font-weight:600;padding:2px}
.notif{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--c-border)}
.notif:last-child{border-bottom:0}
.notif .dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none;background:var(--c-text-3)}
.notif.info .dot{background:var(--c-accent-text)}
.notif.warn .dot{background:var(--c-warn)}
.notif.critical .dot{background:var(--c-danger)}
.notif.read{opacity:.5}
.notif .t{font-size:12.5px;font-weight:600;line-height:1.45}
.notif .b{font-size:11px;color:var(--c-text-3);margin-top:2px}
.notif .a{font-family:var(--font-num);font-size:12px;font-weight:700;margin-inline-start:auto;white-space:nowrap}

/* ── نافذة التفاصيل ── */
.modal{position:fixed;inset:0;z-index:60;background:var(--c-scrim);display:grid;place-items:center;padding:16px}
.modal-card{width:min(520px,100%);max-height:86vh;overflow-y:auto;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r);padding:16px 18px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.modal-head b{font-size:15px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--c-border);font-size:12.5px}
.kv:last-of-type{border-bottom:0}
.kv span{color:var(--c-text-2)}
.kv b{font-family:var(--font-num);font-weight:600}
.kv b.t{font-family:var(--font)}

@media(min-width:640px){
  /* خمسة أعمدة: البطاقة الكبيرة تأخذ عمودين والثلاثة الباقية عمودًا لكل منها،
     فتكتمل الأربع بطاقات في صف واحد متزن بدل بطاقة يتيمة في صف ثانٍ. */
  .kpis{grid-template-columns:repeat(5,1fr)}
  .kpi.hero{grid-column:span 2}
  .kpi.wide{grid-column:auto}
}

/* ── الباقة والاستهلاك ──
   الشريط بيقول قد إيه فاضل قبل الحد، مش بعده. صاحب المحل لازم يشوف «٣ من ٣»
   وهو مرتاح، لا وهو بيحاول يضيف موظف الساعة ١١ بالليل ويتقفل في وشه. */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.meter .mh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;
  color:var(--c-text-2);font-weight:600;margin-bottom:6px}
.meter .mh b{font-family:var(--font-num);color:var(--c-text-1);font-size:13px}
.meter .track{height:6px;background:var(--c-surface-2);border-radius:3px;overflow:hidden}
.meter .fill{display:block;height:100%;background:var(--c-accent);border-radius:3px;transition:width .25s}
.meter.near .fill{background:var(--c-warn)}
.meter.full .fill{background:var(--c-danger)}
.plan-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.plan-name{font-size:16px;font-weight:700;color:var(--c-accent-text)}
.plan-price{font-size:13px;color:var(--c-text-2)}   /* نص عربي — خط الأرقام بيباعد حروفه ويبان مكسور */
.plan-note{font-size:11.5px;color:var(--c-text-3);margin-top:12px;line-height:1.6}

/* ── الفريق والفروع ── */
.mini-actions{display:flex;gap:6px;justify-content:flex-end}
.btn-mini{background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-2);
  border-radius:8px;padding:5px 10px;font-size:11px;font-weight:600;font-family:var(--font)}
.btn-mini:hover{color:var(--c-text-1);border-color:var(--c-accent)}
.btn-mini.danger{color:var(--c-danger-soft);border-color:var(--a-danger-line)}
.card h2 .btn-ghost{margin-inline-start:auto;padding:5px 11px;font-size:11.5px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.form-grid .field{margin-bottom:0}
.form-grid input,.form-grid select{width:100%;background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:10px;padding:10px 12px;color:var(--c-text-1);font-family:inherit;font-size:13px}
.form-grid input:focus,.form-grid select:focus{outline:0;border-color:var(--c-accent)}
.row-dim{opacity:.5}

/* ── مقارنة الفروع ── */
.br-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--c-border)}
.br-row:last-child{border-bottom:0}
.br-row .nm{flex:1;min-width:0}
.br-row .nm b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-row .nm span{font-size:11px;color:var(--c-text-3)}
.br-row .amt{font-family:var(--font-num);font-weight:700;font-size:14px;white-space:nowrap}
.br-row .bar{display:block;width:100%;margin-top:6px}   /* span بلا display:block بيفضل سطريًا فالارتفاع ما بيتطبّقش */

/* زر الثيم: أيقونة وحدها عشان الشريط مزدحم أصلًا بلغة وتحديث وخروج وجرس */
#btn-theme{min-width:38px;text-align:center;font-size:14px;line-height:1}

/* قفل انتهاء الاشتراك: بيغطي محتوى نقاط البيع بس — تبويب الحساب والخروج شغالين */
.lock-card{text-align:center;padding:34px 18px;border-color:var(--a-accent-line)}
.lock-card h2{justify-content:center;margin-bottom:8px}
.lock-card p{color:var(--c-text-2);font-size:13px;line-height:1.7;max-width:420px;margin:0 auto}
.sub-line{font-size:12px;color:var(--c-text-2);margin-top:6px}
.sub-line.expired{color:#e5484d;font-weight:600}