/* ═════════════════════════════════════════════════════════════════
   حضوري — طبقة التصميم بنمط iOS
   نظام تصميم متكامل مستوحى من لغة Apple:
   أسطح مسطحة متباينة، زجاج ضبابي، ألوان النظام، زوايا مستمرة،
   حركات نابضة، ووضع ليلي بطبقات حقيقية (#000000 / #1C1C1E / #2C2C2E)
   ─────────────────────────────────────────────────────────────────
   يُحمَّل بعد styles.css ويعيد سكّ كل المكوّنات دون المساس بالبنية
   ═════════════════════════════════════════════════════════════════ */

/* ─── 1) رموز التصميم — الوضع الفاتح (iOS System) ─── */
:root {
  /* الأسطح: خلفية مجمّعة + بطاقات بيضاء — بلا حدود، الفصل بالتباين */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --ink: #1C1C1E;
  --muted: rgba(60, 60, 67, .62);
  --line: rgba(60, 60, 67, .13);

  /* اللون المميز: أزرق النظام + هوية العلامة للطبقة العميقة */
  --brand: #007AFF;
  --brand-2: #007AFF;
  --brand-deep: #0040DD;
  --brand-soft: rgba(0, 122, 255, .10);
  --brand-ink: #007AFF;

  /* ألوان النظام */
  --ok: #34C759;
  --ok-soft: rgba(52, 199, 89, .14);
  --ok-ink: #248A3D;
  --danger: #FF3B30;
  --danger-soft: rgba(255, 59, 48, .12);
  --warn: #FF9500;
  --warn-soft: rgba(255, 149, 0, .14);
  --info: #007AFF;
  --info-soft: rgba(0, 122, 255, .10);
  --gold: #E6A200;
  --gold-soft: rgba(255, 190, 10, .16);

  /* تعبئات النظام (حقول، صفوف، رموز) */
  --fill: rgba(120, 120, 128, .09);
  --fill-2: rgba(120, 120, 128, .14);
  --fill-3: rgba(120, 120, 128, .20);

  /* الشريط الجانبي بنمط iPadOS */
  --side: #F5F5F9;
  --side-2: #ECECF2;
  --side-ink: rgba(60, 60, 67, .72);

  /* الظلال: شبه معدومة — iOS يعتمد التباين لا الظل */
  --shadow: 0 1px 1px rgba(24, 32, 78, .03);
  --shadow-lg: 0 10px 36px -8px rgba(0, 0, 0, .14);

  --radius: 20px;

  /* زجاج الشرائط العلوية/السفلية */
  --glass: rgba(249, 249, 249, .82);
  --glass-border: rgba(60, 60, 67, .18);

  /* حركة نابضة */
  --spring: cubic-bezier(.32, .72, 0, 1);
  --pop: cubic-bezier(.34, 1.28, .44, 1);

  /* المخططات */
  --chart-grid: #E5E5EA;
  --chart-label: #8E8E93;
  --chart-ink: #1C1C1E;
  --chart-card: #FFFFFF;
}

/* ─── 2) الوضع الليلي — طبقات iOS الحقيقية ─── */
[data-theme="dark"] {
  --bg: #000000;
  --card: #1C1C1E;
  --ink: #F5F5F7;
  --muted: rgba(235, 235, 245, .62);
  --line: rgba(84, 84, 88, .55);

  --brand: #0A84FF;
  --brand-2: #0A84FF;
  --brand-deep: #4F7DFF;
  --brand-soft: rgba(10, 132, 255, .16);
  --brand-ink: #6FA8FF;

  --ok: #30D158;
  --ok-soft: rgba(48, 209, 88, .16);
  --ok-ink: #4ADE80;
  --danger: #FF453A;
  --danger-soft: rgba(255, 69, 58, .16);
  --warn: #FF9F0A;
  --warn-soft: rgba(255, 159, 10, .16);
  --info: #64B5FF;
  --info-soft: rgba(10, 132, 255, .16);
  --gold: #FFD60A;
  --gold-soft: rgba(255, 214, 10, .14);

  --fill: rgba(120, 120, 128, .22);
  --fill-2: rgba(120, 120, 128, .30);
  --fill-3: rgba(120, 120, 128, .38);

  --side: rgba(28, 28, 30, .92);
  --side-2: rgba(44, 44, 46, .92);
  --side-ink: rgba(235, 235, 245, .68);

  --shadow: none;
  --shadow-lg: 0 14px 44px -10px rgba(0, 0, 0, .6);

  --glass: rgba(22, 22, 24, .78);
  --glass-border: rgba(84, 84, 88, .5);

  --chart-grid: rgba(120, 120, 128, .36);
  --chart-label: rgba(235, 235, 245, .6);
  --chart-ink: #F5F5F7;
  --chart-card: #1C1C1E;
}

/* ─── 3) الأساس ─── */
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(0, 122, 255, .28); }
[data-theme="dark"] ::selection { background: rgba(10, 132, 255, .45); }

/* أشرطة تمرير رفيعة بنمط iOS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, .38); border-radius: 99px; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .55); }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, .5); border-radius: 99px; background-clip: padding-box; border: 2px solid transparent; }

/* حلقة تركيز لوحة المفاتيح بلون النظام */
:focus-visible { outline: 2.5px solid rgba(0, 122, 255, .65); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .side-link:focus-visible { outline-offset: 3px; }

/* التمرير السلس داخل الصفحة */
html { scroll-behavior: smooth; }

/* ─── 4) البطاقات: أسطح مجمّعة بلا حدود ─── */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (hover: hover) {
  .card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  }
}
[data-theme="dark"] .card:hover { box-shadow: none; }
.card h4 { font-weight: 800; letter-spacing: -.01em; }
.card h4 .ic { color: var(--brand); }

/* رؤوس الصفحات */
.page-head h3 { font-weight: 800; letter-spacing: -.015em; }

/* ─── 5) الأزرار — ملء النظام / مُلوَّن شفاف / مسطح ─── */
.btn {
  border-radius: 12px;
  font-weight: 700;
  background: var(--fill-2);
  color: var(--ink);
  transition: transform .32s var(--spring), background .2s, color .2s, opacity .2s, box-shadow .2s;
}
.btn:hover { filter: none; transform: none; background: var(--fill-3); }
.btn:active { transform: scale(.965); transition: transform .08s; }

/* الزر المميز: مسطح بلون النظام — بلا تدرجات */
.btn.primary,
[data-theme="dark"] .btn.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 122, 255, .5);
}
.btn.primary:hover { background: var(--brand); filter: brightness(1.06); box-shadow: 0 8px 22px -6px rgba(0, 122, 255, .58); }
[data-theme="dark"] .btn.primary { box-shadow: 0 6px 18px -6px rgba(10, 132, 255, .4); }
[data-theme="dark"] .btn.primary:hover { filter: brightness(1.12); }
.btn.primary:disabled { background: var(--brand); opacity: .4; }

.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 6px 18px -6px rgba(255, 59, 48, .45); }
.btn.dangersoft { background: var(--danger-soft); color: var(--danger); }
.btn.warnsoft { background: var(--warn-soft); color: var(--warn); }
.btn.oksoft { background: var(--ok-soft); color: var(--ok-ink); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--fill); }
.btn.lg { border-radius: 14px; font-weight: 700; }
[data-theme="dark"] .btn { background: var(--fill-2); color: var(--ink); }
[data-theme="dark"] .btn.ghost { background: transparent; }
[data-theme="dark"] .btn.ghost:hover { background: var(--fill); }

/* أزرار الأيقونات: دوائر نقية */
.icon-btn { border-radius: 999px; transition: background .2s, transform .3s var(--spring); }
.icon-btn:hover { background: var(--fill-2); }
.icon-btn:active { transform: scale(.9); }
[data-theme="dark"] .icon-btn:hover { background: var(--fill-2); }

/* ─── 6) الحقول: تعبئة النظام بلا حدود ─── */
.field > span { color: var(--muted); font-weight: 700; font-size: .85em; }
.field input, .field select, .field textarea {
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: background .2s, border-color .2s, box-shadow .2s;
  min-height: 44px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(60, 60, 67, .4); }
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder { color: rgba(235, 235, 245, .35); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--card);
  border-color: transparent;
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, .28);
}
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea {
  background: var(--fill);
  border-color: transparent;
  color: var(--ink);
}
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus {
  background: #2C2C2E;
  box-shadow: 0 0 0 3.5px rgba(10, 132, 255, .38);
}
.in-ico { background: transparent; }
[data-theme="dark"] .in-ico { background: transparent; }
[data-theme="dark"] .in-ico input { background: transparent; }
.pw-toggle { border-radius: 8px; }
.pw-toggle:hover { background: var(--fill-2); color: var(--brand); }

.form-error { border-radius: 12px; font-weight: 700; }
.dev-note { border-radius: 13px; border: none; }
.privacy-note { border: none; border-radius: 11px; background: var(--brand-soft); }

/* ─── 7) عناصر التحكم المجزأة (Segmented Control) ─── */
.auth-tabs, .auth-subtabs {
  background: var(--fill-2);
  border: none;
  border-radius: 10px;
  padding: 2.5px;
}
.auth-tab, .auth-subtab {
  border-radius: 8px;
  color: var(--ink);
  font-weight: 700;
  transition: color .2s;
}
.auth-tab.active, .auth-subtab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06);
}
[data-theme="dark"] .auth-tabs, [data-theme="dark"] .auth-subtabs { background: var(--fill); border-color: transparent; }
[data-theme="dark"] .auth-tab.active, [data-theme="dark"] .auth-subtab.active {
  background: #636366;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}

/* ─── 8) شاشة الدخول ─── */
.auth-hero {
  background:
    radial-gradient(1000px 560px at 88% -12%, rgba(10, 132, 255, .30), transparent 62%),
    radial-gradient(780px 540px at -8% 112%, rgba(94, 92, 230, .22), transparent 60%),
    linear-gradient(168deg, #060A1E 0%, #0E1744 52%, #070B26 100%);
}
.auth-hero .hero-blob.b1 { background: radial-gradient(circle, rgba(10, 132, 255, .38), transparent 65%); }
.auth-hero .hero-blob.b2 { background: radial-gradient(circle, rgba(94, 92, 230, .26), transparent 65%); }
.brand-mark {
  border-radius: 24px;
  background: linear-gradient(160deg, #0A84FF, #0040DD);
  box-shadow: 0 16px 40px -10px rgba(10, 90, 255, .55);
}
@keyframes markGlow {
  0%, 100% { box-shadow: 0 16px 40px -10px rgba(10, 90, 255, .55); }
  50% { box-shadow: 0 18px 52px -8px rgba(10, 132, 255, .75); }
}
.auth-brand h1 { font-weight: 900; letter-spacing: -.02em; }
.brand-sub { color: rgba(196, 210, 245, .85); }
.brand-feats .ic { background: rgba(10, 132, 255, .16); color: #7FB5FF; border-radius: 10px; }

.auth-card {
  border: none;
  border-radius: 26px;
  padding: 1.9rem;
  box-shadow: 0 24px 70px -24px rgba(16, 24, 64, .25), 0 2px 8px rgba(16, 24, 64, .04);
}
[data-theme="dark"] .auth-card { box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .8); }
/* بلا شريط علوي — نقاء iOS */
.auth-card::before { display: none; }
.demo-box { background: var(--fill); border: none; border-radius: 14px; }
.demo-chip { background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
.demo-chip:hover { border-color: rgba(0, 122, 255, .4); background: var(--brand-soft); }
[data-theme="dark"] .demo-box { background: var(--fill); border-color: transparent; }
[data-theme="dark"] .demo-chip { background: #2C2C2E; border-color: transparent; }
.fp-chip { border: 1px dashed rgba(0, 122, 255, .35); border-radius: 12px; background: var(--card); }
.bio-hero { border: none; background: var(--fill); border-radius: 16px; }
[data-theme="dark"] .bio-hero { background: var(--fill); }
.bio-hero-ico { background: radial-gradient(circle at 32% 28%, #2E90FF, #0040DD); }

/* بطاقة Face ID — تبقى داكنة فاخرة كما هي، بلمسة نيون أزرق أنقى */
.ios-face-card { border-radius: 24px; }
.cam-box { border-radius: 20px; border: none; }
.scan-visual { border-radius: 20px; border: none; }

/* ─── 9) الشريط العلوي: زجاج iOS ─── */
.topbar {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--glass-border);
}
/* بلا خط توقيع ملون — نظافة iOS */
.topbar::after { display: none; }
[data-theme="dark"] .topbar { background: var(--glass); }
.brand-mini { color: var(--brand-deep); font-weight: 800; }
.page-title { font-weight: 800; letter-spacing: -.01em; }
.top-clock { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: .3em .85em; }
.avatar {
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  box-shadow: 0 4px 12px -4px rgba(0, 100, 255, .5);
  font-weight: 700;
}

/* ─── 10) شريط تبويبات الموظف ─── */
.tabbar {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--glass-border);
}
.tab { color: var(--muted); border-radius: 10px; transition: color .2s, background .2s, transform .3s var(--spring); }
.tab:hover { background: var(--fill); color: var(--ink); }
.tab:active { transform: scale(.94); }
.tab.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
  font-weight: 800;
}
/* شريط iOS سفلي على الجوال: بلا خلفية للعنصر النشط — اللون كافٍ */
[data-theme="dark"] .tabbar { background: var(--glass); border-top-color: var(--glass-border); }
@media (max-width: 900px) {
  .tabbar { background: var(--glass); border-top: 1px solid var(--glass-border); border-bottom: none; }
  .tab { background: transparent !important; }
  .tab:hover { background: transparent !important; }
  .tab.active { color: var(--brand); }
}

/* ─── 11) الشريط الجانبي بنمط iPadOS ─── */
.sidebar {
  background: var(--side);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-inline-end: 1px solid var(--line);
  color: var(--side-ink);
}
.side-brand { border-bottom: 1px solid var(--line); color: var(--ink); }
.side-brand .ic { color: var(--brand); }
.side-brand b { font-weight: 800; letter-spacing: -.01em; }
.side-brand small { color: var(--muted); }

.side-link {
  color: var(--side-ink);
  border-radius: 12px;
  font-weight: 600;
  transition: background .18s, color .18s, transform .3s var(--spring);
}
.side-link:hover { background: var(--fill-2); color: var(--ink); }
.side-link:active { transform: scale(.97); }
.side-link.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
  font-weight: 800;
}
/* بلا شرطة جانبية متوهجة — iPadOS يعتمد التعبئة فقط */
.side-link.active::before { display: none; }
/* شريحة الأيقونة الملونة تُبقى — مثل أيقونات إعدادات iOS */
.side-nav .side-link.active .ic {
  background: color-mix(in srgb, var(--ic, #007AFF) 22%, transparent);
  color: var(--ic, #007AFF);
  box-shadow: none;
}
.side-nav .side-link.active { color: color-mix(in srgb, var(--ic, #007AFF) 72%, var(--ink)); }
.side-badge { background: var(--danger); border-radius: 99px; }

.side-foot { border-top: 1px solid var(--line); }
.side-foot .btn {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
  font-weight: 700;
}
.side-foot .btn:hover { background: rgba(255, 59, 48, .2); }
[data-theme="dark"] .side-foot .btn:hover { background: rgba(255, 69, 58, .28); }
.side-scrim.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* الوضع الليلي: شريط جانبي مطفأ زجاجي */
[data-theme="dark"] .sidebar { background: var(--side); }
[data-theme="dark"] .side-link { color: var(--side-ink); }
[data-theme="dark"] .side-link:hover { background: var(--fill-2); color: var(--ink); }
[data-theme="dark"] .side-link.active { background: var(--brand-soft); color: var(--brand-ink); }
[data-theme="dark"] .side-brand { color: var(--ink); }
[data-theme="dark"] .side-brand small { color: var(--muted); }
[data-theme="dark"] .side-brand .ic { color: var(--brand); }
[data-theme="dark"] .side-nav .side-link .ic { background: color-mix(in srgb, var(--ic, #8FA8F0) 18%, transparent); }
[data-theme="dark"] .side-nav .side-link.active .ic {
  background: color-mix(in srgb, var(--ic, #0A84FF) 30%, transparent);
  color: var(--ic, #6FA8FF);
}

/* ─── 12) بطاقات الإحصاءات: أيقونات مقرّبة بنمط iOS ─── */
.stat { border: none; border-radius: var(--radius); }
.stat-ico { border-radius: 14px; box-shadow: none; }
.stat-ico.ok { background: var(--ok-soft); color: var(--ok); }
.stat-ico.warn { background: var(--warn-soft); color: var(--warn); }
.stat-ico.danger { background: var(--danger-soft); color: var(--danger); }
.stat-ico.info { background: var(--info-soft); color: var(--info); }
.stat-ico.gold { background: var(--gold-soft); color: var(--gold); }
[data-theme="dark"] .stat-ico { box-shadow: none; }
.stat b { font-weight: 800; letter-spacing: -.02em; }

/* ─── 13) الشارات والوسوم ─── */
.chip { border-radius: 999px; font-weight: 700; }
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.gray { background: var(--fill-2); color: var(--muted); }
.chip.gold { background: var(--gold-soft); color: var(--gold); }
.badge { box-shadow: 0 0 0 2px var(--glass); }

/* ─── 14) الجداول: قوائم مجمّعة ─── */
.table-wrap { border: none; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.tbl th {
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .74em;
  border-bottom: 1px solid var(--line);
}
.tbl td { border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--fill); }
[data-theme="dark"] .tbl thead th { background: transparent; color: var(--muted); }
[data-theme="dark"] .tbl tbody tr:hover { background: var(--fill); }

/* صفوف القوائم الداخلية */
.tl-item { background: var(--fill); border: none; border-radius: 14px; }
.tl-ico { background: var(--brand-soft); color: var(--brand); border-radius: 11px; }
.tl-ico.gray { background: var(--fill-2); color: var(--muted); }
.tl-ico.warn { background: var(--warn-soft); color: var(--warn); }
.wd { background: var(--fill); border: none; border-radius: 14px; }
.wd.today { background: var(--brand-soft); border: 1.5px solid rgba(0, 122, 255, .4); }
[data-theme="dark"] .wd.today { border-color: rgba(10, 132, 255, .5); }
.disc-row { background: var(--fill); border-radius: 12px; }
.disc-row:hover { border-color: transparent; background: var(--fill-2); transform: none; }
[data-theme="dark"] .disc-row { background: var(--fill); }
.live-item { border-bottom: 1px solid var(--line); }
.live-timer { background: var(--brand-soft); color: var(--brand); border-radius: 8px; }
.info-row, .face-enroll { background: var(--fill); border-radius: 14px; }
.upload-prev { background: var(--fill); border-radius: 12px; }
.bio-sep, .kv { border-color: var(--line); }

/* شريط التقدم: مسطح بلون النظام */
.progress { background: var(--fill-2); border-radius: 99px; }
.progress > i { background: var(--brand); border-radius: 99px; box-shadow: none; }
.pts-progress { background: var(--fill-2); border-radius: 99px; }
.pts-progress > i { background: linear-gradient(90deg, #30D158, #248A3D); box-shadow: none; border-radius: 99px; }

/* ─── 15) لوحة الإشعارات: زجاج ─── */
.notif-panel {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.notif-head { border-bottom: 1px solid var(--line); }
.notif-item { border-bottom: 1px solid var(--line); }
.notif-item.unread { background: var(--brand-soft); }
.notif-ico { border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
[data-theme="dark"] .notif-item.unread { background: var(--brand-soft); }

/* ─── 16) النوافذ المنبثقة: ورقة iOS بحركة نابضة ─── */
.modal-scrim {
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: fadeIn .2s;
}
.modal {
  border-radius: 24px;
  box-shadow: 0 32px 90px -18px rgba(0, 0, 0, .45);
  animation: iosPop .4s var(--pop);
}
@keyframes iosPop { from { opacity: 0; transform: scale(.92) translateY(14px); } }
.modal-head {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
}
.modal-head h4 { font-weight: 800; }
[data-theme="dark"] .modal { background: #1C1C1E; }
[data-theme="dark"] .modal-card { background: #1C1C1E; }
[data-theme="dark"] .modal-head { background: rgba(28, 28, 30, .9); }

/* ─── 17) التنبيهات المنزلقة: كبسولة زجاجية داكنة ─── */
.toast {
  background: rgba(28, 28, 30, .88);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  color: #F5F5F7;
  border-radius: 18px;
  box-shadow: 0 14px 44px -8px rgba(0, 0, 0, .5);
  border: .5px solid rgba(255, 255, 255, .12);
  animation: toastIn .42s var(--pop);
}
.toast.ok .ic { color: #30D158; }
.toast.err .ic { color: #FF453A; }
.toast.warn .ic { color: #FF9F0A; }
.toast b { font-weight: 800; }
.toast small { color: rgba(235, 235, 245, .65); }
[data-theme="dark"] .toast { background: rgba(44, 44, 46, .92); }
[data-theme="dark"] .toast.ok { background: rgba(44, 44, 46, .92); color: #F5F5F7; }
[data-theme="dark"] .toast.err { background: rgba(44, 44, 46, .92); color: #F5F5F7; }
[data-theme="dark"] .toast.warn { background: rgba(44, 44, 46, .92); color: #F5F5F7; }

/* ─── 18) زر الحضور الدائري: ملء النظام بنبض هادئ ─── */
.checkin-card { border: none; border-radius: 24px; }
.btn-check {
  background: radial-gradient(120% 120% at 30% 22%, #2E94FF, #007AFF 62%);
  box-shadow: 0 16px 36px -10px rgba(0, 122, 255, .55), inset 0 1px 1px rgba(255, 255, 255, .28);
  transition: transform .35s var(--spring), box-shadow .25s, filter .25s;
}
.btn-check:hover:not(:disabled) { transform: scale(1.03); }
.btn-check:active:not(:disabled) { transform: scale(.94); }
.btn-check.out {
  background: radial-gradient(120% 120% at 30% 22%, #FF6B60, #FF3B30 62%);
  box-shadow: 0 16px 36px -10px rgba(255, 59, 48, .55), inset 0 1px 1px rgba(255, 255, 255, .28);
}
.btn-check .ring { border-color: rgba(0, 122, 255, .35); }
.btn-check.out .ring { border-color: rgba(255, 59, 48, .35); }
.big-clock { font-weight: 800; letter-spacing: 0; }
.gps-line .ic { color: var(--brand); }

/* ─── 19) التقويم الشهري ─── */
.cal-dow span { background: transparent; color: var(--muted); border-radius: 8px; }
[data-theme="dark"] .cal-dow span { background: transparent; color: var(--muted); }
.cal-cell { border: 1px solid var(--line); border-radius: 15px; transition: transform .3s var(--spring), box-shadow .2s, border-color .2s; }
.cal-cell:hover { transform: scale(1.02); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .18); border-color: rgba(0, 122, 255, .45); }
.cal-cell.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-cell.present { border-inline-start: 4px solid #34C759; }
.cal-cell.late { border-inline-start: 4px solid #FF9500; }
.cal-cell.absent { border-inline-start: 4px solid #3A3A3C; }
.cal-cell.leave { border-inline-start: 4px solid #0A84FF; }
.cal-cell.off, .cal-cell.none { border-inline-start: 4px solid #C7C7CC; }
.cd.ok { background: #34C759; }
.cd.warn { background: #FF9500; }
.cd.info { background: #0A84FF; }
.cd.danger { background: #3A3A3C; }
[data-theme="dark"] .cal-cell.absent { background: color-mix(in srgb, #3A3A3C 45%, var(--card)); }

/* شارات الأجهزة واللافتات */
.dev-chip { border-radius: 999px; border-width: 1px; }
.pend-banner, .zone-out-banner { border-radius: 16px; border-width: 1px; }
.out-now-card { border-radius: 15px; border-width: 1px; }
.zone-strip .chip { font-weight: 800; }

/* ─── 20) بلاطات النقاط: ألوان نظام مسطحة ─── */
.pts-tile { border-radius: 18px; }
.pts-tile.red { background: linear-gradient(165deg, #FF6B60, #D70015); }
.pts-tile.green { background: linear-gradient(165deg, #3DDC6B, #248A3D); }
.pts-tile.black { background: linear-gradient(165deg, #5A5A5E, #1C1C1E); }
.pts-grid .pts-tile b { font-weight: 800; }

/* ─── 21) شارة الاتصال بالقاعدة ─── */
.sync-pill { border-radius: 999px; border-color: var(--line); background: var(--card); }
.sync-pill.sync-online { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
.sync-pill.sync-online .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.sync-pill.sync-syncing { background: var(--info-soft); border-color: transparent; color: var(--info); }
.sync-pill.sync-offline { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

/* ─── 22) الخرائط والكاميرات ─── */
.map-box { border: none; border-radius: 18px; }
.radar-box { border: none; border-radius: 18px; }
.lm-pin { border: 3px solid #fff; }

/* ─── 23) إصلاحات مكوّنات الوضع الليلي (استبدال القيم الكحلية القديمة) ─── */
[data-theme="dark"] .btn { background: var(--fill-2); }
[data-theme="dark"] .icon-btn:hover { background: var(--fill-2); }
[data-theme="dark"] .auth-panel { background: var(--bg); }
[data-theme="dark"] .chart-box { background: var(--chart-card); }
[data-theme="dark"] .toast { background: rgba(44, 44, 46, .92); }
[data-theme="dark"] .toast.ok { background: rgba(44, 44, 46, .92); }
[data-theme="dark"] .toast.err { background: rgba(44, 44, 46, .92); }
[data-theme="dark"] .toast.warn { background: rgba(44, 44, 46, .92); }
[data-theme="dark"] .in-ico { background: transparent; }
[data-theme="dark"] .tbl thead th { background: transparent; }
[data-theme="dark"] .tbl tbody tr:hover { background: var(--fill); }
[data-theme="dark"] .live-item, [data-theme="dark"] .notif-item.unread { background: var(--fill); }
[data-theme="dark"] .notif-item.unread { background: var(--brand-soft); }
[data-theme="dark"] .info-row, [data-theme="dark"] .face-enroll, [data-theme="dark"] .upload-prev { background: var(--fill); }
[data-theme="dark"] .dropzone { background: var(--fill); border-color: var(--line); }
[data-theme="dark"] .toggle { border-color: var(--line); background: var(--fill); }
[data-theme="dark"] .toggle .knob { background: #636366; }
[data-theme="dark"] .ifc-check { background: transparent; }
[data-theme="dark"] .demo-box { background: var(--fill); }
[data-theme="dark"] .topbar { background: var(--glass); }
[data-theme="dark"] .page-title { color: var(--ink); }
[data-theme="dark"] .side-scrim { background: rgba(0, 0, 0, .55); }
[data-theme="dark"] .empty { color: var(--muted); }
[data-theme="dark"] .sync-pill { background: var(--fill); }
[data-theme="dark"] .brand-mini { color: var(--brand-deep); }
[data-theme="dark"] .top-disc .disc-rank { box-shadow: none; }
[data-theme="dark"] .stat-ico.ok { background: var(--ok-soft); }
[data-theme="dark"] .stat-ico.warn { background: var(--warn-soft); }
[data-theme="dark"] .stat-ico.danger { background: var(--danger-soft); }
[data-theme="dark"] .stat-ico.info { background: var(--info-soft); }
[data-theme="dark"] .stat-ico.gold { background: var(--gold-soft); }
[data-theme="dark"] .modal-scrim { background: rgba(0, 0, 0, .5); }
[data-theme="dark"] .fp-chip { background: var(--card); }
[data-theme="dark"] .cal-cell { background: var(--card); }
[data-theme="dark"] .dev-chip { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .dev-chip.cur { background: var(--brand-soft); color: var(--brand-ink); }
[data-theme="dark"] .pend-banner b { color: var(--warn); }
[data-theme="dark"] .zone-out-banner b { color: var(--danger); }

/* ─── 24) تحسينات الطباعة: الورق يبقى نظيفاً ─── */
@media print {
  :root, [data-theme="dark"] {
    --bg: #fff; --card: #fff; --ink: #10152e; --muted: #5f6b8a; --line: #d5d9e4;
    --fill: #f5f6f9; --fill-2: #eceef4; --fill-3: #e3e6ee;
    --brand: #2B3990; --brand-soft: #EDF0FB; --brand-ink: #232C7A; --brand-deep: #2B3990;
    --ok: #0a7d43; --ok-soft: #ecfdf5; --ok-ink: #065f46;
    --danger: #C1272D; --danger-soft: #fdecec;
    --warn: #b45309; --warn-soft: #fef3e2;
    --info: #1B75BC; --info-soft: #e8f1f9;
    --gold: #a16207; --gold-soft: #fef3c7;
    --chart-grid: #e6eaf3; --chart-label: #8a94ad; --chart-ink: #334155; --chart-card: #fff;
  }
  .card, .stat, .table-wrap, .checkin-card { box-shadow: none !important; border: 1px solid #c9cedb !important; }
  .cal-cell { border-color: #bbb !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
}

/* ─── 25) لمسات نهائية ─── */
/* عنوان كبير بنَفَس iOS في صفحات البداية */
.page { letter-spacing: .001em; }
/* حالة فارغة بأيقونة هادئة */
.empty .ic { background: var(--fill-2); color: var(--muted); }
/* ملاحظات الأجهزة */
.sec-card { border-top: 3px solid var(--brand); border-top-left-radius: 2px; border-top-right-radius: 2px; }
/* الرتب الثلاث الأولى تُبقى ذهبية بلمسة أنعم */
.disc-rank { border-radius: 8px; }
.disc-rank.r1 { background: linear-gradient(160deg, #FFCf3E, #E6A200); }
.disc-rank.r2 { background: linear-gradient(160deg, #C7CDDA, #8E9BB3); }
.disc-rank.r3 { background: linear-gradient(160deg, #E0A372, #B26A35); }
/* أزرار الشاشة الرئيسية بصرياً أنقى */
.auth-form .btn[type="submit"] { font-weight: 800; letter-spacing: .01em; }
/* حركة دخول الصفحة بنبض iOS */
.page > * { animation: fadeUp .5s var(--spring) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* تمرير صف القائمة الملاصق */
.fraud-item { border-radius: 14px; border: none; }
[data-theme="dark"] .fraud-item { background: var(--danger-soft); }
.doc-detail-row { border-color: var(--line); }