/* =========================================================================
   _enterprise.css — IntraLogic enterprise UI skin
   Loaded LAST in <head> so equal-specificity rules win over per-page <style>.
   Scope: cross-cutting calm-down rules only. Never targets bare `svg` or
   diagram/topology containers, so hand-authored SVG diagrams are untouched.
   Color palette itself lives in each page's :root (charcoal/slate tokens);
   this file only references those tokens.
   ========================================================================= */

/* --- App background: flatten decorative gradients to flat slate ----------
   `html body` (specificity 0,0,2) beats per-page `body { background: ... }`
   regardless of source order. */
html body {
  background: var(--bg);
}

/* --- Buttons: neutral grey across the board (incl. primary), danger=red ---
   Primary actions stay calm/neutral like every other button — colour is
   reserved for status, not chrome. */
.btn-primary {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}
.btn-primary:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
}
/* Destructive buttons are neutralized like every other button — no red.
   Safety comes from the confirm modal (typed-name confirmation), not from
   colour. Matches .btn-primary so all buttons share one look. */
.btn-danger {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}
.btn-danger:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  color: var(--text);
}

/* --- Tabs: inactive neutral, active = blue underline -------------------- */
.tab.active {
  color: var(--text);
  border-bottom-color: var(--blue);
}

/* --- Icons: enterprise sizing in chrome/control contexts (NOT diagrams) -
   Inline `<svg>` here inherit color via currentColor; we only constrain
   size. Status icons keep their explicit inline color. */
.top-link svg,
.brand svg,
.sidebar-link svg { width: 14px; height: 14px; }

.btn svg,
.btn-sm svg,
.badge svg,
.pill svg,
.chip svg { width: 12px; height: 12px; }

/* Oversized decorative empty-state / hero icons -> calmer, muted */
.empty .big-icon svg,
.big-icon svg,
.empty-icon svg { width: 44px; height: 44px; color: var(--muted2); opacity: .8; }

/* Emoji/glyph empty-state icons: smaller, muted (no big colorful glyphs) */
.empty-state .icon { font-size: 30px; opacity: .7; }

/* --- Noise reduction: drop heavy card shadows (keep status LED glows) ---- */
.card { box-shadow: none; }

/* --- Subtle, consistent hover for interactive rows ---------------------- */
.row-hover:hover,
tbody tr:hover { background: rgba(255,255,255,.035); }

/* --- Typography: gently cap the very largest page title ------------------
   Conservative — only h1. Section headers and KPI metric numbers untouched
   so dashboard density/hero numbers stay intact. */
h1 { font-size: 20px; font-weight: 700; }

/* --- Top-nav: flat text links, not filled buttons -------------------------
   The panel switcher (Physical / Virtual / Storage / …), the Hub / Client
   links and the Admin link should read as flat text that picks up a subtle
   frame on hover and goes whiter when active — matching the marketing-site
   nav and the profile-dropdown hover (rgba(255,255,255,.06)), instead of the
   old filled-pill look. These selectors out-specify the per-page .model-link
   rules and this file loads last, so they win everywhere. The active link is
   rendered by _il_topnav.js with no inline style so this can style it. */
.topnav .top-link,
.topnav .model-link {
  border: 1px solid transparent;
  background: none;
}
.topnav .top-link:hover,
.topnav .model-link:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: var(--line);
}
.topnav .top-link.active,
.topnav .model-link.active {
  color: #fff;
  font-weight: 700;
  background: none;          /* no chip/frame on the selected link — */
  border-color: transparent; /* just stronger white text */
}
