/* Override system.css .window font stack for body content.
   system.css declares @font-face for Chicago/Chicago_12/Monaco/Geneva_9 — those font
   files are now served from /static/ alongside system.css.
   We keep Geneva/Helvetica for paragraph text (.window-pane) to avoid Inconsolata/Menlo
   rendering for prose, but let system.css Chicago_12 apply to UI elements
   (title bars, buttons, inputs, selects, field-rows). */
body {
    font-family: Geneva, 'Helvetica Neue', Arial, sans-serif;
}
.window-pane {
    font-family: Geneva, 'Helvetica Neue', Arial, sans-serif;
}

.menubar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.menubar-wrapper ul[role="menu-bar"] {
    width: 100%;
    box-sizing: border-box;
}
.menubar-wrapper ul[role="menu-bar"] > li {
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
}
.menubar-wrapper ul[role="menu-bar"] > li > a {
    font-size: 22px !important;
}

.page-content {
    margin-top: 48px;
    padding: 16px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Desktop zoom — Chrome/Safari/Edge only; Firefox excluded (see issue #556) */
@supports not (-moz-appearance: none) {
    @media (min-width: 1280px) { .page-content { zoom: 1.1;  } }
    @media (min-width: 1440px) { .page-content { zoom: 1.25; } }
    @media (min-width: 1680px) { .page-content { zoom: 1.45; } }
    @media (min-width: 1920px) { .page-content { zoom: 1.7;  } }
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
/* Allow grid to control card width; overrides system.css .window { min-width: 320px } */
.three-col .window { min-width: 0; }

/* ── Game services hero row (Game Servers + Get Started, 50/50) ── */
.gs-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
/* ── Game services main row (Pricing | Questions, 50/50 to match hero row).
       align-items: stretch makes Questions track Pricing's height so its
       internal .window-pane scroll handles overflow when FAQ sections expand. ── */
.gs-page-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.gs-page-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.gs-page-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gs-page-right .window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    /* Grow to fill .gs-page-right, which the grid stretched to match
       Pricing's height. Without flex:1 the card sits at its natural
       (shorter) height and the stretched parent shows empty space. */
    flex: 1;
    min-height: 0;
}
/* Allow the FAQ pane to scroll when the card is stretched to match Pricing.
   Without min-height:0, flex children default to min-height:auto and refuse
   to shrink below their intrinsic content size, which disables overflow-y. */
.gs-page-right .window-pane {
    min-height: 0;
}
.lobby-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
}
@media (max-width: 782px) {
    .gs-hero-layout,
    .gs-page-layout {
        grid-template-columns: 1fr;
    }
}

/* Visually-hidden text accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.calc-rate-hint {
    font-size: 11px;
    color: #555;
    margin-bottom: 8px;
}
.calc-item {
    border: 1px solid #000;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.calc-item:last-child {
    margin-bottom: 0;
}
.calc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.calc-row:last-child {
    margin-bottom: 0;
}
.calc-row label {
    width: 90px;
    flex-shrink: 0;
    font-size: 11px;
}
.calc-row input[type="number"] {
    width: 80px;
}
.calc-row select {
    width: auto;
    flex-shrink: 0;
}
.calc-unit {
    font-size: 11px;
    color: #555;
    min-width: 52px;
}
.calc-fill {
    flex: 1;
}
.calc-cost {
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
}
.calc-rm {
    margin-left: 4px;
    min-width: 24px;
    text-align: center;
}
.calc-empty {
    font-size: 11px;
    color: #555;
    font-style: italic;
    margin: 0 0 4px;
}

.gs-order-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.gs-order-item:last-child {
    border-bottom: none;
}

.badge-preserved {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 0 4px;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/* Flash messages — used by /console/gaming/* partial responses and
   inline form feedback. Kept here so any page (cloud or gaming) that
   embeds an HTMX target can show them without extra scaffolding. */
.flash-success {
    background: #eef8ee;
    border: 1px solid #2a6a2a;
    color: #2a6a2a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}
.flash-error {
    background: #fdeeee;
    border: 1px solid #8a2a2a;
    color: #8a2a2a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}
/* Informational flash — used for "no-op but OK" paths (e.g. already
   an admin, already removed). Visually distinct from success so the
   user notices the action didn't actually change state. */
.flash-info {
    background: #eef4fb;
    border: 1px solid #2a548a;
    color: #2a548a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}
/* Warning flash — action partially succeeded (e.g. ban landed in
   memory but writeid failed to persist). Amber styling signals
   "look at this" without the alarm of .flash-error. Added in #1037
   ops-review follow-up. */
.flash-warning {
    background: #fdf6e3;
    border: 1px solid #d97706;
    color: #8a6a2a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}

details {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
}
details:last-child {
    border-bottom: none;
}
details summary {
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
details[open] summary {
    margin-bottom: 8px;
}

/* Add-on rows — compact info-icon reveal, overrides default <details> chrome */
details.addon-info {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
details.addon-info > summary {
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
details.addon-info > summary::-webkit-details-marker {
    display: none;
}
details.addon-info[open] > summary {
    margin-bottom: 0;
}
.addon-info-icon {
    font-size: 12px;
    color: #888;
}
details.addon-info[open] .addon-info-icon {
    color: #000;
}

/* FAQ section-level accordion — outer wrapper for a group of questions */
details.faq-section > summary {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    padding: 5px 0;
    margin-bottom: 0;
}
details[open].faq-section > summary {
    margin-bottom: 4px;
}
details.faq-section > details {
    margin-left: 8px;
}
details ol,
details ul {
    margin: 4px 0;
    padding-left: 20px;
}

/* Game select — full-width dropdown */
#gs-game-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.server-detail-inline {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 10px 14px;
    background: #f8f6f0;
    border-top: 1px solid #d0ccc4;
    box-sizing: border-box;
    width: 100%;
}
.detail-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 12px;
    flex: 1;
    align-content: start;
}
.detail-action {
    flex: 0 0 180px;
}
.server-row { cursor: pointer; }
.server-row:hover td,
.server-row.selected td { background: #000; color: #fff; }
.ping-low  { color: #006400; }
.ping-mid  { color: #886600; }
.ping-high { color: #cc0000; }
.server-row:hover td.ping-low,
.server-row:hover td.ping-mid,
.server-row:hover td.ping-high,
.server-row.selected td.ping-low,
.server-row.selected td.ping-mid,
.server-row.selected td.ping-high { color: #fff; }
.players-full  { color: #cc0000; }
.players-empty { color: #999; }
.server-row:hover td.players-full,
.server-row:hover td.players-empty,
.server-row.selected td.players-full,
.server-row.selected td.players-empty { color: #fff; }
.player-bar-track { width: 100%; height: 8px; border: 1px solid #000; background: #fff; }
.player-bar-fill  { height: 100%; background: #000; }
.sort-ind { font-size: 9px; }
.server-inet td { background: #f5f8f2; }
.server-inet:hover td,
.server-inet.selected td { background: #000; color: #fff; }
.inet-dot { color: #2a6e1a; font-size: 8px; margin-right: 2px; vertical-align: middle; }
.server-row:hover .inet-dot,
.server-row.selected .inet-dot { color: #7dca65; }

@media (max-width: 720px) {
    .two-col,
    .three-col,
    .service-nav,
    .detail-row-2,
    .detail-row-3 {
        grid-template-columns: 1fr;
    }
    .page-content {
        padding: 8px;
    }
    /* Collapse system.css .window margins inside grids so cards don't overflow */
    .service-nav .window,
    .detail-row .window,
    .detail-overview {
        margin: 0 0 8px;
    }
}

/* ── Service drill-down (marketing pages: /platform, /infrastructure, /edge) ── */

.service-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.service-card {
    cursor: pointer;
    user-select: none;
    /* Allow grid to control card width; overrides system.css .window { min-width: 320px } */
    min-width: 0;
}
.service-card .window-pane {
    font-size: 15px;
}

/* Active/hovered/focused card: solid black title bar (retro Mac active-window style).
   The `background` shorthand resets background-image, so no background-image:none needed. */
.service-card.active .title-bar,
.service-card:hover .title-bar,
.service-card:focus-visible .title-bar {
    background: #000;
}
.service-card.active .title-bar .title,
.service-card:hover .title-bar .title,
.service-card:focus-visible .title-bar .title {
    background: #000;
    color: #fff;
}
/* Buttons must remain visible on the black title bar */
.service-card.active .title-bar .close,
.service-card.active .title-bar .resize,
.service-card:hover .title-bar .close,
.service-card:hover .title-bar .resize,
.service-card:focus-visible .title-bar .close,
.service-card:focus-visible .title-bar .resize {
    background: #fff;
    border-color: #fff;
}
/* Distinct focus ring beyond the black title bar (keyboard users need more than hover parity) */
.service-card:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Detail panels: hidden until a card is activated via JS */
.service-detail { display: none; }
.service-detail.active { display: block; }

/* Sub-grids inside detail panels */
.detail-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.detail-row-2 { grid-template-columns: 1fr 1fr; }
.detail-row-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Allow grid to control detail window width; overrides system.css .window { min-width: 320px } */
.detail-row .window { min-width: 0; }

.detail-overview { margin-bottom: 12px; min-width: 0; }

/* ── Cloud console layout ──────────────────────────────────────────────────── */

.cloud-main > .window { margin-bottom: 12px; }
.cloud-main > .window:last-child { margin-bottom: 0; }

/* ── Resource tables ───────────────────────────────────────────────────────── */

.resource-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.resource-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    padding: 6px 10px;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}
.resource-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.resource-table tr:last-child td { border-bottom: none; }
.resource-table tr:hover td { background: #f5f5f5; cursor: pointer; }
.resource-table tr.clickable:hover td { background: #000; color: #fff; }
.resource-table .col-actions { text-align: right; white-space: nowrap; }
.resource-table .col-name { font-weight: bold; white-space: nowrap; }
.resource-table .col-mono { font-family: Monaco, monospace; font-size: 11px; }
.resource-table .col-muted { color: #666; font-size: 11px; }

/* ── Status badges ─────────────────────────────────────────────────────────── */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-running  .status-dot { background: #3a9a3a; }
.status-stopped  .status-dot { background: #ccc; }
.status-starting .status-dot { background: #e0a020; }
.status-degraded .status-dot { background: #d85e00; }
.status-error    .status-dot { background: #cc2020; }

/* ── Vendor / platform badges ──────────────────────────────────────────────── */

.vendor-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 1px 5px;
    line-height: 1.5;
    white-space: nowrap;
}

/* ── Quota / usage bar ─────────────────────────────────────────────────────── */

.quota-bar-track {
    width: 100%;
    height: 8px;
    border: 1px solid #000;
    background: #fff;
    display: inline-block;
}
.quota-bar-fill {
    height: 100%;
    background: #000;
    display: block;
}
.quota-bar-fill.warn  { background: #cc8800; }
.quota-bar-fill.crit  { background: #cc2020; }
.quota-label {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
}

/* ── Severity badges ───────────────────────────────────────────────────────── */

.severity-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid currentColor;
    padding: 1px 5px;
    line-height: 1.5;
}
.severity-high     { color: #cc6600; }
.severity-medium   { color: #aa8800; }
.severity-low      { color: #336633; }
.severity-info     { color: #336699; }

/* ── Form helpers ──────────────────────────────────────────────────────────── */

.form-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.form-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 8px;
}
/* ── Cloud console action bar ──────────────────────────────────────────────── */

.action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.action-bar .spacer { flex: 1; }

/* ── Terminal / log viewer ─────────────────────────────────────────────────── */

.terminal-pane {
    background: #111;
    color: #d4d4d4;
    font-family: Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    min-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.terminal-pane .log-ts { color: #666; user-select: none; }
.terminal-pane .log-err { color: #f87171; }
.terminal-pane .log-warn { color: #fbbf24; }
.terminal-pane .log-info { color: #d4d4d4; }

/* ── Price / market colours ────────────────────────────────────────────────── */

.price-down { color: #2a7a2a; }
.price-up   { color: #cc2020; }
.price-same { color: #555; }

/* ── system.css supplemental classes (defined in docs.css, absent from v0.1.11 dist) ── */

.center {
    text-align: center;
}
@media only screen and (max-width: 600px) {
    .scale-down {
        transform: scale(0.8);
    }
}
.dialog-text {
    font-family: Chicago_12;
    font-size: 1em;
    font-weight: normal;
    margin-top: 20px;
}
.alert-text {
    font-family: Chicago_12;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
}
.square {
    width: 32px;
    height: 32px;
    background-color: #000;
    flex-shrink: 0;
}

/* ── Authenticated-user home-page nudge modal ── */

.home-nudge-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.home-nudge-backdrop[data-open="true"] {
    display: flex;
}
@media (prefers-reduced-motion: reduce) {
    .home-nudge-backdrop .scale-down {
        transform: none;
    }
}

/* ── Global hx-confirm modal (see templates/base.html) ── */
/* One dialog registered at the body level, driven by
   hx-confirm-modal.js intercepting htmx:confirm. Replaces the browser's
   default window.confirm() for every hx-confirm call site. Full-viewport
   backdrop; the box itself is a system.css alert-box. Uses hidden
   attribute as the default-closed state; data-open="true" flips it to
   flex. Kept separate from .home-nudge-backdrop because the two have
   distinct semantics (one is a pure modal dialog, the other a
   dismissable advisory) and sharing a class would couple their
   lifecycles. */
.hx-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.hx-confirm-backdrop[data-open="true"] {
    display: flex;
}
@media (prefers-reduced-motion: reduce) {
    .hx-confirm-backdrop .scale-down {
        transform: none;
        animation: none;
        transition: none;
    }
}

/* Destructive-action button colour. Used on Destroy / delete-style
   buttons to signal irreversibility alongside an hx-confirm prompt.
   Mirrors the inline style used by console-cloud-instance-detail.html;
   factored out so the colour drift stays in one place. */
.btn-danger {
    color: #cc2020;
    border-color: #cc2020;
}

/* ── Stub / coming-soon ────────────────────────────────────────────────────── */

.coming-soon-pane {
    padding: 48px 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — phones and tablets.

   Breakpoints (desktop-first, max-width):
     819px  small tablet portrait and below  (docs sidebar collapse)
     743px  all phones incl. large phablets  (iPhone Plus / Pro Max)
     429px  standard phone portrait          (iPhone 14 / Galaxy S23)
     389px  smaller phones                   (iPhone SE, older Android)

   Existing breakpoints kept intact:
     720px  .two-col / .three-col / .service-nav
     600px  .scale-down
═══════════════════════════════════════════════════════════════════ */

/* ── Small tablet portrait and below ── */
@media (max-width: 819px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
    .docs-nav {
        position: static;
        top: auto;
    }
}

/* ── All phones (≤ 743px) ── */
@media (max-width: 743px) {
    /* Menubar: shrink items and allow hidden horizontal scroll */
    .menubar-wrapper ul[role="menu-bar"] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .menubar-wrapper ul[role="menu-bar"]::-webkit-scrollbar {
        display: none;
    }
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 14px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 14px !important;
    }
    .page-content {
        margin-top: 42px;
    }

    /* Server detail: stack info and action vertically */
    .server-detail-inline {
        flex-direction: column;
        gap: 10px;
    }
    .detail-action {
        flex: none;
        width: 100%;
    }

    /* Footer dialog: max-width clamps inline width:30rem on narrow screens */
    .standard-dialog {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }
}

/* ── Standard phone portrait (≤ 429px) ── */
@media (max-width: 429px) {
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 12px !important;
    }
    .page-content {
        margin-top: 38px;
        padding: 6px;
    }

    /* Prevent iOS auto-zoom on focused inputs (triggered when font-size < 16px) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Pricing calculator rows: stack label above controls */
    .calc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    .calc-row label {
        width: auto;
    }
    .calc-row input[type="number"],
    .calc-row select {
        width: 100%;
        box-sizing: border-box;
    }
    .calc-unit {
        display: none;
    }

    /* SSO provider grid: single column */
    .sso-grid {
        grid-template-columns: 1fr !important;
    }
    .sso-btn-last {
        grid-column: auto !important;
    }

    /* Console actions bar */
    .console-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Quota bars: override inline width:140px so they fill their cell */
    .quota-bar-track {
        width: 100% !important;
        display: block;
    }

    /* Radio field-rows: allow wrapping at phone widths */
    .field-row {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Home-nudge modal: shrink to fit phone viewports */
    .home-nudge-backdrop .alert-box {
        width: calc(100vw - 24px) !important;
        max-width: 30rem;
    }

    /* Resource tables: horizontal scroll within pane */
    .window-pane:has(.resource-table) {
        overflow-x: auto;
    }
    .resource-table {
        min-width: 480px;
    }

    /* Server lobby table: horizontal scroll */
    #gs-lobby .window-pane {
        overflow-x: auto;
    }
    #gs-lobby table {
        min-width: 560px;
    }

    /* Game services config: tighten padding */
    #gs-config {
        padding: 8px 10px !important;
    }
}

/* ── Smaller phones (≤ 389px) — iPhone SE, older Android ── */
@media (max-width: 389px) {
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 11px !important;
        padding: 5px 6px !important;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 11px !important;
    }
    .page-content {
        padding: 4px;
    }
    .badge-preserved {
        font-size: 9px;
    }
}

/* ── RCON Console (#917) ──────────────────────────────────────────────
   Flat-light palette to match the settings pane; mono body via the
   same Monaco stack that .col-mono uses. No CSS variables — app.css
   is uniformly flat and introducing them here would be out-of-scope. */
.rcon-intro {
    color: #444;
    font-size: 12px;
    margin: 0 0 8px;
}
.rcon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 8px;
}
.rcon-chips .rcon-chip {
    font-size: 11px;
    padding: 1px 6px;
    font-family: Monaco, "Lucida Console", monospace;
}
.rcon-help {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
}
.rcon-help summary {
    cursor: help;
    color: #555;
    padding: 1px 6px;
    border: 1px dashed #bbb;
    border-radius: 2px;
    list-style: none;
}
.rcon-help summary::-webkit-details-marker { display: none; }
.rcon-help-body {
    max-width: 520px;
    margin: 4px 0 0;
    padding: 6px;
    background: #f7f7f0;
    border: 1px dashed #bbb;
    font-size: 11px;
    color: #444;
}
.rcon-help-body p {
    margin: 0 0 6px;
}
.rcon-help-body p:last-child {
    margin-bottom: 0;
}
.rcon-log {
    max-height: 320px;
    overflow-y: auto;
    background: #f7f7f0;
    border: 1px solid #bbb;
    padding: 6px;
    margin: 0 0 8px;
    font: 12px Monaco, "Lucida Console", monospace;
    white-space: normal; /* <pre> children carry their own whitespace */
}
.rcon-entry {
    border-left: 3px solid #ccc;
    padding: 2px 6px;
    margin: 4px 0;
}
.rcon-entry pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.rcon-entry code {
    font-family: Monaco, "Lucida Console", monospace;
    font-size: 12px;
}
.rcon-entry-hint {
    border-left-color: transparent;
    color: #888;
    font-style: italic;
}
.rcon-entry-cmd {
    border-left-color: #444;
    color: #222;
    background: #eeece2;
}
.rcon-entry-cmd::before {
    content: "rcon> ";
    color: #888;
}
.rcon-entry-ok {
    border-left-color: #3a9a3a;
}
/* #1034: warn styling for commands that reached srcds but were not
   recognised (most commonly `Unknown command "sm_*"` when SourceMod
   isn't loaded). Gold-amber left rule so it reads as "ran, but
   check this" rather than green/success. */
.rcon-entry-warn {
    border-left-color: #d97706;
    background: #fdf6e3;
}
.rcon-entry-warn .rcon-entry-hint {
    color: #8a6a2a;
    font-size: 11px;
    font-style: normal;
    margin: 4px 0 0;
}
.rcon-entry-err {
    border-left-color: #8a2a2a;
    background: #fdeeee;
    color: #8a2a2a;
}

/* #1023 live-ops: player list + ban list table styling. Mirrors the
   admins-table grammar so the three stacked sections on the server-
   detail page read as one visual family. */
.playerlist-table, .banlist-table {
    font-size: 12px;
}
.playerlist-table th, .playerlist-table td,
.banlist-table th, .banlist-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.playerlist-table tbody tr:hover,
.banlist-table tbody tr:hover {
    background: #fafaf4;
}
.playerlist-empty, .banlist-empty {
    margin: 4px 0;
    font-size: 12px;
    color: #888;
}
/* Admin badge pill on player rows — subtle neutral, not a call-to-
   action. Close to the admins-table visual language without forking
   a second badge component. */
.playerlist-admin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: Monaco, "Lucida Console", monospace;
    background: #eef4fb;
    border: 1px solid #c7d6e8;
    color: #2a548a;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.playerlist-nobreak, .banlist-unknown {
    font-size: 11px;
    color: #777;
}
.banlist-disabled-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
}
/* Ban-drawer <details> so the duration picker appears inline under
   the row, not as a popup. The <summary> reuses .btn-danger so it
   looks like a button; when open, the form slot appears beneath. */
.playerlist-ban-drawer > summary {
    list-style: none;
    cursor: pointer;
}
.playerlist-ban-drawer > summary::-webkit-details-marker { display: none; }
.playerlist-ban-form {
    margin-top: 4px;
    padding: 6px;
    background: #fdf6e3;
    border: 1px solid #d97706;
    border-radius: 3px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.playerlist-ban-form select {
    font-size: 11px;
    padding: 1px 4px;
}
.rcon-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.rcon-label {
    /* Visually-hidden but screen-reader available — keeps the prompt
       span as the only visible cue while preserving a11y. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.rcon-prompt {
    font-family: Monaco, "Lucida Console", monospace;
    color: #888;
}
#rcon-input {
    flex: 1 1 180px;
    font-family: Monaco, "Lucida Console", monospace;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #888;
    background: #fff;
}
#rcon-input[disabled] {
    background: #eee;
    color: #888;
    cursor: not-allowed;
}
.rcon-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #888;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 120ms;
}
.rcon-spinner.htmx-request {
    opacity: 1;
    animation: rcon-spin 0.8s linear infinite;
}
@keyframes rcon-spin {
    to { transform: rotate(360deg); }
}
.rcon-gating {
    font-size: 11px;
    color: #8a2a2a;
    margin: 4px 0 0;
}
.rcon-disabled .rcon-log {
    opacity: 0.6;
}
@media (max-width: 782px) {
    .rcon-log {
        max-height: 220px;
    }
    .rcon-chips .rcon-chip {
        font-size: 10px;
    }
}