:root {
    --net-primary:      #1d4ed8;   /* blue — buttons, active nav, panel headers */
    --net-primary-bg:   #eff6ff;   /* very light blue — callsign pill bg        */
    --net-accent:       #0f766e;   /* teal — totals, positive counts            */
    --net-border:       #cbd5e1;   /* light slate border                        */
    --net-bg:           #f8fafc;   /* page background                           */
    --net-surface:      #ffffff;   /* panel / card background                   */
    --net-surface-alt:  #f1f5f9;   /* alternate row / sub-header background     */
    --net-text:         #0f172a;   /* primary text                              */
    --net-text-muted:   #64748b;   /* secondary / muted text                    */
}

body {
    background-color: var(--net-bg);
    font-family: 'Inter', sans-serif;
    color: var(--net-text);
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ── Navigation ─────────────────────────────────────────────────── */
.navbar-net {
    background-color: var(--net-surface);
    border-bottom: 1px solid var(--net-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.navbar-brand {
    color: var(--net-primary) !important;
}

.nav-link-net {
    color: var(--net-text-muted) !important;
    border-radius: 6px;
}

.nav-link-net:hover {
    color: var(--net-primary) !important;
    background-color: var(--net-primary-bg);
}

.nav-link-net.active {
    color: var(--net-surface) !important;
    background-color: var(--net-primary) !important;
    font-weight: 600;
}

/* ── Panels ──────────────────────────────────────────────────────── */
.panel {
    background-color: var(--net-surface);
    border: 1px solid var(--net-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.panel-header {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid var(--net-border);
    color: var(--net-primary);
    background-color: var(--net-surface-alt);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-amber {                          /* renamed conceptually; now "primary" */
    background-color: var(--net-primary);
    border-color: var(--net-primary);
    color: #ffffff;
}

.btn-amber:hover {
    background-color: #1e40af;
    border-color: #1e40af;
    color: #ffffff;
}

.btn-outline-amber {
    border-color: var(--net-primary);
    color: var(--net-primary);
    background-color: transparent;
}

.btn-outline-amber:hover {
    background-color: var(--net-primary-bg);
    color: var(--net-primary);
    border-color: var(--net-primary);
}

/* Compact, icon-only buttons (Club Net Script panel header controls:
   ID timer start/stop, refresh trivia, download) - square-ish tap
   target instead of stretching to fit a text label, so the header has
   room for all of them without wrapping onto extra lines. Accessible
   names come from the aria-label on each button/link, since the
   emoji glyph itself is marked aria-hidden. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Callsign pills ──────────────────────────────────────────────── */
.callsign-pill {
    background-color: var(--net-primary-bg);
    color: var(--net-primary);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-weight: 600;
}

/* ── Total / stat cards ──────────────────────────────────────────── */
.total-card .total-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--net-accent);
}

.total-card .period-label {
    font-size: 1.1rem;
    font-weight: 700;
}

/* ── Footer version ──────────────────────────────────────────────── */
.footer-version {
    color: var(--net-text-muted);
    font-size: 0.8rem;
}

/* ── Net strip (Check-In page, above the grid) ───────────────────── */
.net-strip {
    background-color: var(--net-surface-alt);
    border: 1px solid var(--net-border);
    border-radius: 6px;
}

/* ── Status labels ───────────────────────────────────────────────── */
.status-active {
    color: var(--net-accent);
    font-weight: 600;
}

.status-other {
    color: #b91c1c;
    font-weight: 600;
}

/* ── Check-in grid read-only labels (License Status / Expiration Date) ── */
/* Matches the vertical rhythm of a .form-control-sm/.form-select-sm in the
   same row so the grid's label cells line up with its input cells. */
.grid-label-value {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0;
    font-weight: 600;
}

/* ── Multi-row check-in grid ─────────────────────────────────────── */
.checkin-grid-wrap {
    border: 1px solid var(--net-border);
    border-radius: 6px;
}

.checkin-grid-table thead th {
    background-color: var(--net-surface-alt);
    color: var(--net-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--net-border);
    white-space: nowrap;
}

.checkin-grid-table td {
    vertical-align: middle;
}

/* A logged row: locked in place, dimmed just enough to read as "done"
   at a glance while staying legible, with a teal left edge (echoing
   .status-active) as the at-a-glance "saved" cue. */
.checkin-row-saved {
    background-color: var(--net-surface-alt);
    box-shadow: inset 3px 0 0 var(--net-accent);
}

.checkin-row-saved input[readonly],
.checkin-row-saved select:disabled {
    background-color: transparent;
    color: var(--net-text-muted);
    border-color: transparent;
    opacity: 1;
}

.checkin-row-saved .js-row-action {
    color: var(--net-accent);
    border-color: var(--net-accent);
    opacity: 0.7;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.spin-sm {
    width: 0.9rem;
    height: 0.9rem;
}

/* ── Table ───────────────────────────────────────────────────────── */
.table-net {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--net-primary-bg);
    color: var(--net-text);
}

.table-net thead th {
    background-color: var(--net-surface-alt);
    color: var(--net-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--net-border);
}

.table-net tbody td {
    border-color: var(--net-border);
}

/* ── Net-controller strip on daily report ────────────────────────── */
.controller-strip {
    background-color: var(--net-surface-alt);
    border-bottom: 1px solid var(--net-border);
}

/* ── Club Net Script panel ───────────────────────────────────────── */
.net-script-scroll {
    max-height: 520px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
}

.net-script-dynamic {
    color: #009933;
    font-family: "Courier New", monospace;
    font-weight: 600;
}

/* This club's convention: anything the Net Control Station should
   notice as an aside/reminder/fill-in-the-blank - rather than words to
   read verbatim on the air - is shown in red. */
.net-script-note {
    color: #ee9090;
    font-family: "Courier New", monospace;
    font-weight: 600;
}

.net-script-note-block {
    border-left: 3px solid #002699;
    background-color: #ccd9ff;
    color: #3366ff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.net-script-note-block li {
    font-weight: 600;
}

/* ── "ID Yourself" reminder countdown (Club Net Script panel header) ─ */
.id-timer-display {
    display: inline-block;
    min-width: 4.5rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1rem; /* page's base text size (previously +2pt; reduced by 2pt) */
    color: #000000; /* plain black while counting down */
}

.id-timer-display.id-timer-flash {
    color: #dc2626; /* red */
    animation: id-timer-blink 1s steps(1, end) infinite;
}

@keyframes id-timer-blink {
    50% {
        opacity: 0;
    }
}

/* ── Large summary pages (Monthly and Yearly Summary): page-wide font
   size increased by 50%. Scoped to .summary-page-large so no other page
   is affected. Most text (panel headers, table cells, form labels) has
   no explicit font-size and simply inherits this larger base size.
   Elements that set an explicit fixed rem size elsewhere in this
   stylesheet are re-declared here at 1.5x their normal size so they
   scale too. (Was .monthly-summary-page; renamed in v1.58.4 because the
   Yearly Summary uses it as well.) ────────────────────────────────── */
.summary-page-large {
    font-size: 1.5rem;
}

.summary-page-large .total-card .total-number {
    font-size: 4.5rem;
}

.summary-page-large .total-card .period-label {
    font-size: 1.65rem;
}

.summary-page-large .footer-version {
    font-size: 1.2rem;
}

.summary-page-large .table-net thead th {
    font-size: 1.2rem;
}

.summary-page-large .btn,
.summary-page-large .form-control,
.summary-page-large .form-select {
    font-size: 1.5rem;
}

/* ── EchoLink status label (Check-In page, "New Check-In" header) ──── */
.echolink-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: default;
}

/* ── Club logo on the login page ────────────────────────────────── */
.login-club-logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}