/* CheckInOut.css - Module container, sub-tab layouts, search results, workspace, folio, confirmation
 *
 * Sub-tabs: Arrivals (60/40 two-column with mirror), Departures (full-width), Queue (full-width).
 * Arrivals left column: 60% search panel + 40% workspace panel.
 *
 * Wizard, scanner, mirror, desk picker styles in CheckInOutWizard.css
 */

@import './CheckInOutWizard.css';

/* ===================
   MODULE CONTAINER
   =================== */

.check-in-out-module {
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.check-in-out-module > .two-column-layout,
.check-in-out-module > .panel,
.check-in-out-module > .dashboard-section,
.check-in-out-module > .vertical-stack,
.check-in-out-module > .cio-consent-archive {
    flex: 1;
    min-height: 0;
}

/* Consent Forms sub-tab wrapper (4th sub-tab, embedded ConsentArchive view) */
.cio-consent-archive {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-consent-archive > .vertical-stack {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ===================
   LEFT PANEL: TWO STACKED PANELS
   =================== */

.cio-left-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.cio-search-panel.dashboard-section {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-search-panel .section-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cio-workspace-panel.dashboard-section {
    flex: 0 0 40%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-workspace-panel .section-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ===================
   SUB-TAB NAVIGATION
   =================== */

.cio-sub-tabs {
    padding-bottom: var(--space-3);
}

.cio-sub-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cio-desk-selector-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: var(--space-2);
}

.cio-desk-selector {
    font-size: var(--text-nav);
    font-family: inherit;
    color: var(--text-body);
    background: var(--bg-workspace);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
}

.cio-desk-selector:hover {
    border-color: var(--border-strong);
}

.cio-desk-selector:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* ===================
   RESULTS LIST: EXPANDABLE ROWS
   =================== */

.cio-search-panel .expandable-list {
    gap: var(--space-1);
}

.cio-res-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.cio-res-dates {
    font-size: var(--text-xs);
    color: var(--text-body);
}

.cio-res-guests {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.cio-res-room {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    padding: 0 var(--space-1);
}

.cio-res-room--none {
    color: var(--text-muted);
    border-style: dashed;
    font-weight: 400;
}

.cio-res-roomtype {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===================
   WORKSPACE ACTIONS
   =================== */

.cio-workspace-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.cio-checkout-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ===================
   DETAIL GRID
   =================== */

.cio-detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ===================
   EXPANDED RESERVATION DETAILS
   =================== */

.cio-res-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ===================
   FOLIO
   =================== */

.cio-folio-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 250px;
    overflow-y: auto;
}

.cio-folio-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-2);
    font-size: var(--text-sm);
    padding: var(--space-1) 0;
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.cio-folio-item:last-child {
    border-bottom: none;
}

.cio-folio-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.cio-folio-desc {
    color: var(--text-body);
}

.cio-folio-amount {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    font-family: var(--font-mono);
}

.cio-folio-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-default);
}

.cio-folio-balance {
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-default);
    font-weight: var(--font-bold);
}

.cio-folio-balance span:last-child {
    font-size: var(--text-base);
    color: var(--color-error);
}

.cio-context-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
}

.cio-context-row span:first-child {
    color: var(--text-muted);
}

.cio-context-row span:last-child {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* ===================
   CONFIRMATION
   =================== */

.cio-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.cio-confirmation-icon {
    padding-bottom: var(--space-2);
}

.cio-confirmation-icon svg {
    width: 48px;
    height: 48px;
}

.cio-confirmation-icon--success {
    color: var(--color-success);
}

.cio-confirmation-icon--error {
    color: var(--color-error);
}

.cio-confirmation-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.cio-confirmation-actions {
    padding-top: var(--space-3);
}

/* ===================
   QUEUE
   =================== */

.cio-queue-panel.dashboard-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-queue-panel .section-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cio-queue-time {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-body);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 0 var(--space-1);
}

.cio-queue-details {
    padding: var(--space-1) 0;
}

/* ===================
   DEPARTURES
   =================== */

.cio-departures-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    flex: 1;
    min-height: 0;
}

.cio-departure-search-panel.dashboard-section {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-departure-search-panel .section-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cio-departure-workspace-panel.dashboard-section {
    flex: 0 0 40%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-departure-workspace-panel .section-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cio-departure-search-panel .expandable-list {
    gap: var(--space-1);
}

.expandable-list-item[data-checkout-status="processed"] {
    opacity: 0.5;
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 768px) {
    .cio-left-stack {
        height: auto;
    }

    .cio-workspace-actions {
        flex-direction: column;
    }

    .cio-workspace-actions .btn {
        width: 100%;
    }
}