/* ═══════════════════ هوية Babylon (فاتحة) ═══════════════════
   نفس اللغة البصرية لكل منتجات Babylon Core LTD (design/vault-theme): خلفية ليلكية فاتحة،
   بطاقات بيضاء كبيرة مستديرة بظل واحد ناعم طويل، أزرق واحد قوي للإجراء الأساسي، خط
   Readex Pro، أزرار وشرائح دائرية، شريط جانبي أبيض على الحاسوب. كل الألوان رموز هنا؛
   الوضع الليلي اختياري (data-theme="dark") ويعيد تعريف الرموز نفسها فقط.
   أسماء الأصناف والمعرّفات كما هي — التغيير بصري فقط. */
:root {
  --bg: #f5f6fc;
  --bg-2: #f5f6fc;
  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --surface-3: #eef0f8;
  --surface-solid: #ffffff;          /* قوائم منسدلة ونوافذ */
  --field: #f6f7fc;                  /* خلفية الحقول */
  --field-focus: #ffffff;
  --hover: rgba(27, 31, 51, .045);   /* تمرير فوق صف/زر شفاف */
  --ink: #1b1f33;
  --ink-soft: #6f7790;
  --ink-faint: #a3a9bd;
  --line: #e9ebf4;
  --line-soft: #eff1f8;
  --line2: #dde1ee;                  /* حدود الحقول والأزرار الثانوية */
  --brand: #2f6bff;
  --brand2: #4d82ff;
  --brand-dark: #2459e0;             /* نص بلون الهوية فوق الأبيض */
  --brand-grad: linear-gradient(135deg, #4d82ff, #2f6bff);
  --brand-glow: 0 12px 22px -12px rgba(47, 107, 255, .75);
  --on-brand: #ffffff;
  --accent-soft: #eef2ff;
  --focus-ring: rgba(47, 107, 255, .16);
  --gold: #f5a524;
  --gold-bg: #fff4e0;
  --ok: #23893f;
  --ok-bg: #eaf8ee;
  --ok-line: #cdebd6;
  --warn: #a96300;
  --warn-bg: #fff4e0;
  --warn-line: #f6dfae;
  --danger: #d4325c;
  --danger-bg: #fdeef2;
  --danger-line: #f8d3dd;
  --danger-solid: #e5446d;
  --violet: #7547e0;
  --violet-bg: #f3eefe;
  --violet-line: #dccdfb;
  --teal: #0b8c97;
  --teal-bg: #e3f6f8;
  --orange: #c56a00;
  --track-off: #d3d8ea;              /* مفتاح مطفأ */
  --scrim: rgba(36, 24, 80, .42);
  --art: linear-gradient(155deg, #5b8dff 0%, #7a62f0 55%, #a35bea 100%);
  --dark-card: linear-gradient(160deg, #2c2d3d 0%, #14151f 100%);
  --blur: none;
  --radius: 28px;                    /* البطاقات */
  --r: 16px;                         /* الحقول والأزرار */
  --shadow: 0 14px 34px -22px rgba(40, 50, 110, .35);
  --shadow-hover: 0 22px 40px -24px rgba(40, 50, 110, .45);
  --menu-shadow: 0 24px 48px -18px rgba(30, 20, 80, .32);
  --modal-shadow: 0 30px 70px -20px rgba(30, 20, 80, .55);
  --side-w: 248px;
  --font: 'Readex Pro', 'Cairo', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', system-ui, sans-serif;
  --mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* الوضع الليلي (اختياري من «المظهر والصوت» أو زر الشريط): نفس اللغة بقاعدة داكنة */
:root[data-theme="dark"] {
  --bg: #0f1120;
  --bg-2: #0f1120;
  --surface: #181b2e;
  --surface-2: #1f2338;
  --surface-3: #272c46;
  --surface-solid: #1b1f34;
  --field: #1f2338;
  --field-focus: #23284a;
  --hover: rgba(255, 255, 255, .06);
  --ink: #eceffa;
  --ink-soft: #a0a8c2;
  --ink-faint: #6c7391;
  --line: rgba(214, 222, 255, .09);
  --line-soft: rgba(214, 222, 255, .06);
  --line2: rgba(214, 222, 255, .15);
  --brand: #4d82ff;
  --brand2: #6b97ff;
  --brand-dark: #9ab8ff;
  --brand-grad: linear-gradient(135deg, #6b97ff, #3d74ff);
  --brand-glow: 0 12px 22px -12px rgba(47, 107, 255, .6);
  --accent-soft: rgba(77, 130, 255, .16);
  --focus-ring: rgba(77, 130, 255, .3);
  --gold: #f5b143;
  --gold-bg: rgba(245, 165, 36, .14);
  --ok: #5fd07c; --ok-bg: rgba(47, 168, 79, .16); --ok-line: rgba(95, 208, 124, .3);
  --warn: #f5b143; --warn-bg: rgba(245, 165, 36, .14); --warn-line: rgba(245, 177, 67, .32);
  --danger: #ff7b9a; --danger-bg: rgba(229, 68, 109, .16); --danger-line: rgba(255, 123, 154, .32);
  --violet: #b59cff; --violet-bg: rgba(139, 92, 246, .18); --violet-line: rgba(181, 156, 255, .32);
  --teal: #4fd3dd; --teal-bg: rgba(18, 181, 194, .16);
  --orange: #f5b143;
  --track-off: rgba(255, 255, 255, .18);
  --scrim: rgba(0, 0, 0, .6);
  --dark-card: linear-gradient(160deg, #262a45 0%, #10121f 100%);
  --shadow: 0 14px 34px -22px rgba(0, 0, 0, .8);
  --shadow-hover: 0 22px 40px -24px rgba(0, 0, 0, .9);
  --menu-shadow: 0 24px 48px -18px rgba(0, 0, 0, .7);
  --modal-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(47, 107, 255, .18); }
a { color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--track-off); border-radius: 6px; border: 2px solid var(--bg); }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ───────────────────────── الشريط العلوي ─────────────────────────
   حاسوب واسع: يصير شريطاً جانبياً أبيض (انظر «الشريط الجانبي» أدناه).
   حاسوب ضيّق/لوحي: شريط علوي أبيض بتبويبات حبّة. الهاتف: mobile.css. */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.brand { order: 1; }
.btn-install { order: 2; }
.guard-bar { margin-inline-start: auto; flex: none; }
.tabs { order: 2; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.guard-bar { order: 3; }
.brand small { display: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: none; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 15px;
  padding: 5px;
  box-shadow: 0 10px 20px -12px rgba(40, 50, 110, .55);
  flex: none;
}
.brand strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; direction: ltr; }
.brand small { display: block; font-size: 12px; color: var(--ink-soft); }

.tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; border-radius: 999px; }

.tab {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .15s var(--ease-out), color .15s, transform .15s var(--ease-out);
}
.tab:hover { color: var(--ink); background: var(--hover); }
.tab:active { transform: scale(.97); }
.tab.is-active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 6px 16px -10px rgba(40, 50, 110, .45); }
.tab.is-active .tab-ic { color: var(--brand); }

/* ───────────────────────── العروض والبطاقات ───────────────────────── */

main { padding: 28px 0 40px; }
.view { display: none; }
.view.is-active { display: block; animation: rise .34s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.995); } to { opacity: 1; transform: none; } }

.card {
  background: var(--surface);
  border: 1px solid var(--card-line, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin-bottom: 22px;
}
:root[data-theme="dark"] { --card-line: var(--line); }

.card-head h1 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.card-head p { margin: 0 0 22px; color: var(--ink-soft); font-size: 13.5px; }

/* ───────────────────────── الحقول ───────────────────────── */

.form { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .legend { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.req { color: var(--danger); }
.hint { font-size: 12px; color: var(--ink-soft); font-weight: 400; line-height: 1.5; }

/* ملاحظات جاهزة: الحقل يبقى فارغاً افتراضياً، والضغط يملؤه والضغط ثانيةً يفرغه. */
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.preset {
  border: 1px solid var(--line2); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.preset:hover { border-color: var(--brand); color: var(--brand); }
.preset.is-on {
  background: var(--brand); border-color: var(--brand); border-style: solid; color: var(--on-brand);
}

input[type=text], input[type=tel], input[type=date], input[type=search], input[type=password], input[type=number], input[type=url], input[type=email] {
  font: inherit;
  font-size: 14.5px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--field);
  color: var(--ink);
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input:focus {
  outline: none;
  background: var(--field-focus);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* اختيار نوع الضمان */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-box {
  display: block;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.choice-box b { display: block; font-size: 14.5px; font-weight: 700; }
.choice-box small { color: var(--ink-soft); font-size: 12.5px; }
.choice input:checked + .choice-box {
  border-color: var(--brand);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.choice input:focus-visible + .choice-box { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.search-row { display: flex; gap: 10px; }
.search-row input { flex: 1; }

/* ───────────────────────── الأزرار ───────────────────────── */

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  min-height: 42px;
  padding: 9px 20px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none;
  transition: transform .12s var(--ease-out), background .12s, box-shadow .15s var(--ease-out), border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: .06s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--brand-glow); }
.btn-primary:hover:not(:disabled) { background: var(--brand2); border-color: var(--brand2); }
.btn-ghost { background: var(--surface); border-color: var(--line2); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-faint); }
.btn-danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; box-shadow: 0 12px 22px -12px rgba(229, 68, 109, .75); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.06); }
/* تموّج عند الضغط (يضيفه ui.js) */
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.3); transform: scale(0); pointer-events: none; animation: ripple .5s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(3); opacity: 0; } }
.btn-sm { min-height: 34px; padding: 5px 14px; font-size: 12.5px; border-radius: 14px; }

/* ───────────────────────── الرسائل ───────────────────────── */

.msg { font-size: 13.5px; font-weight: 600; }
.msg.ok, .msg.error { animation: msgIn .3s var(--ease-spring); }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }

/* ───────────────────────── بطاقة النجاح ───────────────────────── */

.success-card { border-inline-start: 5px solid var(--ok); }
.success-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--ok); }

.id-box {
  margin: 14px 0;
  padding: 16px;
  border: 1.5px dashed var(--brand);
  border-radius: 24px;
  background: var(--accent-soft);
  text-align: center;
}
.id-box small { display: block; color: var(--brand-dark); font-size: 12.5px; font-weight: 600; }
.id-box code {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-dark);
  margin-top: 4px;
  direction: ltr;
}

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.kv > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; }
.kv dt { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.kv dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }

/* ───────────────────────── نتائج البحث ───────────────────────── */

.results { display: flex; flex-direction: column; gap: 14px; }

.wcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 18px 22px;
}
.wcard.state-active { border-inline-start-color: var(--ok); }
.wcard.state-claimed { border-inline-start-color: var(--danger); }
.wcard.state-expired { border-inline-start-color: var(--warn); }

.wcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.wcard-head h3 { margin: 0; font-size: 17px; }
.wcard-id {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--brand);
  direction: ltr;
  display: inline-block;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.claimed { background: var(--danger-bg); color: var(--danger); }
.badge.expired { background: var(--warn-bg); color: var(--warn); }

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1.5px dashed var(--line2);
  border-radius: var(--radius);
}
.empty b { display: block; color: var(--ink); font-size: 17px; font-weight: 700; margin-bottom: 6px; }

/* ───────────────────────── الإحصاءات ───────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--card-line, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 16px;
  margin: 0;
  --c: var(--brand);
}
/* توهّج لوني خافت في الزاوية كمربّعات Vault */
.stat::before { content: ''; position: absolute; width: 96px; height: 96px; border-radius: 50%; inset-inline-end: -30px; bottom: -34px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); pointer-events: none; }
.stat.is-ok { --c: var(--ok); } .stat.is-danger { --c: var(--danger-solid); } .stat.is-warn { --c: var(--gold); } .stat.is-off { --c: var(--ink-faint); }
.stat dt { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; position: relative; }
.stat dd { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); position: relative; }
.stat.is-ok dd { color: var(--ok); }
.stat.is-danger dd { color: var(--danger); }
.stat.is-warn dd { color: var(--warn); }
.stat.is-off dd { color: var(--ink-faint); }
/* مربّع يعمل فلتراً (متابعة الشركة) */
.stat-btn { font: inherit; text-align: start; cursor: pointer; color: inherit; display: block; width: 100%; transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s, background .15s; position: relative; overflow: hidden; }
.stat-btn dt, .stat-btn dd { display: block; }
.stat-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.stat-btn.is-active { border-color: var(--brand); background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--brand), var(--shadow); }
.stat-btn.is-active::after { content: '✓'; position: absolute; top: 8px; inset-inline-end: 10px; font-size: 12px; color: var(--brand); }
.stat-btn.is-off { opacity: .75; }
.stats-extra { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stats-extra .stat { padding: 12px 14px; border-radius: 22px; }
.stats-extra .stat dd { font-size: 20px; }
.stats-extra .stat dt { font-size: 11.5px; }
.stat-btn.is-off.is-active { opacity: 1; }

/* ───────────────────────── الجدول ───────────────────────── */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar > input { flex: 1; min-width: 220px; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; background: transparent; padding: 0; border-radius: 0; }
.chip {
  border: 1px solid var(--line2); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); padding: 6px 15px; border-radius: 999px; cursor: pointer; min-height: 34px;
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 780px; }
.table th {
  text-align: start; font-size: 12px; color: var(--ink-soft); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: transparent;
}
.table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr { transition: background .2s; }
.table code { font-family: var(--mono); font-size: 12px; color: var(--brand-dark); direction: ltr; }
.muted { color: var(--ink-soft); font-size: 12.5px; }

.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 16px; }
.pager span { font-size: 13px; color: var(--ink-soft); }

/* ───────────────────────── النافذة المنبثقة ───────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 50;
  background: var(--scrim);   /* بلا تمويه هنا: كروم يزيح صورة الخلفية المموّهة خلف الطبقات الثابتة */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--surface-solid);
  border: 1px solid var(--card-line, transparent);
  border-radius: 34px;
  padding: 26px 28px;
  width: min(480px, 100%);
  box-shadow: var(--modal-shadow);
  display: flex; flex-direction: column; gap: 14px;
  animation: popIn .32s var(--ease-spring);
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-box h2 { margin: 0; font-size: 19px; font-weight: 700; }
.modal-sub { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.modal-foot { display: flex; gap: 10px; justify-content: flex-start; margin-top: 4px; }

/* ───────────────────────── التذييل ───────────────────────── */

.foot { padding: 18px 0 30px; color: var(--ink-soft); font-size: 12.5px; text-align: center; }

@media (max-width: 720px) {
  .grid-2, .choices { grid-template-columns: 1fr; }
  .topbar-inner { justify-content: center; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 8px 6px; font-size: 13px; }
  .card { padding: 20px 18px; }
}

/* ───────────────────────── المنتجات المتعددة ───────────────────────── */

.section-head { margin-top: 6px; }
.section-head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 13px; }

.item-card {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: 22px;
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-num { font-size: 13px; font-weight: 800; color: var(--brand); }

.item-remove {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 999px;
}
.item-remove:hover { background: var(--danger-bg); }

.choices-3 { grid-template-columns: repeat(3, 1fr); }

/* عمودان كالتصميم الزجاجي: بيانات الزبون | المنتجات — لوحان داخل البطاقة */
.reg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.reg-col { display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 26px; padding: 18px; min-width: 0; }
.reg-col .section-head { margin-top: 0; }
.reg-col .item-card { background: var(--surface); }
@media (max-width: 1000px) { .reg-cols { grid-template-columns: 1fr; } }

/* ───────────────────────── نتيجة التسجيل ───────────────────────── */

.result-item {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.result-item h3 { margin: 0 0 2px; font-size: 15.5px; }
.result-item p { margin: 0 0 10px; font-size: 13px; }

.id-list { display: flex; flex-wrap: wrap; gap: 8px; }
.id-list code {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--brand-dark);
  background: var(--accent-soft);
  border: 1.5px dashed var(--brand);
  border-radius: 14px;
  padding: 7px 12px;
  direction: ltr;
}

/* ───────────────────────── حالة "بدون ضمان" ───────────────────────── */

.badge.no_warranty { background: var(--surface-2); color: var(--ink-soft); }
.wcard.state-no_warranty { border-inline-start-color: var(--ink-faint); }

@media (max-width: 720px) {
  .choices-3 { grid-template-columns: 1fr; }
}

/* ───────────────────────── قائمة منسدلة مع بحث ───────────────────────── */

.combo { position: relative; }

.combo-input {
  font: inherit;
  font-size: 14.5px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--field);
  color: var(--ink);
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.combo-input:focus {
  outline: none;
  background: var(--field-focus);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.combo-input::placeholder { color: var(--ink-faint); }
.combo-input:disabled {
  background: var(--surface-3);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.combo-list {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--menu-shadow);
  padding: 6px;
  animation: popIn .22s var(--ease-out);
}

.combo-option {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  cursor: pointer;
}
.combo-option:hover,
.combo-option.is-highlighted { background: var(--accent-soft); color: var(--brand-dark); }

.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }

/* ───────────────────────── تبويب الطلبات ───────────────────────── */

.tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-inline-start: 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1f33;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  transition: transform .2s;
}
.tab.is-active .tab-badge { background: var(--brand); color: var(--on-brand); }
.tab-badge.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

.check-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.check-all input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }

#orders-tbody input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
}
#orders-tbody tr:has(input:checked) { background: var(--accent-soft); }

#orders-table { min-width: 900px; }

/* نافذة واسعة لنموذج الاستبدال، وضيّقة لتأكيد بسيط */
.modal-wide { width: min(680px, 100%); max-height: 90vh; overflow-y: auto; }
.modal-sm { width: min(400px, 100%); }
.modal-lg { width: min(760px, 100%); max-height: 92vh; overflow-y: auto; }
.toolbar-select { margin-top: -4px; padding-top: 14px; border-top: 1px solid var(--line); }
#admin-tbody input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }
#admin-tbody tr:has(input:checked) { background: var(--danger-bg); }

/* أزرار داخل صفوف الجدول */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-icon {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.btn-icon:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }
.btn-icon, .chip { position: relative; overflow: hidden; transition: background .2s, color .2s, transform .15s var(--ease-out); }
.btn-icon:active, .chip:active { transform: scale(.96); }

.btn-wa { border-color: var(--ok-line); color: var(--ok); background: var(--ok-bg); }
.btn-wa:hover { background: var(--ok-bg); color: var(--ok); }

/* معاينة وصل الضمان */
.receipt-preview {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px;
  display: flex;
  justify-content: center;
  min-height: 220px;
  max-height: 55vh;
  overflow: auto;
}
.receipt-preview canvas {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.receipt-loading { align-self: center; color: var(--ink-soft); font-size: 14px; }
.btn-receipt { border-color: var(--warn-line); color: var(--warn); background: var(--gold-bg); }
.btn-receipt:hover { background: var(--gold-bg); color: var(--warn); }

/* ═══════════════════════ بوابة الدخول ═══════════════════════ */

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  z-index: 100;
}
.gate-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--card-line, transparent);
  border-radius: 34px;
  padding: 34px 30px 28px;
  box-shadow: var(--modal-shadow);
  animation: popIn .5s var(--ease-spring);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.gate-logo { width: 64px; height: 64px; align-self: center; background: #fff; border-radius: 22px; padding: 8px; box-shadow: 0 18px 30px -16px rgba(20, 10, 80, .6); }
.gate-card h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.gate-card p { margin: -8px 0 6px; color: var(--ink-soft); font-size: 13.5px; }
.gate-card .btn-block { min-height: 48px; border-radius: 20px; font-size: 14.5px; }
.gate-card .btn-block.btn-primary { min-height: 50px; }
.gate-card .field { text-align: start; }
.btn-block { width: 100%; justify-content: center; }
.gate-card .msg { min-height: 18px; }

.gate-code { display: flex; flex-direction: column; gap: 12px; }
.gate-code-note { margin: 0; font-size: 13.5px; color: var(--ink-soft); text-align: start; line-height: 1.6; }
#gate-code { text-align: center; font-size: 24px; letter-spacing: 8px; font-family: var(--mono); direction: ltr; min-height: 56px; border-radius: 20px; }
.perms-box { display: grid; gap: 6px; }
.perms-box .perm { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.perms-box .perm input { width: 16px; height: 16px; accent-color: var(--brand); }
/* إخفاء ما لا صلاحية له (الخادم هو الحارس الحقيقي) */
body.no-perm-delete #orders-delete, body.no-perm-delete #admin-delete, body.no-perm-delete [data-book-delete], body.no-perm-delete #self-delete, body.no-perm-delete [data-track-delete] { display: none !important; }
body.no-perm-send #orders-send, body.no-perm-send #orders-export, body.no-perm-send #bookings-send { display: none !important; }
body.no-perm-edit [data-edit], body.no-perm-edit [data-track-edit], body.no-perm-edit [data-book-edit], body.no-perm-edit [data-book-move], body.no-perm-edit [data-self-edit], body.no-perm-edit [data-st-edit] { display: none !important; }
body.no-perm-finance #safe-btn { display: none !important; }
/* شريط تحذير كلمة المرور الافتراضية */
.warn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 22px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--warn);
}
.warn-banner strong { font-weight: 800; }
.warn-banner span { flex: 1; min-width: 200px; }

/* أدوات مساعدة تحلّ محلّ الأنماط السطرية (تمنعها سياسة الأمان) */
.spacer { flex: 1; }
.col-check { width: 36px; }
.is-spaced { margin-top: 14px; }
.is-spaced-lg { margin-top: 18px; }
.empty-cell { text-align: center; padding: 30px; }

/* ═══════════════════ الجداول على الهاتف ═══════════════════
   الجدول العريض يصير بطاقة لكل صف: عنوان الحقل من data-label
   بجانب قيمته، فلا سحب أفقي ولا تكبير. */
@media (max-width: 720px) {
  .table { min-width: 0; }
  .table thead { display: none; }
  .table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 6px 0;
    text-align: start;
  }
  .table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    flex: 0 0 auto;
  }
  .table td:empty { display: none; }
  .table td.row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .table td.row-actions::before { flex-basis: 100%; }
  .btn-icon { padding: 8px 12px; }
  .toolbar > input { min-width: 0; }
  .modal-box { padding: 18px; }
}

/* زر التثبيت في الشريط العلوي (أندرويد فقط — آيفون لا يعطي الحدث) */
.btn-install {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--brand-dark);
  font-weight: 700;
}
.btn-install:hover { background: var(--accent-soft); filter: brightness(.98); }
.sound-btn.is-off { opacity: .55; }

/* ═══════════════════ شركة التوصيل ═══════════════════ */

select {
  font: inherit; font-size: 14.5px; padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--ink); width: 100%;
}
select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
select option { background: var(--surface-solid); color: var(--ink); }
.delivery-status {
  border-radius: 18px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-soft);
}
.delivery-status.is-on { background: var(--ok-bg); color: var(--ok); }
.delivery-status.is-warn { background: var(--warn-bg); color: var(--warn); }
.delivery-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.delivery-report {
  margin: 12px 0 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 18px; font: 12.5px/1.6 var(--mono); direction: rtl;
  white-space: pre-wrap; max-height: 220px; overflow: auto;
}
#delivery-tools { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* نتيجة الإرسال في تبويب الطلبات */
.send-result { margin: 10px 0 0; font-size: 13.5px; }
.send-result ul { margin: 6px 0 0; padding-inline-start: 18px; }
.send-result .bad { color: var(--danger); }

/* ═══════════════════ متابعة الطلبات ═══════════════════ */
textarea {
  font: inherit; font-size: 14.5px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--field); color: var(--ink); width: 100%; resize: vertical; min-height: 84px; line-height: 1.55; transition: border-color .12s, box-shadow .12s, background .12s;
}
textarea:focus { outline: none; background: var(--field-focus); border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.tab-badge.is-danger { background: var(--danger-solid); color: #fff; }
.track-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.track-status.is-done { background: var(--ok-bg); color: var(--ok); }
.track-status.is-returned { background: var(--warn-bg); color: var(--warn); }
.track-status.is-returning { background: var(--warn-bg); color: var(--warn); border: 1px dashed var(--warn-line); }
.track-status.is-issue { background: var(--danger-bg); color: var(--danger); }
.track-issue { display: block; margin-top: 6px; color: var(--danger); font-size: 12.5px; font-weight: 600; max-width: 260px; white-space: normal; }
.track-price-old { color: var(--warn); font-size: 12px; text-decoration: line-through; margin-inline-end: 6px; }
.stat.is-warn dd { color: var(--warn); }

.stages { display: flex; align-items: center; gap: 0; margin-top: 6px; width: 120px; }
.stages i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); margin-inline-end: 3px; }
.stages i:last-child { margin: 0; }
.stages i.d { background: var(--ok); }
.stages i.n { background: var(--brand); box-shadow: 0 0 8px rgba(47, 107, 255, .45); animation: stagePulse 1.8s ease-in-out infinite; }
.stages i.r { background: var(--warn); }
.stages i.x { background: var(--danger); }
@keyframes stagePulse { 50% { opacity: .55; } }

/* ═══════════════════ مفتاح طلب الاستبدال ═══════════════════ */
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { flex: none; width: 40px; height: 23px; border-radius: 999px; background: var(--track-off); position: relative; transition: background .15s; margin-top: 2px; }
.switch-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-spring); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .switch-track { background: var(--danger); }
.switch input:checked + .switch-track::after { transform: translateX(-17px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch-text b { display: block; font-size: 14px; font-weight: 600; }
.switch-text small { color: var(--ink-soft); font-size: 12.5px; }
.switch.is-on { border-color: var(--danger-line); border-style: solid; background: var(--danger-bg); }

/* ═══════════════════ BabylonGuard ═══════════════════ */
.guard-bar { display: flex; align-items: center; gap: 4px; background: transparent; padding: 0; border-radius: 0; }
.guard-tab {
  border: 0; background: var(--danger-solid); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px;
  min-height: 42px; padding: 8px 18px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 12px 22px -12px rgba(229, 68, 109, .8);
  transition: color .15s, filter .15s;
}
.guard-tab:hover { filter: brightness(1.06); }
.guard-tab.is-active { box-shadow: 0 0 0 3px var(--danger-line), 0 12px 22px -12px rgba(229, 68, 109, .8); }
.guard-tab .tab-badge { background: #fff; color: var(--danger-solid); }
.guard-card { border-inline-start: 5px solid var(--danger); }
.guard-warn {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); border-radius: 14px;
  padding: 6px 10px; font-size: 12.5px; font-weight: 700; margin-bottom: 4px;
}
.guard-count { display: inline-block; min-width: 34px; text-align: center; padding: 2px 10px; border-radius: 999px; background: var(--danger-solid); color: #fff; font-weight: 800; }
.guard-list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-soft); }
.guard-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.guard-list .x { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; }
.guard-list .x:hover { color: var(--danger); }
@media (max-width: 720px) { .guard-bar { width: 100%; } .guard-tab { flex: 1; justify-content: center; } }

/* ═══════════════════ الحجوزات والجرس ═══════════════════ */
.bell-btn {
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; line-height: 1;
  width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-inline-start: 0; position: relative;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.bell-btn:hover { background: var(--surface); box-shadow: var(--shadow); }
.bell-btn.is-active { background: var(--accent-soft); color: var(--brand); box-shadow: none; }
.bell-btn .tab-badge { background: var(--danger-solid); color: #fff; position: absolute; top: 2px; inset-inline-end: -2px; margin: 0; border: 2px solid var(--surface); }
/* بلا اهتزاز: الرقم بجانب الجرس يكفي، وتوهّج ذهبي هادئ حين يوجد ما يُجهَّز */
.bell-btn.is-due { box-shadow: 0 0 0 2px var(--gold); animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(245, 165, 36, .5); } }
.switch-book input:checked + .switch-track { background: var(--violet); }
.switch-book.is-on { border-color: var(--violet); border-style: solid; background: var(--violet-bg); }
.switch-hide input:checked + .switch-track { background: var(--ink-faint); }
.switch-hide.is-on { border-color: var(--ink-faint); border-style: solid; background: var(--surface-2); }
.book-card { border-inline-start: 5px solid var(--violet); }
.book-note { font-size: 13px; }
.book-day { font-weight: 800; white-space: nowrap; }
.book-chip { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--violet-bg); color: var(--violet); white-space: nowrap; }
.book-chip.is-due { background: var(--gold); color: #1b1f33; }
.book-chip.is-late { background: var(--danger-bg); color: var(--danger); }
.book-chip.is-today { background: var(--warn-bg); color: var(--warn); }
.hide-badge { display: inline-block; margin-inline-start: 6px; font-size: 12px; color: var(--ink-soft); }
tr.is-due td { background: var(--gold-bg); }
.mode-pick { display: grid; gap: 10px; margin: 6px 0 14px; }
.mode-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-box { display: block; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 20px; cursor: pointer; background: var(--surface-2); }
.mode-box b { display: block; font-size: 15px; }
.mode-box small { color: var(--ink-soft); font-size: 12.5px; }
.mode-opt input:checked + .mode-box { border-color: var(--brand); background: var(--accent-soft); }
.mode-opt input:focus-visible + .mode-box { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ═══════════════════ التوصيل الذاتي / المندوب ═══════════════════ */
.gate-alt { margin-top: 10px; }
.self-card { border-inline-start: 5px solid var(--teal); }
.head-with-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-with-switch > div { flex: 1 1 320px; }
.btn-switch { border: 1.5px solid var(--brand); background: var(--surface); color: var(--brand-dark); font-weight: 700; padding: 10px 18px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.btn-switch:hover { background: var(--accent-soft); }
.self-state { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.self-state.is-new { background: var(--warn-bg); color: var(--warn); }
.self-state.is-accepted { background: var(--accent-soft); color: var(--brand-dark); }
.self-state.is-postponed { background: var(--violet-bg); color: var(--violet); }
.self-state.is-delivered { background: var(--ok-bg); color: var(--ok); }
.self-state.is-cancelled { background: var(--danger-bg); color: var(--danger); }
.self-state.is-rejected { background: var(--danger-bg); color: var(--danger); border: 1px dashed var(--danger-line); }
.btn-cmsg { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); font-weight: 800; }
.self-reason { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); max-width: 260px; white-space: normal; }
.self-issue { display: block; margin-top: 5px; font-size: 12.5px; color: var(--danger); font-weight: 700; max-width: 260px; white-space: normal; }
.user-role { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink); }
.user-role.is-courier { background: var(--teal-bg); color: var(--teal); }
.user-role.is-manager { background: var(--warn-bg); color: var(--warn); }

/* ═══════════════════ الخزنة ═══════════════════ */
.safe-card { border-inline-start: 5px solid var(--gold); }
.fee-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.fee-form input { width: 110px; direction: ltr; text-align: center; }
.courier-box { margin-bottom: 18px; }
.courier-box .stats { margin-bottom: 12px; }
.courier-box h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
tr.is-received td { background: var(--ok-bg); }
#safe-btn .tab-badge { background: var(--gold); color: #1b1f33; }

/* ═══════════════════ ملاحظات / مسح / بلا إنترنت / الشركة ═══════════════════ */
.notes-list { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; overflow-x: hidden; margin-bottom: 12px; }
.note div { word-break: break-word; }
.note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font-size: 13.5px; }
.note.is-mine { background: var(--accent-soft); }
.note-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.note-head button { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.note-head button:hover { color: var(--danger); }
.btn-notes.has-notes { background: var(--accent-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }
.scan-box { position: relative; background: #000; border-radius: 24px; overflow: hidden; aspect-ratio: 1; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 15%; border: 3px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.offline-banner { margin-bottom: 14px; font-weight: 700; }
.queue-card { border-inline-start: 5px solid var(--warn); margin-bottom: 18px; }
.queue-item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.queue-item .bad { color: var(--danger); font-weight: 700; }
.company-card { border-inline-start: 5px solid var(--orange); }
tr.is-ok-row td { background: var(--ok-bg); }
tr.is-bad-row td { background: var(--danger-bg); }
.received-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.received-form h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }

/* طلب أُرسل له واتساب: خلفية خضراء فاتحة جداً */
tr.is-wa td { background: var(--ok-bg); }
tr.is-wa:hover td { background: var(--ok-bg); }

.loc-badge { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ok); text-decoration: none; }
.loc-missing { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }

/* ═══════════════════ المستخدمون ═══════════════════ */
.users-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.users-add h3 { margin: 0; font-size: 15px; font-weight: 800; }
.user-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
.user-state.is-off { background: var(--danger-bg); color: var(--danger); }
.gate-card .msg.error { color: var(--danger); }

/* التوصيل الذاتي */
.switch-self input:checked + .switch-track { background: var(--brand); }
.switch-self.is-on { border-color: var(--brand); border-style: solid; background: var(--accent-soft); }
.self-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--brand-dark); white-space: nowrap; }
.self-badge.is-cancelled { background: var(--danger-bg); color: var(--danger); }
/* قائمة الإعدادات: قسم واحد في المرة بدل نافذة طويلة */
.settings-menu { display: grid; gap: 8px; }
.settings-menu .btn { justify-content: flex-start; text-align: start; padding: 13px 18px; font-size: 14px; border-radius: 18px; }
.dl-back { align-self: flex-start; }
.tpl-vars { max-height: none; direction: rtl; white-space: pre-wrap; font-family: inherit; font-size: 12.5px; }
.dl-section.wayl-box { margin-top: 0; padding-top: 0; border-top: 0; }
/* الجرس: قائمة التنبيهات */
.alerts-list { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.alert-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 11px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); cursor: pointer; text-align: start; font: inherit; color: inherit; transition: background .2s, border-color .2s; }
.alert-item:hover { background: var(--surface-3); }
.alert-item.is-unread { border-color: var(--gold); background: var(--gold-bg); }
.alert-item .ic { font-size: 22px; line-height: 1.2; }
.alert-item b { display: block; font-size: 13.5px; }
.alert-item small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; word-break: break-word; }
.alert-item time { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
/* رابط سياسة الخصوصية تحت الدخول — صغير ورمادي، يظهر قبل الدخول فقط */
.gate-privacy { display: block; margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--ink-faint); text-decoration: none; letter-spacing: .02em; }
.gate-privacy:hover { color: var(--ink-soft); text-decoration: underline; }
body.self-disabled #self-switch, body.self-disabled #to-self-track, body.self-disabled #ed-self-switch { display: none !important; }
.switch-mini { display: inline-flex; }
/* صفحة الإعدادات: شريط جانبي + محتوى */
.settings-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 84px; padding: 16px 12px; display: grid; gap: 10px; }
.settings-nav h2 { margin: 4px 10px 6px; font-size: 18px; font-weight: 700; }
.settings-group { display: grid; gap: 3px; }
.settings-group small { color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .09em; padding: 8px 14px 2px; text-transform: uppercase; }
.sn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 14px; border: 0; border-radius: 18px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s; }
.sn:hover { background: var(--surface-2); color: var(--ink); }
.sn.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.sn.is-active .ic { color: var(--brand); }
.settings-body { min-width: 0; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--card-line, transparent); border-radius: 30px; padding: 24px 28px; box-shadow: var(--shadow); }
.settings-body h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.settings-block { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 14px; display: grid; gap: 10px; }
.settings-block h4 { margin: 0; font-size: 15px; font-weight: 700; }
.settings-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.settings-tile { text-align: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; display: grid; gap: 4px; align-content: start; transition: border-color .12s, background .12s, transform .15s var(--ease-out); }
.settings-tile:hover { border-color: var(--brand); background: var(--surface); transform: translateY(-2px); }
.settings-tile b { font-size: 14.5px; font-weight: 700; }
.settings-tile b .ic { color: var(--brand); } .settings-tile span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.dl-companies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dl-company-card { padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-2); display: grid; gap: 8px; justify-items: center; text-align: center; }
.dl-company-card.is-active { border-color: var(--brand); background: var(--brand-bg, var(--surface-2)); }
.dl-company-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.dl-company-card b { font-size: 14px; }
.dl-company-card span { font-size: 12px; color: var(--ink-soft); }
.settings-list { padding-inline-start: 20px; display: grid; gap: 8px; line-height: 1.7; }
.settings-details summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.wt-list { display: grid; gap: 8px; }
.wt-row { display: grid; grid-template-columns: 1fr 120px 130px auto; gap: 8px; align-items: center; }
.wt-row input { width: 100%; }
.tg-kinds { display: grid; gap: 8px; }
.tg-kind { border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.tg-kind summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 800; }
.tg-kind summary::-webkit-details-marker { display: none; }
.tg-kind summary .muted { font-weight: 600; font-size: 12px; margin-inline-start: auto; }
.tg-kind .tg-body { padding: 4px 14px 14px; display: grid; gap: 8px; border-top: 1px solid var(--line-soft); }
.tg-kind textarea { min-height: 96px; font-family: inherit; font-size: 13px; direction: rtl; }
.tg-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-vars code { cursor: pointer; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); font-size: 12px; }
.tg-kind.is-off summary { opacity: .6; }
.wh-events { display: flex; flex-wrap: wrap; gap: 8px; }
.wh-events label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.ak-new { padding: 12px 16px; border: 1px solid var(--ok-line); background: var(--ok-bg); border-radius: 20px; display: grid; gap: 6px; }
.ak-new code { font-size: 14px; word-break: break-all; direction: ltr; display: block; }
.ak-list { display: grid; gap: 6px; }
.ak-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 18px; font-size: 13px; }
.ak-row.is-off { opacity: .55; }
.settings-page .modal-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-start; }
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note-chips button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.note-chips button:hover { border-color: var(--brand); }
@media (max-width: 900px) {
  .settings-page { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
  .settings-group { grid-template-columns: 1fr 1fr; }
  .wt-row { grid-template-columns: 1fr 1fr; }
  .ak-row { grid-template-columns: 1fr auto; }
}
/* أيقونات بدل الإيموجي (icons.js): خطّية بلون النص، بحجم الحرف */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .ic, .btn-icon .ic, .tab .ic, .bell-btn .ic, .sec-btn .ic { margin-inline-end: .35em; }
.btn-icon .ic:only-child, .bell-btn .ic:only-child, .bell-btn .ic:first-child:nth-last-child(2) { margin: 0; }
.bell-btn .ic { width: 1.25em; height: 1.25em; }
.ic-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: -0.05em; margin-inline-end: .3em; }
.ic-dot.ok { background: #37b24d; } .ic-dot.warn { background: #f5a524; } .ic-dot.bad { background: #e5446d; }
h1 .ic, h2 .ic, h3 .ic { color: var(--brand); }
.track-issue .ic, .msg.error .ic { color: var(--danger); }
.stat dt .ic { color: var(--ink-soft); }
.tab-ic { display: none; }   /* تظهر في دوك الهاتف فقط */
/* حذف عند الشركة من المتابعة */
.btn-track-del { color: var(--danger); border-color: var(--danger-line); }
.btn-track-del:hover { background: var(--danger-bg); }
/* الدفع المسبق (ماستركارد) */
.mc-logo { width: 26px; height: 16px; vertical-align: -3px; margin-inline-end: 2px; }
.switch-prepaid.is-on { border-color: #f79e1b; background: rgba(247, 158, 27, .1); }
.prepaid-box { border: 1px dashed #f79e1b; border-radius: 22px; padding: 12px 14px; background: rgba(247, 158, 27, .06); display: grid; gap: 10px; }
.prepaid-box input[type=file] { font: inherit; font-size: 13px; width: 100%; padding: 8px 12px; border: 1px dashed var(--line2); border-radius: 14px; background: var(--surface-2); color: var(--ink); }
.prepaid-preview { max-height: 160px; width: auto; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); justify-self: start; }
.prepaid-badge { display: inline-block; margin-inline-start: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(247, 158, 27, .16); color: #b45309; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.prepaid-badge:hover { background: rgba(247, 158, 27, .3); }
:root[data-theme="dark"] .prepaid-badge { color: #f79e1b; }
.test-badge { display: block; margin-bottom: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(168, 85, 247, .14); color: #7e22ce; font-size: 11px; font-weight: 800; white-space: nowrap; width: fit-content; }
:root[data-theme="dark"] .test-badge { color: #c084fc; background: rgba(168, 85, 247, .18); }
/* هاتف يُنسخ بالنقر */
.copy-phone { cursor: copy; border-bottom: 1px dotted var(--ink-faint); }
.copy-phone:hover { color: var(--brand-dark); }
#bc-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: #1b1f33; color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 11px 22px; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease-spring); z-index: 200; }
#bc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) { #bc-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* خط زمني للطلب */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-height: 60vh; overflow-y: auto; }
.timeline::before { content: ''; position: absolute; right: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 30px 14px 0; font-size: 13.5px; }
.timeline li i { position: absolute; right: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-solid); border: 2px solid var(--line); }
.timeline li.ok i { background: var(--ok); border-color: var(--ok); }
.timeline li.bad i { background: var(--danger-solid); border-color: var(--danger-solid); }
.timeline li.warn i { background: var(--gold); border-color: var(--gold); }
.timeline li.now i { border-color: var(--brand); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline li small { display: block; color: var(--ink-soft); font-size: 11.5px; }
/* المساعد الذكي للتسجيل */
.assist-box { border: 1px dashed var(--line2); border-radius: 22px; padding: 12px 14px; background: var(--surface-2); display: grid; gap: 8px; }
.assist-box h3 { margin: 0; font-size: 14px; font-weight: 800; }
.assist-box .row { display: flex; gap: 8px; align-items: stretch; }
.assist-box textarea { flex: 1; min-height: 46px; }
.assist-out { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.assist-out b { color: var(--ink); }
/* الجولة التعريفية */
.tour-mask { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.tour-spot { position: fixed; z-index: 151; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(36, 24, 80, .55), 0 0 0 3px var(--brand); pointer-events: none; transition: all .35s var(--ease-out); }
.tour-tip { position: fixed; z-index: 152; width: min(340px, calc(100vw - 24px)); background: var(--surface-solid); color: var(--ink); border: 1px solid var(--card-line, transparent); border-radius: 26px; padding: 16px 18px; box-shadow: var(--modal-shadow); animation: popIn .3s var(--ease-spring); }
.tour-tip b { display: block; font-size: 15px; margin-bottom: 4px; }
.tour-tip p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.tour-tip .row { display: flex; gap: 8px; align-items: center; }
.tour-tip .row small { margin-inline-start: auto; color: var(--ink-faint); }
/* حالة الموظف */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 4px; vertical-align: middle; }
.status-dot.available { background: #37b24d; } .status-dot.busy { background: #f5a524; } .status-dot.off { background: #e5446d; }
/* قسم فرعي داخل صفحة إعدادات (مثل حساب التاجر الرئيسي والنسخة الاحتياطية) */
.wayl-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wayl-box h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
@media (max-width: 720px) { .grid-2 .switch { min-width: 0; } }

/* ═══════════════════ حقل الهاتف مع رمز البلد ═══════════════════ */
.phone-field { position: relative; display: flex; align-items: stretch; }
.phone-field input { flex: 1; min-width: 0; border-start-start-radius: 0; border-end-start-radius: 0; }
.phone-field input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.dial-btn {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; font: inherit; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--line); border-inline-end: 0; border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  background: var(--surface-3); color: var(--ink); cursor: pointer; direction: ltr;
}
.dial-btn:hover { background: var(--line); }
.dial-flag { font-size: 18px; line-height: 1; }
.dial-code { font-family: var(--mono); }
.dial-caret { font-size: 10px; color: var(--ink-soft); }
.dial-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; width: min(320px, 100%);
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--menu-shadow); padding: 8px;
}
.dial-search { width: 100%; margin-bottom: 6px; }
.dial-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.dial-item {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: start;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 12px; cursor: pointer;
}
.dial-item:hover, .dial-item.is-on { background: var(--accent-soft); }
.dial-item .dial-code { color: var(--ink-soft); font-size: 12.5px; }
.dial-empty { padding: 10px; color: var(--ink-soft); font-size: 13px; text-align: center; }

/* ═══════════════════ حركة أقل لمن يطلبها ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────── الأقسام والصلاحيات (v65) ───────── */
body.no-perm-register .tab[data-view="register"], body.no-perm-register .tab[data-view="lookup"], body.no-perm-register .tab[data-view="orders"], body.no-perm-register .tab[data-view="bookings"] { display: none !important; }
body.no-perm-track .tab[data-view="tracking"], body.no-perm-track #guard-tab, body.no-perm-track #bell-btn { display: none !important; }
body.no-perm-finance .tab[data-view="stats"], body.no-perm-finance #safe-btn { display: none !important; }
body.no-perm-register.no-perm-track .tab[data-view="admin"] { display: none !important; }
.perm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.perm-group { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.perm-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }
.perms-box .perm { flex-wrap: wrap; }
.perms-box .perm small { flex-basis: 100%; margin-inline-start: 24px; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.perm-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); margin-inline-end: 2px; }
#users-panel .users-add { margin-top: 14px; }
/* ملفي الشخصي */
.profile-row { display: flex; gap: 16px; align-items: center; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); padding: 0; cursor: pointer; flex: none; display: grid; place-items: center; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-initials { font-size: 24px; font-weight: 800; color: var(--brand); }
.profile-avatar:hover { border-color: var(--brand); }
/* حقول المنتج المخصّصة */
.pf-list { display: grid; gap: 8px; }
.pf-row { display: grid; grid-template-columns: 1.3fr 100px 100px 1.5fr auto auto auto; gap: 8px; align-items: center; }
.pf-row input, .pf-row select { width: 100%; min-width: 0; }
.pf-row .perm { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.item-extra { margin-top: 2px; }
@media (max-width: 900px) {
  .pf-row { grid-template-columns: 1fr 1fr; }
  .profile-row { flex-direction: column; align-items: flex-start; }
}

/* تحذير: تخطّي رمز تيليجرام (حساب مراجعة خارجي) */
.ue-danger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--danger-line); border-radius: 18px; background: var(--danger-bg); font-size: 13.5px; font-weight: 600; color: var(--danger); cursor: pointer; }
.ue-danger input { width: 16px; height: 16px; accent-color: var(--danger); }
.ue-danger small { flex-basis: 100%; margin-inline-start: 24px; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.ue-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 8px; border: 1px solid rgba(168, 85, 247, .35); border-radius: 18px; background: rgba(168, 85, 247, .1); font-size: 13.5px; font-weight: 600; color: #7e22ce; cursor: pointer; }
.ue-test input { width: 16px; height: 16px; accent-color: #a855f7; }
.ue-test small { flex-basis: 100%; margin-inline-start: 24px; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
:root[data-theme="dark"] .ue-test { color: #c084fc; }

/* دفع جزئي: داخل صندوق الدفع المسبق البرتقالي */
.prepaid-partial-field { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #b45309; cursor: pointer; }
.prepaid-partial-field input { width: 16px; height: 16px; accent-color: #f79e1b; flex: none; }
:root[data-theme="dark"] .prepaid-partial-field { color: #f79e1b; }

/* ═══════════════ التحقق بخطوتين بتطبيق المصادقة ═══════════════ */
.gate { overflow-y: auto; }   /* نموذج الاستعادة أطول من شاشة الهاتف */
.gate-link { background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 2px; align-self: center; }
.gate-link:hover { color: var(--ink); }
#gate-code.is-recovery, .code-input { letter-spacing: 2px; font-family: var(--mono); direction: ltr; text-align: center; }
#gate-code.is-recovery { font-size: 18px; }
.tfa-box { width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.tfa-en { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-inline-start: 6px; }
.tfa-status { font-size: 14px; line-height: 1.7; }
.tfa-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 800; font-size: 12.5px; margin-inline-end: 6px; }
.tfa-badge.is-on { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.tfa-low { color: var(--danger); font-weight: 700; }
.tfa-step { display: grid; gap: 12px; }
.tfa-howto { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.tfa-qr-wrap { justify-self: center; background: #fff; border-radius: 24px; padding: 10px; line-height: 0; border: 1px solid var(--line); box-shadow: var(--shadow); }
#tfa-qr { width: 232px; height: 232px; image-rendering: pixelated; }
.tfa-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.tfa-key code { font-family: var(--mono); font-size: 15px; letter-spacing: 1px; color: var(--brand-dark); background: var(--accent-soft); border: 1.5px dashed var(--brand); border-radius: 14px; padding: 6px 12px; user-select: all; word-break: break-all; }
#tfa-link { justify-self: start; }
.tfa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tfa-code-list { margin: 0; padding: 14px 16px; padding-inline-start: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; background: var(--accent-soft); border: 1.5px dashed var(--brand); border-radius: 24px; color: var(--brand-dark); }
.tfa-code-list code { font-family: var(--mono); font-size: 15px; letter-spacing: 1px; user-select: all; }
.tfa-saved { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.tfa-saved input { width: 18px; height: 18px; accent-color: var(--brand); }
.tfa-events summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.tfa-events ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13px; }
.tfa-mini { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); white-space: nowrap; }
.ue-totp { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--ok-line); border-radius: 20px; background: var(--ok-bg); font-size: 13.5px; }
.ue-totp .btn { justify-self: start; }
.tfa-offscreen { position: fixed; top: -1000px; opacity: 0; }
@media (max-width: 480px) {
  .tfa-code-list { grid-template-columns: 1fr; }
  #tfa-qr { width: 200px; height: 200px; }
}
/* طباعة رموز الاسترداد وحدها */
@media print {
  body.print-tfa > *:not(#tfa-modal) { display: none !important; }
  body.print-tfa #tfa-modal { position: static; background: #fff; padding: 0; }
  body.print-tfa .tfa-box { box-shadow: none; border: 0; max-height: none; overflow: visible; background: #fff; color: #000; }
  body.print-tfa .tfa-box > :not(h2):not(#tfa-codes) { display: none !important; }
  body.print-tfa #tfa-codes > :not(.tfa-code-list):not(.warn) { display: none !important; }
  body.print-tfa .tfa-code-list { background: #fff; border: 1px solid #000; border-radius: 12px; color: #000; }
}

/* ═══════════════ الشريط الجانبي (حاسوب واسع) — كتطبيقات Babylon ═══════════════
   الشريط العلوي نفسه (نفس العناصر والمعرّفات) يصير عموداً أبيض ثابتاً على اليمين:
   الشعار، التبويبات صفوفاً بأيقوناتها، ثم أزرار الحارس والتنبيهات والإعدادات أسفله. */
@media (min-width: 1100px) {
  #app { padding-inline-start: var(--side-w); }
  .topbar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--side-w);
    border: 0; border-inline-end: 1px solid var(--card-line, transparent); box-shadow: none;
    overflow-y: auto; scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar-inner {
    width: auto; min-height: 100%; margin: 0; padding: 30px 18px 22px;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0;
  }
  .brand { order: 1; padding: 0 8px 26px; }
  .brand-logo { width: 42px; height: 42px; border-radius: 15px; }
  .btn-install { order: 2; margin-bottom: 14px; }
  .tabs {
    order: 3; flex: none; flex-direction: column; gap: 3px; overflow: visible;
    background: transparent; border: 0; padding: 0; border-radius: 0;
  }
  .tab {
    display: flex; align-items: center; gap: 13px; width: 100%; min-height: 46px;
    padding: 11px 16px; border-radius: 18px; text-align: start;
    font-size: 14px; font-weight: 500; color: var(--ink-soft);
  }
  .tab .tab-ic { display: block; width: 19px; height: 19px; margin: 0; stroke-width: 1.8; }
  .tab:hover { background: var(--surface-2); color: var(--ink); }
  .tab.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 700; box-shadow: none; }
  .tab .tab-badge { margin-inline-start: auto; }
  .guard-bar {
    order: 4; margin: auto 0 0; padding-top: 18px;
    flex-wrap: wrap; justify-content: space-between; gap: 10px 4px;
  }
  .guard-bar > .guard-tab, .guard-bar > .btn { flex: 1 1 100%; justify-content: center; }
  .guard-bar > .btn { order: 9; }
  /* رسم ودّي صغير فوق أزرار الأسفل كما في Vault — يختفي إن قصرت الشاشة */
  .guard-bar::before {
    content: ''; flex: 1 1 100%; height: 118px; margin-bottom: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130'%3E%3Cellipse cx='100' cy='116' rx='74' ry='11' fill='%23eef1ff'/%3E%3Cpath d='M100 14l42 15v34c0 27-18 46-42 55-24-9-42-28-42-55V29z' fill='%232f6bff'/%3E%3Cpath d='M100 26l31 11v26c0 20-13 34-31 42-18-8-31-22-31-42V37z' fill='%235b8dff'/%3E%3Cpath d='M86 64l10 10 20-22' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='38' cy='34' r='5' fill='%23f5a524'/%3E%3Ccircle cx='160' cy='48' r='4.5' fill='%23e5446d'/%3E%3Ccircle cx='150' cy='12' r='3' fill='%238b5cf6'/%3E%3Cpath d='M34 82v12M28 88h12M168 92v10M163 97h10' stroke='%23b4bacb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  :root[data-theme="dark"] .guard-bar::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130'%3E%3Cellipse cx='100' cy='116' rx='74' ry='11' fill='%23232843'/%3E%3Cpath d='M100 14l42 15v34c0 27-18 46-42 55-24-9-42-28-42-55V29z' fill='%232f6bff'/%3E%3Cpath d='M100 26l31 11v26c0 20-13 34-31 42-18-8-31-22-31-42V37z' fill='%235b8dff'/%3E%3Cpath d='M86 64l10 10 20-22' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='38' cy='34' r='5' fill='%23f5a524'/%3E%3Ccircle cx='160' cy='48' r='4.5' fill='%23e5446d'/%3E%3Ccircle cx='150' cy='12' r='3' fill='%238b5cf6'/%3E%3Cpath d='M34 82v12M28 88h12M168 92v10M163 97h10' stroke='%23b4bacb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  main { padding-top: 34px; }
  .settings-nav, .st-side { top: 24px; }
}
@media (min-width: 1100px) and (max-height: 760px) { .guard-bar::before { display: none; } }

/* ═══════════════ بوابة الدخول على الحاسوب: لوحة فنية + نموذج ═══════════════ */
@media (min-width: 900px) {
  .gate {
    grid-template-columns: minmax(320px, 42%) 1fr; grid-template-rows: minmax(100%, auto);
    place-items: center; padding: 0; background: var(--surface);
  }
  .gate::before {
    content: 'BabylonCare'; grid-column: 1; grid-row: 1; align-self: stretch; justify-self: stretch;
    color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.01em; direction: ltr; text-align: right;
    padding: 158px 52px 54px;
    background:
      url(/favicon.svg) right 62px top 72px / 46px 46px no-repeat,
      radial-gradient(circle at right 85px top 95px, #fff 33px, transparent 34px),
      radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .24), transparent 46%),
      radial-gradient(circle at 10% 100%, rgba(255, 255, 255, .12), transparent 40%),
      var(--art);
  }
  .gate > * { grid-column: 2; grid-row: 1; }
  .gate-card { box-shadow: none; border: 0; background: transparent; animation: none; padding: 30px 20px; }
}
@media (min-width: 1100px) { .brand small { display: none; } }