/* css/base.css: Design tokens (colors, spacing), base components, page shell. Loaded in the order listed in index.html. */

/* ===== TOKENS (approved 5.2) ===== */
:root{--navy-900:#071d42;--navy-800:#0b2a5b;--navy-700:#123a7a;--sky-500:#38a9f0;--sky-400:#5bbdf7;--sky-200:#bfe3fb;--sky-100:#e3f3fd;
--bg:#f4f8fc;--surface:#fff;--border:#dce6f2;--text:#0f1b2d;--muted:#5a6b82;--success:#1f9d63;--warning:#d98a0b;--danger:#d64545;
--font-latin:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-arabic:"Amiri","Noto Naskh Arabic",serif;--font-body:var(--font-latin);
--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;
--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--r-md:12px;--r-lg:16px;--r-pill:999px;--shadow-sm:0 1px 2px rgba(11,42,91,.06);
--sidebar-w:264px;--rail-w:72px;--header-h:60px;--bottom-h:64px;--focus:0 0 0 3px rgba(56,169,240,.45)}
html[lang="ar"]{--font-body:var(--font-arabic);font-size:106%}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font-body);line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
html[lang="ar"] body{line-height:1.9}
h1,h2,h3{margin:0;color:var(--navy-800);line-height:1.25}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}p{margin:0}
button,select{font:inherit}:focus-visible{outline:none;box-shadow:var(--focus)}
.ltr-text{direction:ltr;unicode-bidi:isolate;display:inline-block}.muted{color:var(--muted)}

/* ===== COMPONENTS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding-inline:var(--s5);border:1px solid transparent;border-radius:var(--r-md);font-weight:600;cursor:pointer}
.hdr-group{display:flex;align-items:center;gap:var(--s2)}
.hdr-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;height:48px;padding:0 6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--navy-800);font-size:.6875rem;font-weight:600;line-height:1.1;cursor:pointer}
.hdr-btn--sq{width:48px;min-width:48px;padding:0}
.hdr-btn:hover{background:var(--sky-100)}.hdr-btn[aria-current="page"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn--sm{min-height:40px;padding-inline:var(--s4);font-size:var(--text-sm)}
.btn--primary{background:var(--navy-800);color:#fff}.btn--primary:hover{background:var(--navy-700)}
.btn--secondary{background:var(--surface);color:var(--navy-800);border-color:var(--border)}.btn--secondary:hover{background:var(--sky-100)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--s5)}
.stat{display:flex;align-items:center;gap:var(--s4)}
.stat__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);background:var(--sky-100);color:var(--navy-700);flex-shrink:0}
.stat__value{font-size:var(--text-2xl);font-weight:700;color:var(--navy-800);line-height:1.1}.stat__label{font-size:var(--text-sm);color:var(--muted)}
.badge{display:inline-flex;padding:2px var(--s3);border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:600;background:var(--sky-100);color:var(--navy-700)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.logo{display:flex;align-items:center;gap:var(--s3)}.logo svg{width:40px;height:40px;flex-shrink:0}
.logo__text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.logo__en{font-family:var(--font-latin);font-weight:700;letter-spacing:.04em;font-size:var(--text-sm);white-space:nowrap}
.logo__ar{font-family:var(--font-arabic);font-size:var(--text-xl);font-weight:700;color:var(--sky-400);line-height:1.5;margin-bottom:2px;white-space:nowrap}
.lang-switch{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--sky-100);border:1px solid var(--sky-200)}
.lang-switch button{border:0;background:transparent;padding:var(--s1) var(--s3);border-radius:var(--r-pill);color:var(--navy-700);font-weight:600;font-size:var(--text-sm);cursor:pointer;min-height:32px}
.lang-switch button[aria-pressed="true"]{background:var(--navy-800);color:#fff}.lang-switch button[data-lang="ar"]{font-family:var(--font-arabic);font-size:var(--text-md)}
.select{min-height:40px;padding-inline:var(--s3);border:1px solid var(--border);border-radius:var(--r-md);background:#fff;color:var(--navy-800);font-weight:600}
.field-label{display:block;font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s1)}
/* states */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s6) var(--s4)}
.state__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sky-100);color:var(--navy-700)}
.state--error .state__icon{background:#fbe3e3;color:var(--danger)}.state--warn .state__icon{background:#fdf0d9;color:var(--warning)}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,#e8eff7 25%,#f5f8fc 50%,#e8eff7 75%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.skel--h{height:32px;width:55%}.skel--c{height:96px}.skel--b{height:180px}

/* ===== SHELL ===== */
.sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar-w);background:var(--navy-800);color:#fff;display:none;flex-direction:column;padding:var(--s4);gap:var(--s4);z-index:20}
.sidebar nav{display:flex;flex-direction:column;gap:var(--s1);overflow-y:auto;flex:1}
.nav-item{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding-inline:var(--s3);border:0;border-radius:var(--r-md);background:transparent;color:rgba(255,255,255,.82);font-weight:500;cursor:pointer;text-align:start;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}.nav-item[aria-current="page"]{background:var(--sky-500);color:#fff}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--header-h);padding-inline:var(--s4);background:var(--surface);border-bottom:1px solid var(--border)}
.topbar .logo{color:var(--navy-800)}.topbar__title{display:none;font-weight:700;color:var(--navy-800);font-size:var(--text-lg)}
.topbar__actions{display:flex;align-items:center;gap:var(--s3)}.topbar .role-pick{display:none}.topbar .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.main{padding:var(--s4);padding-bottom:calc(var(--bottom-h) + var(--s5))}
.container{max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s5)}
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
.bottom-nav{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;height:var(--bottom-h);padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--border)}
.bottom-nav button{flex:1;min-width:0;padding-inline:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:.6875rem;line-height:1.15;cursor:pointer}
.bottom-nav button span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2; line-clamp: 2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
.bottom-nav button[aria-current="page"]{color:var(--navy-800);font-weight:700}.bottom-nav button[aria-current="page"] svg{color:var(--sky-500)}
.overlay{position:fixed;inset:0;z-index:40;background:rgba(7,29,66,.45);display:flex;align-items:flex-end}
.sheet{width:100%;max-height:82vh;overflow-y:auto;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom))}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.sheet__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.sheet__grid button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3) var(--s2);border:1px solid var(--border);border-radius:var(--r-md);background:#fff;color:var(--navy-800);font-size:var(--text-xs);font-weight:600;cursor:pointer;text-align:center}
.sheet__grid button[aria-current="page"]{background:var(--navy-800);color:#fff}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-md);background:var(--sky-100);color:var(--navy-800);cursor:pointer}
@media(min-width:768px){
.sidebar{display:flex;width:var(--rail-w);align-items:center;padding-inline:var(--s2)}
.sidebar .logo__text,.sidebar .nav-item span{display:none}.sidebar .nav-item{justify-content:center;padding-inline:0;width:48px}
.shell-body{margin-inline-start:var(--rail-w)}.bottom-nav,.overlay{display:none}.main{padding:var(--s5)}
.grid--stats,.grid--two{grid-template-columns:repeat(2,1fr)}.topbar .logo{display:none}.topbar__title{display:block}.topbar .role-pick{display:block}}
@media(min-width:1024px){
.sidebar{width:var(--sidebar-w);align-items:stretch;padding:var(--s4)}.sidebar .logo__text{display:flex}.sidebar .nav-item span{display:inline}
.sidebar .nav-item{justify-content:flex-start;padding-inline:var(--s3);width:auto}.shell-body{margin-inline-start:var(--sidebar-w)}
.main{padding:var(--s6)}.grid--stats{grid-template-columns:repeat(4,1fr)}}
/* PAGE CONTENT FONT ONLY: English 12px, Arabic 13px (logo, header, sidebar, bottom bar and More panel are untouched) */
.main{font-size:12px;--text-xs:.75em;--text-sm:.875em;--text-md:1em;--text-lg:1.125em;--text-xl:1.375em;--text-2xl:1.75em}
html[lang="ar"] .main{font-size:17px}