/* ==========================================================================
   AccessGate — redesign foundation
   --------------------------------------------------------------------------
   Load order: netscan.css → access_gate.css → redesign.css (this file, LAST).
   This file is the single source of truth for the new design system:
   design tokens, the `rg-` class vocabulary, restyles of the shared
   core-component markup (ns-field, ag-btn, ag-empty, pagination, flashes)
   and the app shell (ag-topbar, ag-tabs, dropdown menus).

   Page agents: read .specs/redesign/DESIGN_SYSTEM.md before touching anything.
   Never edit this file, access_gate.css, or netscan.css — you own exactly one
   file: priv/static/assets/redesign/<your-page>.css
   ========================================================================== */

/* --- Page stylesheets (owned by individual page agents) ------------------
   Imported first so the foundation below remains the base layer; override
   `rg-` classes from a page file with a more specific selector
   (e.g. `.my-page .rg-btn { ... }`). Missing files 404 quietly — expected
   until each page agent lands their file. */
@import url("./redesign/netscan-0c0a79c3305251a69e38770c634547b8.css?vsn=d");
@import url("./redesign/netscan_detail-0436b45ec8350c51ad3444ebc5dac369.css?vsn=d");
@import url("./redesign/scanner-27880e386c996ae1a67d3df972a70e29.css?vsn=d");
@import url("./redesign/cracked-28ac11b881c04a706cf88bb7ea0caeb1.css?vsn=d");
@import url("./redesign/api_keys-32fb841c84cf2ac4bc5434edd6a1676f.css?vsn=d");
@import url("./redesign/proxies-e39e52fa9023f49a5b96df818a561bac.css?vsn=d");
@import url("./redesign/ssh_scan-f9c69f8e3981ff056771168cd7a46385.css?vsn=d");
@import url("./redesign/ssh_brute-0b4209138ee1832525972e463e33fb09.css?vsn=d");
@import url("./redesign/ssh_instances-e6efe64a5b57b044ecd5d85341490d87.css?vsn=d");
@import url("./redesign/wordlist-a1e8429360effb22543762b9b7a96480.css?vsn=d");
@import url("./redesign/servers-ee0b3e6095cbbff65a4ee30f1e8057a3.css?vsn=d");

/* --- Fonts ----------------------------------------------------------------
   Self-hosted Geist Variable + Geist Mono Variable (priv/static/fonts).
   font-display: swap — never render-blocking, system stack takes over until
   the woff2 arrives (and permanently if the files are missing). */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable-dfa48d5a853753289194436953e3f202.woff2?vsn=d") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable-308360d8a547331fd40bc09a7145d59a.woff2?vsn=d") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   Reuses the legacy variable names (netscan.css / access_gate.css ag-ds) so
   every un-redesigned page reskins automatically. `rg-` tokens are the new
   vocabulary for page agents.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  /* Surface ladder — warm off-black, floor is #131210 (never pure #000) */
  --bg-0: #131210; /* app background */
  --bg-1: #1a1815; /* topbar, sticky rails, table heads */
  --bg-2: #201e1b; /* panels */
  --surface: #26231f; /* cards, inputs sit on bg-2 */
  --surface-raised: #2d2a24; /* hover, popovers, dropdowns, skeletons */

  /* Lines */
  --line: #37332b; /* hairline */
  --line-strong: #4a4336; /* hovered borders, active outlines */

  /* Text — AA on --surface */
  --text-1: #f1ede4; /* titles, values */
  --text-2: #c8c0b3; /* body, secondary */
  --text-3: #9c9282; /* labels, meta — never below this */

  /* Signal — ONE accent family: desaturated copper/amber (sat < 80%) */
  --accent: #d97757; /* copper — primary action, active nav (hsl 16 63% 59%) */
  --accent-2: #e5b06e; /* amber — kickers, highlights   (hsl 35 69% 66%) */
  --ok: #8fbe95;
  --ok-bright: #a4cead;
  --warn: #e5b06e;
  --warn-bright: #eec489;
  --crit: #e8776b;
  --info: #7ba3de;

  /* Elevation — tinted to the warm background hue, never neutral black */
  --shadow-1: 0 1px 2px rgba(12, 9, 6, 0.42);
  --shadow-2: 0 14px 36px rgba(12, 9, 6, 0.46);
  --glow-accent: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --glow-ok: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
  --glow-crit: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent);

  /* Radii + spacing (legacy ag-ds names, kept) */
  --r-pill: 999px;
  --r-chip: 6px;
  --r-control: 8px;
  --r-card: 10px;
  --r-panel: 14px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Legacy aliases — every pre-redesign rule reading these picks up the
     new palette with zero template edits. */
  --bg: var(--bg-0);
  --bg-elev: var(--bg-1);
  --panel: var(--bg-2);
  --panel-2: var(--surface);
  --panel-3: var(--surface-raised);
  --border: var(--line);
  --text: var(--text-1);
  --text-dim: var(--text-2);
  --text-muted: var(--text-3);
  --danger: var(--crit);
  --warning: var(--warn);
  --cpa: var(--ok);
  --success: var(--ok); /* was referenced but never defined — fixed here */
  --ag-online-dot: var(--ok);
  --shadow: var(--shadow-2);
  --ag-ok-bg: color-mix(in srgb, var(--ok) 13%, transparent);
  --ag-ok-border: color-mix(in srgb, var(--ok) 34%, transparent);
  --ag-warning-bg: color-mix(in srgb, var(--warn) 13%, transparent);
  --ag-warning-border: color-mix(in srgb, var(--warn) 34%, transparent);
  --ag-danger-bg: color-mix(in srgb, var(--crit) 13%, transparent);
  --ag-danger-border: color-mix(in srgb, var(--crit) 36%, transparent);
  --ag-info-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --ag-info-border: color-mix(in srgb, var(--accent) 34%, transparent);

  /* rg- theme-bound tokens */
  --rg-accent-contrast: #221206; /* text/icons on --accent */
  --rg-shadow-sm: 0 1px 2px rgba(12, 9, 6, 0.4);
  --rg-shadow-md: 0 6px 20px rgba(12, 9, 6, 0.42);
  --rg-shadow-lg: 0 18px 48px rgba(12, 9, 6, 0.5);
  --rg-grain-opacity: 0.032;
  --rg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9282' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  --bg-0: #edeae3;
  --bg-1: #f6f4ee;
  --bg-2: #fdfcf9;
  --surface: #ffffff;
  --surface-raised: #f3f0e8;

  --line: #ddd8cb;
  --line-strong: #c6bfae;

  --text-1: #211d16;
  --text-2: #4d463a;
  --text-3: #6f6655;

  --accent: #b85c3d; /* copper, deepened for AA on white */
  --accent-2: #9a6b1f;
  --ok: #2f7d4a;
  --ok-bright: #276b40;
  --warn: #96650f;
  --warn-bright: #7d540c;
  --crit: #bc3a30;
  --info: #33598f;

  --shadow-1: 0 1px 2px rgba(64, 52, 36, 0.1);
  --shadow-2: 0 14px 36px rgba(64, 52, 36, 0.14);
  --glow-accent: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  --glow-ok: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
  --glow-crit: 0 0 0 3px color-mix(in srgb, var(--crit) 18%, transparent);

  /* Legacy aliases (light parity) */
  --bg: var(--bg-0);
  --bg-elev: var(--bg-1);
  --panel: var(--bg-2);
  --panel-2: var(--surface);
  --panel-3: var(--surface-raised);
  --border: var(--line);
  --text: var(--text-1);
  --text-dim: var(--text-2);
  --text-muted: var(--text-3);
  --danger: var(--crit);
  --warning: var(--warn);
  --cpa: var(--ok);
  --success: var(--ok);
  --ag-online-dot: var(--ok);
  --shadow: var(--shadow-2);
  --ag-ok-bg: color-mix(in srgb, var(--ok) 10%, transparent);
  --ag-ok-border: color-mix(in srgb, var(--ok) 32%, transparent);
  --ag-warning-bg: color-mix(in srgb, var(--warn) 10%, transparent);
  --ag-warning-border: color-mix(in srgb, var(--warn) 32%, transparent);
  --ag-danger-bg: color-mix(in srgb, var(--crit) 9%, transparent);
  --ag-danger-border: color-mix(in srgb, var(--crit) 32%, transparent);
  --ag-info-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --ag-info-border: color-mix(in srgb, var(--accent) 32%, transparent);

  /* rg- theme-bound tokens */
  --rg-accent-contrast: #ffffff;
  --rg-shadow-sm: 0 1px 2px rgba(64, 52, 36, 0.08);
  --rg-shadow-md: 0 6px 20px rgba(64, 52, 36, 0.1);
  --rg-shadow-lg: 0 18px 48px rgba(64, 52, 36, 0.16);
  --rg-grain-opacity: 0.045;
  --rg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6655' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* rg- theme-independent tokens */
:root {
  /* Type */
  --rg-font-sans:
    "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --rg-font-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale — tight, ops-console density */
  --rg-text-2xs: 0.625rem; /* 10px small-caps labels */
  --rg-text-xs: 0.6875rem; /* 11px badges, meta */
  --rg-text-sm: 0.75rem; /* 12px secondary */
  --rg-text-md: 0.8125rem; /* 13px base UI */
  --rg-text-lg: 0.9375rem; /* 15px panel titles */
  --rg-text-xl: 1.25rem; /* 20px stat values */
  --rg-text-2xl: 1.5625rem; /* 25px page titles */

  /* Spacing — 4px base */
  --rg-space-1: 0.25rem;
  --rg-space-2: 0.5rem;
  --rg-space-3: 0.75rem;
  --rg-space-4: 1rem;
  --rg-space-5: 1.5rem;
  --rg-space-6: 2rem;
  --rg-space-7: 2.5rem;
  --rg-space-8: 3rem;

  /* Radii */
  --rg-radius-sm: 6px;
  --rg-radius-md: 8px;
  --rg-radius-lg: 12px;
  --rg-radius-pill: 999px;

  /* Layering */
  --rg-z-sticky: 20;
  --rg-z-dropdown: 60;
  --rg-z-overlay: 100;
  --rg-z-modal: 200;
  --rg-z-toast: 300;
  --rg-z-grain: 9999;

  /* Motion — transform/opacity only, 150–250ms */
  --rg-dur-fast: 120ms;
  --rg-dur: 180ms;
  --rg-dur-slow: 260ms;
  --rg-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --rg-focus: var(--accent-2);

  /* Semantic aliases so page agents never guess which legacy name to use */
  --rg-ok: var(--ok);
  --rg-warning: var(--warn);
  --rg-danger: var(--crit);
  --rg-info: var(--info);
  --rg-ok-bg: color-mix(in srgb, var(--ok) 13%, transparent);
  --rg-ok-border: color-mix(in srgb, var(--ok) 34%, transparent);
  --rg-warning-bg: color-mix(in srgb, var(--warn) 13%, transparent);
  --rg-warning-border: color-mix(in srgb, var(--warn) 34%, transparent);
  --rg-danger-bg: color-mix(in srgb, var(--crit) 13%, transparent);
  --rg-danger-border: color-mix(in srgb, var(--crit) 36%, transparent);
  --rg-info-bg: color-mix(in srgb, var(--info) 13%, transparent);
  --rg-info-border: color-mix(in srgb, var(--info) 34%, transparent);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html,
body {
  font-family: var(--rg-font-sans);
}

body {
  background: var(--bg-0);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

code,
kbd,
pre,
samp {
  font-family: var(--rg-font-mono);
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Cheap film grain — one fixed composited layer, pointer-transparent, no
   animation. Do NOT add per-page grain on top of this. */
body::after {
  position: fixed;
  z-index: var(--rg-z-grain);
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
  opacity: var(--rg-grain-opacity);
  pointer-events: none;
}

/* Visible focus everywhere */
:focus-visible {
  outline: 2px solid var(--rg-focus);
  outline-offset: 2px;
}

/* Thin, theme-aware scrollbars (cosmetic only, no layout cost) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* Native checkboxes/radios pick up the accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

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

/* ==========================================================================
   3. rg- CLASS VOCABULARY
   Copy-paste markup examples live in .specs/redesign/DESIGN_SYSTEM.md.
   ========================================================================== */

/* --- rg-btn ------------------------------------------------------------- */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-space-2);
  min-height: 2.125rem;
  padding: 0.4rem 0.85rem;
  color: var(--text-1);
  font-family: var(--rg-font-sans);
  font-size: var(--rg-text-md);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-md);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease),
    transform var(--rg-dur-fast) var(--rg-ease),
    opacity var(--rg-dur-fast) var(--rg-ease);
}

.rg-btn:hover:not(:disabled) {
  background: var(--surface-raised);
}

.rg-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.rg-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rg-btn:focus-visible {
  outline: 2px solid var(--rg-focus);
  outline-offset: 2px;
}

.rg-btn .ag-icon,
.rg-btn .rg-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.rg-btn--primary {
  color: var(--rg-accent-contrast);
  background: var(--accent);
  border-color: transparent;
}

.rg-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff);
}

.rg-btn--ghost {
  color: var(--text-2);
  background: transparent;
  border-color: var(--line);
}

.rg-btn--ghost:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--line-strong);
}

.rg-btn--danger {
  color: var(--crit);
  background: var(--rg-danger-bg);
  border-color: var(--rg-danger-border);
}

.rg-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--crit) 20%, transparent);
  border-color: color-mix(in srgb, var(--crit) 50%, transparent);
}

.rg-btn--subtle {
  color: var(--text-2);
  background: transparent;
  border-color: transparent;
}

.rg-btn--subtle:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--surface-raised);
}

.rg-btn--sm {
  min-height: 1.625rem;
  padding: 0.22rem 0.6rem;
  font-size: var(--rg-text-sm);
  border-radius: var(--rg-radius-sm);
  gap: 0.3rem;
}

.rg-btn--sm .ag-icon,
.rg-btn--sm .rg-icon {
  width: 0.78rem;
  height: 0.78rem;
}

/* --- rg-input / rg-select ------------------------------------------------ */
.rg-input,
.rg-select {
  width: 100%;
  min-height: 2.125rem;
  padding: 0.38rem 0.65rem;
  color: var(--text-1);
  font-family: var(--rg-font-sans);
  font-size: var(--rg-text-md);
  line-height: 1.4;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-md);
  transition:
    border-color var(--rg-dur-fast) var(--rg-ease),
    box-shadow var(--rg-dur-fast) var(--rg-ease),
    background var(--rg-dur-fast) var(--rg-ease);
}

.rg-input::placeholder {
  color: var(--text-3);
}

.rg-input:hover:not(:disabled):not(:focus),
.rg-select:hover:not(:disabled):not(:focus) {
  border-color: var(--line-strong);
}

.rg-input:focus,
.rg-select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--glow-accent);
}

.rg-input:disabled,
.rg-select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.rg-input[aria-invalid="true"],
.rg-select[aria-invalid="true"] {
  border-color: var(--crit);
}

.rg-input[aria-invalid="true"]:focus,
.rg-select[aria-invalid="true"]:focus {
  box-shadow: var(--glow-crit);
}

textarea.rg-input {
  min-height: 5rem;
  resize: vertical;
}

.rg-input--mono {
  font-family: var(--rg-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.rg-select {
  padding-right: 1.9rem;
  background-image: var(--rg-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.65rem;
  cursor: pointer;
  appearance: none;
}

/* --- rg-panel ------------------------------------------------------------ */
.rg-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
}

.rg-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-space-3);
  padding: var(--rg-space-3) var(--rg-space-4);
  border-bottom: 1px solid var(--line);
}

.rg-panel__title {
  margin: 0;
  color: var(--text-1);
  font-size: var(--rg-text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rg-panel__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rg-space-2);
}

.rg-panel__body {
  padding: var(--rg-space-4);
}

.rg-panel__body--flush {
  padding: 0; /* for tables / lists that bring their own padding */
}

/* --- rg-card --------------------------------------------------------------
   Flat by design: hairline border, NO box-shadow — cards are streamed and
   re-rendered by LiveView, keep them cheap. */
.rg-card {
  padding: var(--rg-space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
  transition:
    border-color var(--rg-dur-fast) var(--rg-ease),
    transform var(--rg-dur-fast) var(--rg-ease),
    opacity var(--rg-dur-fast) var(--rg-ease);
}

.rg-card:hover {
  border-color: var(--line-strong);
}

.rg-card--interactive {
  cursor: pointer;
}

.rg-card--interactive:hover {
  transform: translateY(-1px);
}

.rg-card--interactive:active {
  transform: scale(0.99);
}

.rg-card__title {
  margin: 0 0 var(--rg-space-1);
  color: var(--text-1);
  font-size: var(--rg-text-md);
  font-weight: 650;
}

/* --- rg-badge ------------------------------------------------------------ */
.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  font-size: var(--rg-text-xs);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-pill);
  font-variant-numeric: tabular-nums;
}

.rg-badge--ok {
  color: var(--ok);
  background: var(--rg-ok-bg);
  border-color: var(--rg-ok-border);
}

.rg-badge--warning {
  color: var(--warn);
  background: var(--rg-warning-bg);
  border-color: var(--rg-warning-border);
}

.rg-badge--danger {
  color: var(--crit);
  background: var(--rg-danger-bg);
  border-color: var(--rg-danger-border);
}

.rg-badge--info {
  color: var(--info);
  background: var(--rg-info-bg);
  border-color: var(--rg-info-border);
}

.rg-badge--neutral {
  color: var(--text-2);
  background: color-mix(in srgb, var(--text-2) 10%, transparent);
  border-color: var(--line-strong);
}

.rg-badge .rg-dot {
  width: 0.35rem;
  height: 0.35rem;
}

/* --- rg-table -------------------------------------------------------------
   Dense data table. Wrap in .rg-table-wrap for the sticky header to work
   (sticky is relative to the wrap's scroll box, not the viewport). */
.rg-table-wrap {
  overflow: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
}

.rg-table {
  width: 100%;
  font-size: var(--rg-text-md);
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.rg-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 0.45rem 0.75rem;
  color: var(--text-3);
  font-size: var(--rg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-strong);
}

.rg-table td {
  padding: 0.42rem 0.75rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.rg-table tbody tr:last-child td {
  border-bottom: 0;
}

.rg-table tbody tr {
  transition: background var(--rg-dur-fast) var(--rg-ease);
}

.rg-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.rg-table--dense td {
  padding: 0.24rem 0.6rem;
  font-size: var(--rg-text-sm);
}

.rg-table--zebra tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 35%, transparent);
}

/* Numeric / code cells */
.rg-table .rg-num,
.rg-table td[data-num] {
  color: var(--text-1);
  font-family: var(--rg-font-mono);
  text-align: right;
}

/* --- rg-tabs (in-page tab strip — not the topbar) ------------------------- */
.rg-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rg-space-1);
  border-bottom: 1px solid var(--line);
}

.rg-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  color: var(--text-3);
  font-family: var(--rg-font-sans);
  font-size: var(--rg-text-md);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition:
    color var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease);
}

.rg-tabs__tab:hover {
  color: var(--text-1);
}

.rg-tabs__tab.is-active {
  color: var(--text-1);
  border-bottom-color: var(--accent);
}

.rg-tabs__tab:focus-visible {
  border-radius: var(--rg-radius-sm) var(--rg-radius-sm) 0 0;
  outline-offset: -2px;
}

.rg-tabs__badge {
  padding: 0.05rem 0.4rem;
  color: var(--text-3);
  font-size: var(--rg-text-2xs);
  font-weight: 700;
  background: var(--surface-raised);
  border-radius: var(--rg-radius-pill);
  font-variant-numeric: tabular-nums;
}

.rg-tabs__tab.is-active .rg-tabs__badge {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* --- rg-toolbar ----------------------------------------------------------- */
.rg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rg-space-2) var(--rg-space-3);
  padding: var(--rg-space-2) 0;
}

.rg-toolbar__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--rg-space-2);
}

/* --- rg-page-header ------------------------------------------------------- */
.rg-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rg-space-3) var(--rg-space-5);
  margin-bottom: var(--rg-space-4);
  padding-bottom: var(--rg-space-3);
  border-bottom: 1px solid var(--line);
}

.rg-page-header__main {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
  justify-items: start;
}

.rg-page-header__kicker {
  color: var(--accent-2);
  font-size: var(--rg-text-2xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rg-page-header__title {
  margin: 0;
  color: var(--text-1);
  font-size: var(--rg-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rg-page-header__subtitle {
  margin: 0;
  color: var(--text-3);
  font-size: var(--rg-text-md);
}

.rg-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rg-space-2);
}

/* --- rg-empty ------------------------------------------------------------- */
.rg-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--rg-space-2);
  padding: var(--rg-space-6) var(--rg-space-4);
  text-align: center;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px dashed var(--line-strong);
  border-radius: var(--rg-radius-lg);
}

.rg-empty__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-3);
}

.rg-empty__title {
  color: var(--text-1);
  font-size: var(--rg-text-md);
  font-weight: 650;
}

.rg-empty__hint {
  max-width: 34rem;
  color: var(--text-3);
  font-size: var(--rg-text-sm);
}

.rg-empty__action {
  margin-top: var(--rg-space-2);
}

/* --- rg-skeleton (opacity pulse only — transform/opacity rule) ------------ */
.rg-skeleton {
  display: block;
  min-height: 0.8em;
  background: var(--surface-raised);
  border-radius: var(--rg-radius-sm);
  animation: rg-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes rg-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* --- rg-kbd --------------------------------------------------------------- */
.rg-kbd {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  color: var(--text-2);
  font-family: var(--rg-font-mono);
  font-size: var(--rg-text-xs);
  line-height: 1.4;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* --- rg-stat -------------------------------------------------------------- */
.rg-stat {
  display: grid;
  min-width: 6rem;
  gap: 0.15rem;
  padding: var(--rg-space-3) var(--rg-space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
}

.rg-stat__label {
  color: var(--text-3);
  font-size: var(--rg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rg-stat__value {
  color: var(--text-1);
  font-family: var(--rg-font-mono);
  font-size: var(--rg-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.rg-stat__hint {
  color: var(--text-3);
  font-size: var(--rg-text-xs);
}

.rg-stat--ok .rg-stat__value {
  color: var(--ok-bright);
}

.rg-stat--warning .rg-stat__value {
  color: var(--warn-bright);
}

.rg-stat--danger .rg-stat__value {
  color: var(--crit);
}

.rg-stat--info .rg-stat__value {
  color: var(--info);
}

/* --- rg-dot --------------------------------------------------------------- */
.rg-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  color: var(--text-3);
  background: var(--text-3);
  border-radius: 50%;
}

.rg-dot--ok {
  color: var(--ok);
  background: var(--ok);
}

.rg-dot--warning {
  color: var(--warn);
  background: var(--warn);
}

.rg-dot--danger {
  color: var(--crit);
  background: var(--crit);
}

.rg-dot--info {
  color: var(--info);
  background: var(--info);
}

/* Ping ring — transform/opacity only */
.rg-dot--pulse::after {
  position: absolute;
  inset: -1px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  content: "";
  animation: rg-dot-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes rg-dot-ping {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* --- small helpers -------------------------------------------------------- */
.rg-mono {
  font-family: var(--rg-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.rg-num {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. CORE COMPONENT RESTYLE (markup emitted by AccessGateWeb.CoreComponents)
   Class names are pinned by tests and pages — this section only re-skins.
   ========================================================================== */

/* input/1 → label.ns-field > span + control + small */
.ns-field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.ns-field > span,
.ns-field .ns-field-label {
  color: var(--text-2);
  font-size: var(--rg-text-sm);
  font-weight: 600;
}

.ns-field-required {
  color: var(--crit);
}

.ns-field input:not([type="checkbox"]):not([type="radio"]),
.ns-field textarea,
.ns-field select {
  width: 100%;
  min-height: 2.125rem;
  padding: 0.38rem 0.65rem;
  color: var(--text-1);
  font-family: var(--rg-font-sans);
  font-size: var(--rg-text-md);
  line-height: 1.4;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-md);
  transition:
    border-color var(--rg-dur-fast) var(--rg-ease),
    box-shadow var(--rg-dur-fast) var(--rg-ease);
}

.ns-field input::placeholder,
.ns-field textarea::placeholder {
  color: var(--text-3);
}

.ns-field input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled):not(:focus),
.ns-field textarea:hover:not(:disabled):not(:focus),
.ns-field select:hover:not(:disabled):not(:focus) {
  border-color: var(--line-strong);
}

.ns-field input:focus,
.ns-field textarea:focus,
.ns-field select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--glow-accent);
}

.ns-field input:disabled,
.ns-field textarea:disabled,
.ns-field select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ns-field input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  margin: 0;
}

.ns-field.has-error input,
.ns-field.has-error textarea,
.ns-field.has-error select {
  border-color: var(--crit);
}

.ns-field.has-error input:focus,
.ns-field.has-error textarea:focus,
.ns-field.has-error select:focus {
  box-shadow: var(--glow-crit);
}

.ns-field small,
.ns-field .ns-field-help {
  color: var(--text-3);
  font-size: var(--rg-text-xs);
}

.ns-field .ns-field-error {
  color: var(--crit);
  font-size: var(--rg-text-xs);
  font-weight: 600;
}

/* ag_button/1 → .ag-btn tiers (class string pinned by spec20 tests) */
.ag-btn {
  min-height: 2.125rem;
  padding: 0.4rem 0.85rem;
  font-size: var(--rg-text-md);
  font-weight: 600;
  border-radius: var(--rg-radius-md);
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease),
    transform var(--rg-dur-fast) var(--rg-ease),
    opacity var(--rg-dur-fast) var(--rg-ease);
}

.ag-btn--primary {
  color: var(--rg-accent-contrast);
  background: var(--accent);
  box-shadow: none;
}

.ag-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff);
  filter: none;
}

.ag-btn--secondary {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--line-strong);
}

.ag-btn--secondary:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--accent);
}

.ag-btn--danger {
  color: var(--crit);
  background: var(--rg-danger-bg);
  border-color: var(--rg-danger-border);
}

.ag-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--crit) 20%, transparent);
}

.ag-btn--ghost {
  color: var(--text-2);
  background: transparent;
  border-color: var(--line);
}

.ag-btn--ghost:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--line-strong);
}

.ag-btn--sm {
  min-height: 1.625rem;
  padding: 0.22rem 0.6rem;
  font-size: var(--rg-text-sm);
}

/* page_header / stat_tiles */
.ag-page-head {
  border-bottom-color: var(--line);
}

.ag-page-title h1 {
  font-size: var(--rg-text-2xl);
  font-weight: 700;
}

.ag-stat-tiles dd {
  font-family: var(--rg-font-mono);
  font-weight: 600;
}

/* empty_state/1 → .ag-empty */
.ag-empty {
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border-color: var(--line-strong);
  border-radius: var(--rg-radius-lg);
}

/* pagination/1 → .pagination-bar */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rg-space-2) var(--rg-space-3);
  padding: var(--rg-space-2) 0;
  color: var(--text-3);
  font-size: var(--rg-text-sm);
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: var(--rg-space-2);
}

.pagination-actions button {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  place-items: center;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-sm);
  cursor: pointer;
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease),
    transform var(--rg-dur-fast) var(--rg-ease);
}

.pagination-actions button:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--line-strong);
}

.pagination-actions button:active:not(:disabled) {
  transform: scale(0.96);
}

.pagination-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.pagination-actions button .ag-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.pagination-actions span {
  font-variant-numeric: tabular-nums;
}

/* system_load/1 → host CPU/RAM meters */
.ns-host-load {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--rg-radius-md);
  box-shadow: none;
}

.ns-load-track {
  height: 4px;
  background: color-mix(in srgb, var(--text-1) 10%, transparent);
}

.ns-load-meter strong {
  font-family: var(--rg-font-mono);
  font-variant-numeric: tabular-nums;
}

/* flashes (rendered in app.html.heex) */
.ag-flash-stack {
  display: grid;
  gap: var(--rg-space-2);
  margin-bottom: var(--rg-space-3);
}

.flash-info,
.flash-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-space-3);
  padding: 0.55rem 0.8rem;
  color: var(--text-1);
  font-size: var(--rg-text-md);
  border: 1px solid;
  border-radius: var(--rg-radius-md);
}

.flash-info {
  background: var(--rg-info-bg);
  border-color: var(--rg-info-border);
}

.flash-error {
  background: var(--rg-danger-bg);
  border-color: var(--rg-danger-border);
}

.flash-info button,
.flash-error button {
  flex: none;
  padding: 0.1rem 0.3rem;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: var(--rg-radius-sm);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--rg-dur-fast) var(--rg-ease);
}

.flash-info button:hover,
.flash-error button:hover {
  opacity: 1;
}

/* offline notice */
.ag-notice {
  font-size: var(--rg-text-md);
  border-radius: var(--rg-radius-md);
}

/* ==========================================================================
   5. APP SHELL (markup in layouts/app.html.heex — ids/hooks pinned)
   ========================================================================== */

.ag-skip-link {
  z-index: var(--rg-z-toast);
  color: var(--rg-accent-contrast);
  font-weight: 700;
  background: var(--accent);
  border-radius: var(--rg-radius-md);
}

/* Topbar — solid, no backdrop-filter (cheap under fleet-page scrolling) */
.ag-topbar {
  min-height: 56px;
  padding: 0.5rem 1rem;
  gap: 0.75rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}

/* Brand */
.ag-brand {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.05rem;
}

.ag-brand-mark {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--rg-accent-contrast);
  background: linear-gradient(
    140deg,
    var(--accent),
    color-mix(in srgb, var(--accent-2) 65%, var(--accent))
  );
  border: 0;
  border-radius: var(--rg-radius-md);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.ag-brand-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ag-brand-sub {
  display: block;
  color: var(--text-3);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .ag-brand-sub {
    display: none;
  }
}

/* Primary tabs */
.ag-tabs {
  gap: 0.15rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}

.ag-tab {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  color: var(--text-3);
  border-radius: var(--rg-radius-md);
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease),
    transform var(--rg-dur-fast) var(--rg-ease);
}

.ag-tab:hover {
  color: var(--text-1);
  background: var(--surface-raised);
  border-color: transparent;
  transform: none;
}

.ag-tab.active {
  color: var(--text-1);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: none;
}

/* Active indicator — absolutely positioned so it never disturbs the
   inline-grid icon cell or the labeled flex row. */
.ag-tab.active::after {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 1rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  content: "";
  transform: translateX(-50%);
}

.ag-tab:active {
  transform: scale(0.96);
}

.ag-tab .ag-icon {
  width: 1rem;
  height: 1rem;
}

/* Labeled tabs must escape the 2.25rem icon-cell width set on .ag-tab above —
   this file loads after access_gate.css, so its .ag-tab width would otherwise
   win over the legacy .ag-tab--labeled width:auto and labels would overlap. */
.ag-tab--labeled {
  width: auto;
  min-width: 2.25rem;
  padding: 0 0.65rem;
  gap: 0.4rem;
}

.ag-tab-label {
  font-size: var(--rg-text-xs);
  font-weight: 600;
}

/* Dropdown menus (Products / SSH) */
.ag-tab-menu {
  min-width: 10rem;
  padding: 0.3rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow-lg);
}

.ag-tab-menu-item {
  padding: 0.42rem 0.55rem;
  color: var(--text-2);
  font-size: var(--rg-text-md);
  font-weight: 600;
  border-radius: var(--rg-radius-md);
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease);
}

.ag-tab-menu-item:hover {
  color: var(--text-1);
  background: color-mix(in srgb, var(--text-1) 6%, transparent);
  border-color: transparent;
}

.ag-tab-menu-item.active {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: transparent;
}

.ag-tab-menu-item .ag-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.ag-tab-tooltip {
  color: var(--text-1);
  font-weight: 600;
  background: var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: var(--rg-shadow-md);
}

/* While the dropdown is open the pointer still hovers the trigger — suppress
   its tooltip so it cannot cover the first menu item. */
.ag-tab-group[open] .ag-tab:hover .ag-tab-tooltip,
.ag-tab-group[open] .ag-tab:focus-visible .ag-tab-tooltip {
  opacity: 0;
  transform: translate(-50%, -0.25rem);
}

/* Right-hand clusters — flat, hairline, no stacked gradients/shadows */
.ag-workspace-cluster,
.ag-status-cluster {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rg-radius-lg);
  box-shadow: none;
}

.ag-server-link {
  font-size: var(--rg-text-xs);
  border-radius: var(--rg-radius-md);
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease);
}

.ag-server-link:hover {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--line-strong);
}

.ag-server-link.active {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.ag-utility-cluster {
  border-left-color: var(--line);
}

.ag-utility-cluster .ns-icon-btn,
.ag-utility-cluster .ag-icon-action {
  border-radius: var(--rg-radius-md);
  transition:
    background var(--rg-dur-fast) var(--rg-ease),
    color var(--rg-dur-fast) var(--rg-ease),
    border-color var(--rg-dur-fast) var(--rg-ease);
}

.ag-icon-action {
  background: transparent;
  border-color: transparent;
  border-radius: var(--rg-radius-md);
}

.ag-icon-action:hover {
  transform: none;
}

/* Page canvas */
.ag-page {
  padding: var(--rg-space-5) var(--rg-space-6);
}

.ag-page-netscan {
  padding: 0;
}