/* system.css provides the body background (checkerboard pattern) — do not override it */

/* Full-width menu bar pinned to top */
.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,
.menubar-wrapper ul[role="menu-bar"] > li > a {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Push page content below fixed menu bar */
.page-content {
    margin-top: 28px;
    padding: 16px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Grid layouts */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Calculator */
.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;
}

/* Preserved game badge (Game Services page) */
.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;
}

/* FAQ details/summary (Game Services page) */
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;
}
details ol,
details ul {
    margin: 4px 0;
    padding-left: 20px;
}

/* Collapsible franchise rows (game list) */
.franchise-row { cursor: pointer; }
.franchise-row td { font-weight: bold; }
.franchise-toggle { display: inline-block; width: 14px; font-size: 9px; }
.franchise-count { font-size: 10px; font-weight: normal; color: #555; margin-left: 6px; }
.franchise-child td:first-child { padding-left: 24px; }
.franchise-row:hover td,
.franchise-row:active td { background: #000; color: #fff; }
.franchise-row:active .franchise-count { color: #ccc; }
.game-row { cursor: pointer; }
.game-row:hover td { background: #000; color: #fff; }
.game-row:hover .badge-preserved { border-color: #fff; color: #fff; }
.game-row[data-open="true"] td { background: #000; color: #fff; }
.game-row[data-open="true"] .badge-preserved { border-color: #fff; color: #fff; }
.game-detail td { padding: 0; }
.game-detail-pane { padding: 10px 14px; border-top: 1px solid #999; background: #f0ede8; }

/* Server Lobby */
.lobby-split {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}
.lobby-split > * { min-width: 0; }
.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; }

/* Responsive: collapse on small screens */
@media (max-width: 720px) {
    .two-col,
    .three-col {
        grid-template-columns: 1fr;
    }
    .page-content {
        padding: 8px;
    }
}