/*
 * The other pages (Players, Analytics, Mods, Backups, Users, Settings, User Settings, Changelog) and
 * the dialogs share their markup across designs; this gives their common parts each design's look:
 * page headers, buttons, panels, tables, tabs and dialogs. Loaded last so it can override styles.css.
 */

/* ---------- Page headers ---------- */
.section-header {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}
.section > h2,
.section-header h2 {
    margin: 0 0 1rem;
}
.section-header h2 {
    margin: 0;
}
:root[data-design="control-room"] .section > h2,
:root[data-design="control-room"] .section-header h2 {
    font-size: 1.15rem;
}
:root[data-design="workbench"] .section > h2,
:root[data-design="workbench"] .section-header h2 {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}
:root[data-design="biome"] .section > h2,
:root[data-design="biome"] .section-header h2 {
    font-size: 1.6rem;
    font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn-add,
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.45rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-add,
.btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
}
.btn-add:hover,
.btn-primary:hover {
    transform: none;
    box-shadow: none;
    background: var(--accent-hover);
    color: var(--accent-contrast);
}
.btn-secondary {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--bg-hover);
}
.btn-add:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
:root[data-design="biome"] .btn-add,
:root[data-design="biome"] .btn-primary,
:root[data-design="biome"] .btn-secondary {
    border: 2px solid #1a1d1a;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
:root[data-design="biome"] .btn-secondary {
    background: var(--bg-card-alt);
}
:root[data-design="biome"] .btn-add:hover,
:root[data-design="biome"] .btn-primary:hover {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Panels and cards ---------- */
.settings-panel,
.form-panel,
.stat-card,
.analytics-panel,
.backup-config-card,
.changelog-entry,
.mods-search-container {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: none;
}
.settings-panel,
.form-panel {
    padding: 1.5rem;
}
.settings-panel h3,
.form-panel h3 {
    margin-bottom: 1rem;
}
.backup-config-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-input);
}
.stat-card {
    text-align: left;
}
.stat-card h3 {
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}
.stat-card p {
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}
:root[data-design="control-room"] .stat-card p {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.6rem;
}
:root[data-design="workbench"] .settings-panel,
:root[data-design="workbench"] .form-panel,
:root[data-design="workbench"] .stat-card,
:root[data-design="workbench"] .analytics-panel,
:root[data-design="workbench"] .backup-config-card,
:root[data-design="workbench"] .changelog-entry,
:root[data-design="workbench"] .mods-search-container {
    border-radius: 14px;
}
:root[data-design="workbench"] .stat-card h3 {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}
:root[data-design="biome"] .settings-panel,
:root[data-design="biome"] .form-panel,
:root[data-design="biome"] .stat-card,
:root[data-design="biome"] .analytics-panel,
:root[data-design="biome"] .backup-config-card,
:root[data-design="biome"] .changelog-entry,
:root[data-design="biome"] .mods-search-container {
    border: 2px solid var(--border-color);
    border-radius: 0;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
:root[data-design="biome"] .stat-card {
    text-align: center;
    border: 3px solid #1a1d1a;
    box-shadow: inset 0 0 0 3px var(--border-color), inset 0 -7px 0 rgba(0, 0, 0, 0.25);
}
:root[data-design="biome"] .stat-card h3 {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}
:root[data-design="biome"] .stat-card p {
    font-weight: 800;               /* not the pixel font: its 5 reads as S and 2 as 8 */
}

/* ---------- Tables (not .srv-table: the Servers page and Dashboard frame their own) ---------- */
.section table:not(.srv-table) {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    margin-top: 1rem;
}
.section table:not(.srv-table) thead {
    background: none;
    border: 0;
}
.section table:not(.srv-table) th {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.section table:not(.srv-table) td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.section table:not(.srv-table) tbody tr {
    border: 0;
}
.section table:not(.srv-table) tbody tr:last-child td {
    border-bottom: 0;
}
.section table:not(.srv-table) tbody tr:hover {
    background: var(--bg-hover);
}
.analytics-panel table,
.players-table-container table {
    border: 0;
    margin-top: 0;
}
:root[data-design="control-room"] .section table:not(.srv-table) th {
    font-family: var(--font-mono);
    font-weight: 500;
}
:root[data-design="workbench"] .section table:not(.srv-table) th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
}
:root[data-design="workbench"] .section table:not(.srv-table) {
    border-radius: 14px;
}
:root[data-design="biome"] .section table:not(.srv-table) {
    border-width: 2px;
}
:root[data-design="biome"] .section table:not(.srv-table) th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

/* ---------- Tabs (Players page, dialogs): underlined, not filled ---------- */
.tabs {
    gap: 1rem;
    padding-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}
.tabs .tab-btn {
    padding: 0.55rem 0.1rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-weight: 500;
}
.tabs .tab-btn:hover {
    background: none;
    color: var(--text-primary);
}
.tabs .tab-btn.active {
    background: none;
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
:root[data-design="control-room"] .tabs .tab-btn {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
:root[data-design="biome"] .tabs .tab-btn.active {
    border-bottom-width: 3px;
}

/* ---------- Dialogs ---------- */
.form-actions {
    align-items: center;
}
.form-actions > button {
    margin-top: 0;                  /* not the sign-in form's spacing, so a row's buttons line up */
}
#add-email-modal {
    z-index: 2200;                  /* required after signing in: above anything else that opens */
}
[id="2fa-setup-modal"] {
    z-index: 2150;                  /* required 2FA set-up: above pages and their dialogs */
}
.modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
:root[data-design="workbench"] .modal-content {
    border-radius: 14px;
}
:root[data-design="biome"] .modal-content {
    border: 3px solid #1a1d1a;
    border-radius: 0;
    box-shadow: 0 0 0 2px var(--border-color), var(--shadow-lg);
}

/* ---------- Changelog: a card per version, not a filled banner ---------- */
.changelog-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: none;
    color: var(--text-heading);
}
.changelog-header h3 {
    font-size: 1.1rem;
}
.changelog-date {
    color: var(--text-muted);
    opacity: 1;
}
.changelog-badge,
.changelog-badge.current {
    background: var(--accent-soft);
    color: var(--accent-text);
}
.changelog-content {
    padding: 1rem 1.25rem 1.25rem;
}
.changelog-content h4 {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
:root[data-design="control-room"] .changelog-header h3 {
    font-family: var(--font-mono);
    font-weight: 500;
}
:root[data-design="biome"] .changelog-header {
    border-bottom: 2px solid #1a1d1a;
    background: var(--bg-sidebar);
}
:root[data-design="biome"] .changelog-header h3 {
    font-family: var(--font-body);      /* version numbers: the pixel 2 reads as 8 */
    font-weight: 700;
}
:root[data-design="biome"] .changelog-badge {
    border: 2px solid currentColor;
    border-radius: 0;
    background: none;
    color: var(--accent);
}

/* ---------- Pages that work on one server (Players, Mods): choosing it first ---------- */
.server-pick {
    display: none;
}
.section.no-server > .server-pick {
    display: block;
}
.section.no-server > :not(.section-header):not(.server-pick):not(.modal) {
    display: none !important;
}
.server-pick-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0.5rem 0 1rem;
}
.server-pick-head > .icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.15rem;
    color: var(--accent);
}
.server-pick-head h3 {
    margin: 0 0 0.2rem;
}
.server-pick-head p {
    margin: 0;
    color: var(--text-secondary);
}
.server-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0.6rem;
    max-width: 1100px;
}
.server-pick-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.server-pick-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.server-pick-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.server-pick-name {
    display: grid;
    flex: 1;
    min-width: 0;
}
.server-pick-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.server-pick-name .sub {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.server-pick-card .srv-block {
    flex: none;
    width: 32px;
    height: 32px;
    border: 2px solid #1a1d1a;
    image-rendering: pixelated;
}
.server-pick-note {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
:root[data-design="workbench"] .server-pick-card {
    border-radius: 12px;
}
:root[data-design="biome"] .server-pick-card {
    border: 2px solid var(--border-color);
    border-radius: 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
:root[data-design="biome"] .server-pick-card:hover {
    border-color: #eef0e8;
}

/* Block & biome: the servers stay at the top of Players and Mods as a hotbar, the chosen one raised
   like the current tab of a server's page; no drop-down */
:root[data-design="biome"] .server-pick {
    display: block;
    margin-bottom: 1.25rem;
}
:root[data-design="biome"] .player-controls,
:root[data-design="biome"] .mods-server-select > label,
:root[data-design="biome"] #mods-server-select {
    display: none;
}
:root[data-design="biome"] .section:not(.no-server) > .server-pick :is(.server-pick-head, .server-pick-note) {
    display: none;
}
:root[data-design="biome"] .server-pick-grid {
    display: flex;
    gap: 4px;
    max-width: none;
    padding: 0.55rem 0.7rem;
    overflow-x: auto;
    border: 3px solid #1a1d1a;
    background: #1f231f;
}
:root[data-design="biome"] .server-pick-card {
    flex: 0 0 150px;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
    border: 3px solid #2a2e29;
    background: var(--bg-card-alt);
    color: var(--text-muted);
    text-align: center;
    box-shadow: none;
}
:root[data-design="biome"] .server-pick-card .srv-block {
    width: 40px;
    height: 40px;
}
:root[data-design="biome"] .server-pick-name {
    justify-items: center;
    width: 100%;
}
:root[data-design="biome"] .server-pick-card .server-status {
    font-size: 0.72rem;
}
:root[data-design="biome"] .server-pick-card:hover {
    border-color: #eef0e8;
    color: var(--text-primary);
}
:root[data-design="biome"] .server-pick-card.selected {
    border-color: #eef0e8;
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px #1a1d1a;
}

/* Settings > Notifications: the node alert limits under their event */
.notification-event-item:has(.node-alert-limits) {
    flex-wrap: wrap;
}
.node-alert-limits {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.node-alert-limits label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.node-alert-limits input {
    width: 4.5rem;
}

/* User Settings: where you're signed in */
.sessions-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}
.session-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card-alt);
}
.session-row.current {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
}
.session-row > .icon {
    color: var(--text-muted);
}
.session-info {
    display: grid;
    flex: 1;
    min-width: 0;
}
.session-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.session-info .sub {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Settings > HTTPS for the panel */
.https-steps {
    margin: 0.5rem 0 1rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.https-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    margin: 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.https-actions {
    justify-content: flex-start;
}

/* A server's SFTP login */
#sftp-modal {
    z-index: 2100;                  /* opened from a server's page */
}
.sftp-dialog {
    max-width: 560px;
}
.sftp-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 1rem 0 0.5rem;
    align-items: center;
}
.sftp-details dt {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.sftp-details dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-width: 0;
}
.sftp-details code {
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card-alt);
    word-break: break-all;
}
.sftp-details .btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.sftp-actions {
    justify-content: flex-end;
}