/* ---------- Theme tokens ---------- */
:root {
    color-scheme: light;
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --primary: #0284c7;
    --primary-h: #0369a1;
    --on-primary: #ffffff;
    --danger: #dc2626;
    --danger-h: #b91c1c;
    --ring: #38bdf8;
    --nav: #0f172a;
    --nav-text: #e2e8f0;
    --nav-hover: #1e293b;
    --nav-active: #334155;
    --overlay: rgba(15, 23, 42, .5);
    --shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0f1c;
    --surface: #121a2b;
    --surface-2: #19243a;
    --text: #e6ebf4;
    --muted: #93a1b8;
    --border: #232f4a;
    --border-strong: #34445f;
    --primary: #38bdf8;
    --primary-h: #7dd3fc;
    --on-primary: #04141f;
    --danger: #ef4444;
    --danger-h: #f87171;
    --ring: #38bdf8;
    --nav: #0d1424;
    --nav-text: #dbe4f3;
    --nav-hover: #18233a;
    --nav-active: #223152;
    --overlay: rgba(2, 6, 14, .72);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

body { font-family: 'Cairo', system-ui, sans-serif; background: var(--bg); color: var(--text); }

.num { direction: ltr; unicode-bidi: embed; display: inline-block; font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }

/* ---------- Components ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; box-shadow: var(--shadow); }

.fld {
    width: 100%; border: 1px solid var(--border-strong); border-radius: .5rem;
    padding: .5rem .75rem; background: var(--surface); color: var(--text); font: inherit;
}
.fld::placeholder { color: var(--muted); opacity: .8; }
.fld:focus { outline: 2px solid var(--ring); border-color: var(--ring); }
input[type="checkbox"] { accent-color: var(--primary); }

.lbl { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }

.btn {
    display: inline-block; border-radius: .5rem; padding: .5rem 1rem; font-weight: 600;
    font-size: .9rem; cursor: pointer; border: 1px solid transparent; text-align: center; font-family: inherit;
}
.btn-p { background: var(--primary); color: var(--on-primary); }
.btn-p:hover { background: var(--primary-h); }
.btn-d { background: var(--danger); color: #fff; }
.btn-d:hover { background: var(--danger-h); }
.btn-g { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-g:hover { background: var(--surface-2); }
.btn-sm { padding: .25rem .625rem; font-size: .8rem; }

.badge { display: inline-block; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; font-family: inherit; }

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { background: var(--surface-2); text-align: start; padding: .5rem .75rem; white-space: nowrap; }
.tbl td { padding: .5rem .75rem; border-top: 1px solid var(--border); vertical-align: top; }
.tbl tfoot td { font-weight: 700; background: var(--surface-2); }

.modal-back {
    position: fixed; inset: 0; background: var(--overlay); z-index: 50;
    align-items: center; justify-content: center; padding: 1rem;
}
.modal-box {
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: .75rem;
    width: 100%; max-width: 40rem; max-height: 90vh; overflow-y: auto; padding: 1.25rem;
}

/* ---------- Navigation ---------- */
.site-nav { background: var(--nav); color: var(--nav-text); }
.nav-link { display: block; padding: .5rem .75rem; border-radius: .5rem; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; text-align: start; width: 100%; }
.nav-link:hover { background: var(--nav-hover); }
.nav-link.active { background: var(--nav-active); }
.nav-menu { background: var(--nav); }

/* ---------- Language / theme toggles ---------- */
.ui-toggles { display: flex; gap: .4rem; align-items: center; }
.tgl {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.1rem;
    padding: 0 .65rem; border-radius: .5rem; border: 1px solid rgba(148, 163, 184, .35);
    color: inherit; background: transparent; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
}
.tgl:hover { background: rgba(148, 163, 184, .18); }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: inline; }
.auth-toggles { position: fixed; top: .75rem; inset-inline-end: .75rem; color: var(--text); }

/* ---------- Dark-mode remap of the Tailwind palette classes used in the templates ---------- */
@media screen {
    html[data-theme="dark"] .bg-white { background-color: var(--surface); }
    html[data-theme="dark"] .bg-slate-50 { background-color: var(--bg); }
    html[data-theme="dark"] .bg-slate-100,
    html[data-theme="dark"] .bg-slate-200 { background-color: var(--surface-2); color: var(--text); }
    html[data-theme="dark"] .text-slate-500,
    html[data-theme="dark"] .text-slate-600 { color: var(--muted); }
    html[data-theme="dark"] .text-slate-700,
    html[data-theme="dark"] .text-slate-800,
    html[data-theme="dark"] .text-slate-900 { color: var(--text); }

    html[data-theme="dark"] .text-emerald-600,
    html[data-theme="dark"] .text-emerald-700 { color: #34d399; }
    html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7; }
    html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, .2); }
    html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, .12); }
    html[data-theme="dark"] .border-emerald-300 { border-color: rgba(52, 211, 153, .4); }

    html[data-theme="dark"] .text-red-600,
    html[data-theme="dark"] .text-red-700 { color: #f87171; }
    html[data-theme="dark"] .text-red-800 { color: #fca5a5; }
    html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, .2); }
    html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, .12); }
    html[data-theme="dark"] .border-red-300 { border-color: rgba(248, 113, 113, .4); }

    html[data-theme="dark"] .text-amber-600,
    html[data-theme="dark"] .text-amber-700 { color: #fbbf24; }
    html[data-theme="dark"] .text-amber-800 { color: #fcd34d; }
    html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, .2); }
    html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, .12); }
    html[data-theme="dark"] .border-amber-300,
    html[data-theme="dark"] .border-amber-400 { border-color: rgba(251, 191, 36, .45); }

    html[data-theme="dark"] .text-sky-700 { color: #38bdf8; }
    html[data-theme="dark"] .border-sky-300 { border-color: rgba(56, 189, 248, .45); }
}

/* ---------- Print (always light) ---------- */
@media print {
    .no-print, .ui-toggles { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { border: none; padding: 0; box-shadow: none; background: #fff; }
    .tbl th, .tbl tfoot td { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tbl td { border-color: #ccc; }
    @page { size: A4; margin: 15mm; }
}

.sign-box { border-top: 1px solid currentColor; margin-top: 3.5rem; padding-top: .35rem; text-align: center; font-size: .9rem; }