/* FactSheet.css - Module-specific styles for the hotel fact sheet */

/* Subsections container inside a section */
.fs-subsections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Field form layout inside a subsection */
.fs-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .fs-fields {
        grid-template-columns: 1fr;
    }
}

/* Collection action bar below table */
.fs-collection-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
}

/* Hidden helper element for add-item subsection ID */
.fs-hidden {
    display: none;
}

/* ========================================
   VISIBILITY INDICATORS
   ======================================== */

.fs-field-with-visibility {
    position: relative;
}

.fs-field-restricted {
    border-left: 2px solid var(--color-warning);
    padding-left: var(--space-2);
}

.fs-field-overridden {
    border-left: 2px solid var(--color-info);
    padding-left: var(--space-2);
}

.fs-vis-toggle,
.fs-vis-indicator {
    position: absolute;
    top: var(--space-0_5);
    right: var(--space-0_5);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-0_5);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.fs-vis-indicator {
    cursor: default;
}

.fs-vis-toggle:hover {
    background: var(--bg-layer-2);
}

.fs-vis-restricted {
    color: var(--text-muted);
}

.fs-vis-public {
    color: var(--color-info);
}

/* Opera room type code picker */
.fs-opera-codes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fs-opera-selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: var(--space-8);
    padding: var(--space-2);
    background: var(--bg-layer-1);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
}

.fs-opera-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-info-bg, var(--bg-layer-2));
    color: var(--text-primary);
    border-radius: var(--border-radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
}

.fs-opera-tag-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1;
}

.fs-opera-tag-remove:hover {
    color: var(--color-error);
}

.fs-opera-empty {
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: var(--space-1);
}

.fs-opera-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    max-height: 160px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.fs-opera-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-layer-1);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    font-weight: 500;
    color: var(--text-primary);
}

.fs-opera-option:hover {
    background: var(--bg-layer-2);
    border-color: var(--color-info);
}

.fs-opera-option-name {
    color: var(--text-muted);
    font-weight: 400;
}

.fs-opera-loading {
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: var(--space-2);
}

/* What adding a row to this collection actually creates (TLP-1010). The wrapper owns
   the space between the note and the content; the note carries no margin of its own. */
.fs-subsection-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fs-subsection-note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--line-height-relaxed);
}

/* ===========================================================================
   SUB-TABS -- Venues & Facilities | Local Area & Concierge | Knowledge & FAQs

   The host completes the fill chain itself (PoliciesRules / Oversight precedent):
   the sub-tab row is pinned, the body is the only scroller, and a sub-tab that
   renders ONE panel is promoted to fill that body so the panel keeps its own
   sticky header and scrolls its ROWS rather than the page. Panel.css owns the
   scroll contract itself -- nothing here redeclares .section-content.
   =========================================================================== */

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

/* Pinned row: sub-tab nav left, the active sub-tab's Save right. The old sticky
   "Hotel Profile" banner is gone -- it repeated the tab's own name and put Save
   inside the scrolling area, where it scrolled out of reach. */
.fs-subtab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

.fs-subtabs {
    display: flex;
}

.fs-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.fs-subtab-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* The one-panel promotion. Knowledge renders a SINGLE Panel, so it fills the body
   and only its list scrolls. The accordion sub-tabs render a stack instead and
   keep the body as their scroller, which is right for a list of collapsibles. */
.fs-subtab-body > .dashboard-section:only-child {
    flex: 1;
    min-height: 0;
}

/* ===========================================================================
   KNOWLEDGE & FAQS -- content only. The kind switch, the search and the Add
   button are the Panel's own controls bar; there is no module chrome here.
   =========================================================================== */

/* The answer is prose the hotel wrote. Preserve its line breaks -- a list of
   distances typed as separate lines must not collapse into one paragraph. */
.kn-answer {
    white-space: pre-wrap;
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

.kn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}