/* تجوال — بوابة الموظفين
   الألوان والخطوط مأخوذة من Tajwal Brand Identity Guidelines (2026)
   الأساسي #FDA404 · العميق #FD5B00 · الداعمة #000000 #9E9E9E #FFFFFF */

:root {
  /* --- ألوان العلامة --- */
  --brand:        #FDA404;   /* Primary  C0 M35 Y98 K1 */
  --brand-mid:    #FD8002;   /* Tint     C0 M49 Y99 K1 */
  --brand-deep:   #FD5B00;   /* Primary  C0 M64 Y100 K1 */
  --brand-ink:    #C24200;   /* ظل للنص على الأبيض — تباين مقبول */
  /* نهاية تدرّج الأزرار ووهجها. كانتا مكتوبتين صراحة في عشرة مواضع،
     فكان ملف العلامة عاجزاً عن بلوغهما مهما بدّل --brand-*. */
  --brand-grad-end: #C24200;
  --brand-glow:     253,91,0;

  /* ألوان قياسها انفحص على الموقع الحي، وكلها كانت راسبة قبل:
     --badge-fill  تعبئة تحمل نصاً أبيض. --brand-deep أعطى 3.15:1 بس.
                   ما تنفتّح بالليل — الأبيض فوكها بالوضعين.
     --ok-ink      لهجة الأخضر **للنص**، أغمق من --ok اللي هو تعبئة.
                   الأخضر الفاتح على تدرّجه أعطى 3.92:1.
     --tick-read   أزرق علامتَي القراءة — يتبدّل مع لون الفقاعة
                   تحته، فأزرق واحد ما ينفع للفقاعتين.
     --danger-ink  لهجة الأحمر **للنص**، مثل --ok-ink بالضبط.
                   --danger على --surface-2 يعطي 4.47:1 — راسب بشعرة
                   بحجم ١٢px، وهذا حجم كلمة الحالة بكل بطاقات القنوات. */
  --badge-fill:   #C24200;
  --ok-ink:       #0E6B3F;
  --danger-ink:   #CE2A1E;
  --tick-read:    #1B5FA8;

  --ink:          #000000;
  --grey:         #9E9E9E;
  --white:        #FFFFFF;

  --danger:       #D92D20;
  --ok:           #12874F;

  /* --- الأسطح --- */
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F6F6F7;
  --border:       #E6E6E8;
  --text:         #141210;
  --text-soft:    #6B6560;

  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(20,18,16,.05), 0 6px 20px rgba(20,18,16,.06);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);

  /* Graphik Arabic هو خط الهوية. إذا انضافت ملفات الخط المرخّصة إلى
     web/fonts/ راح تشتغل تلقائياً؛ وبدونها ينزل على أقرب بديل متوفر. */
  --font: "Graphik Arabic", "GraphikArabic", "Graphik", "Tajawal",
          "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", system-ui,
          -apple-system, Tahoma, sans-serif;
}

/* المحاولة الأولى للوضع الليلي انلغت لأن البرتقالي على الأسود قرأ
   "تحذير". انحلّت آخر الملف: التعبئة تبقى برتقالية غامقة والنص
   ياخذ لهجة فاتحة منفصلة — شوف كتلة prefers-color-scheme تحت. */
:root { color-scheme: light dark; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Author rules like `.field { display: block }` outrank the UA rule for
   [hidden], so hiding an element by attribute silently stops working. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.55;
  overscroll-behavior-y: none;
}

/* ── شاشات ─────────────────────────────────────────── */
/* `:not(.active)` keeps this at higher specificity than `.login` below, which
   sets its own display and would otherwise win by source order. */
.screen:not(.active) { display: none; }
.screen.active { display: block; }

/* Two classes beat one, so `.screen.active` above was overriding the `display:
   grid` that `.login` sets -- which silently killed the `place-items: center`
   with it and left the card pinned to the top and, in RTL, to the right edge.
   Three classes to say the same thing, and the centring works. */
.screen.active.login { display: grid; }

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 20px calc(24px + var(--safe-bottom));
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-mid) 45%, var(--brand-deep) 100%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 22px;
  padding: 32px 24px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
/* الشعار بالموبايل ما يظهر: الشريط تحت وما بيه محل. يشتغل بالجانبي فقط. */
.side-brand { display: none; }

.brand { text-align: center; margin-bottom: 26px; }
.brand-logo { display: block; margin: 0 auto 14px; width: 64px; height: 64px;
              border-radius: 18px; box-shadow: var(--shadow); }
.brand-mark {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  color: var(--white);
  display: grid; place-items: center;
  font-size: 30px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--brand-glow),.32);
}
.brand h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.brand p  { font-size: 14px; color: var(--text-soft); margin-top: 3px; }

/* ── حقول ──────────────────────────────────────────── */
.field { display: block; margin-bottom: 15px; }
.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-soft); }
.field small { display: block; font-size: 12px; color: var(--text-soft); margin-top: 5px; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;                    /* أقل من 16 يخلي iOS يكبّر الشاشة */
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(36,87,245,.22);
}
input[type=password] { letter-spacing: .3em; }
textarea { resize: vertical; letter-spacing: normal; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── أزرار ─────────────────────────────────────────── */
.btn {
  font: inherit; font-weight: 600;
  border: none; border-radius: var(--radius-sm);
  padding: 13px 20px;
  cursor: pointer;
  transition: transform .08s, opacity .15s, filter .15s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(var(--brand-glow),.25);
}
.btn-primary:hover:not(:disabled) { filter: brightness(.95); }
.btn-lg { width: 100%; padding: 15px; font-size: 17px; margin-top: 6px; }
.btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid var(--border); padding: 10px 16px; font-size: 14px;
}
.icon-btn {
  background: none; border: none; color: var(--text-soft);
  font-size: 21px; cursor: pointer; padding: 8px; border-radius: 10px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--danger); }

.error {
  background: rgba(217,45,32,.09);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 12px;
  /* رسالة الخطأ تجي بأسطر: العملية، نوع الخلل، رمز العطل، وشنو يسوي. */
  white-space: pre-line;
  line-height: 1.65;
}
.hint { text-align: center; font-size: 12.5px; color: var(--text-soft); margin-top: 18px; }

/* ── الهيكل ────────────────────────────────────────── */
/* `display:flex` here would otherwise beat the UA rule for [hidden]. */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
#app[hidden] { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.who strong { display: block; font-size: 15px; }
.who small  { display: block; font-size: 12.5px; color: var(--text-soft); }
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  color: var(--white); display: grid; place-items: center;
  font-weight: 700; font-size: 17px;
}

main { flex: 1; padding: 16px 16px 96px; max-width: 640px; width: 100%; margin: 0 auto; }
/* `:not(.active)` outranks any later rule that sets a display on a page --
   the same trap `.screen` fell into. */
.page:not(.active) { display: none !important; }
.page.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sub { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }

/* ── بطاقة الساعة ──────────────────────────────────── */
.clock-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 20px 22px;
  text-align: center;
  border: 1px solid var(--border);
}
.clock-state {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  padding: 5px 13px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
  margin-bottom: 14px;
}
.clock-state.in  { background: rgba(18,135,79,.12); color: var(--ok); }
.clock-state.out { background: rgba(158,158,158,.16); color: var(--text-soft); }
.clock-timer {
  font-size: 46px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  direction: ltr;
}
.clock-since { font-size: 13px; color: var(--text-soft); min-height: 20px; margin-top: 2px; }

.punch {
  width: 168px; height: 168px;
  margin: 22px auto 16px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  font: inherit; font-size: 19px; font-weight: 700; color: var(--white);
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  box-shadow: 0 12px 32px rgba(var(--brand-glow),.32);
  cursor: pointer;
  transition: transform .1s, box-shadow .2s, background .3s;
}
.punch:active:not(:disabled) { transform: scale(.95); }
.punch:disabled { opacity: .6; cursor: wait; }
.punch.is-in {
  background: linear-gradient(150deg, #4A4A4A, var(--ink));
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.punch.busy { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }

.gps { font-size: 12.5px; color: var(--text-soft); display: flex; align-items: center; justify-content: center; gap: 7px; }
.gps .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }
.gps.ok  .dot { background: var(--ok); }
.gps.bad .dot { background: var(--brand-deep); }

/* ── إحصائيات ──────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 10px; text-align: center;
}
.stat small  { display: block; font-size: 12px; color: var(--text-soft); }
.stat strong { display: block; font-size: 21px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; direction: ltr; }
.stat span   { font-size: 12px; color: var(--text-soft); }

/* ── قوائم ─────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.item .main   { min-width: 0; }
.item .title  { font-size: 14.5px; font-weight: 600; }
.item .meta   { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.item .value  { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; flex: none; }
/* مبلغ منخصم لازم يقرا خصماً، مو رقماً رمادياً بين الأرقام. */
.item .value.neg { color: var(--danger); }

/* فصول تبويب «النظام». نفس منطق .admin-pane بس بمستوى أنزل. */
.sys-pane { display: none; }
.sys-pane.active { display: block; }

/* قائمة «إضافة»: صف واحد لكل عملية، أيقونتها توضّحها قبل ما تنقرا. */
.add-list .add-row {
  width: 100%; font: inherit; text-align: start; cursor: pointer;
  color: inherit; gap: 13px;
}
.add-list .add-row:hover { border-color: var(--brand); }
.add-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep);
}
.add-list .main { flex: 1; display: flex; flex-direction: column; }
.add-go { flex: none; color: var(--text-soft); }

.summary {
  display: flex; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 12px;
}
.summary div, .summary .sum-go { font-size: 13px; color: var(--text-soft); }
/* رقمٌ ينضغط: يبقى بشكل الرقم المجاور تماماً، وبس يقول بيده إنه زر. */
.summary .sum-go {
  font: inherit; font-size: 13px; text-align: start; cursor: pointer;
  background: none; border: 0; padding: 0; border-radius: 10px;
}
.summary .sum-go:hover b { color: var(--brand-deep); }
.summary .sum-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.summary b { display: block; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; }

.range { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.range input { padding: 8px 10px; font-size: 13.5px; width: auto; }

.pill {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-soft);
}
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; flex: none; }
.badge.confirm  { background: rgba(36,87,245,.18); color: var(--brand-ink); }
.badge.validate { background: rgba(18,135,79,.13); color: var(--ok); }
.badge.refuse,
.badge.cancel   { background: rgba(217,45,32,.10); color: var(--danger); }

.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(18,135,79,.16); }

.empty { text-align: center; color: var(--text-soft); font-size: 14px; padding: 32px 16px; }

/* ── شريط التبويب ──────────────────────────────────── */
.tabbar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 30;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  backdrop-filter: blur(12px);
}
.tab {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 9px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-soft); font: inherit; font-size: 12px; font-weight: 600;
  transition: color .15s;
  position: relative;
}
.tab i { font-style: normal; font-size: 21px; line-height: 1.2; filter: grayscale(1) opacity(.6); transition: filter .15s; }
.tab.active { color: var(--brand-ink); }
.tab.active i { filter: none; }
.tab.active::before {
  content: ""; position: absolute; top: 0; inset-inline: 22%;
  height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

/* ── الفلوس ────────────────────────────────────────── */
.money-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 14px;
  box-shadow: var(--shadow);
}
.money-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-soft); }
.money-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; font-size: 14.5px;
}
.money-row b { font-size: 17px; font-variant-numeric: tabular-nums; direction: ltr; }
.money-row.deduct b { color: var(--danger); }
.money-row.net {
  border-top: 1.5px solid var(--border); margin-top: 6px; padding-top: 12px;
  font-weight: 700;
}
.money-row.net b { font-size: 22px; color: var(--brand-ink); }
.money-meta { font-size: 12px; color: var(--text-soft); margin-top: 10px; line-height: 1.7; }

.shift-note { font-size: 12px; color: var(--text-soft); margin-top: 8px; }
.site-note {
  font-size: 12.5px; font-weight: 600; margin-top: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
}
.site-note.ok  { background: rgba(18,135,79,.12); color: var(--ok); }
.site-note.bad { background: rgba(217,45,32,.10); color: var(--danger); }
.note {
  font-size: 12.5px; color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 9px 13px; margin-bottom: 12px;
}

/* ── بطاقات الأيام ─────────────────────────────────── */
/* `#att-days` يخدم محتويين: بطاقات الحركات (شبكة) وبطاقات الأيام
   (سلسلة). فـ`.daylist` تبقى للشبكة، و`.dayledger` تحتها للسلسلة. */
.daylist { display: flex; flex-direction: column; gap: 10px; }
/* الأيام سلسلة زمنية تُقرا نازلة، فعمود واحد دائماً: بعمودين كان يوم
   الخميس يجلس جنب الأربعاء لا فوقه، والعين تزكزك بدل ما تنزل -- نفس
   سبب `#calls-list`. وبدل بطاقات عائمة بينها فراغ: سطح واحد والأيام
   صفوف بيه، فتُقرا متتابعة فعلاً. */
.dayledger {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  grid-column: 1 / -1;          /* لو انحطّت داخل شبكة `.daylist` */
}
.dayledger .day { border-top: 1px solid var(--border); }
.dayledger .day:first-child { border-top: 0; }
/* التاريخ وحالته: لو ما وسع العمود، الشارة هي اللي تنزل سطراً -- التاريخ
   ما ينكسر تحت ضغطها. */
.day-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px; padding: 12px 15px; background: var(--surface-2);
}
.day-head .d { font-size: 14.5px; font-weight: 700; }
.day-head .badge { flex: none; }
/* الصافي بطرف السطر: عمود أرقام تنزل محاذية، تُقارن يوماً بيوم بنظرة. */
.day-head .day-net {
  flex: none; margin-inline-start: auto;
  font-size: 15px; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  color: var(--brand-ink);
}
/* يوم غياب يگدر ينزل تحت الصفر (عقوبة الغياب): الرقم السالب يلبس لون
   الخصم، لا لون البيت -- وإلا يقرا مثل أي مبلغ مستحق. */
.day-head .day-net.minus { color: var(--danger); }
.day-moves { padding: 4px 15px; }
.move {
  padding: 8px 0; font-size: 13.5px;
  border-bottom: 1px dashed var(--border);
}
.move:last-child { border-bottom: none; }
/* الأرقام سطر واحد: المدة بمكانها الثابت آخر السطر مهما طالت الشارات،
   والمدى الزمني ما ينقسم نصّين. */
.move-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.move .times {
  direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.move .dur {
  flex: none; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr;
}
/* جلسة شغّالة الآن: الشرطة مكان الرقم تبقى هادئة، والوقت هو الخبر. */
.move.live .dur { color: var(--text-soft); font-weight: 600; }
/* «كيف انسجّلت»: سطر تابع تحت الأرقام، يلتفّ بحرّيته بدل ما يزاحمها. */
.move-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 4px; font-size: 12px;
}
/* دليل البصمة منسدلاً تحت حركتها: خارطة أو صورة بمكانها، بلا ورقة
   منزلقة تمحي كشف الشهر من تحتها. */
.mv-panel {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.mv-panel h4 { margin: 0 0 6px; font-size: 12.5px; }
.mv-panel h4 ~ h4 { margin-top: 12px; }
.mv-panel .map { height: 170px; border-radius: var(--radius-sm); }
.mv-panel .note { margin: 6px 0 0; font-size: 11.5px; }
.mv-coords { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.mv-coords a { color: var(--brand-ink); font-weight: 600; }
.mv-ev.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ما ينطبع إلا ليوم عليه خصم -- ولذلك يحمل تسمياته معه بدل رأس أعمدة
   فوق قائمة أغلب صفوفها ما تحتاجه. */
.day-money {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 10px 15px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-soft);
}
.day-money b {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  /* `direction` وحدها ما تكفي: الإشارة السالبة حرف محايد بأول المقطع،
     فالسياق العربي حواليها يرجّعها لآخره (`5,128-`). العزل يثبّتها. */
  direction: ltr; unicode-bidi: isolate;
  margin-inline-start: 4px;
}
.day-money .ded b { color: var(--danger); }
.day-money .plus b { color: var(--ok-ink, #0E6B3F); }
.day-money .net b { color: var(--brand-ink); }
.day-empty { padding: 12px 15px; font-size: 13px; color: var(--text-soft); }

/* جدول الدوام الأسبوعي بنموذج الموظف: صفٌّ لكل يوم، والفارغ يعني «خذ
   الدوام الأساسي». أربعة أعمدة ثابتة حتى تنتظم خانات الوقت بعمودٍ واحد
   مهما اختلف طول اسم اليوم. */
.wk-grid { display: grid; gap: 8px; margin: 6px 0 12px; }
.wk-row {
  display: grid; grid-template-columns: 68px 1fr 1fr 32px;
  gap: 8px; align-items: center;
}
.wk-row input[type="time"] { width: 100%; min-width: 0; }
.wk-day {
  font-size: 13px; font-weight: 600; color: var(--text-soft);
  display: flex; flex-direction: column; line-height: 1.25;
}
/* «عطلة» تحت اسم اليوم، لا مكانه: الأدمن لازم يظل يشوف أي يوم هو حتى
   وهو مطفي، وإلا صار يعدّ الصفوف بإصبعه. */
.wk-day em { display: none; font-style: normal; font-size: 10.5px;
             font-weight: 700; color: var(--brand-ink); }
.wk-row.off .wk-day em { display: block; }
.wk-row.off input[type="time"] { opacity: .4; }
.wk-clear {
  background: none; border: 0; cursor: pointer; font-size: 17px;
  color: var(--text-soft); border-radius: 8px; line-height: 1;
  min-width: 32px; min-height: 32px;
}
.wk-clear:hover, .wk-clear:focus-visible { color: var(--danger); background: var(--surface-2); }

/* دوام مخصص لهذا اليوم -- سطرٌ يقول أي شفتٍ حكم اليوم، وإلا قرا صاحبه
   «متأخر صفر» على بصمة ٤ عصراً وحسبها خللاً. */
.day-custom { color: var(--brand-ink); font-weight: 600; }
.day-custom span[dir="ltr"] { font-variant-numeric: tabular-nums; }
/* زر الاستثناء بذيل البطاقة: يظهر بورقة الأدمن وحدها (JS يضيفه)، فما
   يزاحم بطاقة الموظف نفسه. */
.day-tools { padding: 0 15px 12px; }
.shift-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 11px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
}
.shift-btn:hover, .shift-btn:focus-visible { color: var(--brand-ink); }
.shift-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mv-panel .field { margin-bottom: 10px; }
.mv-panel .row { gap: 10px; }
.shift-btns { display: flex; gap: 8px; margin-top: 4px; }
.shift-btns .btn { flex: 1; }

.badge.present    { background: rgba(18,135,79,.13);  color: var(--ok); }
.badge.late       { background: rgba(36,87,245,.20);  color: var(--brand-ink); }
.badge.absent     { background: rgba(217,45,32,.11);  color: var(--danger); }
.badge.off        { background: rgba(158,158,158,.18); color: var(--text-soft); }
.badge.leave_paid { background: rgba(18,135,79,.10);  color: var(--ok); }
.badge.leave_unpaid { background: rgba(217,45,32,.09); color: var(--danger); }
.badge.before { background: rgba(158,158,158,.14); color: var(--text-soft); }
/* العطلة الرسمية مدفوعة مثل يوم دوام، فلونها لون البيت مو لون الغياب. */
.badge.holiday { background: var(--brand-soft); color: var(--brand-deep); }

/* ── نموذج الإجازة: النوع يعلن نفسه وسطر مدة حي ────── */
.leave-kind { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
.leave-kind .lk-text { font-size: 12.5px; color: var(--text-soft); }
.leave-span { margin-bottom: 12px; }
.leave-duration { margin-top: -2px; }

/* ── الإدارة ───────────────────────────────────────── */
.segmented {
  display: flex; gap: 4px; background: var(--surface-2);
  border-radius: 12px; padding: 4px; margin-bottom: 14px;
}
.seg {
  flex: 1; border: none; background: none; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--text-soft); padding: 9px 6px;
  border-radius: 9px; cursor: pointer; position: relative;
}
.seg.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dot-badge {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); vertical-align: super; margin-inline-start: 3px;
}
.admin-pane { display: none; }
.admin-pane.active { display: block; }
.btn.wide { width: 100%; margin-bottom: 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.inline-form input { flex: 1; }
.item.tappable { cursor: pointer; transition: border-color .15s; }
.item.tappable:hover { border-color: var(--brand); }
.chip {
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-soft); margin-inline-start: 6px;
}
.chip.warn { background: rgba(217,45,32,.10); color: var(--danger); }
.chip.ok   { background: rgba(18,135,79,.12); color: var(--ok); }

.credentials {
  background: rgba(36,87,245,.12); border: 1.5px dashed var(--brand);
  border-radius: var(--radius-sm); padding: 14px; margin: 12px 0;
  text-align: center;
}
.credentials .pin {
  font-size: 30px; font-weight: 700; letter-spacing: .18em;
  direction: ltr; margin: 6px 0; color: var(--brand-ink);
}
.credentials small { display: block; font-size: 12px; color: var(--text-soft); }

/* ── فلاتر الإدارة ─────────────────────────────────── */
.segmented { overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.seg { flex: 0 0 auto; min-width: 78px; }

.filters { margin-bottom: 12px; }
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-row select { flex: 1; min-width: 150px; }
.filter-row .picker { flex: 1; min-width: 180px; }
.filter-row #filter-month { flex: 0 0 auto; width: auto; min-width: 150px; }
.filter-row .btn { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; }

/* الشهر جزء من العنوان: الرواتب شهرية دائماً، فما تستاهل صف فلاتر كامل. */
.month-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 17px; font-weight: 800; color: var(--text);
}
.month-head select.month-pick {
  flex: 0 1 auto; width: auto; font: inherit; font-size: 16px; font-weight: 800;
  color: var(--brand-deep); background: var(--brand-soft);
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; min-height: 42px;
}
.month-head select.month-pick:hover { border-color: var(--brand); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chipbtn {
  flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text-soft);
}
.chipbtn.sm { font-size: 12.5px; padding: 6px 12px; }
.chipbtn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-color: transparent; color: var(--white);
}

/* صفّا فلاتر المحادثات: شريط التمرير مخفي، فمستخدم الماوس ما عنده أي
   طريقة يسحب صفاً ناقصاً — بالعمود الضيق نخليهما يلتفّان بدل ما ينگصّان.
   الالتفاف يحمي أيضاً من علّة العرض القديمة (min-content يوسّع العمود). */
.chat-side .chips { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
#chat-filters { padding-bottom: 4px; }

/* نقطة بلون المنصة الرسمي قبل اسم القناة — الموظف يمسكها بلمحة،
   ونفس منطق تطبيق الآيفون (أيقونات القنوات بألوانها حتى وهي مختارة). */
#chat-channels .chipbtn::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px;
}
#chat-channels [data-chatchannel="all"]::before { display: none; }
#chat-channels [data-chatchannel="whatsapp"]::before { background: #25D366; }
#chat-channels [data-chatchannel="facebook"]::before { background: #1877F2; }
#chat-channels [data-chatchannel="instagram"]::before { background: #E1306C; }
#chat-channels [data-chatchannel="app"]::before { background: var(--brand-deep); }
/* النقطة تبقى مرئية فوق تدرّج الزر المختار بفضل حدّها الفاتح */
#chat-channels .chipbtn.active::before { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

.item .cap { font-size: 12px; margin-inline-start: 4px; }

/* عدد محادثات القناة داخل الرقاقة — رمادي خفيف حتى ما ينافس الاسم. */
.chan-n {
  margin-inline-start: 6px; font-size: 11.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,.06)); color: var(--text-soft);
}
.chipbtn.active .chan-n { background: rgba(255,255,255,.28); color: #fff; }

/* نص يُنسخ بضغطة — خط منقّط يميّزه عن نص عادي بلا ما يصير زراً. */
.copyable { cursor: copy; border-bottom: 1px dashed var(--border); }
.copyable:hover { border-bottom-color: var(--brand-deep); }
#chat-name { cursor: copy; }

/* ── شاشة الأقسام ──────────────────────────────────── */
.hub-hello { margin-bottom: 16px; }
.hub-hello h2 { font-size: 22px; font-weight: 700; }
.hub-hello p { font-size: 13.5px; color: var(--text-soft); margin-top: 3px; }

.hub-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px;
  border: 1px solid var(--border);
}
.hub-status.in  { background: rgba(18,135,79,.09); }
.hub-status.out { background: var(--surface-2); }
.hub-status b { display: block; font-size: 15px; }
.hub-status small { display: block; font-size: 12.5px; color: var(--text-soft); }
.hub-status .btn { flex: none; padding: 10px 18px; font-size: 14px; }

/* عمود بالموبايل، صف بطاقات بالشاشة العريضة — بلا نقطة كسر إضافية */
.hub-grid { display: grid; gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.hub-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; cursor: pointer; text-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit;
  transition: border-color .15s, transform .08s;
}
.hub-card:hover { border-color: var(--brand); }
.hub-card:active { transform: scale(.99); }
.hub-card.soon { opacity: .6; }
.hub-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--surface-2);
}
.hub-text { flex: 1; min-width: 0; }
.hub-text small { display: block; font-size: 12.5px; color: var(--text-soft); }
.hub-badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--danger); color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.hub-go { flex: none; font-size: 20px; color: var(--text-soft); }
.hub-soon {
  flex: none; font-size: 12px; font-weight: 600; color: var(--text-soft);
  background: var(--surface-2); padding: 4px 10px; border-radius: 999px;
}

.soon { text-align: center; padding: 48px 20px; }
.soon-icon { font-size: 44px; margin-bottom: 12px; }
.soon h3 { font-size: 17px; margin-bottom: 8px; }
.soon p { font-size: 13.5px; color: var(--text-soft); line-height: 1.8;
          max-width: 340px; margin: 0 auto; }

/* ── إشعاراتي ──────────────────────────────────────── */
.notif-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.notif-row.new { border-color: var(--brand); background: rgba(36,87,245,.05); }
.notif-row[data-open] { cursor: pointer; }
.notif-row[data-open]:hover { border-color: var(--brand); }
.notif-icon { flex: none; font-size: 20px; line-height: 1.3; }
.notif-body { flex: 1; min-width: 0; }
.notif-body b { display: block; font-size: 14.5px; }
.notif-body small { display: block; font-size: 13px; color: var(--text-soft);
                    margin-top: 2px; line-height: 1.6; }
.notif-body time { display: block; font-size: 12px; color: var(--text-soft);
                   margin-top: 4px; }
.notif-go { flex: none; font-size: 18px; color: var(--text-soft); }

.tab { position: relative; }
.tab-badge {
  position: absolute; top: 4px; inset-inline-end: 50%;
  transform: translateX(50%) translateX(14px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: var(--white);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── قائمة الموظفين ────────────────────────────────── */
/* شريط أدوات واحد: بحث يمتد، وزر إضافة بحجمه الطبيعي — الزر العريض
   البرتقالي كان ياخذ نص الشاشة قبل أول اسم. */
.emp-bar { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.emp-bar .btn { flex: 0 0 auto; white-space: nowrap; }
.searchbox {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2);
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
.searchbox i { color: var(--text-soft); flex: none; display: flex; }
.searchbox input { border: none; background: none; padding: 0; width: 100%;
                   font-size: var(--t-sm); }
.searchbox input:focus { outline: none; box-shadow: none; }

.emp-groups { display: flex; flex-direction: column; gap: var(--s5); }
.emp-group-head {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--text-soft);
}
.emp-group-head .pill { padding: 2px 9px; font-size: 12px; }
/* بطاقات بعرض ثابت تنملي السطر: عمودين على الحاسبة، عمود بالموبايل. */
.emp-cards {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.emp-card {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.emp-card:hover { border-color: var(--brand); background: var(--brand-tint); }
.emp-card:active { transform: scale(.995); }
.emp-av {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  background: var(--surface-2); color: var(--text-soft);
}
/* حبة خضراء على الصورة تقول "داخل الآن" بدون سطر إضافي */
.emp-av.in { background: var(--brand-soft); color: var(--brand-deep); }
.emp-av.in::after {
  content: ""; position: absolute; inset-block-end: -2px; inset-inline-end: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--surface);
}
.emp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.emp-name {
  font-size: 14.5px; font-weight: 650; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.emp-sub { font-size: var(--t-xs); color: var(--text-soft);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-live { font-size: 12px; font-weight: 600; display: inline-flex;
            align-items: center; gap: 4px; }
.emp-live.in    { color: var(--ok); }
.emp-live.stale { color: var(--danger); }
.emp-live.out   { color: #A9A5A0; font-weight: 500; }
.emp-wage { flex: none; text-align: center; min-width: 84px; }
.emp-wage b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums;
              direction: ltr; }
.emp-wage b.none { color: var(--text-soft); }
.emp-wage small { display: block; font-size: 12px; color: var(--text-soft); }
.emp-go { flex: none; color: #C4C4CA; display: grid; place-items: center; }
.chip.mute { background: var(--surface-2); color: var(--text-soft); }

@media (max-width: 560px) {
  .emp-bar { flex-wrap: wrap; }
  .emp-bar .btn { width: 100%; }
  .emp-wage { min-width: 0; text-align: end; }
  .emp-wage small { display: none; }
}

/* ── بطاقة حركة ────────────────────────────────────── */
.move-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px 10px;
}
.move-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.move-top .who-name { font-size: 15px; font-weight: 700; }
.move-top .dur {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr;
}
.move-top .live { color: var(--ok); font-size: 12.5px; direction: rtl; }
.move-date { font-size: 12.5px; color: var(--text-soft); margin-bottom: 8px; }
.move-leg {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px dashed var(--border);
}
.move-leg .leg-label {
  font-size: 12px; font-weight: 700; width: 42px; flex: none;
  padding: 3px 0; text-align: center; border-radius: 6px;
}
.move-leg.in  .leg-label { background: rgba(18,135,79,.12);  color: var(--ok); }
.move-leg.out .leg-label { background: rgba(217,45,32,.10);  color: var(--danger); }
.move-leg .leg-time {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 52px;
}
.move-leg .leg-time .live { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.move-leg .leg-icons { display: flex; gap: 6px; margin-inline-start: auto; }
.mini {
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}
.mini:hover:not(:disabled) { border-color: var(--brand); background: var(--surface); }
.mini.off { opacity: .3; cursor: default; }
.move-edit {
  width: 100%; margin-top: 8px; padding: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  background: none; border: none; border-top: 1px solid var(--border);
}
.move-edit:hover { color: var(--brand-ink); }
.selfie {
  width: 100%; max-width: 280px; border-radius: var(--radius-sm);
  display: block; margin: 0 auto 6px; border: 1px solid var(--border);
  transform: scaleX(-1);            /* it was taken with the front camera */
}

/* ── منتقي الموظفين ────────────────────────────────── */
.picker { position: relative; }
.picker-btn {
  width: 100%; text-align: start; font: inherit; font-size: 15px;
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.picker-btn:hover { border-color: var(--brand); }
.picker-btn .caret { color: var(--text-soft); font-size: 12px; flex: none; }
.picker-panel {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 8px; max-height: 320px; display: flex; flex-direction: column;
}
.picker-panel[hidden] { display: none; }
.picker-panel input[type=text] { font-size: 14px; padding: 9px 11px; margin-bottom: 6px; }
.picker-list { overflow-y: auto; }
.picker-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.picker-opt:hover { background: var(--surface-2); }
.picker-opt input { width: auto; margin: 0; }
.picker-actions {
  display: flex; gap: 6px; padding-top: 8px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.picker-actions button {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: none; border-radius: 8px; padding: 8px; background: var(--surface-2);
  color: var(--text);
}
.picker-actions button.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: var(--white);
}

/* ── تقرير الرواتب ─────────────────────────────────── */
.pay-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 15px;
}
.pay-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 10px;
}
/* الرقم التسلسلي يمشي ملزوقاً بالاسم، فما ينفصل عنه بـ space-between */
.pay-head .who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pay-head .sn {
  color: var(--text-soft); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.pay-head .nm { font-size: 15px; font-weight: 700; }
.pay-head .net {
  font-size: 19px; font-weight: 700; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; direction: ltr;
}
.pay-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  font-size: 12px; text-align: center;
}
.pay-grid small { display: block; color: var(--text-soft); font-size: 12px; }
/* العزل لا `direction` وحدها: التسمية العربية جنب الرقم ترجّع الإشارة
   لآخره (`117,826−`). ظهرت بالهاتف فقط لأن التسميات تُخفى بالجدول. */
.pay-grid b { font-variant-numeric: tabular-nums; font-size: 13.5px;
  direction: ltr; unicode-bidi: isolate; }
.pay-grid.five { grid-template-columns: repeat(5, 1fr); }
/* اللون يقول «هنا شي»، لا «هذا العمود». الصفر يهدأ حتى يبقى الأحمر
   الوحيد بالكشف هو الخصم الحقيقي -- وكان كل صف فيه أحمر وأخضر فما عاد
   يبين شي. (`.pos`/`.neg` تبقى لأي مستدعٍ قديم.) */
.pay-grid b.zero { color: var(--text-soft); font-weight: 600; }
.pay-grid b.up   { color: var(--ok-ink, #0E6B3F); }
.pay-grid b.down { color: var(--danger); }
/* الاسمي أساسٌ يُقارن به، والفعلي يهدأ وقت يطابقه ويصحى وقت يفترق.
   الفرق يبين بالحبر والثقل لا بلون ثانٍ: العنبر للصافي وحده -- «لو
   اثنان بالشاشة عنبر، واحد منهما غلط». */
.pay-grid b.base { color: var(--text); }
.pay-grid b.same { color: var(--text-soft); font-weight: 600; }
.pay-grid b.diff { color: var(--text); font-weight: 800; }
.pay-grid .neg b { color: var(--danger); }
.pay-grid .pos b { color: var(--ok); }
.pay-bar {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  margin: 10px 0 4px; overflow: hidden;
}
.pay-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

/* ── البحث عن مكان ─────────────────────────────────── */
.geo-search { display: flex; gap: 8px; margin-bottom: 8px; }
.geo-search input { flex: 1; }
.geo-search .btn { flex: none; }
.geo-engine {
  font-size: 12px; font-weight: 600; padding: 8px 12px;
  border-radius: var(--radius-sm); margin-bottom: 8px; line-height: 1.6;
}
.geo-engine.ok   { background: rgba(18,135,79,.10);  color: var(--ok); }
.geo-engine.warn { background: rgba(36,87,245,.14);  color: var(--brand-ink); }

.geo-results {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 10px; max-height: 210px; overflow-y: auto;
}
.geo-hit {
  display: block; width: 100%; text-align: start; cursor: pointer;
  font: inherit; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 10px 12px;
}
.geo-hit:last-child { border-bottom: none; }
.geo-hit:hover { background: var(--surface-2); }
.geo-hit span { display: block; font-size: 13.5px; line-height: 1.45; }
.geo-hit em {
  display: block; font-style: normal; font-size: 12px;
  color: var(--text-soft); margin-top: 1px;
}
.geo-hit small {
  display: block; font-size: 12px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.gmaps-link {
  display: block; text-align: center; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
  text-decoration: none;
}
.gmaps-link:hover { text-decoration: underline; }

/* ── الخارطة ───────────────────────────────────────── */
.map {
  position: relative; height: 240px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2);
  border: 1.5px solid var(--border); touch-action: none; cursor: grab;
  margin-bottom: 10px;
}
.map.dragging { cursor: grabbing; }
.map-tiles { position: absolute; inset: 0; }
.map-tiles img {
  position: absolute; width: 256px; height: 256px;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.map-pin {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -100%);
  font-size: 30px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
/* An anchored pin is positioned in pixels by the map, not pinned to centre. */
.map-pin.anchored { left: 0; top: 0; }
.map-ring {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid var(--brand-deep); border-radius: 50%;
  background: rgba(36,87,245,.15);
}
.map-zoom {
  position: absolute; z-index: 4; inset-inline-end: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.map-zoom button {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.map-attr {
  position: absolute; z-index: 4; inset-inline-start: 6px; bottom: 4px;
  font-size: 9.5px; color: var(--text-soft);
  background: rgba(255,255,255,.7); padding: 1px 5px; border-radius: 4px;
}
.map-attr { background: rgba(255,255,255,.8); }

/* ── سؤال بخيارات ─────────────────────────────────── */
/* فوق اللوحة المنزلقة (z-50) لأنه يُسأل والورقة مفتوحة. */
.ask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(3px);
}
.ask-card {
  background: var(--surface); width: 100%; max-width: 420px;
  border-radius: 18px; padding: 18px;
  animation: sheetUp .18s ease;
}
.ask-card > strong { font-size: 16px; display: block; }
.ask-card > p { color: var(--text-soft); font-size: 13.5px; margin: 8px 0 14px; }
.ask-opt {
  display: block; width: 100%; text-align: inherit; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 13px; padding: 12px 14px; margin-bottom: 8px;
  color: inherit; font: inherit;
}
.ask-opt:hover, .ask-opt:focus-visible { border-color: var(--brand); }
.ask-opt b { display: block; font-size: 14px; }
.ask-opt small { display: block; color: var(--text-soft); font-size: 12px; margin-top: 3px; }
.ask-cancel {
  display: block; width: 100%; cursor: pointer; margin-top: 4px;
  background: none; border: 0; color: var(--text-soft);
  font: inherit; font-size: 13px; padding: 8px;
}

/* ── حضور تلقائي ──────────────────────────────────── */
/* موظف ما يبصم: بدل الزر سطر يقول ليش ماكو زر. */
.hn-auto {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 12px 14px; text-align: center;
  font-size: 13.5px; line-height: 1.7;
}
.hn-auto b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.hn-auto small { color: var(--text-soft); font-size: 12.5px; }
/* زر حذف داخل ورقة: لونه يقول إنه آخر خيار، لا أول واحد. */
.btn.danger { color: var(--danger, #D92D20); }
.btn.danger:hover { background: rgba(217,45,32,.08); }
.btn.wide { width: 100%; margin-top: 8px; }

/* شريط أيام الإجازة: المدة بارزة، والأيام بأسمائها تحتها. */
.leave-duration {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 13px; padding: 11px 13px; line-height: 1.9;
}
.leave-duration b { font-size: 14.5px; display: block; }
.leave-duration small { color: var(--text-soft); font-size: 12px; }
.ld-days { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 4px; }
.ld-day {
  font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px 8px;
}
.ld-day.off { color: var(--text-soft); border-style: dashed; }
.ld-day.more { color: var(--text-soft); }
.lv-cancel { flex: none; padding: 6px 11px; font-size: 12.5px; }

/* العطل الرسمية القادمة بصفحة الإجازات. */
.hol-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
}
.hol-card h3 {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; margin: 0 0 8px;
}
.hol-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.hol-row:first-of-type { border-top: 0; }
.hol-row span { color: var(--text-soft); }

/* ── السجل المالي للموظف ──────────────────────────── */
.led { margin-bottom: 14px; }
.led-head {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.led-sum {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 11px; min-width: 0;
}
.led-sum small { display: block; font-size: 11px; color: var(--text-soft); }
.led-sum b { font-size: 14.5px; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; }
.led-sum.give b { color: var(--ok, #12805C); }
.led-sum.take b { color: #D92D20; }
.led-rows { display: flex; flex-direction: column; }
.led-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.led-row:last-child { border-bottom: 0; }
.led-ic { line-height: 0; color: var(--text-soft); flex: none; }
.led-main { flex: 1; min-width: 0; }
.led-main b { display: block; font-size: 13.5px; }
.led-main small { display: block; font-size: 11.5px; color: var(--text-soft); }
.led-amt {
  font-size: 13.5px; font-weight: 700; flex: none;
  font-variant-numeric: tabular-nums;
  /* بلا عزل ترجع الإشارة لآخر الرقم بالسياق العربي: `33,700-`. */
  direction: ltr; unicode-bidi: isolate;
}
.led-row.give .led-amt { color: var(--ok, #12805C); }
.led-row.take .led-amt { color: #D92D20; }
.led-edit {
  background: none; border: 0; cursor: pointer; color: var(--text-soft);
  line-height: 0; padding: 4px; border-radius: 7px; flex: none;
}
.led-edit:hover, .led-edit:focus-visible { color: var(--brand); background: var(--surface-2); }
/* مجموعة مطويّة: عنوانها صفٌّ مثل بقية الصفوف -- نفس الشبكة ونفس
   الأعمدة -- زائد سهم يقول إنها تنفتح. */
.led-group > summary {
  cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--border);
}
.led-group > summary::-webkit-details-marker { display: none; }
.led-group > summary:hover { background: var(--surface-2); }
.led-group[open] > summary { border-bottom-color: transparent; }
.led-chev {
  flex: none; line-height: 0; color: var(--text-soft);
  transition: transform .18s ease;
}
.led-group[open] .led-chev { transform: rotate(-180deg); }
/* صفوف المجموعة تغور شوي: تعرف إنها تحت عنوانها، لا جنبه. */
.led-group > .led-rows {
  background: var(--surface-2); border-radius: 10px;
  padding: 2px 10px; margin-bottom: 8px;
}
/* يوم وراء الخصم: تاريخه · سببه · مبلغه. */
.led-day {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 2px; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.led-day:last-child { border-bottom: 0; }
.led-day .d { font-weight: 700; flex: none; }
.led-day .t { flex: 1; min-width: 0; color: var(--text-soft); }
.led-day .a {
  flex: none; font-weight: 700; color: var(--danger);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

/* من وين جات صلاحية هذا الموظف: قسمه، أو استثناء خاص بيه. */
.perm-src {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--text-soft); line-height: 1.7;
}
.perm-src span { flex: 1; min-width: 180px; }
.perm-src .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }

/* زر دليل البصمة (الدبوس والكاميرا): أيقونة تُضغط، فلازم تبين إنها تُضغط. */
.mv-ev {
  background: none; border: 0; cursor: pointer; padding: 2px 3px;
  color: var(--text-soft); line-height: 0; border-radius: 7px;
  /* العلامة تبقى 15px، والهدف يكبر تحتها: البصمة تُراجَع بالخارج على
     الهاتف بيد وحدة، و21px ما تنضغط. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
}
.mv-ev:hover, .mv-ev:focus-visible { color: var(--brand); background: var(--surface-2); }

/* شارة «تلقائي» على بصمة ما بصمها أحد -- حتى ما تقرا كذب. */
.mv-auto {
  font-size: 10.5px; font-weight: 700; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
/* خروج سكّره النظام: نفس الشريحة بلون التنبيه -- الوقت هذا ما ضغطه
   أحد، والفرق لازم يبان بنظرة. */
.mv-auto.out { color: var(--brand-ink); background: var(--brand-soft);
  border-color: transparent; }
/* ودخول فتحه النظام لمّا وصل الموظف نطاق الموقع: بالأخضر مثل تسمية
   «دخول» نفسها، حتى الشارة تنتمي لساقها بدل ما تقرا تنبيهاً. */
.mv-auto.in { color: var(--ok); background: rgba(18,135,79,.12);
  border-color: transparent; }
/* الشارة داخل صف الحركة تجي جنب الوقت، فلازم ما تنضغط ولا تنكسر: صف
   الساق `flex`، والنص العربي القصير ينقسم سطرين بأول ضيق. */
.move-leg .mv-auto { flex: none; white-space: nowrap; }
.auto-note {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--brand-soft); color: var(--brand-deep);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 12px;
}
.auto-note svg { flex: none; margin-top: 1px; }

/* ── لوحة منزلقة ───────────────────────────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
}
.sheet[hidden] { display: none; }
.sheet-card {
  background: var(--surface); width: 100%; max-width: 560px;
  border-radius: 22px 22px 0 0;
  max-height: 92dvh; display: flex; flex-direction: column;
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
}
.sheet-head strong { font-size: 16px; }
.sheet-body {
  padding: 16px 18px calc(20px + var(--safe-bottom));
  overflow-y: auto;
}
.sheet-body h4 {
  font-size: 13px; font-weight: 700; color: var(--text-soft);
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.sheet-body h4:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.days-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.days-picker label {
  flex: 1; min-width: 42px; text-align: center; font-size: 12.5px;
  padding: 9px 2px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border);
  font-weight: 600; color: var(--text-soft);
}
.days-picker input { display: none; }
.days-picker input:checked + span { color: var(--white); }
.days-picker label:has(input:checked) {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-color: transparent; color: var(--white);
}
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0; font-size: 14px;
}
.switch-row input { width: auto; }

@media (min-width: 720px) {
  .sheet { align-items: center; }
  .sheet-card { border-radius: 22px; }
}

/* ── الكاميرا ──────────────────────────────────────── */
.cam-card video {
  width: 100%; max-height: 58dvh; object-fit: cover;
  background: #000; transform: scaleX(-1);
}
.cam-card .btn { margin: 14px 18px calc(18px + var(--safe-bottom)); width: auto; }
.cam-card .error { margin: 12px 18px 0; }

/* ── الجرس والإشعارات ──────────────────────────────── */
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn.bell { position: relative; }
.icon-btn.bell:hover { color: var(--brand-ink); background: var(--surface-2); }
.bell-badge {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: var(--white);
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 11px 4px;
         border-bottom: 1px solid var(--border); }
.notif:last-child { border-bottom: none; }
.notif .dot2 { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
               background: transparent; flex: none; }
.notif.new .dot2 { background: var(--brand-deep); }
.notif .txt { flex: 1; min-width: 0; }
.notif .txt b { font-size: 14px; }
.notif .txt small { display: block; font-size: 12px; color: var(--text-soft); }
.notif time { font-size: 12px; color: var(--text-soft); flex: none;
              font-variant-numeric: tabular-nums; direction: ltr; }

/* ── شريط أدوات ────────────────────────────────────── */
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .btn { flex: 1; min-width: 108px; font-size: 13.5px; padding: 10px 12px; }

.banner {
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 12px;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.banner.locked { background: rgba(18,135,79,.12); color: var(--ok); }
.banner.open   { background: rgba(36,87,245,.14); color: var(--brand-ink); }
/* راتبٌ فوق الاسمي: أحمر لأنه فلوس انصرفت زيادة، لا مجرد ملاحظة. */
.banner.warn   { background: rgba(214,69,69,.12); color: var(--danger);
                 align-items: flex-start; line-height: 1.55; }
.banner button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: none; border-radius: 8px; padding: 6px 12px;
  background: var(--surface); color: var(--text);
}

/* ── لوحة الحاسبة ──────────────────────────────────── */
@media (min-width: 1024px) {
  body { --sidebar: 220px; }

  .topbar {
    padding-inline-start: calc(var(--sidebar) + 24px);
    padding-inline-end: 24px;
  }

  /* The bottom tab bar becomes a real side navigation. */
  .tabbar {
    position: fixed; top: 0; bottom: 0; inset-inline-end: auto;
    inset-inline-start: 0; width: var(--sidebar);
    flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 78px 12px 12px;
    border-top: none;
    border-inline-end: 1px solid var(--border);
    background: var(--surface);
  }
  .tab {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 12px 14px; border-radius: 11px; font-size: 14px;
  }
  .tab i { font-size: 19px; }
  .tab.active { background: var(--surface-2); }
  .tab.active::before {
    inset: auto; top: 50%; transform: translateY(-50%);
    inset-inline-start: 0; width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
  }
  /* الشعار مكان النص اللي كان هنا */
  .tabbar { padding-top: 16px; }
  .side-brand {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 12px 18px; margin-bottom: 2px;
  }
  .side-brand img { width: 30px; height: 30px; border-radius: 9px; flex: none; }
  .side-brand span { font-size: 19px; font-weight: 700; letter-spacing: -.01em;
                     color: var(--brand-deep); }

  main {
    /* `width: 100%` from the base rule would add to the margin and overflow. */
    max-width: none; width: auto; padding: 24px 24px 40px;
    margin: 0; margin-inline-start: var(--sidebar);
  }
  .page { max-width: 1180px; margin: 0 auto; }

  /* Two columns on the attendance page: the clock beside the money. */
  .page.active[data-page="home"] { display: grid; gap: 18px;
    grid-template-columns: minmax(320px, 420px) 1fr; align-items: start; }
  .page[data-page="home"] .clock-card { grid-row: span 2; }
  .stats { grid-template-columns: repeat(3, 1fr); margin-top: 0; }

  .daylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* الواجهة الرئيسية تتنفّس أكثر على الشاشة العريضة */
  .hub-grid { gap: var(--s3); }
  .hub-hello { margin-bottom: var(--s5); }
  .admin-pane[data-admin-pane="payroll"] .list,
  .admin-pane[data-admin-pane="audit"] .list,
  /* A call log is read down the page in time order. In two columns the newest
     call sits beside an older one and the sequence zigzags. */
  #calls-list { grid-template-columns: 1fr; }
  #att-summary, #pay-totals, #log-summary, #adv-summary { grid-column: 1 / -1; }
  .toolbar .btn { flex: 0 0 auto; min-width: 150px; }
  .filters { display: flex; align-items: center; gap: 14px; }
  .chips { padding-bottom: 0; }
  #filter-emp { width: auto; min-width: 200px; }
  .sheet-card { max-width: 640px; }
  .clock-card { position: sticky; top: 88px; }
}

@media (min-width: 1500px) {
  .daylist { grid-template-columns: repeat(3, 1fr); }
}

/* ── تنبيه ─────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 60;
  bottom: calc(84px + var(--safe-bottom));
  inset-inline: 20px;
  max-width: 420px; margin: 0 auto;
  background: var(--ink); color: var(--white);
  border-radius: 12px; padding: 13px 16px;
  font-size: 14px; font-weight: 500; text-align: center;
  white-space: pre-line; line-height: 1.6;   /* نفس أسطر رسالة الخطأ */
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  animation: rise .22s ease;
}
.toast.ok  { background: var(--ok); }
.toast.err { background: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Screen-pop لمكالمة السنترال (Yeastar). بانر علوي — أعلى من الـtoast حتى ما
   يتغطّى، ويستعمل توكنات السطح/الحبر فينقلب مع الوضع الليلي تلقائياً. */
.callpop {
  position: fixed; z-index: 70;
  top: calc(10px + var(--safe-top)); inset-inline: 12px;
  max-width: 440px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 11px 13px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  transform: translateY(-150%); opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}
.callpop.show { transform: translateY(0); opacity: 1; }
.callpop-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
}
.callpop-ic svg { width: 22px; height: 22px; }
.callpop-b { flex: 1 1 auto; min-width: 0; }
.callpop-t { font-size: 12px; font-weight: 700; color: var(--brand-ink); }
.callpop-who {
  font-size: 16px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.callpop-sub { font-size: 12.5px; opacity: .62; margin-top: 1px; }
.callpop-open {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--badge-fill); color: #fff;
  border-radius: 10px; padding: 0 13px; min-height: 40px;
  font-family: inherit; font-size: 13px; font-weight: 700;
}
.callpop-x {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--ink); opacity: .5; font-size: 15px;
  width: 32px; height: 32px; border-radius: 8px; line-height: 1;
}
.callpop-x:hover { opacity: .85; }

/* Tablet only -- above 1024 the tab bar becomes the desktop sidebar, so this
   must not reach that far or it would undo `position: fixed` there. */
@media (min-width: 720px) and (max-width: 1023px) {
  .stats { gap: 14px; }
  main { padding-bottom: 40px; }
  .tabbar { position: sticky; }
}

/* ── الخزنة ─────────────────────────────────────────── */
.secret-row { display: flex; gap: 8px; align-items: stretch; }
.secret-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace;
                    letter-spacing: .04em; }
.secret-row input[type=password] { letter-spacing: .22em; font-size: 18px; }
.secret-row .btn { padding: 0 14px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
#sec-timer { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

/* ── ورقة الموظف: تبويبات وصلاحيات ─────────────────── */
.sheet-tabs { display: flex; gap: 6px; margin: -4px 0 16px; overflow-x: auto;
              scrollbar-width: none; padding-bottom: 2px; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tabs button { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px;
                     border: 1px solid var(--line); background: #fff;
                     font: inherit; font-size: 13.5px; font-weight: 600;
                     color: var(--muted); cursor: pointer; white-space: nowrap;
                     transition: background .15s, color .15s, border-color .15s; }
.sheet-tabs button.active { background: var(--brand); border-color: var(--brand);
                            color: #fff; }
.sheet-pane { display: none; }
.sheet-pane.active { display: block; animation: fade .16s ease; }

.perm-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.perm-all { background: var(--surface-2); border-radius: var(--radius-sm);
            padding: 11px 14px; margin-bottom: 12px;
            display: flex; align-items: center;
            justify-content: space-between; gap: 12px; cursor: pointer; }
.perm-all span { font-size: 13.5px; }
.perm-row:last-of-type { border-bottom: 0; }
.perm-name { font-weight: 600; font-size: 14px; margin-bottom: 9px;
             display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* وصف الوحدة يمشي ورا اسمها، بس بوزن أخف حتى الاسم يبقى هو العنوان */
.perm-name small { font-weight: 400; font-size: var(--t-xs); color: var(--text-soft); }
.perm-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip { position: relative; cursor: pointer; }
.perm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.perm-chip span { display: block; padding: 7px 13px; border-radius: 999px;
                  border: 1px solid var(--line); background: #fff;
                  font-size: 12.5px; font-weight: 600; color: var(--muted);
                  transition: background .15s, color .15s, border-color .15s; }
.perm-chip.on span { background: var(--brand-soft, #DCE6FF); color: var(--brand);
                     border-color: var(--brand); }
.perm-chip input:disabled + span { opacity: .5; cursor: not-allowed; }

.acct-head { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
             border-radius: 12px; margin-bottom: 4px; }
.acct-phone { font-weight: 700; font-size: 16px; }
.acct-head .btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
.acct-head .meta { line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   نظام بصري موحّد — مقاييس بدل أرقام متفرقة
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* سلّم مسافات واحد: كل الهوامش مضاعفات 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* سلّم خطوط: خمس درجات لا غير */
  --t-xs: 12px; --t-sm: 13.5px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px;

  /* ظلال متدرّجة بدل ظل واحد لكل شي */
  --sh-1: 0 1px 2px rgba(20,18,16,.04);
  --sh-2: 0 1px 3px rgba(20,18,16,.05), 0 4px 12px rgba(20,18,16,.05);
  --sh-3: 0 2px 6px rgba(20,18,16,.06), 0 12px 32px rgba(20,18,16,.09);
  --brand-soft: #DCE6FF;
  --brand-tint: #FFFAF3;
}

/* الأيقونات ترث لون النص وتتوسّط سطرها */
.ic { flex: 0 0 auto; vertical-align: -.18em; }
button .ic, .btn .ic, .tab .ic { pointer-events: none; }
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: var(--s2); }

/* الأرقام بعرض ثابت حتى الأعمدة تنتصف تحت بعض */
.value, .amount, .money, .num, .acct-phone, .stat-num, td, .pin {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* ── شريط التبويبات ─────────────────────────────────────── */
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px;
       color: var(--text-soft); transition: color .18s ease; }
.tab i { display: grid; place-items: center; line-height: 0; }
.tab span { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.tab.active { color: var(--brand-ink); }
.tab:active { transform: scale(.94); }

/* ── بطاقات الأقسام ─────────────────────────────────────── */
.hub-card { display: flex; align-items: center; gap: var(--s3);
            width: 100%; padding: var(--s4); min-height: 76px;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); box-shadow: var(--sh-1);
            text-align: start; cursor: pointer;
            transition: box-shadow .18s ease, border-color .18s ease,
                        transform .12s ease; }
.hub-card:hover { box-shadow: var(--sh-2); border-color: #DADADE; }
.hub-card:active { transform: scale(.99); }
.hub-card.soon { opacity: .62; cursor: default; }
.hub-card.soon:hover { box-shadow: var(--sh-1); border-color: var(--border); }

.hub-icon { display: grid; place-items: center; width: 44px; height: 44px;
            flex: 0 0 auto; border-radius: 13px;
            background: var(--brand-soft); color: var(--brand-deep); }
.hub-card.soon .hub-icon { background: var(--surface-2); color: var(--text-soft); }
.hub-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
            gap: 2px; }
.hub-text small { font-size: var(--t-sm); color: var(--text-soft);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-go { display: grid; place-items: center; color: #C4C4CA; flex: 0 0 auto; }
.hub-soon { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
            background: var(--surface-2); color: var(--text-soft);
            font-size: var(--t-xs); font-weight: 600; }
.hub-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
             border-radius: 999px; background: var(--danger); color: #fff;
             font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ── الترويسة ───────────────────────────────────────────── */
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px;
            border-radius: 11px; border: 0; background: transparent;
            color: var(--text-soft); cursor: pointer;
            transition: background .16s ease, color .16s ease; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.bell-badge { position: absolute; top: 2px; inset-inline-end: 2px;
              min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
              background: var(--danger); color: #fff; font-size: 10px;
              font-weight: 700; display: grid; place-items: center;
              border: 2px solid var(--surface); }

/* ── قوائم ──────────────────────────────────────────────── */
.item { transition: background .16s ease; }
.item.tappable { cursor: pointer; }
.item.tappable:hover { background: var(--brand-tint); }
.item.tappable:active { transform: scale(.995); }
.item .value { color: #C4C4CA; }
.item .value.neg { color: var(--danger); }

/* ── حالات فارغة ────────────────────────────────────────── */
.empty { padding: var(--s8) var(--s4); text-align: center;
         color: var(--text-soft); font-size: var(--t-sm); }

/* ── لمسات أخيرة ────────────────────────────────────────── */
.page-head h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
     text-transform: uppercase; color: var(--text-soft);
     margin: var(--s6) 0 var(--s3); }
.note { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.6; }
* { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
                           transition-duration: .01ms !important; }
}

/* ── شريط التبويبات: تنقية ─────────────────────────────────
   الأيقونات صارت SVG تاخذ لون النص، فالفلتر الرمادي اللي كان
   للإيموجي صار يبهّتها. والشريط اللي فوق كان ينقص عند الحافة —
   بدّلناه بخلفية ناعمة تحت الأيقونة. */
.tab i { font-size: 0; filter: none !important; line-height: 0; }
.tab.active::before { display: none; }
/* الحبّة خلفية على العنصر نفسه — التمركز بـ transform ينعكس مع RTL */
.tab i { padding: 5px 17px; border-radius: 999px; background: transparent;
         transition: background .2s ease; }
.tab.active i { background: var(--brand-soft); }
.tab.active { color: var(--brand-deep); }

/* ── زر البصمة على بطاقة الحالة ──────────────────────────── */
.hub-status .btn { font-weight: 650; }
.hub-status .btn-ghost { background: var(--surface); border: 1px solid var(--border);
                         color: var(--text); box-shadow: var(--sh-1); }

/* ── تنقية الترويسة ─────────────────────────────────────── */
.topbar { padding-inline: var(--s4); }
.me-name { font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; }
.me-job  { font-size: var(--t-sm); color: var(--text-soft); }
.avatar { border-radius: 13px; font-weight: 700; }

/* الشارة تجلس على الزاوية، مو فوق الجرس */
.bell-badge { top: -1px; inset-inline-end: -1px; }
.icon-btn.bell { overflow: visible; }
.chip.brand { background: var(--brand-soft); color: var(--brand-deep); }

/* ── مفاتيح دقيقة تحت كل وحدة ───────────────────────────── */
.perm-flags { display: flex; flex-direction: column; gap: 2px;
              margin-top: var(--s3); padding-top: var(--s3);
              border-top: 1px dashed var(--border);
              transition: opacity .2s ease; }
.perm-flags.muted { opacity: .38; }
.perm-switch { display: flex; align-items: center; gap: var(--s3);
               padding: 7px 0; cursor: pointer; }
.perm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.perm-switch .track { position: relative; flex: 0 0 auto; width: 38px; height: 22px;
                      border-radius: 999px; background: #DEDEE3;
                      transition: background .18s ease; }
.perm-switch .track::after { content: ""; position: absolute; top: 3px;
                             inset-inline-start: 3px; width: 16px; height: 16px;
                             border-radius: 50%; background: #fff;
                             box-shadow: 0 1px 3px rgba(0,0,0,.2);
                             transition: transform .18s ease; }
.perm-switch input:checked + .track { background: var(--brand); }
.perm-switch input:checked + .track::after { transform: translateX(-16px); }
:dir(ltr) .perm-switch input:checked + .track::after { transform: translateX(16px); }
.perm-switch input:disabled ~ * { cursor: not-allowed; }
.perm-switch .lbl { font-size: var(--t-sm); color: var(--text); line-height: 1.4; }

/* ── تقارير الواجهة الرئيسية ───────────────────────── */
/* أرقام اليوم والشهر واللي ما انرد عليه، ورسم ١٤ يوم تحتها. تظهر لحساب
   عنده مفتاح "تقارير الرسائل والاتصالات" بجدول الصلاحيات. */
.hub-reports { margin-top: var(--s6); }
.rep-head { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.rep-head h3 { font-size: var(--t-md); font-weight: 700; }
/* شرائح الفترة بحاشية الترويسة، وما تنزل سطر إلا بالشاشة الضيقة */
.rep-head .chips { padding-bottom: 0; flex: 0 1 auto; }
.rep-grid { display: grid; gap: var(--s3); }
.rep-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s4); box-shadow: var(--sh-1);
}
.rep-title { display: flex; align-items: center; gap: var(--s2);
             font-size: var(--t-sm); font-weight: 700; color: var(--text-soft);
             margin-bottom: var(--s3); }
.rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
/* أربع بطاقات: عمودان بالتلفون حتى الرقم يبقى كبير ومقروء. */
.rep-tiles.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .rep-tiles.four { grid-template-columns: repeat(4, 1fr); } }
.rep-when { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.rep-tile {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; min-width: 0;
}
.rep-tile b { display: block; font-size: 21px; font-weight: 700; line-height: 1.2;
              font-variant-numeric: tabular-nums; direction: ltr; }
.rep-tile span { display: block; font-size: var(--t-xs); color: var(--text-soft); }
.rep-tile small { display: block; font-size: 12px; color: var(--text-soft);
                  margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.rep-tile.warn { background: rgba(217,45,32,.08); }
.rep-tile.warn b { color: var(--danger); }
.rep-tile.ok { background: rgba(18,135,79,.09); }
.rep-tile.ok b { color: var(--ok); }

.rep-chart { margin-top: var(--s3); }
/* الارتفاع ثابت والعرض ممطوط: viewBox بلا نسبة محفوظة يعطي أعمدة متساوية
   بأي عرض شاشة بلا حساب بالجافاسكربت. */
.rep-chart svg { display: block; width: 100%; height: 72px; }
.rep-axis { display: flex; justify-content: space-between; font-size: 12px;
            color: var(--text-soft); margin-top: 4px; }
.rep-legend { display: flex; gap: var(--s3); margin-top: 6px; font-size: 12px;
              color: var(--text-soft); }
.rep-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rep-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

@media (min-width: 720px) {
  .rep-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── محادثات العملاء ───────────────────────────────── */
.chat-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 10px;
}
.chat-search i { color: var(--text-soft); flex: none; display: flex; }
.chat-search input {
  border: none; background: none; padding: 0; width: 100%; font-size: var(--t-sm);
}
.chat-search input:focus { outline: none; box-shadow: none; }

.chat-list { display: flex; flex-direction: column; }
.chat-row {
  display: flex; gap: 11px; align-items: flex-start; width: 100%;
  text-align: start; font: inherit; color: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 11px 4px;
}
.chat-row:hover, .chat-row.on { background: var(--surface-2); }
.chat-av {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  color: var(--white); display: grid; place-items: center;
  font-weight: 700; font-size: 17px;
}
.chat-main { flex: 1; min-width: 0; }
.chat-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-top b { font-size: 14.5px; }
.chat-top time { font-size: var(--t-xs); color: var(--text-soft); flex: none; }
.chat-prev {
  display: block; font-size: 13px; color: var(--text-soft); margin: 1px 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.chat-pill {
  font-size: 12px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
}
.chat-row:hover .chat-pill, .chat-row.on .chat-pill { background: var(--surface); }
.chat-pill.ref  { background: rgba(36,87,245,.16); color: var(--brand-ink); }
.chat-pill.warn { background: rgba(217,45,32,.10); color: var(--danger); }
/* زبون كاتب من داخل تطبيق الحجوزات — بلون العلامة لا بلون قنوات ميتا. */
.chat-pill.app  { background: rgba(11,63,110,.10); color: var(--brand-deep); }
.chat-unread {
  margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--badge-fill); color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* On a phone the thread takes the whole screen, exactly as WhatsApp does. */
.chat-thread {
  position: fixed; inset: 0; z-index: 40;
  background: var(--surface); display: flex; flex-direction: column;
}
.chat-head {
  display: flex; align-items: center; gap: 9px;
  padding: calc(10px + var(--safe-top)) 12px 10px;
  border-bottom: 1px solid var(--border);
}
.chat-id { flex: 1; min-width: 0; }
.chat-id strong { display: block; font-size: var(--t-md); }
.chat-id small {
  display: block; font-size: 12px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-win {
  font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; flex: none; white-space: nowrap;
}
.chat-win.ok   { background: rgba(18,135,79,.12); color: var(--ok-ink); }
.chat-win.soon { background: rgba(36,87,245,.18); color: var(--brand-ink); }
.chat-win.shut { background: rgba(217,45,32,.10); color: var(--danger); }

.chat-msgs {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface-2);
}
.chat-b {
  max-width: 82%; padding: 8px 11px; border-radius: 13px;
  font-size: 14px; line-height: 1.6;
}
.chat-b.in  { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.chat-b.out { align-self: flex-end; background: #E9EFFF; border: 1px solid rgba(36,87,245,.45); }
.chat-b.bad { background: rgba(217,45,32,.08); border-color: rgba(217,45,32,.35); }
/* Who answered stays on the message itself, not only in the log. */
.chat-who { display: block; font-size: 12px; font-weight: 700;
            color: var(--brand-ink); margin-bottom: 1px; }
.chat-b.bad .chat-who { color: var(--danger); }
.chat-txt { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { display: block; font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.chat-b.bad .chat-meta { color: var(--danger); }
.chat-tick.read { color: var(--tick-read); }
.chat-file { display: inline-flex; align-items: center; gap: 6px;
             color: var(--brand-ink); text-decoration: none; }
.chat-img { display: block; max-width: 100%; max-height: 46dvh;
            border-radius: 9px; cursor: zoom-in; }
.chat-audio { display: block; width: 232px; max-width: 100%; height: 40px; }
.chat-gone { display: block; font-size: 12px; color: var(--text-soft);
             font-style: italic; }
.chat-b .chat-img + .chat-txt,
.chat-b .chat-audio + .chat-txt { margin-top: 6px; }

/* On a wide screen the list and the thread belong side by side. Without this
   the thread stayed `position: fixed` at every width, so the desktop layout
   was a phone screen stretched across a monitor. */
@media (min-width: 1024px) {
  .page[data-page="chat"] { height: calc(100dvh - 128px); }

  .chat-pane {
    display: grid; grid-template-columns: 330px minmax(0, 1fr);
    height: 100%; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }

  .chat-side {
    display: flex; flex-direction: column; min-height: 0;
    padding: 12px; border-inline-end: 1px solid var(--border);
  }
  .chat-side .page-head { margin-bottom: 10px; }
  .chat-list { flex: 1; overflow-y: auto; margin: 0 -12px; padding: 0 12px; }

  /* Second column instead of an overlay. */
  .chat-thread { position: static; inset: auto; z-index: auto; min-height: 0; }
  .chat-head { padding: 12px 14px; }
  #chat-back { display: none; }

  /* An empty right-hand pane looks broken; say what to do with it. */
  .chat-pane:not(.open)::after {
    content: "اختر محادثة من القائمة";
    display: grid; place-items: center;
    color: var(--text-soft); font-size: var(--t-sm);
    background: var(--surface-2);
  }
}

.chat-composer {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--border);
}
/* A textarea, not an input: browsers strip newlines out of an input's value,
   which quietly flattened the ready-made visa answer into one long line. */
.chat-composer textarea {
  flex: 1; border-radius: 18px; padding: 10px 15px;
  resize: none; max-height: 40dvh; line-height: 1.5; font-size: 14px;
  /* الارتفاع يديره JS مع كل حرف؛ هنا نضمن إن التمرير يظهر عند السقف
     بدل ما ينقص النص، وإن الأزرار تبقى بالأسفل لما يطول الشريط. */
  overflow-y: auto;
}
.chat-composer { align-items: flex-end; }
.chat-composer.shut textarea { opacity: .6; }
.chat-rec {
  display: flex; align-items: center; gap: 8px; flex: 1;
  background: rgba(217,45,32,.08); border-radius: 999px; padding: 4px 12px;
}
.chat-rec b { font-variant-numeric: tabular-nums; color: var(--danger); }
.chat-recdot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--danger);
  animation: recpulse 1s infinite;
}
@keyframes recpulse { 50% { opacity: .25; } }
.chat-pill.agent { background: rgba(18,135,79,.12); color: var(--ok); }
.chat-pill.ok   { background: rgba(18,135,79,.12); color: var(--ok); }
.chat-pill.mute { background: var(--surface-2); color: var(--text-soft); }
/* رقم مستورد ما راسلنا بعد. مفرّغ ومقطّع الحد قصداً: كل الشارات الثانية
   مملوءة لأنها تخص محادثة صارت فعلاً، وهذي ما صارت بعد. */
.chat-pill.contact {
  background: transparent; color: var(--text-soft);
  border: 1px dashed var(--border); padding: 1px 6px;
}

/* المكتومة تنطفي بالقائمة: موجودة إذا دورت عليها، وما تشد النظر. */
.chat-row.muted .chat-main { opacity: .6; }

/* «عرض المزيد» بذيل القائمة — القائمة تجي مئة بمئة. */
.chat-more {
  display: block; width: calc(100% - 24px); margin: 10px 12px 16px;
  padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-soft); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chat-more:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.chat-more:disabled { opacity: .6; cursor: default; }

/* ── حالة المحادثة ─────────────────────────────────── */
/* الزر يحمل لون حالته، فالموظف يعرف وين المحادثة بنظرة بلا ما يقرا. */
.chat-state {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); color: var(--text-soft);
  transition: filter .15s;
}
.chat-state:hover { filter: brightness(.96); }
.chat-state i { display: flex; transform: rotate(-90deg); opacity: .65; }
.chat-state.st-unread  { background: rgba(217,45,32,.10);  color: var(--danger); }
.chat-state.st-waiting { background: rgba(36,87,245,.16);  color: var(--brand-ink); }
.chat-state.st-done    { background: rgba(18,135,79,.12);  color: var(--ok); }
.chat-state.st-muted   { background: var(--surface-2);     color: var(--text-soft); }
.chat-state.st-contact { background: var(--surface-2);    color: var(--text-soft);
                        border-color: var(--border); }

.state-list { display: grid; gap: 8px; margin-top: 4px; }
.state-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: #fff; text-align: start;
}
.state-opt.on { border-color: var(--brand); background: rgba(36,87,245,.07); }
.state-opt:hover { background: var(--surface-2); }
.state-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.state-txt b { font-size: 14px; }
.state-txt small { font-size: 12px; color: var(--text-soft); }
.state-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.state-dot.st-unread  { background: var(--danger); }
.state-dot.st-waiting { background: var(--brand); }
.state-dot.st-done    { background: var(--ok); }
.state-dot.st-muted   { background: #B9B9BF; }
.state-dot.st-contact { background: var(--grey); }

/* ── المكالمة ─────────────────────────────────────── */
.callbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,18,16,.55);
  display: grid; place-items: center; padding: 20px;
}
.callbox-card {
  background: var(--surface); border-radius: 22px; padding: 30px 26px 24px;
  width: 100%; max-width: 330px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.call-av {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
  color: var(--white); display: grid; place-items: center;
  animation: callpulse 1.4s infinite;
}
@keyframes callpulse { 50% { transform: scale(1.06); } }
.callbox-card strong { font-size: 18px; display: block; direction: ltr; }
/* A phone number reads left-to-right even inside an Arabic page. Without
   isolating it the '+' counts as a neutral character and the browser reorders
   the digit groups around it: +964 773 334 3639 appeared as 3639 334 773 964+ */
bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.call-num {
  direction: ltr; unicode-bidi: isolate;
  font-size: 14px; color: var(--text-soft);
  margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.call-num:empty { display: none; }
.call-state {
  font-size: 13.5px; color: var(--text-soft); margin: 8px 0 22px;
  font-variant-numeric: tabular-nums;
}
/* رد ورفض: دائرتان كبيرتان، الاسم تحت الدائرة مو داخلها -- الإصبع يلگى
   هدفاً واسعاً والعين تلگى الكلمة. */
.call-answer { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.call-round {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--text); display: flex; flex-direction: column;
  align-items: center; gap: 9px;
}
.call-round-ic {
  width: 64px; height: 64px; border-radius: 50%; color: var(--white);
  display: grid; place-items: center;
  transition: transform .12s ease, filter .12s ease;
}
.call-round.yes .call-round-ic { background: var(--ok); }
.call-round.no  .call-round-ic { background: var(--danger); }
.call-round small { font-size: 13px; }
.call-round:hover .call-round-ic { filter: brightness(1.07); }
.call-round:active .call-round-ic { transform: scale(.93); }

/* أدوات مكالمة قائمة: أربع دوائر بسطر واحد. */
.call-tools {
  display: flex; justify-content: center; gap: 8px;
  margin: 20px 0 16px;
}
.call-tool {
  flex: 1 1 0; min-width: 0;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--text); display: flex; flex-direction: column;
  align-items: center; gap: 7px;
}
.call-tool-ic {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: transform .12s ease, background .12s ease;
}
/* سطران محجوزان لكل اسم: «مكبر الصوت» ينزل بسطرين وغيره بسطر، وبلا حجز
   يطلع الزر الأحمر تحت مستوى مختلف حسب أي أداة معروضة. */
.call-tool small {
  font-size: 11.5px; color: var(--text-soft);
  line-height: 1.25; min-height: 2.5em;
}
.call-tool:hover:not([disabled]) .call-tool-ic { background: var(--border); }
.call-tool:active:not([disabled]) .call-tool-ic { transform: scale(.93); }
/* مفعّل: مكتوم أو مكبّر شغّال -- الحالة تنقرا بلمحة. */
.call-tool[data-on="1"] .call-tool-ic {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.call-tool[data-on="1"] small { color: var(--text); font-weight: 600; }
/* مطفأ: الجهاز ما عنده مخرج صوت ثانٍ، أو المكالمة بلا محادثة مربوطة.
   يبقى معروض -- زر ناقص يربك أكثر من زر واضح إنه مو متاح هنا. */
.call-tool[disabled] { cursor: default; opacity: .38; }

.call-end {
  width: 100%; padding: 15px; border: 0; border-radius: var(--radius-sm);
  background: var(--danger); color: var(--white); font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.call-end:hover { filter: brightness(1.07); }
.call-end:active { transform: scale(.985); }

/* المكالمة المطويّة: شريط صغير يبقى فوق أي شاشة، الضغط عليه يرجّع
   البطاقة. بدونه «تجاهل» يعني مكالمة شغالة بلا أي طريقة توصلها. */
.callmini {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 91;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 14px;
  background: var(--ok); color: var(--white); cursor: pointer;
  border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.25);
  animation: callmini-in .18s ease;
}
@keyframes callmini-in { from { transform: translateY(12px); opacity: 0; } }
@media (min-width: 720px) { .callmini { inset-inline: auto 18px; width: 320px; } }
.callmini-ic { display: grid; place-items: center; opacity: .9; }
.callmini-who {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.callmini-t {
  font-size: 13px; font-variant-numeric: tabular-nums; opacity: .9;
  direction: ltr;
}
.callmini-end, .callmini-yes {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  color: var(--white); cursor: pointer; display: grid; place-items: center;
}
.callmini-end { background: var(--danger); }
.callmini-yes { background: var(--ok); }
/* الشريط وهو يرن: خلفية محايدة حتى الأخضر يبقى للزر اللي يرد. */
.callmini.ringing { background: var(--ink); }
.callmini.ringing .callmini-yes { background: var(--ok); }

/* تجاهل وهي ترن — تحت زري الرد والرفض، وبوزن أخف منهما: هو مخرج
   ثالث مو خياراً بمستواهما. */
.call-ignore {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 16px; padding: 9px;
  background: none; border: 0; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.call-ignore:hover { color: var(--text); }

/* ── سجل المكالمات ────────────────────────────────── */
.call-row {
  display: flex; gap: 11px; align-items: flex-start; width: 100%;
  text-align: start; font: inherit; color: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 12px 4px;
}
.call-row:hover { background: var(--surface-2); }
.call-icon {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(18,135,79,.12); color: var(--ok);
}
.call-row.missed .call-icon { background: rgba(217,45,32,.10); color: var(--danger); }
.call-main { flex: 1; min-width: 0; }
.call-sub {
  display: block; font-size: 12.5px; color: var(--text-soft); margin: 2px 0 5px;
}
.call-row.missed .call-sub { color: var(--danger); }
#calls-stats .stat strong.ok  { color: var(--ok); }
#calls-stats .stat strong.bad { color: var(--danger); }
/* ── كروبات الصلاحيات ─────────────────────────────── */
.group-card { align-items: flex-start; }
.group-card .main small { display: block; color: var(--text-soft);
                          font-size: 12.5px; margin: 2px 0 6px; }
.group-actions { display: flex; gap: 6px; flex: none; }
.group-actions .btn { padding: 7px 13px; font-size: 13px; }
.perm-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2);
}
/* عنوان الوحدة صار صفاً كامل: الاسم يسار والزر يمين، وكله قابل للنقر. */
.perm-head {
  font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; margin: 0;
}
.perm-block.off { background: transparent; }
.perm-block.off .perm-head { color: var(--text-soft); font-weight: 600; }
.perm-body { margin-top: 10px; }
.perm-block .field { margin-bottom: 10px; }
.perm-block .switch-row { border-top: 1px solid var(--border); }

/* زر تشغيل/إطفاء بدل مربع الاختيار: الوحدة تنفتح وتنسكّر منه. */
.perm-switch {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 44px; height: 26px; border-radius: 999px;
  background: #D2D2D6; border: 0; cursor: pointer; position: relative;
  transition: background .18s;
}
/* المقبض يتحرك بالمنطقي مو بـ translateX: الصفحة عربية والاتجاه معكوس،
   فـ inset-inline يمشي صح بالاثنين بلا حساب إشارة. */
.perm-switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: inset-inline-start .18s;
}
.perm-switch:checked { background: var(--brand); }
.perm-switch:checked::after { inset-inline-start: 21px; }
.perm-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn.wide { width: 100%; margin-top: 8px; }

.chat-callbtn { color: var(--ok); }
.chat-callbtn:hover { background: rgba(18,135,79,.12); color: var(--ok); }

.canned-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.canned-card {
  display: flex; align-items: center; gap: 9px; font: inherit; color: inherit;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; cursor: pointer; text-align: start;
}
.canned-card:hover { border-color: var(--brand); }
.canned-card b { font-size: 13.5px; }
.canned-flag { font-size: 22px; flex: none; }

/* قائمة تأشيرات الدولة الوحدة: العنوان يقول شنو التأشيرة، والسطر الرمادي
   يقول بأي سرعة وبأي سعر — الموظف يميّز صف الطفل من صف البالغ بنظرة. */
.canned-rows { display: grid; gap: 8px; margin-top: 10px; }
.canned-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; font: inherit; color: inherit; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; cursor: pointer; text-align: start;
}
.canned-row:hover { border-color: var(--brand); }
.canned-row b { font-size: 13.5px; }
.canned-detail { color: var(--text-soft); font-size: 12.5px; flex: none; }

/* معاينة المرفق قبل إرساله */
.send-prev {
  display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; margin-bottom: 10px;
}
/* السقف بوحدات الشاشة: صورة طويلة بهاتف قصير تدفع زر الإرسال تحت الطية،
   والموظف يستنتج إنه ماكو زر أصلاً. */
.send-shot {
  max-width: 100%; max-height: 42dvh; border-radius: 10px; display: block;
}
.send-doc { padding: 26px; color: var(--text-soft); }
.send-meta {
  text-align: center; margin: 0 0 12px; word-break: break-all;
  font-size: 12.5px; color: var(--text-soft);
}
.send-caption {
  width: 100%; font: inherit; resize: none; padding: 11px 13px;
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.send-caption:focus { outline: none; border-color: var(--brand); }
.send-actions { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.send-actions .btn { flex: 1; min-width: 0; }
/* الإرسال هو الفعل غير القابل للتراجع، فالإلغاء ما ياخذ نفس الحجم. */
.send-actions .btn-ghost { flex: 0 0 34%; }
/* منو ياخذ الملف — أول سطر تقراه بالشيت، فوق الصورة نفسها. */
.send-to {
  margin: 0 0 10px; font-size: 13.5px; color: var(--text-soft);
  overflow-wrap: anywhere;
}
.send-to b { color: var(--text); font-size: 15px; }
.chat-sendbtn {
  width: 42px; height: 42px; flex: none; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: var(--white); display: grid; place-items: center; cursor: pointer;
}
.chat-sendbtn:disabled { opacity: .5; cursor: not-allowed; }
.chat-nums { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

@media (min-width: 1024px) {
  .chat-pane { display: flex; gap: 18px; align-items: flex-start; }

  /* `flex: 0 0 310px` وحدها ما تكفي: عنصر الفليكس افتراضياً
     `min-width: auto`، يعني ما ينضغط تحت العرض الأدنى لمحتواه.
     صف شرائح الفلاتر جوّه القائمة عرضه الأدنى ~846px، فالقائمة
     كانت تاخذ 871px بدل 310 وتسحق لوحة المحادثة إلى 290px —
     مقاسة على الموقع الحي. `min-width: 0` تخلّي الأساس المكتوب
     ينحترم.

     والارتفاع: `.chat-list` فوق عندها `flex: 1; overflow-y: auto`
     يعني القائمة مصمّمة تمرّر بنفسها — بس ما اشتغل لأن `.chat-side`
     بلا ارتفاع، فتمدّدت 9288px جوّه أب `overflow: hidden` وانقصّت
     المحادثات تحت الطيّة بلا أي وصول. سقف الارتفاع وحده يكفي:
     الترويسة والبحث ياخذون حجمهم، والباقي يروح للقائمة اللي
     تمرّر. بلا `overflow-y` هنا — تسوّي شريط تمرير مزدوج. */
  .chat-side {
    flex: 0 0 310px;
    min-width: 0;
    height: 74dvh;
  }

  .chat-thread {
    position: static; flex: 1; min-width: 0; height: 74dvh;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }
  .chat-head { padding: 10px 14px; }
}

/* ── بطاقات حالة القنوات ─────────────────────────────────

   أربع قنوات بصندوق وارد واحد، وكل وحدة تنكسر لحالها ولأسباب
   مختلفة تماماً. البطاقة تگول ثلاث أشياء بترتيب واحد: القناة،
   وين واقفة، وشنو الخطوة — والنقطة تلوّن، بس ما تحمل المعنى
   لوحدها: الكلمة (شغالة/ناقصة/واقفة/مطفية) مكتوبة جنبها. */
.chan-list { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.chan {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.chan-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 7px;
  flex: 0 0 auto; background: var(--grey);
}
.chan-ok   .chan-dot { background: var(--ok); }
.chan-warn .chan-dot { background: var(--brand-deep); }
.chan-down .chan-dot { background: var(--danger); }
.chan-word { font-size: var(--t-xs); color: var(--text-soft); }
.chan-ok   .chan-word { color: var(--ok-ink); }
.chan-down .chan-word { color: var(--danger-ink); }
/* نص الخطأ يجي من ميتا بالإنجليزي وسط سطر عربي، فالفقرة RTL تدحر
   "(#3)" لآخر السطر ويقرأ غلط. `plaintext` تخلي كل سطر ياخذ اتجاهه من
   أول حرف قوي بيه — العربي يبقى RTL والخطأ الإنجليزي ينقرأ مثل ما كتبته
   ميتا، وهذا مهم لأن الموظف ينسخ النص هذا ويرسله للمطوّر. */
.chan-detail {
  font-size: var(--t-sm); color: var(--text); margin-top: 2px;
  unicode-bidi: plaintext;
}
.chan-hint {
  font-size: var(--t-xs); color: var(--text-soft); margin-top: var(--s1);
  line-height: 1.5; unicode-bidi: plaintext;
}
/* شريط «رد من فيسبوك» — يظهر فوق مربع الكتابة لمّا تكون القناة مقفولة
   عند ميتا. مقصود يكون واضحاً ومو مخيفاً: عند الموظف طريق يشتغل، بس
   مو من هنا. */
.fbwarn {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0 var(--s3) var(--s2); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.fbwarn span {
  flex: 1 1 190px; font-size: var(--t-sm);
  color: var(--text-soft); line-height: 1.5;
}
.fbwarn .btn { flex: 0 0 auto; }

/* بطاقة الربط بشاشة الإعدادات: جملة تشرح، زر عريض واحد، وحالة تحته. */
.meta-box .btn { width: 100%; margin: var(--s3) 0 var(--s2); }
.meta-box .chan-list { margin-top: var(--s3); gap: var(--s1); }
.meta-box .chan { padding: var(--s2) var(--s3); }

/* ── كتالوج المزوّدين — قسم «حالة الربط» ─────────────────

   أول نسخة كانت بطاقة نص خالص: نقطة ملوّنة وخمسة أسطر بنفس
   الوزن. النتيجة تنقرأ مثل سجل أخطاء لا مثل كتالوج، والتسعة
   تنمسح بالعين بلا ما تنميّز وحدة عن وحدة. ثلاث تغييرات صلّحتها:

     ١. **علامة القناة الملوّنة** — العين تعرف واتساب من الأخضر
        قبل ما تقرأ الاسم. بدونها ما بقى فرق بصري بين المزوّدين.
     ٢. **التشخيص ينزل وقت الخلل بس** (`.prov-diag` بـJS) — سطران
        من ست عادوا سطرين لبطاقتين لا لتسعة.
     ٣. **مجموعتان بعناوين** بدل شبكة وحدة مسطّحة.

   والمزوّد اللي ما انبنى **ما ينخفت بـopacity**: التعتيم ينزّل
   التباين تحت الحد ويكسر اللي صلّحته جولة التباين. يتميّز بغياب
   شارة الحالة وبسطر «شنو مطلوب» بدلها. */

/* ألوان القنوات ثوابت معروفة، مو ألوان المنتج — يبقون كما هم
   بالوضعين إلا اللي يذوب: تيك توك أسود فينقلب أبيض بالليل،
   وقناتنا تاخذ برتقالي تجوال. */
/* الأخضر المعروف لواتساب/لاين/ويتشات (#25D366 وإخوانه) على بلاطة
   من نفس اللون يعطي 2.6:1 — العلامة تنطفي بالنهار. اللوغو معفي من
   قاعدة التباين رسمياً، بس هنا هو أداة تعريف مو زينة: العين تعرف
   القناة منه قبل الاسم. فنزّلنا الأخضر درجتين لحد ≥4.5:1 — الهوية
   تنعرف والعلامة تنشاف. الأزرق والبنفسجي والوردي عبروا كما هم. */
:root {
  --ch-whatsapp:  #0E7A3C;  --ch-whatsapp-bg:  rgba(37,211,102,.13);
  --ch-facebook:  #0B6BCB;  --ch-facebook-bg:  rgba(0,132,255,.12);
  --ch-instagram: #C13584;  --ch-instagram-bg: rgba(228,64,95,.12);
  --ch-telegram:  #1B87BA;  --ch-telegram-bg:  rgba(34,158,217,.13);
  --ch-viber:     #6A55E0;  --ch-viber-bg:     rgba(115,96,242,.13);
  --ch-line:      #037A35;  --ch-line-bg:      rgba(6,199,85,.13);
  --ch-tiktok:    #16181C;  --ch-tiktok-bg:    rgba(0,0,0,.07);
  --ch-wechat:    #04793C;  --ch-wechat-bg:    rgba(7,193,96,.13);
  --ch-app:       var(--brand-ink); --ch-app-bg: var(--brand-soft);
}
:root[data-theme="dark"] {
  --ch-whatsapp:  #3FE07F;  --ch-whatsapp-bg:  rgba(37,211,102,.16);
  --ch-facebook:  #4DA6FF;  --ch-facebook-bg:  rgba(0,132,255,.18);
  --ch-instagram: #FF6E8E;  --ch-instagram-bg: rgba(228,64,95,.18);
  --ch-telegram:  #4DBBE8;  --ch-telegram-bg:  rgba(34,158,217,.18);
  --ch-viber:     #9C8BFF;  --ch-viber-bg:     rgba(115,96,242,.20);
  --ch-line:      #2FE07C;  --ch-line-bg:      rgba(6,199,85,.16);
  --ch-tiktok:    #F2F4F7;  --ch-tiktok-bg:    rgba(255,255,255,.10);
  --ch-wechat:    #2FDB84;  --ch-wechat-bg:    rgba(7,193,96,.16);
}

.prov-sum {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin: var(--s2) 0 var(--s5);
}
.prov-tally {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--t-xs); color: var(--text-soft);
}
.prov-tally b { font-size: var(--t-sm); color: var(--text); }
.prov-tally .chan-dot { margin-top: 0; }
/* نقاط الحالة — تخدم الشارة والملخّص سوا لأن الاثنين يحملون
   نفس صنف الحالة. */
.prov-ok   .chan-dot { background: var(--ok); }
.prov-warn .chan-dot { background: var(--brand-deep); }
.prov-down .chan-dot { background: var(--danger); }

.prov-sec + .prov-sec { margin-top: var(--s6); }
.prov-sec > h5 {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--border);
}
.prov-sec > h5 span { font-size: var(--t-xs); font-weight: 400; color: var(--text-soft); }

.prov-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.prov {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
/* البطاقة المكسورة تاخذ شريطاً جانبياً بلون حالتها — تنلقط بالمسح
   السريع بلا ما تصير البطاقة كلها ملوّنة وتصيح بوجه الموظف.

   **مربوطة بـ`.prov`** عمداً: صنف الحالة نفسه ينحط على الشارة وعلى
   شرائح الملخّص، وبلا هذا التقييد ينزل الشريط عليهن كلهن ويطلع
   مثل قوس غريب جنب الكلمة. */
.prov.prov-warn { border-inline-start: 3px solid var(--brand-deep); }
.prov.prov-down { border-inline-start: 3px solid var(--danger); }

.prov-head { display: flex; align-items: center; gap: 10px; }
.prov-logo {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text-soft);
}
.prov-logo[data-ch="whatsapp"]  { background: var(--ch-whatsapp-bg);  color: var(--ch-whatsapp); }
.prov-logo[data-ch="facebook"]  { background: var(--ch-facebook-bg);  color: var(--ch-facebook); }
.prov-logo[data-ch="instagram"] { background: var(--ch-instagram-bg); color: var(--ch-instagram); }
.prov-logo[data-ch="telegram"]  { background: var(--ch-telegram-bg);  color: var(--ch-telegram); }
.prov-logo[data-ch="viber"]     { background: var(--ch-viber-bg);     color: var(--ch-viber); }
.prov-logo[data-ch="line"]      { background: var(--ch-line-bg);      color: var(--ch-line); }
.prov-logo[data-ch="tiktok"]    { background: var(--ch-tiktok-bg);    color: var(--ch-tiktok); }
.prov-logo[data-ch="wechat"]    { background: var(--ch-wechat-bg);    color: var(--ch-wechat); }
.prov-logo[data-ch="app"]       { background: var(--ch-app-bg);       color: var(--ch-app); }
.ic-brand { display: block; }

/* min-width:0 حتى ينضغط الاسم بدل ما يدفع الشارة برّا البطاقة */
.prov-id { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prov-id b { font-size: var(--t-md); font-weight: 700; }
.prov-badge {
  font-size: var(--t-xs); font-weight: 700; padding: 1px 7px; white-space: nowrap;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
}

/* الشارة كاملة: نقطة + كلمة. اللون وحده ما ينقل المعنى. */
.prov-pill {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 700; background: var(--surface);
  color: var(--text-soft);
}
.prov-pill .chan-dot { margin-top: 0; width: 7px; height: 7px; }
.prov-pill.prov-ok   { color: var(--ok-ink); }
.prov-pill.prov-warn { color: var(--brand-ink); }
.prov-pill.prov-down { color: var(--danger-ink); }

.prov-about { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.6; }

/* التشخيص: صندوق مستقل حتى ينعرف إنه رسالة عطل مو وصف القناة.
   نص ميتا يجي إنجليزي وسط سطر عربي — plaintext تخلي كل سطر ياخذ
   اتجاهه من أول حرف قوي بيه، وهذا مهم لأن الموظف ينسخه للمطوّر. */
.prov-diag {
  padding: var(--s2) 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border);
}
.prov-detail {
  font-size: var(--t-xs); font-weight: 600; color: var(--text);
  unicode-bidi: plaintext;
}
.prov-hint {
  font-size: var(--t-xs); color: var(--text-soft); line-height: 1.55;
  margin-top: 3px; unicode-bidi: plaintext;
}

/* auto فوق: الأزرار تتحاذى بأسفل كل البطاقات مهما اختلف طول النص */
.prov-foot {
  margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
}
.prov-feed { font-size: var(--t-xs); color: var(--text-soft); }
.prov-feed b { font-size: var(--t-sm); color: var(--text); }
.prov-need { font-size: var(--t-xs); color: var(--text-soft); unicode-bidi: plaintext; }
.prov-foot .btn { margin-inline-start: auto; }

.wa-found { margin: var(--s4) 0; }
.wa-found-row { margin-bottom: var(--s3); }
.wa-pages { flex-wrap: wrap; }
.wa-adv { margin-top: var(--s5); border-top: 1px solid var(--border); }
.wa-adv > summary {
  cursor: pointer; padding: var(--s3) 0; font-weight: 600;
  font-size: var(--t-sm); color: var(--text-soft); min-height: 44px;
  display: flex; align-items: center;
}

/* ── مساحات اللمس ────────────────────────────────────────

   قوقل تفرض 48dp حد أدنى لأي شي ينضغط بالأندرويد، وأبل 44pt.
   الأزرار هنا انبنت لماوس الديسكتوب: ‎.icon-btn‎ 38px،
   ‎.chipbtn‎ ≈37px، ‎.chipbtn.sm‎ ≈34px، ‎.seg‎ ≈39px — كلها
   تحت الحد بالتطبيق المغلّف.

   `pointer: coarse` تفرّق الإصبع عن الماوس: التطبيق والموبايل
   ياخذون 48px، والـPWA على الديسكتوب يبقى مضغوطاً مثل ما هو.
   الحشو ما تغيّر — `min-height` وحدها تكبّر منطقة الضغط، فالشكل
   يبقى نفسه تقريباً والمس يصير مضبوط. */
@media (pointer: coarse) {
  .icon-btn { width: 48px; height: 48px; }

  .chipbtn,
  .chipbtn.sm,
  .seg {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* الشريط السفلي: الحشو يوصله ~55px أصلاً، بس نثبّته صراحة
     حتى لا يقصر إذا تغيّر حجم الخط. */
  .tab { min-height: 48px; }
}

/* ── تقليل الحركة ────────────────────────────────────────
   من يشغّل «تقليل الحركة» بالنظام، الانتقالات تنطفي بدل ما
   تنفّذ — القاعدة الموجودة كانت تغطي جزءاً فقط. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .icon-btn:active { transform: none; }
}

/* ── الوضع الليلي ─────────────────────────────────────────

   نفس باليتة تطبيق iOS بالضبط، فالموظف اللي عنده آيفون وأندرويد
   يشوف نفس الشي.

   العقدة اللي أجّلت الوضع الليلي: البرتقالي المشبّع #FDA404 على
   أسود يقرأ "تحذير" — دلالة لافتات الخطر. الحل فصل الدورين:

   · ‎--brand / --brand-mid / --brand-deep‎ = تعبئة الأزرار، تبقى
     ثابتة بالوضعين لأن النص الأبيض فوكها يحتاج خلفية غامقة.
   · ‎--brand-ink‎ = لهجة النص والأيقونات، تنقلب لبرتقالي فاتح
     ‎#FFBC57‎ (١٠.١:١ على البطاقة) فتقرأ ذهبية دافئة مو إنذاراً.

   ثلاث طبقات أسطح بدل الأسود الصرف، والحدّ يقوى لأن الظل ما
   ينشاف على الغامق. */
:root[data-theme="dark"] {
  --bg:         #0C0E11;
  --surface:    #1A1D23;
  --surface-2:  #262B33;
  --border:     #39404A;

  --text:       #F2F3F5;
  --text-soft:  #A0A6B0;
  --ink:        #F2F3F5;
  --grey:       #6E7581;

  --brand-ink:  #FFBC57;
  --brand-soft: #1B2A55;
  --brand-tint: #23190D;

  --ok:         #3DD68C;
  --danger:     #FF6B5E;
  --ok-ink:     #3DD68C;
  /* بالليل الأحمر فاتح أصلاً على سطح غامق — 5.9:1، فما يحتاج لهجة ثانية. */
  --danger-ink: #FF6B5E;
  --tick-read:  #6FB3F2;
  /* --badge-fill يبقى #C24200 بالوضعين: الأبيض فوكه. */

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}

/* هذي القواعد تستعمل --brand-deep كلون نص فوق --brand-soft.
   الاثنان غامقان بالليل، فالنص ينقلب للهجة الفاتحة. */
:root[data-theme="dark"] .emp-av.in,
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] .chip.brand,
:root[data-theme="dark"] .chat-pill.app { color: var(--brand-ink); }

:root[data-theme="dark"] .perm-chip.on span {
  background: var(--brand-soft); color: var(--brand-ink);
}

/* الصور تنوّر بقوة على خلفية غامقة — تخفيف بسيط يريّح العين. */
:root[data-theme="dark"] img:not([src*=".svg"]),
:root[data-theme="dark"] .chat-img { filter: brightness(.92); }

/* ── ما فات الطبقة الأولى ─────────────────────────────────

   تبديل المتغيّرات وحده ما كفى. عطلان من نفس العائلة، مقيسان
   على الموقع الحي:

   ١) خلفيات فاتحة **مكتوبة صراحة** ما تتبع أي متغيّر، فبقت
      نهارية بينما النص فوكها يجي من متغيّر انقلب فاتح — فاتح
      على فاتح. أسوأها فقاعة الرسالة الصادرة: اسم الموظف كان
      ‎1.52:1‎ والوقت والعلامتان ‎2.23:1‎.

   ٢) لون يحمل نصاً أبيض ما ينفتّح أبداً. فتّحت ‎--danger‎ للنص
      فورثته الشارات كتعبئة، فالأبيض فوكها نزل ‎2.79:1‎. نفس
      درس ‎brandFill‎ بتطبيق iOS: التعبئة تبقى غامقة. */
:root[data-theme="dark"] .chat-b.out {
  background: #3A2C12;
  border-color: rgba(255, 188, 87, .28);
}
:root[data-theme="dark"] .sheet-tabs button,
:root[data-theme="dark"] .perm-chip span,
:root[data-theme="dark"] .state-opt { background: var(--surface); }

:root[data-theme="dark"] .bell-badge,
:root[data-theme="dark"] .hub-badge,
:root[data-theme="dark"] .tab-badge,
:root[data-theme="dark"] .toast.err { background: #D92D20; color: #fff; }
:root[data-theme="dark"] .toast.ok  { background: #12874F; color: #fff; }

/* ── الإعدادات ────────────────────────────────────────── */
.set-group { margin-bottom: 18px; }
.set-group > h4 { margin-bottom: 8px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: 0; }
.set-row b { font-size: var(--t-sm); font-weight: 600; }
.set-row small { display: block; color: var(--text-soft); font-size: var(--t-xs); }
.set-note { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.6; }

/* اختيار المظهر — ثلاثة أزرار متساوية، والمختار يتلوّن بالعلامة.
   الاختيار ما ينحدد باللون وحده: الإطار يثخن كمان. */
.theme-pick { display: flex; gap: 8px; }
.theme-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px; min-height: 48px; cursor: pointer; font: inherit;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface-2); color: var(--text-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-opt b { font-size: 12.5px; font-weight: 600; }
.theme-opt.on {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink);
}

/* ── ترويسة الصفحة ────────────────────────────────────────

   كانت `<h2>` عارية. الترويسة الكاملة تقول ثلاثة أشياء بلمحة:
   أي قسم أنت بيه (الأيقونة)، اسمه (العنوان)، وشنو يسوي (السطر
   تحته). السطر الثالث هو اللي يفرّق بين شاشة مرتبة وشاشة
   مرمية — الموظف الجديد ما يحتاج يسأل. */
.ph {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 18px;
}
.ph-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
}
.ph-text { flex: 1; min-width: 0; }
.ph-text h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.ph-text p {
  margin-top: 2px; font-size: var(--t-sm); color: var(--text-soft);
  line-height: 1.5;
}
.ph-actions { flex: none; display: flex; gap: 8px; align-items: center; }

@media (max-width: 560px) {
  .ph { flex-wrap: wrap; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1; }
}

/* ── الحالة الفارغة ───────────────────────────────────────

   «ماكو محادثات» نص رمادي وحده يترك الموظف واقف: هل الشاشة
   خربانة؟ هل ينتظر؟ هل يسوي شي؟ الحالة الكاملة تجاوب: رمز
   يوضّح السياق، عنوان يقول الحالة، سطر يشرح ليش، وزر يقول
   شنو الخطوة الجاية إذا كان بيده خطوة. */
.es {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 48px 24px; gap: 4px;
}
.es-art {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 12px;
  background: var(--surface-2); color: var(--text-soft);
}
.es b { font-size: var(--t-lg); font-weight: 700; }
.es p {
  font-size: var(--t-sm); color: var(--text-soft);
  line-height: 1.6; max-width: 42ch;
}
.es .btn { margin-top: 14px; min-width: 180px; }

/* ── قسم تنقّل مجمّع ──────────────────────────────────────
   عنوان صغير فوق مجموعة روابط — يقسّم القائمة الطويلة لكتل
   يقدر العقل يمسكها بدل شريط واحد ما إله نهاية. */
.nav-group { margin-top: 18px; }
.nav-group:first-child { margin-top: 0; }
.nav-group > h5 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--text-soft); text-transform: uppercase;
  padding: 0 4px; margin-bottom: 6px;
}

/* ── شاشة الإعدادات ───────────────────────────────────────

   لوحة تنقّل مجمّعة + لوح محتوى، مثل أي إعدادات SaaS ناضجة.
   السبب مو الشكل: الإعدادات تكبر مع الوقت، وورقة وحدة طويلة
   تتحوّل لدرج مكبوس. القسم هنا صندوق مستقل، والزيادة الجاية
   تدخل بمجموعتها بلا ما تزحم اللي قبلها.

   بالموبايل اللوحة تنقلب صفاً أفقياً يتمرّر — نفس التقسيم بلا
   ما ياكل نص العرض. */
.set-shell {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.set-nav { position: sticky; top: 12px; }
.set-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; margin-bottom: 2px; min-height: 40px;
  border: 0; border-radius: var(--radius-sm); background: none;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--text-soft); cursor: pointer; text-align: start;
  transition: background .12s ease, color .12s ease;
}
.set-nav button:hover { background: var(--surface-2); color: var(--text); }
.set-nav button.on { background: var(--brand-soft); color: var(--brand-ink); }
.set-nav button.on [data-icon] { color: inherit; }

.set-pane { min-width: 0; }
.set-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
}
.set-card > h4 {
  font-size: var(--t-md); font-weight: 700; margin-bottom: 2px;
}
.set-card > .set-note:first-of-type { margin-bottom: 14px; }

@media (max-width: 860px) {
  .set-shell { grid-template-columns: 1fr; gap: 14px; }
  .set-nav {
    position: static; display: flex; gap: 6px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav .nav-group { margin: 0; display: contents; }
  .set-nav .nav-group > h5 { display: none; }
  .set-nav button { width: auto; flex: none; white-space: nowrap; margin: 0; }
}


/* ── تسجيل المكالمة (واتساب عبر أستيريسك) ─────────────────────
   حبّة «▶ تسجيل» بصف المكالمة تفتح مشغّلاً تحت السطر — بلا صفحة ثانية.
   الحبّة بلون العلامة لأنها الفعل الوحيد داخل الصف، والمشغّل عنصر
   المتصفح نفسه: يشتغل على الآيفون وبالخلفية بلا كود صوت خاص. */
.chat-pill.rec { background: var(--brand-soft); color: var(--brand-ink); cursor: pointer;
                 font-weight: 700; }
.chat-pill.rec:hover { filter: brightness(.96); }
.call-player { display: flex; align-items: center; gap: var(--s3); padding: 10px 14px;
               margin: -4px 0 8px; background: var(--surface-2); border-radius: var(--radius-sm); }
.call-player audio { flex: 1 1 auto; min-width: 0; height: 36px; }
.call-player-dl { font-size: var(--t-xs); font-weight: 600; color: var(--brand-ink);
                  text-decoration: none; white-space: nowrap; }
.call-player-note { font-size: var(--t-sm); color: var(--text-soft); }
.call-player-note.bad { color: var(--danger-ink); }

/* ═══════════════════════════════════════════════════════════════════
   شاشة «الآن» — إعادة تصميم الموارد البشرية (الموظف) 2026-08-23
   الساعة + حساب اليوم بنفس البطاقة. أصناف مبادأة hn- تجنّباً للتعارض.
   ═══════════════════════════════════════════════════════════════════ */
.hn-now {
  display: grid; grid-template-columns: minmax(0,1fr) 260px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden;
}
.hn-main { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.hn-state { display: flex; align-items: center; gap: var(--s2); }
.hn-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: 0 0 auto; position: relative; }
.hn-pulse.in { background: var(--ok); }
.hn-pulse.in::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--ok); opacity: .35;
  animation: hn-ring 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes hn-ring { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
.hn-state b { font-size: var(--t-md); font-weight: 700; }
.hn-state span { font-size: var(--t-sm); color: var(--text-soft); }
.hn-timer {
  font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.hn-gate { display: flex; flex-direction: column; gap: var(--s2); }
.hn-shift { font-size: var(--t-sm); color: var(--text-soft); }

.hn-cost {
  background: var(--surface-2); border-inline-start: 1px solid var(--border);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4);
}
.hn-cost-h { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em;
             text-transform: uppercase; color: var(--text-soft); }
.hn-cost-net { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.hn-cost-cap { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.7; }
.hn-chain { display: flex; flex-direction: column; gap: var(--s2); }
.hn-row { display: flex; align-items: baseline; justify-content: space-between;
          gap: var(--s2); font-size: var(--t-sm); }
.hn-row span { color: var(--text-soft); }
.hn-row b { font-weight: 700; }
.hn-row.hn-minus b { color: var(--danger-ink); }
.hn-rule { height: 1px; background: var(--border); }

.hn-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden;
}
.hn-ts { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 2px; }
.hn-ts + .hn-ts { border-inline-start: 1px solid var(--border); }
.hn-ts small { font-size: var(--t-xs); color: var(--text-soft); font-weight: 600; }
.hn-ts b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em;
           font-variant-numeric: tabular-nums; }
.hn-ts span { font-size: var(--t-xs); color: var(--text-soft); }

@media (max-width: 560px) {
  .hn-now { grid-template-columns: 1fr; }
  .hn-cost { border-inline-start: none; border-top: 1px solid var(--border); }
  .hn-timer { font-size: 44px; }
  .hn-strip { grid-template-columns: 1fr; }
  .hn-ts + .hn-ts { border-inline-start: none; border-top: 1px solid var(--border); }
}

/* زر البصمة داخل «الآن»: مستطيل بتدرّج الجمرة (#FD5B00 → #C24200) مطابق
   للنموذج المعتمد، بدل الدائرة القديمة. أعلى تخصيصاً من .punch الأساسي. */
.hn-main .punch {
  width: auto; height: auto; margin: 0; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-width: 200px; padding: 15px var(--s6); border-radius: 14px;
  font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-grad-end));
  box-shadow: 0 4px 14px rgba(var(--brand-glow),.25);
}
.hn-main .punch.is-in {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-grad-end));
  box-shadow: 0 4px 14px rgba(var(--brand-glow),.25);
}
.hn-main .punch:active:not(:disabled) { transform: scale(.985); }

/* ═══ «شهري» — العرض الذاتي (إعادة التصميم 2026-08-23)، أصناف hm- ═══ */
.hm-top { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--s3);
          margin-bottom: var(--s4); }
.hm-salary { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3);
             background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); box-shadow: var(--sh-1); }
.hm-net { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3;
          font-variant-numeric: tabular-nums; }
.hm-net small { font-size: var(--t-md); font-weight: 600; color: var(--text-soft); }
.hm-cap { font-size: var(--t-sm); color: var(--text-soft); }
.hm-bar { height: 12px; border-radius: 999px; overflow: hidden; display: flex;
          background: var(--surface-2); border: 1px solid var(--border); }
.hm-bar i { display: block; height: 100%; }
.hm-bar .paid { background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.hm-bar .cut { background: repeating-linear-gradient(-45deg, var(--danger) 0 3px, transparent 3px 7px);
               background-color: rgba(217,45,32,.08); }
.hm-key { display: flex; gap: var(--s5); font-size: var(--t-xs); flex-wrap: wrap;
          color: var(--text-soft); }
.hm-key span { display: inline-flex; align-items: center; gap: 6px; }
.hm-key b { color: var(--text); }
.hm-key .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; display: block; }
.hm-key .sw.paid { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.hm-key .sw.cut { border: 2px solid var(--danger); }
.hm-facts { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2);
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); box-shadow: var(--sh-1); }
.hm-fact { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--s3); font-size: var(--t-sm); }
.hm-fact span { color: var(--text-soft); }
.hm-fact b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-rule { height: 1px; background: var(--border); margin: 2px 0; }
.hm-causes { margin-bottom: var(--s4); }
.hm-causes > h3 { font-size: var(--t-md); font-weight: 700; margin-bottom: 2px; }
.hm-causes > p { font-size: var(--t-sm); color: var(--text-soft); margin-bottom: var(--s3); }
.hm-cause { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden; }
.hm-cause + .hm-cause { margin-top: var(--s2); }
.hm-cause-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5);
              cursor: pointer; list-style: none; transition: background .16s; }
.hm-cause-h::-webkit-details-marker { display: none; }
.hm-cause-h:hover { background: var(--brand-tint); }
.hm-cause-m { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: 0 0 auto;
              display: grid; place-items: center; background: var(--surface-2); color: var(--text-soft); }
.hm-cause-m.bad { background: rgba(217,45,32,.10); color: var(--danger-ink); }
.hm-cause-m.warn { background: var(--brand-soft); color: var(--brand-ink); }
.hm-cause-m.over { background: rgba(18,135,79,.12); color: var(--ok-ink); }
.hm-cause-t { flex: 1 1 auto; min-width: 0; }
.hm-cause-t b { display: block; font-size: var(--t-md); font-weight: 650; }
.hm-cause-t small { font-size: var(--t-sm); color: var(--text-soft); }
.hm-cause-a { font-size: var(--t-md); font-weight: 700; color: var(--danger-ink);
              font-variant-numeric: tabular-nums; direction: ltr; }
.hm-cause-a.plus { color: var(--ok-ink); }
.hm-chev { color: var(--text-soft); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.hm-cause[open] .hm-chev { transform: rotate(-180deg); }
.hm-cause-days { border-top: 1px solid var(--border); }
.hm-cday { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3);
           align-items: center; padding: var(--s3) var(--s5); font-size: var(--t-sm); }
.hm-cday + .hm-cday { border-top: 1px solid var(--border); }
.hm-cday .d { font-weight: 600; }
.hm-cday .t { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.hm-cday .a { font-weight: 700; color: var(--danger-ink); font-variant-numeric: tabular-nums; direction: ltr; }
.hm-cday .a.plus { color: var(--ok-ink); }
@media (max-width: 720px) { .hm-top { grid-template-columns: 1fr; } }


/* ═══ «الإجازات» — الرصيد أولاً، والنوع بطاقات (إعادة التصميم 2026-08-23)، أصناف hl- ═══ */
.hl-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s4); margin-bottom: var(--s5); }
.hl-form { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.hl-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.hl-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.hl-type { font: inherit; text-align: start; cursor: pointer; padding: var(--s3) var(--s4);
           border-radius: var(--radius-sm); background: var(--surface); border: 1.5px solid var(--border);
           color: inherit; display: flex; flex-direction: column; gap: 3px;
           transition: border-color .16s, background .16s; }
.hl-type:hover { border-color: var(--brand); }
.hl-type b { font-size: var(--t-sm); font-weight: 650; }
.hl-type small { font-size: var(--t-xs); color: var(--text-soft); }
.hl-type.on { border-color: var(--brand); background: var(--brand-tint); }
.hl-type.on b { color: var(--brand-ink); }
.hl-over { background: rgba(217,45,32,.09); color: var(--danger-ink); border-radius: var(--radius-sm);
           padding: 10px 13px; font-size: 13.5px; font-weight: 500; line-height: 1.65; }
.hl-balance { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); align-self: start; }
.hl-bal-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.hl-bal-top .lbl { font-size: var(--t-sm); color: var(--text-soft); }
.hl-bal-top b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hl-bal-top b small { font-size: var(--t-sm); font-weight: 600; color: var(--text-soft); }
.hl-meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.hl-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.hl-balance .foot { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.7; }
.hl-rule { height: 1px; background: var(--border); }
@media (max-width: 760px) { .hl-grid { grid-template-columns: 1fr; } .hl-balance { order: -1; } }
@media (max-width: 420px) { .hl-types { grid-template-columns: 1fr; } }

/* ══ الهيكل — إعادة تصميم 2026-08-23: البوابة، التبويبات، لوحة الفريق ══ */
/* لونا الرسوم مثبّتان على المعنى: العنبر «واردة/ردود»، والأزرق «صادرة».
   العنبر هنا أغمق من --brand-mid لأن الشريط شكل مصمت على أبيض ولازم
   يتجاوز ٣:١ (WCAG 1.4.11) -- #FD8002 يعطي 2.54 فقط. */
:root { --viz-a: #E85D04; --viz-b: #1B5FA8; --viz-grid: #EFEFF1; }
:root[data-theme="dark"] { --viz-a: #C97A12; --viz-b: #3F82CC; --viz-grid: #2E343D; }

/* سطر حيّ تحت كل بطاقة وحدة */
.hub-live { display: block; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.hub-live b { font-weight: 600; color: var(--brand-ink); }

/* «يحتاج قرارك» */
.hub-decide { display: flex; align-items: center; gap: var(--s3); padding: var(--s4);
  margin-bottom: var(--s3); background: var(--brand-tint);
  border: 1px solid var(--brand-soft); border-radius: 16px; }
.hub-decide .n { font-size: 28px; font-weight: 800; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; line-height: 1; }
.hub-decide .t { flex: 1; min-width: 0; }
.hub-decide .t b { display: block; font-size: 15px; }
.hub-decide .t small { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.hub-decide .btn { flex: none; padding: 9px 16px; }

/* حالة الدوام بالشريط العلوي — شاشة عريضة فقط */
.tb-punch { display: none; }
@media (min-width: 1024px) {
  .tb-punch { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600; margin-inline-end: 6px;
    background: var(--surface-2); color: var(--text-soft); }
  .tb-punch.in { background: rgba(18,135,79,.1); color: #12874F; }
  .tb-punch i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
}

/* شريط التبويبات المبني من الصلاحيات */
.tabbar-items { display: contents; }
.rail-sec, .rail-foot { display: none; }
.tab { order: var(--rank, 0); }
.tab.ovf { display: none; }
.tab .tab-badge { inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%) translateX(-12px); background: var(--brand-ink); }
[dir="rtl"] .tab .tab-badge { transform: translateX(50%) translateX(12px); }
@media (min-width: 1024px) {
  .tabbar { display: flex; }
  /* الشريط الجانبي صفوف لا أعمدة: الأيقونة والاسم بسطر واحد. القاعدة
     الأساسية لـ .tab تجي بعد @media القديمة بالملف فتغلبها -- فتنعاد هنا. */
  .tab { flex-direction: row; justify-content: flex-start; gap: 11px;
    padding: 10px 13px; border-radius: 11px; font-size: 14px; }
  .tab i { font-size: 19px; }
  .rail-sec { display: block; padding: 14px 14px 4px; font-size: 11px; font-weight: 700;
    color: var(--text-soft); letter-spacing: .02em; }
  .tab { order: 0; }
  .tab.ovf { display: flex; }
  .tab.more { display: none !important; }
  .rail-foot { display: block; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
  .rail-foot .tab { width: 100%; }
  .tab .tab-badge { position: static; transform: none; margin-inline-start: auto; order: 3; }
}
.more-list { display: flex; flex-direction: column; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 13px 4px; width: 100%;
  border: none; border-bottom: 1px solid var(--border); background: none; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: start; }
.more-item i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); color: var(--brand-ink); font-style: normal; }
.more-item span { flex: 1; }
.more-item > svg:last-child { color: var(--text-soft); transform: scaleX(-1); }

/* لوحة الفريق */
.tb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3); }
.tb-head h3 { font-size: var(--t-md); font-weight: 700; }
.tb-head h3 small { display: block; font-size: 12px; color: var(--text-soft); font-weight: 500; margin-top: 2px; }
.tb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.tb-seg button { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.tb-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.tb-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.tb-range input { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); width: 138px; }
.tb-grid { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .tb-grid { grid-template-columns: 1fr 1fr; } }
.tb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: var(--s4); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tb-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tb-card-h b { font-size: 14px; }
.tb-card-h small { font-size: 12px; color: var(--text-soft); }
.tb-body { min-height: 96px; }
.tb-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-hero .n { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.tb-hero .d { font-size: 12.5px; color: var(--text-soft); line-height: 1.6; flex: 1; min-width: 130px; }
.tb-hero .d b { color: var(--text); }
.tb-viz { direction: ltr; width: 100%; height: auto; display: block; }
.tb-spark { width: 150px; flex: 0 0 auto; }
.tb-viz text { font-family: inherit; font-size: 10.5px; fill: var(--text-soft); }
.tb-viz text.v { fill: var(--text); font-weight: 700; }
.tb-viz text.name { fill: var(--text); font-weight: 600; font-size: 11px; }
.tb-viz text.name.me { fill: var(--brand-ink); }
.tb-viz .bar-a { fill: var(--viz-a); }
.tb-viz .bar-b { fill: var(--viz-b); }
.tb-viz .spark { fill: none; stroke: var(--viz-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tb-viz .dot { fill: var(--viz-a); stroke: var(--surface); stroke-width: 2; }
.tb-viz .grid { stroke: var(--viz-grid); stroke-width: 1; }
.tb-legend { display: flex; gap: 12px; font-size: 12px; color: var(--text-soft); }
.tb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.tb-legend i.a { background: var(--viz-a); }
.tb-legend i.b { background: var(--viz-b); }
.tb-mine { font-size: 12px; color: var(--text-soft); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.tb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-soft); margin-top: auto; }
.tb-foot .tbl { border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px; color: var(--text-soft); cursor: pointer; flex: none; }
.tb-foot .tbl.on { background: var(--surface-2); color: var(--text); }
.tb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb-table th, .tb-table td { padding: 6px 8px; text-align: start; border-bottom: 1px solid var(--border); }
.tb-table th { color: var(--text-soft); font-weight: 600; font-size: 11.5px; }
.tb-table td.n { font-variant-numeric: tabular-nums; text-align: end; }
.tb-table-wrap { max-height: 260px; overflow: auto; }
.tb-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s3); padding: 10px 12px;
  border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.tb-note svg { flex: none; margin-top: 3px; }
.tb-empty { font-size: 12.5px; color: var(--text-soft); padding: 18px 0; text-align: center; }

/* رمز التحقق: ستّ خانات مرئية، وحقل شفاف فوقها يمسك الكتابة واللصق */
.otp-wrap { position: relative; margin: 4px 0 12px; }
#form-otp #btn-otp-resend { width: 100%; margin-top: 8px; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; direction: ltr; }
.otp-cell { display: grid; place-items: center; height: 54px; border-radius: 12px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.otp-cell.on { border-color: var(--brand); background: var(--surface); }
.otp-cell.cur { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: none; background: none; font-size: 16px; letter-spacing: 2em; caret-color: transparent; }
.otp-input:focus { outline: none; }

/* ══ خدمة العملاء — إعادة تصميم 2026-08-23: الطابور ══ */
/* القناة نقطة على الصورة الرمزية: الشعار أسرع من كلمة، والصف يتحرّر لثلاث
   معلومات فقط — منو، شنو، وشقد ينتظر. */
.chat-av { position: relative; }
.chat-ch {
  position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--text-soft);
}
.chat-ch.whatsapp  { background: #25D366; }
.chat-ch.facebook  { background: #1877F2; }
.chat-ch.instagram { background: linear-gradient(135deg, #F9CE34, #EE2A7B, #6228D7); }
.chat-ch.app       { background: var(--brand-deep); }
.chat-row:hover .chat-ch, .chat-row.on .chat-ch { border-color: var(--surface-2); }

.chat-win-warn { display: inline-grid; place-items: center; color: var(--danger); }
.chat-side-col { display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px; flex: none; padding-top: 2px; }
.chat-unread { margin-inline-start: 0; }
.chat-wait {
  /* «38د» بصفحة عربية ينقلب إلى «د38» — العزل الاتجاهي يخليه يُقرأ رقماً
     ثم وحدته أينما وقع. */
  direction: ltr; unicode-bidi: isolate;
  min-width: 30px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-soft);
}
.chat-wait.warm { background: rgba(36,87,245,.18); color: var(--brand-ink); }
.chat-wait.hot  { background: rgba(217,45,32,.12); color: var(--danger); }
.chat-pill.who  { display: inline-flex; align-items: center; gap: 4px; }
.chat-pill.mine { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
/* محادثة بيد زميل: أشوفها، بس أعرف إنها مو لي. */
.chat-row.theirs .chat-main { opacity: .72; }

.chat-sec {
  display: flex; align-items: center; gap: 7px; padding: 12px 4px 6px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-ink);
  letter-spacing: .01em;
}
.chat-sec span { min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-soft); font-size: 11px; text-align: center; }
.chat-sec.calm { color: var(--text-soft); padding-top: 18px; }
.chat-sec.calm span { background: var(--surface-2); }

/* شريحة القناة بشعارها ولونها */
.chan-ic { display: inline-grid; place-items: center; margin-inline-end: 5px;
  vertical-align: -2px; }
.chan-ic.whatsapp  { color: #25D366; }
.chan-ic.facebook  { color: #1877F2; }
.chan-ic.instagram { color: #E1306C; }
.chan-ic.app       { color: var(--brand-deep); }
#chat-channels .chipbtn { display: inline-flex; align-items: center; }
/* الفلاتر صف واحد يتمرّر أفقياً ولا يلتف: ثلاثة صفوف من الحبّات كانت تدفع
   الطابور تحت حافة الشاشة، وأول شي لازم يشوفه الوكيل هو الطابور. */
#chat-filters, #chat-channels, #calls-filters, #cust-channels {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
}
#chat-channels { padding-bottom: 10px; }

/* شريحة المسؤول بالرأس */
.chat-who {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-soft); max-width: 150px;
}
.chat-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who.mine   { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
.chat-who.theirs { background: var(--surface-2); color: var(--text); }

.assign-list { display: flex; flex-direction: column; }
.assign-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
  font: inherit; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border); padding: 11px 4px; color: var(--text);
}
.assign-row:hover { background: var(--surface-2); }
.assign-row.on { background: var(--brand-tint); }
.assign-av {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; color: var(--white);
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
}
.assign-av.none { background: var(--surface-2); color: var(--text-soft); }
.assign-main { flex: 1; min-width: 0; }
.assign-main b { display: block; font-size: 14.5px; }
.assign-main small { display: block; font-size: 12px; color: var(--text-soft); }

/* لوحة الردود المتكررة فوق المرسِل */
.chat-quick {
  border-top: 1px solid var(--border); background: var(--surface);
  max-height: 46vh; overflow-y: auto;
}
.quick-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 12px 6px; font-size: 12px; font-weight: 700; color: var(--text-soft);
}
.quick-head small { font-weight: 500; }
.quick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  font: inherit; background: none; border: none; cursor: pointer; color: var(--text);
  padding: 10px 12px;
}
.quick-row.on, .quick-row:hover { background: var(--surface-2); }
.quick-row b { flex: 1; font-size: 14px; font-weight: 600; }
.quick-flag { font-size: 18px; }
.quick-row kbd {
  font: inherit; font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border);
}
.quick-empty { padding: 14px 12px; font-size: 13px; color: var(--text-soft); }
/* رأس المحادثة على الهاتف: الاسم أولاً، والشرائح تُختصر لأيقوناتها.
   ستة عناصر بعرض 375px كانت تدفع الاسم لسطرين ويتراكب مع النافذة. */
.chat-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 719px) {
  /* أهداف اللمس على الهاتف: نفس قاعدة 2026-08-31، والدليل كان فايتها. */
  .mv-ev { min-width: 44px; min-height: 44px; }
  .shift-btn { min-height: 44px; padding-inline: 14px; }
  .wk-clear { min-width: 44px; min-height: 44px; }
  /* على الجوال اسم اليوم ياخذ سطره: أربعة أعمدة بعرض ٣٧٥ تخلّي خانة
     الوقت ١١١px، وخانة `time` بالعربي تعرض «04:00 PM» فتنقصّ الـPM.
     السطران يعطيان كل خانة ١٤٣px وتنقرا كاملة. */
  .wk-row {
    grid-template-columns: 1fr 1fr 44px; gap: 6px 8px;
    padding-bottom: 4px;
  }
  .wk-day {
    grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline;
  }
  .chat-head { gap: 6px; }
  .chat-who { max-width: none; padding: 6px; }
  .chat-who span { display: none; }
  .chat-win { font-size: 11px; padding: 3px 7px; }
  .chat-state { padding: 6px 8px; font-size: 12px; }
}

/* ══ سجل المكالمات — إعادة تصميم 2026-08-23 ══ */
/* الصف صار حاوية فيها زر المحادثة وزر الفعل، فما عاد الصف كله زراً واحداً. */
.call-row { align-items: center; }
.call-row > .call-main {
  flex: 1; min-width: 0; text-align: start; font: inherit; color: inherit;
  background: none; border: none; cursor: pointer; padding: 0;
}
.call-icon.out { background: rgba(27,95,168,.12); color: #1B5FA8; }
.call-icon.miss { background: rgba(217,45,32,.10); color: var(--danger); }
/* فائتة وما عاود أحد الاتصال: خلفية وردية خفيفة — الوحيدة اللي تحتاج فعلاً. */
.call-row.open { background: rgba(217,45,32,.045); }
.call-act {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-grad-end)); color: var(--white);
}
.call-act.ghost { background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border); font-weight: 600; }
.call-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 16px 4px 6px; font-size: 12px; font-weight: 700; color: var(--text);
}
.call-day span { font-weight: 500; font-size: 11.5px; color: var(--text-soft); }
.chat-pill.faint { opacity: .6; }
.call-player-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.call-player .rate { display: inline-flex; gap: 2px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.call-player .rate button {
  font: inherit; font-size: 11px; font-weight: 700; border: none; cursor: pointer;
  background: none; color: var(--text-soft); padding: 3px 8px; border-radius: 999px;
}
.call-player .rate button.on { background: var(--surface-2); color: var(--text); }

/* ══ دليل العملاء ══ */
.cust-count { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.cust-head { display: none; }
.cust-row {
  display: grid; width: 100%; text-align: start; font: inherit; color: inherit;
  cursor: pointer; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 11px 4px;
  grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.cust-row:hover { background: var(--surface-2); }
.cust-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-av {
  position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: var(--white);
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
}
.cust-name { min-width: 0; }
.cust-name b { display: block; font-size: 14.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cust-name small { display: block; font-size: 12px; color: var(--text-soft); cursor: copy; }
.cust-ch { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-soft); }
.cust-ch em { font-style: normal; }
.cust-ops { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--text-soft); }
.cust-ops b { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.cust-when { font-size: 12.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cust-when small { color: var(--text-soft); opacity: .8; margin-inline-end: 5px; }
.cust-reply { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.cust-reply .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.cust-reply .dot.warm { background: var(--brand-mid); }
.cust-reply .dot.hot  { background: var(--danger); }
.cust-reply .none { color: var(--text-soft); font-weight: 500; }
/* على الهاتف: الاسم والقناة وآخر محادثة، والباقي يختفي — الجدول الكامل
   بستة أعمدة على 375px يصير أعمدة بحرف واحد. */
@media (max-width: 719px) {
  .cust-row > .cust-ops, .cust-row > .cust-when:first-of-type { display: none; }
  .cust-ch em { display: none; }
}
@media (min-width: 720px) {
  .cust-head, .cust-row {
    grid-template-columns: minmax(180px, 2.2fr) 120px 120px 110px 120px 110px;
    align-items: center;
  }
  .cust-head {
    display: grid; gap: 12px; padding: 8px 4px; font-size: 11.5px; font-weight: 700;
    color: var(--text-soft); border-bottom: 1px solid var(--border);
  }
  .cust-when small { display: none; }
}

/* ══ شريط المكالمة — إعادة تصميم 2026-08-23 ══
   الرنين شريط فوق الشاشة لا نافذة تغطّيها؛ والمحادثة تبقى شغّالة تحته. */
.callmini {
  inset-inline: 12px; top: calc(10px + var(--safe-top)); bottom: auto;
  border-radius: 14px; padding: 9px 10px 9px 14px;
}
@media (min-width: 720px) { .callmini { inset-inline: auto 18px; width: 380px; } }
.callmini-who { display: flex; flex-direction: column; gap: 1px; }
.callmini-who small { font-size: 11.5px; font-weight: 500; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callmini-yes {
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: 34px;
  padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13.5px;
  font-weight: 700; background: var(--ok); color: var(--white); border: 0; cursor: pointer;
}
.callmini-soft {
  flex: none; height: 34px; padding: 0 12px; border-radius: 999px; border: 0;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.16); color: var(--white);
  display: inline-flex; align-items: center; gap: 5px;
}
.callmini-soft.ic { width: 34px; padding: 0; justify-content: center; }
.callmini-soft[aria-pressed="true"] { background: rgba(255,255,255,.32); }
/* معاينة القالب: فقاعة بشكل ما يصل العميل تماماً */
.tpl-preview { margin: 10px 0 4px; }
.tpl-preview > b { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 6px; }
.tpl-preview > small { display: block; font-size: 11.5px; color: var(--text-soft); margin-top: 6px; }
.tpl-bubble {
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  border-radius: 13px 13px 13px 4px; padding: 10px 12px; font-size: 14px;
  white-space: pre-wrap; line-height: 1.6;
}

/* ══ الإدارة — «يحتاج قرارك» 2026-08-23 ══ */
.aq { margin-bottom: var(--s4); border: 1px solid var(--brand-soft);
  background: var(--brand-tint); border-radius: 16px; overflow: hidden; }
.aq-head { display: flex; align-items: center; gap: var(--s3); padding: 12px 16px; }
.aq-n { font-size: 26px; font-weight: 800; color: var(--brand-ink); line-height: 1;
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
.aq-t b { display: block; font-size: 15px; }
.aq-t small { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.aq-list { background: var(--surface); border-top: 1px solid var(--brand-soft); }
.aq-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); }
.aq-row:last-child { border-bottom: none; }
.aq-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid;
  place-items: center; background: var(--surface-2); color: var(--text-soft); }
.aq-ic.warm { background: rgba(36,87,245,.16); color: var(--brand-ink); }
.aq-ic.hot  { background: rgba(217,45,32,.10); color: var(--danger); }
.aq-ic.cool { background: rgba(27,95,168,.10); color: #1B5FA8; }
.aq-main { flex: 1; min-width: 0; }
.aq-main b { display: block; font-size: 14px; }
.aq-main small { display: block; font-size: 12px; color: var(--text-soft); margin-top: 1px; }
/* سطر الأثر: هو الفرق بين «وافق» وبين «وافق وهو يعرف». */
.aq-impact { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--brand-ink); margin-top: 4px; }
.aq-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.aq-acts .btn { padding: 7px 12px; font-size: 12.5px; }
@media (max-width: 560px) {
  .aq-row { flex-wrap: wrap; }
  .aq-acts { width: 100%; padding-inline-start: 41px; }
}
/* بطاقة الرصيد بورقة الموظف: رقمان يجاوبان «شكد باقي له؟» قبل ما
   ينزل الأدمن للخانة الي يكتب بيها. */
.bal-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 0 0 12px;
}
.bal-cell {
  background: var(--brand-soft); border-radius: 14px; padding: 11px 13px;
}
.bal-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--brand-deep); }
.bal-num {
  display: block; font-size: 24px; font-weight: 800; line-height: 1.25;
  color: var(--brand-ink); font-variant-numeric: tabular-nums;
}
.bal-num small { font-size: 12.5px; font-weight: 700; }
.bal-sub { display: block; font-size: 11.5px; color: var(--text-soft); }

/* ── الموافقات: الفلاتر، وتحذير الصف، ومنو قرّر ──────
   السجل ما يصح يقرا مثل الطلبات المعلّقة: هذاك ينتظر ضغطة، وهذا خبر
   انتهى -- فالثاني أهدأ لوناً وبلا أزرار. */
.appr-chips { margin-bottom: 10px; flex-wrap: wrap; }
.chipbtn .cap {
  font-size: 11.5px; font-weight: 700; margin-inline-start: 5px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-deep);
}
.chipbtn.active .cap { background: rgba(255,255,255,.28); color: var(--white); }
.appr-warn {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
}
.appr-warn svg { flex: none; }
.appr-who { color: var(--text-soft); opacity: .85; }

/* «داخل بس متأخر» حالة ثالثة: لا خضراء ولا حمراء. */
.emp-live.late { color: var(--brand-ink); }
/* صف بلا راتب: باقٍ بالكشف، بس واضح إنه ناقص لا صفر. */
.pay-row.nowage { opacity: .62; }
.pay-row.nowage .pay-bar span { background: var(--text-soft); }

/* ══ السلف: التزام يمشي أشهراً ══ */
.adv-row { padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); margin-bottom: 10px; }
.adv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adv-who { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adv-left { text-align: end; flex: none; }
.adv-left b { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.adv-left small { display: block; font-size: 11.5px; color: var(--text-soft); }
.adv-bar { height: 7px; border-radius: 999px; background: var(--surface-2); margin: 10px 0 8px;
  overflow: hidden; }
.adv-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.adv-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-soft); }
.adv-acts { display: flex; gap: 6px; margin-top: 10px; }
.adv-acts .btn { padding: 6px 11px; font-size: 12.5px; }
.adv-acts .btn.danger { color: var(--danger); }

/* ══ الخزنة — إعادة تصميم 2026-08-23 ══ */
.item.vault-shut { opacity: .55; cursor: default; }
.item.vault-shut .title { color: var(--text-soft); }
.vault-seen { font-size: 11.5px; color: var(--text-soft); opacity: .85; margin-top: 2px; }
/* شريط العشرين ثانية: العين تراه ينزل، فما تُفاجأ باختفاء الكلمة. */
.sec-bar { height: 4px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; margin: 8px 0 4px; }
.sec-bar span { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
/* شريط النافذة المنتهية فوق المرسِل: يشرح، ويعطي الطريق المسموح. */
.chat-shut {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--border);
  background: var(--brand-tint); font-size: 12.5px; color: var(--text-soft);
}
.chat-shut span { flex: 1; min-width: 180px; }
.chat-shut .btn { flex: none; padding: 7px 14px; font-size: 13px; }

/* ══ الصفحة الأولى للإدارة داخل الموارد البشرية ══ */
.ah-hero { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
@media (min-width: 640px) { .ah-hero { grid-template-columns: 1fr 1fr; } }
.ah-now, .ah-money {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4);
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
}
.ah-now b, .ah-money b {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ah-now b { color: var(--ok); }
.ah-money b { color: var(--brand-ink); font-size: 24px; }
.ah-now span, .ah-money span { font-size: 13.5px; font-weight: 600; }
.ah-now small, .ah-money small {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--text-soft); margin-top: 2px;
}
/* الرقم صار زراً: نفس شكل البطاقة بالضبط، ويقول بيده وبتركيزه إنه يُضغط. */
button.ah-now {
  font: inherit; text-align: start; cursor: pointer; width: 100%;
  transition: border-color .15s, transform .1s;
}
button.ah-now:hover { border-color: var(--ok); }
button.ah-now:active { transform: scale(.995); }
button.ah-now:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ومضة تدلّ على الجواب بدل ما يدوّر عليه بالصفحة. */
@keyframes ah-flash {
  0%   { box-shadow: 0 0 0 0 rgba(18,135,79,.45); }
  100% { box-shadow: 0 0 0 14px rgba(18,135,79,0); }
}
.rep-card.flash {
  animation: ah-flash 1.1s ease-out 2;
  border-color: var(--ok);
}
@media (prefers-reduced-motion: reduce) {
  .rep-card.flash { animation: none; }
}

.ah-list { display: flex; flex-direction: column; }
.ah-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); }
.ah-row:last-child { border-bottom: none; }
.ah-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; color: var(--white);
  background: linear-gradient(150deg, var(--brand), var(--brand-deep)); }
.ah-row.stale .ah-av { background: var(--surface-2); color: var(--text-soft); }
.ah-who { flex: 1; min-width: 0; }
.ah-who b { display: block; font-size: 14px; }
.ah-who small { display: block; font-size: 11.5px; color: var(--text-soft); }
.ah-time { text-align: end; flex: none; }
.ah-time em { font-style: normal; font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.ah-time em.bad { color: var(--danger); font-size: 12.5px; }
.ah-time small { display: block; font-size: 11px; color: var(--text-soft); }
/* بصمة المدير فوق تقريره — مختصرة، لأنها ليست سبب فتحه الصفحة. */
.ah-punch { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  margin-bottom: var(--s3); border-radius: 14px; background: var(--surface-2); }
.ah-punch.in { background: rgba(18,135,79,.09); }
.ah-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-soft); flex: none; }
.ah-punch.in .ah-dot { background: var(--ok); }
.ah-punch-text { flex: 1; min-width: 0; }
.ah-punch-text b { display: block; font-size: 14px; }
.ah-punch-text small { display: block; font-size: 11.5px; color: var(--text-soft); }
.ah-punch .btn { flex: none; padding: 8px 14px; font-size: 13px; }

/* فاصل اليوم داخل المحادثة */
.chat-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.chat-day span {
  font-size: 11px; font-weight: 700; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 11px; border-radius: 999px;
}

/* شريط الردود الجاهزة فوق المرسِل */
.chat-quickbar {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 7px 10px; background: var(--surface);
  border-top: 1px solid var(--border);
  transition: max-height .18s ease, opacity .18s ease, padding .18s ease;
  max-height: 52px;
}
.chat-quickbar::-webkit-scrollbar { display: none; }
/* أول ما يبدأ يكتب، الشريط ينسحب ويترك المكان للنص. */
.chat-quickbar.away { max-height: 0; opacity: 0; padding-block: 0; overflow: hidden; }
.qb {
  flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: none; color: var(--text);
}
.qb.warm { background: var(--brand-soft); color: var(--brand-ink); }
.qb:active { transform: scale(.97); }
/* الاسم أولاً برأس المحادثة: الشرائح تنكمش قبل أن ينكمش هو. */
.chat-id { flex: 1 1 auto; min-width: 92px; }
@media (max-width: 719px) {
  .chat-head .chat-win { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .chat-id small { font-size: 11px; }
}

/* ══ الشريط السفلي = بار القسم 2026-08-27 ══
   يختفي بالبوابة (بطاقاتها هي التنقّل)، والمحتوى يمتد مكانه. */
.tabbar[hidden] { display: none; }
body.no-tabbar main { padding-bottom: 24px; }
.tab.back { color: var(--brand-ink); }
/* أسماء الصفحات: حجم أصغر وسطران ممنوعان. */
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 719px) { .tab span { font-size: 11px; } }
@media (max-width: 719px) {
  /* عنوان الصفحة يتكرّر مع التبويب المضيء تحته — سطر ضائع من شاشة تلفون. */
  main .page.active .page-head > h2,
  main .page.active > .ph > .ph-text > h2,
  main .page.active > .ph > .ph-icon { display: none; }
  .page[data-page="hub"] .hub-hello h2 { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   الشاشة العريضة — ترتيب 2026-08-27

   القياس قبل التعديل على 1920px: كل صفحة محبوسة بـ1180px بوسط 1700px،
   وبطاقة المجاميع تفصل بين «الراتب الاسمي» ورقمه **985 بكسل** فراغاً —
   العين تمشي متراً كاملاً حتى تجمع تسمية برقمها. وصفوف الرواتب ستّ
   شبكات صغيرة متجاورة، كل واحدة تحاذي نفسها، فالمقارنة بين موظفين
   مستحيلة رغم إن الأرقام كلها معروضة. وتقرير الإدارة كان ينحشر بعمود
   420px لأن شبكة «الحضور» ذات العمودين تنطبق عليه وهو ما بيه ساعة بصمة.

   العلاج ثلاث قواعد:
   ١ — عرض الصفحة يتبع نوع محتواها (--page-max) لا رقماً واحداً للكل.
   ٢ — السجلات المتكررة تصير جدولاً بأعمدة محاذية: المحاذاة هي أداة
       المقارنة، لا ستّ بطاقات كل واحدة تحاذي نفسها.
   ٣ — أزواج «تسمية ← رقم» تنحبس بعمود مقروء بدل ما تنشد على عرض الصفحة.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ١ — عرض يتبع المحتوى */
  .page { max-width: var(--page-max, 1180px); }
  /* الجداول الكثيفة تتنفّس */
  .page[data-page="admin"] { --page-max: 1440px; }
  /* النماذج والقراءة: سطر يُقرأ بلا ما تلف العين من طرف لطرف */
  .page[data-page="settings"],
  .page[data-page="leave"],
  .page[data-page="inbox"] { --page-max: 940px; }

  /* ٢ — شبكة العمودين بصفحة «الآن» للموظف وحده. تقرير الإدارة كان
     ينحشر بعمود 420px لأنها تنطبق عليه بلا تمييز. */
  body.is-report-home .page.active[data-page="home"] { display: block; }
  body.is-report-home .page[data-page="home"] .stats { margin-top: 12px; }

  /* ٣ — بطاقة المجاميع: عمود مقروء، لا شريط بعرض الصفحة */
  .money-card { max-width: 480px; }
  /* وبطاقة مجاميع الرواتب تقف جنب بقية الكشف بدل ما تسبقه بشريط فارغ */
  #pay-totals { display: grid; grid-template-columns: minmax(320px, 480px) 1fr;
                gap: var(--s4); align-items: start; }
  #pay-totals .money-card { margin-top: 0; }

  /* ── كشف الرواتب جدولاً ──────────────────────────
     نفس البيانات، نفس الصفوف — بأعمدة محاذية. الرقم تحت الرقم يخلي
     المدير يلگط الشاذ بنظرة، وهذا كل الغرض من الكشف. */
  #pay-list { display: block; }
  .pay-head-row {
    display: grid; align-items: center; gap: var(--s3);
    /* أعمدة ثابتة لا 1fr: كل صف شبكة مستقلة، فـ1fr يعطي كل صف عرضاً
       يتبع محتواه — قسناها فاختلفت حواف الأرقام 12px بين صف وصف،
       وهذا يلغي سبب وجود الجدول. */
    grid-template-columns: 40px minmax(180px, 1fr) repeat(5, 118px) 150px;
    padding: 10px 15px 8px; font-size: 11.5px; font-weight: 700;
    color: var(--text-soft); border-bottom: 1px solid var(--border);
  }
  .pay-head-row span:nth-child(n+3) { text-align: end; }
  .pay-head-row span:first-child { text-align: center; }
  /* ثلاث مجموعات تُقرا مثل الحسبة: الأساس (اسمي·فعلي) ← الزائد ←
     الناقص ← النتيجة. المسافة هي اللي تفصل، لا خط عمودي: «الحدّ يحمل
     والظل يهمس» ما تعني حدوداً بين كل عمودين. */
  .pay-head-row span:nth-child(5),
  .pay-row .pay-grid > div:nth-child(3) { margin-inline-start: 10px; }
  .pay-head-row span:nth-child(8),
  .pay-row .pay-head .net { margin-inline-start: 10px; }
  /* الصافي هو النتيجة: يبقى بلون البيت، وأثقل من الأعمدة اللي وصلت له. */
  .pay-head-row span:last-child { color: var(--brand-ink); }
  .pay-row {
    display: grid; align-items: center; gap: var(--s3);
    grid-template-columns: 40px minmax(180px, 1fr) repeat(5, 118px) 150px;
    grid-auto-rows: min-content;
    border: none; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: 11px 15px; background: none;
  }
  .pay-row:hover { background: var(--surface-2); }
  .pay-row .pay-head { display: contents; }
  .pay-row .pay-head .who { display: contents; }
  .pay-row .pay-head .sn { grid-column: 1; grid-row: 1; text-align: center; }
  .pay-row .pay-head .nm { grid-column: 2; grid-row: 1; font-size: 14px; }
  /* الصافي آخر عمود: نهاية الحساب بنهاية السطر. الرقم لازم يطابق عدد
     أعمدة القالب (١ اسم + ٥ أرقام + الصافي = ٧)؛ الرقم ٨ كان يخلق عموداً
     ضمنياً عرضه يتبع محتواه، فتزحف الحواف 12px بين صف وصف. */
  .pay-row .pay-head .net { grid-column: 8; grid-row: 1; text-align: end; font-size: 16px; }
  .pay-row .pay-grid { display: contents; }
  /* مواضع صريحة لا تلقائية: الترتيب التلقائي لا يرجع للخلف، فأول عنصر
     يُوضع بالسطر الثاني (الشريط) كان يدفع الأرقام كلها لسطر ثالث —
     ثلاثة أسطر لكل موظف بدل سطرين، و119px بدل 80. */
  .pay-row .pay-grid > div {
    grid-row: 1;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    text-align: end;
  }
  .pay-row .pay-grid > div:nth-child(1) { grid-column: 3; }
  .pay-row .pay-grid > div:nth-child(2) { grid-column: 4; }
  .pay-row .pay-grid > div:nth-child(3) { grid-column: 5; }
  .pay-row .pay-grid > div:nth-child(4) { grid-column: 6; }
  .pay-row .pay-grid > div:nth-child(5) { grid-column: 7; }
  /* التسميات مرة وحدة بالرأس، لا مع كل صف */
  .pay-row .pay-grid small { display: none; }
  .pay-row .pay-grid b { font-size: 13.5px; }
  /* الشريط النسبي يسكن تحت الاسم: طوله يقارن، ومكانه ما يقطع الأعمدة */
  .pay-row .pay-bar {
    grid-column: 2; grid-row: 2; height: 4px; margin: 4px 0 0;
    max-width: 220px;
  }
  .pay-row .money-meta { grid-column: 3 / -1; grid-row: 2; margin: 0;
    font-size: 11px; text-align: end; }
  .pay-row.nowage .pay-bar span { background: var(--text-soft); }
}

/* الشريط النسبي بالجوال يبقى بعرض البطاقة — الجدول للشاشة العريضة وحدها */
@media (max-width: 1023px) { .pay-head-row { display: none; } }
@media (min-width: 1024px) {
  /* ٤ — القوائم تتبع عرض الصفحة الجديد: عمودان بـ1180 صاروا ثلاثة بـ1440
     بدل صفوف تمتد متراً كاملاً. `auto-fill` يخلي الكثافة تتبع الشاشة
     بدل جدول نقاط توقّف. */
  .page[data-page="admin"] .list,
  .page[data-page="admin"] .daylist {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
  #appr-list { display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  /* السلف بطاقات لا صفوف ممتدة: الالتزام وحدة قائمة بذاتها. */
  #adv-list { display: grid; gap: 10px;
              grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
  #adv-list .adv-row { margin-bottom: 0; }
  /* الملخصات شريط أفقي فوق قائمتها، لا بطاقة بعرض الصفحة. */
  #log-summary .summary, #adv-summary .summary, #emp-summary .summary {
    max-width: 760px;
  }
}

/* ══ العمود الجانبي — تنقّل الشاشة العريضة 2026-08-31 ══
   الشريط السفلي منقول من الجوال كان يعطي الشاشة العريضة أضيق تنقّل ممكن:
   قسم واحد بالمرة، والرجوع للبوابة لتبديله. هنا الأقسام كلها مفتوحة،
   وعنوان القسم يفصلها، والصفحة الحالية وحدها مضيئة. */
@media (min-width: 1024px) {
  body { --sidebar: 248px; }

  .tabbar {
    gap: 2px; padding: 14px 12px 12px;
    overflow-y: auto; scrollbar-width: thin;
  }
  .tabbar::-webkit-scrollbar { width: 6px; }
  .tabbar::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 999px;
  }

  /* عنوان القسم: يفصل بلا خط، ويترك فراغاً فوقه أكثر من تحته. */
  .rail-sec {
    display: block; padding: 18px 14px 6px; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; color: var(--text-soft);
  }
  .tabbar > .rail-sec:first-of-type,
  .tab.back + .rail-sec { padding-top: 14px; }

  .tab {
    position: relative; width: 100%; padding: 9px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; gap: 10px;
    color: var(--text-soft); transition: background .14s ease, color .14s ease;
  }
  .tab i { font-size: 18px; opacity: .9; }
  .tab:hover { background: var(--surface-2); color: var(--text); }
  .tab.active {
    background: var(--brand-tint); color: var(--brand-ink); font-weight: 700;
  }
  .tab.active i { opacity: 1; }
  /* علامة القسم الحالي: شريط عند الحافة الداخلية، لا لون يملأ الصف. */
  .tab.active::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%;
    transform: translateY(-50%); width: 3px; height: 20px;
    border-radius: 0 3px 3px 0; background: var(--brand-deep);
  }
  .tab:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(36,87,245,.35);
  }
  /* «البوابة» مدخل لا قسم: تسبق كل شي وتنفصل بفراغ. */
  .tab.back { color: var(--text); font-weight: 700; }
  .tab.back i { color: var(--brand-deep); }

  .rail-foot {
    display: block; margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .rail-foot .tab { width: 100%; }

  /* شارة العدّ بالعمود تسكن آخر الصف، لا فوق الأيقونة. */
  .tab .tab-badge {
    position: static; transform: none; margin-inline-start: auto; order: 3;
    min-width: 20px; height: 20px; line-height: 20px; font-size: 11px;
  }

  /* رأس الجدول يبقى ظاهراً وأنت تمرّر أربعة عشر موظفاً — أعمدة بلا
     أسماء بعد أول شاشة تلغي فائدة الجدول. */
  .pay-head-row {
    position: sticky; top: 0; z-index: 5;
    background: var(--surface);
  }
}

/* ══ رأس الصفحة على الشاشة العريضة ══
   `space-between` مبني لعرض جوّال؛ على 1144px يدفع زر «إضافة» ألف بكسل
   بعيداً عن العنوان الذي يخصّه، فتقرأ العنوان وتبحث عن فعله. العنوان
   وأفعاله عنقود واحد، والفراغ يبقى بعدهما لا بينهما. */
@media (min-width: 1024px) {
  .page-head, .ph {
    justify-content: flex-start; gap: var(--s4); flex-wrap: wrap;
  }
  .ph-actions, .page-head > .btn { margin-inline-start: 0; }
  /* البحث يبقى يتمدّد: هو الحقل الوحيد الذي يستفيد من العرض. */
  .page-head .searchbox, .emp-bar .searchbox { flex: 1 1 320px; max-width: 520px; }
}

/* ══ صقل الويب 2026-08-31 ══════════════════════════════
   ستّة أشياء قِستُها قبل ما ألمسها، وكلها تخص الويب وحده. */

/* ١ — حلقة تركيز واحدة لكل ما يُنقر.
   كان بالملف كله سبع تعريفات `focus-visible`؛ من يتنقّل بلوحة المفاتيح
   على واجهة إدارية ما يعرف وين هو. الحلقة تظهر للوحة المفاتيح فقط
   (`:focus-visible`)، فالفأرة ما تراها. */
:where(button, a, [role="button"], [tabindex]:not([tabindex="-1"]),
       input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* على السطوح الداكنة والأزرار المملوءة، حلقة بيضاء تُرى فوق العنبر. */
.btn-primary:focus-visible, .chipbtn.active:focus-visible,
.callmini :focus-visible, .tab.active:focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--brand-glow),.35);
}

/* ٣ — أرضية المقاس: لا نص تحت 11px.
   نصوص الرسوم كانت 10.5px — بالعربي أصعب من اللاتيني بنفس المقاس. */
.tb-viz text, .rep-axis, .rep-legend { font-size: 11px; }

/* ٥ — الهيكل العظمي: شكل تقريبي يملأ مكان المحتوى القادم.
   الرمادي يتنفّس بحركة واحدة بطيئة؛ ومن يطلب تقليل الحركة يراه ساكناً. */
.sk-wrap { display: flex; flex-direction: column; gap: var(--s2); }
.sk {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%);
  background-size: 220% 100%;
  animation: sk-sweep 1.4s ease-in-out infinite;
}
.sk-row  { height: 56px; }
.sk-card { height: 96px; }
.sk-line { height: 16px; }
.sk-wrap .sk:nth-child(2) { opacity: .82; }
.sk-wrap .sk:nth-child(3) { opacity: .64; }
.sk-wrap .sk:nth-child(n+4) { opacity: .46; }
@keyframes sk-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: var(--surface-2); }
}

/* ٢ — الحقول لا تنزل تحت 16px: الآيفون يكبّر الصفحة عند التركيز على
   حقل أصغر، فيضيع مكان الموظف بالقائمة. قاعدة وظيفية لا ذوق. */
input, select, textarea,
.searchbox input, .chat-search input, #emp-q, #chat-q, #calls-q, #cust-q {
  font-size: max(16px, 1rem);
}

/* ١ — أهداف اللمس على الهاتف: الحد 44px.
   الموظف يبصم بالشارع بإيد واحدة؛ حبّة بارتفاع 31px تضيّع ضغطات.
   الشاشة العريضة تبقى مضغوطة — الفأرة أدق من الإبهام. */
@media (max-width: 719px) {
  .chipbtn, .chipbtn.sm { min-height: 44px; padding-block: 0;
    display: inline-flex; align-items: center; }
  .seg { min-height: 44px; }
  .btn { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .tb-seg button, .qb, .sec-tab { min-height: 44px; }
  /* الأزرار الصغيرة داخل الصفوف: الهدف يكبر بلا ما يكبر شكلها. */
  .aq-acts .btn, .adv-acts .btn, .call-act { min-height: 44px; }
  /* زر «جدول» بذيل كل رسم — 26px، أصغر هدف بالواجهة كلها. */
  .tb-foot .tbl { min-height: 44px; padding-inline: 14px; }
}
/* ٧ — عنوان الصفحة بالشريط العلوي (الشاشة العريضة وحدها) */
.tb-title { display: none; }
@media (min-width: 1024px) {
  .tb-title {
    display: block; flex: 1 1 auto; min-width: 0;
    font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em;
    padding-inline-start: var(--s4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* والعنوان داخل المحتوى ينشال: تكراره سطر ضائع من أعلى كل صفحة. */
  main .page.active .page-head > h2,
  main .page.active > .ph > .ph-text > h2,
  main .page.active > .ph > .ph-icon { display: none; }
  /* الوصف تحت العنوان يبقى — هو يشرح، لا يكرّر. */
  main .page.active > .ph { align-items: flex-start; }
}

/* ══ شغل الفريق — شريطان لكل موظف 2026-08-31 ══
   الاسم سطر، وتحته المحادثات والاتصالات بنفس المسطرة. */
.tb-agents { display: flex; flex-direction: column; gap: 14px; }
.tb-agent { display: flex; flex-direction: column; gap: 5px; }
.tb-ab-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-ab-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «بلا رد» دَين لا حصيلة، فما ينافس الشريطين على المسطرة — شارة تدقّ
   جنب الاسم. تختفي عند الصفر: شارة تقول «صفر» ضجيج. */
.tb-ab-owed {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  /* قِست الأولى 4.4:1 على 11px — تحت الأرضية بشعرة. الحبر أغمق والتلوين
     أخفّ حتى تعبر 4.5 بالوضعين. */
  background: rgba(217,45,32,.10); color: #A81E14;
}
:root[data-theme="dark"] .tb-ab-owed {
  background: rgba(217,45,32,.20); color: #FF9E95;
}
.tb-agent.me .tb-ab-name { color: var(--brand-ink); }
.tb-ab-line {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 1fr auto auto;
}
.tb-ab-track {
  height: 12px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; display: block;
}
.tb-ab-track i { display: block; height: 100%; border-radius: 999px; }
.tb-ab-track i.bar-a { background: var(--viz-a); }
.tb-ab-track i.bar-b { background: var(--viz-b); }
.tb-ab-val {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 3ch; text-align: end;
}
/* التسمية بحرفها لا باللون وحده — لمن لا يميّز العنبر من الأزرق. */
.tb-ab-key { font-size: 11px; color: var(--text-soft); min-width: 5.5ch; }
/* الصفر لا شريط له: مسطرة فارغة تكفي، والرقم يخفت حتى لا يُقرأ إنجازاً. */
.tb-ab-line.is-zero .tb-ab-val { color: var(--text-soft); font-weight: 600; }
/* سطر المسطرة: مكالمة ليست رداً، فالمقارنة داخل النوع لا عبره. */
.tb-scale { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; margin-top: 6px; }
.tb-legend span { white-space: nowrap; }

/* ══ البوابة على الشاشة العريضة — 2026-09-01 ══

   القياس على 1280px قبل التعديل: شريط «داخل الدوام» وشريط «يحتاج قرارك»
   كل واحد يمتد 1180px، تسميته على طرف وزره على الطرف الآخر — العين تمشي
   ٩٠٠px حتى توصل من الخبر إلى زره. وبطاقات الأقسام ثلاث بارتفاع 127px،
   وأطولها نصّه 93px والأقصر (الخزنة) 46px: أي ٨١px هواء بداخلها، لأن
   شبكة بصف واحد تقيس كل بطاقة على أطول جارة.

   العلاج قاعدتان لا تجميل:
   ١ — الشريطان صفٌّ من عمودين: العرض المقروء يجمع الخبر بزره.
   ٢ — كل بطاقة تحمل سطراً حيّاً ثالثاً (الخزنة كانت بلا سطر) — تساوٍ
       بمحتوىً مفيد لا بحشو، والهواء ينتهي من نفسه. */
/* العتبة 1024 لا أقل: تحتها `main` محبوس بـ640px أصلاً، فالشريط ما
   يمتد حتى يصير فيه فراغ — وعمودان بعرض 296px يكسران سطر «منذ 09:12 ·
   دوامك 09:00 — 17:00» سطرين. الفراغ يبدأ حين تتحرر الصفحة إلى 1180. */
@media (min-width: 1024px) {
  .page.active[data-page="hub"] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4); align-items: start;
  }
  .page[data-page="hub"] > .hub-hello,
  .page[data-page="hub"] > .hub-grid,
  .page[data-page="hub"] > .hub-reports { grid-column: 1 / -1; }
  /* الهوامش القديمة تنضاف على فجوة الشبكة فتصير سلّمتين. */
  .page[data-page="hub"] > .hub-hello,
  .page[data-page="hub"] > .hub-status,
  .page[data-page="hub"] > .hub-decide { margin-bottom: 0; }
  .page[data-page="hub"] > .hub-reports { margin-top: var(--s3); }
  /* شريط وحده بلا جاره ما ينشد بعرض الصفحة. */
  .page[data-page="hub"] > .hub-status,
  .page[data-page="hub"] > .hub-decide { max-width: 620px; }
}
/* اسم القسم هو البطاقة.

   الوصف كان يزاحمه: 15.5px مقابل 13px بلون أفتح بشعرة — فتُقرأ البطاقة
   «بصمتك، سجلك، راتبك وإجازاتك» لا «الموارد البشرية»، والشاشة تصير ثلاثة
   أوصاف بلا عناوين. الاسم الآن 17px/700 بحبر كامل، والوصف 12.5px بحبر
   خافت: عنوان وتحته شرحه، لا سطران يتنازعان.

   وهو <span> لا <b>: عنصر بصنف صريح لا يعتمد على تنسيق المتصفح
   الافتراضي للوسم، ولا يقع تحت قاعدة عامة تخص b بمكان آخر. */
.hub-name { display: block; font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text); line-height: 1.35; }
.hub-card.soon .hub-name { color: var(--text-soft); }
.hub-text small { font-size: 12.5px; }

/* السطر الحيّ صفٌّ مستقل بعرض البطاقة.

   كان محشوراً بعمود النص — 200px، و163px ببطاقة المحادثات لأن الشارة
   تقضم منه — فينكسر سطرين على بطاقتين ويبقى سطراً على الثالثة، فتختلف
   ارتفاعات النص (74 و93 و93) وشبكةُ صفٍّ واحد تقيس الكل على أطولها:
   127px علبة لنصٍّ 46px، أي ٨١px هواء تحت الخزنة. بصفّه الخاص يسع
   264px فيبقى سطراً واحداً بالثلاث، وتتساوى البطاقات بلا حشو.

   والصف محجوز حتى لو فرغ (بطاقة بلا سطر حيّ): علبة بارتفاع جارتها
   أهدأ من ثلاث علب متفاوتة. */
.hub-card { flex-wrap: wrap; align-content: center; }
.hub-card > .hub-live { flex: 0 0 100%; margin-top: 5px;
  /* بمحاذاة العنوان لا الأيقونة: 44px أيقونة + فجوة البطاقة. */
  margin-inline-start: calc(44px + var(--s3)); }
.hub-card > .hub-live:empty { min-height: 1.6em; }   /* بارتفاع سطر حقيقي */