/* ============================================================
   Zawaya AI — Hotel Dashboard
   Agency-grade design system | v2.0 | 2026-04-10
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds — synced with chatbot identity */
  --bg:           #080f14;
  --bg-card:      #0f1c28;
  --bg-raised:    #14253a;
  --bg-input:     #0d1923;
  --bg-hover:     #16273a;
  --bg-hdr:       rgba(8,15,20,0.97);
  --bg-sidebar:   #0a131c;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-md:    rgba(255,255,255,0.11);
  --border-brand: rgba(94,201,160,0.22);

  /* Text */
  --tx-1:  #dce8f0;
  --tx-2:  #4e7080;
  --tx-3:  #2b3f50;
  --tx-inv:#080f14;

  /* Brand */
  --brand:      #5ec9a0;
  --brand-d:    #3ead86;
  --brand-dim:  rgba(94,201,160,0.08);
  --brand-glow: rgba(94,201,160,0.18);

  /* Semantic */
  --blue:   #3b82f6; --blue-bg:  rgba(59,130,246,0.09);
  --amber:  #f59e0b; --amber-bg: rgba(245,158,11,0.09);
  --red:    #ef4444; --red-bg:   rgba(239,68,68,0.09);
  --purple: #a855f7; --purple-bg:rgba(168,85,247,0.09);

  /* Dimensions */
  --hdr:    60px;
  --radius: 10px;
  --r-sm:   6px;
  --r-lg:   14px;

  /* Animation */
  --ease:  cubic-bezier(0.4,0,0.2,1);
  --t:     0.18s;

  /* Fonts */
  --font:    'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-ar: 'Cairo', 'Sora', system-ui, sans-serif;
}

/* ── LIGHT MODE ─────────────────────────────────────────────────────────
   ⚠️ **الوضع الفاتح كان يرث لون الهويّة كما هو، وهذا هو العطل الأصلي فيه.**

   `--brand:#5ec9a0` أخضرُ فاتح صُمّم ليضيء على خلفيةٍ سوداء. على الأبيض تصير
   نسبةُ تباينه ≈١٫٩:١ — أي أقلّ من نصف الحدّ الأدنى (٤٫٥:١)، فكلُّ نصٍّ
   بلون الهويّة (وهي عشرات المواضع: أرقام الغرف، والحبّات، والروابط، وزرّ
   «مباشر») يُقرأ باهتاً أو لا يُقرأ. ونفس العلّة في الأزرق والكهرمان والأحمر.

   فالتصحيح ليس تفتيحَ الخلفيات وحدها بل **قلبُ اتجاه اللون**: لونٌ داكن
   للنصّ، والفاتحُ يبقى للتعبئة. الهويّة لا تتغيّر — الأخضر نفسه في الأزرار
   المصمتة والشعارات؛ ما يتغيّر هو الدرجة التي يُكتب بها.

   والحدود كذلك: `rgba(255,255,255,.07)` على الأبيض حدٌّ غير موجود، فالبطاقات
   كانت تسبح بلا فواصل. القيم هنا صلبة (`#e2e8f0`) لا شفّافة. */
html.light {
  --bg:        #f1f5f9;
  --bg-card:   #ffffff;
  --bg-raised: #f4f7fa;
  --bg-input:  #f8fafc;
  --bg-hover:  #eef3f8;
  --bg-hdr:    rgba(248,250,252,0.97);
  --bg-sidebar:#ffffff;
  --border:    #e2e8f0;
  --border-md: #cbd5e1;
  --border-brand: rgba(20,124,95,0.30);
  --tx-1:  #0f2232;
  --tx-2:  #43566b;
  --tx-3:  #6b7f93;
  --tx-inv:#ffffff;

  /* الهويّة للنصّ: أغمقُ درجتين، ونسبة التباين ≈٤٫٨:١ على الأبيض. */
  --brand:      #14795c;
  --brand-d:    #0f6149;
  --brand-dim:  rgba(20,121,92,0.08);
  --brand-glow: rgba(20,121,92,0.24);

  /* ونفس المنطق في الدلالية: نصٌّ داكن وتعبئةٌ فاتحة. */
  --blue:   #1d5e92; --blue-bg:  rgba(29,94,146,0.08);
  --amber:  #9a5b06; --amber-bg: rgba(154,91,6,0.10);
  --red:    #b91c1c; --red-bg:   rgba(185,28,28,0.08);
  --purple: #7c3aed; --purple-bg:rgba(124,58,237,0.08);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13.5px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--tx-1);min-height:100vh;overflow-x:hidden;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
html[dir="rtl"] body{font-family:var(--font-ar)}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--border-md);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
::placeholder{color:var(--tx-3)}

/* ── LOGIN ──────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:2000;
}
#login-screen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(94,201,160,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(59,130,246,0.04) 0%, transparent 60%);
  pointer-events:none;
}
.login-wrap{
  position:relative;
  width:400px;max-width:94vw;
}
.login-brand-row{
  display:flex;align-items:center;gap:10px;
  margin-bottom:36px;justify-content:center;
}
.login-mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px var(--brand-glow);
  flex-shrink:0;
}
.login-mark svg{width:20px;height:20px;color:#fff}
.login-logo-img{width:28px;height:28px;object-fit:contain;filter:brightness(0) invert(1)}
.login-name{font-size:1.15rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.login-name em{font-style:normal;color:var(--brand)}
.login-card{
  background:var(--bg-card);
  border:1px solid var(--border-md);
  border-radius:var(--r-lg);
  padding:32px;
}
.login-heading{font-size:1.2rem;font-weight:700;margin-bottom:4px;color:var(--tx-1)}
.login-sub{font-size:0.8rem;color:var(--tx-2);margin-bottom:28px}
.login-error{
  background:var(--red-bg);border:1px solid rgba(239,68,68,0.22);
  border-radius:var(--r-sm);padding:9px 12px;
  font-size:0.78rem;color:var(--red);margin-bottom:14px;display:none;
}
.login-error.show{display:block}
/* 🔑 مبدّلُ البابين — حبّتان في شريطٍ واحد.
   وليس قائمةً منسدلة ولا رابطاً صغيراً تحت الزرّ: الاختيار يقع **قبل** أن
   يكتب المستخدم شيئاً، فيجب أن يُرى قبل الحقول لا بعدها. ورابطٌ صغير يُقرأ
   «حالةٌ استثنائية» بينما هذا هو البابُ الأكثر استعمالاً في الفندق. */
.login-modes{
  display:flex;gap:4px;margin-bottom:20px;padding:4px;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);
}
.login-mode{
  flex:1;min-width:0;padding:8px 6px;
  background:none;border:0;border-radius:calc(var(--r-sm) - 3px);
  font-family:inherit;font-size:0.76rem;font-weight:600;color:var(--tx-2);
  cursor:pointer;transition:background .15s ease,color .15s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.login-mode:hover{color:var(--tx-1)}
.login-mode.on{background:var(--bg-card);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.login-mode:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.login-hint{
  margin-top:18px;padding:10px 12px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:0.74rem;color:var(--tx-3);
  font-family:monospace;letter-spacing:0.02em;text-align:center;
}
.login-foot{
  display:flex;justify-content:center;gap:8px;margin-top:16px;
}
/* 🖥️ «أبقني داخلاً» — الصفّ كلّه هدفُ ضغط، لا المربّع وحده: كاونتر الاستقبال
   يُستعمل بيدٍ واحدة وعينٌ على النزيل، ومربّعُ ١٤px هدفٌ يُخطأ. */
.login-remember{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 16px;padding:9px 11px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;
  font-size:0.76rem;color:var(--tx-2);line-height:1.5;
  user-select:none;transition:border-color .15s ease,color .15s ease;
}
.login-remember:hover{border-color:var(--brand);color:var(--tx-1)}
.login-remember input{
  width:15px;height:15px;flex:0 0 auto;cursor:pointer;accent-color:var(--brand);
}
.login-remember:focus-within{border-color:var(--brand)}

/* ── APP SHELL ──────────────────────────────────────────── */
#app{display:none}
#app.visible{display:block}

/* ── HEADER ─────────────────────────────────────────────── */
#top-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--hdr);
  background:var(--bg-hdr);
  border-bottom:1px solid var(--border);
  z-index:200;
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
  backdrop-filter:blur(16px);
}
.hdr-logo{
  display:flex;align-items:center;gap:9px;
  flex-shrink:0;min-width:0;
}
.hdr-logo img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.hdr-logo-fallback{
  width:30px;height:30px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hdr-logo-fallback svg{width:16px;height:16px;color:#fff}
.hdr-brand{font-size:0.92rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em;white-space:nowrap}
.hdr-brand em{font-style:normal;color:var(--brand)}
.hdr-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}

/* 🏨 اسمُ العقار في الترويسة.
   لوحةُ الطاقم عنوانٌ واحد لكلّ المنصّة، والشاشةُ متطابقة في كلّ فندق — فمن
   يعمل في عقارين لا يملك ما يقول له أين هو الآن. ولهذا لا يُخفى على الجوّال
   كما يُخفى الشعار: الشعارُ زينة، وهذا **مؤشّرُ سياق** يخطئ من لا يراه.
   والنقطةُ الخضراء تجعله يُقرأ كحالةٍ حيّة لا كعنوانٍ ساكن. */
.hdr-hotel{display:flex;align-items:center;gap:7px;flex-shrink:0;
  padding:5px 11px;border-radius:999px;
  background:var(--brand-soft,rgba(94,201,160,.12));
  border:1px solid var(--brand-border,rgba(94,201,160,.22));max-width:34vw}
.hdr-hotel-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0}
.hdr-hotel-name{font-size:0.8rem;font-weight:700;color:var(--tx-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Nav scroll wrapper */
.hdr-nav-wrap{
  flex:1;min-width:0;overflow-x:auto;
  display:flex;align-items:center;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:6px; /* room for absolute-positioned .nav-badge overflow */
  margin-block:-6px;
}
.hdr-nav-wrap::-webkit-scrollbar{display:none}
#header-nav{
  display:flex;align-items:center;gap:2px;
  white-space:nowrap;min-width:min-content;
}
.nav-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-sm);
  border:none;background:none;
  font-family:inherit;font-size:0.8rem;font-weight:500;
  color:var(--tx-2);cursor:pointer;
  transition:all var(--t) var(--ease);white-space:nowrap;
}
.nav-btn svg{width:14px;height:14px;flex-shrink:0;opacity:0.75}
.nav-btn:hover{background:var(--brand-dim);color:var(--tx-1)}
.nav-btn.active{
  background:var(--brand-dim);
  color:var(--brand);font-weight:600;
}
.nav-btn.active svg{opacity:1}
.nav-btn{position:relative}
.nav-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;font-size:0.62rem;font-weight:800;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  line-height:1;border:1.5px solid var(--bg);
  pointer-events:none;
}

/* Header actions */
.hdr-actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.hdr-act{
  width:34px;height:34px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg-card);
  color:var(--tx-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--ease);position:relative;
}
.hdr-act:hover{border-color:var(--brand-border);color:var(--brand);background:var(--brand-dim)}
.hdr-act svg{width:15px;height:15px}
.hdr-act.text-btn{
  width:auto;padding:0 10px;font-size:0.75rem;font-weight:700;
  font-family:inherit;
}
.notif-pip{
  position:absolute;top:6px;right:6px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--bg);
}
.hdr-act.ringing .notif-pip{animation:ring 2s var(--ease) infinite}
@keyframes ring{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:30px;cursor:pointer;
  transition:border-color var(--t) var(--ease);
  flex-shrink:0;
}
.user-chip:hover{border-color:var(--border-brand)}
.user-chip:focus-visible{outline:2px solid var(--brand-glow);outline-offset:2px}
.user-chip[aria-expanded="true"] #user-chip-caret{transform:rotate(180deg)}

/* عناصر قائمة الحساب (الإعدادات / تسجيل الخروج) */
.acct-mi{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border:0;border-radius:9px;
  background:transparent;color:var(--tx-1);
  font-family:inherit;font-size:0.82rem;font-weight:600;
  cursor:pointer;text-align:start;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.acct-mi svg{width:15px;height:15px;flex:none;opacity:.75}
.acct-mi:hover{background:var(--bg-raised)}
.acct-mi-danger{color:#f87171}
.acct-mi-danger:hover{background:rgba(248,113,113,0.10)}
/* اللوجو ينقل إلى «نظرة عامة» — نُظهر أنه قابل للضغط */
.hdr-logo{cursor:pointer}
.hdr-logo:focus-visible{outline:2px solid var(--brand-glow);outline-offset:3px;border-radius:8px}
.user-av{
  width:26px;height:26px;border-radius:50%;
  background:var(--brand-dim);border:1.5px solid var(--brand-glow);
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;font-weight:800;color:var(--brand);
}
.user-nm{font-size:0.75rem;font-weight:600;color:var(--tx-1)}
.user-rl{font-size:0.64rem;color:var(--tx-3)}

/* ── MAIN CONTENT ───────────────────────────────────────── */
#main-content{
  margin-top:var(--hdr);
  padding:22px;
  min-height:calc(100vh - var(--hdr));
}

/* ── PANEL ──────────────────────────────────────────────── */
.panel{display:none;animation:fadeUp 0.22s var(--ease)}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.ph-l h1{font-size:1.22rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.ph-l p{font-size:0.77rem;color:var(--tx-2);margin-top:2px}
.ph-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── CARD ───────────────────────────────────────────────── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:background var(--t),border-color var(--t);
}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:0.83rem;font-weight:700;color:var(--tx-1)}
.card-sub{font-size:0.72rem;color:var(--tx-2);margin-top:1px}

/* ── KPI GRID ───────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi-grid-6{grid-template-columns:repeat(6,1fr)}
.kpi{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 16px;
  position:relative;overflow:hidden;
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand) 0%,transparent 100%);
}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-lbl{font-size:0.72rem;font-weight:600;color:var(--tx-2);letter-spacing:0.02em}
.kpi-ico{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-dim);color:var(--brand);
}
.kpi-ico svg{width:14px;height:14px}
.kpi-val{font-size:1.75rem;font-weight:800;letter-spacing:-0.04em;color:var(--tx-1);line-height:1}
.kpi-chg{
  display:inline-flex;align-items:center;gap:3px;
  margin-top:8px;font-size:0.7rem;font-weight:700;
  padding:2px 8px;border-radius:20px;
}
.kpi-chg svg{width:10px;height:10px}
.kpi-chg.up{background:rgba(94,201,160,0.1);color:var(--brand)}
.kpi-chg.dn{background:var(--red-bg);color:var(--red)}

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.mb3{margin-bottom:14px}
.mb4{margin-bottom:18px}
.mt3{margin-top:14px}
.mt4{margin-top:18px}
.flex{display:flex}
.fxa{display:flex;align-items:center}
.fxb{display:flex;align-items:center;justify-content:space-between}
.gap2{gap:8px}
.gap3{gap:12px}
.wrap{flex-wrap:wrap}

/* ── CHARTS ─────────────────────────────────────────────── */
.ch-wrap{position:relative;height:200px}
.ch-wrap.tall{height:260px}
.trange{display:flex;gap:3px}
.tr-btn{
  padding:3px 9px;border-radius:4px;
  font-size:0.7rem;font-weight:700;
  border:1px solid var(--border);
  background:none;color:var(--tx-2);cursor:pointer;
  transition:all var(--t);font-family:inherit;
}
.tr-btn:hover,.tr-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── TABLES ─────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  padding:9px 13px;text-align:start;
  font-size:0.67rem;font-weight:700;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:0.07em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{
  padding:10px 13px;font-size:0.81rem;color:var(--tx-1);
  border-bottom:1px solid var(--border);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--bg-hover)}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:4px;
  font-size:0.67rem;font-weight:700;white-space:nowrap;letter-spacing:0.02em;
}
.badge::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-new{background:var(--blue-bg);color:var(--blue)}
.b-prog{background:var(--amber-bg);color:var(--amber)}
.b-done{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-warn{background:var(--red-bg);color:var(--red)}
.b-off{background:rgba(78,112,128,0.1);color:var(--tx-2)}
.b-on{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-super{background:var(--purple-bg);color:var(--purple)}
.b-admin{background:var(--blue-bg);color:var(--blue)}
.b-staff{background:var(--amber-bg);color:var(--amber)}
.b-svc{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-starter{background:var(--blue-bg);color:var(--blue)}
.b-pro{background:var(--purple-bg);color:var(--purple)}
.b-enterprise{background:rgba(94,201,160,0.1);color:var(--brand)}

/* ── FORMS ──────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:0.7rem;font-weight:700;color:var(--tx-2);margin-bottom:5px;letter-spacing:0.03em}
.fi,.fs,.ft{
  width:100%;padding:8px 12px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--tx-1);
  font-family:inherit;font-size:0.82rem;
  transition:border var(--t),box-shadow var(--t);outline:none;
}
.fi:focus,.fs:focus,.ft:focus{
  border-color:var(--brand-glow);
  box-shadow:0 0 0 2px rgba(94,201,160,0.07);
}
.fs{appearance:none;cursor:pointer}
.ft{resize:vertical;min-height:88px;line-height:1.5}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.char-ct{font-size:0.7rem;color:var(--tx-3);text-align:end;margin-top:3px}
.fi[type="color"]{padding:4px 6px;height:34px;cursor:pointer}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-family:inherit;font-size:0.8rem;font-weight:700;
  cursor:pointer;border:none;
  transition:all var(--t) var(--ease);white-space:nowrap;
  line-height:1;
}
.btn svg{width:13px;height:13px;flex-shrink:0}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d);box-shadow:0 3px 12px var(--brand-glow)}
.btn-s{background:var(--bg-card);border:1px solid var(--border-md);color:var(--tx-1)}
.btn-s:hover{border-color:var(--brand-glow);background:var(--brand-dim);color:var(--brand)}
.btn-d{background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);color:var(--red)}
.btn-d:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-g{background:none;color:var(--tx-2);border:none}
.btn-g:hover{background:var(--brand-dim);color:var(--brand)}
.btn-sm{padding:5px 11px;font-size:0.73rem}
.btn-xs{padding:3px 9px;font-size:0.68rem}
.btn:disabled{opacity:0.45;cursor:not-allowed}

/* ── SEARCH ─────────────────────────────────────────────── */
.search{
  display:flex;align-items:center;gap:7px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 12px;
  transition:all var(--t);
}
.search:focus-within{border-color:var(--brand-glow)}
.search svg{width:13px;height:13px;color:var(--tx-3);flex-shrink:0}
.search input{
  background:none;border:none;outline:none;
  color:var(--tx-1);font-family:inherit;font-size:0.8rem;width:180px;
}

/* ── TOGGLE SWITCH ──────────────────────────────────────── */
.tog{position:relative;width:36px;height:20px;display:inline-block;cursor:pointer;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{
  position:absolute;inset:0;
  background:var(--border-md);border-radius:20px;
  transition:background var(--t);border:1px solid var(--border);
}
.tog input:checked ~ .tog-track{background:var(--brand);border-color:var(--brand)}
.tog-thumb{
  position:absolute;top:3px;left:3px;
  width:12px;height:12px;background:#fff;border-radius:50%;
  transition:left var(--t);box-shadow:0 1px 3px rgba(0,0,0,0.3);
  pointer-events:none;
}
.tog input:checked ~ .tog-track .tog-thumb{left:calc(100% - 15px)}
html[dir="rtl"] .tog-thumb{left:auto;right:3px}
html[dir="rtl"] .tog input:checked ~ .tog-track .tog-thumb{right:calc(100% - 15px)}

/* ── MODALS ─────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);
  z-index:500;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.overlay.open{display:flex;animation:fadeUp 0.18s var(--ease)}
.modal{
  background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:var(--r-lg);padding:24px;
  width:480px;max-width:96vw;max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.55);
}
.modal.sm{width:360px}
.m-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.m-title{font-size:0.95rem;font-weight:800;color:var(--tx-1)}
.m-close{background:none;border:none;cursor:pointer;color:var(--tx-3);padding:3px;transition:color var(--t)}
.m-close:hover{color:var(--tx-1)}
.m-close svg{width:18px;height:18px}
.m-ft{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}
.confirm-ico{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red-bg);color:var(--red);margin:0 auto 14px;
}
.confirm-ico svg{width:24px;height:24px}
.confirm-body{text-align:center;margin-bottom:20px}
.confirm-body h3{font-size:0.95rem;font-weight:800;margin-bottom:5px}
.confirm-body p{font-size:0.78rem;color:var(--tx-2)}
.confirm-btns{display:flex;gap:8px}
.confirm-btns .btn{flex:1;justify-content:center}

/* ── DRAWER ─────────────────────────────────────────────── */
.drw-ovl{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:300;display:none}
.drw-ovl.open{display:block}
.drw{
  position:fixed;top:var(--hdr);right:0;bottom:0;
  width:380px;max-width:92vw;
  background:var(--bg-card);border-left:1px solid var(--border-md);
  z-index:301;padding:20px;overflow-y:auto;
  transform:translateX(110%);
  transition:transform 0.28s var(--ease);
}
html[dir="rtl"] .drw{right:auto;left:0;border-left:none;border-right:1px solid var(--border-md);transform:translateX(-110%)}
.drw.open{transform:translateX(0)}
html[dir="rtl"] .drw.open{transform:translateX(0)}
.drw-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drw-title{font-size:0.9rem;font-weight:800}
.drw-close{background:none;border:none;cursor:pointer;color:var(--tx-3);padding:3px;transition:color var(--t)}
.drw-close:hover{color:var(--tx-1)}
.drw-close svg{width:18px;height:18px}

/* ── TOAST ──────────────────────────────────────────────── */
#toast-box{
  position:fixed;top:72px;right:18px;z-index:2000;
  display:flex;flex-direction:column;gap:6px;pointer-events:none;
}
html[dir="rtl"] #toast-box{right:auto;left:18px}
.toast{
  display:flex;align-items:center;gap:9px;
  background:var(--bg-raised);border:1px solid var(--border-md);
  border-radius:var(--radius);padding:11px 14px;
  min-width:240px;max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  pointer-events:all;animation:fadeUp 0.25s var(--ease);
}
.toast.out{animation:fadeOut 0.25s var(--ease) forwards}
.toast svg{width:15px;height:15px;flex-shrink:0}
.toast span{font-size:0.79rem;color:var(--tx-1)}
.toast.ok{border-inline-start:2px solid var(--brand)}.toast.ok svg{color:var(--brand)}
.toast.err{border-inline-start:2px solid var(--red)}.toast.err svg{color:var(--red)}
.toast.info{border-inline-start:2px solid var(--blue)}.toast.info svg{color:var(--blue)}
@keyframes fadeOut{to{opacity:0;transform:translateX(12px)}}

/* ── SKELETON ───────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-raised) 50%,var(--bg-card) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-row{padding:10px 13px;display:flex;flex-direction:column;gap:8px}
.skel-line{height:11px}
.skel-w80{width:80%}.skel-w55{width:55%}.skel-w35{width:35%}

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty{text-align:center;padding:44px 20px;color:var(--tx-3)}
.empty svg{width:40px;height:40px;margin-bottom:12px;opacity:0.3}
.empty h3{font-size:0.85rem;font-weight:700;color:var(--tx-2);margin-bottom:4px}
.empty p{font-size:0.75rem}

/* ── SPINNER ────────────────────────────────────────────── */
.spin{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:rotate 0.65s linear infinite;flex-shrink:0}
@keyframes rotate{to{transform:rotate(360deg)}}
.spin-center{display:flex;justify-content:center;padding:36px}

/* ── TABS (top bar style) ───────────────────────────────── */
.tabs{display:flex;gap:2px;background:var(--bg-input);border-radius:var(--r-sm);padding:3px;margin-bottom:18px}
.tab{
  flex:1;padding:7px 14px;border-radius:4px;border:none;background:none;
  font-family:inherit;font-size:0.78rem;font-weight:500;
  color:var(--tx-2);cursor:pointer;transition:all var(--t);text-align:center;white-space:nowrap;
}
.tab.active{background:var(--bg-card);color:var(--brand);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,0.12)}
.tp{display:none}.tp.active{display:block;animation:fadeUp 0.18s var(--ease)}

/* ── SETTINGS LAYOUT ────────────────────────────────────── */
.settings-wrap{display:grid;grid-template-columns:200px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.settings-nav{border-inline-end:1px solid var(--border);padding:8px}
.settings-body{padding:24px}
.s-nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:0.8rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;transition:all var(--t);border:none;background:none;
  width:100%;text-align:start;font-family:inherit;
}
.s-nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:0.7}
.s-nav-item:hover{background:var(--bg-hover);color:var(--tx-1)}
.s-nav-item.active{background:var(--brand-dim);color:var(--brand);font-weight:700}
.s-nav-item.active svg{opacity:1}
.s-nav-sep{height:1px;background:var(--border);margin:6px 0}
.s-section{display:none}.s-section.active{display:block}
.s-section h2{font-size:0.9rem;font-weight:800;color:var(--tx-1);margin-bottom:4px}
.s-section .desc{font-size:0.77rem;color:var(--tx-2);margin-bottom:22px}

/* ── SERVICE TOGGLE ROW ──────────────────────────────────── */
.svc-grid{display:flex;flex-direction:column;gap:1px}
.svc-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-radius:var(--r-sm);
  transition:background var(--t);
}
.svc-row:hover{background:var(--bg-raised)}
.svc-row-l{display:flex;align-items:center;gap:10px}
.svc-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-icon svg{width:15px;height:15px}
.svc-nm{font-size:0.82rem;font-weight:600;color:var(--tx-1)}
.svc-desc{font-size:0.71rem;color:var(--tx-2);margin-top:1px}

/* ── CATEGORY CHIP GRID ─────────────────────────────────── */
.cat-chips{display:flex;flex-wrap:wrap;gap:7px}
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:5px;
  border:1px solid var(--border);background:var(--bg-input);
  font-size:0.74rem;font-weight:600;color:var(--tx-2);
  cursor:pointer;transition:all var(--t);
}
.cat-chip svg{width:12px;height:12px}
.cat-chip.on{background:var(--brand-dim);border-color:var(--brand-glow);color:var(--brand)}
.cat-chip:hover{border-color:var(--border-md)}

/* ── CHATBOT MENU CONTROL ───────────────────────────────── */
.menu-items{display:flex;flex-direction:column;gap:6px}
.menu-item-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;background:var(--bg-raised);
  border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:grab;
}
.menu-item-row .drag-handle{color:var(--tx-3);cursor:grab}
.menu-item-row .drag-handle svg{width:13px;height:13px}
.menu-item-row .menu-item-label{flex:1;font-size:0.81rem;font-weight:600;color:var(--tx-1)}
.menu-item-row .menu-item-sub{font-size:0.71rem;color:var(--tx-2)}

/* ── SUBSCRIPTION / BILLING ─────────────────────────────── */
.plan-card{
  background:linear-gradient(135deg,var(--brand-dim) 0%,rgba(59,130,246,0.05) 100%);
  border:1px solid var(--border-brand);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.plan-info{}
.plan-name{font-size:1.1rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.02em}
.plan-meta{font-size:0.75rem;color:var(--tx-2);margin-top:3px}
.plan-price{text-align:end}
.plan-amt{font-size:1.4rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.plan-cycle{font-size:0.72rem;color:var(--tx-2)}

.usage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.usage-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.usage-lbl{font-size:0.7rem;font-weight:700;color:var(--tx-2);letter-spacing:0.03em;margin-bottom:8px}
.usage-vals{display:flex;justify-content:space-between;margin-bottom:6px}
.usage-used{font-size:0.88rem;font-weight:800;color:var(--tx-1)}
.usage-max{font-size:0.75rem;color:var(--tx-3)}
.usage-bar{height:5px;background:var(--bg-raised);border-radius:3px;overflow:hidden}
.usage-fill{height:100%;border-radius:3px;background:var(--brand);transition:width 0.5s var(--ease)}
.usage-fill.warn{background:var(--amber)}
.usage-fill.danger{background:var(--red)}
.usage-pct{font-size:0.68rem;color:var(--tx-3);margin-top:4px}

.bulk-section h3{font-size:0.88rem;font-weight:800;color:var(--tx-1);margin-bottom:4px}
.bulk-desc{font-size:0.76rem;color:var(--tx-2);margin-bottom:14px}
.bulk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bulk-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;
  transition:all var(--t);background:var(--bg-card);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
}
.bulk-card:hover{border-color:var(--brand-glow);background:var(--brand-dim)}
.bulk-card.popular{border-color:var(--brand)}
.bulk-pop-badge{
  position:absolute;top:0;right:0;
  background:var(--brand);color:#fff;
  font-size:0.62rem;font-weight:800;
  padding:3px 9px;border-radius:0 var(--radius) 0 6px;
  letter-spacing:0.04em;
}
html[dir="rtl"] .bulk-pop-badge{right:auto;left:0;border-radius:var(--radius) 0 6px 0}
.bulk-requests{font-size:1.1rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.02em}
.bulk-price{font-size:1.6rem;font-weight:800;color:var(--brand);letter-spacing:-0.04em}
.bulk-per{font-size:0.7rem;color:var(--tx-3)}
.bulk-btn{margin-top:8px}

.billing-tbl{margin-top:16px}
.billing-tbl h3{font-size:0.84rem;font-weight:800;color:var(--tx-1);margin-bottom:12px}

/* ── REQUESTS LIST ──────────────────────────────────────── */
.req-list{display:flex;flex-direction:column;gap:6px}
.req-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;
  transition:all var(--t);
}
.req-item:hover{border-color:var(--border-brand);background:var(--brand-dim)}
.req-item.esc{border-color:rgba(239,68,68,0.3)}
.req-ico{
  width:30px;height:30px;border-radius:8px;
  background:var(--brand-dim);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.req-ico svg{width:14px;height:14px}
.req-body{flex:1;min-width:0}
.req-name{font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-meta{font-size:0.69rem;color:var(--tx-3);margin-top:1px}
.req-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}

/* ── DETAIL DRAWER ──────────────────────────────────────── */
.d-block{margin-bottom:14px}
.d-lbl{font-size:0.66rem;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px}
.d-val{font-size:0.82rem;color:var(--tx-1)}
.note-chip{
  padding:8px 10px;background:var(--bg-raised);border-radius:var(--r-sm);
  margin-bottom:6px;font-size:0.76rem;color:var(--tx-2);
  border-inline-start:2px solid var(--brand);line-height:1.4;
}

/* ── HOTEL SETUP ─────────────────────────────────────────── */
.hotel-wrap{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);box-shadow:0 4px 24px rgba(0,0,0,0.18)}
.hotel-nav{max-height:calc(100vh - 140px);overflow-y:auto;border-inline-end:1px solid var(--border);padding:0 8px 10px;background:var(--bg-sidebar)}

/* Nav identity card */
.hn-identity{display:flex;align-items:center;gap:10px;padding:16px 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.hn-id-avatar{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#5ec9a0,#3aa87e);
  border:none;
  color:#080f14;font-weight:800;font-size:0.85rem;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(94,201,160,0.4);
}
.hn-id-info{min-width:0}
.hn-id-name{font-size:0.85rem;font-weight:700;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.hn-id-badge{display:inline-flex;margin-top:4px;font-size:0.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:var(--brand-dim);border-radius:4px;padding:1px 6px}

/* Section page header */
.sec-pg-hdr{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border)}
.sec-acc{width:3px;height:38px;border-radius:3px;flex-shrink:0}
.sec-pg-hdr h2{font-size:1.05rem;font-weight:800;color:var(--tx-1);margin:0 0 4px}
.sec-pg-hdr p{font-size:0.73rem;color:var(--tx-2);margin:0;line-height:1.45}
.h-nav-section{
  font-size:0.6rem;font-weight:800;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:0.1em;
  padding:14px 8px 5px;
}
.h-nav-section:first-child{padding-top:6px}
.h-nav-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;border-radius:10px;
  border:none;background:none;font-family:inherit;
  font-size:0.8rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;transition:all 0.2s var(--ease);text-align:start;
  margin-bottom:2px;position:relative;
}
.h-nav-btn svg{width:15px;height:15px;flex-shrink:0;opacity:0.6;transition:all var(--t)}
.h-nav-btn:hover{background:var(--bg-hover);color:var(--tx-1);transform:translateX(2px)}
html[dir="rtl"] .h-nav-btn:hover{transform:translateX(-2px)}
.h-nav-btn:hover svg{opacity:0.95}
.h-nav-btn.active{
  background:linear-gradient(135deg,rgba(94,201,160,0.15),rgba(94,201,160,0.05));
  color:var(--brand);font-weight:700;
  box-shadow:inset 3px 0 0 var(--brand),0 2px 8px rgba(94,201,160,0.1);
}
.h-nav-btn.active svg{opacity:1}
html[dir="rtl"] .h-nav-btn.active{box-shadow:inset -3px 0 0 var(--brand),0 2px 8px rgba(94,201,160,0.1)}
/* 🔒 وسمُ «هذه الصفحة للقراءة» — لمن مُنح بعضَ صفحات معلومات الفندق لا كلَّها.
   يُرسَم في _applyHotelInfoAccess، ولا يظهر للمدير أصلاً. */
.h-nav-lock{margin-inline-start:auto;display:inline-flex;flex:none;opacity:.42}
.h-nav-lock svg{width:12px;height:12px;opacity:1}

.hotel-body{padding:28px 30px;overflow-y:auto;max-height:calc(100vh - 140px)}
.h-sec{display:none}
.h-sec.active{display:block;animation:fadeUp 0.16s var(--ease)}

/* Section header with icon */
.hs-hdr{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hs-hdr-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-hdr-ico svg{width:18px;height:18px}
.hs-hdr h2{font-size:1rem;font-weight:800;color:var(--tx-1);margin:0 0 2px}
.hs-hdr .desc{font-size:0.75rem;color:var(--tx-2);margin:0}

/* Content card */
.hs-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all 0.25s var(--ease);}
.hs-card:hover{border-color:var(--border-md);}
.hs-card-title{font-size:0.85rem;font-weight:700;color:var(--tx-1);margin-bottom:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;}
.hs-card-title::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,#5ec9a0,#3aa87e);border-radius:2px;}
.hs-card-desc{font-size:0.73rem;color:var(--tx-2);margin-bottom:10px;margin-top:-4px}
.hs-card-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.hs-card-toolbar .hs-card-title{margin-bottom:0}
.hs-actions{display:flex;align-items:center;gap:10px;padding-top:4px}

/* Quick replies */
.qr-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.qr-item{display:flex;align-items:center;gap:8px}
.qr-item-fields{display:flex;gap:8px;flex:1}
.qr-fi{height:34px;font-size:0.78rem!important;padding:0 10px!important}
.qr-del-btn{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--tx-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;
}
.qr-del-btn:hover{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.3)}

/* Embed & Link */
.embed-grid{display:grid;grid-template-columns:1fr 210px;gap:16px;align-items:start}
.link-copy-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.link-field{font-size:0.74rem!important;color:var(--tx-2)!important}
.embed-channel-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.embed-channel-btn{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  font-size:0.72rem;font-weight:600;color:var(--tx-2);text-decoration:none;transition:all .15s;
}
.embed-channel-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.embed-channel-btn svg{width:12px;height:12px}
.embed-btn-row{display:flex;gap:8px}
.qr-display{display:flex;justify-content:center;padding:8px 0}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr-svg{width:110px;height:110px}
.qr-url{font-size:0.63rem;color:var(--tx-3);letter-spacing:.3px;text-align:center;word-break:break-all}
.code-block{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-top:12px;overflow-x:auto}
.code-block pre{margin:0;font-size:0.72rem;color:var(--brand);font-family:'Fira Code','Courier New',monospace;white-space:pre;line-height:1.6}

/* ── SERVICE CARDS ──────────────────────────────────────── */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.svc-card{
  padding:16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);transition:all var(--t);
}
.svc-card.new-flash{animation:flash 2s var(--ease)}
@keyframes flash{0%,100%{border-color:var(--border)}40%{border-color:var(--brand);background:var(--brand-dim)}}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sc-room{font-size:0.9rem;font-weight:800;color:var(--brand)}
.sc-type{font-size:0.79rem;color:var(--tx-2);margin-bottom:12px}
.sc-time{font-size:0.69rem;color:var(--tx-3)}

/* ── OFFERS ─────────────────────────────────────────────── */
.offers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.offer-card{
  padding:16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-card);
}
.offer-card.expired{opacity:0.5}
.offer-title{font-size:0.85rem;font-weight:700;margin-bottom:4px}
.offer-desc{font-size:0.75rem;color:var(--tx-2);margin-bottom:12px;line-height:1.4}
.offer-foot{display:flex;align-items:center;justify-content:space-between}
.offer-exp{font-size:0.68rem;color:var(--tx-3)}

/* ── WELCOME PREVIEW ────────────────────────────────────── */
.welcome-prev{
  margin-top:14px;padding:14px;
  background:var(--brand-dim);border:1px solid var(--border-brand);
  border-radius:var(--r-sm);font-size:0.82rem;color:var(--tx-1);line-height:1.55;
}
.prev-lbl{font-size:0.67rem;font-weight:700;color:var(--brand);margin-bottom:6px}

/* ── ACTIVITY LOG ───────────────────────────────────────── */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filter-row .fs{width:auto;min-width:130px}
.filter-row .fi{width:auto;min-width:130px}
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.pg-info{font-size:0.72rem;color:var(--tx-3)}
.pg-btns{display:flex;gap:3px}
.pg-btn{min-width:28px;height:28px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--tx-2);cursor:pointer;font-size:0.74rem;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0 5px;transition:all var(--t)}
.pg-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pg-btn:hover:not(.active){border-color:var(--border-brand);color:var(--brand)}

/* ── LEGEND ─────────────────────────────────────────────── */
.legend{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.leg-item{display:flex;align-items:center;gap:7px;font-size:0.74rem}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.leg-label{flex:1;color:var(--tx-2)}
.leg-val{font-weight:700;color:var(--tx-1)}

/* ── STAT SUMMARY BAR ───────────────────────────────────── */
.stat-bar{display:flex;gap:0;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.stat-bar-item{flex:1;text-align:center}
.stat-bar-item+.stat-bar-item{border-inline-start:1px solid var(--border)}
.sb-lbl{font-size:0.67rem;color:var(--tx-3)}
.sb-val{font-size:1rem;font-weight:800;color:var(--tx-1)}

/* ── WIFI SECTION ───────────────────────────────────────── */
.wifi-layout{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
@media(max-width:900px){.wifi-layout{grid-template-columns:1fr}}

/* Password input with show/hide toggle */
.pwd-toggle{
  position:absolute;right:0;bottom:0;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  cursor:pointer;color:var(--tx-3);transition:color var(--t);
}
.pwd-toggle:hover{color:var(--brand)}
.pwd-toggle svg{width:15px;height:15px}

/* WiFi preview bubble */
.wifi-preview-card{
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
}
.wpc-label{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--tx-3);margin-bottom:12px}
.wpc-bubble{
  background:var(--bg-card);border:1px solid var(--border-brand);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.wpc-ico{
  width:36px;height:36px;background:var(--brand-dim);border-radius:8px;
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;
}
.wpc-ico svg{width:18px;height:18px;color:var(--brand)}
.wpc-title{font-size:0.85rem;font-weight:700;color:var(--tx-1)}
.wpc-row{display:flex;flex-direction:column;gap:2px}
.wpc-key{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-3)}
.wpc-val{font-size:0.78rem;color:var(--brand);font-family:'Fira Code','Courier New',monospace;font-weight:600;word-break:break-all}
.wpc-notes{font-size:0.72rem;color:var(--tx-2);line-height:1.45;margin-top:4px;font-style:italic}

/* ── CHECK-IN / CHECK-OUT SECTION ───────────────────────── */
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.time-grid{grid-template-columns:1fr}}
.time-input-wrap{display:flex;flex-direction:column;gap:4px}
.time-hint{font-size:0.67rem;color:var(--tx-3);margin-top:2px}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.policy-grid{grid-template-columns:1fr}}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.toggle-row-lbl{font-size:0.78rem;font-weight:500;color:var(--tx-1)}
.toggle-row-desc{font-size:0.68rem;color:var(--tx-2);margin-top:1px}

/* ── REQUESTS PANEL ─────────────────────────────────────── */
.req-summary-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.req-stat-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--bg-card);
  transition:transform var(--t);min-width:0;overflow:visible;
}
.req-stat-card>div:last-child{min-width:0;flex:1}
.req-stat-card:hover{transform:translateY(-1px)}
.rsq-ico{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rsq-ico svg{width:16px;height:16px}
.rsq-val{font-size:1.5rem;font-weight:800;color:var(--tx-1);line-height:1.2}
.rsq-lbl{font-size:0.67rem;color:var(--tx-2);margin-top:3px;white-space:normal;word-break:break-word;max-width:100px}
.rsq-red  .rsq-ico{background:var(--red-bg);color:var(--red)}
.rsq-amber.rsq-ico,.rsq-amber .rsq-ico{background:var(--amber-bg);color:var(--amber)}
.rsq-blue .rsq-ico{background:var(--blue-bg);color:var(--blue)}
.rsq-green .rsq-ico{background:var(--brand-dim);color:var(--brand)}
.rsq-red  .rsq-val{color:var(--red)}
.rsq-amber .rsq-val{color:var(--amber)}
.rsq-blue .rsq-val{color:var(--blue)}
.rsq-green .rsq-val{color:var(--brand)}

/* Request card and tabs */
.req-card{padding:0;overflow:hidden}
.req-tabs{
  display:flex;gap:0;padding:0 16px;
  border-bottom:1px solid var(--border);background:var(--bg-card);
  overflow-x:auto;
}
.rtab{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 16px;border:none;background:none;
  font-family:inherit;font-size:0.78rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;white-space:nowrap;position:relative;transition:color var(--t);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.rtab svg{width:13px;height:13px;opacity:0.6;transition:opacity var(--t)}
.rtab:hover{color:var(--tx-1)}
.rtab.active{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
.rtab.active svg{opacity:1}
.rtab-cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--red-bg);color:var(--red);
  border-radius:9px;font-size:0.62rem;font-weight:800;
}
.rtab.active .rtab-cnt{background:var(--brand-dim);color:var(--brand)}

/* Request list items */
.req-list{display:flex;flex-direction:column;gap:0;padding:8px 16px 16px}
.req-item2{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 12px;border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--t);
  border-left:3px solid transparent;margin-bottom:4px;
  background:var(--bg-raised);border:1px solid var(--border);
}
.req-item2:hover{background:var(--bg-hover);border-color:var(--border-md)}
.ritem-new{border-left-color:var(--amber)}
.ritem-esc{border-left-color:var(--red);background:rgba(239,68,68,0.03)}
.ritem-done{border-left-color:var(--brand);opacity:0.7}
.ri2-avatar{
  width:34px;height:34px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:800;color:var(--tx-2);flex-shrink:0;
}
.ritem-esc .ri2-avatar{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.2)}
.ritem-new .ri2-avatar{background:var(--amber-bg);color:var(--amber);border-color:rgba(245,158,11,0.2)}
.ritem-done .ri2-avatar{background:var(--brand-dim);color:var(--brand);border-color:var(--border-brand)}
.ri2-body{flex:1;min-width:0}
.ri2-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.ri2-cat{font-size:0.82rem;font-weight:700;color:var(--tx-1)}
.ri2-esc{font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--red);background:var(--red-bg);border-radius:4px;padding:1px 6px}
.ri2-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.71rem;color:var(--tx-2)}
.ri2-meta span{display:inline-flex;align-items:center;gap:3px}

/* Operations tab header */
.ops-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.ops-title{font-size:0.85rem;font-weight:700;color:var(--tx-1)}
.ops-sub{font-size:0.72rem;color:var(--tx-2);margin-top:2px}

/* RTL: flip priority border to the right side */
html[dir="rtl"] .req-item2{border-left:1px solid var(--border);border-right:3px solid transparent}
html[dir="rtl"] .ritem-new{border-right-color:var(--amber);border-left-color:transparent}
html[dir="rtl"] .ritem-esc{border-right-color:var(--red);border-left-color:transparent}
html[dir="rtl"] .ritem-done{border-right-color:var(--brand);border-left-color:transparent}

@media(max-width:900px){.req-summary-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.req-summary-bar{grid-template-columns:1fr}}

/* ── RESPONSIVENESS ─────────────────────────────────────── */
@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-6{grid-template-columns:repeat(3,1fr)}
  .g12,.g21{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .usage-grid{grid-template-columns:1fr 1fr}
  .bulk-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  #main-content{padding:14px}
  .settings-wrap,.hotel-wrap{grid-template-columns:1fr}
  .settings-nav,.hotel-nav{border-inline-end:none;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:2px;padding:6px}
  .s-nav-item,.h-nav-btn{width:auto;padding:6px 10px}
  .g3{grid-template-columns:1fr 1fr}
  .kpi-grid-6{grid-template-columns:repeat(2,1fr)}
  .usage-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .kpi-grid,.kpi-grid-6{grid-template-columns:1fr 1fr}
  .fr,.g3,.bulk-grid{grid-template-columns:1fr}
  .hdr-brand{display:none}
  .user-nm,.user-rl{display:none}
}

/* ── PRINT ──────────────────────────────────────────────── */
@media print{
  body{background:#fff!important;color:#000!important}
  #top-header,.no-print,#notif-pip{display:none!important}
  #app{display:block!important}
  #main-content{padding:0!important}
  .panel{display:block!important}
  .card{border:1px solid #ddd!important;background:#fff!important;box-shadow:none!important;break-inside:avoid}
  .kpi{border:1px solid #ddd!important;background:#f9f9f9!important;break-inside:avoid}
  .kpi-val{color:#111!important}
  .kpi-lbl,.card-title,.sb-lbl{color:#555!important}
  .ch-wrap{break-inside:avoid}
  .g3,.g2,.g21{break-inside:avoid}
  @page{margin:1.5cm;size:A4}
}

/* ── FLEXIBLE CHART LAYOUT ──────────────────────────────── */
.ov-charts-wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.ov-chart-item{min-width:0}
.ov-chart-item .card{height:100%}
.ov-chart-lg  {flex:2 1 400px}
.ov-chart-md  {flex:1.5 1 280px}
.ov-chart-sm  {flex:1 1 220px}
.ov-chart-full{flex:1 0 100%}
@media(max-width:900px){
  .ov-chart-lg,.ov-chart-md{flex:1 1 100%}
  .ov-chart-sm{flex:1 1 48%}
}
@media(max-width:540px){
  .ov-chart-sm{flex:1 1 100%}
}

/* ── KPI CLICKABLE ──────────────────────────────────────── */
.kpi-clickable{cursor:pointer;transition:transform 0.15s,box-shadow 0.15s}
.kpi-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.25)}
.kpi-sub{font-size:0.72rem;color:var(--tx-3);margin-top:3px}
.kpi-detail-hint{font-size:0.69rem;color:var(--brand);margin-top:8px;opacity:0;transition:opacity 0.15s}
.kpi-clickable:hover .kpi-detail-hint{opacity:1}

/* ── CUSTOMIZE MODAL ────────────────────────────────────── */
.modal-customize{width:520px}
.cust-group{margin-bottom:18px}
.cust-group-title{font-size:0.72rem;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.cust-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.15s}
.cust-item:hover{background:var(--bg-raised)}
.cust-chk{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.cust-lbl{font-size:0.85rem;color:var(--tx-1)}

/* ── DETAIL MODAL ───────────────────────────────────────── */
.modal-wide{width:680px}
.wdt-summary{font-size:0.85rem;color:var(--tx-2);background:var(--bg-raised);border-radius:8px;padding:12px 14px;margin-bottom:4px;line-height:1.6}

/* ── PMS INTEGRATION ────────────────────────────────────── */
.int-block{
  padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);
  margin-bottom:12px;background:var(--bg-raised);
}
.int-block-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.int-block-title{font-size:0.88rem;font-weight:700;color:var(--tx-1);margin-bottom:2px}
.int-block-sub{font-size:0.75rem;color:var(--tx-2)}

.pms-status-badge{
  flex-shrink:0;padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:700;
  background:var(--bg-card);color:var(--tx-2);border:1px solid var(--border);
  white-space:nowrap;
}
.pms-status-badge.connected{
  background:rgba(94,201,160,0.12);color:var(--brand);border-color:rgba(94,201,160,0.3);
}

.pms-last-sync{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  font-size:0.72rem;color:var(--tx-2);
}

.pms-tag{
  display:inline-block;margin-inline-start:6px;
  padding:1px 6px;border-radius:4px;font-size:0.62rem;font-weight:800;
  background:rgba(59,130,246,0.15);color:#3b82f6;border:1px solid rgba(59,130,246,0.25);
  vertical-align:middle;letter-spacing:0.04em;
}

@keyframes spin{to{transform:rotate(360deg)}}
.spinning #sync-ico,.spinning-ico{animation:spin 0.8s linear infinite;transform-origin:center}

/* ── Guest Filter / Sort Bar ── */
.guest-filter-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-bottom:12px;
}
.gfb-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gfb-chip{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--tx-2);font-size:0.76rem;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.gfb-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.gfb-chip.active{background:var(--brand-dim);border-color:rgba(94,201,160,0.4);color:var(--brand)}
.gfb-sort{display:flex;align-items:center;gap:6px}
.sortable{cursor:pointer;user-select:none;transition:color .15s}
.sortable:hover{color:var(--brand)}
.sortable.sort-active{color:var(--brand)}
/* Sort arrow spans (SVG injected by JS) */
.sa,.sort-arrow{display:inline-flex;align-items:center;margin-left:3px;vertical-align:middle}
/* Count badge on filter chips */
.gfc-cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--bg-raised);border-radius:9px;
  font-size:0.66rem;font-weight:700;color:var(--tx-2);
  transition:background .15s,color .15s;
}
.gfb-chip.active .gfc-cnt{background:rgba(94,201,160,0.18);color:var(--brand)}
/* Result info in toolbar */
.gfb-result-info{font-size:0.74rem;color:var(--tx-2);white-space:nowrap}
.gfb-ri-count{font-weight:700;color:var(--tx-1)}
.gfb-ri-filter{color:var(--brand);font-weight:600;text-transform:capitalize}
.guest-table-foot{
  display:flex;align-items:center;justify-content:flex-end;
  padding:10px 14px 4px;border-top:1px solid var(--border);
}

/* ── GUEST PANEL REDESIGN ─────────────────────────────── */
.guest-stats-row{display:flex;gap:12px;flex-wrap:wrap}
.guest-stat-card{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;
  flex:1 1 160px;transition:all 0.15s;
}
.guest-stat-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.gsc-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gsc-ico svg{width:18px;height:18px}
.gsc-val{font-size:1.5rem;font-weight:800;color:var(--tx-1);line-height:1}
.gsc-lbl{font-size:0.72rem;color:var(--tx-2);margin-top:2px}

/* ── GUEST TOOLBAR ───────────────────────────────────── */
.guest-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.guest-toolbar-left{flex-shrink:0}
.guest-toolbar-center{flex:1;display:flex;justify-content:center}
.guest-toolbar-right{flex-shrink:0}

/* ── GUEST TABLE ─────────────────────────────────────── */
.guests-table thead th{
  position:sticky;top:0;z-index:5;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-md);
}
.guests-table tr.guest-row{transition:background 0.12s;border-bottom:1px solid var(--border)}
.guests-table tbody tr:nth-child(even).guest-row{background:rgba(255,255,255,0.012)}
.guests-table tr.guest-row:hover{background:var(--bg-hover)!important}
.room-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:4px 10px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:8px;font-weight:700;font-size:0.88rem;color:var(--tx-1);
  letter-spacing:.5px;
}
.guest-cell{display:flex;align-items:center;gap:10px}
.guest-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.73rem;font-weight:700;flex-shrink:0;
}
.guest-name{font-weight:600;font-size:0.88rem;color:var(--tx-1)}
.guest-booking{font-size:0.72rem;margin-top:1px;font-family:monospace;color:var(--tx-2)}
/* Stay cell */
.stay-cell{display:flex;flex-direction:column;gap:3px}
.stay-dates{font-size:0.81rem;color:var(--tx-1);display:flex;align-items:center;gap:4px;white-space:nowrap}
.stay-arr{color:var(--tx-3);font-size:0.72rem;flex-shrink:0}
.stay-nights{
  display:inline-flex;align-items:center;
  font-size:0.67rem;font-weight:700;color:var(--tx-2);
  background:var(--bg-raised);border-radius:4px;
  padding:1px 5px;width:fit-content;letter-spacing:.4px;
}
/* Message usage v2 */
.msg-usage2{min-width:110px}
.mu2-header{font-size:0.78rem;margin-bottom:4px}
.mu2-used{font-weight:700;color:var(--tx-1)}
.mu2-of{color:var(--tx-3);font-size:0.74rem}
.mu2-bar-row{display:flex;align-items:center;gap:6px}
.mu2-bar{flex:1}
.mu2-pct{font-size:0.7rem;font-weight:700;color:var(--tx-2);white-space:nowrap;min-width:28px;text-align:right}
.mu2-pct.warn{color:var(--amber)}
.mu2-pct.danger{color:var(--red)}

/* ── ACTION MENU ─────────────────────────────────────── */
.act-menu-wrap{position:relative}
.act-menu-btn{
  width:32px;height:32px;border-radius:8px;border:none;
  background:transparent;color:var(--tx-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s,color 0.15s;
}
.act-menu-btn:hover{background:var(--bg-raised);color:var(--tx-1)}
.act-menu{
  position:absolute;right:0;top:calc(100% + 4px);z-index:200;
  background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:10px;padding:6px;min-width:150px;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  display:none;
}
.act-menu.open{display:block;animation:fadeUp 0.12s ease}
.act-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:6px;cursor:pointer;
  font-size:0.82rem;color:var(--tx-1);transition:background 0.12s;
  white-space:nowrap;
}
.act-item:hover{background:var(--bg-raised)}
.act-item.danger{color:var(--red)}
.act-item.danger:hover{background:var(--red-bg)}
.act-sep{height:1px;background:var(--border);margin:4px 0}

/* ── Contact Cards ── */
.contact-cards{display:flex;gap:12px;flex-wrap:wrap}
.contact-card{
  display:flex;align-items:center;gap:14px;flex:1;min-width:180px;
  padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface-2);text-decoration:none;color:var(--tx-1);
  transition:border-color .2s,background .2s;
}
.contact-card:hover{border-color:var(--brand);background:var(--brand-dim)}
.contact-card-ico{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-dim);color:var(--brand);flex-shrink:0;
}
.contact-card-title{font-size:0.8rem;font-weight:600;margin-bottom:2px}
.contact-card-val{font-size:0.72rem;color:var(--tx-2)}

/* ── PRINT ──────────────────────────────────────────────── */
@media print{
  #top-header,.no-print,.ph-r{display:none!important}
  #main-content{margin:0;padding:0}
  .card{break-inside:avoid;border:1px solid #ddd!important;background:#fff!important}
  body{background:#fff!important;color:#000!important}
  .panel{display:block!important}
}

/* ── UTILITY ────────────────────────────────────────────── */
.c-brand{color:var(--brand)}
.c-muted{color:var(--tx-2)}
.c-red{color:var(--red)}
.fw-7{font-weight:700}.fw-8{font-weight:800}
.fs-sm{font-size:0.77rem}.fs-xs{font-size:0.69rem}
.w-full{width:100%}
.dn{display:none!important}
.ta-c{text-align:center}
.ac-row{display:flex;align-items:center;gap:5px}
.mt2{margin-top:8px}

/* ── MINIMALIST REFINEMENTS ──────────────────────────────── */

/* KPI: left accent stripe (RTL-safe) instead of top bar */
.kpi::before{
  top:0;left:0;right:auto;bottom:0;
  width:3px;height:100%;
  border-radius:var(--radius) 0 0 var(--radius);
  background:var(--brand);
}
html[dir="rtl"] .kpi::before{left:auto;right:0;border-radius:0 var(--radius) var(--radius) 0}
.kpi:nth-child(1)::before{background:var(--brand)}
.kpi:nth-child(2)::before{background:var(--blue)}
.kpi:nth-child(3)::before{background:var(--amber)}
.kpi:nth-child(4)::before{background:var(--purple)}

/* Card: subtle hover — no lift transform */
.card{
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
.card:hover{
  border-color:var(--border-md);
  box-shadow:0 2px 16px rgba(0,0,0,0.14);
}

/* Header: minimal shadow */
#top-header{
  box-shadow:0 1px 0 var(--border);
}

/* Nav active: clean pill, no inset ring */
.nav-btn.active{
  background:var(--brand-dim);
  color:var(--brand);
  font-weight:700;
  box-shadow:none;
}

/* Panel header: clean type, no decorative bar */
.ph-l h1{
  padding-inline-start:0;
  font-size:1.15rem;
}
.ph-l h1::before{
  display:none;
}

/* h-nav-btn.active defined in Hotel Setup section above */

.s-nav-item.active{
  background:var(--brand-dim);color:var(--brand);font-weight:700;
  box-shadow:inset 2px 0 0 var(--brand);
}
html[dir="rtl"] .s-nav-item.active{box-shadow:inset -2px 0 0 var(--brand)}

/* Table row hover: minimal tint */
tbody tr:hover{background:rgba(94,201,160,0.03)}

/* Btn-p: flat solid, no gradient */
.btn-p{
  background:var(--brand);
  box-shadow:none;
}
.btn-p:hover{
  background:var(--brand-d);
  box-shadow:0 2px 10px rgba(94,201,160,0.25);
  transform:none;
}

/* Food/svc card: no lift */
.food-card:hover{
  transform:none;
  border-color:var(--border-brand);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}

/* ── FOOD MENU ───────────────────────────────────────────── */
.food-cats{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:16px;
}
.food-cat-btn{
  padding:5px 14px;border-radius:20px;
  border:1px solid var(--border-md);
  background:transparent;color:var(--tx-2);
  font-size:0.74rem;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all var(--t);
}
.food-cat-btn:hover{border-color:var(--brand);color:var(--brand)}
.food-cat-btn.active{
  background:var(--brand-dim);border-color:var(--brand);
  color:var(--brand);
}

.food-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:12px;
}
.food-card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;
  transition:all var(--t);
  cursor:default;
}
.food-card:hover{
  border-color:var(--border-brand);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transform:translateY(-1px);
}
.food-card.unavail{opacity:0.55}
.food-emoji{
  font-size:1.6rem;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border-radius:10px;
  flex-shrink:0;
}
.food-name{
  font-size:0.84rem;font-weight:700;
  color:var(--tx-1);line-height:1.3;
}
.food-cat-tag{
  display:inline-block;
  font-size:0.67rem;font-weight:600;
  background:var(--bg-input);color:var(--tx-2);
  border-radius:4px;padding:1px 7px;
  width:fit-content;
  text-transform:capitalize;
}
/* ── Saudi Riyal Icon ─────────────────────────────── */
.sar-ico{
  display:inline-block;width:0.82em;height:0.9em;
  vertical-align:-0.08em;flex-shrink:0;
  overflow:visible;
}
.sar-price{
  display:inline-flex;align-items:center;gap:1px;
}
/* ── Food & Service Prices ────────────────────────── */
.food-price{
  display:inline-flex;align-items:center;gap:2px;
  font-size:1rem;font-weight:800;
  color:var(--brand);letter-spacing:-0.02em;
}
.food-price.free{color:var(--tx-2);font-size:0.78rem}
.food-card-foot{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-top:4px;padding-top:10px;
  border-top:1px solid var(--border);
}
.food-avail-lbl{font-size:0.69rem;color:var(--tx-3)}

/* ── SERVICE ITEM ROWS (Room Svc / Spa / Transport) ──────── */
.svc-item-list{display:flex;flex-direction:column;gap:8px}
.svc-item-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all var(--t);
}
.svc-item-row:hover{
  border-color:var(--border-md);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.svc-item-row.unavail{opacity:0.55}
.svc-item-emoji{
  font-size:1.5rem;
  width:44px;height:44px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border-radius:10px;
}
.svc-item-body{flex:1;min-width:0}
.svc-item-name{font-size:0.84rem;font-weight:700;color:var(--tx-1)}
.svc-item-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:3px;
}
.svc-item-tag{
  font-size:0.69rem;color:var(--tx-3);
  display:flex;align-items:center;gap:3px;
}
.svc-item-tag svg{width:10px;height:10px}
.svc-item-price{
  display:inline-flex;align-items:center;gap:2px;
  font-size:0.9rem;font-weight:800;
  color:var(--brand);white-space:nowrap;
  flex-shrink:0;
}
.svc-item-price.free{color:var(--tx-2);font-size:0.76rem;font-weight:600}
.svc-item-actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}

/* ── ↕️ أزرار ترتيب العرض (المرافق وخدمات الغرف) ───────────────
   سهمان مرصوفان رأسياً في خانة ضيّقة: الترتيب فعل متكرّر، فكلّ ضغطة
   يجب أن تُصيب هدفها من أول مرة ومن دون أن تزحزح بقية الصفّ. الأسهم
   منطقية لا اتجاهية (أعلى/أسفل) فلا تُقلب في RTL. */
.ord-cell{
  display:inline-flex;flex-direction:column;gap:2px;flex-shrink:0;
}
.ord-btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:18px;padding:0;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--tx-2);
  cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.ord-btn svg{width:12px;height:12px}
.ord-btn:hover:not(:disabled){
  background:var(--brand-dim);border-color:var(--brand-glow);color:var(--brand);
}
.ord-btn:disabled{opacity:0.3;cursor:default}
.ord-td{width:1%;white-space:nowrap;vertical-align:middle}

/* ── RESPONSIVE extras ───────────────────────────────────── */
@media(max-width:900px){
  .food-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
}
@media(max-width:640px){
  .food-grid{grid-template-columns:1fr 1fr}
}

/* ── RTL-safe overrides (added by audit fix) ─────────────────
   The dashboard renders both LTR (English) and RTL (Arabic). Many
   utility classes still use physical `margin-left/right` which doesn't
   flip on dir change. These rules patch the most visible offenders so
   Arabic mode mirrors correctly without touching the existing styles. */
[dir="rtl"] .btn,
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
  margin-left: 0;
}
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
  margin-right: 0;
}
.ml-1 { margin-inline-start: 4px; }
.ml-2 { margin-inline-start: 8px; }
.ml-3 { margin-inline-start: 12px; }
.ml-4 { margin-inline-start: 16px; }
.mr-1 { margin-inline-end: 4px; }
.mr-2 { margin-inline-end: 8px; }
.mr-3 { margin-inline-end: 12px; }
.mr-4 { margin-inline-end: 16px; }
/* ════ Users & Account — Account management page ════ */
.btn-danger{background:var(--red);color:#fff;border:1px solid var(--red)}
.btn-danger:hover{background:#dc2626;border-color:#dc2626}

.int-block-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.int-block-sub{font-size:.72rem;color:var(--tx-2);margin-top:2px}

/* Password strength meter */
.pwd-strength{display:flex;align-items:center;gap:10px}
.pwd-strength-bar{flex:1;height:5px;border-radius:3px;background:var(--bg-input);overflow:hidden}
.pwd-strength-fill{height:100%;width:0;border-radius:3px;transition:width .25s,background .25s}
.pwd-strength-label{font-size:.7rem;font-weight:600;min-width:54px;text-align:right}

/* 2FA block */
.twofa-row{display:flex;align-items:center;gap:14px}
.twofa-ico{width:38px;height:38px;border-radius:10px;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.twofa-title{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.twofa-desc{font-size:.72rem;color:var(--tx-2);margin-top:1px}
.twofa-steps{display:flex;flex-direction:column;gap:12px}
.twofa-step{display:flex;align-items:flex-start;gap:10px;font-size:.78rem;color:var(--tx-1);line-height:1.5}
.twofa-step-n{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--brand-dim);color:var(--brand);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.twofa-qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px;margin:2px auto;width:fit-content}
.twofa-code-input{text-align:center;letter-spacing:.4em;font-size:1.1rem;font-weight:600}

/* Team search */
.team-search{position:relative;display:flex;align-items:center}
.team-search svg{position:absolute;inset-inline-start:12px;color:var(--tx-2);pointer-events:none}
.team-search-input{padding-inline-start:34px}

/* Team member row */
.tm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--r-sm,10px);margin-bottom:8px;padding:11px 14px;transition:border-color .2s,background .2s}
.tm-row:hover{border-color:var(--border-md);background:var(--bg-hover)}
.tm-l{display:flex;align-items:center;gap:11px;min-width:0}
.tm-avatar{width:34px;height:34px;border-radius:9px;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.tm-info{min-width:0}
.tm-name{font-size:.82rem;font-weight:600;color:var(--tx-1);display:flex;align-items:center;gap:7px}
.tm-you{font-size:.62rem;font-weight:600;color:var(--brand);background:var(--brand-dim);padding:1px 6px;border-radius:5px}
.tm-email{font-size:.72rem;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tm-lastlogin{font-size:.68rem;color:var(--tx-2);white-space:nowrap}
.tm-actions{display:flex;align-items:center;gap:4px}
.tm-act{width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--tx-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.tm-act:hover{background:var(--bg-input);color:var(--tx-1);border-color:var(--border-md)}
.tm-act.danger:hover{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.3)}
.tm-act:disabled{opacity:.3;cursor:not-allowed}
.tm-empty{text-align:center;padding:24px;color:var(--tx-2);font-size:.78rem}

/* Invite note + delete warning */
.inv-note{font-size:.72rem;color:var(--tx-2);line-height:1.5;background:var(--bg-input);border-radius:9px;padding:10px 12px;margin-top:4px}
/* ⚠️ حين يكون الاختيارُ سليماً شكلاً وله أثرٌ لا يتوقّعه من اختاره: موظّفٌ
   بلا مشرف لا يظهر في قائمة إسناد أحد. السطرُ يتلوّن ليُقرأ، لا ليُزيَّن. */
.inv-note.warn{color:#b45309;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35)}
html[data-theme="dark"] .inv-note.warn{color:#f7d488}
.del-warn{display:flex;align-items:flex-start;gap:11px;font-size:.8rem;color:var(--tx-1);line-height:1.55;background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);border-radius:10px;padding:13px 14px}
.del-warn svg{color:var(--red);flex-shrink:0;margin-top:1px}

/* Role badges (extend existing) */
.b-manager{background:var(--blue-bg);color:var(--blue)}
.b-staff{background:rgba(78,112,128,0.12);color:var(--tx-1)}
.b-pending{background:var(--amber-bg);color:var(--amber)}

/* Password field with show/hide eye button */
.pwd-wrap{position:relative;display:flex;align-items:center}
.pwd-wrap .fi{width:100%;padding-inline-end:42px}
.pwd-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:7px;color:var(--tx-2);cursor:pointer;transition:color .15s,background .15s;padding:0}
.pwd-eye:hover{color:var(--tx-1);background:var(--bg-input)}
.pwd-eye.on{color:var(--brand)}

/* 2FA shield badge + locked badge in team list */
.tm-2fa{display:inline-flex;align-items:center;justify-content:center;color:var(--brand);margin-inline-start:6px;vertical-align:middle}
.tm-2fa svg{display:block}
.b-locked{background:var(--red-bg);color:var(--red)}

/* ════ Activity Log — pro controls ════ */
.log-th.sortable{cursor:pointer;user-select:none;position:relative}
.log-th.sortable:hover{color:var(--tx-1)}
.log-th.sortable::after{content:'⇅';opacity:.3;margin-inline-start:5px;font-size:.8em}
.log-th.sortable.sorted[data-dir="asc"]::after{content:'↑';opacity:1;color:var(--brand)}
.log-th.sortable.sorted[data-dir="desc"]::after{content:'↓';opacity:1;color:var(--brand)}
.log-cols-menu{position:absolute;z-index:50;background:var(--surface-1,#0f1c28);border:1px solid var(--border-md,rgba(255,255,255,0.12));border-radius:10px;padding:8px;margin-top:4px;box-shadow:0 12px 32px rgba(0,0,0,0.4);min-width:160px}
.log-cols-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:.8rem;color:var(--tx-1);cursor:pointer;border-radius:6px}
.log-cols-menu label:hover{background:var(--bg-hover,rgba(255,255,255,0.04))}
.log-cols-menu input[type=checkbox]{accent-color:var(--brand)}

/* ════ 🔔 Notification system ════ */
.notif-wrap{position:relative}
/* Fixed badge — no more squished number */
.notif-badge{
  position:absolute;top:-3px;inset-inline-end:-3px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;line-height:1;
  color:#fff;background:var(--red,#ef4444);
  border:2px solid var(--bg,#0a1420);border-radius:999px;
  box-sizing:border-box;
}
.hdr-act.has-unread{color:var(--brand)}
/* Dropdown panel */
.notif-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:200;
  width:360px;max-width:90vw;max-height:480px;display:flex;flex-direction:column;
  background:var(--surface-1,#0f1c28);border:1px solid var(--border-md,rgba(255,255,255,0.12));
  border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,0.5);overflow:hidden;
}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.07));font-weight:700;font-size:.9rem;color:var(--tx-1);flex:0 0 auto}
.notif-readall{background:none;border:none;color:var(--brand);font-size:.72rem;cursor:pointer;font-weight:600}
.notif-readall:hover{text-decoration:underline}
.notif-list{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;max-height:340px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.notif-empty{padding:34px 16px;text-align:center;color:var(--tx-2);font-size:.82rem}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.05));cursor:pointer;transition:background .15s;align-items:flex-start}
.notif-item:hover{background:var(--bg-hover,rgba(255,255,255,0.04))}
.notif-item.overdue{background:rgba(239,68,68,0.06)}
.ni-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ni-request .ni-icon{background:rgba(52,211,153,0.13);color:#34d399}
.ni-complaint .ni-icon{background:rgba(251,146,60,0.13);color:#fb923c}
.ni-body{flex:1;min-width:0}
.ni-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ni-title{font-weight:600;font-size:.82rem;color:var(--tx-1)}
.ni-prio{font-size:.6rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.13);padding:1px 6px;border-radius:5px}
.ni-chat{font-size:.6rem;color:var(--tx-2);background:var(--bg-input,rgba(255,255,255,0.05));padding:1px 6px;border-radius:5px}
.ni-sub{font-size:.72rem;color:var(--tx-2);margin-top:2px}
.ni-detail{font-size:.72rem;color:var(--tx-2);margin-top:3px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ni-time{flex-shrink:0;font-size:.66rem;color:var(--tx-2);white-space:nowrap}
.ni-time.overdue{color:#ef4444;font-weight:700}
.notif-foot{padding:10px 16px;border-top:1px solid var(--border-sm,rgba(255,255,255,0.07));text-align:center;flex:0 0 auto}
.notif-foot button{background:none;border:none;color:var(--brand);font-size:.78rem;cursor:pointer;font-weight:600}
.notif-foot button:hover{text-decoration:underline}
/* Row highlight when deep-linked from a notification */
@keyframes rowFlash{0%,100%{background:transparent}25%,75%{background:rgba(52,211,153,0.18)}}
.row-flash{animation:rowFlash 2.4s ease}

/* ════ Preferences & Privacy sections ════ */
.pref-block{border:1px solid var(--border-sm,rgba(255,255,255,0.08));border-radius:12px;padding:16px 18px;margin-bottom:16px}
.pref-block-h{font-weight:700;font-size:.9rem;color:var(--tx-1);margin-bottom:12px}
.pref-note{font-size:.74rem;color:var(--tx-2);margin-bottom:14px;line-height:1.5;padding:8px 11px;background:var(--bg-input,rgba(255,255,255,0.03));border-radius:8px}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--border-sm,rgba(255,255,255,0.05))}
.pref-row:first-of-type{border-top:none}
.pref-info{flex:1;min-width:0}
.pref-label{font-size:.84rem;font-weight:600;color:var(--tx-1)}
.pref-hint{font-size:.72rem;color:var(--tx-2);margin-top:2px}
/* Toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg-input,rgba(255,255,255,0.12));border-radius:24px;transition:.2s}
.switch-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .switch-slider{background:var(--brand)}
.switch input:checked + .switch-slider::before{transform:translateX(18px)}
.switch.disabled{opacity:.45;cursor:not-allowed}
.switch.disabled .switch-slider{cursor:not-allowed}
/* Segmented control */
.seg{display:inline-flex;background:var(--bg-input,rgba(255,255,255,0.06));border-radius:9px;padding:3px;gap:2px}
.seg-btn{background:none;border:none;padding:6px 14px;border-radius:7px;font-size:.78rem;color:var(--tx-2);cursor:pointer;transition:.15s;font-weight:600}
.seg-btn.active{background:var(--brand);color:#04101a}
.seg-btn:not(.active):hover{color:var(--tx-1)}
/* Privacy actions */
.priv-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn-danger{background:var(--red-bg,rgba(239,68,68,0.12));color:var(--red,#ef4444);border:1px solid rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.2)}
/* Compact density */
body.compact .tbl-wrap td,body.compact .tbl-wrap th{padding-top:6px;padding-bottom:6px}
body.compact .tm-row{padding-top:8px;padding-bottom:8px}

/* ════ 🔔 Notification read/unread + types (pro) ════ */
.notif-divider{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 5px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3,rgba(255,255,255,0.4));background:var(--bg,#0a1420);position:sticky;top:0;z-index:1}
.notif-divider .nd-count{background:var(--brand);color:#04101a;border-radius:10px;padding:1px 7px;font-size:.62rem}
/* Unread item: accent bar + tinted background */
.notif-item{position:relative;display:flex;gap:11px;padding:12px 16px 12px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.05));cursor:pointer;transition:background .15s;align-items:flex-start}
.notif-item.is-new{background:rgba(52,211,153,0.05)}
.notif-item.is-new::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--brand)}
.notif-item:hover{background:var(--bg-hover,rgba(255,255,255,0.05))}
.notif-item.overdue.is-new::before{background:#ef4444}
/* Type label colors */
.ni-type{font-size:.7rem;font-weight:700;letter-spacing:.01em}
.ni-request .ni-type{color:#34d399}
.ni-complaint .ni-type{color:#fb923c}
.ni-suggestion .ni-type{color:#a855f7}
.ni-request .ni-icon{background:rgba(52,211,153,0.13);color:#34d399}
.ni-complaint .ni-icon{background:rgba(251,146,60,0.13);color:#fb923c}
.ni-suggestion .ni-icon{background:rgba(168,85,247,0.13);color:#a855f7}
.ni-title2{font-size:.8rem;font-weight:600;color:var(--tx-1);margin-top:2px}
.ni-overdue{font-size:.58rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.13);padding:1px 6px;border-radius:5px}
/* Right meta: unread dot + time */
.ni-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.ni-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(52,211,153,0.18)}

/* ════ 🔔 Notification v2 — summary chips + richer cards ════ */
.notif-summary{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.06));background:var(--bg,#0a1420);flex:0 0 auto}
.nsum-chip{font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border-sm,rgba(255,255,255,0.12));background:transparent;color:var(--tx-2);cursor:pointer;transition:.15s;white-space:nowrap}
.nsum-chip:hover{color:var(--tx-1);border-color:var(--border-md,rgba(255,255,255,0.25))}
.nsum-chip.active{background:var(--brand);color:#04101a;border-color:var(--brand)}
.nsum-overdue{color:#ef4444;border-color:rgba(239,68,68,0.4)}
.nsum-overdue.active{background:#ef4444;color:#fff;border-color:#ef4444}
/* Type tag inside card */
.ni-type-tag{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.ni-type-tag.ni-request{background:rgba(52,211,153,0.14);color:#34d399}
.ni-type-tag.ni-complaint{background:rgba(251,146,60,0.14);color:#fb923c}
.ni-type-tag.ni-suggestion{background:rgba(168,85,247,0.14);color:#a855f7}
.ni-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ni-title2{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.ni-sub{font-size:.72rem;color:var(--tx-2);margin-top:4px;display:flex;align-items:center;gap:4px}
.ni-sub strong{color:var(--tx-1);font-weight:700}
/* Critical (>1h) gets a stronger red treatment */
.notif-item.critical{background:rgba(239,68,68,0.09)}
.notif-item.critical.is-new::before{background:#ef4444;width:4px}
.ni-overdue.crit{background:#ef4444;color:#fff;animation:critPulse 2s infinite}
.ni-time.crit{color:#ef4444;font-weight:800}
@keyframes critPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ════ 🔔 Notification v3 — delivery time + status ════ */
/* سطر واحد فقط: البطاقة تنبيه لا تذكرة — التفاصيل الكاملة تُفتح بالنقر. */
.ni-detail{font-size:.72rem;color:var(--tx-2);margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ni-delivery{font-size:.7rem;color:var(--tx-2);margin-top:4px;display:flex;align-items:center;gap:4px}
.ni-delivery strong{color:var(--brand);font-weight:700}
.ni-statusrow{margin-top:6px}
.ni-status{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-block}
.ni-status-wait{background:rgba(148,163,184,0.15);color:#94a3b8}
.ni-status-prog{background:rgba(59,130,246,0.15);color:#3b82f6}

/* 🔔 Visible scrollbar for the notification list */
.notif-list{scrollbar-width:thin;scrollbar-color:var(--border-md,rgba(255,255,255,0.25)) transparent}
.notif-list::-webkit-scrollbar{width:8px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{background:var(--border-md,rgba(255,255,255,0.22));border-radius:4px}
.notif-list::-webkit-scrollbar-thumb:hover{background:var(--border-md,rgba(255,255,255,0.4))}

/* ════ 💬 Message Wallet card ════ */
.wallet-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:14px 0 18px}
.wallet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wallet-title{font-weight:700;font-size:.95rem;color:var(--tx-1)}
.wallet-remaining{font-size:.85rem;color:var(--tx-2)}
.wallet-remaining #wallet-remaining-num{font-size:1.5rem;font-weight:800;color:var(--brand);vertical-align:-2px}
.wallet-bar{height:10px;background:var(--bg-input,rgba(255,255,255,0.08));border-radius:6px;overflow:hidden;margin-bottom:14px}
.wallet-bar-fill{height:100%;border-radius:6px;transition:width .5s ease,background .3s}
.wallet-stats{display:flex;gap:10px}
.wallet-stat{flex:1;text-align:center;background:var(--bg-input,rgba(255,255,255,0.03));border-radius:10px;padding:10px 6px}
.ws-num{font-size:1.15rem;font-weight:800;color:var(--tx-1)}
.ws-lbl{font-size:.68rem;color:var(--tx-2);margin-top:2px}
.wallet-low{display:flex;align-items:center;gap:7px;margin-top:12px;padding:8px 12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:9px;color:#ef4444;font-size:.78rem;font-weight:600}
.wallet-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* 💬 Wallet renew note + read-only field note */
.wallet-renew{margin-top:12px;font-size:.72rem;color:var(--tx-3,rgba(255,255,255,0.5));text-align:center}
.fl-note{font-size:.7rem;color:var(--tx-3,rgba(255,255,255,0.5));margin-top:5px}
.fi:disabled{opacity:.6;cursor:not-allowed}

/* ════════════════════════════════════════════════════════════════════════
   🔄 بطاقة العمليات — الفلو
   ────────────────────────────────────────────────────────────────────────
   البطاقة السابقة كانت عموداً من ستّة أزرار متساوية الوزن على يمين كل صفّ:
   الموظّف يقرأها كلّها في كل مرّة ليجد الخطوة التالية، والبطاقة تطول حتى
   يختفي ما تحتها. هنا:
     • مسارٌ أفقي يُظهر أين وصلت التذكرة بنظرة، فلا يُقرأ اسم حالةٍ ليُستنتج.
     • فعلٌ رئيسي واحد بارز = الخطوة التالية. والبقيّة خلف «⋯».
     • صفّ أدواتٍ صامت (المسار، المحادثة) بوزنٍ بصريٍّ أخفّ من الفعل.
   والجوال يقلبها عموداً كاملاً بأهدافٍ لمسٍ ٤٤ بكسل فأكثر.
   ════════════════════════════════════════════════════════════════════════ */
/* ── 🎨 البطاقة: الحالة تُقرأ قبل الكلمة ────────────────────────────────────
   ثلاثون بطاقةً بيضاء متطابقة تُقرأ سطراً سطراً للعثور على ما يحتاج عملاً.
   اللون ينقل الفرز إلى العين — لكن **بثلاث طبقاتٍ لكلٍّ منها وظيفة**، لا
   بطبقةٍ واحدة تحاول أن تفعل كل شيء:

     ① **الشريط الجانبي** مصمتٌ بالكامل — هو ما يُقرأ في قائمةٍ طويلة، وهو
        وحده ما يميّز مرحلةً عن جارتها بلا لبس.
     ② **غَمْسٌ خفيف جداً** في الخلفية (٦٪) — يُدفئ البطاقة أو يُبرّدها، ولا
        يزاحم النصّ. كان ١٣٪ فيبلع الحدود ويُذيب الأزرار الشفافة فوقه.
     ③ **توهّجٌ في الزاوية** بلون المرحلة — يعطي البطاقة عمقاً وحياةً بدل
        مستطيلٍ مسطّح، وهو الفرق بين «صندوق بيانات» و«بطاقة».

   والأحمر وحده يتحرّك: نبضةٌ بطيئة على المتأخّر. حركةٌ في كل بطاقة تعني ألّا
   شيء يلفت النظر. */
.ops-card{
  --ops-accent: var(--border-md);
  --ops-wash: 6%;
  --ops-wash-hover: 10%;
  position:relative;
  background:
    radial-gradient(120% 90% at 100% 0%,
      color-mix(in srgb, var(--ops-accent) 13%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--ops-accent) var(--ops-wash), var(--bg-card));
  border:1px solid color-mix(in srgb, var(--ops-accent) 16%, var(--border));
  border-radius:16px;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:13px;
  overflow:hidden;
  transition:border-color .18s var(--ease),background .28s var(--ease),
             box-shadow .2s var(--ease),transform .18s var(--ease)}
html[dir="rtl"] .ops-card{
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--ops-accent) 13%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--ops-accent) var(--ops-wash), var(--bg-card))}
/* الشريط الجانبي: عنصرٌ مرسوم لا حدُّ إطار — الحدّ يُقصّ عند الزوايا
   المستديرة فيبدو مقطوعاً من طرفيه. */
.ops-card::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:linear-gradient(to bottom,
    var(--ops-accent),
    color-mix(in srgb, var(--ops-accent) 55%, transparent));
  border-start-start-radius:16px;border-end-start-radius:16px}
.ops-card:hover{
  border-color:color-mix(in srgb, var(--ops-accent) 34%, var(--border));
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  transform:translateY(-1px)}
/* ⚪ الملغاة: بلا توهّج وبلا حياة — عملٌ لم يعد مطلوباً لا يزاحم ما هو مطلوب.
   ⚠️ لكنّها **ليست بلا لون**. كان هنا `background:var(--bg-card)` يمحو الغَمْس
      كلَّه ثم `opacity:.72` يُبهت ما بقي، فتخرج بطاقةٌ لا رماديّةٌ ولا ملوّنة —
      تُقرأ «معطوبة» لا «مُلغاة». الفرق بين الهدوء والغياب هو أن يبقى للحالة
      لونُها ووزنُها وتُنزع عنها الحركةُ وحدها. */
.ops-card.is-muted{opacity:.9}
.ops-card.is-muted:hover{opacity:1;transform:none;box-shadow:none}
/* 🚨 المتأخّر: نبضةٌ بطيئةٌ جداً — لافتةٌ في قائمةٍ ساكنة، غير مزعجةٍ إن طالت. */
.ops-card.is-late{animation:opsLatePulse 3.4s var(--ease) infinite}
.ops-card.is-critical{box-shadow:0 0 0 1px color-mix(in srgb, var(--ops-accent) 45%, transparent)}
@keyframes opsLatePulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ops-accent) 26%, transparent)}
  50%    {box-shadow:0 0 0 5px color-mix(in srgb, var(--ops-accent) 0%, transparent)}
}
@media (prefers-reduced-motion: reduce){
  .ops-card,.ops-card.is-late{animation:none;transition:none}
  .ops-card:hover{transform:none}
}
.ops-card.is-urgent::after{content:'';position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.28);pointer-events:none}

.ops-card-top{display:flex;align-items:flex-start;gap:13px}
.ops-avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12.5px;flex-shrink:0}
.ops-headline{flex:1;min-width:0}
.ops-title{font-size:14px;font-weight:700;color:var(--tx-1);line-height:1.3;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ops-detail{font-size:12.5px;color:var(--tx-1);line-height:1.55;margin-top:9px;
  background:color-mix(in srgb, var(--bg-raised) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ops-accent) 10%, var(--border));
  border-radius:10px;padding:9px 12px;word-break:break-word}
.ops-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--tx-2);margin-top:9px}
.ops-meta span{display:inline-flex;align-items:center;gap:4px}

/* ── 🏷️ حبّة الحالة — بلونين لا بلونٍ واحد ────────────────────────────────
   كانت درجاتُها مكتوبةً في JS داخل `style`، فلا يمكن للوضع الفاتح تجاوزها:
   `#10b981` على أبيض ≈٢٫٢:١، أي أن أهمّ كلمةٍ في البطاقة تُقرأ باهتة. هنا
   نسختان لكل حالة، والفاتحُ يُغمِّق النصّ ويُبقي التعبئة فاتحة. */
.ops-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;line-height:1.2;
  color:var(--pill-fg,var(--tx-2));background:var(--pill-bg,var(--bg-raised))}
.ops-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.ops-pill.is-received,.ops-pill.is-new,.ops-pill.is-pending{--pill-fg:#60a5fa;--pill-bg:rgba(59,130,246,.14)}
.ops-pill.is-acknowledged{--pill-fg:#fcd34d;--pill-bg:rgba(251,191,36,.14)}
.ops-pill.is-assigned{--pill-fg:#fbbf24;--pill-bg:rgba(245,158,11,.14)}
.ops-pill.is-in_progress{--pill-fg:#fdba74;--pill-bg:rgba(234,140,11,.16)}
.ops-pill.is-waiting_for_staff{--pill-fg:#60a5fa;--pill-bg:rgba(59,130,246,.14)}
.ops-pill.is-preparing{--pill-fg:#fdba74;--pill-bg:rgba(234,140,11,.16)}
.ops-pill.is-ready{--pill-fg:#fcd34d;--pill-bg:rgba(251,191,36,.14)}
.ops-pill.is-out_for_delivery{--pill-fg:#93c5fd;--pill-bg:rgba(59,130,246,.14)}
.ops-pill.is-delivered{--pill-fg:#6ee7b7;--pill-bg:rgba(74,222,128,.14)}
.ops-pill.is-completed,.ops-pill.is-done,.ops-pill.is-resolved{--pill-fg:#34d399;--pill-bg:rgba(16,185,129,.14)}
.ops-pill.is-declined,.ops-pill.is-cancelled,.ops-pill.is-unknown{--pill-fg:#cbd5e1;--pill-bg:rgba(148,163,184,.16)}
html.light .ops-pill.is-received,html.light .ops-pill.is-new,html.light .ops-pill.is-pending{--pill-fg:#1d5e92;--pill-bg:rgba(29,94,146,.09)}
html.light .ops-pill.is-acknowledged{--pill-fg:#92600a;--pill-bg:rgba(146,96,10,.10)}
html.light .ops-pill.is-assigned{--pill-fg:#9a5b06;--pill-bg:rgba(154,91,6,.10)}
html.light .ops-pill.is-in_progress{--pill-fg:#a2420b;--pill-bg:rgba(162,66,11,.10)}
html.light .ops-pill.is-waiting_for_staff{--pill-fg:#1d5e92;--pill-bg:rgba(29,94,146,.09)}
html.light .ops-pill.is-preparing{--pill-fg:#a2420b;--pill-bg:rgba(162,66,11,.10)}
html.light .ops-pill.is-ready{--pill-fg:#92600a;--pill-bg:rgba(146,96,10,.10)}
html.light .ops-pill.is-out_for_delivery{--pill-fg:#1d5e92;--pill-bg:rgba(29,94,146,.09)}
html.light .ops-pill.is-delivered{--pill-fg:#0a6b52;--pill-bg:rgba(10,107,82,.09)}
html.light .ops-pill.is-completed,html.light .ops-pill.is-done,html.light .ops-pill.is-resolved{--pill-fg:#065f46;--pill-bg:rgba(6,95,70,.09)}
html.light .ops-pill.is-declined,html.light .ops-pill.is-cancelled,html.light .ops-pill.is-unknown{--pill-fg:#475569;--pill-bg:rgba(71,85,105,.09)}

/* 🎨 والمسارُ يأخذ لون المرحلة، وهو نفسه لونُ الشريط الجانبي: درجةٌ فاتحة
   تكفي بارزةً على الأسود وتذوب على الأبيض. في الوضع الفاتح نُغمِّق النصّ
   وحده — البقعُ والخطوط تبقى بلونها لأنها أشكالٌ لا حروف. */
html.light .ops-rail-lbl span.now{color:color-mix(in srgb, var(--ops-accent) 62%, #0f2232)}

/* ── 🏷️ رأس البطاقة: الغرفة أوّلاً، ثم ما هو، ثم متى ─────────────────────
   البطاقة تجيب ثلاثة أسئلة بهذا الترتيب: **أي غرفة؟** و**ما المطلوب؟**
   و**كم بقي؟**. وكل ما عداها نزل درجة أو خرج: رقمُ المرجع (#RC-20882) لا
   يقرؤه أحد ولا يُبحث به، والوسمان «وصل» و«تم التأكيد» فوق البطاقة كانا
   يكرّران ما يقوله المسار تحتها حرفاً بحرف. */
.ops-room{display:inline-flex;align-items:baseline;gap:5px;font-size:19px;font-weight:800;
  color:var(--tx-1);letter-spacing:-.02em;line-height:1}
/* ⚠️ **«غرفة» كانت تُقرأ سوداء.** `--tx-3` في الوضع الداكن هو `#2b3f50` — لونٌ
   وُضع للفواصل والنقاط والوقت المنقضي، لا لكلمةٍ تُقرأ: على `--bg-card` يعطي
   ≈١٫٦:١، أي حبرٌ أسود على أسود. والكلمة ليست زينةً — هي التي تقول إن الرقم
   الكبير بجانبها رقمُ غرفةٍ لا رقمُ تذكرة. تأخذ لون النصّ نفسه، وحجمُها
   الصغير ووزنُها هما ما يُنزلانها درجةً تحت الرقم — لا إخفاؤها. */
.ops-room small{font-size:10px;font-weight:700;color:var(--tx-1);opacity:.82;
  text-transform:uppercase;letter-spacing:.6px}
.ops-kindtag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:6px;border:1px solid}
/* 🛎️ الطلب و⚠️ الشكوى: مختلفان في الشكل لا في الحجم وحده. موظّفٌ يمرّ على
   ثلاثين بطاقة يجب أن يعرف أيّهما ينظر إليه قبل أن يقرأ كلمة. */
.ops-kindtag.req{color:var(--brand);background:var(--brand-dim);border-color:var(--border-brand)}
.ops-kindtag.outlet{color:#f59e0b;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.28)}
.ops-kindtag.cmp{color:#f0a020;background:rgba(240,160,32,.10);border-color:rgba(240,160,32,.30)}
html.light .ops-kindtag.cmp{color:#b45309;background:rgba(180,83,9,.09);border-color:rgba(180,83,9,.22)}
.ops-due{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:8px;white-space:nowrap}
.ops-due.ok  {color:var(--brand);background:var(--brand-dim)}
.ops-due.soon{color:var(--amber);background:var(--amber-bg)}
.ops-due.late{color:var(--red);background:var(--red-bg)}
/* ⏱️ سطر الـSLA أسفل البطاقة بخطٍّ صغير: معلومةُ سياقٍ لا نداء. والكلمة
   مفهومةٌ بالعربية والإنجليزية معاً — «SLA» وحدها لا تعني شيئاً لعاملةٍ في
   الطابق الثالث. */
.ops-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:10px;color:var(--tx-3);padding-top:2px}
.ops-foot b{font-weight:700;color:var(--tx-2)}

/* ── 🛤️ المسار: مضمارٌ متّصل لا نقاطٌ متفرّقة ────────────────────────────
   الشكل السابق كان يرسم «وصلة ثم نقطة» لكل خطوة، والأولى بلا وصلة — فتطفو
   نقطة «جديد» على الحافّة ويظهر المسار مكسوراً. هنا قضيبٌ واحد يمتدّ كاملاً،
   وتعبئةٌ فوقه تصل إلى المرحلة الحالية، والنقاط ثلاثةُ أوزان تقول «أنت هنا»
   قبل أن تُقرأ كلمة. */
.ops-rail{position:relative;padding:14px 0 2px}
.ops-rail-track{position:absolute;top:18px;inset-inline:5px;height:3px;border-radius:3px;
  background:color-mix(in srgb, var(--ops-accent) 12%, var(--border));overflow:hidden}
.ops-rail-fill{position:absolute;inset-block:0;inset-inline-start:0;width:var(--rail-pct,0%);
  border-radius:3px;
  background:linear-gradient(to right,
    color-mix(in srgb, var(--ops-accent) 45%, transparent),
    var(--ops-accent));
  transition:width .45s var(--ease)}
html[dir="rtl"] .ops-rail-fill{background:linear-gradient(to left,
  color-mix(in srgb, var(--ops-accent) 45%, transparent), var(--ops-accent))}
/* ✨ ضوءٌ يجري داخل الجزء المكتمل — الحركة الوحيدة في المسار، وتتوقّف حين
   تُغلق التذكرة (لا شيء «يجري» في شيءٍ انتهى). */
.ops-card:not(.is-closed) .ops-rail-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:opsRailFlow 2.6s linear infinite}
@keyframes opsRailFlow{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

/* الشبكة: عمودٌ لكل مرحلة، فالتسمية تقع تحت نقطتها بالضبط. `space-between`
   كان يزيح الطرفين عن نقطتيهما بنصف عرض الكلمة. */
.ops-rail-steps{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.ops-step{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.ops-step:first-child{align-items:flex-start}
.ops-step:last-child{align-items:flex-end}
.ops-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-sizing:border-box;
  background:var(--bg-card);border:2px solid color-mix(in srgb, var(--ops-accent) 22%, var(--border-md));
  transition:all .3s var(--ease)}
.ops-step.done .ops-dot{background:var(--ops-accent);border-color:var(--ops-accent);width:8px;height:8px}
.ops-step.now .ops-dot{width:13px;height:13px;background:var(--ops-accent);border-color:var(--bg-card);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ops-accent) 28%, transparent)}
.ops-card:not(.is-closed) .ops-step.now .ops-dot{animation:opsDotBreathe 2.4s var(--ease) infinite}
@keyframes opsDotBreathe{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--ops-accent) 28%, transparent)}
  50%    {box-shadow:0 0 0 7px color-mix(in srgb, var(--ops-accent) 5%, transparent)}
}
.ops-step-lbl{font-size:9.5px;font-weight:600;color:var(--tx-3);white-space:nowrap;
  letter-spacing:.1px;transition:color .3s var(--ease)}
.ops-step.done .ops-step-lbl{color:var(--tx-2)}
.ops-step.now .ops-step-lbl{color:var(--ops-accent);font-weight:800}
@media (prefers-reduced-motion: reduce){
  .ops-rail-fill::after,.ops-step.now .ops-dot{animation:none!important}
}

/* ── صفّ الأفعال ─────────────────────────────────────────────────────── */
/* صفُّ الأفعال يجلس على خطٍّ فاصل: يفصل «ما جرى» عن «ما تفعله الآن»، وبدونه
   تُقرأ الأزرار امتداداً للمسار فوقها. */
.ops-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid color-mix(in srgb, var(--ops-accent) 10%, var(--border))}
.ops-assignee{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx-2);
  background:color-mix(in srgb, #ffffff 7%, var(--bg-raised));
  border:1px solid var(--border-md);border-radius:20px;padding:4px 11px 4px 5px;max-width:190px}
.ops-assignee b{font-weight:600;color:var(--tx-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-assignee .ops-ini{width:19px;height:19px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ops-spacer{flex:1}
/* ── 🔘 الأدوات الصامتة ──────────────────────────────────────────────────
   ⚠️ **كانت تختفي.** `background:transparent` فوق بطاقةٍ مغموسةٍ بلون المرحلة
      يعني زرّاً بلا جسم، وحدُّه `var(--border)` بشفافية ٧٪ يذوب في الغَمْس —
      فتُقرأ الأيقونةُ وحدها معلّقةً في الهواء، وعلى البطاقة الحمراء لا تُقرأ
      أصلاً. الأزرار الآن لها **جسمٌ صلب** من لون السطح المرتفع، فتُرى على أي
      خلفيةٍ مهما كان غَمْسُها. */
.ops-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 10px;
  border-radius:10px;border:1px solid var(--border-md);
  /* 🔆 أفتحُ من البطاقة لا مطابقٌ لها: الزرّ يجب أن **يرتفع** عن سطحه.
     المزيج السابق كان يساوي إضاءةَ البطاقة المغموسة تماماً (١٫٠٠:١)، فيبقى
     الحدُّ وحده يحمل الشكل — ويذوب هو الآخر تحت الغَمْس. */
  background:color-mix(in srgb, #ffffff 7%, var(--bg-raised));
  /* ⚠️ لا `--tx-2`: هو لون النصّ الثانوي في السطور، ونسبتُه على جسم الزرّ
     ٢٫٩:١ — أي أيقونةٌ تُرى ولا تُقرأ. وهذا نصفُ شكوى «في أزرار تختفي»:
     النصف الأول أن الزرّ بلا جسم، والثاني أن رمزَه بلون سطرٍ لا بلون زرّ.
     أدواتُ البطاقة تُضغط لا تُتصفَّح، فتأخذ درجةً أوضح — ٥:١ على جسمها
     المرفوع، مقيسةً في المتصفّح لا مقدَّرة. */
  color:#8aa6b8;cursor:pointer;
  font-size:11.5px;font-weight:600;transition:all .15s}
html.light .ops-icon-btn{color:#43566b;background:color-mix(in srgb, #0f2232 4%, #ffffff)}
.ops-icon-btn:hover{border-color:var(--brand-glow);color:var(--brand);
  background:color-mix(in srgb, var(--brand) 12%, var(--bg-raised))}
.ops-icon-btn[disabled]{opacity:.5;cursor:default}
.ops-icon-btn .ops-count{font-size:10px;font-weight:800;background:var(--brand);color:#08130f;border-radius:9px;padding:1px 6px;line-height:1.5}
.ops-icon-btn .ops-count.attention{background:#f59e0b;color:#1c1204}
/* 🔔 زرٌّ عليه عدّاد تذكيرٍ ليس زرّاً عادياً: يُبرَز حدُّه ليُقرأ من بعيد. */
.ops-icon-btn.is-nudged{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.10)}
.ops-primary{height:34px;padding:0 18px;border-radius:9px;border:none;background:var(--brand);color:#fff;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:filter .15s,box-shadow .15s;
  box-shadow:0 2px 10px color-mix(in srgb, var(--brand) 28%, transparent)}
.ops-primary:hover{filter:brightness(1.08)}
.ops-primary[disabled]{opacity:.55;cursor:default;box-shadow:none}
.ops-primary.is-quiet{background:var(--bg-raised);color:var(--tx-1);border:1px solid var(--border-md);box-shadow:none}

/* ── 🎯 الإسناد زرٌّ صريح، والإغلاق بجانبه ───────────────────────────────
   كان الإسناد يتناوب على «الزرّ الرئيسي» الوحيد مع أربعة أفعالٍ أخرى، فيقع
   أحياناً هناك وأحياناً داخل «⋯» — ويتعوّد الموظّف أن يفتح القائمة ليبحث
   عنه، فيمرّ إصبعُه فوق «إلغاء التذكرة» في كل مرّة. الآن:
     • **الإسناد** زرٌّ ثابتٌ بارز، في نفس المكان دائماً.
     • **الإغلاق بسبب** زرٌّ بجانبه، بشكلٍ يقول إنه غيرُه: محدَّدٌ لا ممتلئ،
       وبلونٍ لا يُخلط. الفعل الذي لا رجعة فيه يجب أن يبدو كذلك.
     • ولا «⋯» بعدهما — القائمة المخفيّة هي التي جعلت الاثنين يتجاوران بلا
       فرقٍ بصري.
   ─────────────────────────────────────────────────────────────────────── */
.ops-assign{position:relative;height:34px;padding:0 16px;border-radius:9px;border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#062018;
  font-size:12.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 3px 12px color-mix(in srgb, var(--brand) 34%, transparent);
  transition:filter .15s,box-shadow .15s,transform .12s}
.ops-assign:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ops-assign:active{transform:translateY(0)}
.ops-assign svg{flex-shrink:0}
/* 🚪 الإغلاق: مخرجٌ صادقٌ ظاهر — لا مخفيٌّ ولا مغريٌ بالضغط. */
.ops-close{height:34px;padding:0 14px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(248,113,113,.34);background:rgba(248,113,113,.07);color:#f87171;
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.ops-close:hover{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.55)}
html.light .ops-close{color:#dc2626;border-color:rgba(220,38,38,.30);background:rgba(220,38,38,.05)}
html.light .ops-close:hover{background:rgba(220,38,38,.10)}

/* ⏳ عدّاد مهلة المشرف — يشرح غيابَ زرِّ الإسناد بدل أن يتركه لغزاً.
   زرٌّ يختفي بلا سببٍ ظاهر يُقرأ عطلاً، فيُتّصل بالدعم بدل أن يُنتظر. */
.ops-grace{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;
  border:1px dashed color-mix(in srgb, var(--amber) 42%, transparent);
  background:var(--amber-bg);color:var(--amber);font-size:11.5px;font-weight:700;cursor:default}
.ops-grace b{font-variant-numeric:tabular-nums;font-weight:800}

/* قائمة «⋯» */
.ops-menu-wrap{position:relative}
.ops-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-end:0;z-index:40;min-width:184px;
  background:var(--bg-card);border:1px solid var(--border-md);border-radius:11px;padding:5px;
  box-shadow:0 14px 40px rgba(0,0,0,.35)}
.ops-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;background:transparent;
  color:var(--tx-1);font-size:12.5px;font-weight:500;text-align:start;border-radius:8px;cursor:pointer}
.ops-menu button:hover{background:var(--bg-raised)}
.ops-menu button.danger{color:#f87171}
.ops-menu .ops-menu-sep{height:1px;background:var(--border);margin:4px 2px}

/* ── 📱 «⋯» على الجوال: لوحةٌ من الأسفل، لا قائمةٌ معلّقة ───────────────────
   🐛 الشكوى: «تضغط النقاط الثلاث فيوديها خارج الصفحة — الاختيارات مو باينة».

   والقائمة كانت `position:absolute` معلّقةً **فوق** زرّها
   (`bottom:calc(100% + 6px)`) ومحاذيةً لحافّته (`inset-inline-end:0`) بعرضٍ
   أدنى ١٨٤px. وثلاثةُ أشياء تجتمع على الجوال فتُخرجها عن الشاشة:

     • الزرّ في آخر صفٍّ من أزرارٍ ملتفّة (`flex-wrap`)، فيقع قرب الحافّة —
       و١٨٤px منها تخرج عن العرض.
     • البطاقة قد تكون في أعلى القائمة، والفتحُ لأعلى يضعها فوق حدّ التمرير.
     • وأيُّ سلفٍ يقصّ (قائمةٌ تتمرّر) يبتلع ما خرج عنه.

   والعلاج **ليس حساب إحداثيات في JS** — ذلك يُصلح الحالات التي فُكّر فيها
   ويترك التي لم يُفكَّر فيها. على الجوال تصير لوحةً مثبّتةً على نافذة العرض
   من الأسفل بعرضها كاملاً: لا حافّة تتجاوزها، ولا سلفَ يقصّها، ولا اتجاهَ
   قد يخرج — ومساحةُ لمسٍ تليق بالإبهام بدل صفٍّ ارتفاعُه ٣٤px.

   ⚠️ و`position:fixed` تُقاس على نافذة العرض إلا إن حمل سلفٌ `transform`
      أو `filter` أو `contain` — و`.ops-card` تحمل `position:relative` فقط
      (لا تحويل)، فالإسناد يبقى للنافذة. مُثبَّتٌ باختبارٍ يقيس المستطيل. */
@media (max-width: 768px) {
  .ops-menu {
    position: fixed;
    inset-inline: 10px;
    inset-block: auto max(10px, env(safe-area-inset-bottom, 0px));
    min-width: 0;
    z-index: 9400;
    padding: 7px;
    border-radius: 16px;
    box-shadow: 0 -10px 44px rgba(0,0,0,.5);
    /* قائمةٌ طويلة على شاشةٍ قصيرة تتمرّر داخل نفسها بدل أن تتجاوز الأعلى. */
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 👆 هدفُ لمسٍ حقيقي: ٣٤px صفٌّ يُخطئه الإبهام ويفتح ما تحته. */
  .ops-menu button {
    padding: 13px 14px;
    font-size: 13.5px;
    min-height: 44px;
  }
}

/* 🍽️ طلبُ المنفذ يعيش في نفس شبكة العمليات، لكن محتواه قائمةُ أطباق لا وصفٌ واحد. */
.outlet-order-mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  flex:0 0 auto;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);font-size:20px}
.outlet-order-lines{list-style:none;margin:12px 0 2px;padding:0;display:grid;gap:7px}
.outlet-order-lines li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 10px;
  border-radius:10px;background:var(--bg-raised);color:var(--tx-2);font-size:11.5px}
.outlet-order-lines li b{color:var(--tx-1);font-size:12.5px}
.outlet-order-note{display:block;width:100%;color:#fbbf24;line-height:1.55}
.outlet-order-note small{display:block;color:var(--tx-3);font-size:10.5px;margin-top:2px}
.outlet-order-total{font-weight:800;color:var(--tx-1)}
.outlet-order-nudges{display:grid;gap:5px;padding:8px 10px;color:#fbbf24;font-size:11px}
.outlet-order-event{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:12px;color:var(--tx-2)}
.outlet-order-event b{color:var(--tx-1)}
.outlet-order-event small{grid-column:1/-1;color:var(--tx-3)}
.outlet-delivery-list{display:grid;gap:7px;max-height:55vh;overflow:auto}

/* 🍳 مراقبُ طلبات المنافذ — لوحةُ المدير فوق البطاقات: أربعُ مراحل، ومن يحمل، وما تأخّر.
   المفرداتُ مفرداتُ شاشة المطبخ؛ والأحمرُ للتأخّر وحده كي لا يُقرأ زخرفة. */
.order-monitor{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px 16px;margin-bottom:14px}
.om-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:10px}
.om-head h3{margin:0;font-size:14px;font-weight:800;color:var(--tx-1)}
.om-totals{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--tx-2)}
.om-totals span{padding:4px 10px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border)}
.om-totals b{color:var(--tx-1);margin-inline-end:3px}
.om-totals .is-warn{border-color:rgba(245,158,11,.45);color:#fbbf24}
.om-totals .is-warn b{color:#fbbf24}
.om-totals .is-late{border-color:rgba(239,68,68,.5);color:#f87171}
.om-totals .is-late b{color:#f87171}
.om-alert{display:grid;gap:2px;padding:10px 12px;margin-bottom:10px;border-radius:10px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.4);font-size:12px;color:var(--tx-1)}
.om-alert span{color:#fbbf24;font-size:11.5px}
.om-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.om-col{min-width:0;display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:12px;
  background:var(--bg-raised);border:1px solid var(--border)}
.om-col header{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.om-col h4{margin:0;font-size:12px;font-weight:800;color:var(--tx-1);flex:1;min-width:0}
.om-count{font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--bg-card);color:var(--tx-1)}
.om-count.is-late{background:rgba(239,68,68,.16);color:#f87171}
.om-empty{margin:4px 0 0;font-size:11.5px;color:var(--tx-2)}
.om-row{all:unset;box-sizing:border-box;display:grid;gap:5px;width:100%;padding:8px 10px;border-radius:10px;
  cursor:pointer;background:var(--bg-card);border:1px solid var(--border);border-inline-start:3px solid var(--border-md)}
.om-row:hover{border-color:var(--border-brand)}
.om-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.om-row.is-late{border-color:rgba(239,68,68,.45);border-inline-start-color:#ef4444;background:rgba(239,68,68,.06)}
.om-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--tx-2);min-width:0}
.om-num{font-weight:800;color:var(--tx-1)}
.om-room b{color:var(--tx-1)}
.om-age{margin-inline-start:auto;font-weight:700;color:var(--tx-1);font-variant-numeric:tabular-nums}
.om-age.is-late{color:#f87171}
.om-sub{font-size:11px}
.om-state{color:var(--tx-1)}
.om-who b{color:var(--tx-1);font-weight:700}
.om-who.is-nobody{color:#fbbf24}
.om-late{color:#f87171;font-weight:800}
.om-cancel{color:#fbbf24;font-weight:700}
.outlet-order-card.om-focus{box-shadow:0 0 0 2px var(--brand);transition:box-shadow .2s}
@media (max-width:1180px){ .om-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .om-board{grid-template-columns:minmax(0,1fr)} }

/* ── لافتات داخل البطاقة ─────────────────────────────────────────────── */
.ops-note{font-size:11.5px;line-height:1.5;border-radius:9px;padding:8px 11px;border:1px solid}
.ops-note.declined{color:#f87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.22)}
.ops-note.confidential{color:#c084fc;background:rgba(192,132,252,.08);border-color:rgba(192,132,252,.25)}
/* ↩️ رُدَّت إلى الطابور — نبرتان لحقيقةٍ واحدة.
   الهادئة (رمادية) لتذكرةٍ صار لها صاحبٌ من جديد: حاشيةٌ تقول لمن أخذها إنه
   المحاولة الثانية. والمنتظِرة (كهرمانية، بحدٍّ جانبيّ) لتذكرةٍ ما زالت بلا
   أحد: هذه قرارٌ يُتَّخذ الآن، لا خبرٌ يُقرأ.
   ⚠️ وليست حمراء: من ردّ مهمّةً لا يستطيعها فعل الصواب — والأحمر يجعل
      المخرجَ الصادق يبدو عقوبة، فيصمت الموظّف في المرّة القادمة. */
.ops-note.handback{color:var(--tx-2);background:var(--bg-raised);border-color:var(--border)}
.ops-note.handback b{color:var(--tx-1)}
.ops-note.handback.pending{
  color:#e9c46a;background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.26);
  border-inline-start:3px solid rgba(251,191,36,.7)}
.ops-note.handback.pending b{color:#fbbf24}
.ops-note-cta{display:block;margin-top:5px;font-weight:700;opacity:.9}
html.light .ops-note.handback.pending{color:#8a5a06;border-color:rgba(217,138,22,.4)}
html.light .ops-note.handback.pending b{color:#8a5a06}
/* ⏳ طلبُ منفذٍ بلا صاحب — «ينتظر من يأخذه»، لا «في الطابور». نفسُ نبرة
   الردِّ المنتظِر (قرارٌ يُتَّخذ الآن) بحدٍّ أحمر، لأن لا أحد سيحرّكه وحده:
   الطاهي لا يملك أن يأخذه، والمديرُ وحده يُسنده أو يعتذر عنه. */
.ops-note.unowned{
  color:#fca5a5;background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.3);
  border-inline-start:3px solid rgba(239,68,68,.75)}
.ops-note.unowned b{color:#fecaca}
html.light .ops-note.unowned{color:#9f1d1d;border-color:rgba(220,38,38,.4)}
html.light .ops-note.unowned b{color:#7f1d1d}

/* ── المحادثة داخل البطاقة ───────────────────────────────────────────── */
.ops-thread{border-top:1px solid var(--border);padding-top:11px;display:flex;flex-direction:column;gap:9px}
.ops-msgs{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto;padding-inline-end:2px}
.ops-msg{max-width:86%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.55;word-break:break-word}
.ops-msg.from-staff{align-self:flex-end;background:var(--brand-dim);border:1px solid var(--brand-glow);color:var(--tx-1)}
.ops-msg.from-guest{align-self:flex-start;background:var(--bg-raised);border:1px solid var(--border);color:var(--tx-1)}
.ops-msg-who{font-size:9.5px;font-weight:700;color:var(--tx-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.ops-msg-time{font-size:9.5px;color:var(--tx-3);margin-top:3px}
.ops-compose{display:flex;gap:8px;align-items:flex-end}
.ops-compose textarea{flex:1;min-height:38px;max-height:110px;resize:vertical;padding:9px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-raised);color:var(--tx-1);font-size:12.5px;font-family:inherit;outline:none}
.ops-compose textarea:focus{border-color:var(--brand-glow)}
/* 🔴 صندوق الكتابة يحمل لون وجهته: نفس الكهرمان المتقطّع الذي تحمله الملاحظة
   الداخلية في القائمة. الكاتب يرى أين يكتب **قبل** أن يكتب، لا بعد الإرسال —
   واللون وحده لا يكفي، فالوجهة مكتوبةٌ على الزرّ كذلك. */
.ops-compose.is-internal textarea{border-style:dashed;border-color:rgba(245,158,11,.55);
  background:rgba(245,158,11,.06)}
.ops-compose.is-internal textarea:focus{border-color:rgba(245,158,11,.9)}
.ops-empty-thread{font-size:11.5px;color:var(--tx-3);text-align:center;padding:6px 0}

/* ── 🗂️ نوافذ السجلّ الجاهزة ────────────────────────────────────────────
   السجلّ هو تاريخ المدير الكامل، وكان يُفتح على منتقيَي تاريخٍ فارغين. */
.log-range{display:inline-flex;gap:4px;align-items:center}
.log-range-btn{padding:6px 10px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--border);background:var(--bg-card);color:var(--tx-2);
  font-size:11px;font-weight:700;transition:all .15s}
.log-range-btn:hover{border-color:var(--border-md);color:var(--tx-1)}
.log-range-btn.on{background:var(--brand-dim);border-color:var(--border-brand);color:var(--brand)}
/* 🔒 خيارُ مظهرٍ مغلق: يبقى ظاهراً ليُقرأ «موجود لكن ليس بعد» — إخفاؤه يجعل
   السؤال يتكرّر، وتركُه يعمل بلا استجابة يُقرأ عطلاً. */
.seg-btn.is-locked{opacity:.42;cursor:not-allowed}
.seg-btn.is-locked:hover{background:transparent}

/* 🤝 من ضُمّ للمساعدة يُوسَم في الشجرة نفسها — والورقة تبقى مفتوحة.
   بلا الوسم يعيد المشرف ضمَّ نفس الشخص لأنه لا يتذكّر من ضمّ قبل ثانيتين. */
.zw-assign-tree [data-staff-id].is-helping{
  border-color:rgba(94,201,160,.45);background:rgba(94,201,160,.10)}
.zw-assign-tree [data-staff-id].is-helping::after{
  content:'✓';margin-inline-start:auto;color:var(--brand);font-weight:800;font-size:12px}
.zw-assign-tree [data-staff-id][disabled]{opacity:.55;cursor:progress}

/* ── 🗂️ مرشّح مدى صندوق المدير ─────────────────────────────────────────
   لا يظهر لغير المدير أصلاً (الخادم يقرّر بـ`archive`). ولهذا هو أفقيٌّ
   قابلٌ للتمرير لا شبكة: أربعة أزرارٍ فوق قائمةٍ عرضُها ٣٤٠ بكسل تنكسر
   سطرين وتدفع القائمة نفسها خارج الشاشة. */
.notif-range{display:flex;align-items:center;gap:6px;padding:8px 10px;overflow-x:auto;
  border-bottom:1px solid var(--border);scrollbar-width:none}
.notif-range::-webkit-scrollbar{display:none}
.notif-range-btn{flex:0 0 auto;padding:5px 10px;border-radius:16px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--tx-2);
  font-size:10.5px;font-weight:700;font-family:inherit;white-space:nowrap;transition:all .15s}
.notif-range-btn:hover{border-color:var(--border-md);color:var(--tx-1)}
.notif-range-btn.on{background:var(--brand-dim);border-color:var(--border-brand);color:var(--brand)}
.notif-range-date{flex:0 0 auto;display:inline-flex}
.notif-range-date input{padding:4px 8px;border-radius:16px;border:1px solid var(--border);
  background:transparent;color:var(--tx-2);font-size:10.5px;font-family:inherit;outline:none;
  color-scheme:dark}
html.light .notif-range-date input{color-scheme:light}

/* ════════════════════════════════════════════════════════════════════════
   🧰 شريط أدوات العمليات
   ────────────────────────────────────────────────────────────────────────
   كان صفّاً من خمسة منسدلاتٍ وثلاثة أزرارٍ متساوية الوزن، اثنان منها بلا
   عمل: «تحديث» و«تلقائي» — واللوحة تتحدّث بالسوكِت أصلاً، فالزرّان يعِدان
   بشيءٍ يجري بدونهما، ويجعل «تلقائي: مطفأ» ممكناً فيرى الموظّف لوحةً ميتة
   ويظنّها معطّلة.
   الآن: صفٌّ واحدٌ من مرشّحاتٍ متساوية الارتفاع، ونبضةٌ حيّة تقول إن
   القناة مفتوحة، وسطرٌ ثانٍ للحبّات. والتصدير للمدير وحده (يُبنى في JS).
   ════════════════════════════════════════════════════════════════════════ */
.ops-toolbar{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.ops-tb-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ops-tb-row.pills{padding-top:9px;border-top:1px solid var(--border)}
.ops-tb-grow{flex:1;min-width:8px}
.ops-field{position:relative;display:inline-flex;align-items:center}
.ops-field > .ops-field-ico{position:absolute;inset-inline-start:11px;color:var(--tx-3);pointer-events:none;display:flex}
.ops-field > .ops-field-chev{position:absolute;inset-inline-end:10px;color:var(--tx-3);pointer-events:none;font-size:9px}
.ops-select,.ops-search{height:36px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-input);color:var(--tx-1);font-size:12px;font-weight:600;font-family:inherit;
  outline:none;transition:border-color .18s,box-shadow .18s}
.ops-select{appearance:none;-webkit-appearance:none;padding-inline:34px 30px;min-width:132px;cursor:pointer}
.ops-search{padding-inline:34px 32px;width:100%;font-weight:500}
.ops-select:hover{border-color:var(--border-md)}
.ops-select:focus,.ops-search:focus{border-color:var(--brand-glow);box-shadow:0 0 0 3px var(--brand-dim)}
.ops-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  font-size:11px;font-weight:700;border:1px solid;cursor:default}
.ops-chip.count{color:var(--brand);background:var(--brand-dim);border-color:var(--border-brand)}
.ops-chip.act{cursor:pointer;transition:all .18s}
.ops-chip.past{color:var(--tx-3);background:var(--bg-raised);border-color:var(--border)}
.ops-chip.past.on{color:var(--purple);background:var(--purple-bg);border-color:rgba(168,85,247,.32)}
.ops-chip.reset{color:#f87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.30)}
html.light .ops-chip.reset{color:#dc2626;background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.22)}
.ops-chip.act:hover{filter:brightness(1.1)}
/* 🟢 نبضةُ «القناة حيّة» — تحلّ محلّ زرّي التحديث والتلقائي معاً: تقول ما
   كانا يدّعيان، ولا تَعِد بضغطةٍ لا لزوم لها. */
.ops-live{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-raised);color:var(--tx-2);
  font-size:11px;font-weight:700;cursor:default;white-space:nowrap}
.ops-live i{width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 6px var(--brand);animation:opsLiveBlink 2s var(--ease) infinite;flex-shrink:0}
.ops-live.off{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 32%, transparent);background:var(--amber-bg)}
.ops-live.off i{background:var(--amber);box-shadow:none;animation:none}
@keyframes opsLiveBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.ops-live i{animation:none}}
.ops-tb-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-card);color:var(--tx-2);
  font-size:12px;font-weight:600;cursor:pointer;transition:all .18s}
.ops-tb-btn:hover{border-color:var(--brand-glow);color:var(--brand);background:var(--brand-dim)}
.ops-search-wrap{position:relative;display:inline-flex;align-items:center;flex:1;min-width:190px;max-width:330px}
.ops-search-clear{position:absolute;inset-inline-end:8px;background:transparent;border:none;color:var(--tx-3);
  cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;z-index:2}
.ops-search-drop{display:none;position:absolute;top:calc(100% + 4px);inset-inline-start:0;width:100%;
  min-width:280px;max-height:340px;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.28);z-index:100;padding:6px}
html.light .ops-search-drop{box-shadow:0 12px 34px rgba(15,34,50,.12)}

/* ── الجوال ─────────────────────────────────────────────────────────── */
@media(max-width:680px){
  /* Arabic tab labels need two rows inside the viewport. The inline desktop
     flex layout otherwise enlarges the 320px layout viewport. */
  .ops-tabbar-wrap{min-width:0;max-width:100%}
  .ops-tabbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    min-width:0;max-width:100%;width:100%}
  .ops-tabbar .premium-tab{min-width:0;max-width:100%;padding:8px 5px!important;
    flex-wrap:wrap;gap:4px!important;overflow-wrap:anywhere}
  .ops-tabbar .premium-tab svg{flex:0 0 14px}
  .ops-tabbar .premium-tab span{min-width:0}
  .ops-card{padding:14px}
  .ops-actions{gap:7px}
  .ops-assignee{max-width:100%;order:-1;flex-basis:100%}
  .ops-spacer{display:none}
  .ops-primary,.ops-assign{flex:1;min-width:120px;height:40px}
  .ops-close{height:40px}
  .ops-grace{height:40px;flex:1;justify-content:center}
  .ops-icon-btn{height:40px;min-width:40px}
  .ops-rail-lbl{font-size:9px}
  .ops-msg{max-width:94%}
  .ops-search-wrap{max-width:100%;flex-basis:100%}
  .ops-select{flex:1;min-width:118px}
}

/* ═══════════════════════════════════════════════════════════════════════
   👥 شجرة الإسناد: قسم ← مشرف ← فريقه
   ─────────────────────────────────────────────────────────────────────
   قائمةٌ مسطّحة كانت تكفي فندقاً بمشرفٍ واحد وتنهار عند الثاني: لا يظهر
   من يتبع من، فيُسند مشرفان نفس العمل لنفس الشخص. الشجرة تجعل البنية
   مقروءةً في نظرة، والقسم يُطوى فلا تصير الشاشة كشفاً يُمسح بالعين.
   ═══════════════════════════════════════════════════════════════════ */
.zw-assign-tree{display:flex;flex-direction:column;gap:9px}

.zw-dep{border:1px solid var(--border);border-radius:13px;background:var(--bg-card);overflow:hidden}
.zw-dep-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:none;border:0;
  cursor:pointer;color:var(--tx-1);text-align:inherit;font-family:inherit}
.zw-dep-head:hover{background:var(--bg-raised)}
.zw-dep-name{flex:1;font-size:13px;font-weight:700}
.zw-dep-meta{font-size:10.5px;font-weight:700;color:var(--tx-3);background:var(--bg-raised);
  padding:2px 8px;border-radius:7px;min-width:22px;text-align:center}
.zw-dep-chev{color:var(--tx-3);transition:transform .18s ease;flex-shrink:0}
.zw-dep.is-open .zw-dep-chev{transform:rotate(180deg)}
/* المطويّ لا يُرسم أصلاً: قسمٌ بعشرين اسماً يبقى صفّاً واحداً حتى يُفتح. */
.zw-dep-body{display:none;padding:0 10px 10px;flex-direction:column;gap:10px}
.zw-dep.is-open .zw-dep-body{display:flex}

.zw-sup{border-radius:11px;background:var(--bg-raised);padding:9px 10px}
.zw-sup-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.zw-sup-name{font-size:12.5px;font-weight:700;color:var(--tx-1)}
.zw-sup-name.zw-sup-none{color:var(--tx-3);font-weight:600;font-style:italic}
.zw-sup-tag{font-size:9.5px;font-weight:700;color:var(--brand);background:var(--brand-dim);
  padding:2px 7px;border-radius:6px;white-space:nowrap}
.zw-sup-team{display:flex;flex-direction:column;gap:6px}
.zw-sup-empty{font-size:11.5px;color:var(--tx-3);padding:2px 4px}

.zw-assign-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);
  cursor:pointer;text-align:inherit;font-family:inherit;transition:border-color .15s ease,background .15s ease}
.zw-assign-row:hover:not(.is-full){border-color:var(--brand-glow);background:var(--brand-dim)}
.zw-assign-name{font-size:12.5px;font-weight:600;color:var(--tx-1)}
/* ⛔️ الممتلئ يبقى مرئياً معطَّلاً: إخفاؤه يجعل المشرف يبحث عن اسمٍ يعرف
   أنه موجود ويظنّ الحساب حُذف — وحِملُه هو المعلومة التي جاء يقرؤها. */
.zw-assign-row.is-full{cursor:not-allowed;opacity:.55}
.zw-load{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap}

/* 🍳 صفُّ شخصٍ في ورقتي طلب المنفذ — «أسنِده لطاهٍ» و«إسناد التوصيل»
   (`opsOrderReassign`, `opsOrderAssignDelivery`). كان `zw-person` الفردَ الوحيد
   من عائلة `zw-` بلا قاعدة، فرُسم زرَّ متصفّحٍ أبيض والاسمُ ملتصقٌ بحالته.
   المقاسات والألوان هي مقاساتُ `.zw-assign-row` نفسُها — ورقةُ إسنادٍ واحدة
   بشكلٍ واحد، سواءٌ أُسندت تذكرةٌ أم طبق. والفرقُ الوحيد أن الحالة سطرٌ ثانٍ
   تحت الاسم: «لا يستقبل — سيصله باسمك · 0 من 6» جملةٌ لا شارة.
   ⛔️ والمعطَّلُ معنيان: الممتلئُ (باهتٌ وبجانبه «ممتلئ») ومن يحمل الطلبَ الآن
   (`data-picked`، بإطار العلامة — ومثلُه الصفُّ المضغوط حتى يجيب الخادم) — والثاني ليس «غيرَ متاح»، هو الجواب نفسُه. */
.zw-person{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);
  color:var(--tx-1);cursor:pointer;text-align:start;font-family:inherit;font-size:12.5px;
  transition:border-color .15s ease,background .15s ease}
.zw-person:hover:not(:disabled){border-color:var(--brand-glow);background:var(--brand-dim)}
.zw-person:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.zw-person-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.zw-person-main b{font-size:12.5px;font-weight:600;color:var(--tx-1);overflow-wrap:anywhere}
.zw-person-main small{font-size:11px;line-height:1.5;color:var(--tx-2);overflow-wrap:anywhere}
.zw-person .zw-load{flex-shrink:0}
.zw-person:disabled{cursor:not-allowed;opacity:.55}
.zw-person[data-picked="true"]{border-color:var(--brand);background:var(--brand-dim);opacity:1;cursor:default}
.zw-load.is-full{color:#dc2626;background:rgba(220,38,38,.12)}

/* ── 🤝 الاستعانة بزميل — جانبيّةٌ داخل ورقة الإسناد، بلا زرٍّ في البطاقة ──
   الحالة تُقال بالحدّ لا باللون وحده: القائمة نفسها بمعنيين، ووضعُ الاستعانة
   يغيّر ما يفعله الضغط — فيُعلَّم إطارُها كلُّه لا الزرّ فقط. */
.zw-help-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px}
.zw-help-head{font-size:11.5px;font-weight:700;color:var(--tx-2)}
.zw-help-list{display:flex;flex-wrap:wrap;gap:6px}
.zw-help-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--tx-1);background:var(--bg-raised);border:1px solid var(--border);
  border-radius:20px;padding:4px 6px 4px 11px}
.zw-help-x{width:18px;height:18px;border:0;border-radius:50%;cursor:pointer;line-height:1;
  background:transparent;color:var(--tx-2);font-size:14px;font-family:inherit}
.zw-help-x:hover{background:var(--danger,#f87171);color:#fff}
.zw-help-none{font-size:11.5px;color:var(--tx-2);opacity:.75}
.zw-help-toggle{align-self:flex-start;height:30px;padding:0 11px;border-radius:9px;cursor:pointer;
  border:1px dashed var(--border);background:transparent;color:var(--tx-2);
  font-size:11.5px;font-weight:600;font-family:inherit;transition:all .15s}
.zw-help-toggle:hover{border-color:var(--brand-glow);color:var(--brand);background:var(--brand-dim)}
.zw-help-toggle.is-on{border-style:solid;border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
/* وضعُ الاستعانة: القائمة نفسها، والضغط يضمّ بدل أن يُسند. */
.zw-assign-tree[data-mode="help"]{outline:1px dashed var(--brand-glow);outline-offset:6px;border-radius:10px}
.zw-assign-tree[data-mode="help"] .zw-assign-row:hover:not(.is-full){border-color:var(--brand);}

/* «+٢» بجانب اسم المالك على البطاقة — البطاقة تجيب «من المسؤول؟»، والأسماء
   في الورقة. صفُّ ثلاثة أسماء متساوية يمحو الجواب. */
.ops-helpers{font-size:10px;font-weight:800;line-height:1;padding:3px 6px;border-radius:20px;
  background:var(--brand-dim);color:var(--brand);flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════
   🔔 صندوق الإشعارات — سطرٌ واحد لكل حدث، والوقت بجانبه
   ═══════════════════════════════════════════════════════════════════ */
.zw-inbox{display:flex;flex-direction:column}

/* 🎯 التبويبات: «يخصّني / فريقي / الكل». عدّاداتها من الخادم — راجع
   `_renderNotifTabs`. */
.notif-tabs{display:flex;gap:4px;padding:8px 10px;flex:0 0 auto;
  border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.06));background:var(--bg,#0a1420)}
.notif-tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 8px;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--tx-3);transition:all .14s ease}
.notif-tab:hover{color:var(--tx-1);background:var(--bg-raised)}
.notif-tab.on{background:var(--brand-dim);border-color:var(--border-brand);color:var(--brand)}
.notif-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;border-radius:8px;background:var(--border-md,rgba(255,255,255,0.18));
  color:var(--tx-1);font-size:9.5px;font-weight:700;line-height:1}
.notif-tab.on .notif-tab-n{background:var(--brand);color:#04101a}

.notif-head-acts{display:flex;align-items:center;gap:10px}
.notif-clear{background:none;border:none;color:var(--tx-3);font-size:.72rem;cursor:pointer;font-weight:600}
.notif-clear:hover{color:var(--tx-1);text-decoration:underline}

/* 📅 فاصلٌ يوميّ يلتصق بأعلى القائمة أثناء التمرير: القارئ يعرف دائماً أين
   هو في الزمن بلا أن يعود لأعلى. */
.zw-inbox-day{position:sticky;top:0;z-index:1;padding:6px 14px 4px;
  background:var(--bg,#0a1420);color:var(--tx-3);font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.05))}

/* الصفّ = السطر + زرّ الإزالة. `position:relative` ليحمل الشريط الجانبي. */
.zw-inbox-row{position:relative;display:flex;align-items:stretch;
  border-bottom:1px solid var(--border);transition:background .14s ease}
.zw-inbox-row:hover{background:var(--bg-raised)}
/* 🎨 شريطُ الشدّة: أوّل ما تلتقطه العين قبل أن تقرأ حرفاً. */
.zw-inbox-row::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:transparent;transition:background .14s ease}
.zw-inbox-row.sev-critical::before{background:#ef4444}
.zw-inbox-row.sev-action::before{background:#f59e0b}
.zw-inbox-row.sev-info::before{background:transparent}
/* غير المقروء يُميَّز بالخلفية، والحرجُ منه بخلفيةٍ حمراء خفيفة: التمييز
   طبقتان لأن اللون وحده لا يكفي من يقرأ بسرعة. */
.zw-inbox-row.is-unread{background:var(--brand-dim)}
.zw-inbox-row.is-unread:hover{background:var(--brand-glow)}
.zw-inbox-row.sev-critical.is-unread{background:rgba(239,68,68,0.10)}
.zw-inbox-row.sev-critical.is-unread:hover{background:rgba(239,68,68,0.16)}
/* المطويّ (أرشيف المدير) باهتٌ: حدثٌ أُغلق ملفُّه يُقرأ ولا يُطالِب. */
.zw-inbox-row.is-cleared{opacity:.55}

.zw-inbox-item{display:flex;gap:10px;align-items:flex-start;padding:11px 8px 11px 14px;
  cursor:pointer;background:none;border:0;flex:1 1 auto;min-width:0;
  text-align:inherit;font-family:inherit;color:inherit}
.zw-inbox-icon{flex:0 0 auto;font-size:14px;line-height:1.35;width:18px;text-align:center}
.zw-inbox-body{flex:1;min-width:0}
.zw-inbox-line{font-size:12.5px;line-height:1.5;color:var(--tx-1);display:block}
.zw-inbox-row.is-unread .zw-inbox-line{font-weight:600}
.zw-inbox-row.sev-critical .zw-inbox-line{color:var(--tx-1);font-weight:700}
.zw-inbox-line strong{font-weight:700}
.zw-inbox-meta{font-size:10.5px;color:var(--tx-3);margin-top:4px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}

/* 👤 من أرسله — حرفُه الأوّل في دائرة، ثم اسمُه ثم دورُه. */
.zw-inbox-actor{display:inline-flex;align-items:center;gap:5px;color:var(--tx-2)}
.zw-inbox-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:var(--border-md,rgba(255,255,255,0.16));
  color:var(--tx-1);font-size:8.5px;font-weight:700;line-height:1}
.zw-inbox-role{padding:1px 5px;border-radius:6px;background:var(--border-sm,rgba(255,255,255,0.08));
  font-size:9px;font-weight:600;color:var(--tx-3)}
/* 🔢 «×٧» — العدّاد الذي حلّ محلّ سبعة سطور. */
.zw-inbox-repeat{display:inline-block;margin-inline-start:6px;padding:1px 6px;border-radius:7px;
  background:var(--border-md,rgba(255,255,255,0.18));color:var(--tx-1);
  font-size:9.5px;font-weight:700;vertical-align:middle}
.zw-inbox-row.sev-critical .zw-inbox-repeat{background:#ef4444;color:#fff}

/* ✕ الإزالة: باهتةٌ حتى تُقارَب، فلا تزاحم النصّ ولا تُضغط بالخطأ. */
.zw-inbox-x{flex:0 0 auto;width:30px;border:0;background:none;cursor:pointer;
  color:var(--tx-3);font-size:12px;line-height:1;opacity:0;transition:opacity .14s ease,color .14s ease}
.zw-inbox-row:hover .zw-inbox-x,.zw-inbox-x:focus-visible{opacity:1}
.zw-inbox-x:hover{color:#ef4444}
/* 👆 وعلى اللمس لا يوجد «hover»: تظهر دائماً، وإلا صارت ميزةً بلا وجود. */
@media (hover:none){.zw-inbox-x{opacity:.6}}

.zw-inbox-empty{padding:26px 16px;text-align:center;font-size:12px;color:var(--tx-3)}

/* 🔴 الجرس حين يحمل حرجاً: الشارة حمراء لا خضراء. */
.hdr-act.has-critical .notif-badge{background:#ef4444;color:#fff}
/* 🔵 نقطةٌ بلا رقم = «جديدٌ لا يخصّك». */
.notif-badge.is-dot{min-width:8px;width:8px;height:8px;padding:0;border-radius:50%;font-size:0}

/* ═══════════════════════════════════════════════════════════════════════
   👥 إعدادات الفريق: من يشرف على من
   ═══════════════════════════════════════════════════════════════════ */
.zw-team-grid{display:flex;flex-direction:column;gap:11px}
.zw-team-card{border:1px solid var(--border);border-radius:13px;background:var(--bg-card);padding:14px}
.zw-team-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.zw-team-name{font-size:13.5px;font-weight:700;color:var(--tx-1)}
.zw-team-dep{font-size:10.5px;color:var(--tx-3);background:var(--bg-raised);padding:2px 8px;border-radius:6px}
.zw-team-picks{display:flex;flex-wrap:wrap;gap:7px}
/* اختيارٌ بالضغط لا بقائمةٍ منسدلة: بناء فريقٍ من ستّة أسماء في قائمةٍ
   متعدّدة الاختيار عملٌ بالكيبورد لا يقوم به أحد. */
.zw-pick{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;font-size:12px;
  font-weight:600;color:var(--tx-2);font-family:inherit;transition:all .15s ease}
.zw-pick:hover{border-color:var(--brand-glow)}
.zw-pick.is-on{background:var(--brand-dim);border-color:var(--brand);color:var(--tx-1)}
.zw-pick-check{width:14px;height:14px;flex-shrink:0;opacity:0;transition:opacity .15s ease;color:var(--brand)}
.zw-pick.is-on .zw-pick-check{opacity:1}
.zw-team-empty{font-size:12px;color:var(--tx-3);padding:8px 0}

/* ═══════════════════════════════════════════════════════════════════════
   🧾 سجلّ النشاط — يُقرأ بالفلاتر لا بالتمرير
   ═══════════════════════════════════════════════════════════════════ */
.zw-log-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.zw-log-search{flex:1;min-width:190px;height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-raised);color:var(--tx-1);font-size:12.5px;font-family:inherit;outline:none}
.zw-log-search:focus{border-color:var(--brand-glow)}
.zw-log-sel{height:38px;padding:0 11px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-raised);color:var(--tx-1);font-size:12.5px;font-family:inherit;outline:none;cursor:pointer}
.zw-log-note{font-size:11px;color:var(--tx-3);margin-top:11px;display:flex;align-items:center;gap:6px}
.zw-log-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:13px;overflow:hidden}
.zw-log-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:baseline;
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-card)}
.zw-log-row:last-child{border-bottom:0}
.zw-log-row:hover{background:var(--bg-raised)}
.zw-log-tag{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;background:var(--bg-raised);color:var(--tx-3)}
.zw-log-tag.is-flow{background:var(--brand-dim);color:var(--brand)}
.zw-log-tag.is-account{background:rgba(139,92,246,.14);color:#8b5cf6}
.zw-log-tag.is-facility{background:rgba(245,158,11,.14);color:#f59e0b}
.zw-log-tag.is-guest{background:rgba(16,185,129,.14);color:#10b981}
.zw-log-what{font-size:12.5px;color:var(--tx-1);line-height:1.5;min-width:0;word-break:break-word}
.zw-log-who{font-size:11px;color:var(--tx-3);margin-top:2px}
.zw-log-when{font-size:10.5px;color:var(--tx-3);white-space:nowrap;text-align:end}

@media(max-width:680px){
  .zw-log-row{grid-template-columns:1fr;gap:5px}
  .zw-log-when{text-align:start}
  .zw-dep-body{padding:0 8px 8px}
}

/* ── 🗣️ إلى النزيل أم إلى الفريق؟ ─────────────────────────────────────────
   موظّفٌ يظنّ أنه يكتب لزميله وهو يكتب للنزيل يقول ما لا يُقال. الوجهة
   ظاهرةٌ فوق صندوق الكتابة دائماً، والملاحظة الداخلية تُلوَّن بلونٍ آخر
   فلا تُقرأ بطرف العين كرسالةٍ للنزيل. */
.ops-msg-to{display:flex;align-items:center;gap:6px;margin:9px 0 7px}
.ops-msg-tab{padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg-raised);
  color:var(--tx-3);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s ease}
.ops-msg-tab:hover{border-color:var(--brand-glow)}
.ops-msg-tab.is-on{background:var(--brand-dim);border-color:var(--brand);color:var(--tx-1)}
.ops-msg-only{font-size:11px;color:var(--tx-3)}

/* الملاحظة الداخلية: خطٌّ جانبيّ كهرماني ونصٌّ مائل — تُميَّز في لمحة. */
.ops-msg.is-internal{background:rgba(245,158,11,.10);border:1px dashed rgba(245,158,11,.45);color:var(--tx-1)}
.ops-msg.is-internal .ops-msg-who{color:#f59e0b}

/* ── 🧭 قائمة التوجيه: قسمٌ ومشرفُه وحجم فريقه ─────────────────────────────
   لا تُسرد الأقسام التسعة: قسمٌ بلا مشرف سطرٌ لا قرار فيه، ويدعو إلى خطأ —
   التوجيه إلى قسمٍ بلا حسابات يبدو إنجازاً وهو إهمال. */
.zw-route-list{display:flex;flex-direction:column;gap:8px}
.zw-route-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--bg-card);
  cursor:pointer;text-align:inherit;font-family:inherit;transition:border-color .15s ease,background .15s ease}
.zw-route-row:hover{border-color:var(--brand-glow);background:var(--brand-dim)}
.zw-route-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.zw-route-dept{font-size:13px;font-weight:700;color:var(--tx-1)}
.zw-route-sup{font-size:11px;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zw-route-count{font-size:10.5px;font-weight:700;color:var(--tx-3);background:var(--bg-raised);
  padding:3px 9px;border-radius:7px;white-space:nowrap}

/* المشرف صفٌّ قابلٌ للضغط لا ترويسة: توجيهُ التذكرة **إليه** أشيع ما يفعله
   الاستقبال، وكان مستحيلاً حين كان اسمُه عنواناً جامداً. */
.zw-assign-row.is-sup{background:var(--bg-raised);border-color:var(--brand-glow);margin-bottom:6px}
.zw-assign-who{display:flex;align-items:center;gap:7px;min-width:0}
.zw-sup .zw-sup-team{padding-inline-start:12px;border-inline-start:2px solid var(--border);margin-top:2px}
.zw-empty-note{padding:18px 4px;font-size:12.5px;line-height:1.7;color:var(--tx-2);text-align:center}

/* القسم المسؤول عن صنف خدمة الغرف — يُقرأ في القائمة، فيُراجَع بلا فتح كل صنف. */
.svc-item-tag.zw-svc-dept{color:var(--brand);background:var(--brand-dim);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   🏨 مخطّط الغرف
   ═══════════════════════════════════════════════════════════════════════════
   الشاشة التي يقضي فيها الاستقبال وردياً. ثلاثة قرارات تحكم شكلها:

   ١) **الغرفة مربّعٌ يُقرأ رقمُه من مترين.** الموظّف ينظر إليها والنزيل واقفٌ
      أمامه، لا يقرأ صفّاً في جدول. فالرقم كبير برقمٍ جدوليّ (tabular) حتى لا
      ترقص الأعمدة بين ٣٠١ و٣١١، والحالة سطرٌ صغير تحته.

   ٢) **اللون يقول الحالة، والنصّ يؤكّدها.** أربعة ألوان وحدها لا تكفي: نحو
      ٨٪ من الرجال لا يفرّقون الأحمر عن الأخضر، وهذه الشاشة كلُّها أحمر وأخضر.
      فكل مربّعٍ يحمل كلمتَه مكتوبة، ولكل حالةٍ شكلٌ مختلف في الحافّة.

   ٣) **الوميض للطارئ وحده.** حركةٌ دائمة على شاشةٍ مفتوحةٍ اثنتي عشرة ساعة
      تُتعب العين وتُعلَّم تجاهلُها. فالوميض محصورٌ في حالتين: تخمينٌ مرصود على
      كود، وسؤالُ الأربع والعشرين ساعة — ويتوقّف كلاهما بمجرّد أن يُجاب.
   ─────────────────────────────────────────────────────────────────────── */

.rooms-shell{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:16px;align-items:start}
@media (max-width:1080px){ .rooms-shell{grid-template-columns:minmax(0,1fr)} }

/* ── شريط الأدوات ── */
.rooms-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rooms-search{flex:0 0 240px;max-width:100%}
.rooms-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.rm-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  background:var(--bg-raised);border:1px solid var(--border);
  color:var(--tx-2);font-size:0.76rem;font-weight:600;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.rm-chip:hover{border-color:var(--brand);color:var(--tx-1)}
.rm-chip.active{background:var(--brand-dim);border-color:rgba(94,201,160,0.42);color:var(--brand)}
.rm-chip i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.rm-chip-n{
  font-size:0.7rem;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--bg-input);color:var(--tx-3);font-variant-numeric:tabular-nums;
}
.rm-chip.active .rm-chip-n{background:rgba(94,201,160,0.16);color:var(--brand)}

/* ألوان الحالات — مصدرٌ واحد يقرأ منه المربّع والشريحة والمفتاح. */
:root{
  --rm-vacant:    #34b37a;
  --rm-vacant-bg: rgba(52,179,122,0.10);
  --rm-occupied:    #d9534f;
  --rm-occupied-bg: rgba(217,83,79,0.11);
  --rm-hold:    #e0912f;
  --rm-hold-bg: rgba(224,145,47,0.11);
  --rm-oos:    #6b7a8c;
  --rm-oos-bg: rgba(107,122,140,0.10);
}
.is-vacant i,    .rm-legend li.is-vacant i{background:var(--rm-vacant)}
.is-occupied i,  .rm-legend li.is-occupied i{background:var(--rm-occupied)}
.is-suspended i, .rm-legend li.is-suspended i{background:var(--rm-hold)}
.is-oos i,       .rm-legend li.is-oos i{background:var(--rm-oos)}

/* ── الطوابق ── */
.rooms-floors{display:flex;flex-direction:column;gap:12px}
.rm-floor{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
}
.rm-floor-h{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;background:var(--bg-raised);
  border:0;border-bottom:1px solid var(--border);
  cursor:pointer;text-align:start;color:var(--tx-1);
  font-size:0.84rem;font-weight:700;
}
.rm-floor-h:hover{background:var(--bg-input)}
.rm-floor-h .rm-floor-ico{color:var(--tx-3);flex:0 0 auto;display:flex}
.rm-floor-h .rm-floor-n{
  margin-inline-start:auto;font-size:0.72rem;font-weight:600;color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.rm-floor-h .rm-chev{transition:transform .2s ease;color:var(--tx-3);display:flex}
.rm-floor.collapsed .rm-chev{transform:rotate(-90deg)}
.rm-floor.collapsed .rm-grid{display:none}
.rm-grid{
  display:grid;gap:9px;padding:13px 14px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}

/* ── المربّع ── */
.rm-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;min-height:64px;padding:9px 6px;
  border-radius:var(--r-sm);cursor:pointer;
  border:1px solid transparent;background:var(--bg-raised);
  color:var(--tx-1);font-family:inherit;
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;
}
.rm-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.34)}
.rm-tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rm-tile .rm-no{
  font-size:1.06rem;font-weight:700;letter-spacing:0.01em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.rm-tile .rm-st{
  font-size:0.63rem;font-weight:600;opacity:0.88;
  letter-spacing:0.01em;text-align:center;line-height:1.2;
}
.rm-tile[data-state="vacant"]        {background:var(--rm-vacant-bg);   border-color:rgba(52,179,122,0.34); color:var(--rm-vacant)}
.rm-tile[data-state="occupied"]      {background:var(--rm-occupied-bg); border-color:rgba(217,83,79,0.36);  color:var(--rm-occupied)}
.rm-tile[data-state="suspended"]     {background:var(--rm-hold-bg);     border-color:rgba(224,145,47,0.40); color:var(--rm-hold)}
/* ⚪ خارج الخدمة: حافّةٌ متقطّعة — شكلٌ يفرّقها عن البقيّة بلا اعتمادٍ على
   اللون وحده، وهي الحالة الوحيدة التي لا تُلمس في العمل اليومي. */
.rm-tile[data-state="out_of_service"]{
  background:var(--rm-oos-bg);border-style:dashed;
  border-color:rgba(107,122,140,0.44);color:var(--rm-oos);
}

/* 🚩 إشارتان على المربّع، ولا ثالثة: كثرةُ الشارات تُلغي معنى الشارة. */
.rm-flag{
  position:absolute;top:5px;inset-inline-end:5px;
  width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.6rem;font-weight:800;line-height:1;
}
.rm-flag.alarm{background:var(--rm-occupied);color:#fff;animation:rm-pulse 1.6s ease-in-out infinite}
.rm-flag.due{background:var(--rm-hold);color:#1a1205;animation:rm-pulse 2.2s ease-in-out infinite}
@keyframes rm-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.16);opacity:0.68}
}
/* 🔇 ومن أوقف الحركة في نظامه لا نُجبره عليها — الشارة تبقى، الوميض يذهب. */
@media (prefers-reduced-motion:reduce){
  .rm-flag.alarm,.rm-flag.due{animation:none}
  .rm-tile:hover{transform:none}
}
/* نزيلٌ فُعّلت غرفتُه ولم يستعمل كودَه بعد — نقطةٌ خافتة، لا شارة. */
.rm-tile .rm-dot{
  position:absolute;bottom:5px;inset-inline-start:5px;
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0.42;
}

/* ── الملخّص ── */
.rooms-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
@media (max-width:1080px){ .rooms-side{position:static} }
.rm-card{padding:14px}
.rm-card-h{font-size:0.78rem;font-weight:700;color:var(--tx-1);margin-bottom:12px}
.rm-total{display:flex;align-items:baseline;gap:8px;margin-bottom:13px}
.rm-total-n{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rm-total-l{font-size:0.72rem;color:var(--tx-3)}
.rm-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rm-legend li{display:flex;align-items:center;gap:9px;font-size:0.76rem;color:var(--tx-2)}
.rm-legend li i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.rm-legend li b{
  margin-inline-start:auto;font-size:0.82rem;font-weight:700;color:var(--tx-1);
  font-variant-numeric:tabular-nums;
}

/* حلقةُ الإشغال */
.rm-ring-wrap{position:relative;width:132px;height:132px;margin:2px auto 4px}
.rm-ring{width:100%;height:100%;transform:rotate(-90deg)}
.rm-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.rm-ring-bg{stroke:var(--bg-input)}
.rm-ring-fg{stroke:var(--rm-occupied);transition:stroke-dashoffset .5s ease}
.rm-ring-mid{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;pointer-events:none;
}
.rm-ring-n{font-size:1.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rm-ring-l{font-size:0.68rem;color:var(--tx-3);font-variant-numeric:tabular-nums}
.rm-flags{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.rm-flag-row{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:var(--r-sm);font-size:0.73rem;font-weight:600;cursor:pointer;
  border:1px solid transparent;text-align:start;width:100%;font-family:inherit;
}
.rm-flag-row.alarm{background:rgba(217,83,79,0.12);border-color:rgba(217,83,79,0.32);color:var(--rm-occupied)}
.rm-flag-row.due{background:rgba(224,145,47,0.12);border-color:rgba(224,145,47,0.32);color:var(--rm-hold)}
.rm-flag-row:hover{filter:brightness(1.15)}

/* ═══ 🧾 حسابُ الغرفة (S4 · SPEC-settlement §٩) ═══════════════════════════
   الرصيدُ لونٌ واحد — كهرمانيٌّ هادئ، ليس أحمرَ «مشغولة» ولا وميضَ الطارئ: هو
   معلومةٌ للاستقبال لا إنذار، ولا يمنع شيئاً. */
:root{ --rm-bal:#e0b43a; --rm-bal-bg:rgba(224,180,58,0.12); --rm-bal-edge:rgba(224,180,58,0.38); }
/* في مجرى البلاطة لا فوقها: سطرٌ ثالث تحت الحالة، فلا يركب الرقمَ على أضيق بلاطة. */
.rm-tile .rm-bal{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;
  margin-top:2px;padding:1px 7px;border-radius:999px;
  background:var(--rm-bal-bg);border:1px solid var(--rm-bal-edge);color:var(--rm-bal);
  font-size:0.62rem;font-weight:800;line-height:1.5;white-space:nowrap;overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.rm-tile .rm-bal bdi{overflow:hidden;text-overflow:ellipsis}
.rm-tile .rm-bal i{width:6px;height:6px;border-radius:50%;background:var(--rm-bal);flex:0 0 auto}
/* 📱 وإن ضاقت البلاطةُ عن الرقم صار نقطةً ملوّنة (§٩-١) — والرقمُ في البطاقة وفي
   عنوان البلاطة (`aria-label`) كما هو. */
@media (max-width:360px){
  .rm-tile .rm-bal{padding:0;border:0;background:transparent;width:10px;height:10px;justify-content:center}
  .rm-tile .rm-bal bdi{display:none}
  .rm-tile .rm-bal i{width:9px;height:9px;box-shadow:0 0 0 2px var(--rm-bal-bg)}
}

.rm-bal-wrap{position:relative}
.rm-bal-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rm-bal-bg);border:1px solid var(--rm-bal-edge);color:var(--rm-bal);font-weight:700;
}
.rm-bal-btn i{width:8px;height:8px;border-radius:50%;background:var(--rm-bal)}
.rm-bal-pop{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;
  width:min(340px,calc(100vw - 32px));max-height:60vh;overflow:auto;
  background:var(--bg-card);border:1px solid var(--border-md, var(--border));border-radius:var(--r-md);
  box-shadow:0 14px 36px rgba(0,0,0,0.45);padding:8px;
}
.rm-bal-pop[hidden]{display:none}
.rm-departed[hidden]{display:none}
.rm-departed{margin-top:16px;padding:16px;background:var(--bg-card);
  border:1px solid var(--rm-bal-edge);border-radius:var(--r-md)}
.rm-departed h2{font-size:.95rem;margin:0 0 10px;color:var(--tx-1)}
.rm-departed-list{display:grid;gap:8px}
.rm-departed-row{display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;padding:11px 12px;background:var(--bg-raised);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--tx-1);
  font:inherit;text-align:start;cursor:pointer;flex-wrap:wrap}
.rm-departed-row bdi{font-weight:800;color:var(--rm-bal)}
.rm-departed-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.rm-departed-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--border);font-size:.78rem}
.rm-departed-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rm-departed-actions input{flex:1 1 190px;min-width:0;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-input);color:var(--tx-1);font:inherit}
.rm-bal-pop-h{font-size:0.72rem;font-weight:700;color:var(--tx-3);padding:4px 6px 8px}
.rm-bal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rm-bal-list button{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--bg-raised);color:var(--tx-1);font-family:inherit;cursor:pointer;text-align:start;
}
.rm-bal-list button:hover{border-color:var(--rm-bal-edge)}
.rm-bal-room{display:flex;align-items:baseline;gap:5px}
.rm-bal-room small{font-size:0.66rem;color:var(--tx-3)}
.rm-bal-room b{font-size:0.95rem;font-variant-numeric:tabular-nums}
.rm-bal-n{font-size:0.72rem;color:var(--tx-2)}
.rm-bal-amt{font-weight:800;color:var(--rm-bal);font-variant-numeric:tabular-nums;white-space:nowrap}

/* بطاقةُ الغرفة: سطرُ الرصيد ولوحةُ التسوية */
.rd-balance{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:12px 0 4px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bg-raised);border:1px solid var(--border);font-size:0.8rem;color:var(--tx-2);
}
.rd-balance.owes{background:var(--rm-bal-bg);border-color:var(--rm-bal-edge);color:var(--rm-bal);font-weight:700}
.st-panel{margin:8px 0 4px;padding:12px;border-radius:var(--r-md);border:1px solid var(--rm-bal-edge);background:var(--bg-card)}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.st-h h4{margin:0;font-size:0.9rem;color:var(--tx-1)}
.st-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st-line{padding:9px 10px;border-radius:var(--r-sm);background:var(--bg-raised);border:1px solid var(--border)}
.st-line.is-settled,.st-line.is-waived{opacity:0.78}
.st-l-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:0.82rem;color:var(--tx-1)}
.st-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-l-what{margin-top:3px;font-size:0.74rem;color:var(--tx-2);line-height:1.5}
.st-l-meta{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:0.68rem;color:var(--tx-3)}
.st-line.is-unsettled .st-state{color:var(--rm-bal);font-weight:700}
.st-l-acts{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.st-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:0.82rem;color:var(--tx-2);
}
.st-total bdi{font-size:1.15rem;font-weight:800;color:var(--tx-1);font-variant-numeric:tabular-nums}
.st-tax{margin:6px 0 0;font-size:0.68rem;color:var(--tx-3);line-height:1.5}
.st-empty{margin:0;font-size:0.78rem;color:var(--tx-3)}
.st-acts{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.st-acts .btn{flex:1 1 auto}
.st-undo{
  margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-size:0.72rem;color:var(--tx-2);
}
.st-done{margin-top:10px}
.st-done summary{cursor:pointer;font-size:0.74rem;color:var(--tx-2);margin-bottom:8px}
/* ⚠︎ رسالةُ التأكيد تحمل التحذير في فقرةٍ فوق السؤال — السطرُ الفارغ بينهما مقصود. */
#conf-msg{white-space:pre-line}

/* 💵 الدفعُ على بطاقة الطلب و«غير محصَّل» (S4 · §١٠) */
.outlet-pay-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.outlet-pay{font-size:0.74rem;font-weight:700;color:var(--tx-2);padding:3px 9px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border)}
.outlet-pay.is-room{color:var(--rm-bal);background:var(--rm-bal-bg);border-color:var(--rm-bal-edge)}
.outlet-pay.is-collected{color:var(--brand);background:var(--brand-dim);border-color:rgba(94,201,160,0.42)}
.outlet-pay.is-uncollected{color:#ef4444;background:rgba(239,68,68,0.10);border-color:rgba(239,68,68,0.40)}
.uncollected{margin-bottom:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(239,68,68,0.40);background:rgba(239,68,68,0.06)}
.uncollected header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.uncollected header b{font-size:0.86rem;color:var(--tx-1)}
.uncollected header small{flex:1 1 100%;font-size:0.72rem;color:var(--tx-2)}
.uc-count{font-size:0.72rem;font-weight:800;padding:1px 8px;border-radius:999px;background:rgba(239,68,68,0.16);color:#ef4444}
.uncollected ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.uc-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border)}
.uc-main{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:0.78rem;color:var(--tx-2)}
.uc-main b{color:var(--tx-1)}
.uc-num{font-weight:800;color:var(--tx-3)}
.uc-amt{font-weight:800;color:var(--tx-1);font-variant-numeric:tabular-nums}
.uc-when{font-size:0.7rem;color:var(--tx-3)}
.uc-acts{display:flex;gap:6px;flex-wrap:wrap}

/* 🛎️ خدمةٌ بمبلغ على بطاقة الطلب */
.svc-charge{color:var(--rm-bal);border-color:var(--rm-bal-edge);background:var(--rm-bal-bg)}
.svc-charge bdi{font-weight:800}
.svc-charge-row{display:flex;justify-content:flex-end;margin:6px 0 2px}

/* 📊 المصروف والمبيعات (S4 · §١٠) */
.spend-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.spend-periods{display:inline-flex;flex-wrap:wrap}
.spend-custom{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}
.spend-custom[hidden]{display:none}
.spend-custom label{display:flex;flex-direction:column;gap:4px;font-size:0.72rem;color:var(--tx-2)}
.spend-custom input{background:var(--bg-input);border:1px solid var(--border);color:var(--tx-1);border-radius:var(--r-sm);padding:7px 9px;font:inherit;font-size:0.8rem}
.spend-empty{padding:18px;text-align:center;color:var(--tx-3);font-size:0.82rem}
.sp-range{margin:0 0 12px;font-size:0.76rem;color:var(--tx-3)}
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.sp-tile{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border)}
.sp-tile .sp-l{font-size:0.74rem;color:var(--tx-2);font-weight:600}
.sp-tile b{font-size:1.25rem;font-weight:800;color:var(--tx-1);font-variant-numeric:tabular-nums}
.sp-tile small{font-size:0.7rem;color:var(--tx-3);line-height:1.45}
.sp-tile.is-good{border-color:rgba(94,201,160,0.42)} .sp-tile.is-good b{color:var(--brand)}
.sp-tile.is-room{border-color:var(--rm-bal-edge)} .sp-tile.is-room b{color:var(--rm-bal)}
.sp-tile.is-bad{border-color:rgba(239,68,68,0.40)} .sp-tile.is-bad b{color:#ef4444}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.sp-card{padding:12px 14px;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border);margin-bottom:12px;
  /* A four-column money table is wider than a 320px phone once it holds real
     rows; it scrolls inside its card instead of widening the page (CP1 · M6). */
  overflow-x:auto}
.sp-card h4{margin:0 0 10px;font-size:0.84rem;color:var(--tx-1)}
.sp-scroll{overflow-x:auto}
.sp-table{width:100%;border-collapse:collapse;font-size:0.78rem;color:var(--tx-2)}
.sp-table th{font-size:0.7rem;font-weight:700;color:var(--tx-3);text-align:start;padding:6px 8px;border-bottom:1px solid var(--border)}
.sp-table td{padding:7px 8px;border-bottom:1px solid var(--border)}
.sp-table .n{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-table tfoot td{font-weight:800;color:var(--tx-1);border-bottom:0}
.sp-table td b{color:var(--tx-1)}
.sp-tax{margin:4px 0 0;font-size:0.7rem;color:var(--tx-3)}

/* ── نافذة التفعيل ── */
.rm-modal .m-ft{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.ra-room-big{
  text-align:center;font-size:2.4rem;font-weight:800;line-height:1;
  color:var(--tx-1);margin:6px 0 10px;font-variant-numeric:tabular-nums;
}
.ra-lead{font-size:0.8rem;color:var(--tx-2);line-height:1.65;text-align:center;margin:0}
.ra-issued{text-align:center;margin-bottom:14px}
.ra-issued-room{font-size:0.76rem;color:var(--tx-3);margin-bottom:7px}
.ra-issued-room b{color:var(--tx-1);font-variant-numeric:tabular-nums}
/* الكود يُقرأ بصوتٍ عالٍ عبر كاونتر — فبمسافةٍ بين أرقامه وحجمٍ لا يُخطأ. */
.ra-code{
  font-size:2.6rem;font-weight:800;letter-spacing:0.22em;
  color:var(--brand);font-variant-numeric:tabular-nums;
  padding:12px 8px 12px 0.22em;
  background:var(--brand-dim);border:1px solid rgba(94,201,160,0.3);
  border-radius:var(--r-md);
}
.ra-code-note{font-size:0.73rem;color:var(--tx-3);margin-top:9px;line-height:1.55}
.ra-qr-wrap{text-align:center;padding-top:4px}
.ra-qr{
  width:172px;height:172px;border-radius:var(--r-md);
  background:#fff;padding:8px;display:inline-block;
}
.ra-qr-hint{font-size:0.72rem;color:var(--tx-3);margin-top:9px;line-height:1.55}

/* ── بطاقة الغرفة ── */
.rd-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.rd-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:999px;font-size:0.72rem;font-weight:700;
}
.rd-badge i{width:7px;height:7px;border-radius:50%}
.rd-badge.is-vacant   {background:var(--rm-vacant-bg);  color:var(--rm-vacant)}
.rd-badge.is-occupied {background:var(--rm-occupied-bg);color:var(--rm-occupied)}
.rd-badge.is-suspended{background:var(--rm-hold-bg);    color:var(--rm-hold)}
.rd-badge.is-oos      {background:var(--rm-oos-bg);     color:var(--rm-oos)}
.rd-rows{display:flex;flex-direction:column;gap:0;
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.rd-row{
  display:flex;align-items:center;gap:12px;padding:10px 13px;
  font-size:0.79rem;border-bottom:1px solid var(--border);
}
.rd-row:last-child{border-bottom:0}
.rd-row .rd-k{color:var(--tx-3);flex:0 0 auto;min-width:112px}
.rd-row .rd-v{color:var(--tx-1);font-weight:600;word-break:break-word}
.rd-row .rd-v.mono{font-variant-numeric:tabular-nums;letter-spacing:0.04em}
.rd-code-v{
  font-size:1.28rem;font-weight:800;letter-spacing:0.16em;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.rd-counts{display:flex;gap:8px;margin:13px 0}
.rd-count{
  flex:1;text-align:center;padding:10px 6px;border-radius:var(--r-sm);
  background:var(--bg-raised);border:1px solid var(--border);
}
.rd-count b{display:block;font-size:1.16rem;font-weight:800;font-variant-numeric:tabular-nums}
.rd-count span{display:block;font-size:0.68rem;color:var(--tx-3);margin-top:2px}
.rd-more{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px;margin-top:11px;border-radius:var(--r-sm);cursor:pointer;
  background:none;border:1px dashed var(--border);color:var(--tx-3);
  font-size:0.75rem;font-weight:600;font-family:inherit;
}
.rd-more:hover{border-color:var(--brand);color:var(--brand)}
.rd-extra{margin-top:11px}
.rd-note{
  font-size:0.74rem;color:var(--tx-3);line-height:1.65;
  padding:9px 11px;border-radius:var(--r-sm);
  background:var(--bg-raised);border:1px solid var(--border);margin-top:11px;
}
.rd-note.warn{background:rgba(217,83,79,0.10);border-color:rgba(217,83,79,0.3);color:var(--rm-occupied)}
.rd-note.due{background:rgba(224,145,47,0.10);border-color:rgba(224,145,47,0.3);color:var(--rm-hold)}
.rd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.rd-acts .btn{flex:1 1 auto;justify-content:center;min-width:118px}

/* ── النزلاء السابقون ── */
.ps-list{display:flex;flex-direction:column;gap:8px;max-height:58vh;overflow-y:auto}
.ps-row{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--bg-raised);border:1px solid var(--border);
}
.ps-room{font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx-1)}
.ps-name{font-size:0.82rem;font-weight:600;color:var(--tx-1)}
.ps-meta{font-size:0.71rem;color:var(--tx-3);margin-top:3px;line-height:1.5}
.ps-when{font-size:0.71rem;color:var(--tx-3);text-align:end;font-variant-numeric:tabular-nums}
.ps-foot{font-size:0.72rem;color:var(--tx-3);margin-top:12px;text-align:center;line-height:1.6}

/* خيارٌ ثانويّ داخل نافذة التفعيل — يُقرأ ولا يُنافس الفعل الأساسي. */
.ra-secondary{
  display:block;width:100%;margin-top:11px;padding:8px;
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:0.74rem;color:var(--tx-3);text-decoration:underline;
  text-underline-offset:3px;
}
.ra-secondary:hover{color:var(--rm-oos)}
/* بطاقةُ غرفةٍ بلا نزيل: رقمٌ وسطرٌ واحد. جدولُ حقولٍ فارغة يُقرأ كعطل. */
.rd-empty{text-align:center;padding:16px 8px 8px}
.rd-empty-room{
  font-size:2.5rem;font-weight:800;line-height:1;color:var(--tx-1);
  font-variant-numeric:tabular-nums;margin-bottom:11px;
}
.rd-empty-msg{font-size:0.82rem;color:var(--tx-2);line-height:1.65;margin:0}

/* ═══════════════════════════════════════════════════════════════════════════
   🏨 محرّر مخزون الغرف
   ═══════════════════════════════════════════════════════════════════════════
   كان حقلاً نصّياً لكل طابق («101 102 103…»). يعمل، ولا يُقرأ: حذفُ غرفةٍ يعني
   تحرير نصٍّ طويل بالمؤشّر، وخطأٌ مطبعيّ فيه يُنشئ غرفةً وهميّة أو يُخفي
   حقيقيةً بصمت — ولا يظهر الأثر إلا حين يبحث الاستقبال عن غرفةٍ لا يجدها.

   الرقاقة تُظهر ما هو موجود بالضبط، وتُحذف بضغطة، وتُضاف بحقلٍ يقبل مدىً.
   ─────────────────────────────────────────────────────────────────────── */

.ri-counter{
  flex:0 0 auto;text-align:center;padding:7px 14px;border-radius:12px;
  background:rgba(94,201,160,0.10);border:1px solid rgba(94,201,160,0.24);
}
.ri-counter b{
  display:block;font-size:1.32rem;font-weight:800;line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums;
}
.ri-counter span{display:block;font-size:0.66rem;color:var(--tx-3);margin-top:3px}

/* ── المولّد: مطويٌّ لأنه يُستعمل مرّةً في عمر الفندق ويمحو كل شيء ── */
.ri-gen{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;
}
.ri-gen-sum{
  display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;
  font-size:0.82rem;font-weight:700;color:var(--tx-1);list-style:none;
}
.ri-gen-sum::-webkit-details-marker{display:none}
.ri-gen-sum:hover{background:var(--bg-raised)}
.ri-gen-sum svg{color:var(--tx-3);flex:0 0 auto}
.ri-gen-sum em{
  margin-inline-start:auto;font-style:normal;font-size:0.68rem;font-weight:600;
  color:var(--amber,#e0912f);background:rgba(224,145,47,0.12);
  border:1px solid rgba(224,145,47,0.3);border-radius:999px;padding:2px 9px;
}
.ri-gen[open] .ri-gen-sum{border-bottom:1px solid var(--border)}
.ri-gen-body{padding:14px}
.ri-preview{font-size:0.76rem;color:var(--brand);line-height:1.6;min-height:1.2em;margin:2px 0 12px}

/* ── الطابق ── */
.ri-hint{font-size:0.75rem;color:var(--tx-3);line-height:1.6;margin:0 0 13px}
.ri-floor{
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:10px;overflow:hidden;background:var(--bg-card);
}
.ri-floor-head{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bg-raised);border-bottom:1px solid var(--border);
}
.ri-floor-num{
  width:58px;padding:5px 8px;border-radius:var(--r-sm);
  background:var(--bg-input);border:1px solid var(--border);color:var(--tx-1);
  font-size:0.82rem;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;font-family:inherit;
}
.ri-floor-num:focus{outline:none;border-color:var(--brand)}
.ri-floor-name{font-size:0.8rem;font-weight:700;color:var(--tx-1)}
.ri-floor-count{
  margin-inline-start:auto;font-size:0.71rem;color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.ri-floor-del{
  background:none;border:0;cursor:pointer;color:var(--tx-3);
  padding:5px;border-radius:var(--r-sm);display:flex;
}
.ri-floor-del:hover{color:var(--red);background:var(--red-bg)}

.ri-rooms{display:flex;flex-wrap:wrap;gap:6px;padding:11px 12px;align-items:center}
/* رقاقةُ غرفة: الرقم بخطٍّ جدوليّ فتصطفّ الرقاقات بعرضٍ واحد وتُمسح العين
   عليها صفّاً صفّاً بدل أن ترقص. */
.ri-room{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px 4px 10px;border-radius:8px;cursor:pointer;
  background:var(--bg-input);border:1px solid var(--border);
  color:var(--tx-1);font-size:0.78rem;font-weight:600;font-family:inherit;
  font-variant-numeric:tabular-nums;transition:border-color .12s,color .12s;
}
.ri-room i{font-style:normal;font-size:0.9rem;line-height:1;color:var(--tx-3)}
.ri-room:hover{border-color:var(--red);color:var(--red)}
.ri-room:hover i{color:var(--red)}
.ri-room-add{
  flex:1;min-width:132px;padding:5px 9px;border-radius:8px;
  background:transparent;border:1px dashed var(--border);color:var(--tx-1);
  font-size:0.76rem;font-family:inherit;font-variant-numeric:tabular-nums;
}
.ri-room-add:focus{outline:none;border-color:var(--brand);border-style:solid}
.ri-room-add::placeholder{color:var(--tx-3)}

.ri-empty{font-size:0.78rem;color:var(--tx-3);padding:14px 2px;text-align:center}

/* «تغييرات لم تُحفظ» بجانب زرِّ الحفظ: من عدّل ثم انتقل إلى قسمٍ آخر يجب أن
   يرى أن شيئاً ينتظره، لا أن يكتشف بعد يومٍ أن تعديله لم يُحفظ. */
.ri-dirty{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.74rem;font-weight:600;color:var(--amber,#e0912f);
}
.ri-dirty::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:currentColor;
}
.ri-dirty[hidden]{display:none}

/* ── خارج الخدمة ── */
.ri-oos-wrap{display:flex;flex-wrap:wrap;gap:7px}
.ri-oos-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 11px;
  border-radius:999px;background:var(--rm-oos-bg);
  border:1px dashed rgba(107,122,140,0.44);color:var(--rm-oos);
  font-size:0.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.ri-oos-pill button{
  border:0;background:rgba(107,122,140,0.2);color:inherit;cursor:pointer;
  width:19px;height:19px;border-radius:50%;font-size:0.82rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.ri-oos-pill button:hover{background:var(--brand);color:#04150e}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 الجوال — طبقةٌ أخيرة، كلُّها داخل @media
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ **لا قاعدة هنا خارج استعلامِ وسط.** الشاشة العريضة ممتازة كما هي، وهذا
      الملف يُقرأ من أعلاه إلى أسفله — فقاعدةٌ عامّة في آخره تغلب كلَّ ما فوقها
      بلا أن ينتبه أحد. الطبقة كلُّها تحت `max-width`، فما فوق ٧٦٠ لا يتغيّر
      فيه بكسل واحد.

   والحدّان: **٧٦٠** جوالٌ عريضٌ ولوحٌ صغير، و**٥٢٠** جوالٌ بالطول — وهو
   المقاس الذي يُدار منه الفندق فعلاً في الممرّ.

   ═══ ما عولج، ولماذا ═══════════════════════════════════════════════════════

   ١) **القوائم كانت تُقرأ من ثقب.** الشريط العلوي صفٌّ واحد: شعارٌ وتنقّلٌ
      وجرسٌ وحساب. على ٣٧٥ بكسل يبقى للتنقّل نحو ١٤٠ بكسل — أي صفحةٌ ونصف من
      أربع، والبقيّة خلف تمريرٍ أفقي لا يظهر أنه موجود. فنزل التنقّل إلى سطرٍ
      كاملٍ تحته.

   ٢) **لوحة الإشعارات كانت نصفُها خارج الشاشة.** عرضُها ٣٦٠ وهي معلَّقةٌ من
      حافّة الجرس، فيقع طرفُها الأيسر عند **‪-٦٢‬** بكسل — و`overflow-x:hidden`
      على الجسم يعني أنه لا سبيل للوصول إليه أبداً. صارت لوحاً بعرض الشاشة.

   ٣) **الحوارات في منتصف الشاشة.** حوارٌ بارتفاع ٩٠٪ يبدأ من المنتصف يعني
      أزراراً في أعلى الشاشة والإبهام في أسفلها. صارت تصعد من الأسفل كأوراق
      الجوال المعتادة، وأزرارُها بعرضٍ كامل في متناول الإبهام.

   ٤) **حقول الإدخال كانت تُقفز الشاشة.** iOS يكبّر الصفحة تلقائياً عند أي
      حقلٍ خطُّه أصغر من ١٦ بكسل، ثم لا يعيدها — فيكتب الموظّف رقم غرفةٍ
      فيجد اللوحة مكبّرةً بقيّة الوردية. ١٦ بكسل على الجوال وحده يمنعها.

   ٥) **الأهداف كانت أصغر من الإصبع.** أزرارٌ بارتفاع ٢٨ بكسل تُضغط بالفأرة
      لا بالإبهام. الحدّ الأدنى هنا ٤٠.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── ⓪ الشبكةُ التي تنفجر من الداخل ──────────────────────────────────────
   عمودٌ مقاسه `1fr` أصغرُه **auto** لا صفر — أي أنه يتمدّد ليسع أعرضَ ما
   فيه ولو تجاوز حاويتَه. وهذا ما كان يقع فعلاً على ٣٧٥ بكسل: صندوق إعدادات
   الحساب يقيس ٣٧٤ داخل غلافٍ عرضُه ٣٥١، فتُقتطع ٢٣ بكسل من طرفه — و
   `overflow:hidden` على الغلاف يبتلعها بلا أثر: لا شريطَ تمرير، ولا صفحةٌ
   تتحرّك، فقط طرفٌ من المحتوى غير موجود.

   ⚠️ يُطبَّق من ٩٠٠ لأنّه المقاس الذي تنقلب فيه هذه الأغلفة إلى عمودٍ واحد
      (القاعدة أعلى الملف) — أي المقاس الذي يبدأ عنده العطل، لا مقاسُ الجوال. */
@media (max-width:900px){
  .settings-wrap,.hotel-wrap{grid-template-columns:minmax(0,1fr)}
  .settings-wrap > *,.hotel-wrap > *,
  .g2 > *,.g3 > *,.g12 > *,.g21 > *,
  .kpi-grid > *,.req-summary-bar > *{min-width:0}
}

@media (max-width:760px){

  /* ── ① الشريط العلوي: سطرٌ للهويّة وسطرٌ للتنقّل ─────────────────────────
     `--hdr` هو مصدر الارتفاع لأربعة مواضع (الترويسة، هامش المحتوى، أدنى
     ارتفاعٍ للصفحة، رأس الدرج). تغييرُه هنا يجعلها تتبع كلَّها بسطرٍ واحد —
     وضبطُ كلٍّ منها على حدة هو ما يُنتج شريطاً يغطّي أوّل بطاقة. */
  :root{ --hdr:104px }

  #top-header{
    flex-wrap:wrap;align-content:center;
    padding:0 12px;column-gap:10px;row-gap:0;
  }
  .hdr-logo{height:58px}
  .hdr-actions{height:58px;margin-inline-start:auto}
  .hdr-divider{display:none}
  /* سطرٌ كاملٌ للتنقّل، يُمرَّر أفقياً بإصبعٍ واحدة ولا يزاحمه شيء. */
  .hdr-nav-wrap{
    order:9;flex:0 0 100%;width:100%;height:46px;
    border-top:1px solid var(--border);
    padding-block:0;margin-block:0;
  }
  #header-nav{width:100%;gap:4px}
  .nav-btn{padding:9px 12px;font-size:0.82rem}

  /* ── ② المحتوى ── */
  #main-content{padding:12px}
  .ph{margin-bottom:16px;gap:10px}
  /* أزرار الصفحة سطرٌ مستقلّ: كانت تُزاحم العنوان فينكسر كلاهما. */
  .ph-r{width:100%}
  .ph-l h1{font-size:1.12rem}
  .card{padding:14px}
  .card-hd{flex-wrap:wrap;gap:8px}

  /* ── ③ الأهداف واللمس ── */
  .btn{min-height:40px;padding:10px 15px}
  .btn-sm{min-height:36px}
  .btn-xs{min-height:30px}
  /* ⚠️ ١٦ بكسل تمنع تكبير iOS التلقائي عند التركيز — وهو تكبيرٌ لا يعود
     وحده، فتبقى اللوحة مكبّرةً حتى يُعالجها المستخدم بيده. */
  .fi:not([type="color"]),.fs,.ft,.search input,.ops-select,.ops-search{
    font-size:16px;min-height:42px;
  }
  .ft{min-height:96px}
  .search{padding:8px 12px}
  .search input{width:100%;flex:1;min-width:0}

  /* ── ④ الجداول تُمرَّر ولا تُسحق ──────────────────────────────────────
     عمودٌ منضغطٌ إلى حرفين ليس عموداً. التمرير الأفقي **داخل الإطار وحده**
     (overscroll-behavior) حتى لا يسحب الصفحةَ كلَّها معه. */
  .tbl-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tbl-wrap > table{min-width:560px}

  /* ── ⑤ إعدادات الفندق وإعدادات الحساب ────────────────────────────────
     القائمة الجانبية صارت صفّاً يُمرَّر أفقياً بدل شبكةٍ من ستّة أزرارٍ
     تلتهم نصف الشاشة قبل أن يُقرأ حرفٌ من المحتوى. */
  .settings-nav,.hotel-nav{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:6px;padding:8px;max-height:none;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .settings-nav::-webkit-scrollbar,.hotel-nav::-webkit-scrollbar{display:none}
  .s-nav-item,.h-nav-btn{flex:0 0 auto;white-space:nowrap;min-height:40px;margin-bottom:0}
  /* عناوينُ المجموعات وبطاقةُ اسم الفندق لا معنى لهما في صفٍّ أفقي. */
  .h-nav-section,.hn-identity{display:none}
  .h-nav-btn:hover{transform:none}
  html[dir="rtl"] .h-nav-btn:hover{transform:none}
  /* ولا تمريرَ داخل تمرير: الصفحة نفسها تُمرَّر، لا إطارٌ محبوسٌ فيها. */
  .hotel-body{padding:16px 14px;max-height:none;overflow:visible}
  .settings-body{padding:16px 14px}

  /* ── ⑥ مخطّط الغرف ── */
  .rooms-search{flex:1 1 100%}
  .rm-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:11px}
  .rm-tile{min-height:60px}

  /* ── ⑦ شريط أدوات العمليات ── */
  .ops-toolbar{padding:10px;border-radius:12px}
  .ops-select{min-width:0;flex:1 1 calc(50% - 5px)}
  .ops-live{flex:1 1 100%;justify-content:center}
}

/* ═══ الجوال بالطول ═══════════════════════════════════════════════════════ */
@media (max-width:520px){

  /* Keep all roster actions in the row at phone width.  A fixed meta column
     pushed the first/last button past opposite viewport edges in RTL/LTR. */
  .tm-row{align-items:flex-start;flex-wrap:wrap;gap:8px}
  .tm-l{flex:1 1 min(100%, 180px)}
  .tm-meta{flex:1 0 100%;justify-content:space-between;min-width:0}
  .tm-actions{margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end}

  /* ── ⑧ لوحة الإشعارات: لوحٌ بعرض الشاشة ──────────────────────────────
     ⚠️ بـ`#notif-panel` لا `.notif-panel`: قائمةُ الحساب تشترك في الصنف
        نفسه، وهي عريضةٌ بمئةٍ وتسعين ولا تحتاج شيئاً من هذا. */
  #notif-panel{
    position:fixed;top:calc(var(--hdr) + 6px);
    inset-inline:8px;width:auto;max-width:none;
    max-height:calc(100dvh - var(--hdr) - 22px);z-index:1000;
  }
  #notif-panel .notif-list{max-height:none}
  .notif-head{padding:12px 14px}
  .notif-tab{padding-block:8px}

  /* ── ⑨ الحوارات تصعد من الأسفل ──────────────────────────────────────
     ورقةٌ بعرض الشاشة: الأزرار عند الإبهام لا عند أعلى الشاشة، والحافّة
     السفلى تحسب شريط النظام (safe-area) فلا يغطّي «حفظ». */
  .overlay{align-items:flex-end}
  .overlay > .modal{
    width:100%;max-width:100%;
    border-radius:16px 16px 0 0;
    max-height:92dvh;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
  }
  .m-hd{margin-bottom:16px}
  .m-ft{flex-direction:column;gap:8px;align-items:stretch}
  .m-ft .btn,.confirm-btns .btn{width:100%;justify-content:center;min-height:44px}
  .confirm-btns{flex-direction:column;gap:8px}

  /* ── ⑩ التنبيهات من الأسفل ────────────────────────────────────────────
     كانت تحت الشريط العلوي مباشرةً — أي فوق التنقّل الجديد. والأسفل هو
     مكانُها المعتاد على الجوال، وأقربُ إلى العين وقت العمل. */
  #toast-box{
    top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    inset-inline:12px;
  }
  html[dir="rtl"] #toast-box{inset-inline:12px}
  .toast{min-width:0;max-width:none;width:100%}

  /* ── ⑪ آخر ما ينضغط ── */
  .kpi{padding:14px 12px}
  .kpi-val{font-size:1.45rem}
  .hotel-body{padding:14px 12px}
  .ops-select{flex:1 1 100%}
}

/* 🖼️ شعارُ الفندق في صفحة الإعداد */
.hlogo-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.hlogo-prev{width:92px;height:92px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-input);border:1px dashed var(--bd);overflow:hidden}
.hlogo-prev img{max-width:100%;max-height:100%;object-fit:contain}
#hi-logo-empty{font-size:28px;opacity:.4}
.hlogo-side{flex:1;min-width:220px}
.hlogo-hint{font-size:.74rem;color:var(--tx-2);line-height:1.6;margin:0 0 10px}
.hlogo-actions{display:flex;gap:8px;flex-wrap:wrap}
.hlogo-note{font-size:.74rem;margin:8px 0 0;min-height:1em}
.hlogo-note.ok{color:#059669}
.hlogo-note.err{color:#dc2626}

/* ══════════════════════════════════════════════════════════════════════════
 *  🍽️ محرّرُ القائمة — `js/outlet-menu-editor.js`
 *  ------------------------------------------------------------------------
 *  الوحدةُ نفسُها تُركَّب في لوحة المنصّة لاحقاً (عقدُ المحرّرين §١٠)، فكلُّ
 *  ما هنا مُسمًّى بـ`ome-` ومبنيٌّ على **رموز اللوحة** لا على قيمٍ ثابتة:
 *  الثيمُ الفاتح يبدّل الرموزَ وحدها، فيتبعه المحرّرُ بلا سطرٍ إضافيّ.
 *
 *  ↔️ ولا `margin-left/right` في أيّ قاعدة: الصفحةُ تنقلب إلى RTL كاملةً،
 *     والخصائصُ المنطقيّة (`inline-start`) هي ما ينقلب معها.
 * ══════════════════════════════════════════════════════════════════════════ */
.ome-root{font-family:var(--font);color:var(--tx-1)}
.ome-root:dir(rtl){font-family:var(--font-ar)}
.ome-loading{padding:28px;text-align:center;color:var(--tx-2)}

.ome-card{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden}
.ome-card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-raised)}
.ome-card-h h3{margin:0;font-size:15px;font-weight:600}
.ome-rev{margin-inline-start:auto;font-variant-numeric:tabular-nums}

.ome-cols{display:flex;gap:16px;flex-wrap:wrap}
.ome-col{flex:1 1 260px;min-width:0}
.ome-col-wide{flex:2 1 420px}

.ome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;padding:16px 18px}
.ome-grid-tight{padding:10px 0;gap:8px}
.ome-f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tx-2)}
.ome-f-wide{grid-column:1/-1}
.ome-f-sm{max-width:130px}
.ome-f input,.ome-f textarea,.ome-f select,.ome-op input{
  background:var(--bg-input);border:1px solid var(--border-md);color:var(--tx-1);
  border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:13px;width:100%}
.ome-f textarea{min-height:64px;resize:vertical}
.ome-f input:focus,.ome-f textarea:focus,.ome-f select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.ome-f input:disabled,.ome-f textarea:disabled{opacity:.55;cursor:not-allowed}

.ome-sw{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx-1)}
.ome-sw-sm{font-size:11px;color:var(--tx-2)}
.ome-hours{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  padding:0 18px 16px;font-size:12px;color:var(--tx-2)}
.ome-days{display:flex;gap:8px;flex-wrap:wrap}
.ome-day{display:flex;align-items:center;gap:4px;font-size:12px}

.ome-list{list-style:none;margin:0;padding:0}
.ome-row{display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--border);font-size:13px}
.ome-row:last-child{border-bottom:none}
.ome-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ome-item.is-off .ome-row-t{opacity:.5}
.ome-last{font-size:11px}
.ome-group-h{margin:0;padding:10px 16px;font-size:12px;color:var(--tx-2);
  background:var(--bg-raised);font-weight:600}
.ome-empty{padding:18px;color:var(--tx-2);font-size:13px;text-align:center}

.ome-img{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-sm);
  background:var(--bg-input);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ome-thumb{width:100%;height:100%;object-fit:cover;display:block}
.ome-thumb-lg{width:120px;height:120px;border-radius:var(--r-sm)}
.ome-photo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 18px 14px}
.ome-photo-slot{min-width:0}

.ome-btn{background:var(--bg-raised);border:1px solid var(--border-md);color:var(--tx-1);
  border-radius:var(--r-sm);padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;
  transition:background var(--t) var(--ease)}
.ome-btn:hover{background:var(--bg-hover)}
.ome-btn.ome-primary{background:var(--brand);color:var(--tx-inv);border-color:var(--brand);font-weight:600}
.ome-btn.ome-sm{padding:5px 10px;font-size:12px}
.ome-btn.ome-danger{color:var(--red);border-color:rgba(239,68,68,0.3)}
.ome-ic{background:none;border:1px solid var(--border);color:var(--tx-2);
  border-radius:var(--r-sm);padding:4px 8px;font:inherit;font-size:11px;cursor:pointer}
.ome-ic:hover:not(:disabled){background:var(--bg-hover);color:var(--tx-1)}
.ome-ic:disabled{opacity:.3;cursor:default}
.ome-ic.ome-danger{color:var(--red)}
.ome-actions{display:flex;gap:10px;padding:0 18px 16px;flex-wrap:wrap}

.ome-chip{font-size:11px;padding:3px 9px;border-radius:999px;
  background:var(--bg-input);color:var(--tx-2);border:1px solid var(--border)}
.ome-chip.ok{color:var(--brand);border-color:var(--border-brand);background:var(--brand-dim)}
.ome-chip.off{color:var(--amber);border-color:rgba(245,158,11,0.25);background:var(--amber-bg)}
.ome-tag{font-size:10px;padding:2px 7px;border-radius:999px;
  background:var(--bg-input);color:var(--tx-2);border:1px solid var(--border)}
/* 🖼️ **وشارةُ الصورة كهرمانيّة لا حمراء، وهذا هو القرار كلُّه.** النزيل ما زال
      يطلب، والطبقُ ما زال كاملاً؛ الأحمرُ هنا كان يقول «هذا الصنف معطّل» وهو
      ليس كذلك. نفسُ لون `.ome-banner.ome-warn` و`.ome-chip.off` — ثلاثةُ مواضع
      بقاموسٍ واحد. وبلا هذه القاعدة تُرسم الشارةُ رماديّةً مثل «ظاهرٌ للنزلاء»
      بجانبها، فتصير علامةُ العطب غيرَ مميزة عمّا ليست عطلاً. */
.ome-tag.ome-warn{color:var(--amber);border-color:rgba(245,158,11,0.25);background:var(--amber-bg)}
.ome-dim{color:var(--tx-2);font-size:11px;font-weight:400}

.ome-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-radius:var(--radius);margin-bottom:12px;font-size:13px;
  position:sticky;top:0;z-index:2}
.ome-banner.ome-ok{background:var(--brand-dim);color:var(--brand);border:1px solid var(--border-brand)}
.ome-banner.ome-warn{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(245,158,11,0.25)}
.ome-banner.ome-err{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,0.25)}
.ome-banner.ome-note{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(59,130,246,0.25)}
.ome-ferr{padding:0 18px 10px;color:var(--red);font-size:12px}

.ome-form{border-top:1px solid var(--border-md);background:var(--bg-raised)}
.ome-groups{padding:0 18px 14px}
.ome-og{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0}
.ome-op{display:flex;gap:8px;margin:6px 0;flex-wrap:wrap}
.ome-op input{flex:1 1 120px;background:var(--bg-input);border:1px solid var(--border-md);
  color:var(--tx-1);border-radius:var(--r-sm);padding:6px 8px;font:inherit;font-size:12px}
.ome-req{align-self:center}

.ome-log{list-style:none;margin:0;padding:0}
.ome-logrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--border);font-size:12px}
.ome-logact{color:var(--brand);font-family:ui-monospace,monospace;font-size:11px}

@media (max-width:720px){
  .ome-cols{flex-direction:column}
  .ome-row{flex-wrap:wrap}
}

/* مقارنة المسودة تمرّ في مسار القراءة نفسه، وتلتف على شاشة الهاتف. */
.ome-root { min-inline-size: 0; }
.ome-root .ome-banner { flex-wrap: wrap; overflow-wrap: anywhere; }
.ome-root .ome-compare { flex-basis: 100%; min-inline-size: 0; }
.ome-root .ome-compare summary { cursor: pointer; font-weight: 600; }
.ome-root .ome-table-wrap { overflow-x: auto; max-inline-size: 100%; margin-block: 10px; }
.ome-root .ome-compare table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.ome-root .ome-compare th, .ome-root .ome-compare td { text-align: start; border: 1px solid var(--border); padding: 8px; overflow-wrap: anywhere; vertical-align: top; }
.ome-root .ome-changes { flex-basis: 100%; margin: 0; padding-inline-start: 20px; font-size: 12px; overflow-wrap: anywhere; }
.ome-root button:disabled { opacity: .45; cursor: default; }
.ome-root [aria-invalid="true"] { border-color: #b84436; }
.ome-root :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ome-root .ome-item:focus { background: var(--bg-raised); }
.ome-root .ome-f, .ome-root .ome-col, .ome-root .ome-card, .ome-root .ome-row-t { min-inline-size: 0; }
@media (max-width: 600px) {
  .ome-root .ome-grid, .ome-root .ome-cols { grid-template-columns: minmax(0, 1fr); }
  .ome-root .ome-row { flex-wrap: wrap; }
  .ome-root .ome-op { flex-wrap: wrap; }
  .ome-root .ome-op input { min-inline-size: 0; max-inline-size: 100%; }
  .ome-root .ome-photo { flex-wrap: wrap; }
  .ome-root .ome-logrow { flex-wrap: wrap; }
}

/* 🎨 Paint hint (js/dashboard-session-boot.js): while a stored session is being
   restored the sign-in form is not painted. `visibility`, not `display`: boot
   still sets `display:flex` on it, and the moment the class goes the form is
   there, laid out and usable. hotel-dashboard.js removes the class on every
   path that ends at the sign-in screen (`_releaseSessionPaintHint`). */
.hd-session-candidate #login-screen { visibility: hidden; }
/* 🪪 …and the window is not left empty. Hiding the form left 10–12 frames of bare
   page colour on every reload (≈0.8 s on a slow phone; visual-check 2026-09-26
   A2). What fills it is the sign-in screen's own brand row — mark + name, in the
   exact place the form draws them — so neither ending jumps: on the sign-in path
   the card appears around a row that is already there; on a restore the boot
   sets `#login-screen` to `display:none` and the row leaves with it. Nothing
   here is a new surface, so nothing new needs releasing: it lives inside
   `#login-screen` and under this class, the two things every boot exit already
   ends. No field, no button, no "loading" text — a form that half-paints is the
   flash this hint exists to prevent.
   The ring below it waits 400 ms before it fades in: a fast restore shows the
   mark alone (a spinner that lives 170 ms is a blink, not information); a slow
   one says it is working. Absolutely placed, so it never moves the row. */
.hd-session-candidate #login-screen .login-brand-row { visibility: visible; }
.hd-session-candidate #login-screen .login-wrap::after {
  content: ''; visibility: visible; position: absolute; top: 56px; left: 50%;
  width: 18px; height: 18px; margin-left: -9px; box-sizing: border-box;
  border: 2px solid var(--border-md); border-top-color: var(--brand); border-radius: 50%;
  opacity: 0; animation: hdRestoreRingIn .2s ease .4s forwards, spin .9s linear infinite;
}
@keyframes hdRestoreRingIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hd-session-candidate #login-screen .login-wrap::after { animation: hdRestoreRingIn .2s ease .4s forwards; }
}