/* ═══════════════════════════════════════════════════════════════════════
   حضوري — طبقة التصميم الكاملة بأسلوب iOS
   تُحمَّل بعد styles.css وتعيد تلوين كل المكوّنات بلغة Apple:
   ألوان النظام · قوائم مجمّعة · مفاتيح تبديل · شرائح مجزأة ·
   إنذارات مركزية · لوحات سفلية · شريط جانبي iPadOS · عناوين كبيرة
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1) لوحة ألوان النظام (فاتح) ─── */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Cairo', 'Segoe UI', system-ui, sans-serif;

  /* أسطح iOS: خلفية مجمّعة وبطاقات ثانوية */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --ink: #0A0A0C;
  --muted: #6C6C70;
  --line: rgba(60, 60, 67, .16);
  --ios-fill: rgba(118, 118, 128, .12);
  --ios-fill-2: rgba(118, 118, 128, .18);

  /* اللون المميز: أزرق النظام (يبقى أزرق المعهد في الترويسات فقط) */
  --brand: #007AFF;
  --brand-2: #007AFF;
  --brand-deep: #0060DF;
  --brand-soft: rgba(0, 122, 255, .12);
  --brand-ink: #007AFF;

  --danger: #FF3B30;   --danger-soft: rgba(255, 59, 48, .12);
  --warn: #FF9500;     --warn-soft: rgba(255, 149, 0, .14);
  --ok: #34C759;       --ok-soft: rgba(52, 199, 89, .14);   --ok-ink: #248A3D;
  --info: #007AFF;     --info-soft: rgba(0, 122, 255, .12);
  --gold: #FF9500;     --gold-soft: rgba(255, 149, 0, .16);

  /* الشريط الجانبي: iPadOS فاتح شبه شفاف */
  --side: rgba(242, 242, 247, .88);
  --side-2: rgba(255, 255, 255, .0);
  --side-ink: #3C3C43;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 0 0 .5px rgba(60, 60, 67, .05), 0 2px 8px rgba(60, 60, 67, .04);
  --shadow-lg: 0 16px 44px -12px rgba(0, 0, 0, .28);

  --chart-grid: #E5E5EA;
  --chart-label: #8E8E93;
  --chart-ink: #1C1C1E;
  --chart-card: #FFFFFF;
}

/* ─── 2) لوحة ألوان النظام (ليلي — ألوان iOS الداكنة) ─── */
[data-theme="dark"] {
  --bg: #000000;
  --card: #1C1C1E;
  --ink: #FFFFFF;
  --muted: #98989F;
  --line: rgba(84, 84, 88, .55);
  --ios-fill: rgba(118, 118, 128, .24);
  --ios-fill-2: rgba(118, 118, 128, .32);

  --brand: #0A84FF;
  --brand-2: #0A84FF;
  --brand-deep: #3395FF;
  --brand-soft: rgba(10, 132, 255, .16);
  --brand-ink: #409CFF;

  --danger: #FF453A;   --danger-soft: rgba(255, 69, 58, .16);
  --warn: #FF9F0A;     --warn-soft: rgba(255, 159, 10, .16);
  --ok: #30D158;       --ok-soft: rgba(48, 209, 88, .16);   --ok-ink: #30D158;
  --info: #64D2FF;     --info-soft: rgba(100, 210, 255, .14);
  --gold: #FF9F0A;     --gold-soft: rgba(255, 159, 10, .18);

  --side: rgba(28, 28, 30, .92);
  --side-2: rgba(0, 0, 0, 0);
  --side-ink: rgba(235, 235, 245, .78);

  --shadow: 0 0 0 .5px rgba(255, 255, 255, .06), 0 2px 10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, .8);
  --chart-grid: #2C2C2E;
  --chart-label: #98989F;
  --chart-ink: #FFFFFF;
  --chart-card: #1C1C1E;
}

/* ─── 3) الطباعة: مقياس iOS ─── */
body { letter-spacing: -.014em; }
h1, h2, h3, h4 { letter-spacing: -.022em; }
.page-head h3 { font-size: 1.62em; font-weight: 800; letter-spacing: -.03em; }
.page-title { font-size: 1.28em; font-weight: 800; letter-spacing: -.025em; }
.card h4 { font-size: 1.02em; font-weight: 700; }
small, .muted { letter-spacing: -.006em; }

/* ─── 4) البطاقات: قوائم مجمّعة بحد شعري ─── */
.card, .stat, .ann-card, .pts-tile, .checkin-card, .ios-face-card,
.pts-progress-card, .notif-panel {
  background: var(--card) !important;
  border: .5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

/* ─── 5) الأزرار: نظام iOS ─── */
.btn {
  border-radius: 12px !important;
  font-weight: 590 !important;
  font-size: .95em;
  letter-spacing: -.01em;
  transition: transform .13s cubic-bezier(.2, .8, .3, 1.2), filter .15s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.965) !important; filter: brightness(.9); }
.btn.primary {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { background: var(--danger) !important; color: #fff !important; }
.btn.dangersoft { background: var(--danger-soft) !important; color: var(--danger) !important; }
.btn.oksoft { background: var(--ok-soft) !important; color: var(--ok) !important; }
.btn.oksoft .ic, .btn.dangersoft .ic { color: inherit !important; }
.btn.warnsoft { background: var(--warn-soft) !important; color: var(--warn) !important; }
.btn.ghost { background: var(--ios-fill) !important; color: var(--brand) !important; border: none !important; }
.btn.ghost:hover { background: var(--ios-fill-2) !important; }
.btn:disabled { opacity: .4 !important; }
.icon-btn { border-radius: 10px; }
.icon-btn:hover { background: var(--ios-fill); }

/* زر الحضور الدائري: أخضر/رمادي النظام */
.btn-check {
  background: var(--ok) !important;
  box-shadow: 0 12px 30px -10px rgba(52, 199, 89, .55), inset 0 -3px 8px rgba(0, 0, 0, .12) !important;
}
.btn-check.out { background: #8E8E93 !important; box-shadow: 0 12px 30px -10px rgba(142, 142, 147, .5) !important; }
.btn-check .ring { border-color: rgba(52, 199, 89, .35) !important; }
.btn-check.out .ring { border-color: rgba(142, 142, 147, .3) !important; }

/* ─── 6) الحقول: تعبئة رمادية بلا إطار (iOS) ─── */
.field span { font-size: .8em; font-weight: 600; color: var(--muted); }
.field input, .field select, .in-month, input[type="month"], input[type="date"], input[type="time"] {
  background: var(--ios-fill) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-weight: 500;
}
.field input:focus, .field select:focus, .in-month:focus {
  background: var(--card) !important;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 22%, transparent) !important;
  outline: none !important;
}
.field input::placeholder { color: var(--ios-gray, #8E8E93); }

/* ─── 7) مفاتيح التبديل (UISwitch) لكل مربعات الاختيار ─── */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 46px !important; height: 28px !important;
  border-radius: 999px !important;
  background: var(--ios-fill-2) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background .22s cubic-bezier(.3, .9, .4, 1) !important;
  flex: none !important;
  margin: 0 !important;
  vertical-align: middle;
}
input[type="checkbox"]::after {
  content: '';
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform .24s cubic-bezier(.3, .9, .4, 1.06) !important;
}
input[type="checkbox"]:checked { background: var(--ok) !important; }
[data-theme="dark"] input[type="checkbox"]:checked { background: #30D158 !important; }
[dir="rtl"] input[type="checkbox"]:checked::after { transform: translateX(-18px); }
[dir="ltr"] input[type="checkbox"]:checked::after { transform: translateX(18px); }
input[type="checkbox"]:active::after { width: 27px; }

/* ─── 8) الشرائح المجزأة (Segmented Controls) ─── */
.tabbar.emp-tabs, .auth-tabs, .auth-subtabs {
  background: var(--ios-fill) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 2px !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.tab, .auth-tab, .auth-subtab {
  border-radius: 10px !important;
  font-weight: 590 !important;
  color: var(--ink) !important;
}
.tab .ic, .auth-subtab .ic { opacity: .75; }
.tab.active, .auth-tab.active, .auth-subtab.active {
  background: var(--card) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 0 0 .5px var(--line) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .tab.active,
[data-theme="dark"] .auth-tab.active,
[data-theme="dark"] .auth-subtab.active { background: #636366 !important; box-shadow: none !important; }

/* شريط تبويب سفلي على الجوال (iOS Tab Bar) */
@media (max-width: 900px) {
  .app-view:not(.with-sidebar) { padding-bottom: 0; }
  .tabbar.emp-tabs {
    position: fixed !important;
    inset-inline: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 60 !important;
    border-radius: 18px !important;
    padding: 5px !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22) !important;
  }
  .app-view:not(.with-sidebar) .page-host { padding-bottom: 92px !important; }
}

/* ─── 9) الشريط العلوي: زجاج iOS بخط شعري ─── */
.topbar {
  background: rgba(242, 242, 247, .78) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--line) !important;
}
[data-theme="dark"] .topbar { background: rgba(18, 18, 20, .78) !important; }
.topbar::after { display: none; }
.avatar { border-radius: 50% !important; box-shadow: 0 0 0 .5px var(--line); }
.badge, .side-badge {
  background: var(--danger) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ─── 10) الشريط الجانبي: iPadOS ─── */
.sidebar {
  background: var(--side) !important;
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border-inline-end: .5px solid var(--line) !important;
}
.side-brand { color: var(--ink) !important; }
.side-brand b { color: var(--ink) !important; }
.side-brand small { color: var(--muted) !important; }
.side-nav { padding-inline: 10px !important; gap: 2px; }
.side-link {
  color: var(--side-ink) !important;
  border-radius: 10px !important;
  font-weight: 590 !important;
  padding: .62em .9em !important;
  transition: background .15s, color .15s;
}
.side-link .ic { opacity: .8; }
.side-link:hover { background: var(--ios-fill) !important; color: var(--ink) !important; }
.side-link.active {
  background: var(--ios-fill-2) !important;
  color: var(--ink) !important;
}
.side-link.active::before { display: none; }
.side-link.active .ic { color: var(--brand); opacity: 1; }
.side-foot { border-top: .5px solid var(--line) !important; }
.side-foot .btn { color: var(--danger) !important; background: transparent !important; }

/* ─── 11) الصفحات والعناوين ─── */
.page { max-width: 1060px; margin-inline: auto; }
.page-head { align-items: baseline; }
.chip {
  background: var(--ios-fill) !important;
  color: var(--muted) !important;
  border: none !important;
  font-weight: 590 !important;
}
.chip.ok { background: var(--ok-soft) !important; color: var(--ok-ink) !important; }
.chip.warn { background: var(--warn-soft) !important; color: var(--warn) !important; }
.chip.danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.chip.info { background: var(--info-soft) !important; color: var(--brand) !important; }
.chip.gray { background: var(--ios-fill) !important; color: var(--muted) !important; }
.chip.gold { background: var(--gold-soft) !important; color: var(--gold) !important; }
[data-theme="dark"] .chip.ok { color: #30D158 !important; }
[data-theme="dark"] .chip.warn { color: #FF9F0A !important; }
[data-theme="dark"] .chip.danger { color: #FF453A !important; }
[data-theme="dark"] .chip.info,
[data-theme="dark"] .chip.gold { color: #FF9F0A !important; }
[data-theme="dark"] .chip.info { color: #64D2FF !important; }

/* ─── 12) الجداول: فواصل شعرية ورأس هادئ ─── */
.tbl th {
  font-size: .78em !important;
  text-transform: none;
  color: var(--muted) !important;
  font-weight: 640 !important;
  border-bottom: .5px solid var(--line) !important;
}
.tbl td { border-bottom: .5px solid var(--line) !important; }
.tbl tbody tr:last-child td { border-bottom: none !important; }
.tbl tbody tr:hover { background: var(--ios-fill) !important; }
.tbl tfoot tr { background: transparent !important; border-top: .5px solid var(--line); }

/* ─── 13) صفوف المعلومات (kv): نمط قائمة iOS ─── */
.kv {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .55rem 0 !important;
  border-bottom: .5px solid var(--line) !important;
  border-radius: 0 !important;
}
.kv:last-of-type { border-bottom: none !important; }
.kv small { font-size: .84em; color: var(--muted); }
.kv b { font-weight: 590; text-align: end; }

/* ─── 14) النوافذ: إنذار iOS مركزي على الحاسب / لوحة سفلية على الجوال ─── */
.modal-scrim {
  background: rgba(0, 0, 0, .34) !important;
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
}
.modal-scrim .modal {
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  background: var(--card) !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 24px 70px -14px rgba(0, 0, 0, .45) !important;
  max-width: 400px !important;
  overflow: hidden;
}
.modal-head {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-align: center;
}
.modal-head h4 { font-size: 1.08em; font-weight: 700; text-align: center; width: 100%; }
.modal-head .icon-btn { position: absolute; inset-inline-end: 10px; top: 10px; opacity: .55; }
.modal-foot {
  border-top: .5px solid var(--line) !important;
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-top: .9rem !important;
}
.modal-foot .btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand) !important;
  font-size: 1.05em !important;
  font-weight: 590 !important;
  padding: .85em .5em !important;
  min-height: 44px;
}
.modal-foot .btn + .btn { border-inline-start: .5px solid var(--line) !important; }
.modal-foot .btn:active { background: var(--ios-fill) !important; transform: none !important; }
.modal-foot .btn.danger, .modal-foot .btn.dangersoft { color: var(--danger) !important; }
.modal-foot .btn.primary { color: var(--brand) !important; }
/* مقبض اللوحة السفلية على الجوال */
@media (max-width: 640px) {
  .modal-scrim { align-items: flex-end !important; background: rgba(0, 0, 0, .4) !important; }
  .modal-scrim .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)) !important;
    animation: iosSheetUp .36s cubic-bezier(.32, .72, .28, 1) !important;
  }
  .modal-scrim .modal::before {
    content: '';
    display: block;
    width: 38px; height: 5px; border-radius: 3px;
    background: var(--ios-fill-2);
    margin: 6px auto 2px;
  }
  .modal-foot .btn { min-height: 46px; }
}
@keyframes iosSheetUp { from { transform: translateY(56px); opacity: .5; } to { transform: none; opacity: 1; } }

/* ─── 15) التنبيهات المنزلقة: لافتة iOS ─── */
.toast {
  background: rgba(250, 250, 252, .92) !important;
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(60, 60, 67, .08) !important;
  color: #0A0A0C;
}
[data-theme="dark"] .toast { background: rgba(44, 44, 46, .94) !important; color: #fff; }
.toast b { font-weight: 640; }
.toast .ic { color: var(--ok) !important; }
.toast.warn .ic { color: var(--warn) !important; }
.toast.err .ic { color: var(--danger) !important; }

/* ─── 16) شاشة الدخول: نظيفة بأسلوب iOS ─── */
.auth-view {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(0, 122, 255, .10), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(52, 199, 89, .08), transparent 55%),
    var(--bg) !important;
}
[data-theme="dark"] .auth-view {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(10, 132, 255, .14), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(48, 209, 88, .08), transparent 55%),
    #000 !important;
}
.auth-hero, .auth-hero::before { background: transparent !important; }
.hero-blob { filter: blur(70px); opacity: .5; }
.hero-blob.b1 { background: rgba(0, 122, 255, .35) !important; }
.hero-blob.b2 { background: rgba(52, 199, 89, .28) !important; }
.auth-brand h1 { letter-spacing: -.035em; }
.auth-card {
  background: var(--card) !important;
  border: .5px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .25) !important;
}
.auth-card::before { display: none; }
.demo-box { background: var(--ios-fill) !important; border-radius: 14px !important; border: none !important; }
.demo-chip {
  background: var(--card) !important;
  border: .5px solid var(--line) !important;
  border-radius: 11px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-weight: 590;
}
.demo-chip:active { transform: scale(.97); }
.brand-feats li { color: var(--muted); }
.brand-feats .ic { color: var(--brand); }

/* ─── 17) بطاقات إحصاء ومكوّنات ─── */
.stat { border-radius: var(--radius) !important; }
.stat b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-ico { border-radius: 12px !important; }
.pts-tile { background: var(--card) !important; }
.dev-note, .privacy-note {
  background: var(--ios-fill) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--muted);
}
.dev-note.ok { background: var(--ok-soft) !important; color: var(--ok-ink) !important; }
.dev-note.warn { background: var(--warn-soft) !important; color: var(--warn) !important; }
.empty { color: var(--muted); }
.form-error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
}
.fp-chip { background: var(--ios-fill) !important; border-radius: 999px !important; border: none !important; }
.progress { background: var(--ios-fill-2) !important; border-radius: 999px !important; }
.progress i { background: var(--brand) !important; border-radius: 999px !important; }
.progress i[style*="34C759"], .progress i[style*="34c759"] { background: var(--ok) !important; }

/* ─── 18) لوحة الإشعارات ─── */
.notif-panel {
  box-shadow: var(--shadow-lg) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.notif-item { border-bottom: .5px solid var(--line) !important; border-radius: 0 !important; }
.notif-item:last-child { border-bottom: none !important; }
.notif-item.unread { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.notif-ico { border-radius: 10px !important; }

/* ─── 19) بطاقة الاستئذان الحية ─── */
.permit-live { border-inline-start: none !important; border: .5px solid var(--line) !important; }
.permit-live-ico { border-radius: 13px !important; background: var(--warn) !important; box-shadow: none !important; }
.permit-live-ico.ok { background: var(--ok) !important; }

/* ─── 20) شارة المزامنة ─── */
.sync-pill { border: none !important; background: var(--ios-fill) !important; color: var(--muted) !important; }
.sync-pill.sync-online { background: var(--ok-soft) !important; color: var(--ok-ink) !important; }
.sync-pill.sync-syncing { background: var(--info-soft) !important; color: var(--brand) !important; }
.sync-pill.sync-offline { background: var(--warn-soft) !important; color: var(--warn) !important; }

/* ─── 21) تفاصيل حركية ─── */
.card, .stat, .ann-card { transition: transform .16s ease, box-shadow .16s ease; }
.page-head .spacer { flex: 1; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ios-fill-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* أرقام جدولة للساعات والأوقات */
.big-clock, .top-clock span, .fp-mono, .num { font-variant-numeric: tabular-nums; }

/* خريطة Leaflet بزوايا iOS */
.map-box { border-radius: 14px !important; border: .5px solid var(--line) !important; overflow: hidden; }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}