/* Page styles for the static ingress pages (index and the doc pages), matching the config page:
   Vuetify cards on the base.css background with the #4fbba9 accent.
   Kept separate from main.css, which the config page also loads. */
:root {
    --accent: #4fbba9;
    --page-bg: #b6b5b5;
    --card-bg: #ffffff;
    --card-text: rgba(0, 0, 0, 0.87);
    --card-sub: rgba(0, 0, 0, 0.6);
    --divider: rgba(0, 0, 0, 0.12);
    --stripe: rgba(0, 0, 0, 0.03);
    --code-bg: rgba(79, 187, 169, 0.12);
    --header-text: #2c3e50;
    --link: #233c7b;
    --shadow-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --shadow-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #181818;
        --header-text: rgba(235, 235, 235, 0.64);
    }
}
*, *::before, *::after { box-sizing: border-box; }
body {
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--header-text);
    line-height: 1.6;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
        Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* ---- Card (Vuetify v-card look); the nav cards live in header.html ---- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 4px;
    box-shadow: var(--shadow-1);
}
/* ---- Docs: long-form document in a card (readme, settings guide, datapoints) ---- */
.doc {
    max-width: 1200px;   /* wider than the header: the settings guide control tables have six columns */
    margin: 0 auto 48px;
    padding: 0 16px;
}
.doc .card { padding: 8px 24px 24px; }
.doc .toc {
    margin-bottom: 24px;
    padding: 16px 24px;
}
.doc .toc-title {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--card-sub);
    margin-bottom: 4px;
}
.doc .toc ul { list-style: none; margin: 0; padding: 0; columns: 2 220px; }
.doc .toc li { margin: 2px 0; }
.doc .toc a { margin: 0; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5 {
    color: var(--card-text);
    line-height: 1.3;
    scroll-margin-top: 16px;
}
.doc h1 {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--accent);
    margin: 40px 0 8px;
}
.doc h2 {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent);
}
.doc .card > h2:first-child { margin-top: 16px; }
.doc h3 { font-size: 1.1rem; font-weight: 500; margin: 24px 0 8px; }
.doc h4, .doc h5 { font-size: .95rem; font-weight: 600; margin: 20px 0 6px; color: var(--card-sub); }
.doc p { margin: 0 0 12px; color: var(--card-text); }
.doc a { margin: 0; color: var(--link); }
.doc img { max-width: 100%; height: auto; border-radius: 4px; }
.doc code {
    font-family: var(--mono);
    font-size: .85em;
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 3px;
}
.doc pre {
    font-family: var(--mono);
    font-size: .85rem;
    background: var(--code-bg);
    padding: 12px 16px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 12px;
}

/* Tables scroll sideways on narrow screens rather than stretching the page */
.doc .table-wrap {
    overflow-x: auto;
    margin: 0 0 16px;
    border: 1px solid var(--divider);
    border-radius: 4px;
}
.doc table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.doc th {
    text-align: left;
    font-weight: 600;
    color: var(--card-sub);
    background: var(--code-bg);
    padding: 10px 12px;
    white-space: nowrap;
    border-bottom: 2px solid var(--accent);
}
.doc td {
    padding: 8px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--divider);
    color: var(--card-text);
}
.doc tbody tr:nth-child(even) { background: var(--stripe); }
.doc tbody tr:last-child td { border-bottom: 0; }
/* ---- Markdown pages (settings guide, datapoints) ---- */
.doc .card > :first-child { margin-top: 16px; }
.doc .toc li.toc-sub { padding-left: 16px; font-size: .9em; }
/* Names in code spans stay whole; mdpage.js adds break points after the commas in JSON payloads */
.doc.md td code { white-space: normal; }
.doc.md td:first-child { min-width: 160px; }
.doc.md td:nth-child(2) { min-width: 200px; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 24px; color: var(--card-text); }
.doc li { margin: 2px 0; }
.doc hr { border: 0; border-top: 1px solid var(--divider); margin: 24px 0; }

/* ---- Log viewer (logs.html) ---- */
.logviewer .card { padding: 0; overflow: hidden; }
/* Log picker: a tick box per log, with a dot in the colour that log's entries are labelled with when merged */
.lv-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    border-bottom: 1px solid var(--divider);
    padding: 12px 16px;
    font-size: .875rem;
}
.lv-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--card-text);
    cursor: pointer;
    white-space: nowrap;
}
.lv-pick input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.lv-dot {
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: currentColor;       /* the lv-src-N class sets the colour */
    flex: none;
}
.lv-picks .lv-btn { padding: 3px 10px; }
.lv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    font-size: .85rem;
    color: var(--card-sub);
}
.lv-toolbar label { display: flex; align-items: center; gap: 6px; }
.lv-toolbar select, .lv-toolbar input[type=search] {
    font: inherit;
    color: var(--card-text);
    background: #fff;
    border: 1px solid var(--divider);
    border-radius: 4px;
    padding: 5px 8px;
}
.lv-toolbar input[type=search] { min-width: 180px; flex: 0 1 240px; }
.lv-check input { accent-color: var(--accent); }
.lv-spacer { flex: 1; }
.lv-btn {
    font: inherit;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 5px 12px;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}
.lv-btn:hover { background: var(--code-bg); text-decoration: none; }
.lv-btn:disabled { opacity: .4; cursor: default; background: none; }
/* Terminal-style log area; dark in both themes so the level colours read the same */
.lv-log {
    height: 65vh;
    min-height: 300px;
    overflow: auto;
    background: #1e1f22;
    color: #d4d4d4;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.45;
    padding: 8px 0;
}
.lv-line { padding: 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-line:hover { background: rgba(255,255,255,.05); }
.lv-debug { color: #8b8f96; }
.lv-info { color: #d4d4d4; }
.lv-warning { color: #e5c07b; }
.lv-error, .lv-critical { color: #f28b82; }
.lv-critical { font-weight: 700; }
.lv-empty { padding: 24px 16px; color: #8b8f96; font-family: inherit; }
.lv-status {
    padding: 8px 16px;
    font-size: .78rem;
    color: var(--card-sub);
    border-top: 1px solid var(--divider);
}
/* Source label on each entry when several logs are shown */
.lv-src {
    display: inline-block;
    width: 13ch;
    margin-right: 1ch;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}
.lv-src-0 { color: #4fbba9; }
.lv-src-1 { color: #61afef; }
.lv-src-2 { color: #c678dd; }
.lv-src-3 { color: #56b6c2; }
.lv-src-4 { color: #d19a66; }
.lv-src-5 { color: #98c379; }
.lv-src-6 { color: #e06c9f; }
.lv-src-7 { color: #a9b1d6; }