/* History.css - Sub-tab layouts and booking/request result styles
 *
 * Each sub-tab is ONE panel: the filters and the Search button are its header, the
 * expandable result rows are its body. The sub-tab bar is a SIBLING section above it,
 * never a wrapper around both -- that is what the one-panel rule in Panel.css keys off,
 * and it is why the header, the sub-tabs and the filter bar stay put while only the
 * results scroll.
 *
 * There is deliberately no module container here. `.history-module` used to hand-roll
 * its own fill chain (height:100% + a flex child), which put the panel out of reach of
 * the platform rule and made the whole tab scroll instead of the list.
 */

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

/* Two rows (TLP-1105): the group, then that group's sub-tabs. Stacked with a
   gap; the padding below separates the bar from the panel, as it always did. */
.history-sub-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
}

/* A wide row scrolls SIDEWAYS inside its own row and never wraps: the
   SegmentedControl's sliding highlight is sized to the whole control, so a
   wrapped row would paint the pill across every line. Same rule and same
   shape as the Set Up seat's selector rows, which carry seventeen outlets. */
.history-sub-tab-row {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
}

.history-sub-tab-row .segmented-control {
    flex: 0 0 auto;
}

/* ===================
   REQUEST FILTERS: 3-group grid layout (What | When | Where)
   =================== */

/* ===================
   BOOKING RESULT HEADERS
   Row layout + all chips come from the shared ExpandableRowHeader molecule.
   .hist-booking-name is kept (rendered as a raw slot) so the group-booking
   e2e can select guest names within a group.
   =================== */

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

/* ===================
   BOOKING GROUP WRAPPER
   =================== */

.hist-booking-group {
    border: var(--border-width-2) solid var(--color-warning);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2);
    background: var(--color-warning-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.hist-booking-group-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-warning-hover);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 var(--space-1);
}

/* ===================
   BOOKING EXPANDED DETAILS
   Field groups span the page via the shared FormGrid molecule (auto columns);
   wide content (special requests, dietary, notes, history) stacks full-width below.
   =================== */

/* Full-width content below the field groups (special requests, description, ...)
   renders as a labelled .hist-section block (spacing rule below) + body text. */

/* ===================
   NOTES SECTION
   =================== */

.hist-notes-section,
.hist-change-section,
.hist-tasks-section,
.hist-section {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.hist-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.hist-note-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    padding: var(--space-1) 0;
}

.hist-note-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.hist-note-text {
    font-size: var(--text-sm);
    color: var(--text-body);
}

.hist-empty-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

.hist-add-note {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}

.hist-add-note .input {
    flex: 1;
}

/* ===================
   CHANGE HISTORY SECTION
   =================== */

.hist-change-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    padding: var(--space-1) 0;
}

.hist-change-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.hist-change-detail {
    font-size: var(--text-xs);
    color: var(--text-body);
    font-family: var(--font-mono);
}

/* ===================
   REQUEST EXPANDED DETAILS
   (Request row headers render via the shared ExpandableRowHeader molecule.)
   =================== */

.hist-task-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}

.hist-task-dept {
    font-size: var(--text-xs);
    color: var(--text-muted);
    min-width: 100px;
}

.hist-task-title {
    flex: 1;
    color: var(--text-body);
}



/* (Complaint row headers render via the shared ExpandableRowHeader molecule.) */

/* ===================
   PRINT TABLE (rendered in print popup)
   =================== */

.hist-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.hist-print-table th,
.hist-print-table td {
    border: var(--border-width-1) solid var(--border-default);
    padding: var(--space-1) var(--space-2);
    text-align: left;
}

.hist-print-table th {
    background: var(--bg-layer-2);
    font-weight: 600;
}

/* ===================
   TASK TRAIL (TLP-1089)
   The Activity and Comments blocks are the Inbox's own markup from the shared
   task-trail renderer (their rules live in Tasks.css); this frame only stacks
   the two under the description with the section spacing every other block has.
   =================== */

.hist-trail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}