/* =====================================================================
   Sky Vision — Enterprise Design System (sv-enterprise.css)
   Zero-dependency, self-contained. Loaded AFTER each page's inline <style>
   so it standardizes the existing tokens/classes without touching markup
   or JS. Refines the shared dark-navy identity to enterprise grade:
   typography, spacing rhythm, color scale, cards, buttons, inputs, tables,
   tabs, chips, toasts, KPI tiles, empty/loading states, focus & a11y.
   Evidence base: reduce visual noise + purposeful palette, clear visual
   hierarchy, progressive disclosure, accessible tables (scope/contrast),
   right-aligned numerics, visible focus, WCAG 4.5:1 text contrast.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  /* --- refined enterprise palette (same names the pages already use) --- */
  --bg:#0b1020; --bg2:#0f1526;
  --card:#151d33; --card2:#1b2440;
  --line:#2a3556; --line2:#3a4670;
  --txt:#eef2fb; --mut:#9aa8ca; --mut2:#71809f;
  --acc:#4f8cff; --acc-hover:#3f7bf0; --acc-weak:#16294d;
  --ok:#2ec27e; --ok-bg:#10331f;
  --warn:#f5a623; --warn-bg:#38290f;
  --bad:#ef5964; --bad-bg:#3a171b;
  --info:#8ab6ff; --info-bg:#15294d;
  /* spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  /* radius */
  --r1:6px; --r2:10px; --r3:14px; --rp:999px;
  /* type */
  --font:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  /* elevation */
  --sh1:0 1px 2px rgba(0,0,0,.28); --sh2:0 8px 28px rgba(3,7,18,.45);
  --focus:0 0 0 3px rgba(79,140,255,.42);
}

/* ------- base ------- */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html,body{ background:var(--bg); }
body{ font-family:var(--font); color:var(--txt); line-height:1.55; letter-spacing:.1px; }
::selection{ background:rgba(79,140,255,.32); }

/* refined typographic scale + hierarchy */
h1{ font-size:24px; font-weight:800; letter-spacing:-.2px; line-height:1.25; }
h2{ font-size:19px; font-weight:700; }
h3{ font-size:16px; font-weight:700; }
.sub,.mut{ color:var(--mut); }
.mut{ font-size:13px; }
b,strong{ font-weight:700; }
code,.mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }

/* ------- links ------- */
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc-hover); text-decoration:underline; text-underline-offset:2px; }

/* ------- cards / surfaces ------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s5); box-shadow:var(--sh1);
}
.card:has(> h1, > h2, > h3){ padding-top:var(--s4); }

/* ------- buttons: clear hierarchy, states, a11y ------- */
button,.btn{
  font-family:var(--font); font-weight:700; font-size:14px; line-height:1;
  border:1px solid transparent; border-radius:var(--r2); cursor:pointer;
  padding:10px 16px; color:#fff; background:var(--acc);
  transition:background .14s ease, border-color .14s ease, transform .06s ease, box-shadow .14s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
button:hover,.btn:hover{ background:var(--acc-hover); }
button:active,.btn:active{ transform:translateY(1px); }
button:focus-visible,.btn:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{ outline:none; box-shadow:var(--focus); }
button:disabled,.btn:disabled{ opacity:.5; cursor:not-allowed; }
button.ghost,.btn.ghost{ background:var(--card2); color:var(--txt); border-color:var(--line2); }
button.ghost:hover,.btn.ghost:hover{ background:#212c4d; border-color:var(--acc); }
button.bad,.btn.bad,button.danger{ background:var(--bad); }
button.bad:hover,.btn.bad:hover,button.danger:hover{ background:#e0434f; }
button.ok,.btn.ok{ background:var(--ok); }

/* ------- form controls ------- */
input,select,textarea{
  font-family:var(--font); font-size:14px; color:var(--txt);
  background:var(--card2); border:1px solid var(--line2); border-radius:var(--r2);
  padding:10px 12px; transition:border-color .14s ease, box-shadow .14s ease;
}
input::placeholder,textarea::placeholder{ color:var(--mut2); }
input:hover,select:hover,textarea:hover{ border-color:#46548a; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--acc); box-shadow:var(--focus); }
input[aria-invalid="true"],.invalid input,input.invalid{ border-color:var(--bad); }
label{ font-size:12.5px; color:var(--mut); font-weight:600; }

/* ------- chips / badges (status) — icon+label friendly, accessible ------- */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--rp); font-size:12px; font-weight:700;
  background:var(--card2); color:var(--txt); border:1px solid var(--line2); line-height:1.4;
}
.chip.ok{ background:var(--ok-bg); color:#68e6ab; border-color:#1c5e3d; }
.chip.warn{ background:var(--warn-bg); color:#ffcf7a; border-color:#6a4e17; }
.chip.bad{ background:var(--bad-bg); color:#ff9aa2; border-color:#6e2b30; }
.chip.info{ background:var(--info-bg); color:#a9caff; border-color:#274a86; }

/* ------- tables: enterprise data-table polish ------- */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th,th{
  text-align:inherit; font-weight:700; color:var(--mut); font-size:12px;
  letter-spacing:.3px; padding:10px 12px; border-bottom:1px solid var(--line2);
  position:sticky; top:0; background:var(--card); z-index:1; white-space:nowrap;
}
td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr{ transition:background .1s ease; }
tbody tr:hover{ background:#18213b; }
tbody tr:nth-child(even){ background:rgba(255,255,255,.014); }
tbody tr:last-child td{ border-bottom:0; }
td .num,.num,td.num{ font-variant-numeric:tabular-nums; }

/* ------- tabs / segmented nav ------- */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.tabs button,.tabs .tab{ background:transparent; color:var(--mut); border:1px solid transparent; padding:9px 14px; border-radius:var(--r2); font-size:13.5px; }
.tabs button:hover,.tabs .tab:hover{ background:var(--card2); color:var(--txt); }
.tabs button.on,.tabs .tab.on,.tabs button.active,.tabs .tab.active{ background:var(--acc-weak); color:#bcd4ff; border-color:#274a86; }

/* ------- KPI / stat tiles — meaningful, not decorative ------- */
.stat,.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s4) var(--s5); box-shadow:var(--sh1);
}
.stat .label,.kpi .label,.stat-label{ color:var(--mut); font-size:12.5px; font-weight:600; margin-bottom:6px; }
.stat .value,.kpi .value,.stat-value{ font-size:26px; font-weight:800; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s4); }

/* ------- toast / notifications ------- */
.toast{
  background:var(--card); color:var(--txt); border:1px solid var(--line2);
  border-inline-start:4px solid var(--acc); border-radius:var(--r2);
  box-shadow:var(--sh2); padding:12px 16px; font-size:14px;
}

/* ------- empty & loading states ------- */
.empty{ text-align:center; color:var(--mut); padding:var(--s8) var(--s4); }
.empty .ico{ font-size:34px; opacity:.55; display:block; margin-bottom:8px; }
.skel{ position:relative; overflow:hidden; background:var(--card2); border-radius:var(--r1); min-height:14px; }
.skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:sv-shimmer 1.2s infinite; }
@keyframes sv-shimmer{ 100%{ transform:translateX(100%); } }

/* ------- toolbar (search + filters + actions above a table) ------- */
.toolbar{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin-bottom:var(--s3); }
.toolbar .spacer{ flex:1; }

/* ------- page header ------- */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.divider{ height:1px; background:var(--line); margin:var(--s4) 0; border:0; }

/* ------- scrollbars (subtle, enterprise) ------- */
*{ scrollbar-width:thin; scrollbar-color:#2b3a63 transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2b3a63; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#3a4c7f; }

/* ------- wide content scrolls inside its own container ------- */
.table-wrap,.scroll-x{ overflow-x:auto; }

/* ------- motion & a11y ------- */
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }