/*
 * EMS Open Slots
 * Mission Sign-Up visual family
 *
 * The base colors, type, form controls, panels, tables and buttons come from
 * css/ems.css. This file only supplies Open Slots-specific layout/state rules.
 */

body.open-slots-page {
    background: var(--page-bg, #1d1d1d);
    color: var(--text, #f2f2f2);
}

body.open-slots-roster-open {
    overflow: hidden;
}

.open-slots-app {
    max-width: 1280px;
}

.open-slots-list-panel {
    padding-bottom: 16px;
}

.open-slots-panel-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
    color: var(--muted, #cfcfcf);
    font-size: .92rem;
}

.open-slots-panel-summary strong {
    color: var(--text, #f2f2f2);
}

.open-slots-signup-state {
    margin-top: 0;
}

.open-slots-signup-state.state-open {
    border-color: #608060;
    background: #203020;
    color: #d8ffd8;
}

.open-slots-signup-state.state-suspended {
    border-color: #806a30;
    background: #302820;
    color: #ffe2a8;
}

.open-slots-signup-state.state-closed {
    border-color: #8a5555;
    background: #3a2a2a;
    color: #ffd0d0;
}

.open-slots-empty {
    padding: 16px;
    border: 1px solid var(--panel-border, #555);
    background: #202020;
    color: var(--muted, #cfcfcf);
}

.open-slots-empty strong {
    color: var(--text, #f2f2f2);
}

.open-slots-mission-table-wrap {
    border: 0;
}

.open-slots-mission-table {
    table-layout: auto;
}

.open-slots-mission-table th,
.open-slots-mission-table td {
    padding: 7px 8px;
    vertical-align: middle;
}

.open-slots-mission-table thead th {
    white-space: nowrap;
}

.open-slots-id-col {
    width: 94px;
}

.open-slots-count-col {
    width: 112px;
}

.open-slots-status-col {
    width: 118px;
}

.open-slots-mission-row {
    cursor: pointer;
}

.open-slots-mission-row:hover td,
.open-slots-mission-row:focus-visible td {
    background: #2d2d2d;
}

.open-slots-mission-row:focus-visible {
    outline: 2px solid var(--accent, #8fc7ff);
    outline-offset: -2px;
}

.open-slots-id-cell {
    text-align: center !important;
}

.open-slots-id-button {
    display: inline-flex;
    min-width: 62px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--accent, #8fc7ff);
    background: #202020;
    color: var(--accent, #8fc7ff);
    font-weight: bold;
}

.open-slots-mission-cell strong,
.open-slots-details-cell strong {
    display: block;
}

.open-slots-details-cell small,
.open-slots-pilots-cell small,
.open-slots-open-cell small {
    display: block;
    margin-top: 2px;
    color: var(--muted, #cfcfcf);
    font-size: .78rem;
}

.open-slots-pilots-cell strong {
    font-size: 1rem;
}

.open-slots-open-cell strong {
    display: block;
    color: var(--danger, #ff8c8c);
    font-size: 1.15rem;
}

.open-slots-open-cell small {
    color: var(--danger, #ff8c8c);
    font-weight: bold;
}

.open-slots-status-cell {
    font-weight: bold;
    text-transform: lowercase;
}

/* Mission roster/editor overlay */
.open-slots-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .82);
}

.open-slots-overlay[hidden] {
    display: none !important;
}

.open-slots-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--panel-border, #555);
    background: var(--panel-bg, #252525);
    color: var(--text, #f2f2f2);
}

.open-slots-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--panel-border, #555);
}

.open-slots-dialog-header h2 {
    margin: 4px 0;
}

.open-slots-mission-number {
    color: var(--accent, #8fc7ff);
    font-weight: bold;
}

.open-slots-dialog-meta {
    color: var(--muted, #cfcfcf);
}

.open-slots-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.65rem;
    line-height: 1;
}

.open-slots-roster-message {
    min-height: 0;
    margin-bottom: 10px;
}

.open-slots-roster-message:not(:empty) {
    padding: 10px;
    border: 1px solid var(--panel-border, #555);
    background: #2b2b2b;
}

.open-slots-roster-message.error {
    border-color: #8a5555;
    background: #3a2a2a;
    color: #ffd0d0;
}

.open-slots-roster-message.success {
    border-color: #608060;
    background: #203020;
    color: #d8ffd8;
}

.open-slots-table-wrap {
    overflow-x: auto;
}

.open-slots-table {
    width: 100%;
    border-collapse: collapse;
}

.open-slots-table th,
.open-slots-table td {
    padding: 8px;
    border: 1px solid var(--panel-border, #555);
    text-align: left;
    vertical-align: middle;
}

.open-slots-table th {
    background: var(--button-bg, #333);
}

.open-slots-table tr.open-seat {
    background: rgba(255, 140, 140, .04);
}

.open-slots-table tr.is-editing {
    background: rgba(143, 199, 255, .08);
}

.seat-number {
    width: 68px;
    text-align: center !important;
    font-weight: bold;
}

.open-slots-status {
    font-weight: bold;
}

.open-slots-status.empty {
    color: var(--danger, #ff8c8c);
}

.open-slots-readonly {
    color: var(--muted, #cfcfcf);
}

.open-slot-edit-control:not(div),
.open-slot-mech-controls select {
    min-width: 140px;
}

.open-slot-mech-controls {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr);
    gap: 6px;
}

.open-slot-mech-controls[hidden] {
    display: none !important;
}

.open-slot-signup-button,
.open-slot-save-button,
.open-slot-cancel-button {
    min-height: 38px;
    font-weight: bold;
}

.open-slot-signup-button,
.open-slot-save-button {
    border-color: var(--success, #7cff7c);
}

.open-slot-save-button {
    color: var(--success, #7cff7c);
}

.open-slot-signup-button:disabled {
    opacity: .55;
}

.open-slot-edit-actions {
    display: flex;
    gap: 6px;
}

.open-slot-edit-actions[hidden] {
    display: none !important;
}

.open-slots-dialog-footer {
    margin-top: 12px;
    color: var(--muted, #cfcfcf);
    font-style: italic;
}

@media (max-width: 850px) {
    .open-slots-panel-summary {
        justify-content: flex-start;
    }

    .open-slots-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 14px;
    }
}

@media (max-width: 700px) {
    .open-slots-mission-table {
        min-width: 700px;
    }

    .open-slot-mech-controls {
        grid-template-columns: 1fr;
    }
}