/* ============================================================================
   GapSync — premium component layer (enterprise uplift).

   The base app.css port was reimplemented from scratch and lost several of the
   donor (nngfsecurity) console's richer components — hero panels, stat cards
   with masked-SVG badges, kv tables, milestone lists, chips/tags, refined data
   tables. This layer restores them (styled to the donor standard) plus polish:
   card elevation/hover, filled status badges, a working chart wrapper, tabular
   figures without slashed zeros. It reuses the existing app.css design tokens
   (--emerald, --panel, --ink, --line, --raise, --mono, --radius*, --shadow*),
   so it needs no new variables. Load LAST:
   fonts → tokens → app → components → premium.
   ========================================================================== */

/* --------------------------------------------------------------- Pills / tags / chips */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; border: 1px solid var(--line-2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pill.up   { background: rgba(47, 157, 104, 0.14); color: var(--emerald-2); border-color: rgba(47, 157, 104, 0.4); }
.pill.down { background: rgba(240, 86, 79, 0.14);  color: var(--red-2);     border-color: rgba(240, 86, 79, 0.4); }
.pill.warn { background: rgba(224, 168, 62, 0.16); color: var(--amber);     border-color: rgba(224, 168, 62, 0.4); }
.tag { font-family: var(--mono); font-size: 11px; color: var(--amber); border: 1px solid rgba(224, 168, 62, 0.4);
  border-radius: 6px; padding: 1px 7px; background: rgba(224, 168, 62, 0.1); letter-spacing: 0.03em; }
.chip { display: inline-block; background: var(--raise); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 2px 11px; font-size: 12px; margin: 0 5px 5px 0; color: var(--ink-dim); }

/* --------------------------------------------------------------- Hero panel */
.hero-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px;
  padding: 26px 28px; margin-bottom: 24px; border-radius: var(--radius-xl); border: 1px solid rgba(56, 208, 138, 0.28);
  background: radial-gradient(620px 320px at 100% 0%, rgba(47, 157, 104, 0.14), transparent 70%),
              linear-gradient(135deg, rgba(15, 125, 73, 0.10), rgba(11, 106, 58, 0.03)), var(--panel);
  box-shadow: var(--shadow-sm); }
.hero-panel::after { content: ''; position: absolute; right: -120px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 208, 138, 0.14), transparent 70%); pointer-events: none; }
.hero-panel > div:first-child { min-width: 0; position: relative; z-index: 1; }
.hero-eyebrow { margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emerald-2); font-weight: 700; }
.hero-panel h1, .hero-panel h2 { margin: 12px 0 10px; font-family: var(--display, var(--sans)); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
.hero-copy { margin: 0; color: var(--ink-dim); max-width: 64ch; line-height: 1.6; font-size: 14px; }
.hero-chipset { display: grid; gap: 10px; align-content: center; position: relative; z-index: 1; }
.hero-chip { border-radius: 13px; border: 1px solid var(--line-2); padding: 12px 14px; background: var(--raise); }
.hero-chip span { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-chip strong { display: block; margin-top: 6px; font-size: 15px; color: var(--ink); font-family: var(--mono); font-weight: 500; }
@media (max-width: 900px) { .hero-panel { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Card headings & grids */
.card-h { font-size: 14px; margin: 0 0 16px; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.card-h::before { content: ''; width: 3px; height: 15px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(var(--emerald-2), var(--emerald-dim)); }
.card-h .h-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); font-family: var(--mono); }
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-cards.six { grid-template-columns: repeat(6, 1fr); }
.section-head { margin: 0 0 4px; }
.section-head h2 { margin: 0; font-size: 17px; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.stack { display: grid; gap: 18px; }
@media (max-width: 1100px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .grid-cards, .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .grid-cards, .grid-3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Card polish */
.card { transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.card:hover { border-color: var(--line-2); }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { transform: translateY(-2px); border-color: rgba(47, 157, 104, 0.45); box-shadow: var(--shadow); text-decoration: none; }

/* --------------------------------------------------------------- Stat cards */
.card.stat { position: relative; overflow: hidden; text-align: left; border-top: 3px solid rgba(47, 157, 104, 0.5);
  --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4v8H3zM10 9h4v12h-4zM17 5h4v16h-4z'/%3E%3C/svg%3E");
  --stat-tint: rgba(31,138,82,0.95); --stat-bg: rgba(47,157,104,0.14); }
.card.stat::after { content: ''; position: absolute; right: -32px; top: -32px; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 208, 138, 0.13), transparent 70%); pointer-events: none; }
.stat-num { font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 1rem + 1.7vw, 2.15rem);
  font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); }
.stat-num.amber, .stat-num.warn { color: var(--amber); }
.stat-num.green, .stat-num.ok   { color: var(--emerald-2); }
.stat-num.red,   .stat-num.crit { color: var(--red-2); }
.stat-num.sky                    { color: var(--sky); }
.stat-label { color: var(--muted); font-size: 11.5px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-foot { margin-top: 10px; font-size: 12px; color: var(--ink-dim); }
.card.stat > .stat-badge { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 11px;
  background: var(--stat-bg); display: grid; place-items: center; z-index: 1; }
.card.stat > .stat-badge::before { content: ''; width: 19px; height: 19px; background: var(--stat-tint);
  -webkit-mask: var(--stat-ico) no-repeat center / contain; mask: var(--stat-ico) no-repeat center / contain; }
/* Domain icon variants (GapSync). */
.stat-permits    { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 12h8v1.6H8V12Zm0 4h8v1.6H8V16Zm0-8h4v1.6H8V8Z'/%3E%3C/svg%3E"); --stat-tint: rgba(31,138,82,0.95); --stat-bg: rgba(47,157,104,0.14); border-top-color: rgba(47,157,104,0.5); }
.stat-review     { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E"); --stat-tint: rgba(47,127,208,0.9); --stat-bg: rgba(47,127,208,0.12); border-top-color: rgba(47,127,208,0.45); }
.stat-conflicts  { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm0 5 7.5 13h-15L12 7Zm-1 4h2v4h-2v-4Zm0 6h2v2h-2v-2Z'/%3E%3C/svg%3E"); --stat-tint: rgba(185,28,28,0.9); --stat-bg: rgba(240,86,79,0.12); border-top-color: rgba(240,86,79,0.5); }
.stat-acks       { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm-9 12H9v-2h2v2Zm0-4H9V6h2v4Zm4 4h-2v-2h2v2Zm0-4h-2V6h2v4Z'/%3E%3C/svg%3E"); --stat-tint: rgba(154,107,15,0.95); --stat-bg: rgba(224,168,62,0.16); border-top-color: rgba(224,168,62,0.5); }
.stat-incidents  { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h7l-1 8 10-12h-7l1-8Z'/%3E%3C/svg%3E"); --stat-tint: rgba(192,39,31,0.9); --stat-bg: rgba(240,86,79,0.12); border-top-color: rgba(240,86,79,0.45); }
.stat-restore    { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm1 4h-2v6l5 3 1-1.7-4-2.3V6Z'/%3E%3C/svg%3E"); --stat-tint: rgba(47,127,208,0.9); --stat-bg: rgba(47,127,208,0.12); border-top-color: rgba(47,127,208,0.45); }
.stat-revenue    { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm1 16.9V19h-2v-1.1c-1.7-.3-3-1.4-3.1-3H10c.1.8.9 1.4 2 1.4s1.9-.5 1.9-1.3c0-.7-.6-1.1-2.1-1.5-2-.5-3.6-1.2-3.6-3.1 0-1.5 1.2-2.6 2.9-2.9V6h2v1.1c1.6.3 2.7 1.3 2.8 2.8h-2.1c-.1-.7-.7-1.2-1.7-1.2-1 0-1.7.5-1.7 1.2 0 .7.7 1 2.2 1.4 2.1.5 3.5 1.3 3.5 3.2 0 1.6-1.2 2.7-3 3Z'/%3E%3C/svg%3E"); --stat-tint: rgba(15,118,110,0.95); --stat-bg: rgba(15,125,73,0.14); border-top-color: rgba(47,157,104,0.5); }
.stat-risk       { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 13L7 11.2l1.4-1.4 2.4 2.4 4.8-4.8L17 8.8 11 15Z'/%3E%3C/svg%3E"); --stat-tint: rgba(154,107,15,0.95); --stat-bg: rgba(224,168,62,0.16); border-top-color: rgba(224,168,62,0.5); }
.stat-assets     { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Zm0 7.5L4.5 6 12 2.3 19.5 6 12 9.5ZM2 12l10 5 10-5-2.3-1.2L12 14.4 4.3 10.8 2 12Zm0 5 10 5 10-5-2.3-1.2L12 19.4 4.3 15.8 2 17Z'/%3E%3C/svg%3E"); --stat-tint: rgba(31,138,82,0.95); --stat-bg: rgba(47,157,104,0.14); border-top-color: rgba(47,157,104,0.5); }
.stat-users      { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-7 2c-3 0-7 1.5-7 4.2V20h11v-2.8C13 15.5 12 13 9 13Zm7 .3c.9.8 1.5 1.9 1.5 3.9V20H22v-2.5c0-2.4-3.2-4-6-4.2Z'/%3E%3C/svg%3E"); --stat-tint: rgba(47,127,208,0.9); --stat-bg: rgba(47,127,208,0.12); border-top-color: rgba(47,127,208,0.45); }

/* --------------------------------------------------------------- KV tables / milestones / perms */
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 14px 8px 0; vertical-align: top; width: 108px; font-size: 13px; }
.kv td { padding: 8px 0; font-size: 14px; color: var(--ink); }
.milestones { list-style: none; margin: 0; padding: 0; }
.milestones li { padding: 8px 0 8px 26px; position: relative; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.milestones li:last-child { border-bottom: 0; }
.milestones li::before { content: '\25CB'; position: absolute; left: 2px; color: var(--line-2); }
.milestones li.done { color: var(--ink-dim); }
.milestones li.done::before { content: '\25CF'; color: var(--emerald-2); }

/* --------------------------------------------------------------- Data table refinement */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; color: var(--muted); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  background: var(--panel-solid, var(--panel)); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
table.data tbody tr { transition: background var(--ease); }
table.data tbody tr:hover td { background: var(--row-hover); }
table.data td.mono, table.data .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; }

/* --------------------------------------------------------------- Filled status / severity badges
   The base components.css uses a faint tint; bump it so badges read as solid
   enterprise chips (still AA — text stays the token color on a light tint). */
.status-badge, .severity-badge { font-weight: 600; border-color: color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 16%, transparent); }
:root[data-theme="dark"] .status-badge, :root[data-theme="dark"] .severity-badge {
  background: color-mix(in srgb, currentColor 22%, transparent); }

/* --------------------------------------------------------------- Chart wrapper (fixes empty charts)
   Chart.js with maintainAspectRatio:false needs a positioned, fixed-height
   parent or the canvas collapses to 0px. */
.chart-wrap { position: relative; height: 280px; width: 100%; margin-top: 8px; }
.chart-wrap > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* --------------------------------------------------------------- Toolbar / page actions */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar .spacer { margin-left: auto; }
.count-note { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }