:root {
    --bg: #14171c;
    --surface: #1e232b;
    --surface-2: #262d38;
    --text: #e8ecf1;
    --muted: #8c97a5;
    --accent: #4f9cf0;
    --ok: #38b26a;
    --warn: #d9a13b;
    --alarm: #d9534f;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1 {
    font-size: 1.4rem;
    margin: 0.5rem 0 1rem;
}

/* FocusOnNavigate places focus on the page heading for screen readers;
   don't draw a focus ring around it. */
h1:focus {
    outline: none;
}

h2 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--muted);
}

.shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    gap: 1.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--surface-2);
    margin-bottom: 1.25rem;
}

/* Phones: brand and session share the top row, the nav gets a full-width row below. */
@media (max-width: 560px) {
    .topbar {
        gap: 0.75rem;
    }

    .topbar nav {
        order: 3;
        width: 100%;
    }

    .topbar nav a {
        flex: 1;
        text-align: center;
    }
}

.brand {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
}

.topbar nav {
    display: flex;
    gap: 0.25rem;
}

.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
}

.topbar nav a:hover {
    color: var(--text);
    background: var(--surface);
}

.topbar nav a.active {
    color: var(--text);
    background: var(--surface-2);
}

.session {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

.dot-live {
    background: var(--ok);
}

.dot-poll {
    background: var(--warn);
}

.link {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.link:hover {
    color: var(--text);
    text-decoration: underline;
}

.lcd {
    font-family: "Cascadia Mono", Consolas, monospace;
    background: #0a2a12;
    color: #7fe89a;
    border: 1px solid #163b20;
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    white-space: pre;
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Phones: the panel's 32-character line must fit without scrolling. */
@media (max-width: 560px) {
    .lcd {
        font-size: 0.85rem;
        letter-spacing: 0.03em;
        padding: 0.8rem 0.7rem;
    }
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chip {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--surface-2);
    color: var(--text);
}

.chip-ok {
    background: rgba(56, 178, 106, 0.18);
    color: #6ee7a0;
}

.chip-warn {
    background: rgba(217, 161, 59, 0.18);
    color: #ecc06a;
}

.chip-alarm {
    background: rgba(217, 83, 79, 0.22);
    color: #f08a87;
}

.chip-armed {
    background: rgba(79, 156, 240, 0.2);
    color: #8dc0f7;
}

.btn {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid #333c49;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    background: #303948;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn-primary,
.btn-arm {
    background: rgba(79, 156, 240, 0.25);
    border-color: rgba(79, 156, 240, 0.5);
}

.btn-disarm {
    background: rgba(56, 178, 106, 0.25);
    border-color: rgba(56, 178, 106, 0.5);
}

.btn-small {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
}

.secondary-actions {
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    max-width: 15rem;
}

/* The server build stamp on the Account page. Deliberately understated — it answers a
   question asked occasionally and on purpose, so it should be findable without competing
   with anything. Smaller than body text and set in the muted colour, below the fold of the
   password form rather than above it. */
.build-stamp {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    margin-top: 1.5rem;
}

.zone-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.zone-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}

.zone-alarmed {
    outline: 1px solid var(--alarm);
}

.zone-name {
    flex: 1;
}

.zone-flags {
    display: flex;
    gap: 0.4rem;
}

/* The Zones page only. A zone row carries more than the activity log's rows do — a name,
   up to three chips (status, Active, Bypassed) and a Bypass/Unbypass button — and on a
   phone that overflowed: with two chips showing, "Unbypass" was clipped by the card edge
   and became unreadable and hard to hit.
   Wrapping instead, in the manner .user-row already uses for the same reason. No media
   query, deliberately: the row wraps only when the content genuinely does not fit, so a
   desktop is unaffected and there is no breakpoint to keep in step with anything.
   Scoped to its own class rather than added to .zone-row, because .zone-row is shared
   with the activity log, which carries different content and has its own rule at 30rem.

   Written as `.zone-row.zone-item` on purpose. `row-gap` here overrides the `gap` shorthand
   on .zone-row, and as two lone class selectors they carry equal specificity — the only
   reason this one would win is that it sits later in the file. Doubling the selector makes
   it win on specificity instead, so moving these rules cannot silently restore 0.75rem. */
.zone-row.zone-item {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Shrink to about eight characters before wrapping, then take the whole line. Matches
   .user-name; keeps the chips beside short names where there is room for them. */
.zone-item .zone-name {
    flex: 1 1 8rem;
}

/* Push the action to the right edge once the row has wrapped, so buttons stay in a
   column down the page instead of sitting at a ragged left margin.

   The auto margin goes on the FIRST button, not on every one. There is only one button
   per row today, so both spellings look identical — but `.zone-item .btn` would put an
   auto margin on each of them, and free space would then open up *between* the buttons
   rather than before them, splitting a group that should stay together. Users.razor
   already renders multi-action rows (which is why .user-actions exists), so a second
   action here is a realistic edit, and this is the version that survives it. */
.zone-item > .btn:first-of-type {
    margin-left: auto;
}

/* Activity log. Rows reuse .zone-row so the log matches the rest of the portal; the
   timestamp is tabular and fixed-width so entries line up while scanning. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.chip-filter {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    color: var(--muted);
}

.chip-filter-on {
    background: rgba(79, 156, 240, 0.2);
    color: #8dc0f7;
}

.activity-row {
    gap: 0.6rem;
}

.activity-time {
    color: var(--muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
}

.chip-count {
    background: rgba(79, 156, 240, 0.14);
    color: #8dc0f7;
}

.chip-user {
    background: var(--surface-2);
    color: var(--muted);
}

@media (max-width: 30rem) {
    /* Narrow phones: let the description wrap under the timestamp rather than squeezing
       both onto one line. */
    .activity-row {
        flex-wrap: wrap;
    }

    .activity-row .zone-name {
        flex: 1 1 100%;
        order: 3;
    }
}

.keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(4.5rem, 6rem));
    gap: 0.5rem;
}

.key {
    aspect-ratio: 1.6;
    font-size: 1.1rem;
}

.key-word {
    font-size: 0.85rem;
}

.login-card {
    max-width: 22rem;
    margin: 3rem auto;
    background: var(--surface);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.login-card input {
    background: var(--surface-2);
    border: 1px solid #333c49;
    border-radius: 6px;
    color: var(--text);
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
}

.form-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 1.25rem;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.form-card h2 {
    margin: 0;
}

.form-card label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.form-card label.check-label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.form-card input:not([type="checkbox"]) {
    background: var(--surface-2);
    border: 1px solid #333c49;
    border-radius: 6px;
    color: var(--text);
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
}

/* Like .zone-row, but wraps: a user's action buttons drop to their own line on phones. */
.user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    background: var(--surface);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}

.user-name {
    flex: 1 1 8rem;
}

.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.session a.link {
    color: var(--muted);
    text-decoration: none;
}

.session a.link:hover,
.session a.link.active {
    color: var(--text);
}

.error {
    color: #f08a87;
}

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

/* Blazor framework UI (template styles, kept as-is) */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #111;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #2b3441;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--muted);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Says the log itself is behind — distinct from .error, which reports a request that
   failed. Amber rather than red: the recording is late, not lost. */
.notice {
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.35;
}

.notice-warn {
    color: #f2c078;
    background: rgba(242, 192, 120, 0.10);
    border: 1px solid rgba(242, 192, 120, 0.35);
}