/* History.css - Module container, sub-tab layouts, booking/request result styles
 *
 * Sub-tabs: Bookings (filter panel + expandable results), Requests (filter panel + expandable results).
 * Both use Variant 2 (independent layouts) -- sub-tab switch calls inherited TabModule.render() which rebuilds.
 */

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

.history-module {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.history-module > .vertical-stack {
    flex: 1;
    min-height: 0;
}

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

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

/* ===================
   FILTER-ONLY PANELS: No divider, no empty content space
   =================== */

.history-request-filters .section-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

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

.history-booking-filters .section-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ===================
   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 FILTERS: filter-only panel
   =================== */

.history-complaint-filters .section-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* (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;
}