/* Nerd-zone-fanen — Sanity vs Momentus tidskontroll.
 *
 * Dark mode, monospace, tight padding (GitHub-stil). Hele body får
 * `body:has(#nerd.active)`-klassen mens fanen er montert, slik at nav og
 * footer også får dark tone — samme oppførsel som gamle dashboardet.
 */

/* ========================================
   1. BODY-OVERSTYRING (nav + footer-dark)
   ======================================== */

body:has(#nerd.active) { background: #010409; }
body:has(#nerd.active) .nav {
    background: #0d1117;
    border-color: #21262d;
    backdrop-filter: none;
}
body:has(#nerd.active) .nav-brand img { filter: brightness(0) invert(1); }
body:has(#nerd.active) .nav-link { color: #8b949e; }
body:has(#nerd.active) .nav-link:hover { color: #c9d1d9; background: #21262d; }
body:has(#nerd.active) .nav-link.active { color: #58a6ff; background: #58a6ff15; }
body:has(#nerd.active) .nav-date { color: #8b949e; }
body:has(#nerd.active) .nav-date strong { color: #58a6ff; }
body:has(#nerd.active) .footer { color: #30363d; border-color: #21262d; }
body:has(#nerd.active) .section-header .section-title { color: #58a6ff; }
body:has(#nerd.active) .section-header .section-line { background: #21262d; }


/* ========================================
   2. PRESETS (toolbar-knapper)
   ======================================== */

#nerd .nerd-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #21262d;
    min-height: 44px;
}
#nerd .nerd-btn {
    font: 500 0.65rem 'Matter SQ', ui-monospace, monospace;
    padding: 0.25rem 0.6rem;
    border: 1px solid #30363d;
    border-radius: 5px;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
#nerd .nerd-btn:hover { background: #21262d; color: #c9d1d9; }
#nerd .nerd-btn:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
#nerd .nerd-btn.active { background: #58a6ff; color: #0d1117; border-color: #58a6ff; }


/* ========================================
   3. SUMMARY-LINJE
   ======================================== */

#nerd .nerd-summary {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #21262d;
    font: 0.7rem 'Matter SQ', ui-monospace, monospace;
    color: #8b949e;
    min-height: 28px;
}


/* ========================================
   4. MATCH-TABELL
   ======================================== */

#nerd table.nerd-tbl {
    width: 100%;
    border-collapse: collapse;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 10px;
    overflow: hidden;
}
#nerd .nerd-tbl thead th {
    text-align: left;
    font: 600 0.58rem 'Matter SQ', ui-monospace, monospace;
    color: #484f58;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.4rem 1rem;
    background: #0d1117;
    border-bottom: 1px solid #21262d;
}
#nerd .nerd-tbl tbody td {
    padding: 0.35rem 1rem;
    border-bottom: 1px solid #161b22;
    font: 0.7rem 'Matter SQ', ui-monospace, monospace;
    color: #c9d1d9;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
#nerd .nerd-tbl tbody tr.n-main { cursor: pointer; }
#nerd .nerd-tbl tbody tr.n-main:hover { background: #161b22; }

/* Match-type fargekoder (border-left + svak bakgrunn) */
#nerd .nerd-tbl tr.match-OK         { border-left: 3px solid #3fb950; }
#nerd .nerd-tbl tr.match-ROOM       { border-left: 3px solid #f85149; background: #f8514908; }
#nerd .nerd-tbl tr.match-TIME       { border-left: 3px solid #bc8cff; background: #bc8cff08; }
#nerd .nerd-tbl tr.match-ENDTIME    { border-left: 3px solid #d29922; background: #d2992208; }
#nerd .nerd-tbl tr.match-ORPHAN     { border-left: 3px solid #58a6ff; background: #58a6ff08; }
#nerd .nerd-tbl tr.match-NOT_PUBLISHED { border-left: 3px solid #e07800; background: #e0780008; }

/* Status-pille (kompakt tag med transparent fargebakgrunn).
 * Flere kan ligge på samme rad — separator: mellomrom. */
#nerd .tag {
    font: 600 0.5rem 'Matter SQ', ui-monospace, monospace;
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    text-decoration: none;
    margin-right: 4px;
    white-space: nowrap;
}
#nerd .tag:last-child { margin-right: 0; }
#nerd .tag-OK            { background: #3fb95020; color: #3fb950; }
#nerd .tag-ROOM          { background: #f8514920; color: #f85149; }
#nerd .tag-TIME          { background: #bc8cff20; color: #bc8cff; }
#nerd .tag-ENDTIME       { background: #d2992220; color: #d29922; }
#nerd .tag-ORPHAN        { background: #58a6ff20; color: #58a6ff; }
#nerd .tag-NOT_PUBLISHED { background: #e0780020; color: #e07800; }
#nerd .tag-STREAM        { background: #3fb95020; color: #3fb950; }
#nerd .tag-STREAM-MISSING { background: #f8514920; color: #f85149; }
#nerd .tag-TITLE-DIFF    { background: #f8514920; color: #f85149; }
#nerd a.tag:hover { filter: brightness(1.3); }

/* Stagger-entry */
#nerd .nerd-tbl tbody tr.n-main {
    animation: rowIn 0.4s ease-out backwards;
}
#nerd .nerd-tbl tbody tr.n-main:nth-child(1)  { animation-delay: 0.06s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(3)  { animation-delay: 0.10s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(5)  { animation-delay: 0.14s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(7)  { animation-delay: 0.18s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(9)  { animation-delay: 0.22s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(11) { animation-delay: 0.26s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(13) { animation-delay: 0.30s; }
#nerd .nerd-tbl tbody tr.n-main:nth-child(15) { animation-delay: 0.34s; }
@keyframes rowIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ========================================
   5. EXPAND/DETAIL-RAD
   ======================================== */

#nerd .nerd-tbl tbody tr.n-detail { display: none; }
#nerd .nerd-tbl tbody tr.n-detail.open { display: table-row; }
#nerd .nerd-tbl tbody tr.n-detail td {
    padding: 0.6rem 1rem;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    font-size: 0.7rem;
    color: #8b949e;
    white-space: normal;
    max-width: none;
}

#nerd .n-hood {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
#nerd .n-hood-img {
    width: 80px; height: 50px; flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #21262d;
}
#nerd .n-hood-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }

#nerd .n-diff-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 0.3rem 1rem;
    font: 0.65rem 'Matter SQ', ui-monospace, monospace;
}
#nerd .n-diff-label   { color: #484f58; }
#nerd .n-diff-san     { color: #58a6ff; }
#nerd .n-diff-mom     { color: #bc8cff; }
#nerd .n-diff-mismatch { color: #f85149; font-weight: 600; }

#nerd .n-meta { font-size: 0.7rem; color: #8b949e; }
#nerd .n-meta strong { color: #c9d1d9; }


/* ========================================
   6. STREAM-TAG (mini-pille)
   ======================================== */

/* (stream-tag-klassen er erstattet av .tag-STREAM / .tag-STREAM-MISSING) */


/* ========================================
   7. LENKER (mom/san i tabell)
   ======================================== */

#nerd .nerd-tbl a {
    color: #58a6ff;
    text-decoration: none;
    font-size: 0.65rem;
}
#nerd .nerd-tbl a:hover { text-decoration: underline; }
#nerd .nerd-tbl .refresh-ts a + a { color: #bc8cff; }  /* andre lenke = mom (lilla) */


/* ========================================
   8. SKELETON-LOADER
   ======================================== */

#nerd .nerd-skeleton { min-height: calc(100vh - 240px); }
#nerd .nerd-skeleton .skel-pill {
    display: inline-block;
    height: 24px; width: 80px;
    margin-right: 4px; border-radius: 5px;
    background: linear-gradient(90deg, #0d1117 0%, #21262d 50%, #0d1117 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
#nerd .nerd-skeleton .skel-row {
    height: 28px;
    margin: 1px 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #0d1117 0%, #21262d 50%, #0d1117 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ========================================
   9. LOADING / FEIL-MELDING (når data mangler)
   ======================================== */

#nerd .loading-msg {
    padding: 2rem;
    text-align: center;
    color: #484f58;
    font: 0.7rem 'Matter SQ', ui-monospace, monospace;
}