/* ============================================================================
 * uControl Insight — design system
 * "Refined operator" — editorial display serif, technical sans, amber AI accent.
 * Tokens drive everything: themes are one [data-theme] block away.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

/* ---------- Tokens — light theme (default) -------------------------------- */
:root {
    /* Surfaces */
    --surface-canvas:           #faf9f6;      /* warm cream — page bg */
    --surface-elevated:         #ffffff;      /* cards */
    --surface-recessed:         #f4f2ed;      /* hover, dim panels */
    --surface-sunken:           #edeae3;      /* table headers, deep wells */
    --surface-sidebar:          #0a0c10;      /* sidebar — always dark */
    --surface-sidebar-elevated: #14181f;      /* sidebar hover */
    --surface-sidebar-active:   #1c2230;      /* sidebar active row */

    /* Borders */
    --border-subtle:   #ede9e0;
    --border-default:  #d8d3c8;
    --border-strong:   #b8b2a5;
    --border-sidebar:  #1c2230;

    /* Text */
    --text-primary:        #1c1917;
    --text-secondary:      #57534e;
    --text-tertiary:       #8a847d;
    --text-quaternary:     #b8b2a5;
    --text-on-accent:      #ffffff;
    --text-on-sidebar:           #f5f5f4;
    --text-on-sidebar-muted:     #a8a29e;
    --text-on-sidebar-quiet:     #6b6258;

    /* Brand — confident indigo, refined from the old blue-600 */
    --brand:              #1e3a8a;
    --brand-hover:        #1e40af;
    --brand-active:       #1d4ed8;
    --brand-soft:         #e0e7ff;
    --brand-on:           #ffffff;

    /* AI accent — warm amber (illumination/discovery metaphor; NOT purple) */
    --ai:                 #b45309;
    --ai-hover:           #92400e;
    --ai-active:          #78350f;
    --ai-soft:            #fef3c7;
    --ai-softer:          #fffbeb;
    --ai-glow:            rgba(217, 119, 6, 0.18);
    --ai-on:              #ffffff;

    /* Status */
    --status-success:        #15803d;
    --status-success-soft:   #dcfce7;
    --status-success-strong: #14532d;
    --status-warning:        #b45309;
    --status-warning-soft:   #fef3c7;
    --status-warning-strong: #78350f;
    --status-danger:         #b91c1c;
    --status-danger-soft:    #fee2e2;
    --status-danger-strong:  #7f1d1d;
    --status-info:           #0369a1;
    --status-info-soft:      #e0f2fe;
    --status-info-strong:    #075985;
    --status-neutral:        #57534e;
    --status-neutral-soft:   #f4f2ed;

    /* Typography */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body:    "Geist", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-display: 2.5rem;     /* 40px — hero numerals + display headings */
    --text-h1:      1.625rem;   /* 26px — page titles */
    --text-h2:      1.1875rem;  /* 19px — section titles */
    --text-h3:      0.95rem;    /* 15.2px — card titles */
    --text-body:    0.875rem;   /* 14px — body text */
    --text-small:   0.8125rem;  /* 13px */
    --text-caption: 0.75rem;    /* 12px */
    --text-micro:   0.6875rem;  /* 11px — uppercase labels */

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-body:  1.55;
    --leading-loose: 1.7;

    --tracking-tight:  -0.022em;
    --tracking-normal: 0;
    --tracking-label:  0.08em;
    --tracking-micro:  0.12em;

    /* Radii */
    --radius-xs:   3px;
    --radius-sm:   5px;
    --radius-md:   7px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 1px rgba(28, 25, 23, 0.03);
    --shadow-md:  0 4px 12px rgba(28, 25, 23, 0.07), 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-lg:  0 18px 40px rgba(28, 25, 23, 0.1), 0 6px 16px rgba(28, 25, 23, 0.05);
    --shadow-xl:  0 28px 60px rgba(28, 25, 23, 0.14), 0 10px 24px rgba(28, 25, 23, 0.07);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-ai-glow: 0 0 0 1px var(--ai-soft), 0 12px 32px var(--ai-glow);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

    /* Motion */
    --motion-instant: 80ms;
    --motion-fast:    160ms;
    --motion-base:    240ms;
    --motion-slow:    400ms;
    --ease-out:    cubic-bezier(0.22, 0.94, 0.30, 1);
    --ease-in:     cubic-bezier(0.40, 0.00, 1.00, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

    /* Layout */
    --sidebar-width: 16.5rem;
    --container-max: 1400px;
    --header-height: 4rem;
}

/* ---------- Tokens — dark theme ------------------------------------------- */
[data-theme="dark"] {
    --surface-canvas:           #0d1117;
    --surface-elevated:         #161b22;
    --surface-recessed:         #1c232d;
    --surface-sunken:           #11161d;
    --surface-sidebar:          #06080c;
    --surface-sidebar-elevated: #12161d;
    --surface-sidebar-active:   #1c2230;

    --border-subtle:   #232a35;
    --border-default:  #353d4b;
    --border-strong:   #4a5364;

    --text-primary:    #f5f5f4;
    --text-secondary:  #cfc8b8;          /* lifted from #b8b2a5 for readability on dark */
    --text-tertiary:   #a59f93;          /* lifted from #78716c — was below AA */
    --text-quaternary: #7c766c;          /* lifted from #57534e — was 2.7:1 */
    --text-on-sidebar-muted: #b4ada0;
    --text-on-sidebar-quiet: #7c766c;

    /* Brand: medium-saturated blue that works as BOTH button bg (white text legible)
       AND link text on dark canvas (~7:1 contrast). The old #6a96ff was too pale for buttons. */
    --brand:           #3b82f6;
    --brand-hover:     #60a5fa;
    --brand-active:    #93c5fd;
    --brand-soft:      rgba(59, 130, 246, 0.20);

    --ai:              #f59e0b;
    --ai-hover:        #fbbf24;
    --ai-active:       #fcd34d;
    --ai-soft:         rgba(245, 158, 11, 0.18);
    --ai-softer:       rgba(245, 158, 11, 0.09);
    --ai-glow:         rgba(245, 158, 11, 0.32);

    --status-success-soft:   rgba(34, 197, 94, 0.18);
    --status-success-strong: #86efac;
    --status-warning-soft:   rgba(245, 158, 11, 0.20);
    --status-warning-strong: #fcd34d;
    --status-danger-soft:    rgba(239, 68, 68, 0.20);
    --status-danger-strong:  #fca5a5;
    --status-info-soft:      rgba(56, 189, 248, 0.18);
    --status-info-strong:    #93c5fd;
    --status-neutral:        #d4cfc4;          /* lifted: was inherited #57534e (dark gray) which was unreadable on dark canvas */
    --status-neutral-soft:   rgba(148, 142, 130, 0.22);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-xl:  0 28px 60px rgba(0, 0, 0, 0.65);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Inline code element (themed by default) ----------------------
 * Inline <code> picks up the canvas-recessed surface + primary text so it
 * adapts to dark mode automatically. Hard-coded inline styles still win, but
 * this catches the many bare <code> tags in the setup-guide / settings pages.
 */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--surface-recessed);
    color: var(--text-primary);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
}
pre code { background: transparent; padding: 0; }

/* ---------- Table modifier: divided columns ------------------------------
 * Adds subtle vertical separators between cells. Use on dense data tables
 * (e.g. asset inventory) where rows alone aren't enough to track across.
 */
.table-divided th,
.table-divided td { border-right: 1px solid var(--border-subtle); }
.table-divided th:last-child,
.table-divided td:last-child { border-right: none; }

/* ---------- Reset + base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--text-primary);
    background: var(--surface-canvas);
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--motion-base) var(--ease-out),
                color var(--motion-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ai-soft); color: var(--ai-active); }
[data-theme="dark"] ::selection { color: var(--ai-active); }

/* ---------- Typography classes (semantic) --------------------------------- */
.t-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 400;
    font-variation-settings: "opsz" 144;
    color: var(--text-primary);
}
.t-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: 500;
    font-variation-settings: "opsz" 60;
    color: var(--text-primary);
    margin: 0;
}
.t-h2 {
    font-family: var(--font-body);
    font-size: var(--text-h2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.t-h3 {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.t-section {
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro);
    color: var(--text-tertiary);
    margin: 0;
}
.t-card-title {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.t-metric {
    font-family: var(--font-mono);
    font-size: var(--text-display);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.t-metric-sm {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.t-label {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
}
.t-caption    { font-size: var(--text-caption); color: var(--text-secondary); }
.t-mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-tabular    { font-variant-numeric: tabular-nums; }
.t-italic     { font-style: italic; }
.t-strike     { text-decoration: line-through; }
.t-muted      { color: var(--text-secondary); }
.t-quiet      { color: var(--text-tertiary); }
.t-primary    { color: var(--text-primary); }
.t-on-accent  { color: var(--text-on-accent); }

/* Page header pattern */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-header__title  { display: flex; flex-direction: column; gap: 0.25rem; }
.page-header__eyebrow {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro);
    color: var(--text-tertiary);
}
.page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Layout primitives --------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.min-h-screen { min-height: 100vh; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Spacing */
.p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; }
.pb-1 { padding-bottom: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mt-16 { margin-top: 4rem; }
.ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }

/* Sizing */
.w-full { width: 100%; }
.w-64 { width: var(--sidebar-width); }
.w-1\/2 { width: 50%; }
.w-3\/4 { width: 75%; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.h-4 { height: 1rem; } .h-8 { height: 2rem; }

/* Text alignment / transform */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.tracking-wider { letter-spacing: var(--tracking-label); }
.tracking-tight { letter-spacing: var(--tracking-tight); }

/* Font-size + weight legacy utilities (back-compat — route through tokens) */
.text-xs { font-size: var(--text-caption); line-height: var(--leading-snug); }
.text-sm { font-size: var(--text-body); line-height: var(--leading-snug); }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; line-height: var(--leading-snug); }
.text-xl { font-size: 1.25rem; line-height: var(--leading-snug); }
.text-2xl { font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.text-3xl { font-size: 1.875rem; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.text-6xl { font-size: 3.5rem; line-height: 1; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-body); }
.italic { font-style: italic; }

/* Colour utilities (legacy classnames mapped to tokens) */
.bg-white     { background-color: var(--surface-elevated); }
.bg-gray-50   { background-color: var(--surface-canvas); }
.bg-gray-200  { background-color: var(--surface-recessed); }
.bg-gray-900  { background-color: var(--surface-sidebar); }
.bg-blue-600  { background-color: var(--brand); color: var(--brand-on); }
.bg-red-50    { background-color: var(--status-danger-soft); }
.bg-green-50  { background-color: var(--status-success-soft); }
.bg-yellow-50 { background-color: var(--status-warning-soft); }
.bg-canvas    { background-color: var(--surface-canvas); }
.bg-elevated  { background-color: var(--surface-elevated); }
.bg-recessed  { background-color: var(--surface-recessed); }
.bg-sunken    { background-color: var(--surface-sunken); }

.text-white      { color: #ffffff; }
.text-gray-400   { color: var(--text-quaternary); }
.text-gray-500   { color: var(--text-tertiary); }
.text-gray-700   { color: var(--text-secondary); }
.text-gray-800   { color: var(--text-primary); }
.text-gray-900   { color: var(--text-primary); }
.text-gray-300   { color: var(--text-quaternary); }
.text-blue-500   { color: var(--brand); }
.text-blue-600   { color: var(--brand); }
.text-blue-700   { color: var(--brand-hover); }
.text-blue-800   { color: var(--brand-active); }
.text-red-700    { color: var(--status-danger); }
.text-green-700  { color: var(--status-success); }
.text-green-600  { color: var(--status-success); }
.text-yellow-700 { color: var(--status-warning); }
.text-yellow-500 { color: var(--status-warning); }
.text-amber-500  { color: var(--ai); }
.text-amber-600  { color: var(--ai-hover); }

/* Borders */
.border    { border: 1px solid var(--border-default); }
.border-b  { border-bottom: 1px solid var(--border-subtle); }
.border-t  { border-top: 1px solid var(--border-subtle); }
.border-l  { border-left: 1px solid var(--border-subtle); }
.border-r  { border-right: 1px solid var(--border-subtle); }
.border-gray-100 { border-color: var(--border-subtle); }
.border-gray-200 { border-color: var(--border-subtle); }
.border-gray-300 { border-color: var(--border-default); }
.border-gray-700 { border-color: var(--border-sidebar); }
.border-red-200    { border-color: color-mix(in srgb, var(--status-danger) 30%, transparent); }
.border-green-200  { border-color: color-mix(in srgb, var(--status-success) 30%, transparent); }
.border-yellow-200 { border-color: color-mix(in srgb, var(--status-warning) 35%, transparent); }
.rounded     { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full{ border-radius: var(--radius-full); }

/* Shadows */
.shadow      { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* ---------- Forms --------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], select, textarea, .form-input {
    display: block;
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    background: var(--surface-elevated);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-quaternary); }
input:focus, select:focus, textarea:focus, .form-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--shadow-focus);
}
input[disabled], select[disabled], textarea[disabled] {
    background: var(--surface-recessed);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

/* ---------- Buttons ------------------------------------------------------- */
button[type="submit"], .btn {
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.55rem 1rem;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring),
                box-shadow var(--motion-fast) var(--ease-out);
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand);
    color: var(--brand-on);
    border: 1px solid var(--brand);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.95rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring),
                box-shadow var(--motion-fast) var(--ease-out);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.btn-primary:hover  { background: var(--brand-hover); border-color: var(--brand-hover); transform: translateY(-1px); box-shadow: var(--shadow-md), var(--shadow-inset); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.95rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring);
}
.btn-secondary:hover  { background: var(--surface-recessed); border-color: var(--border-strong); }
.btn-secondary:active { transform: translateY(1px); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.4rem 0.6rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--surface-recessed); color: var(--text-primary); }

.btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--ai);
    color: var(--ai-on);
    border: 1px solid var(--ai);
    border-radius: var(--radius-md);
    padding: 0.55rem 1.05rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: var(--shadow-sm), var(--shadow-inset);
    transition: background-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-base) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring);
}
.btn-ai:hover  { background: var(--ai-hover); border-color: var(--ai-hover); box-shadow: var(--shadow-ai-glow); transform: translateY(-1px); }
.btn-ai:active { transform: translateY(0); }

/* ---------- Cards --------------------------------------------------------- */
.card, .bg-white.rounded-lg.shadow {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    transition: box-shadow var(--motion-base) var(--ease-out),
                border-color var(--motion-base) var(--ease-out),
                transform var(--motion-base) var(--ease-out);
}
.card-flat {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.card-hover:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ---------- Tables -------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    font-variant-numeric: tabular-nums;
}
th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--surface-sunken);
    font-weight: 600;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    border-bottom: 1px solid var(--border-default);
}
td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--motion-fast) var(--ease-out); }
tbody tr:hover td { background: var(--surface-recessed); }

/* ---------- Navigation links --------------------------------------------- */
.nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-on-sidebar-muted);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                padding-left var(--motion-fast) var(--ease-out);
    position: relative;
}
.nav-link:hover {
    background-color: var(--surface-sidebar-elevated);
    color: var(--text-on-sidebar);
    padding-left: 0.9rem;
}
.nav-link.active {
    background-color: var(--surface-sidebar-active);
    color: var(--text-on-sidebar);
    box-shadow: inset 2px 0 0 var(--ai);
}
.nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--ai);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- Status badges ------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}
.badge-green, .badge-success  { background: var(--status-success-soft); color: var(--status-success-strong); }
.badge-yellow, .badge-warning { background: var(--status-warning-soft); color: var(--status-warning-strong); }
.badge-red, .badge-danger     { background: var(--status-danger-soft); color: var(--status-danger-strong); }
.badge-gray                   { background: var(--status-neutral-soft); color: var(--status-neutral); }
.badge-blue, .badge-info      { background: var(--status-info-soft); color: var(--status-info-strong); }
.badge-ai                     { background: var(--ai-soft); color: var(--ai-active); }
.badge-virtual                { background: var(--brand-soft); color: var(--brand); }
.badge-cloud                  { background: #cffafe; color: #155e75; }
[data-theme="dark"] .badge-cloud { background: rgba(34, 211, 238, 0.18); color: #67e8f7; }

/* ------------------------------------------------------------------------------
   Styled hover/focus tooltip — instant, theme-aware, keyboard-accessible.
   Usage:
       <span class="tt" data-tt="Inferred from MAC OUI lookup">ⓘ</span>
   The tip appears on hover OR focus (tabindex="0" gives it keyboard reach).
   Width capped + word-wrapped so long messages render as a readable card.
   ------------------------------------------------------------------------------ */
.tt {
    position: relative;
    cursor: help;
    display: inline-block;
}
.tt::after {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: var(--surface-2, #1e293b);
    color: var(--text-primary, #f1f5f9);
    border: 1px solid var(--border, #334155);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}
.tt:hover::after,
.tt:focus::after,
.tt:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Caret pointing down at the trigger */
.tt::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border, #334155);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
    z-index: 10000;
}
.tt:hover::before,
.tt:focus::before,
.tt:focus-within::before {
    opacity: 1;
}

/* Aha Engine badge — the existing visual idea, made canonical */
.badge-aha {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    background: var(--ai);
    color: var(--ai-on);
    box-shadow: 0 1px 2px var(--ai-glow);
}
.badge-aha--info    { background: var(--status-info);    color: #fff; }
.badge-aha--success { background: var(--status-success); color: #fff; }
.badge-aha--danger  { background: var(--status-danger);  color: #fff; }

/* ---------- AI accent treatments (extracted from inline duplication) ----- */
.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--ai);
    color: var(--ai-on);
    line-height: 1.4;
}
.ai-pill::before {
    content: "◆";
    font-size: 0.5rem;
    transform: translateY(-1px);
}
.ai-banner {
    background: linear-gradient(180deg, var(--ai-softer), var(--surface-elevated));
    border: 1px solid var(--ai-soft);
    border-left: 3px solid var(--ai);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1.1rem;
    box-shadow: 0 1px 2px var(--ai-glow);
}
.ai-heading {
    color: var(--ai-active);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
}
.ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem; height: 1.4rem;
    border-radius: var(--radius-sm);
    background: var(--ai-soft);
    color: var(--ai);
    font-weight: 700;
    font-size: 0.75rem;
}
[data-theme="dark"] .ai-icon { background: var(--ai-soft); color: var(--ai-active); }

/* ---------- Port pills + service pills (extracted from per-page <style>) - */
.port-pill, .port-pill-sm {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin: 1px 2px;
    white-space: nowrap;
    line-height: 1.4;
}
.port-pill    { font-size: var(--text-caption); padding: 2px 8px; }
.port-pill-sm { font-size: 0.62rem;             padding: 1px 6px; }

.port-ssh,   .pp-ssh   { background: #dbeafe; color: #1e40af; }
.port-http,  .pp-http  { background: #d1fae5; color: #065f46; }
.port-https, .pp-https { background: #a7f3d0; color: #064e3b; }
.port-rdp,   .pp-rdp   { background: #fce7f3; color: #9d174d; }
.port-smb,   .pp-smb   { background: #fef3c7; color: #92400e; }
.port-snmp,  .pp-snmp  { background: #e0e7ff; color: #3730a3; }
.port-rpc,   .pp-rpc   { background: #f3e8ff; color: #6b21a8; }
.port-winrm, .pp-winrm { background: #ffe4e6; color: #9f1239; }
.port-prox,  .pp-prox  { background: #ffedd5; color: #9a3412; }
.port-print, .pp-print { background: #fef9c3; color: #854d0e; }
.port-other, .pp-other { background: var(--surface-recessed); color: var(--text-secondary); }

/* Dark mode: port pills match the service pills' saturated style — white text on solid colour. */
[data-theme="dark"] .port-ssh,   [data-theme="dark"] .pp-ssh   { background: #1e40af; color: #fff; }
[data-theme="dark"] .port-http,  [data-theme="dark"] .pp-http  { background: #065f46; color: #fff; }
[data-theme="dark"] .port-https, [data-theme="dark"] .pp-https { background: #047857; color: #fff; }
[data-theme="dark"] .port-rdp,   [data-theme="dark"] .pp-rdp   { background: #9d174d; color: #fff; }
[data-theme="dark"] .port-smb,   [data-theme="dark"] .pp-smb   { background: #92400e; color: #fff; }
[data-theme="dark"] .port-snmp,  [data-theme="dark"] .pp-snmp  { background: #3730a3; color: #fff; }
[data-theme="dark"] .port-rpc,   [data-theme="dark"] .pp-rpc   { background: #6b21a8; color: #fff; }
[data-theme="dark"] .port-winrm, [data-theme="dark"] .pp-winrm { background: #9f1239; color: #fff; }
[data-theme="dark"] .port-prox,  [data-theme="dark"] .pp-prox  { background: #9a3412; color: #fff; }
[data-theme="dark"] .port-print, [data-theme="dark"] .pp-print { background: #854d0e; color: #fff; }
[data-theme="dark"] .port-other, [data-theme="dark"] .pp-other { background: #475569; color: #fff; }

.svc-pill, .svc-pill-sm {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: var(--radius-full);
    margin: 1px 1px;
    white-space: nowrap;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
.svc-pill    { font-size: 0.625rem; padding: 2px 7px; }
.svc-pill-sm { font-size: 0.5625rem; padding: 1px 5px; }

.svc-ssh,   .sp-ssh   { background: #1e40af; color: #fff; }
.svc-http,  .sp-http  { background: #065f46; color: #fff; }
.svc-https, .sp-https { background: #047857; color: #fff; }
.svc-rdp,   .sp-rdp   { background: #9d174d; color: #fff; }
.svc-smb,   .sp-smb   { background: #92400e; color: #fff; }
.svc-snmp,  .sp-snmp  { background: #3730a3; color: #fff; }
.svc-rpc,   .sp-rpc   { background: #6b21a8; color: #fff; }
.svc-winrm, .sp-winrm { background: #9f1239; color: #fff; }
.svc-prox,  .sp-prox  { background: #9a3412; color: #fff; }
.svc-print, .sp-print { background: #854d0e; color: #fff; }

/* ---------- Recency coloring (for asset Last-Seen pass) ----------------- */
.recency-fresh { color: var(--status-success); font-weight: 500; }
.recency-recent { color: var(--text-primary); }
.recency-stale { color: var(--status-warning); font-weight: 500; }
.recency-cold { color: var(--status-danger); font-weight: 600; }
.recency-unknown { color: var(--text-quaternary); }

/* ---------- Asset detail tab buttons ------------------------------------ */
.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: -1px;
    padding: 0.5rem 0 0.75rem;
    transition: color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-count {
    margin-left: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    background: var(--surface-recessed);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.45rem;
}

/* ---------- Card section heading + detail tables ------------------------ */
.card-section-title {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
}
.detail-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.detail-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-subtle); }
.detail-table td { padding: 0.5rem 0; }
.detail-label { color: var(--text-tertiary); width: 9rem; vertical-align: top; white-space: nowrap; font-size: var(--text-caption); }
.detail-value { color: var(--text-primary); }

/* ---------- Modal overlay + dialog (upgraded) --------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--text-primary) 35%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
}
.modal-overlay.open {
    display: flex;
    opacity: 1;
    animation: modalFadeIn var(--motion-base) var(--ease-out);
}
.modal-dialog {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 32rem;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 90vh;
    transform: translateY(0) scale(1);
    animation: modalSlideUp var(--motion-base) var(--ease-spring);
}
.modal-overlay.closing { animation: modalFadeOut var(--motion-fast) var(--ease-in) forwards; }
.modal-overlay.closing .modal-dialog { animation: modalSlideDown var(--motion-fast) var(--ease-in) forwards; }

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes modalSlideUp {
    from { transform: translateY(12px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes modalSlideDown {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(8px) scale(0.97); opacity: 0; }
}

/* ---------- Animations --------------------------------------------------- */
@keyframes pulse        { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.animate-pulse          { animation: pulse 2s var(--ease-in-out) infinite; }

@keyframes shimmer      { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.animate-shimmer {
    background: linear-gradient(90deg, var(--surface-recessed) 0%, var(--surface-elevated) 50%, var(--surface-recessed) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp var(--motion-base) var(--ease-out) both; }

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--ai-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}
.animate-glow { animation: glow 1.8s var(--ease-in-out) infinite; }

@keyframes justUpdated {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-success) 35%, transparent); }
    100% { box-shadow: 0 0 0 6px transparent; }
}
.flash-updated { animation: justUpdated 1.2s var(--ease-out); }

@keyframes thinking {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-2px); }
}
.thinking-dot {
    display: inline-block; width: 5px; height: 5px; margin: 0 1px;
    background: var(--ai); border-radius: var(--radius-full);
    animation: thinking 1.2s var(--ease-in-out) infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.thinking-dot:nth-child(3) { animation-delay: 0.36s; }

/* HTMX swap transitions */
.htmx-swapping  { opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
.htmx-settling  { opacity: 0; transform: translateY(4px); }
.htmx-settling.htmx-added { animation: fadeInUp var(--motion-base) var(--ease-out) both; }
.htmx-indicator { opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Focus visible (accessibility) -------------------------------- */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}
button:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-ai:focus-visible, a:focus-visible {
    box-shadow: var(--shadow-focus), 0 0 0 1px var(--brand);
}
.nav-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ai);
    color: var(--text-on-sidebar);
}
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: var(--shadow-focus); }
.focus\:ring-blue-500:focus { box-shadow: var(--shadow-focus); }

/* Skip to content (a11y) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--brand);
    color: var(--brand-on);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }

/* ---------- Sidebar dark surface helpers -------------------------------- */
.sidebar-pill {
    width: 130px;
    text-align: center;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 5px 0;
    border-radius: var(--radius-full);
    text-decoration: none;
    background: var(--surface-sidebar-active);
    color: var(--text-on-sidebar);
    border: 1px solid var(--border-sidebar);
    transition: background-color var(--motion-fast) var(--ease-out);
}
.sidebar-pill.active { background: var(--ai); color: var(--ai-on); border-color: var(--ai); }
.sidebar-pill:hover  { background: var(--surface-sidebar-elevated); }

.sidebar-section-label {
    padding: 0.85rem 0.75rem 0.4rem;
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro);
    color: var(--text-on-sidebar-quiet);
}

.sidebar-footer {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-sidebar);
    background: var(--surface-sidebar);
}
.sidebar-footer-btn {
    flex: 1;
    text-align: center;
    font-size: var(--text-caption);
    font-weight: 600;
    padding: 0.45rem 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-on-sidebar-muted);
    background: var(--surface-sidebar-elevated);
    border: 1px solid var(--border-sidebar);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.sidebar-footer-btn:hover { color: var(--text-on-sidebar); border-color: var(--text-on-sidebar-quiet); }
.sidebar-footer-btn--danger:hover {
    color: #fee2e2;
    background: #991b1b;
    border-color: #991b1b;
}

/* ---------- Visibility ---------------------------------------------------- */
.hidden { display: none !important; }

/* ---------- Footer ------------------------------------------------------- */
.app-footer {
    padding: 0.6rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-elevated);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    font-size: var(--text-micro);
    color: var(--text-tertiary);
}
.app-footer__group { display: flex; align-items: center; gap: 1rem; }
.app-footer__status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.app-footer__dot {
    width: 6px; height: 6px; border-radius: var(--radius-full);
    background: var(--status-success);
    box-shadow: 0 0 0 0 currentColor;
    animation: glow 2.4s var(--ease-in-out) infinite;
    color: var(--status-success);
}
.app-footer__dot--warn { background: var(--status-warning); color: var(--status-warning); }
.app-footer__dot--danger { background: var(--status-danger); color: var(--status-danger); }

/* ---------- Theme toggle button ----------------------------------------- */
.theme-toggle {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-sidebar);
    background: var(--surface-sidebar-elevated);
    color: var(--text-on-sidebar-muted);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                transform var(--motion-base) var(--ease-spring);
}
.theme-toggle:hover { color: var(--text-on-sidebar); transform: rotate(15deg); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Insight strip cards (Aha pattern, made canonical) ----------- */
.insight-strip {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.insight-strip__head {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem;
}
.insight-strip__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}
.insight-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
}
.insight-card {
    border-left: 3px solid var(--text-quaternary);
    background: var(--surface-recessed);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.65rem 0.9rem;
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.insight-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.insight-card__head {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem;
}
.insight-card__category {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
}
.insight-card__value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-caption);
    font-weight: 700;
}
.insight-card__title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--leading-snug);
}
.insight-card__bullet {
    font-size: var(--text-caption);
    color: var(--text-secondary);
    margin-top: 0.2rem;
    line-height: var(--leading-snug);
}

.insight-card--cost        { border-left-color: var(--ai); background: var(--ai-softer); }
.insight-card--cost     .insight-card__value { color: var(--ai-hover); }
.insight-card--ops         { border-left-color: var(--status-info); background: var(--status-info-soft); }
.insight-card--ops      .insight-card__value { color: var(--status-info); }
.insight-card--lifecycle   { border-left-color: var(--status-danger); background: var(--status-danger-soft); }
.insight-card--lifecycle .insight-card__value { color: var(--status-danger); }
.insight-card--approaching { border-left-color: var(--status-warning); background: var(--status-warning-soft); }
.insight-card--approaching .insight-card__value { color: var(--status-warning); }
.insight-card--security    { border-left-color: #7c3aed; background: color-mix(in srgb, #7c3aed 8%, var(--surface-elevated)); }

/* ---------- Mini topology panel ----------------------------------------- */
.mini-topo-toggle { cursor: pointer; user-select: none; }
.mini-topo-chevron { transition: transform var(--motion-fast) var(--ease-out); display: inline-block; color: var(--text-quaternary); }
.mini-topo-chevron.collapsed { transform: rotate(-90deg); }

/* ---------- Metric strip (dashboard) ------------------------------------ */
.metric-strip {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.metric-strip__cell {
    padding: 1.1rem 1.25rem;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
}
.metric-strip__cell:last-child { border-right: none; }
.metric-strip__label {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    order: 2;
}
.metric-strip__value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    order: 1;
}
.metric-strip__value--success { color: var(--status-success); }
.metric-strip__value--brand   { color: var(--brand); }
.metric-strip__value--warning { color: var(--status-warning); }
.metric-strip__value--ai      { color: var(--ai); }
.metric-strip__delta {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--text-secondary);
    order: 3;
}
/* Clickable cells (drill-through). Subtle hover lift + ai-glow underline-style accent. */
.metric-strip__link {
    text-decoration: none;
    color: inherit;
    transition: background-color var(--motion-fast) var(--ease-out);
    cursor: pointer;
    position: relative;
}
.metric-strip__link:hover { background-color: var(--surface-recessed); }
.metric-strip__link::after {
    content: "";
    position: absolute;
    left: 1.25rem; right: 1.25rem; bottom: 0;
    height: 2px;
    background: var(--ai);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) var(--ease-out);
}
.metric-strip__link:hover::after { transform: scaleX(1); }

/* Type-breakdown table — clickable rows that drill into the asset list. Bigger hit area
   than a plain link, plus a chevron and accent stripe on hover for affordance. */
.type-table { width: 100%; border-collapse: collapse; }
.type-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.55rem 0.85rem;
}
.type-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 2px solid transparent;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-left-color var(--motion-fast) var(--ease-out),
                padding-left var(--motion-fast) var(--ease-out);
}
.type-row:hover {
    background: var(--surface-recessed);
    border-left-color: var(--ai);
    padding-left: 1rem;
}
.type-row__label { font-size: var(--text-body); color: var(--text-secondary); }
.type-row:hover .type-row__label { color: var(--text-primary); }
.type-row__count { font-weight: 600; color: var(--text-primary); font-size: var(--text-body); }
.type-row__arrow {
    color: var(--text-quaternary);
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    font-family: var(--font-mono);
}
.type-row:hover .type-row__arrow { color: var(--ai); transform: translateX(3px); }
.type-table tr:last-child .type-row { border-bottom: none; }

/* ---------- Chat (Ask uControl) ----------------------------------------- */
.chat-shell {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 62vh;
    overflow: hidden;
}
.chat-transcript {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    background:
        radial-gradient(1200px 400px at 50% -10%, var(--ai-softer), transparent 70%),
        var(--surface-elevated);
}
.chat-empty {
    text-align: center;
    padding: 3.5rem 1.5rem 2rem;
    color: var(--text-secondary);
}
.chat-empty__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    background: var(--ai-soft);
    color: var(--ai);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px var(--ai-glow);
}
.chat-empty__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: var(--tracking-tight);
}
.chat-empty__suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    max-width: 38rem;
    margin: 1.5rem auto 0;
}
.chat-suggestion {
    background: var(--surface-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring);
    font-family: var(--font-body);
    font-style: italic;
}
.chat-suggestion:hover {
    border-color: var(--ai);
    color: var(--text-primary);
    background: var(--ai-softer);
    transform: translateY(-1px);
}

.chat-turn { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; animation: fadeInUp var(--motion-base) var(--ease-out) both; }
.chat-msg { display: flex; gap: 0.65rem; align-items: flex-start; }
.chat-msg__avatar {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.chat-msg__avatar--user { background: var(--surface-recessed); color: var(--text-secondary); }
.chat-msg__avatar--ai   { background: var(--ai-soft); color: var(--ai-active); font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; }
.chat-bubble {
    flex: 1;
    border-radius: var(--radius-lg);
    padding: 0.7rem 0.95rem;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--text-primary);
}
.chat-bubble--user {
    background: var(--surface-canvas);
    border: 1px solid var(--border-subtle);
}
.chat-bubble--ai {
    background: linear-gradient(180deg, var(--ai-softer), var(--surface-elevated));
    border: 1px solid var(--ai-soft);
    box-shadow: 0 1px 2px var(--ai-glow);
    /* Until marked.js parses the markdown, preserve LLM line breaks so raw output is still readable. */
    white-space: pre-wrap;
}
.chat-bubble--ai[data-rendered] { white-space: normal; }
.chat-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}
.chat-bubble th {
    background: var(--surface-recessed);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--border-default);
    text-align: left;
    font-size: var(--text-caption);
}
.chat-bubble td {
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--border-subtle);
}
.chat-bubble tr:last-child td { border-bottom: none; }
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3, .chat-bubble h4 {
    font-family: var(--font-body);
    font-weight: 600;
    margin: 0.6rem 0 0.4rem;
    line-height: 1.3;
}
.chat-bubble h1 { font-size: 1.05rem; }
.chat-bubble h2 { font-size: var(--text-h3); }
.chat-bubble h3, .chat-bubble h4 { font-size: var(--text-body); color: var(--text-secondary); }
.chat-bubble--error { background: var(--status-danger-soft); border: 1px solid color-mix(in srgb, var(--status-danger) 30%, transparent); color: var(--status-danger-strong); }
.chat-bubble p { margin: 0 0 0.6rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-recessed);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-xs);
}
.chat-bubble pre {
    font-family: var(--font-mono);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    overflow-x: auto;
    font-size: var(--text-caption);
    line-height: var(--leading-snug);
}
.chat-bubble ul, .chat-bubble ol { margin: 0.3rem 0 0.6rem 1.1rem; padding: 0; }
.chat-bubble li { margin: 0.15rem 0; }
.chat-bubble strong { font-weight: 600; color: var(--text-primary); }

.chat-composer {
    border-top: 1px solid var(--border-subtle);
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    background: var(--surface-elevated);
}
.chat-input {
    flex: 1;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.65rem 0.95rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    background: var(--surface-canvas);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.chat-input:focus { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-glow); outline: none; }
.chat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    font-style: italic;
}
.chat-meta {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--text-quaternary);
    padding-left: 2.3rem;
    margin-top: 0.15rem;
}

/* TekReady section "Due by" date input styling --------------------------- */
.tk-due-overdue,
.tk-due-overdue-text {
    color: var(--status-danger) !important;
    border-color: var(--status-danger) !important;
    background: var(--status-danger-soft) !important;
    font-weight: 600;
}
.tk-due-soon,
.tk-due-soon-text {
    color: var(--status-warning) !important;
    border-color: var(--status-warning) !important;
    background: var(--status-warning-soft) !important;
    font-weight: 600;
}

/* Topology icon halo in dark mode --------------------------------------- */
/* Emoji glyphs render in their fixed OS colors (mostly dark for monitor/?/
   etc), which disappear against dark surfaces. Apply a white drop-shadow to
   give each icon a subtle halo so they stay visible in dark mode without
   inverting their colors (the lightbulb / switch retain their hues). */
/* Halo ONLY the emoji icons (text.topo-icon), not the labels around them —
   applying drop-shadow to all SVG text turns IP / link labels into a blurry mess. */
[data-theme="dark"] #mini-topo-svg text.topo-icon,
[data-theme="dark"] #topology-svg text.topo-icon {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
}