/*
 * KJ6YWD public dashboard palette v0.3.3
 *
 * Matches the YWD-MODEM archive palette:
 *   background  #111318
 *   border      #30343d
 *   text        #e7e9ee
 *   muted       #9299a6
 *   link        #82b7ff
 *   hover       #20252d
 *   green       #8be5a8
 */

:root {
    color-scheme: dark;

    --bg: #111318;
    --panel: #171a20;
    --panel-2: #20252d;
    --line: #30343d;
    --text: #e7e9ee;
    --muted: #9299a6;

    /* Keep the existing semantic variable names so all current JS keeps working. */
    --green: #8be5a8;
    --amber: #e6bd75;
    --red: #ef8585;
    --cyan: #82b7ff;

    --hover: #20252d;
    --shadow: rgba(0, 0, 0, 0.30);
    --chart-bg: #0d0f13;

    --accent-green-bg: rgba(65, 135, 90, 0.16);
    --accent-green-bg-hover: rgba(65, 135, 90, 0.23);
    --accent-green-border: rgba(91, 190, 123, 0.38);
}

html {
    background: var(--bg);
}

body {
    color: var(--text);
    background: var(--bg);
    background-image: none;
}

a {
    color: var(--cyan);
}

a:hover,
a:focus-visible {
    color: #a8cbff;
}

.site-header {
    border-color: var(--line);
    background: #171a20;
    box-shadow: 0 12px 30px var(--shadow);
}

.eyebrow {
    color: var(--green);
}

h1 {
    color: var(--text);
    text-shadow: none;
}

.subtitle {
    color: var(--muted);
}

.panel {
    border-color: var(--line);
    background: #171a20;
    box-shadow: 0 8px 22px var(--shadow);
}

.panel-header {
    border-bottom-color: var(--line);
    background: #1b1e24;
}

.panel-header h2 {
    color: var(--text);
}

.badge {
    border-color: var(--line);
    color: var(--muted);
    background: #20252d;
}

.badge::before {
    box-shadow: none;
}

.badge.good {
    border-color: var(--accent-green-border);
    color: var(--green);
    background: var(--accent-green-bg);
}

.badge.warn {
    color: var(--amber);
    background: rgba(150, 112, 48, 0.12);
}

.badge.bad {
    color: var(--red);
    background: rgba(155, 69, 69, 0.12);
}

.terminal {
    color: #dde1e8;
    background: #0d0f13;
    scrollbar-color: #3b414b #0d0f13;
}

button {
    border-color: var(--line);
    color: var(--text);
    background: #171a20;
}

button:hover {
    border-color: #444b57;
    background: var(--hover);
}

button:focus-visible {
    border-color: var(--cyan);
    background: var(--hover);
}

input[type="search"] {
    border-color: var(--line);
    color: var(--text);
    background: #111318;
}

input[type="search"]:focus {
    border-color: var(--cyan);
}

.check,
.stat-list dt,
.history-empty,
.history-caption {
    color: var(--muted);
}

.value-good {
    color: var(--green);
}

.value-warn {
    color: var(--amber);
}

.value-bad {
    color: var(--red);
}

th,
td {
    border-bottom-color: rgba(48, 52, 61, 0.78);
}

th {
    color: #cbd1da;
    background: #1b1e24;
}

tbody tr:hover td {
    background: rgba(32, 37, 45, 0.58);
}

.notice {
    border-left-color: var(--amber);
    color: var(--muted);
    background: rgba(150, 112, 48, 0.10);
}

.code-line {
    border-color: var(--line);
    color: var(--green);
    background: #111318;
}

.warning-list {
    color: var(--amber);
}

.footer {
    color: var(--muted);
}

.metric,
.history-metric,
.uptime-card {
    border-color: var(--line);
    background: #111318;
}

.metric strong,
.history-metric strong {
    color: var(--green);
}

.metric span,
.history-metric span,
.uptime-card h3,
.uptime-card span {
    color: var(--muted);
}

.native-link {
    border-color: var(--line);
    color: var(--cyan);
    background: #171a20;
}

.native-link:hover,
.native-link:focus-visible {
    border-color: #4a5260;
    color: #a8cbff;
    background: var(--hover);
}

details.panel summary {
    color: #d5dae2;
    background: #1b1e24;
}

details.panel[open] summary {
    border-bottom-color: var(--line);
}

.range-buttons button.active {
    border-color: var(--accent-green-border);
    color: var(--green);
    background: var(--accent-green-bg);
}

.service-card {
    border-color: var(--line);
    background: #171a20;
}

.service-card h3 {
    color: var(--text);
}

.service-card p {
    color: var(--muted);
}

.remote-packet-panel {
    border-color: var(--accent-green-border);
}

.remote-packet-link {
    border-color: var(--accent-green-border);
    color: var(--green);
    background: var(--accent-green-bg);
}

.remote-packet-link:hover,
.remote-packet-link:focus-visible {
    border-color: rgba(91, 190, 123, 0.58);
    color: #a7efbd;
    background: var(--accent-green-bg-hover);
}

/* PacketPath main-page preview */
.packetpath-preview-map-wrap {
    border-color: var(--line);
    background: #0d0f13;
    background-image: none;
}

.packetpath-preview-metric {
    border-color: var(--line);
    background: #111318;
}

.packetpath-preview-metric strong {
    color: var(--green);
}

.packetpath-preview-metric span,
.packetpath-preview-intro,
.packetpath-preview-meta,
.packetpath-preview-empty {
    color: var(--muted);
}

.packetpath-preview-legend {
    border-top-color: var(--line);
    color: var(--muted);
    background: rgba(17, 19, 24, 0.96);
}

.packetpath-preview-dot.root {
    background: var(--green);
    box-shadow: none;
}

.packetpath-preview-dot.digi {
    background: var(--cyan);
}

.packetpath-preview-dot.station {
    background: var(--text);
}

.packetpath-preview-line.confirmed {
    background: #79cf95;
}

.packetpath-preview-line.passive {
    background: #4c5460;
}

.packetpath-preview-edge.confirmed {
    stroke: #79cf95;
}

.packetpath-preview-edge.passive {
    stroke: #4c5460;
}

.packetpath-preview-node circle {
    stroke: #111318;
}

.packetpath-preview-node.root circle {
    fill: var(--green);
    filter: none;
}

.packetpath-preview-node.digi circle {
    fill: var(--cyan);
}

.packetpath-preview-node.station circle {
    fill: var(--text);
}

.packetpath-preview-node.confirmed.station circle {
    stroke: #79cf95;
}

.packetpath-preview-node text {
    fill: var(--text);
    stroke: #111318;
}

.packetpath-preview-map-link:hover .packetpath-preview-node circle,
.packetpath-preview-map-link:focus-visible .packetpath-preview-node circle {
    filter: none;
}

.packetpath-preview-map-link:focus-visible {
    outline-color: var(--cyan);
}

/* Scrollbars on browsers that support the WebKit scrollbar pseudo-elements. */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #111318;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid #111318;
    border-radius: 8px;
    background: #3b414b;
}

*::-webkit-scrollbar-thumb:hover {
    background: #505866;
}