/*
 * Domain DNS Dashboard — design tokens + utility classes.
 *
 * All visual constants (colors, type scale, spacing, radii) live here. No
 * other stylesheet or template should hardcode hex values for brand or
 * severity colors. The rule of thumb:
 *
 *   - text / icons  → add a semantic class: `sev-critical`, `sev-pass`, …
 *   - full badges   → `sev-badge sev-bg-<severity>`
 *   - left-border   → `sev-border-<severity>` (used on issue cards)
 *   - ring / fill   → `sev-fill-<severity>`
 *
 * Severities must never rely on color alone: always pair with an icon or
 * shape (see the accompanying <i class="fas fa-…"> usage in the templates).
 */

:root {
    /* ── Brand / UI ─────────────────────────────────────────────────────── */
    --accent: #00b4d8;
    --accent-dim: #0077b6;
    --accent-soft: #00b4d811;
    --bg: #0d1117;
    --card: #161b22;
    --card-2: #21262d;
    --border: #30363d;
    --text: #e6edf3;
    --muted: #8b949e;
    --orange: #f0883e;

    /* ── Severity (keep synced with render logic in templates' JS) ──────── */
    --sev-critical: #ff4757;
    --sev-high: #ffa502;
    --sev-medium: #eccc68;
    --sev-low: #7bed9f;
    --sev-pass: #3fb950;

    /* 20% / 40% alpha companions for backgrounds and borders. Using hex
     * alpha (22 / 44) because color-mix() still has patchy Safari support
     * on older mobile versions. */
    --sev-critical-bg: #ff475722;
    --sev-critical-border: #ff475744;
    --sev-high-bg: #ffa50222;
    --sev-high-border: #ffa50244;
    --sev-medium-bg: #eccc6822;
    --sev-medium-border: #eccc6844;
    --sev-low-bg: #7bed9f22;
    --sev-low-border: #7bed9f44;
    --sev-pass-bg: #3fb95022;
    --sev-pass-border: #3fb95044;

    /* Legacy aliases used in a few places (login.html's error/warn boxes).
     * Keep these pointing at severity tokens so future re-theming is
     * automatic. */
    --danger: var(--sev-critical);
    --warning: var(--sev-high);
    --success: var(--sev-pass);

    /* ── Type scale (4px base) ──────────────────────────────────────────── */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    /* ── Spacing ────────────────────────────────────────────────────────── */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;

    /* ── Radii ──────────────────────────────────────────────────────────── */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;

    /* ── Fonts ──────────────────────────────────────────────────────────── */
    --font-mono: 'Cascadia Code', 'Fira Code', Menlo, Consolas, monospace;
}

/* ── Severity utility classes ───────────────────────────────────────────── */

/* Text / icon color only — pair with `<i class="fas fa-…">` for a11y. */
.sev-critical { color: var(--sev-critical); }
.sev-high     { color: var(--sev-high); }
.sev-medium   { color: var(--sev-medium); }
.sev-low      { color: var(--sev-low); }
.sev-pass     { color: var(--sev-pass); }

/* Filled-pill backgrounds (for badges, chips, score summary tiles). */
.sev-bg-critical { background: var(--sev-critical-bg); color: var(--sev-critical); }
.sev-bg-high     { background: var(--sev-high-bg);     color: var(--sev-high); }
.sev-bg-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium); }
.sev-bg-low      { background: var(--sev-low-bg);      color: var(--sev-low); }
.sev-bg-pass     { background: var(--sev-pass-bg);     color: var(--sev-pass); }

/* 3px left border — used on security issue cards. */
.sev-border-critical { border-left: 3px solid var(--sev-critical); }
.sev-border-high     { border-left: 3px solid var(--sev-high); }
.sev-border-medium   { border-left: 3px solid var(--sev-medium); }
.sev-border-low      { border-left: 3px solid var(--sev-low); }
.sev-border-pass     { border-left: 3px solid var(--sev-pass); }

/* Badge shell — shape + typography only; use with .sev-bg-<severity>. */
.sev-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.25em 0.6em;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-block;
    line-height: 1.4;
}
.sev-badge-critical { background: var(--sev-critical-bg); color: var(--sev-critical); border: 1px solid var(--sev-critical-border); }
.sev-badge-high     { background: var(--sev-high-bg);     color: var(--sev-high);     border: 1px solid var(--sev-high-border); }
.sev-badge-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium);   border: 1px solid var(--sev-medium-border); }
.sev-badge-low      { background: var(--sev-low-bg);      color: var(--sev-low);      border: 1px solid var(--sev-low-border); }
.sev-badge-pass     { background: var(--sev-pass-bg);     color: var(--sev-pass);     border: 1px solid var(--sev-pass-border); }

/* ── Expiry pill (days-until) — reuses severity tokens ──────────────────── */
.days-ok     { background: var(--sev-pass-bg);     color: var(--sev-pass); }
.days-warn   { background: var(--sev-medium-bg);   color: var(--sev-medium); }
.days-danger { background: var(--sev-critical-bg); color: var(--sev-critical); }

/* ── Score dial color bands (set by inline style attr to --ring-color) ──── */
.score-ring-critical { --ring-color: var(--sev-critical); }
.score-ring-high     { --ring-color: var(--sev-high); }
.score-ring-medium   { --ring-color: var(--sev-medium); }
.score-ring-pass     { --ring-color: var(--sev-pass); }

/* ── Stat tiles ─────────────────────────────────────────────────────────────
 * Big-number / small-label dashboard cards used at the top of the GoDaddy and
 * DNS-scanner pages. The hierarchy is: large value → uppercase label → optional
 * delta row showing 7-day change. Trend arrows ↑/↓ pair with color so meaning
 * isn't lost for colorblind users.
 */
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-6) var(--s-4);
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-height: 110px;
}
.stat-card:hover { border-color: var(--accent); }

.stat-card .val {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;       /* keep digit columns aligned */
    letter-spacing: -0.01em;
}
.stat-card .lbl {
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

/* Delta row — ↑ +3 this week (green) / ↓ -8 this week (red) */
.stat-card .delta {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    margin-top: auto;                          /* pushes delta to bottom of tile */
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    min-height: 1em;                           /* reserve space so cards don't jump */
}
.stat-card .delta .delta-suffix {
    color: var(--muted);
    font-weight: 400;
}
.stat-card .delta-up    { color: var(--sev-pass); }
.stat-card .delta-down  { color: var(--sev-high); }
/* For metrics where "down is good" (e.g. security issues), the JS swaps the
 * direction class so green still means "improving". */
.stat-card .delta-good  { color: var(--sev-pass); }
.stat-card .delta-bad   { color: var(--sev-high); }
.stat-card .delta-flat  { color: var(--muted); font-weight: 400; }
.stat-card .delta-empty { color: var(--muted); font-weight: 400; opacity: 0.6; }

/* ── Background-refresh chip ────────────────────────────────────────────────
 * Fixed-position pill in the top-right that signals an in-flight background
 * data refresh without blocking the page (unlike .loading-overlay). Shown
 * only when a stale cache is being refreshed silently after the user has
 * already seen the cached data.
 */
.bg-refresh-chip {
    position: fixed;
    top: var(--s-3);
    right: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    padding: 0.55rem 0.85rem;
    font-size: var(--text-xs);
    color: var(--text);
    z-index: 9000;                     /* below .loading-overlay (9999), above content */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;              /* purely informational */
    /* Slide-in animation, slow enough not to be jittery on quick refreshes. */
    animation: bgRefreshIn 220ms ease-out;
}
.bg-refresh-chip i { color: var(--accent); }
.bg-refresh-chip.bg-refresh-done {
    border-left-color: var(--sev-pass);
}
.bg-refresh-chip.bg-refresh-done i { color: var(--sev-pass); }
.bg-refresh-chip.bg-refresh-failed {
    border-left-color: var(--sev-critical);
}
.bg-refresh-chip.bg-refresh-failed i { color: var(--sev-critical); }
@keyframes bgRefreshIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── "All providers" combined-view badge ───────────────────────────────── */
.provider-all {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Production badge (header chip) ─────────────────────────────────────── */
.prod-badge {
    background: var(--sev-pass-bg);
    color: var(--sev-pass);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.25em 0.7em;
    border-radius: var(--r-sm);
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* ── Status boxes (Connected / Failed — used in provider status area) ───── */
.status-box {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
}
.status-ok   { background: var(--sev-pass-bg);     color: var(--sev-pass);     border-color: var(--sev-pass-border); }
.status-fail { background: var(--sev-critical-bg); color: var(--sev-critical); border-color: var(--sev-critical-border); }