@import url('fonts.css');

/* ==========================================================================
   TraceView — design tokens and base elements.
   Palette follows the FRAX Innovations brand (frax.co.za): white and cool
   neutral grounds, near-black ink, and the FRAX emerald (#0D6D57) as the one
   accent. Amber and red are reserved exclusively for alert states so colour
   always carries meaning.
   ========================================================================== */

:root {
    /* Brand — FRAX emerald */
    --green-900: #0D1412;
    --green-800: #0A5243;
    --green-700: #0D6D57;
    --green-600: #12866B;
    --green-500: #16967A;
    --green-100: #CFE8E0;
    --green-050: #EAF4F0;

    /* Cool neutrals */
    --sand-050: #FAFAFA;
    --sand-100: #F5F5F5;
    --sand-200: #E8E8E8;
    --sand-300: #D6D6D6;

    /* Ink */
    --ink-900: #0A0A0A;
    --ink-700: #363936;
    --ink-500: #737373;
    --ink-400: #8A8A8A;
    --ink-300: #ABABAB;

    /* Semantic — used only for status */
    --amber-600: #B7791F;
    --amber-500: #D69E2E;
    --amber-100: #FBF0D9;
    --red-700: #9B2C24;
    --red-600: #C0392B;
    --red-100: #FAE4E1;
    --blue-600: #2C5282;
    --blue-100: #DDE7F2;

    /* Surfaces */
    --bg: var(--sand-050);
    --surface: #FFFFFF;
    --border: var(--sand-200);
    --border-strong: var(--sand-300);

    /* Type */
    --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    /* Spacing scale (4px base) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    --radius: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(10, 10, 10, .05), 0 1px 3px rgba(10, 10, 10, .04);
    --shadow-md: 0 2px 6px rgba(10, 10, 10, .06), 0 8px 24px rgba(10, 10, 10, .06);
    --shadow-lg: 0 12px 40px rgba(10, 20, 17, .16);

    --sidebar-w: 244px;
    --topbar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Display rules like .btn { display:inline-flex } outrank the UA's
   [hidden] { display:none }, which silently un-hides elements JS toggles via
   the hidden attribute. Restore the attribute's authority. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.2;
    margin: 0 0 var(--s-3);
    color: var(--ink-900);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 var(--s-4); }

a { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--green-800); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-5) 0; }

/* Numeric columns line up only with tabular figures. */
.num, td.num, .stat-value, time { font-variant-numeric: tabular-nums; }

code, .mono { font-family: var(--font-mono); font-size: 0.86em; }

:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--s-3); top: -3rem;
    background: var(--green-800); color: #fff;
    padding: var(--s-2) var(--s-4); border-radius: var(--radius);
    z-index: 200; transition: top .15s;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

/* ---- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    min-height: 42px;
    padding: var(--s-2) var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .14s, border-color .14s, color .14s;
}
.btn:hover { text-decoration: none; }

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

.btn-secondary {
    background: var(--surface); color: var(--ink-700);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--sand-100); color: var(--ink-900); }

.btn-danger { background: var(--red-600); color: #fff; }
.btn-danger:hover { background: var(--red-700); color: #fff; }

.btn-sm { min-height: 34px; padding: var(--s-1) var(--s-3); font-size: 0.84rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* A fingertip needs a bigger target than a cursor does, so the compact button
   size only stays compact where there is a mouse. */
@media (pointer: coarse) {
    .btn-sm { min-height: 42px; padding-inline: var(--s-4); }
    .checkline input[type=checkbox] { width: 22px; height: 22px; }
}

/* ---- Forms -------------------------------------------------------------- */

label, .label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: var(--s-1);
}

input[type=text], input[type=email], input[type=password],
input[type=search], input[type=date], input[type=number], select, textarea {
    width: 100%;
    /* 16px keeps iOS from zooming the viewport on focus. */
    font-size: 16px;
    font-family: inherit;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    min-height: 42px;
    transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
}
input::placeholder { color: var(--ink-300); }

.field { margin-bottom: var(--s-4); }
.field-hint { font-size: 0.82rem; color: var(--ink-500); margin-top: var(--s-1); }
.field-error { font-size: 0.82rem; color: var(--red-700); margin-top: var(--s-1); }

.checkline { display: flex; align-items: center; gap: var(--s-2); }
.checkline input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--green-600); }
.checkline label { margin: 0; font-weight: 500; }

/* ---- Cards & panels ----------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { margin: 0; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-4); }

/* ---- Status ------------------------------------------------------------- */

.dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; flex: none;
    background: var(--ink-300);
}
.dot-ok { background: var(--green-500); }
.dot-warn { background: var(--amber-500); }
.dot-bad { background: var(--red-600); }
.dot-idle { background: var(--ink-300); }

.status { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }

.pill {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 2px var(--s-3);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.pill-ok { background: var(--green-050); color: var(--green-800); border-color: var(--green-100); }
.pill-warn { background: var(--amber-100); color: var(--amber-600); border-color: #F0DFB8; }
.pill-bad { background: var(--red-100); color: var(--red-700); border-color: #F2CFCA; }
.pill-idle { background: var(--sand-100); color: var(--ink-500); border-color: var(--border); }
.pill-info { background: var(--blue-100); color: var(--blue-600); border-color: #C9D9EB; }

/* ---- Tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
table.data th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface);
    white-space: nowrap;
}
table.data th a { color: inherit; }
table.data th a:hover { color: var(--green-700); text-decoration: none; }
table.data td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--sand-050); }
table.data .sorted { color: var(--green-700); }

.empty {
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-500);
}
.empty h3 { color: var(--ink-700); }

/* ---- Flash messages ----------------------------------------------------- */

.flash {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: var(--s-4);
    font-size: 0.9rem;
}
.flash-ok { background: var(--green-050); border-color: var(--green-100); color: var(--green-800); }
.flash-error { background: var(--red-100); border-color: #F2CFCA; color: var(--red-700); }

/* ---- Utilities ---------------------------------------------------------- */

.muted { color: var(--ink-500); }
.small { font-size: 0.84rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.row-end { margin-left: auto; }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

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