/* ─────────────────────────────────────────────────────────
   OASIS / WQ Page CSS – Final drop-in
   - Uses :root width vars for columns
   - Makes ALL columns line up to the same height
   - Single-item columns expand to match tallest column
   - Multi-item columns keep compact items, with one list as the “filler”
   - data-area width matches controls-bar
   ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   GLOBAL DEFAULT COLUMN WIDTHS
   ───────────────────────────────────────────────────────── */
:root {
    --wq-col-1: 180px; /* Measure */
    --wq-col-2: 120px; /* Geo */
    --wq-col-3: 70px; /* Time */
    --wq-col-4: 200px; /* Cause / main list */
    --wq-col-5: 160px; /* Age/Sex */
    --wq-col-6: 220px; /* Race/Eth */
    --wq-col-7: 240px; /* Edu/SES */
    --wq-col-8: 190px; /* Buttons */
    --wq-gap: .35rem;
}

/* ─────────────────────────────────────────────────────────
   Page header & body
   ───────────────────────────────────────────────────────── */
body {
    background: #336699;
}

.page-header {
    background: #336699;
    color: #00E947;
    padding: .5rem;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
}

/* ─────────────────────────────────────────────────────────
   Controls bar (default 8-column layout)
   ───────────────────────────────────────────────────────── */
.controls-bar {
    display: grid;
    grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7) var(--wq-col-8);
    gap: var(--wq-gap);
    padding: .2rem;
    margin-bottom: .5rem;
    align-items: stretch;
    background: #336699;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 5px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
}

    .control-item label {
        margin: 0;
        font-size: .85rem;
        color: #1a5d8c;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .control-item select {
        width: 100%;
        font-size: 10px;
        min-height: 0;
        box-sizing: border-box;
    }

/* Support both hyphen types in markup */
.label-row,
.label‐row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
}

label.stratify {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: #1a5d8c;
    font-weight: 600;
}

    label.stratify input {
        margin: 0;
    }

/* ─────────────────────────────────────────────────────────
   Multi-select behavior inside controls bar
   ───────────────────────────────────────────────────────── */
.controls-bar select[multiple] {
    height: auto;
    min-height: 2.4em;
    flex: 1 1 auto;
    padding: 4px;
    margin: 0;
    box-sizing: border-box;
    padding-bottom: 0;
    margin-bottom: 0;
    vertical-align: bottom;
}

/* Size-based heights elsewhere on the page (NOT inside controls-bar) */
select[multiple][size="2"] {
    height: calc(1.5em * 2 + 12px);
}

select[multiple][size="3"] {
    height: calc(1.5em * 3 + 12px);
}

select[multiple][size="4"] {
    height: calc(1.5em * 4 + 12px);
}

select[multiple][size="5"] {
    height: calc(1.5em * 5 + 12px);
}

select[multiple][size="6"] {
    height: calc(1.5em * 6 + 12px);
}

select[multiple][size="7"] {
    height: calc(1.5em * 7 + 12px);
}

select[multiple][size="8"] {
    height: calc(1.5em * 8 + 12px);
}

/* Helper */
.fill-height {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

/* ─────────────────────────────────────────────────────────
   DEFAULT height alignment – Mortality / most pages
   ───────────────────────────────────────────────────────── */
body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(1) .control-item {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(1) #lstMeasure {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(2) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(2) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(2) #lstGeo {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(3) .control-item {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(3) #lstTime {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(4) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(4) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(4) #lst1 {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(5) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(5) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(5) #lstAge {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(5) #lstSex {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(6) .control-item:nth-child(1) {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(6) #lstRace {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(6) .control-item:nth-child(2) {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(7) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(7) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root:not([data-wq-page="birth"]):not([data-wq-page="ppor"])) .controls-bar > .column:nth-child(7) #lstSES {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

/* ─────────────────────────────────────────────────────────
   Birth / PPOR layout
   ───────────────────────────────────────────────────────── */
body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(1) .control-item,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(1) .control-item {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(1) #lstMeasure,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(1) #lstMeasure {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(2) .control-item:nth-child(1),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(2) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(2) .control-item:nth-child(2),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(2) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(2) #lstGeo,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(2) #lstGeo {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(3) .control-item,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(3) .control-item {
    flex: 1;
    min-height: 0;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(3) #lstTime,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(3) #lstTime {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(1),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(2),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(4) #lstAge,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(4) #lstAge {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(3),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(4) .control-item:nth-child(3) {
    flex: 0 0 auto;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(5) .control-item:nth-child(1),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(5) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(5) .control-item:nth-child(2),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(5) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(5) #lstPayor,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(5) #lstPayor {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(6) .control-item:nth-child(1),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(6) .control-item:nth-child(1) {
    flex: 0 0 auto;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(6) .control-item:nth-child(2),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(6) .control-item:nth-child(2) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(6) #lstSES,
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(6) #lstSES {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
}

/* Buttons column stretch */
.controls-bar > .column.buttons,
.column.buttons,
body:has(#wq-root[data-wq-page="birth"]) .controls-bar > .column:nth-child(7),
body:has(#wq-root[data-wq-page="ppor"]) .controls-bar > .column:nth-child(7) {
    align-self: stretch;
    padding-top: .8rem;
    gap: 2px;
    background: #369;
    width: fit-content;
}

/* Gray-out disabled controls */
.control-item.disabled label,
.control-item.disabled select {
    opacity: .5;
}

/* Responsive */
@media (max-width: 980px) {
    .controls-bar {
        grid-template-columns: 1fr;
        width: 100%;
        overflow-x: visible;
    }

    .column.buttons {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────── */
.btn-link {
    height: 23px;
    background-color: #00299E;
    /*color: #AEC7F4;*/
    color: white;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    border: 1px solid;
    border-color: #F9F4EB #918C82 #918C82 #F9F4EB;
    box-shadow: 1px 0 0 #918C82, 0 1px 0 #918C82;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: .3s;
}

    .btn-link:hover {
        background-color: white;
        color: black;
        border: 1px solid #918C82;
    }

.submit {
    background-color: #D93000;
    /*color: #FFD0B1;*/
    color: white;
    font-weight: bold;
    font-size: 15px;
}

.buttonsOrder {
    margin-bottom: 10px;
    display: grid;
}

.buttons .ds-trigger {
    width: 158px;
    height: 23px;
    background-color: #00299E;
    /*color: rgb(174, 199, 244);*/
    color: white;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    border: 1px solid;
    border-color: rgb(249, 244, 235) rgb(145, 140, 130) rgb(145, 140, 130) rgb(249, 244, 235);
    box-shadow: rgb(145, 140, 130) 1px 0 0, rgb(145, 140, 130) 0 1px 0;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: .3s;
}

    .ds-trigger:hover,
    .buttons .ds-trigger:hover {
        background-color: white;
        color: black;
        border: 1px solid #918C82;
    }

    .buttons .ds-trigger:hover {
        filter: brightness(.96);
    }

.hidden {
    display: none !important;
}

#btnExport2 {
    width: 100px;
}

/* ─────────────────────────────────────────────────────────
   Data area & table
   ───────────────────────────────────────────────────────── */
.data-area {
    padding: 1rem;
    background: white;
    width: fit-content;
}

#dataTable {
    display: block;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

    #dataTable table {
        width: max-content;
        border-collapse: collapse;
    }

    #dataTable td {
        border: 1px solid #CCC;
        padding: 2px 3px;
        white-space: nowrap;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
    }

    #dataTable th {
        border: 1px solid #CCC;
        padding: 2px 3px;
        white-space: nowrap;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        text-align: center;
    }

    #dataTable thead tr:nth-child(2) th .th-clamp {
        max-width: 170px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    #dataTable tbody tr:nth-child(odd) {
        background: #f5f5f5;
    }

    #dataTable tbody tr:nth-child(even) {
        background: #d5d5d5;
    }

    #dataTable tbody tr:hover > th,
    #dataTable tbody tr:hover > td,
    #dataTable tbody tr:hover > * {
        background-color: #FFFF00 !important;
    }

    #dataTable tbody tr.agg-row td {
        font-weight: bold;
    }

    #dataTable thead th {
        text-align: center;
    }

    #dataTable tbody td {
        text-align: right;
    }

        #dataTable tbody td.row-dim,
        #dataTable tbody td.geo-cell,
        #dataTable tbody tr td:first-child {
            text-align: left;
            background: white;
        }

.data-title {
    font-weight: bold;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: .4rem;
}

/* Empty state panel */
#dataTable.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    overflow: hidden;
    width: 100%;
}

.empty-box {
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 16px 18px;
    background: #f8fafc;
}

.empty-title {
    color: #336699;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 400;
    margin: 4px 0 10px;
}

.empty-subtitle {
    color: #475569;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.empty-tips {
    text-align: left;
    color: #475569;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 8px 0;
}

.empty-cta {
    border: 1px solid #3b82f6;
    background: #3b82f6;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

    .empty-cta:hover {
        filter: brightness(0.95);
    }

/* ─────────────────────────────────────────────────────────
   County hover image tooltip
   ───────────────────────────────────────────────────────── */
#county-tooltip {
    position: fixed;
    display: none;
    border: 1px solid #ccc;
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
}

    #county-tooltip img {
        max-width: 150px;
        height: auto;
        display: block;
    }

/* ─────────────────────────────────────────────────────────
   Info icons and popover
   ───────────────────────────────────────────────────────── */
.info-icon {
    display: inline-flex;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #336699;
    color: #336699;
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    cursor: default;
    vertical-align: middle;
}

    .info-icon::after {
        content: '?';
        line-height: 1;
    }

    .info-icon:hover,
    .info-icon:focus {
        background: #e2e8f0;
        outline: none;
    }

#info-pop {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    background: #E7F2F8;
    color: #000;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
    display: none;
    font-family: Arial, Helvetica, sans-serif;
}

    #info-pop .ip-title {
        font-weight: 700;
        margin-bottom: 4px;
        font-size: 14px;
    }

    #info-pop .ip-body {
        font-size: 12px;
        line-height: 1.35;
    }

    #info-pop .ip-foot {
        font-size: 12px;
        opacity: .7;
        margin-top: 6px;
    }

    #info-pop::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: #E7F2F8;
        transform: rotate(35deg);
        top: -5px;
        left: 13px;
    }

    #info-pop.is-image {
        max-width: none;
        padding: 4px;
        display: inline-block;
    }

        #info-pop.is-image .ip-body {
            padding: 0;
        }

        #info-pop.is-image .info-tooltip-image {
            display: block;
            height: auto;
            max-width: 700px;
        }

/* ─────────────────────────────────────────────────────────
   Feedback widget
   ───────────────────────────────────────────────────────── */
.feedback-box {
    border: 1px solid #d4dbe5;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px 14px;
    margin-top: 8px;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1232px;
}

.fb-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.fb-grid {
    display: grid;
    grid-template-columns: 340px 420px;
    column-gap: 12px;
    align-items: start;
    margin-left: 1.5em;
    margin-bottom: 10px;
}

.fb-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-q {
    font-size: .92rem;
    font-weight: 600;
    color: #334155;
}

.fb-opts label {
    margin-right: 10px;
    font-weight: 500;
    color: #334155;
}

#fb_comments {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
}

    #fb_comments:focus::placeholder {
        color: transparent;
    }

.fb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

    .fb-actions button {
        padding: 6px 12px;
        border: none;
        background: #336699;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
    }

        .fb-actions button.ghost {
            background: #e5e7eb;
            color: #111827;
        }

        .fb-actions button:hover {
            filter: brightness(0.95);
        }

.fb-status {
    margin-left: auto;
    font-size: .9rem;
    color: #155e75;
}

@media (max-width: 860px) {
    .feedback-box {
        max-width: 100%;
    }

    .fb-grid {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}

/* ─────────────────────────────────────────────────────────
   Modal styles
   ───────────────────────────────────────────────────────── */
.ds-modal[aria-hidden="true"] {
    display: none;
}

.ds-modal[aria-hidden="false"] {
    display: block;
}

.ds-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 10000;
}

.ds-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 10001;
    overflow: hidden;
    font-size: 14px;
}

.ds-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
}

.ds-close {
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ds-body {
    padding: 12px;
    display: grid;
    gap: 8px;
}

    .ds-body label {
        display: flex;
        gap: 8px;
        align-items: center;
        cursor: pointer;
    }

.ds-foot {
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #e2e8f0;
}

    .ds-foot button {
        padding: .4rem .8rem;
        border-radius: 4px;
        border: 0;
        cursor: pointer;
    }

#dsSubmit {
    background: #336699;
    color: #fff;
}

.ds-foot .ds-close {
    background: #e2e8f0;
}

/* ─────────────────────────────────────────────────────────
   Footer links
   ───────────────────────────────────────────────────────── */
.footer:link {
    color: white;
}

.footer:visited {
    color: white;
    text-decoration: none;
}

.footer:hover {
    /*color: red;*/
    text-decoration: underline;
}

.footer:active {
    color: darkred;
}

.oasis-footer .footer-version {
    float: right;
    font-weight: 600;
    letter-spacing: .2px;
}

@media (max-width: 640px) {
    .oasis-footer .footer-version {
        float: none;
        display: block;
        margin-top: 6px;
    }
}

/* Misc */
.reportingIssues {
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 0;
    margin-top: 5px;
    margin-left: 5px;
}

.footNoteKDI {
    font-size: .7em;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

.fb-thanks {
    padding: 10px 0;
    font-weight: 600;
    color: #e9e9ed;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

.kdi {
    font-family: Arial, Helvetica, sans-serif;
}

/* Raised stacking when expanded */
#lst1.lst1-expanded {
    position: relative;
    z-index: 10002;
}

.overflow-visible {
    overflow: visible !important;
}

.control-item.overlay-open {
    position: relative;
    z-index: 10001;
}

/* Selected options */
option:checked,
select option:checked {
    background: #3297fd !important;
    color: white !important;
}

/* Scrollbar styling */
select[multiple] {
    scrollbar-width: auto;
}

    select[multiple]::-webkit-scrollbar {
        width: 16px;
    }

    select[multiple]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 8px;
    }

    select[multiple]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 8px;
        border: 3px solid #f1f1f1;
        min-height: 30px;
    }

        select[multiple]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

    select[multiple]::-webkit-scrollbar-button {
        display: none;
    }

#lst1 option.cause-title {
    font-weight: bold;
}

#lst1 option.cause-child {
    padding-left: 16px;
}

#feedbackArea {
    display: none;
}

/* ─────────────────────────────────────────────────────────
   DISABLED CONTROL OVERLAY
   ───────────────────────────────────────────────────────── */
.control-item.disabled {
    position: relative;
    cursor: not-allowed;
}

    .control-item.disabled::after {
        content: "🚫";
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -35%);
        font-size: 22px;
        line-height: 1;
        opacity: .50;
        pointer-events: none;
        z-index: 3;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    }

    .control-item.disabled::before {
        content: "";
        position: absolute;
        inset: 26px 0 0 0;
        background: rgba(255, 255, 255, .35);
        z-index: 2;
        pointer-events: auto;
    }

    .control-item.disabled select {
        z-index: 1;
    }

/* ─────────────────────────────────────────────────────────
   PAGE-SCOPED WIDTH OVERRIDES
   ───────────────────────────────────────────────────────── */
body:has(#wq-root[data-wq-page="mortality"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 200px;
    --wq-col-5: 160px;
    --wq-col-6: 220px;
    --wq-col-7: 240px;
    --wq-col-8: 190px;
}

    body:has(#wq-root[data-wq-page="mortality"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7) var(--wq-col-8);
    }

body:has(#wq-root[data-wq-page="fetaldeath"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 150px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-7: 190px;
}

    body:has(#wq-root[data-wq-page="fetaldeath"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7);
    }

body:has(#wq-root[data-wq-page="itop"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 150px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-7: 190px;
}

    body:has(#wq-root[data-wq-page="itop"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7);
    }

body:has(#wq-root[data-wq-page="pregnancy"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 150px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-7: 190px;
}

    body:has(#wq-root[data-wq-page="pregnancy"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7);
    }

body:has(#wq-root[data-wq-page="infantmortality"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 200px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-7: 190px;
}

    body:has(#wq-root[data-wq-page="infantmortality"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7);
    }

body:has(#wq-root[data-wq-page="population"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 150px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-7: 190px;
}

    body:has(#wq-root[data-wq-page="population"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7);
    }

body:has(#wq-root[data-wq-page="birth"]),
body:has(#wq-root[data-wq-page="ppor"]) {
    --wq-col-1: 255px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 150px;
    --wq-col-5: 216px;
    --wq-col-6: 240px;
    --wq-col-8: 190px;
}

    body:has(#wq-root[data-wq-page="birth"]) .controls-bar,
    body:has(#wq-root[data-wq-page="ppor"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-8);
    }

body:has(#wq-root[data-wq-page="er"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 200px;
    --wq-col-5: 160px;
    --wq-col-6: 220px;
    --wq-col-7: 240px;
    --wq-col-8: 190px;
}

    body:has(#wq-root[data-wq-page="er"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7) var(--wq-col-8);
    }

body:has(#wq-root[data-wq-page="discharge"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 200px;
    --wq-col-5: 160px;
    --wq-col-6: 220px;
    --wq-col-7: 240px;
    --wq-col-8: 190px;
}

    body:has(#wq-root[data-wq-page="discharge"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7) var(--wq-col-8);
    }

body:has(#wq-root[data-wq-page="acsc"]) {
    --wq-col-1: 180px;
    --wq-col-2: 120px;
    --wq-col-3: 70px;
    --wq-col-4: 220px;
    --wq-col-5: 160px;
    --wq-col-6: 220px;
    --wq-col-7: 240px;
    --wq-col-8: 190px;
}

    body:has(#wq-root[data-wq-page="acsc"]) .controls-bar {
        grid-template-columns: var(--wq-col-1) var(--wq-col-2) var(--wq-col-3) var(--wq-col-4) var(--wq-col-5) var(--wq-col-6) var(--wq-col-7) var(--wq-col-8);
    }

/* ─────────────────────────────────────────────────────────
   WQ loading overlay
   ───────────────────────────────────────────────────────── */
#wqLoading.wq-loading {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    z-index: 200000;
}

    #wqLoading.wq-loading.is-open {
        display: flex;
    }

#wqLoading .wq-loading__panel {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    min-width: 280px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

#wqLoading .wq-loading__title {
    font-weight: 700;
    margin-top: 10px;
    color: #1a5d8c;
}

#wqLoading .wq-loading__sub {
    margin-top: 4px;
    font-size: 12px;
    color: #334155;
}

#wqLoading .wq-loading__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid rgba(26, 93, 140, .25);
    border-top-color: rgba(26, 93, 140, 1);
    animation: wqspin .8s linear infinite;
    margin: 0 auto;
}

@keyframes wqspin {
    to {
        transform: rotate(360deg);
    }
}

/* Visual cue for options disabled by STD measure rules */
option.wq-option-disabled-rule {
    text-decoration: line-through;
    color: #b00020;
}

.popwelcomescreen {
    font-size: 90%;
}