/* CheckInOut.css - Module container, sub-tab layouts, search results, folio, confirmation
 *
 * Sub-tabs: Arrivals (full-width Guest Lookup), Departures (full-width), Queue (full-width).
 * The check-in journey (all wizard steps + tablet mirror) lives in the wizard modal.
 *
 * Wizard modal, 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;
}

/* Sub-tabbed HOST (ui-patterns "Layout, spacing & scroll"; PoliciesRules.css and
   Oversight.css, TLP-979): the module completes the fill chain itself. For Departures,
   Queue and Consent Forms the nav pins, .cio-sub-tab-body is the single scroll region,
   and a sub-tab that renders ONE panel fills the body so the panel header pins and only
   its rows scroll. Panel.css promotes only a panel sitting directly in
   .tab-content-container, so the promotion lives HERE, on the host -- never in the
   embedded child (ConsentArchive). Arrivals mounts its nav inside #cio-left-panel and
   owns its own chain (.cio-arrivals-region, CheckInOutWizard.css). */
.cio-sub-tab-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cio-sub-tab-body > .dashboard-section:only-child {
    flex: 1;
    min-height: 0;
}

/* ===================
   ARRIVALS: FULL-WIDTH GUEST LOOKUP
   =================== */

.cio-left-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    flex: 1;
    min-height: 0;   /* let the lookup panel scroll within the column, not grow it */
    overflow: hidden;
}

/* Guest Lookup fills the column; the controls row stays fixed and only the
   results list scrolls. */
.cio-search-panel.dashboard-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cio-search-panel .section-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* controls row stays fixed; only the results list scrolls */
}

/* Fixed controls row: SegmentedControl (When) + search + Search button. */
.cio-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-bottom: var(--space-2);
}

.cio-controls-search {
    flex: 1 1 200px;
    min-width: 160px;
}

.cio-lookup-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

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

.cio-sub-tabs {
    flex: 0 0 auto;  /* pinned above the scrolling sub-tab body */
    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;
    gap: var(--space-2);
    padding-right: var(--space-2);
}

/* The desk's live state (a Badge atom) beside its selector; the wrapper is the hook
   the wizard controller swaps in place as the socket and the relay's verdicts change. */
.cio-desk-presence {
    display: inline-flex;
    align-items: center;
}

/* Right-anchored: the wrapper is the last item in a space-between bar, so its right
   edge is pinned and the control grows LEFTWARD as the desk name gets longer.
   width:auto undoes the `select { width: 100% }` default in base/forms.css. The cap
   stops a long name crowding the sub-tabs; past it the name ellipsises INSIDE the
   control instead of clipping mid-character. padding-right leaves the chevron zone
   clear (the shorthand would otherwise reset the global select's padding-right and
   put the ellipsis under the chevron). */
.cio-desk-selector {
    font-size: var(--text-nav);
    font-family: inherit;
    color: var(--text-body);
    /* background-COLOR, not the shorthand: base/forms.css gives every select its chevron
       as a background-image, and the shorthand resets it to none -- which left this the
       only select on the platform with appearance:none AND no arrow, i.e. no dropdown
       affordance at all. */
    background-color: var(--bg-workspace);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
    cursor: pointer;
    width: auto;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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);
}

.cio-res-detail-cols--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Narrow viewports: three columns of label/value pairs need the room. */
@media (max-width: 1100px) {
    .cio-res-detail-cols--3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===================
   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-weight-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
   =================== */

/* The queue panel's fill and its scrolling body come from the host rule above
   (.cio-sub-tab-body > .dashboard-section:only-child) and Panel.css's .section-content
   contract -- nothing re-declared here. */

.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%;
    }
}

/* ===================
   SEARCH RESULT BANNER (truncation / "refine search") -- TLP-279
   =================== */

.cio-result-banner {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--bg-muted);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-1) solid var(--border-subtle);
}