/* ============================================================
   AL-Maraghi TECHS — internal admin skin (loaded AFTER Pico).
   Internal tools: DARK is default, NEUTRAL BLACK (never blue),
   English/LTR default (Arabic via dir="auto"), NO emoji (SVG icons),
   primary buttons brand RED. Toggle on every page incl. login.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Cairo:wght@400;600;700;800&display=swap');

/* ---- Design tokens + Pico remap: DARK (default) ---- */
:root,
:root[data-theme="dark"] {
  --bg:#141414; --surface:#181818; --surface-2:#1F1F1F; --subtle:rgba(255,255,255,.05);
  --text:#FFFFFF; --text-muted:#9A9A9F;
  --primary:#DA101B; --primary-text:#FF4D4D; --primary-hover:#FF4D4D;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.14);
  --shadow:0 8px 30px rgba(0,0,0,.45);

  --pico-background-color:#141414;
  --pico-color:#FFFFFF;
  --pico-muted-color:#9A9A9F;
  --pico-muted-border-color:rgba(255,255,255,.10);
  --pico-card-background-color:#181818;
  --pico-card-sectioning-background-color:#181818;
  --pico-card-border-color:rgba(255,255,255,.10);
  --pico-secondary-background:#1F1F1F;
  --pico-secondary-hover-background:#2a2a2a;
  --pico-secondary-foreground:#FFFFFF;
  --pico-form-element-background-color:#1F1F1F;
  --pico-form-element-border-color:rgba(255,255,255,.14);
  --pico-form-element-color:#FFFFFF;
  --pico-form-element-placeholder-color:#7d7d84;
  --pico-dropdown-background-color:#1F1F1F;
  --pico-code-background-color:#1F1F1F;
  --pico-primary:#DA101B; --pico-primary-background:#DA101B;
  --pico-primary-hover:#FF4D4D; --pico-primary-hover-background:#B00D15;
  --pico-primary-border:#DA101B; --pico-primary-inverse:#FFFFFF;
  --pico-primary-focus:rgba(218,16,27,.35);
  --pico-primary-underline:rgba(255,77,77,.5);
  --pico-del-color:#ff5a5a; --pico-ins-color:#25D366;
}

/* ---- Design tokens + Pico remap: LIGHT ---- */
:root[data-theme="light"] {
  --bg:#FFFFFF; --surface:#F7F7F8; --surface-2:#FFFFFF; --subtle:rgba(0,0,0,.03);
  --text:#141414; --text-muted:#6B6B70;
  --primary:#DA101B; --primary-text:#C40E18; --primary-hover:#B00D15;
  --border:rgba(0,0,0,.10); --border-strong:rgba(0,0,0,.14);
  --shadow:0 8px 30px rgba(0,0,0,.08);

  --pico-background-color:#FFFFFF;
  --pico-color:#141414;
  --pico-muted-color:#6B6B70;
  --pico-muted-border-color:rgba(0,0,0,.10);
  --pico-card-background-color:#FFFFFF;
  --pico-card-sectioning-background-color:#F7F7F8;
  --pico-card-border-color:rgba(0,0,0,.10);
  --pico-secondary-background:#F0F0F2;
  --pico-secondary-hover-background:#E7E7EA;
  --pico-secondary-foreground:#141414;
  --pico-form-element-background-color:#FFFFFF;
  --pico-form-element-border-color:rgba(0,0,0,.16);
  --pico-form-element-color:#141414;
  --pico-form-element-placeholder-color:#9a9aa0;
  --pico-dropdown-background-color:#FFFFFF;
  --pico-primary:#DA101B; --pico-primary-background:#DA101B;
  --pico-primary-hover:#B00D15; --pico-primary-hover-background:#B00D15;
  --pico-primary-border:#DA101B; --pico-primary-inverse:#FFFFFF;
  --pico-primary-focus:rgba(218,16,27,.25);
  --pico-primary-underline:rgba(196,14,24,.5);
  --pico-del-color:#c0392b; --pico-ins-color:#0a7d32;
}

:root {
  --pico-border-radius:10px;
  --pico-font-family:'Inter','Cairo','Segoe UI',Tahoma,sans-serif;
  --pico-font-family-sans-serif:'Inter','Cairo','Segoe UI',Tahoma,sans-serif;
  --pico-font-size:90%;
}

html, body { background: var(--bg); color: var(--text); font-family:'Inter','Cairo','Segoe UI',Tahoma,sans-serif; }
h1,h2,h3,h4 { color: var(--text); }

/* ---- Navbar (theme-aware, neutral) — logo left, nav centered ---- */
.site-header { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; }
.nav-inner { justify-content: flex-start !important; gap: 1rem; }
.nav-brand { flex: 0 0 auto; }
.nav-brand, .nav-brand span { color: var(--text) !important; font-weight: 800 !important; }
.nav-brand img { height: 36px !important; width: 36px !important; object-fit: contain !important; border-radius: 8px; }
.nav-links { flex: 1 1 auto; align-items: center; justify-content: center !important; }
.nav-link { color: var(--text-muted) !important; font-weight: 600 !important; font-size: .88rem !important; padding: .4rem .8rem !important; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; }
.nav-link:hover { background: var(--subtle) !important; color: var(--text) !important; }
.nav-link.active { background: rgba(218,16,27,.12) !important; color: var(--primary-text) !important; font-weight: 600 !important; }
.nav-link svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Theme toggle (SVG, injected by brand.js) */
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
#theme-toggle:hover { color: var(--text); border-color: var(--border-strong) !important; }
#theme-toggle svg { width: 18px; height: 18px; }

/* Tabs */
.page-tab.active { color: var(--primary-text); border-bottom-color: var(--primary); }
/* Pill tabs (accounting-style pages): white text on brand red */
.page-tabs.pills .page-tab.active { background: var(--primary) !important; color: #fff !important; }

/* Primary buttons = red */
button[type="submit"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
button[type="submit"]:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-add { background: transparent !important; border: 1px solid var(--primary) !important; color: var(--primary-text) !important; font-weight: 600; }
.btn-add:hover { background: var(--primary) !important; color: #fff !important; }

/* Focus ring */
:where(input,select,textarea):focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(218,16,27,.15) !important; }

.hint { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.req::after { content: " *"; color: var(--primary); font-weight: 700; }