/*
  Vulnerability Management Dashboard - design system
  -----------------------------------------------------------------
  Palette, layout, and the severity colour scale are all deliberate
  choices for a security-operations tool used daily by analysts and
  MSSP clients, not a marketing page - see README.md "Design notes"
  for the reasoning if you want to change any of this.
*/

:root {
    /* Core surface palette */
    --ink:            #12161D;
    --panel:          #1B212B;
    --panel-raised:   #212836;
    --hairline:       #2B3340;
    --text:           #E6E9ED;
    --text-muted:     #8993A1;

    /* Signal accent - used for links, primary actions, focus rings.
       A restrained teal rather than a stock SaaS indigo or the
       terracotta/acid-green defaults this palette was built to avoid. */
    --signal:         #3FC6B8;
    --signal-dim:     rgba(63, 198, 184, 0.14);

    /* Severity scale - a graduated slate -> amber -> ember progression,
       not a literal traffic-light red/amber/green. */
    --sev-info:       #5B6B7C;
    --sev-low:        #4C8B72;
    --sev-medium:     #C99A3A;
    --sev-high:       #C1652E;
    --sev-critical:   #B23A3A;

    --font-display:   'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:      'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    --radius:         6px;
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Header / nav                                                        */
/* ------------------------------------------------------------------ */

.site-header {
    background: var(--panel-raised);
    border-bottom: 1px solid var(--hairline);
}

.site-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}
.brand:hover { text-decoration: none; }

.brand-mark {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--signal), #257A70);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
.brand-mark::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(18, 22, 29, 0.55);
    border-radius: 2px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
}

.site-nav a { color: var(--text-muted); }
.site-nav a:hover { color: var(--text); }

.user-chip {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.site-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.site-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 2rem 0;
}

.page-heading { margin-bottom: 1.75rem; }
.page-subtitle { color: var(--text-muted); margin: 0.35rem 0 0; font-size: 0.9rem; }

/* ------------------------------------------------------------------ */
/* Stat grid (dashboard)                                               */
/* ------------------------------------------------------------------ */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--panel);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 3px solid var(--hairline);
    animation: rise 0.35s ease both;
}

.stat-number {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card-primary { border-top-color: var(--signal); }
.stat-card.sev-critical { border-top-color: var(--sev-critical); }
.stat-card.sev-high     { border-top-color: var(--sev-high); }
.stat-card.sev-medium   { border-top-color: var(--sev-medium); }
.stat-card.sev-low      { border-top-color: var(--sev-low); }
.stat-card.sev-info     { border-top-color: var(--sev-info); }

@keyframes rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ */
/* CE+ banner                                                           */
/* ------------------------------------------------------------------ */

.ce-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.ce-banner-fail {
    background: rgba(178, 58, 58, 0.1);
    border-color: rgba(178, 58, 58, 0.35);
}

.ce-banner-pass {
    background: rgba(76, 139, 114, 0.1);
    border-color: rgba(76, 139, 114, 0.35);
}

.ce-banner-text strong {
    font-family: var(--font-mono);
    font-size: 1.1rem;
}

.ce-banner-sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.dashboard-all-link { margin-top: 0.5rem; }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: var(--panel-raised);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--hairline); text-decoration: none; }

.btn-primary {
    background: var(--signal);
    border-color: var(--signal);
    color: #0B1613;
    font-weight: 600;
}
.btn-primary:hover { background: #4FDBCC; }

.btn-secondary { background: var(--panel); }

.btn-danger {
    background: var(--sev-critical);
    border-color: var(--sev-critical);
    color: #FCECEC;
    font-weight: 600;
}
.btn-danger:hover { background: #C74444; }

.btn-block { width: 100%; justify-content: center; }

/* ------------------------------------------------------------------ */
/* Forms (login + filter bar)                                          */
/* ------------------------------------------------------------------ */

.login-body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-display);
    margin: 0;
    min-height: 100vh;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--text-muted); }

.field input, .field select {
    font-family: var(--font-display);
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    background: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text);
}

.field input:focus, .field select:focus {
    border-color: var(--signal);
}

.form-error {
    background: rgba(178, 58, 58, 0.12);
    border: 1px solid rgba(178, 58, 58, 0.4);
    color: #F2B9B9;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin: 0;
}

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.field-inline { min-width: 180px; }

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding-bottom: 0.4rem;
    cursor: pointer;
}

.checkbox-field input { accent-color: var(--signal); width: 16px; height: 16px; }

.checkbox-hint { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }

.result-count {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------------ */
/* Vulnerability table                                                  */
/* ------------------------------------------------------------------ */

.table-wrap {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}

.vuln-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}

.vuln-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--panel-raised);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
}

.vuln-table td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.88rem;
    vertical-align: middle;
}

.vuln-table tbody tr:last-child td { border-bottom: none; }
.vuln-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Signature element: a coloured left-edge stripe per row keyed to
   severity, so a client scanning a long results table can triage by eye
   before reading a single word - the same instinct a SOC analyst uses. */
.vuln-table tbody tr { border-left: 4px solid transparent; }
.vuln-table tbody tr.sev-critical-row { border-left-color: var(--sev-critical); }
.vuln-table tbody tr.sev-high-row     { border-left-color: var(--sev-high); }
.vuln-table tbody tr.sev-medium-row   { border-left-color: var(--sev-medium); }
.vuln-table tbody tr.sev-low-row      { border-left-color: var(--sev-low); }
.vuln-table tbody tr.sev-info-row     { border-left-color: var(--sev-info); }

.empty-row td { color: var(--text-muted); text-align: center; padding: 2rem; }

.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0B0E12;
}
.badge.sev-critical { background: var(--sev-critical); color: #FCECEC; }
.badge.sev-high     { background: var(--sev-high); color: #FCEEE6; }
.badge.sev-medium   { background: var(--sev-medium); color: #2B2107; }
.badge.sev-low      { background: var(--sev-low); color: #E9F5EF; }
.badge.sev-info     { background: var(--sev-info); color: #EEF1F4; }

/* ------------------------------------------------------------------ */
/* Pagination                                                           */
/* ------------------------------------------------------------------ */

.pagination {
    display: flex;
    gap: 0.4rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.pagination a:hover { text-decoration: none; border-color: var(--signal); }
.pagination a.active { background: var(--signal); border-color: var(--signal); color: #0B1613; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .site-nav { gap: 0.9rem; }
    .table-wrap { overflow-x: auto; }
    .vuln-table { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card { animation: none; }
    * { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Admin pages (user & tag management)                                  */
/* ------------------------------------------------------------------ */

.panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.panel h2 {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    font-weight: 600;
}

.flash {
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.flash-success {
    background: rgba(76, 139, 114, 0.12);
    border-color: rgba(76, 139, 114, 0.4);
    color: #BEEAD9;
}
.flash-error {
    background: rgba(178, 58, 58, 0.12);
    border-color: rgba(178, 58, 58, 0.4);
    color: #F2B9B9;
}

.badge-neutral { background: var(--hairline); color: var(--text-muted); }
.badge-accent  { background: var(--signal-dim); color: var(--signal); }
.badge-active   { background: rgba(76, 139, 114, 0.18); color: #8FD8B8; }
.badge-inactive { background: rgba(137, 147, 161, 0.18); color: var(--text-muted); }

.tag-chip-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--panel-raised);
    border: 1px solid var(--hairline);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.no-tags { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
}

.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.actions-cell form { display: inline; margin: 0; }

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin: 0.5rem 0 1rem;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.checkbox-grid input { accent-color: var(--signal); width: 15px; height: 15px; }

.admin-table td, .admin-table th { vertical-align: top; }

.inline-form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.edit-panel {
    border: 1px solid var(--signal);
    background: var(--signal-dim);
}

.section-divider {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: 1.25rem 0;
}