/* Status-dashboard. Ét stylesheet, ingen build, ingen afhængigheder. */

:root {
    --bg: #f7f7f5;
    --panel: #ffffff;
    --line: #e3e3de;
    --line-soft: #d6d6d0;
    --text: #23231f;
    --muted: #77776f;
    --ok: #2f9e44;
    --warn: #d9a406;
    --error: #d64545;
    --unknown: #a8a8a0;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17171a;
        --panel: #1e1e22;
        --line: #2c2c31;
        --line-soft: #3a3a41;
        --text: #e8e8e4;
        --muted: #8b8b93;
        --ok: #4ac26b;
        --warn: #e5b52c;
        --error: #ef6262;
        --unknown: #5c5c66;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 3rem 1.25rem 4rem;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
}

/* --- Statuslinje ------------------------------------------------------ */

.head { margin-bottom: 1.75rem; }

h1 {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

.summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    margin: 0 0 .4rem;
    font-size: .93rem;
}

.tally {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
}

.tally .num { color: var(--text); }

.updated {
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
}

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

.dot {
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--unknown);
}

.dot-ok      { background: var(--ok); }
.dot-warn    { background: var(--warn); }
.dot-error   { background: var(--error); }
.dot-unknown { background: var(--unknown); }

/* --- Liste af værktøjer ----------------------------------------------- */

.sites {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.site {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--line);
}

.site:first-child { border-top: 0; }

.name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.name a:hover { border-bottom-color: var(--line-soft); }

.checked {
    font-size: .78rem;
    color: var(--muted);
}

.metric {
    flex: none;
    width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .12rem;
}

.metric .num {
    font-family: var(--mono);
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-label {
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.empty {
    padding: 1.5rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: .9rem;
}

.empty code {
    font-family: var(--mono);
    font-size: .85em;
}

/* --- Antydning af plads til flere værktøjer --------------------------- */

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.1rem;
    margin-top: .7rem;
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
    opacity: .5;
}

.placeholder span {
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 30rem) {
    .metric { width: 4.4rem; }
    .metric .num { font-size: .8rem; }
}