/* RoomRequests.css -- Front Office cross-department guest room requests (TLP-050).
   Sub-tab nav uses SegmentedControl; rows reuse ExpandablePanel +
   ExpandableRowHeader; detail rows reuse DetailRow. Only the page wrapper,
   sub-tab spacing, and the expanded-detail grid live here. All values from
   design tokens -- no hardcoded colours, spacing, or radii. */

.room-requests-module {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;          /* fill the tab content slot (flex column) -- full-height board */
    min-height: 0;
}

/* Scroll region below the sub-tab bar. The board's columns fill it; the list
   tabs scroll within it. */
.room-requests-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Sub-tab bar: SegmentedControl (left) + Create Task action (right), mirroring
   the Inbox's sub-tab bar placement. */
.room-requests-sub-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.room-requests-sub-tabs {
    display: flex;
    min-width: 0;
}

.room-requests-sub-tab-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Expanded request detail -- 2-col identity grid, mirrors the Inbox detail. */
.room-requests-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.room-requests-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.room-requests-detail-cell {
    min-width: 0;
}

.room-requests-detail-cell-full {
    grid-column: 1 / -1;
}

/* "Request Details" block -- separated from identity with a subtle top rule. */
.room-requests-detail-section {
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* Guest-list "Load more" control (TLP-195) -- centred under the list. */
.room-requests-load-more {
    display: flex;
    justify-content: center;
    padding-top: var(--space-3);
}

@media (max-width: 768px) {
    .room-requests-detail-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Late Checkout day-board (columns = days). Layout mirrors the
   BookingColumns organism, minus the slot capacity bar.
   ============================================================ */

.room-requests-daycols {
    display: flex;
    gap: var(--space-2);
    flex: 1;            /* fill the content region -- full-height columns */
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.room-requests-daycol {
    flex: 1 0 180px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.room-requests-daycol-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-3);
    border-bottom: var(--border-width-1) solid var(--border-default);
}

.room-requests-daycol-date {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.room-requests-daycol-count {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

/* "+" sits at the right edge of the column header (mirrors .bkcol-title-row). */
.room-requests-daycol-header .btn {
    margin-left: auto;
    flex-shrink: 0;
}

/* TLP-1095: the Pending approval column is the board's fixed first column -- not a
   day, and never squeezed by the day columns beside it. Its groups are headed with
   the Availability strip's day header (.as-day-*), so there is one kind of date
   heading on the platform, not two. */
.room-requests-pendingcol {
    flex: 0 0 220px;
    min-width: 220px;
    background: var(--bg-layer-2);
}

.room-requests-pending-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Cancel by guest / Remove from list: full-width under the card, so a narrow
   column never has to choose between the label and the room number. */
.room-requests-pending-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.room-requests-pending-actions .btn {
    width: 100%;
}

.room-requests-daycol-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
}

.room-requests-daycol-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: var(--space-4) var(--space-2);
}

.room-requests-lc-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-layer-2);
    /* Firmer edge + hover lift (KanbanBoard precedent) so day-board cards stand
       out from their column without resting shadows cluttering a dense board. */
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    transition: box-shadow var(--duration-150) var(--easing-out);
}

.room-requests-lc-card:hover {
    box-shadow: var(--shadow-sm);
}

/* A day column is 180px wide and this row now carries up to three badges (the
   Guest app origin, the work progress and the approval decision). Badges keep
   their own width and wrap onto a second line rather than being squeezed over
   the room number; the room number takes what is left. */
.room-requests-lc-card-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}

.room-requests-lc-card-top > .badge {
    flex: 0 0 auto;
    max-width: 100%;
}

.room-requests-lc-room {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Edit/Delete action SVGs -- card footer row, right-aligned. */
.room-requests-lc-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.room-requests-lc-card-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* TLP-1104: what an alternative grant changed, on the card. One pair per line in the
   SAME from->to idiom as the move card above -- muted ask, muted arrow, emphasised
   given -- because a 180px day column cannot hold the panel's fuller phrasing and a
   label/value pair that wraps mid-value reads as two unrelated things. No new colour:
   the same two text tokens the from->to already uses. */

.room-requests-alt {
    padding-top: var(--space-1);
    border-top: var(--border-width-1) solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.room-requests-alt-pair {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.room-requests-alt-asked,
.room-requests-alt-arrow {
    color: var(--text-muted);
}

.room-requests-alt-given {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* ---- Request Late Checkout modal (two-column: form + helper panel) ----
   The right rail uses the Modal organism's .modal-body-helper chrome and the
   shared repairs-helper-* / DetailRow / state molecules -- no bespoke panel CSS. */

.room-requests-lc-modal {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Room number input + "Look up guest" button on one full-width row (mirrors
   .ra-mode-row): the room field grows to fill, the button stays fixed right. */
.room-requests-lc-room-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.room-requests-lc-room-row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.room-requests-lc-room-row input {
    width: 100%;
}

.room-requests-lc-room-row .btn {
    flex-shrink: 0;
}

.room-requests-lc-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Contain the guest-lookup states WITHIN the helper rail so swapping them
   (prompt -> looking up -> guest summary + charge) never resizes the modal. The
   rail's content is pinned to fill it and scrolls internally if needed, so the
   modal height is driven by the form column (+ the modal's base min-height),
   never by the helper. Desktop only -- on mobile the columns stack and flow. */
@media (min-width: 769px) {
    #late-checkout-modal .modal-body-helper,
    #room-change-modal .modal-body-helper {
        position: relative;
        overflow: hidden;
    }
    #late-checkout-modal .modal-body-helper > *,
    #room-change-modal .modal-body-helper > * {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        overflow-y: auto;
    }
}

/* ---- Room Change board (two-axis: submission day -> approved move day) ----
   Reuses the day-column + card layout above; only a few extras are bespoke. */

/* The indicative/authoritative charge on the initial (submission) card, footer-left. */
.room-requests-rc-charge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* TLP-582: the single move-day card. A dashed edge marks it as the fulfilment card;
   clicking opens the checklist modal. */
.room-requests-rc-movecard {
    border-style: dashed;
    cursor: pointer;
}

/* A completed room change stays on the board, marked done (solid success edge). */
.room-requests-rc-complete {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-light);
}

/* Guest name beside the room on the room-change card top row: lighter + smaller,
   truncates before the status badge (which stays pinned right). The room keeps its
   natural width; only the guest shrinks. */
.room-requests-rc-card .room-requests-lc-room {
    flex: 0 0 auto;
}
.room-requests-rc-cardguest {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.room-requests-rc-cardguest::before {
    content: "\00b7";
    margin-right: var(--space-1);
    color: var(--text-muted);
}
.room-requests-rc-card .room-requests-lc-card-top > :last-child {
    margin-left: auto;
}

/* TLP-582: the move card states the physical move as from-room -> to-room. The
   room numbers lead (operational); the type labels sit beneath as context. */
.room-requests-rc-fromto {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
}
.room-requests-rc-fromto-room {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.room-requests-rc-fromto-arrow {
    color: var(--text-muted);
}
.room-requests-rc-fromto-tbd {
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    font-style: italic;
}
.room-requests-rc-fromto-types {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* The read-only fulfilment checklist mirrored onto the move card -- tighter than the
   modal list, divided from the header by a hairline. Each step is a compact
   tick/clock + title that truncates to the narrow day column (the full who/when
   detail stays in the fulfilment modal). */
.room-requests-cardsteps {
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-1) solid var(--border-subtle);
}
.room-requests-cardstep {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.room-requests-cardstep.is-done {
    color: var(--text-primary);
}
.room-requests-cardstep-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Move-day fulfilment modal (4-step checklist + payment) ---- */

.room-requests-fulfil {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.room-requests-fulfil-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* TLP-583: the fulfilment checklist is a free-tick checkbox list. Each step is a
   Checkbox atom (done = checked+disabled). For a done step the captured note + who/when
   sit on a muted second line, indented under the checkbox label. */
.room-requests-fulfil-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.room-requests-fulfil-step-detail {
    margin-left: var(--space-6);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.room-requests-fulfil-pay {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* Late Checkout charge block in the modal helper rail: the selected-time charge
   (blue box), or the manual room-type picker fallback. */
.room-requests-lc-price {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.room-requests-lc-price-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Payment-capture row: Paid + Amount + How as standard FormFields. Paid is
   auto-width; amount + method share the rest. Bottoms align with the inputs. */
.room-requests-lc-pay {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: var(--space-3);
    align-items: end;
}

/* Card footer (third row): payment status (Paid/Unpaid) bottom-left, edit/delete
   actions bottom-right. */
.room-requests-lc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    .room-requests-daycols { flex-direction: column; }
}