/* =========================================================
   style_section.css — updated for Option B (Settings modal)
   Goal:
   - Keep existing page layout behavior
   - Override .section/.question behavior inside #settingsModal only
   ========================================================= */

/* ---------------- Base (unchanged for pages) ---------------- */

.section{
    background: var(--element);
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--element_shadow_dark);
    padding: var(--medium-padding);
    margin-bottom: var(--medium-padding);
    margin-left: var(--large-padding);
    margin-right: var(--large-padding); /* symmetric with left (D4) */
}

/* ─────────────────────────────────────────────
   Section card header band (D5)
   The h1 inside each .section is pulled flush to
   the card top/sides via negative margin, then
   restyled as a labeling band — not a page title.
   No PHP files touched: pure CSS override.
   ───────────────────────────────────────────── */
.section > h1 {
    /* pull flush to card edges, override the global h1 box */
    margin: calc(-1 * var(--medium-padding))
            calc(-1 * var(--medium-padding))
            var(--medium-padding)
            calc(-1 * var(--medium-padding));
    padding: 10px var(--medium-padding);

    /* round only the top corners to match the card */
    border-radius: 10px 10px 0 0;

    /* subtle tint — inherits the card's own background feel */
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);

    /* typography: kill the global serif/italic/centered h1 style */
    font-family: var(--font-main);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    font-style: normal;
    text-align: left;
    color: var(--Default_Text);

    /* reset global h1 spacing */
    line-height: 1.3;
}

.section div {
    min-height: 2em;
    display:flex;
}

.section.list-container div {
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    max-height: 600em;
    clear: both; /* Ensure it doesn't get affected by floating elements */
    margin-bottom: var(--small-padding);
}

.section input:hover, select:hover, .modal-content input:hover {
    border-color: var(--navy);
}

.section .large-textarea {
    width: 100%;
    max-width: 100%;
    height: 120px;
    padding: var(--small-padding);
    box-sizing: border-box;
    resize: vertical;
    margin-bottom: var(--small-padding);
}

section.div.question, .question  {
    min-height: 1.5em;
    display: flex;
    white-space: nowrap; 
    overflow: show;
    margin-top: .25em;
}

section.div.questionl, .questionl  {
    display: flex;
    white-space: nowrap; 
    overflow: show;
}

.question label {
    display: block;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    max-width: 100%;
}

/* ---------------- Option B: inside Settings modal ----------------
   IMPORTANT:
   We scope overrides to #settingsModal so we don’t break other pages.
------------------------------------------------------------------ */

#settingsModal .section{
    /* remove the page left indent */
    margin-left: 0;
    /* better fit for modal content */
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* In modal, most wrappers should stack vertically */
#settingsModal .section div{
    display: block;
    min-height: 0;
}

/* Preserve flex only when you explicitly need it */
#settingsModal .section .inline-form{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Documents list: readable row layout */
#settingsModal .section .uploaded-docs li{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tables: keep native table layout */
#settingsModal .section .collab-summary-table{
    display: table;
    width: 100%;
    border-collapse: collapse;
}

#settingsModal .section .collab-summary-table tr{
    display: table-row;
}

/* Question blocks: allow wrapping and clean spacing */
#settingsModal .question{
    display: block;
    white-space: normal;
    margin-top: 0.75em;
    margin-bottom: 0.35em;
}

/* Make labels wrap naturally in the modal */
#settingsModal .question label{
    white-space: normal;
    display: block;
    margin-bottom: 0.35em;
}

/* Make form fields fill the content width in modal (but NOT submit/button/file) */
#settingsModal input:not([type="submit"]):not([type="button"]):not([type="file"]),
#settingsModal select,
#settingsModal textarea{
    width: 100%;
    box-sizing: border-box;
}

/* Reduce “double margins” coming from global input margins (if any) */
#settingsModal input,
#settingsModal select,
#settingsModal textarea{
    margin-left: 0;
}

/* Tables: keep real table layout; the right panel already scrolls */
#settingsModal table{
    width: 100%;
    border-collapse: collapse;
}

/* Optional: a bit of spacing consistency */
#settingsModal .section h1,
#settingsModal .section h2{
    margin-top: 0;
}

/* ---------------- Responsive base rules (kept) ---------------- */

@media screen and (max-width: 768px) {

    .section div {
        flex-direction: column;
        gap: 0.5em;
    }

    .section input,
    .section select,
    .section textarea {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .question {
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    .question label {
        margin-left: 0;
        margin-bottom: 0.5em;
    }

}