/* Proprietary — © Intelligent Automation, LLC. All rights reserved. */
/* IntelGRC — Design System v3 / Sovereign Dark — Apple Pro × JP Morgan Chase */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --color-primary:      #2463EB;
  --color-primary-dark: #1D4ED8;
  --color-primary-light:#3B82F6;
  --color-accent:       #38BDF8;    /* cyan — GRC's signature highlight */
  --color-accent-glow:  rgba(56,189,248,.15);
  --color-surface:      #16161A;    /* neutral zinc */
  --color-surface-2:    #1C1C22;
  --color-surface-3:    #23232B;
  --color-navy:         #0C0C0E;    /* page background */
  --color-text:         #D4D4D8;
  --color-text-muted:   #52525B;
  --color-border:       rgba(255,255,255,.08);
  --color-glass:        rgba(255,255,255,.04);
  --color-glass-hover:  rgba(255,255,255,.07);
  --color-danger:       #EF4444;
  --color-danger-bg:    rgba(239,68,68,.12);
  --color-warning:      #F59E0B;
  --color-warning-bg:   rgba(245,158,11,.12);
  --color-success:      #10B981;
  --color-success-bg:   rgba(16,185,129,.12);
  --color-info:         #3B82F6;
  --color-silver:       #A1A1AA;

  /* Risk heat-map colors */
  --risk-critical: #DC2626;
  --risk-high:     #EA580C;
  --risk-medium:   #CA8A04;
  --risk-low:      #16A34A;
  --risk-minimal:  #0284C7;

  /* Shadows */
  --shadow-glass: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.24);
  --shadow-glow:  none;
  --shadow-card:  0 2px 8px rgba(0,0,0,.24);

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;

  /* Transitions */
  --transition: 150ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 300ms cubic-bezier(.4,0,.2,1);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-navy);
  color: var(--color-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Mesh Gradient Background ───────────────────────────────────── */
/* Killed — Sovereign Dark uses a flat neutral background */
.bg-mesh { display: none; }

/* ── Typography ─────────────────────────────────────────────────── */
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); }
h4 { font-size: 1.125rem; }

p { margin: 0; line-height: 1.65; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: #7DD3FC; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card:hover { box-shadow: var(--shadow-card); }

.card-body { padding: 1.5rem; }
.card-header {
  padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Stat tiles */
.stat-tile {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.stat-tile::before { display: none; }
.stat-tile:hover { box-shadow: none; }

.stat-value { font-size: 2rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
.stat-label { color: var(--color-text-muted); font-size: .8125rem; margin-top: .25rem; }
.stat-trend { font-size: .75rem; font-weight: 600; }
.stat-trend.up   { color: var(--color-success); }
.stat-trend.down { color: var(--color-danger); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-light);
  color: #fff;
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-navy);
  font-weight: 700;
}
.btn-accent:hover { opacity: .9; color: var(--color-navy); }

.btn-ghost {
  background: var(--color-glass);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-glass-hover); color: var(--color-text); }

.btn-danger {
  background: var(--color-danger-bg);
  border-color: rgba(239,68,68,.3);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.btn-sm { padding: .3125rem .875rem; font-size: .8125rem; min-height: 32px; }
.btn-lg { padding: .75rem 2rem; font-size: 1rem; min-height: 48px; }

.btn:disabled { opacity: .4; pointer-events: none; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: .375rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.form-control {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: .625rem .875rem;
  font-size: .9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-family: inherit;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.1);
}
.form-control:invalid:not(:placeholder-shown) { border-color: var(--color-danger); }

select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352525B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; }

textarea.form-control { resize: vertical; min-height: 100px; }

.form-group { margin-bottom: 1rem; }
.form-hint { font-size: .75rem; color: var(--color-text-muted); margin-top: .25rem; }
.form-error { font-size: .75rem; color: var(--color-danger); margin-top: .25rem; }

/* ── Badges & Pills ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .625rem;
  border-radius: var(--radius-sm);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-primary { background: rgba(36,99,235,.2);  color: #93C5FD; border: 1px solid rgba(147,197,253,.2); }
.badge-success { background: var(--color-success-bg); color: #34D399; border: 1px solid rgba(52,211,153,.2); }
.badge-warning { background: var(--color-warning-bg); color: #FCD34D; border: 1px solid rgba(252,211,77,.2); }
.badge-danger  { background: var(--color-danger-bg);  color: #FCA5A5; border: 1px solid rgba(252,165,165,.2); }
.badge-muted   { background: rgba(82,82,91,.15);       color: var(--color-text-muted); border: 1px solid rgba(82,82,91,.25); }
.badge-accent  { background: rgba(56,189,248,.12);     color: var(--color-accent); border: 1px solid rgba(56,189,248,.25); }

/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.table th {
  background: rgba(255,255,255,.02);
  padding: .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--color-text);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: rgba(255,255,255,.02); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ── Progress / Completion Bars ─────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width .6s ease;
}

/* ── Navigation ─────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 260px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform var(--transition-slow);
}

.sidebar-logo {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sidebar-logo img { height: 32px; }
.sidebar-logo-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; }
.sidebar-logo-text span { color: var(--color-accent); }

.nav-section { padding: 1rem 0 .5rem; }
.nav-section-label {
  padding: 0 1.25rem .375rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.25rem;
  margin: .125rem .75rem;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.nav-item:hover { background: var(--color-glass); color: var(--color-text); }
.nav-item.active {
  background: rgba(36,99,235,.12);
  color: var(--color-accent);
  border: 1px solid rgba(56,189,248,.2);
}
.nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .badge { margin-left: auto; }

/* ── Icon rail + flyout nav (2026-08-19, Phase 5 of the suite-wide icon-rail
   rollout). .rail is layered onto the existing .sidebar (same element, both
   classes — .rail's rules below win on width/layout via source order).
   .nav-section/.nav-section-label above are now dead — replaced by
   rail-btn/flyout-eyebrow. .nav-item is NOT dead — reused verbatim as the
   flyout's own link styling. .mobile-nav (bottom tab bar) is untouched. */
.rail {
  width: 68px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* overflow MUST stay visible. This element carries both .sidebar and .rail,
     and .sidebar sets overflow-y:auto; .rail is declared later so it wins the
     cascade. .rail-tip is position:absolute and deliberately escapes sideways
     via left:calc(100% + 10px), far outside this 60px box, and CSS coerces
     overflow-x to a clipping value whenever overflow-y is not visible - so any
     overflow here makes every hover tooltip invisible. The rail holds ~11 fixed
     40px controls, so it does not need to scroll. */
  overflow: visible;
}
.rail-mark {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 8px;
  text-decoration: none;
}
.rail-btn {
  position: relative;
  /* 46x46 matches Argos Service and Compass exactly; GRC shipped 40x40 with a
     17px glyph, which read noticeably smaller and softer than the other apps. */
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.rail-btn:hover, .rail-btn.on, .rail-btn[aria-expanded="true"] {
  color: var(--color-text);
  background: var(--color-glass);
}
.rail-btn.on { box-shadow: inset 2px 0 0 var(--color-accent); }
/* Uses svg.icon, not plain svg: GRC's shared icon rule
   "svg.icon, .nav-item svg, .btn svg, ..." sets 1rem and has the SAME
   specificity (0,1,1) as a bare ".rail-btn svg", so it won purely by being
   declared later and the rail icons stayed 16px. Matching on the class here
   raises this to (0,2,1) so it wins on specificity rather than source order. */
.rail-btn svg.icon, .rail-btn svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; stroke-width: 2; shape-rendering: geometricPrecision; }
.rail-mark svg.icon, .rail-mark svg { width: 24px; height: 24px; }
.rail-btn:hover svg, .rail-btn.on svg, .rail-btn[aria-expanded="true"] svg { opacity: 1; }
.rail-btn:hover, .rail-btn.on, .rail-btn[aria-expanded="true"] { color: var(--color-text); background: var(--color-glass); }
.rail-spacer { flex: 1; }
.rail-tip {
  position: absolute;
  left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: .78rem; font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility .12s;
  transition-delay: .35s;
  z-index: var(--z-dropdown);
}
.rail-btn:hover .rail-tip { opacity: 1; visibility: visible; }
.flyouts { position: fixed; top: 0; left: 68px; height: 100vh; z-index: var(--z-dropdown); pointer-events: none; }
.flyout {
  position: absolute; top: 0; left: 0; height: 100vh; width: 236px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: 12px 0 32px rgba(0,0,0,.35);
  overflow-y: auto;
  padding: 16px 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.flyout.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.flyout-eyebrow {
  display: block;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 4px 10px 10px;
}
.waffle-panel { width: 320px; padding: 14px; }
/* The waffle now opens from the topbar (top-right), so it must not inherit the
   left-rail flyout geometry (full-height panel pinned beside the 60px rail).
   Fixed to the viewport, tucked under the bar, flush right, content-sized. */
.flyout.waffle-panel {
  position: fixed;
  top: 60px; right: 14px; left: auto;
  height: auto; max-height: calc(100vh - 84px);
  overflow-y: auto;
  border-right: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateY(-8px);
}
.flyout.waffle-panel.open { transform: translateY(0); }
@media (max-width: 900px) {
  .flyout.waffle-panel { right: 8px; left: auto; width: min(92vw, 320px); }
}

/* Company footer, matching Service / Compass / Alert. Built on GRC's own
   --color-* tokens rather than another app's literal hex, so it follows this
   app's light and dark themes automatically. */
.ia-footer { margin-top: 2rem; padding: 2rem 1.75rem 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .85rem; }
.ia-footer-inner { max-width: 1280px; margin-inline: auto; display: grid; gap: 1.75rem; grid-template-columns: 2fr 1fr 1fr 1.2fr; }
@media (max-width: 1024px) { .ia-footer-inner { grid-template-columns: 1fr 1fr; } .ia-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 539px) { .ia-footer-inner { grid-template-columns: 1fr; } }
.ia-footer-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-bottom: 10px; }
.ia-footer-mark small { display: block; font-size: .68rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.ia-footer-mark strong { display: block; font-size: 1rem; font-weight: 700; color: var(--color-text); letter-spacing: -.01em; }
.ia-footer-tagline { font-size: .8rem; line-height: 1.6; color: var(--color-text-muted); max-width: 44ch; margin: 0; }
.ia-footer-col h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text); margin: 0 0 10px; }
.ia-footer-col a { display: block; font-size: .8rem; color: var(--color-text-muted); padding: 3px 0; text-decoration: none; transition: color .12s; }
.ia-footer-col a:hover { color: var(--color-text); }
.ia-footer-addr { font-style: normal; color: var(--color-text-muted); line-height: 1.55; font-size: .78rem; }
.ia-footer-bottom { max-width: 1280px; margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: .76rem; color: var(--color-text-muted); }
.ia-footer-social { display: inline-flex; gap: 6px; }
.ia-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: color .15s, border-color .15s; }
.ia-footer-social a:hover { color: var(--color-text); border-color: var(--color-accent); }
@media print { .ia-footer { display: none; } }
.waffle-panel-hdr { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.waffle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.waffle-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); border: 1px solid transparent; transition: background var(--transition); }
.waffle-tile:hover { background: rgba(36,99,235,.10); border-color: rgba(36,99,235,.32); }
.waffle-tile.current { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.40); }
.waffle-tile-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.waffle-tile-name { font-weight: 600; font-size: 13px; }
.waffle-tile-tag { font-size: 10.5px; color: var(--color-text-muted); margin-top: 2px; }
.waffle-panel-ftr { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 10px; display: flex; justify-content: space-between; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(22,22,26,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}

.page-content {
  /* 68px, not the old 260px. .sidebar sets width:260px but the same element
     also carries .rail (declared later, so it wins) at width:60px - this
     offset was never updated when the rail replaced the sidebar, leaving a
     ~200px empty gutter down the left of every page. */
  margin-left: 68px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Risk Heat Map ──────────────────────────────────────────────── */
.risk-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.risk-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  border: 2px solid transparent;
}
.risk-cell:hover { transform: scale(1.08); z-index: 5; }
.risk-cell.active { border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,.3); }

.risk-minimal  { background: rgba(2,132,199,.2);  color: #7DD3FC; }
.risk-low      { background: rgba(22,163,74,.2);  color: #86EFAC; }
.risk-medium   { background: rgba(202,138,4,.2);  color: #FDE047; }
.risk-high     { background: rgba(234,88,12,.25); color: #FD8C4A; }
.risk-critical { background: rgba(220,38,38,.3);  color: #FCA5A5; }

/* ── Alerts / Toasts ────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  border: 1px solid;
}
.alert-success { background: var(--color-success-bg); border-color: rgba(16,185,129,.25); color: #34D399; }
.alert-warning { background: var(--color-warning-bg); border-color: rgba(245,158,11,.25); color: #FCD34D; }
.alert-danger  { background: var(--color-danger-bg);  border-color: rgba(239,68,68,.25);  color: #FCA5A5; }
.alert-info    { background: rgba(59,130,246,.1);     border-color: rgba(59,130,246,.25); color: #93C5FD; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

/* ── AI Suggestion Chip ─────────────────────────────────────────── */
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.2);
  border-radius: var(--radius-md);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  transition: all var(--transition);
}
.ai-chip:hover { background: rgba(56,189,248,.15); border-color: rgba(56,189,248,.4); }
.ai-chip .sparkle { width: 14px; height: 14px; }

/* ── Skeleton / Loading ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Glow Divider ───────────────────────────────────────────────── */
.glow-divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
}

/* ── Tooltips ───────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: .75rem;
  padding: .3125rem .625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Mobile ─────────────────────────────────────────────────────── */
/* Base rule: the bottom tab bar is a MOBILE-ONLY surface. Without it, the bar
   renders in normal document flow on desktop with every <svg> at unconstrained
   intrinsic size, producing a stack of giant cyan icon outlines - the icon-size
   caps exist only inside the max-width:768px block below. This exact fix was
   applied live on 2026-08-19 but was never committed to git and has since been
   lost (most likely when the icon-rail rollout rewrote this stylesheet).
   Re-added AND committed this time so it cannot silently regress again. */
.mobile-nav { display: none; }

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 300;
  }
  .sidebar.open { transform: translateX(0); }
  .page-content { margin-left: 0; }
  .topbar { position: sticky; }

  /* Rail, mobile: the slide-in drawer widens to 280px above, but a 60px
     icon rail inside that would leave 220px of dead space — so on mobile
     the rail becomes a normal labeled list instead (no hover on touch
     anyway). Flyouts become full-drawer-width panels rather than hovering
     beside a rail that's no longer 60px at this size. */
  .rail { align-items: stretch; padding: 12px 8px; }
  .rail-mark { align-self: center; }
  .rail-btn { width: 100%; height: auto; justify-content: flex-start; gap: 12px; padding: 10px 12px; font-size: .85rem; font-weight: 500; }
  .rail-tip { position: static; transform: none; background: none; border: none; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transition: none; color: inherit; font-size: inherit; font-weight: inherit; white-space: normal; }
  .flyouts { left: 0; width: 100%; }
  .flyout { width: 280px; left: 0; z-index: 301; }

  /* Bottom tab nav on mobile */
  .mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    z-index: 250;
    padding: .375rem 0 max(.375rem, env(safe-area-inset-bottom));
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .5rem;
    font-size: .625rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
    min-height: 44px;
    justify-content: center;
  }
  .mobile-nav-item.active { color: var(--color-accent); }
  .mobile-nav-item svg { width: 22px; height: 22px; }

  .card-body { padding: 1rem; }
  .page-content { padding-bottom: 80px; }
  .modal { max-height: 95vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; align-self: flex-end; }
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-nav, .btn, .ai-chip { display: none !important; }
  .page-content { margin-left: 0; }
  body { background: white; color: #000; }
  .card { border: 1px solid #ddd; box-shadow: none; }
}

/* ── HTMX Indicators ────────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Readable native dropdown option popups — dark text on white system bg. */
select option, select optgroup { background:#ffffff !important; color:#111111 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE CONTAINMENT (2026-08-20)

   Found while fixing the same bug in Argos Service, where a 10-column table
   with nothing bounding its width set the whole page width and forced
   left/right scrolling on an iPhone (390px viewport, 848px document).

   This app has the same exposure: many tables and no rule that makes their
   container a horizontal scroll box. The selector is deliberately
   container-agnostic — these tables sit in a dozen differently-named wrappers
   across the templates, so matching on any block element that DIRECTLY holds a
   table is more reliable than trying to enumerate class names.

   The table keeps its normal layout and simply scrolls inside its own
   container, so the page never grows past the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :is(div, section, main, article, form, td):has(> table) { overflow-x: auto; }
}