/* Styles for `build.html`, loaded after `app.css` so the shared tokens and
 * components are already in scope. Rules written the same way in three or
 * more pages belong in `app.css` instead: `tests/test_shared_styles.py`
 * fails when one is copied that far.
 */
.header {
    text-align: center;
    margin: 0 0 10px 0;
    background: #12151b;
    padding: 10px;
    border: 1px solid #252a35;
    border-radius: 2px;
}
.summary-stats {
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    flex-wrap: wrap;
}
.stat-card {
    background: #181c24;
    border: 1px solid #252a35;
    padding: 8px;
    border-radius: 2px;
    margin: 3px;
    min-width: 150px;
    text-align: center;
}
.stat-number {
    font-size: 20px;
    font-weight: bold;
    color: #d4a54a;
}
.table-container {
    overflow-x: auto;
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    padding: 8px;
}
.filter-bar {
    margin-bottom: 8px;
    text-align: center;
}
.filter-btn {
    background: #181c24;
    color: #d6d9e0;
    border: 1px solid #252a35;
    padding: 4px 8px;
    margin: 0 3px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
}
.filter-btn:hover, .filter-btn.active {
    border-color: #d4a54a;
    color: #d4a54a;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
th, td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid #252a35;
    font-size: 12px;
}
th {
    background: #181c24;
    font-weight: bold;
    position: sticky;
    top: 0;
    cursor: pointer;
}
th:hover {
    color: #d4a54a;
}
tr:nth-child(even) {
    background: #181c24;
}
tr:hover {
    background: #181c24;
}
.city-link, .nation-link {
    color: #d4a54a;
    text-decoration: none;
    font-weight: bold;
}
.city-link:hover, .nation-link:hover {
    color: #f0c774;
    text-decoration: underline;
}
.alerts-cell {
    max-width: 200px;
    text-align: left;
    font-size: 11px;
}
.alert-item {
    margin: 2px 0;
    padding: 2px 4px;
    background: #181c24;
    border: 1px solid #252a35;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    margin-bottom: 2px;
}
.stats {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}
.status-good { color: #7fb18a; }
.status-warn { color: #d4a54a; }
.status-bad { color: #c3787d; }
.infra-high { background: #221719; }
.infra-very-high { background: #2f1a1d; }
.infra-low { background: #2a2218; }
.no-alerts { background: #18251e; }
.action-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0;
}
.action-btn {
    background: #181c24;
    color: #d4a54a;
    border: 1px solid #d4a54a;
    border-radius: 2px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.action-btn:hover { background: #d4a54a; color: #0c0e12; }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inline-feedback {
    font-size: 12px;
    color: #9aa2af;
    min-height: 1em;
}
.inline-feedback.success { color: #7fb18a; }
.inline-feedback.error { color: #c3787d; }
.alliance-lookup {
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    padding: 10px 12px;
    margin: 10px 0;
    text-align: center;
}
.alliance-lookup h3 { margin: 0 0 8px 0; font-size: 0.95rem; }
.lookup-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.lookup-form label { font-size: 0.8rem; color: #9aa2af; }
.lookup-form input {
    background: #0c0e12;
    border: 1px solid #252a35;
    border-radius: 2px;
    color: #d6d9e0;
    padding: 4px 6px;
    width: 170px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
}
body.light-mode .header,
body.light-mode .table-container,
body.light-mode .alliance-lookup {
    background: #ffffff;
    border-color: #d7dce6;
}
body.light-mode .stat-card,
body.light-mode .filter-btn,
body.light-mode .alert-item {
    background: #f8faff;
    border-color: #d7dce6;
    color: #374151;
}
body.light-mode .filter-btn:hover,
body.light-mode .filter-btn.active {
    border-color: #4338ca;
    color: #4338ca;
    background: #eef2ff;
}
body.light-mode .lookup-form label {
    color: #6b7280;
}
body.light-mode .lookup-form input {
    background: #ffffff;
    border-color: #cfd5e1;
    color: #1f2937;
}
body.light-mode th {
    background: #f8faff;
}
body.light-mode tr:nth-child(even),
body.light-mode tr:hover {
    background: #f8faff;
}
body.light-mode th,
body.light-mode td {
    border-bottom-color: #e5e7eb;
}
body.light-mode .city-link,
body.light-mode .nation-link {
    color: #4338ca;
}
body.light-mode .city-link:hover,
body.light-mode .nation-link:hover {
    color: #3730a3;
}
body.light-mode .action-btn {
    background: #ffffff;
    color: #4338ca;
    border-color: #cfd5e1;
}
body.light-mode .action-btn:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #4338ca;
}
body.light-mode .no-alerts {
    background: #edf8f1;
}
body.light-mode .infra-low {
    background: #fff8eb;
}
body.light-mode .infra-high {
    background: #fff3f0;
}
body.light-mode .infra-very-high {
    background: #ffe8e6;
}
@media (max-width: 768px) {
    .page-body { padding: 10px; }
    th, td { padding: 6px 3px; font-size: 10px; }
    .summary-stats { flex-direction: column; align-items: center; }
    .alerts-cell { max-width: 150px; }
}