/* ==========================================================================
   CodeHub — base.css
   Design tokens, reset, typography, the app shell skeleton, utilities.

   RULES FOR EVERY STYLESHEET IN THIS PROJECT
   1. RTL first. Use LOGICAL properties only (margin-inline, padding-block,
      inset-inline-start, border-start-start-radius). Physical left/right is
      forbidden — the UI must mirror itself when the locale flips to English.
   2. Colors come from tokens. Never hardcode a hex in a component/view.
   3. FLAT. No glass, no backdrop-filter, no glow, no aurora, no neon, no
      gradient card backgrounds. Cards are --surface + 1px --line + radius 12px.
      The ONLY gradients in the product: the logo mark, the primary button and
      the donut gauge strokes (plus the solid-blue active nav block).
      Shadows: none on cards; `--shadow-pop` only on popovers/menus/toasts.
   4. Motion: 150ms ease, opacity/colour only; respects prefers-reduced-motion.
   5. Zero external resources — no fonts, no images, no CDN.

   LAYOUT SKELETON (RTL: the sidebar is grid column 1 → inline-start → the
   RIGHT edge in Hebrew; in English it mirrors to the left automatically):

     ┌──────────────────────────── page (--bg) ───────────┬───────────────┐
     │  topbar 72px (--bg-2, bottom hairline)             │  brand 84px   │
     │  ┌──────────────────────────────────────────────┐  ├───────────────┤
     │  │  #view — padding 22px, max-inline-size 1500px │  │  flat nav     │
     │  │                                              │  ├───────────────┤
     │  └──────────────────────────────────────────────┘  │  server card  │
     └────────────────────────────────────────────────────┴───────────────┘
   ========================================================================== */

/* ---------- Tokens: dark (default) ---------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces — near-black navy, NOT purple-tinted */
  --bg: #080c15;             /* page */
  --bg-2: #0a101c;           /* sidebar + topbar */
  --surface: #0e1420;        /* cards */
  --surface-2: #121a28;      /* inputs, table header, nested panels */
  --surface-3: #17202f;      /* hover */
  --line: #1a2130;           /* 1px borders — subtle, low contrast */
  --line-2: #232c3d;
  /* Aliases kept for the views that already reference them. */
  --line-soft: #151b28;
  --line-strong: var(--line-2);

  /* Text */
  --text: #e6ebf5;
  --text-2: #9aa5b8;
  --muted: #6b7488;
  --dim: #5c6478;

  /* Brand + accents */
  --brand: #3b82f6;
  --brand-2: #6366f1;
  --purple: #8b5cf6;
  --brand-3: var(--purple);
  --brand-ink: #ffffff;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --teal: #14b8a6;
  --cyan: #06b6d4;

  /* Semantic aliases (used everywhere in the views) */
  --ok: var(--green);
  --warn: var(--amber);
  --err: var(--red);
  --info: var(--cyan);
  --accent: var(--purple);

  /* Tinted backgrounds (accent @ ~12%) */
  --brand-soft: #3b82f61f;
  --ok-soft: #22c55e1f;
  --warn-soft: #f59e0b1f;
  --err-soft: #ef44441f;
  --info-soft: #06b6d41f;
  --purple-soft: #8b5cf61f;
  --teal-soft: #14b8a61f;

  /* Default accent for tintable components (.tone-* overrides it) */
  --tone: var(--brand);

  /* The three sanctioned gradients */
  --grad-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --grad-mark: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --grad-nav-active: linear-gradient(90deg, #2b4a9e 0%, #2f3f8f 100%);

  /* Legacy aliases — older views still reference these names. */
  --bg-elev: var(--surface);
  --grad-brand: var(--grad-primary);
  --grad-surface: var(--surface);
  --grad-line: var(--line);

  /* Geometry */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation — popovers only, everything else is flat */
  --shadow-pop: 0 8px 24px -16px rgba(0, 0, 0, .8);
  --shadow: none;
  --shadow-lg: var(--shadow-pop);
  --shadow-inset: none;
  --glow: 0 0 0 1px var(--brand);

  /* Opaque overlay surfaces (no blur anywhere) */
  --glass: var(--surface);
  --glass-strong: #0e1420;
  --backdrop: rgba(4, 7, 13, .72);
  --scrim: rgba(4, 7, 13, .66);

  /* Type — 14px base */
  --font: system-ui, "Segoe UI", Rubik, "Noto Sans Hebrew", Arial, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, "Courier New", monospace;

  --fs-xs: 12px;      /* labels */
  --fs-2xs: 11.5px;   /* meta */
  --fs-sm: 13.5px;    /* table cells, buttons */
  --fs-md: 14px;      /* base */
  --fs-lg: 15px;      /* card titles */
  --fs-xl: 18px;
  --fs-2xl: 22px;     /* page titles */
  --fs-3xl: 30px;     /* KPI numbers */

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 44px;

  /* Shell metrics */
  --sidebar-w: 208px;
  --topbar-h: 72px;
  --content-max: 1500px;
  --content-pad: 22px;

  /* Motion */
  --t-fast: 100ms ease;
  --t: 150ms ease;
  --t-slow: 200ms ease;

  /* Layers */
  --z-sticky: 30;
  --z-drawer: 60;
  --z-modal: 80;
  --z-palette: 90;
  --z-toast: 95;
}

/* ---------- Tokens: light ------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f7fa;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f5f9;
  --surface-3: #eaeef5;
  --line: #e4e8f0;
  --line-2: #d6dce8;
  --line-soft: #eef1f6;

  --text: #0d1420;
  --text-2: #4a5568;
  --muted: #6b7488;
  --dim: #8b93a5;

  --brand: #2563eb;
  --brand-2: #4f46e5;
  --purple: #7c3aed;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --teal: #0d9488;
  --cyan: #0891b2;

  --brand-soft: #2563eb17;
  --ok-soft: #16a34a17;
  --warn-soft: #d9770617;
  --err-soft: #dc262617;
  --info-soft: #0891b217;
  --purple-soft: #7c3aed17;
  --teal-soft: #0d948817;

  --shadow-pop: 0 8px 24px -16px rgba(15, 23, 42, .5);
  --glass-strong: #ffffff;
  --backdrop: rgba(20, 28, 45, .5);
  --scrim: rgba(20, 28, 45, .42);
}

/* ---------- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--line-2) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-2); }

img, svg, video { max-inline-size: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

hr { border: 0; border-block-start: 1px solid var(--line); margin: var(--sp-4) 0; }

code, pre, kbd, samp { font-family: var(--mono); font-size: .92em; }

::selection { background: color-mix(in srgb, var(--brand) 40%, transparent); color: #fff; }

::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

/* Round 1 decorated the page with an aurora backdrop. The reference has a
   plain flat background — the element is neutralised here in case any old
   markup still renders it. */
.aurora { display: none !important; }

/* ---------- App shell ------------------------------------------------ */
.app-root { min-block-size: 100dvh; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-block-size: 100dvh;
}

.app-shell.collapsed { --sidebar-w: 72px; }

.shell-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 100dvh;
}

.view-wrap {
  flex: 1;
  padding: var(--content-pad) var(--content-pad) 64px;
}

#view {
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  animation: fade-in var(--t) both;
}

/* Auth (login / invite) layout — no sidebar. */
.auth-root { min-block-size: 100dvh; display: block; }
.auth-root #view { max-inline-size: none; animation: none; }

/* ---------- Boot splash --------------------------------------------- */
.boot-splash {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  color: var(--muted);
}
.boot-splash .boot-inner { display: grid; justify-items: center; gap: var(--sp-4); }
.boot-splash .boot-word { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .04em; color: var(--text); }

/* ---------- Page headers -------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-end: var(--sp-5);
}
.page-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; }
.page-sub { color: var(--muted); font-size: var(--fs-sm); margin-block-start: 4px; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.section { margin-block-end: var(--sp-5); }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-block-end: var(--sp-3);
}
.section-title { font-size: var(--fs-lg); font-weight: 600; }

/* ---------- Utilities ------------------------------------------------ */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.middle { display: grid; place-items: center; }
.flex-1 { flex: 1; min-inline-size: 0; }
.spacer { flex: 1; }
.w-full { inline-size: 100%; }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.mt-1 { margin-block-start: var(--sp-1); }
.mt-2 { margin-block-start: var(--sp-2); }
.mt-3 { margin-block-start: var(--sp-3); }
.mt-4 { margin-block-start: var(--sp-4); }
.mt-5 { margin-block-start: var(--sp-5); }
.mb-2 { margin-block-end: var(--sp-2); }
.mb-3 { margin-block-end: var(--sp-3); }
.mb-4 { margin-block-end: var(--sp-4); }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }

.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.big { font-size: var(--fs-lg); }
.bold { font-weight: 600; }
.strong { font-weight: 700; }
.upper { text-transform: uppercase; letter-spacing: .06em; }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-err { color: var(--err); }
.text-info { color: var(--info); }
.text-brand { color: var(--brand); }
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.ltr { direction: ltr; }
.rtl { direction: rtl; }
.unicode-bidi-plain { unicode-bidi: plaintext; }
.tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ *
 * Bidirectional text
 *
 * In an RTL page a run like "458 KB" or "12.6 GB / 18 GB" is a neutral+Latin
 * sequence, and the bidi algorithm reorders it into "KB 458". Every measurement,
 * version, IP, port, path and duration in this UI hits that.
 *
 * `unicode-bidi: plaintext` resolves each element's base direction from its own
 * first strong character, so Hebrew text stays RTL and Latin/number text stays
 * LTR. `unicode-bidi` is not inherited, so this must hit the elements that carry
 * the text, not their containers. Zero specificity via :where(), so any rule can
 * still override it.
 * ------------------------------------------------------------------ */
:where(
  span, div, p, li, dd, dt, td, th, label, output, time, small, b, strong, em,
  code, kbd, samp, figcaption, summary, option, legend
) {
  unicode-bidi: plaintext;
}

/* …but a heading or button whose text mixes a Latin product name into a Hebrew phrase
   should still follow the page direction, not the first character. */
:where(h1, h2, h3, h4, h5, h6, button, a, .card-title, .page-title) {
  unicode-bidi: isolate;
}

/* Kept for the logo wordmark only — never for body copy. */
.grad-text {
  background: var(--grad-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.hairline, .hairline-grad { block-size: 1px; background: var(--line); }

.icon { flex: none; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

.scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; }
.scroll-y { overflow-y: auto; }

/* Accent tokens for tintable components (.stat-card, .tile-icon, .meter…). */
.tone-blue, .tone-brand { --tone: var(--brand); }
.tone-indigo { --tone: var(--brand-2); }
.tone-violet, .tone-purple { --tone: var(--purple); }
.tone-green, .tone-ok { --tone: var(--ok); }
.tone-amber, .tone-warn { --tone: var(--warn); }
.tone-red, .tone-err { --tone: var(--err); }
.tone-teal { --tone: var(--teal); }
.tone-info, .tone-cyan { --tone: var(--info); }
.tone-muted, .tone-idle { --tone: var(--muted); }

/* ---------- Shared animations ---------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position-x: -180%; } to { background-position-x: 180%; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-out { to { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; } }
@keyframes bar-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes indeterminate {
  0% { inset-inline-start: -40%; inline-size: 40%; }
  100% { inset-inline-start: 100%; inline-size: 40%; }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
}
/* Legacy name kept so older views keep animating. */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: .5; }
  70% { box-shadow: 0 0 0 5px transparent; opacity: 0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

.fade-in { animation: fade-in var(--t) both; }
.rise-in { animation: rise var(--t-slow) both; }

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1280px) {
  :root { --content-pad: 18px; }
}

/* Below 1000px the sidebar becomes an off-canvas drawer (see components.css). */
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .view-wrap { padding: var(--sp-4) var(--sp-4) 56px; }
}

@media (max-width: 560px) {
  :root { --fs-2xl: 20px; --fs-3xl: 26px; --topbar-h: 64px; }
  .view-wrap { padding: var(--sp-3) var(--sp-3) 48px; }
  .page-title { font-size: var(--fs-xl); }
}

/* ---------- Accessibility -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --muted: #98a2b6; --text-2: #c6cede; --line: #2c3648; --line-2: #3d4a61; }
}

@media print {
  .sidebar, .topbar, .toast-root, .modal-root { display: none !important; }
  body { background: #fff; color: #000; }
  .app-shell { grid-template-columns: 1fr; }
}