/* Approvals.css -- Front Office Approvals (decision surface for guest/operator
   Late Checkout + Room Change requests). 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. */

.approvals-module {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
    min-height: 0;
}

/* Scroll region below the sub-tab bar -- the request list scrolls within it. */
.approvals-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Sub-tab bar: SegmentedControl (left) + Export/date/refresh actions (right). */
.approvals-sub-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
}

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

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

/* Lift each request card off the panel background. The base ExpandablePanel is
   flat (subtle border, no shadow) and blends in here, so reuse the Card /
   MetricCard elevation precedent: a firmer border + resting shadow + hover lift. */
.expandable-panel.approvals-row {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-200) var(--easing-out);
}

.expandable-panel.approvals-row:hover {
    box-shadow: var(--shadow-md);
}

/* Expanded request detail -- compact 3-col identity grid. */
.approvals-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.approvals-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1) var(--space-4);
}

.approvals-detail-cell {
    min-width: 0;
}

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

/* Decision area -- separated from identity with a subtle top rule. */
.approvals-detail-section {
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

@media (max-width: 900px) {
    .approvals-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .approvals-detail-grid { grid-template-columns: 1fr; }
}

/* Inline grant editor (late checkout). Built from molecules (DetailRow,
   SegmentedControl, FormField) -- they style themselves; only the column flow
   and the Price|Comment pairing live here. */
.approvals-grant {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Price + Comment side by side -- Price is just a number (narrow), Comment
   takes the rest. */
.approvals-grant-fields {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
}

/* The default grant has no tier row above it, so its price stepper sits alone in
   the first column and needs room for the minus/value/plus plus its help line.
   Late checkout keeps the tighter 130px because its price reads under the tier
   control that already sets the width. */
.approvals-grant-fields-generic {
    grid-template-columns: 190px minmax(0, 1fr);
}

/* A compact row of pickers, rather than the two-column grid above. The room-change
   move row (-move) carries move day + room type + room number + comment; TLP-1104's
   late-checkout room pair (-rooms) carries just the two room pickers. */
.approvals-grant-fields-move,
.approvals-grant-fields-rooms {
    display: flex;
    flex-wrap: wrap;
}
.approvals-grant-fields-move > *,
.approvals-grant-fields-rooms > * {
    flex: 0 0 160px;
    min-width: 0;
}
/* ONLY the move row ends in a comment, and a comment should take the rest of the
   line. The room pair ends in a room NUMBER, so nothing stretches there -- a 4-digit
   room number in a field a thousand pixels wide is what this rule prevents. */
.approvals-grant-fields-move > *:last-child {
    flex: 1 1 220px;
}

/* Payment + actions share the bottom row: payment left, buttons pushed right. */
.approvals-grant-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.approvals-grant-footer .detail-row {
    width: auto;
}

.approvals-grant-actions {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 600px) {
    .approvals-grant-fields { grid-template-columns: 1fr; }
}