/* Copyright (c) 2025-2026 William Chesher | MIT License
 * dashboard-system - tinted operator dashboard template.
 *
 * Lifted from microverse/admin/microverse/index.html (.sys-* prefix) and
 * renamed .ds-* at promotion. Source page keeps .sys-* until a follow-up
 * mechanical rename PR; the two should stay byte-equivalent during overlap.
 *
 * Authoring intent: one --tab-tint variable on the root cascades to every
 * tinted surface via color-mix(in srgb, var(--tab-tint) N%, base). N is
 * named below; do not redefine per page.
 */

:root {
    /* Cyberpunk palette (canonical triad) */
    --cyber-azul:   #00bfff;
    --cyber-purple: #b768ff;
    --cyber-pink:   #ff2bd6;

    /* Extended tints (pages with >3 tabs pick from these) */
    --tint-cyan:    #00d4ff;
    --tint-amber:   #f59e0b;
    --tint-green:   #34d399;
    --tint-red:     #ef4444;
    --tint-orange:  #f97316;
    --tint-violet:  #a78bfa;

    /* color-mix recipe -- the percentages every tinted surface reads.
     * Do NOT redefine these per page; consumers shift the palette via
     * --tab-tint, not the recipe. */
    --tint-fill-soft:   8%;
    --tint-fill-strong: 22%;
    --tint-border-soft: 22%;
    --tint-border-mid:  35%;
    --tint-border-hot:  55%;
    --tint-shadow-soft: 22%;
    --tint-shadow-hot:  60%;
    --tint-glow:        50%;
}

/* ---- Page root: declare default + per-tab tint mapping --------------- */

.ds-page {
    --tab-tint: var(--cyber-azul);
}

/* Default 9-tab cyberpunk mapping (override in page-scoped CSS or via
 * data-tint-map JSON consumed by applyTintMap() in dashboard-system.js). */
.ds-page[data-tab="resources"] { --tab-tint: var(--cyber-azul); }
.ds-page[data-tab="storage"]   { --tab-tint: var(--cyber-purple); }
.ds-page[data-tab="network"]   { --tab-tint: var(--cyber-pink); }
.ds-page[data-tab="tailnet"]   { --tab-tint: var(--tint-cyan); }
.ds-page[data-tab="services"]  { --tab-tint: var(--tint-amber); }
.ds-page[data-tab="activity"]  { --tab-tint: var(--tint-green); }
.ds-page[data-tab="data"]      { --tab-tint: var(--tint-red); }
.ds-page[data-tab="safety"]    { --tab-tint: var(--tint-orange); }
.ds-page[data-tab="alerts"]    { --tab-tint: var(--tint-violet); }

/* ---- Top accent stripe ----------------------------------------------- */

.ds-stripe {
    height: 2px;
    margin: -0.4rem 0 1.1rem;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--cyber-azul) 0%,
        var(--cyber-purple) 50%,
        var(--cyber-pink) 100%);
    opacity: 0.65;
}

/* ---- Sticky control bar --------------------------------------------- */

.ds-control-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.1rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg-surface) 92%, var(--tab-tint)) 0%,
        var(--bg-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--tab-tint) var(--tint-border-soft), var(--border));
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--tab-tint) 18%, transparent),
        0 8px 28px -16px color-mix(in srgb, var(--tab-tint) var(--tint-glow), transparent);
    transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.ds-control-spacer { flex: 1; }

/* ---- Pill segmented control ----------------------------------------- */

.ds-pill-group {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.16);
}
.ds-pill {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color 140ms ease, background 200ms ease, transform 120ms ease;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.ds-pill:hover { color: var(--text); }
.ds-pill.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tab-tint) 90%, white) 0%,
        var(--tab-tint) 100%);
    color: #0b0918;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tab-tint) 40%, transparent),
        0 4px 14px -4px color-mix(in srgb, var(--tab-tint) var(--tint-shadow-hot), transparent);
    transform: translateY(-0.5px);
}

/* ---- Meta strip with pulsing status dot ----------------------------- */

.ds-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.66rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}
.ds-meta .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2cd96b;
    box-shadow:
        0 0 0 3px color-mix(in srgb, #2cd96b 22%, transparent),
        0 0 12px color-mix(in srgb, #2cd96b 60%, transparent);
    animation: ds-pulse 2.4s ease-in-out infinite;
}
@keyframes ds-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.18); opacity: 1;    }
}

/* ---- Inline toggle (input tinted via accent-color) ------------------- */

.ds-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ds-toggle input { accent-color: var(--tab-tint); width: 14px; height: 14px; }

/* ---- Tab navigation with self-tint mirror --------------------------- */

.tab-nav {
    display: inline-flex;
    gap: 0.25rem;
    padding: 4px;
    margin-bottom: 1.1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.16);
}
.tab-btn {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem 0.6rem;
    border-radius: 9px;
    cursor: pointer;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 160ms ease, background 200ms ease;
}
/* Default mapping mirrors .ds-page above */
.tab-btn[data-tab="resources"] { --self-tint: var(--cyber-azul); }
.tab-btn[data-tab="storage"]   { --self-tint: var(--cyber-purple); }
.tab-btn[data-tab="network"]   { --self-tint: var(--cyber-pink); }
.tab-btn[data-tab="tailnet"]   { --self-tint: var(--tint-cyan); }
.tab-btn[data-tab="services"]  { --self-tint: var(--tint-amber); }
.tab-btn[data-tab="activity"]  { --self-tint: var(--tint-green); }
.tab-btn[data-tab="data"]      { --self-tint: var(--tint-red); }
.tab-btn[data-tab="safety"]    { --self-tint: var(--tint-orange); }
.tab-btn[data-tab="alerts"]    { --self-tint: var(--tint-violet); }
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
    color: var(--text);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--self-tint) 18%, transparent) 0%,
        color-mix(in srgb, var(--self-tint) 4%, transparent) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--self-tint) var(--tint-border-mid), transparent),
        0 8px 22px -10px color-mix(in srgb, var(--self-tint) var(--tint-shadow-hot), transparent);
}
.tab-btn.active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--self-tint);
    box-shadow: 0 0 10px var(--self-tint);
}

/* ---- Section head with code reference slug -------------------------- */

.ds-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0.1rem 0 0.85rem;
    padding: 0 0.1rem;
    gap: 1rem;
}
.ds-section-head h2 {
    margin: 0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.ds-section-head h2::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--tab-tint);
    box-shadow: 0 0 10px var(--tab-tint);
}
.ds-section-meta {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ds-section-meta code {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--tab-tint) 80%, var(--text));
    background: color-mix(in srgb, var(--tab-tint) var(--tint-fill-soft), transparent);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--tab-tint) 18%, var(--border));
}

/* ---- 12-column grid (matches Grafana panel grid) -------------------- */

.ds-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.85rem;
}

/* ---- Tile with accent top-bar + skeleton + hover glow --------------- */

.ds-tile {
    position: relative;
    grid-column: span 4;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tab-tint) 5%, var(--bg-surface)) 0%,
        var(--bg-surface) 65%);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.ds-tile::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--tab-tint) 45%, transparent) 18%,
        var(--tab-tint) 50%,
        color-mix(in srgb, var(--tab-tint) 45%, transparent) 82%,
        transparent 100%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 240ms ease;
    z-index: 4;
}
.ds-tile:hover {
    border-color: color-mix(in srgb, var(--tab-tint) var(--tint-border-hot), var(--border));
    box-shadow:
        0 8px 32px -12px color-mix(in srgb, var(--tab-tint) var(--tint-border-mid), transparent),
        0 0 0 1px color-mix(in srgb, var(--tab-tint) var(--tint-border-soft), transparent);
    transform: translateY(-1px);
}
.ds-tile:hover::before { opacity: 1; }
.ds-tile.span-2  { grid-column: span 2; }
.ds-tile.span-3  { grid-column: span 3; }
.ds-tile.span-4  { grid-column: span 4; }
.ds-tile.span-6  { grid-column: span 6; }
.ds-tile.span-9  { grid-column: span 9; }
.ds-tile.span-12 { grid-column: span 12; }
.ds-tile iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}

/* ---- Loading swipe (the headline pattern) --------------------------- */

.ds-tile-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        color-mix(in srgb, var(--tab-tint) var(--tint-fill-strong), transparent) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.6s linear infinite;
    pointer-events: none;
    opacity: 1;
    transition: opacity 320ms ease;
}
.ds-tile.loaded .ds-tile-skeleton { opacity: 0; }
@keyframes ds-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Hover-reveal "open in source" link ----------------------------- */

.ds-tile-grafana-link {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    background: rgba(8, 6, 24, 0.55);
    color: #fff;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.75rem;
    backdrop-filter: blur(6px);
    z-index: 3;
    border: 1px solid color-mix(in srgb, var(--tab-tint) 30%, transparent);
}
.ds-tile:hover .ds-tile-grafana-link {
    opacity: 1;
    transform: translateY(-1px);
}

/* ---- Tab content switching with fade-in ----------------------------- */

.ds-tab-content { display: none; }
.ds-tab-content.active { display: block; animation: ds-fade 220ms ease; }
@keyframes ds-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Error banner (tint-agnostic) ----------------------------------- */

.ds-error-banner {
    display: none;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(180deg,
        rgba(231,76,60,0.10),
        rgba(231,76,60,0.04));
    border: 1px solid rgba(231,76,60,0.45);
    color: #ff8e84;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.ds-error-banner.active { display: block; }

/* ---- Responsive: collapse spans below 900px ------------------------- */

@media (max-width: 900px) {
    .ds-tile.span-2,
    .ds-tile.span-3 { grid-column: span 6; }
    .ds-tile.span-4 { grid-column: span 12; }
    .ds-tile.span-6 { grid-column: span 12; }
    .ds-control-bar { flex-wrap: wrap; }
    .ds-section-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}