/* LuxuryTouches.css -- scoped layout for the Luxury Touches module (wave 1).
   Sub-tab nav uses SegmentedControl; surfaces use Panel / DataTable / Modal /
   FormField / Badge / EmptyState. Only the bespoke layouts the atoms do not
   cover live here, and every selector below has an emitter in the view files
   (LuxuryTouchesView / ListPreparationView / GesturesView / ReasonModal).
   Tokens only; gap-only spacing; warm beige palette. Canonical refs:
   Controls.css (modal form), Calendar.css (stepper), PoliciesRules.css (editors).
*/

/* -- Module shell + sub-tab nav (PoliciesRules pattern) ----------------- */

/* The module wrapper this file used to style is retired: the sub-tab bar and the panel
   are siblings on the page now, so the stack owns the gap and the platform one-panel
   rule (Panel.css) gives the panel the tab height. */

.luxury-touches-sub-tabs {
    display: flex;
}

/* Empty-state action button under an EmptyState (both sub-tabs reuse this). */
.luxury-touches-empty-action {
    display: flex;
    justify-content: center;
    padding-top: var(--space-3);
}

/* -- List Preparation: DataTable cell content -------------------------- */
/* The instance list renders via the DataTable organism; only the bespoke
   cell spans need styling (target date, gesture-items summary). */

.luxury-touches-target {
    font-size: var(--text-sm);
    color: var(--text-body);
    white-space: nowrap;
}

/* Checked-item summary in the Gesture column. */
.luxury-touches-items-summary {
    font-size: var(--text-sm);
    color: var(--text-body);
}

.luxury-touches-items-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Dash / "No items yet." placeholder (table cell + modal checklist). */
.luxury-touches-items-empty {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* -- List Preparation: edit-gesture modal body ------------------------- */
/* Modal organism has no body gap; the form provides its own vertical rhythm.
   Mirrors the Controls .ctrl-modal-form column rhythm. */

.luxury-touches-gesture-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Two/three field rows: auto-fit responsive columns (Controls .ctrl-form-row).
   Shared by the gesture-form (Room + Target date) and the reason modal. */
.luxury-touches-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

/* Default-item checklist: a labelled stack of Checkbox rows + an add composer. */
.luxury-touches-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.luxury-touches-checklist-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.luxury-touches-checklist-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.luxury-touches-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Inline composer: free-text input + Add button on one line. */
.luxury-touches-item-adder {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.luxury-touches-item-adder .input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* -- Gestures catalogue: bespoke DataTable cell content ---------------- */
/* The catalogue renders via the DataTable organism; only the multi-line cells
   (reason identity, population/fires captions, match summary) need layout. */

/* Reason cell: label stacked over its muted id. */
.luxury-touches-reason {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
}

.luxury-touches-reason__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.luxury-touches-reason__id {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Generic stacked cell: a Badge / value over an optional muted sub-line. */
.luxury-touches-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    align-items: flex-start;
    font-size: var(--text-sm);
    color: var(--text-body);
}

.luxury-touches-cell__sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.luxury-touches-cell__match {
    font-size: var(--text-xs);
    color: var(--text-body);
}

.luxury-touches-cell__muted {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* -- Reason modal: form layout (Controls .ctrl-modal-form mirror) ------ */

.luxury-touches-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.luxury-touches-section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* -- Reason modal: default-gesture editor ------------------------------ */
/* Segment-keyed reasons render via SlicedPlane (self-styled); flat reasons use
   the editable item list below: rows with a remove action + an add composer. */

.luxury-touches-gesture-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.luxury-touches-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.luxury-touches-items__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
}

.luxury-touches-items__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--text-body);
}

.luxury-touches-items__remove {
    flex: 0 0 auto;
}

.luxury-touches-items__empty {
    display: flex;
}

/* Inline composer: free-text input + Add item button on one line. */
.luxury-touches-items__add {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.luxury-touches-items__add .input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* -- Responsive ------------------------------------------------------- */

@media (max-width: 768px) {
    .luxury-touches-form-row {
        grid-template-columns: 1fr;
    }
}