/* =====================================================================
   Rushd / Shorkom — Shared Portal Design System  (theme.css)
   Clean, professional LIGHT UI (LinkedIn / Google grade). Visual layer
   ONLY — no markup or backend changes. Loaded AFTER each portal's inline
   <style> so it overrides the legacy dark tokens in place.

   Keep this file IDENTICAL across every *_wwwroot/theme.css so all
   customer portals share one design language. Edit once, copy to all.
   ===================================================================== */

:root {
  /* ---- Canonical palette ---- */
  --ds-bg:        #f6f8fb;
  --ds-bg-2:      #eef2f7;
  --ds-surface:   #ffffff;
  --ds-surface-2: #fafbfd;
  --ds-ink:       #0f1a2b;
  --ds-muted:     #5c6b84;
  --ds-line:      #e5e9f0;
  --ds-line-2:    #d7deea;
  --ds-brand:     #0b63d6;
  --ds-brand-ink: #0a56ba;
  --ds-brand-2:   #3b82f6;
  --ds-accent:    #0f9d76;
  --ds-ok:        #067647;
  --ds-warn:      #b54708;
  --ds-danger:    #b42318;
  --ds-focus:     rgba(11, 99, 214, .20);

  /* ---- Elevation & shape ---- */
  --ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --ds-shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --ds-shadow-lg: 0 8px 28px rgba(16, 24, 40, .10);
  --ds-radius:    14px;
  --ds-radius-sm: 10px;
  --ds-font: "Inter", "Segoe UI", system-ui, -apple-system, "Cairo", "Tajawal", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Remap every legacy portal token to the light system ---- */
  --bg: var(--ds-bg);
  --panel: var(--ds-surface);
  --panel-2: var(--ds-surface-2);
  --border: var(--ds-line);
  --text: var(--ds-ink);
  --ink: var(--ds-ink);
  --ink-2: var(--ds-ink);
  --muted: var(--ds-muted);
  --line: var(--ds-line);
  --paper: var(--ds-surface);
  --paper-ink: var(--ds-ink);
  --paper-line: var(--ds-line-2);
  --accent: var(--ds-brand);
  --accent-2: var(--ds-brand-2);
  --brand: var(--ds-brand);
  --blue: var(--ds-brand);
  --blue-2: var(--ds-brand-2);
  --ok: var(--ds-ok);
  --warn: var(--ds-warn);
  --danger: var(--ds-danger);
}

/* ---- Base ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ds-bg) !important;
  color: var(--ds-ink);
  font-family: var(--ds-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
::selection { background: rgba(11, 99, 214, .16); }
a { color: var(--ds-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Header / top nav ---- */
header.topbar, .topbar {
  background: rgba(255, 255, 255, .86) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: var(--ds-shadow-sm);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
}
.brand { color: var(--ds-ink); letter-spacing: -.01em; }
.brand .dot { background: var(--ds-brand) !important; box-shadow: 0 0 0 4px rgba(11, 99, 214, .12) !important; }
.brand small, .who, .muted, .hint, .panel p.sub { color: var(--ds-muted) !important; }

/* ---- Surfaces ---- */
.panel, .card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-sm);
}
.card { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card:hover { box-shadow: var(--ds-shadow); }
h1, h2, h3, .panel h2, .card h2 { color: var(--ds-ink); letter-spacing: -.01em; }

/* ---- Inputs ---- */
input, select, textarea {
  background: #fff !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-2) !important;
  border-radius: var(--ds-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa7bd; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--ds-brand) !important;
  box-shadow: 0 0 0 3px var(--ds-focus) !important;
}
label { color: var(--ds-muted) !important; font-weight: 600; }

/* ---- Buttons ---- */
button, .btn {
  border-radius: var(--ds-radius-sm) !important;
  font-family: var(--ds-font) !important;
  font-weight: 600 !important;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease, filter .15s ease;
}
button, .btn.primary {
  background: var(--ds-brand) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--ds-shadow-sm);
}
button:hover, .btn.primary:hover { background: var(--ds-brand-ink) !important; transform: translateY(-1px); box-shadow: var(--ds-shadow); filter: none; }
button:active, .btn.primary:active { transform: translateY(0); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-focus) !important; }
button.ghost, .btn.ghost {
  background: #fff !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-2) !important;
}
button.ghost:hover, .btn.ghost:hover { background: var(--ds-bg-2) !important; }
.btn.ok { background: var(--ds-accent) !important; color: #fff !important; }
.btn:disabled, button:disabled { opacity: .5; }

/* ---- Tabs ---- */
.tabs { border-bottom: 1px solid var(--ds-line); }
.tab {
  background: #fff !important;
  color: var(--ds-muted) !important;
  border: 1px solid var(--ds-line-2) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.tab:hover { color: var(--ds-ink) !important; border-color: var(--ds-brand) !important; }
.tab.active { background: var(--ds-brand) !important; color: #fff !important; border-color: transparent !important; }

/* ---- Tables ---- */
table th, table td { border-bottom: 1px solid var(--ds-line) !important; }
table th { color: var(--ds-muted) !important; }
tbody tr:hover td { background: var(--ds-surface-2); }

/* ---- Badges (tinted, tuned for contrast on light) ---- */
.b-ok     { background: rgba(6, 118, 71, .10) !important;  color: var(--ds-ok) !important; }
.b-warn   { background: rgba(181, 71, 8, .10) !important;  color: var(--ds-warn) !important; }
.b-danger { background: rgba(180, 35, 24, .10) !important; color: var(--ds-danger) !important; }
.b-muted  { background: rgba(92, 107, 132, .12) !important; color: var(--ds-muted) !important; }

/* ---- Console / code output: deliberate dark surface (like GitHub) ---- */
.out, pre {
  background: #0d1526 !important;
  color: #d6e2f5 !important;
  border: 1px solid #1c2942 !important;
  border-radius: var(--ds-radius-sm) !important;
}
pre code { background: transparent !important; border: 0 !important; color: inherit !important; }

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: #c4cede transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c4cede; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #a9b6cc; }