/* ===========================================================
   Criteria Engine – Responsive “App Style” Form + Table
   Version: 2025-09-17b (fix: always 1-column on mobile, tables scroll)
   ===========================================================
   Highlights:
   - Mobile: ALWAYS single-column form (no accidental 2 cols)
   - Desktop: cols-1..cols-6 apply only ≥ 640px
   - Tables (including Program Matrix) stay real tables on mobile
     with smooth horizontal scroll + sticky headers
   - No class names changed
   =========================================================== */

/* ---------- Root Tokens ---------- */
:root {
    --font-scale: 17px; /* Change once to scale whole UI */
    font-size: var(--font-scale);
    --c-bg: #ffffff;
    --c-bg-alt: #f5f5f5;
    --c-surface: #ffffff;
    --c-panel: #f8fafc;
    --c-border: #c8d0d7;
    --c-border-soft: #e5eaee;
    --c-border-strong: #aeb7c0;
    --c-text: #122028;
    --c-text-light: #51606b;
    --c-heading: #0d1b26;
    --c-accent: #1760cc;
    --c-accent-hover: #0e4ea8;
    --c-accent-bg: #e5efff;
    --c-danger: #d63030;
    --c-success: #128c4d;
    --c-warning: #ce8a00;
    --c-note-bg: #f2f8fc;
    --c-note-border: #c2d6e6;
    --c-table-head: #f1f4f7;
    --c-table-row-alt: #fafcfd;
    --c-radius-xs: 3px;
    --c-radius-sm: 5px;
    --c-radius: 8px;
    --c-radius-lg: 14px;
    --gap-1: .4rem;
    --gap-2: .65rem;
    --gap-3: .9rem;
    --gap-4: 1.2rem;
    --focus-ring: 0 0 0 3px color-mix(in srgb,var(--c-accent) 50%,transparent);
    --form-gap-x: 1rem;
    --form-gap-y: 1rem;
}

@media (max-width:420px) {
    :root {
        --font-scale: 16px;
    }
}

/* ---------- Shell ---------- */
.criteria-shell {
    background: var(--c-bg);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--c-radius-lg);
    padding: var(--gap-4) var(--gap-4) calc(var(--gap-4) - .4rem);
    max-width: 1500px;
    margin: 0 auto var(--gap-4);
    box-shadow: 0 3px 8px rgba(20,34,48,.08);
    transition: .25s;
}

    /* Optional App Mode */
    .criteria-shell.criteria-mobile-app {
       /* background: var(--c-bg-alt);*/
        border: none;
        box-shadow: none;
        padding: var(--gap-3) var(--gap-3) var(--gap-4);
        max-width: 100%;
    }

/* ---------- Section ---------- */
.criteria-section {
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--c-radius);
    padding: 1.05rem 1.05rem .95rem;
    margin-bottom: var(--gap-4);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    position: relative;
}

.criteria-shell.criteria-mobile-app .criteria-section {
    border: 1px solid #dbe1e6;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

/* ---------- Section Header ---------- */
.criteria-section-header {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: normal;
}

.criteria-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .25px;
    color: var(--c-heading);
    margin: 0;
    display: flex;
    gap: .55rem;
    align-items: baseline;
    line-height: 1.15;
}

.criteria-section-subdesc {
    font-size: .88rem;
    color: var(--c-text-light);
    letter-spacing: .25px;
    margin: 0;
}

.criteria-badge {
    background: var(--c-panel);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--c-radius-xs);
    padding: 3px 7px 2px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .55px;
    color: var(--c-text-light);
}

/* ---------- GRID (Mobile First) ----------
   Default: 1 column on all screens.
   Column classes become active only ≥ 640px.
   Supports both .criteria-section-grid and .criteria-grid containers.
------------------------------------------------ */
.criteria-section-grid,
.criteria-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--form-gap-y) var(--form-gap-x);
    align-items: start;
    width: 100%;
}

/* FORCE single column on mobile in case any other CSS tries to set 2+ cols */
@media (max-width:639.98px) {
    .criteria-section .criteria-section-grid,
    .criteria-section .criteria-grid {
        grid-template-columns: 1fr !important;
    }
    /* Spans collapse to 1 column on mobile */
    .criteria-section-grid .criteria-field[data-span],
    .criteria-grid .criteria-field[data-span] {
        grid-column: auto !important;
    }
}

.criteria-caption,
.criteria-note,
.criteria-composite,
.criteria-program-selector {
    grid-column: 1 / -1;
}

.criteria-field[data-span] {
    grid-column: auto;
}

/* --- Description above placement --- */
.criteria-field-description.field-desc-above {
    margin-top: -0.15rem;
    margin-bottom: -0.15rem;
    font-size: 0.75rem;
    line-height: 1.25;
}

.caption-desc {
    margin-top: .25rem;
    font-size: .78rem;
}

/* Table header inner structure (Header label mode) */
.criteria-th-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    min-width: 70px;
}

.criteria-badge--th {
    font-size: .58rem;
    padding: 2px 6px 2px;
    background: var(--c-panel);
    border: 1px solid var(--c-border-soft);
    color: var(--c-text-light);
    letter-spacing: .45px;
    border-radius: var(--c-radius-xs);
}

.criteria-th-title-block {
    display: block;
    line-height: 1.15;
}

.criteria-th-title {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-heading);
    line-height: 1.15;
    word-break: break-word;
}

.criteria-th-desc {
    font-size: .63rem;
    font-weight: 400;
    color: var(--c-text-light);
    line-height: 1.2;
    padding-right: .25rem;
    max-width: 260px;
    text-wrap: balance;
}

/* Minimal header (CellBelow mode) */
.criteria-th-minimal {
    font-size: .55rem;
    letter-spacing: .5px;
    display: inline-block;
}

.criteria-th-minimal-empty {
    display: inline-block;
    width: 6px;
    height: 6px;
}

/* Cell-below label block (CellBelow mode) */
.tbl-cell-label-block {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--c-border-soft);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.criteria-badge--cell {
    font-size: .52rem;
    background: var(--c-panel);
    border: 1px solid var(--c-border-soft);
    padding: 2px 5px 1px;
    border-radius: 4px;
    letter-spacing: .45px;
    color: var(--c-text-light);
    align-self: flex-start;
}

.tbl-cell-label-text {
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-heading);
    line-height: 1.15;
}

.tbl-cell-label-desc {
    font-size: .6rem;
    line-height: 1.15;
    color: var(--c-text-light);
    word-break: break-word;
}

/* ≥ 640px apply column classes (only desktop/tablet) */
@media (min-width:640px) {
    /* For .criteria-section-grid containers */
    .criteria-section.cols-1 .criteria-section-grid {
        grid-template-columns: repeat(1,minmax(0,1fr));
    }

    .criteria-section.cols-2 .criteria-section-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .criteria-section.cols-3 .criteria-section-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .criteria-section.cols-4 .criteria-section-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .criteria-section.cols-5 .criteria-section-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

    .criteria-section.cols-6 .criteria-section-grid {
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

    /* For .criteria-grid containers (alternate name) */
    .criteria-section.cols-1 .criteria-grid {
        grid-template-columns: repeat(1,minmax(0,1fr));
    }

    .criteria-section.cols-2 .criteria-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .criteria-section.cols-3 .criteria-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .criteria-section.cols-4 .criteria-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .criteria-section.cols-5 .criteria-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

    .criteria-section.cols-6 .criteria-grid {
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

    /* Forced column count via data attribute */
    .criteria-section[data-cols="1"] .criteria-section-grid,
    .criteria-section[data-cols="1"] .criteria-grid {
        grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    }

    .criteria-section[data-cols="2"] .criteria-section-grid,
    .criteria-section[data-cols="2"] .criteria-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .criteria-section[data-cols="3"] .criteria-section-grid,
    .criteria-section[data-cols="3"] .criteria-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }

    .criteria-section[data-cols="4"] .criteria-section-grid,
    .criteria-section[data-cols="4"] .criteria-grid {
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    }

    .criteria-section[data-cols="5"] .criteria-section-grid,
    .criteria-section[data-cols="5"] .criteria-grid {
        grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    }

    .criteria-section[data-cols="6"] .criteria-section-grid,
    .criteria-section[data-cols="6"] .criteria-grid {
        grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    }

    /* Optional flexible fill variants */
    .criteria-section.flex-cols.cols-3 .criteria-section-grid,
    .criteria-section.flex-cols.cols-3 .criteria-grid {
        grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    }

    .criteria-section.flex-cols.cols-4 .criteria-section-grid,
    .criteria-section.flex-cols.cols-4 .criteria-grid {
        grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
    }

    .criteria-field[data-span="2"] {
        grid-column: span 2;
    }

    .criteria-field[data-span="3"] {
        grid-column: span 3;
    }
}

/* Wider tuning */
@media (min-width:1100px) {
    .criteria-section.cols-4 .criteria-section-grid,
    .criteria-section.cols-4 .criteria-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

/* Legacy fallback */
@supports not (grid-template-columns:1fr) {
    .criteria-section-grid,
    .criteria-grid {
        display: flex;
        flex-wrap: wrap;
    }

        .criteria-section-grid > *,
        .criteria-grid > * {
            flex: 1 1 100%;
        }

    @media (min-width:640px) {
        .criteria-section.cols-2 .criteria-section-grid > *,
        .criteria-section.cols-2 .criteria-grid > * {
            flex: 1 1 50%;
        }

        .criteria-section.cols-3 .criteria-section-grid > *,
        .criteria-section.cols-3 .criteria-grid > * {
            flex: 1 1 33.333%;
        }

        .criteria-section.cols-4 .criteria-section-grid > *,
        .criteria-section.cols-4 .criteria-grid > * {
            flex: 1 1 25%;
        }
    }
}

/* ---------- Caption / Note ---------- */
.criteria-caption {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    margin: .1rem 0 .15rem;
    display: flex;
    gap: .55rem;
}

.criteria-note {
    background: var(--c-note-bg);
    border: 1px solid var(--c-note-border);
    padding: .68rem .86rem .7rem;
    border-radius: var(--c-radius-sm);
    font-size: .85rem;
    line-height: 1.35;
    position: relative;
    display: flex;
    gap: .7rem;
}

    .criteria-note::before {
        content: "NOTE";
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .65px;
        background: var(--c-accent);
        color: #fff;
        padding: 4px 7px 3px;
        border-radius: 4px;
        align-self: flex-start;
    }

/* ---------- Field (Card) ---------- */
.criteria-field {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-sm);
    padding: .85rem .95rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-height: 100px;
    transition: .16s;
    position: relative;
}

    .criteria-field:hover {
        border-color: var(--c-border-strong);
    }

    .criteria-field:focus-within {
        border-color: var(--c-accent);
        box-shadow: var(--focus-ring);
    }

.criteria-field--nolabel {
    min-height: auto;
    padding-top: .55rem;
}

.criteria-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

.criteria-field-label {
    font-size: .9rem;
    letter-spacing: .5px;
    font-weight: 600;
    text-transform: uppercase;
    color: #25313a;
    margin: 0;
}

.criteria-required {
    color: var(--c-danger);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    position: relative;
    cursor: help;
    margin-left: .3rem;
}

    .criteria-required::after {
        content: "Required";
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        background: var(--c-heading);
        color: #fff;
        font-size: .6rem;
        font-weight: 600;
        padding: 3px 7px 3px;
        border-radius: 4px;
        letter-spacing: .45px;
        opacity: 0;
        transform: translateY(5px);
        pointer-events: none;
        transition: .2s;
        white-space: nowrap;
    }

    .criteria-required:hover::after {
        opacity: 1;
        transform: translateY(0);
    }

/* ---------- Inputs ---------- */
.criteria-input-text,
.criteria-input-number,
.criteria-input-date,
.criteria-input-textarea,
.criteria-input-file {
    width: 100%;
    font-size: 1rem;
    padding: .1rem .8rem .6rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 5px;
    background: #fff;
    line-height: 1.35;
    outline: none;
    transition: .16s;
    font-family: inherit;
}

.criteria-input-textarea {
    resize: vertical;
    min-height: 96px;
}

    .criteria-input-text:focus,
    .criteria-input-number:focus,
    .criteria-input-date:focus,
    .criteria-input-textarea:focus,
    .criteria-input-file:focus {
        border-color: var(--c-accent);
        box-shadow: var(--focus-ring);
    }

/* Checkbox */
.criteria-checkbox-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.criteria-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Radio Group */
.criteria-radio-group {
    display: flex;
    flex-wrap:wrap;

    flex-direction: row;
    gap: .45rem;
    padding: .1rem 0 .15rem;
}

.criteria-radio-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.criteria-radio {
    width: 19px;
    height: 19px;
    cursor: pointer;
    accent-color: var(--c-accent);
}

.criteria-radio-label {
    font-size: .82rem;
    color: var(--c-text);
    line-height: 1.2;
}

/* Descriptions & Errors */
.criteria-field-description {
    font-size: .78rem;
    color: var(--c-text-light);
    line-height: 1.4;
    margin-top: -.15rem;
}

.criteria-field-errors {
    list-style: none;
    padding: 0;
    margin: .4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .criteria-field-errors li {
        background: #ffe5e5;
        border: 1px solid #ffb1b1;
        color: var(--c-danger);
        font-size: .66rem;
        padding: 4px 7px 3px;
        border-radius: 4px;
        line-height: 1.15;
    }

.criteria-field--invalid {
    border-color: var(--c-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb,var(--c-danger) 55%, transparent);
}

/* ---------- Composite Container ---------- */
.criteria-composite {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-sm);
    padding: 1.05rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    overflow: hidden;
}

.criteria-composite-title {
    background: var(--c-table-head);
    padding: .62rem .8rem .56rem;
    margin: 0 0 .6rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--c-text-light);
    display: flex;
    align-items: center;
    gap: .6rem;
    text-transform: uppercase;
}

    .criteria-composite-title::before {
        content: "▤";
        font-size: .9rem;
        opacity: .55;
    }

/* ---------- Table Container (Card) ---------- */
.criteria-table-container {
    width: 100%;
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px #fff;
    display: block;
}

/* Scroll wrapper for composite tables */
.criteria-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

    .criteria-table-container::-webkit-scrollbar {
        height: 8px;
    }

    .criteria-table-container::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: 4px;
    }

/* Desktop Table */
.criteria-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
}

@media (max-width:1000px) {
    .criteria-table {
        min-width: 760px;
    }
}

@media (max-width:820px) {
    .criteria-table {
        min-width: 640px;
    }
}

/* Table Head / Cells */
.criteria-table th {
    background: var(--c-table-head);
    text-align: left;
    padding: .65rem .75rem .6rem;
    font-weight: 600;
    letter-spacing: .45px;
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

.criteria-table td {
    padding: .55rem .75rem .65rem;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: top;
    background: #fff;
}

.criteria-table tbody tr:nth-child(even) {
    background: var(--c-table-row-alt);
}

.criteria-table tbody tr:hover {
    background: color-mix(in srgb,var(--c-accent-bg) 42%, transparent);
}

/* Reused field inside table cell */
.criteria-table td .criteria-field {
    background: transparent;
    border: 0;
    padding: .3rem 0 .4rem;
    min-height: auto;
    box-shadow: none;
}

    .criteria-table td .criteria-field:focus-within {
        box-shadow: none;
        border: 0;
    }

    .criteria-table td .criteria-field input,
    .criteria-table td .criteria-field textarea {
        font-size: .82rem;
        padding: .5rem .6rem .46rem;
    }

/* Compact inline variant (cell editors) */
.tbl-cell-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.tbl-cell-input,
.tbl-cell-textarea {
    width: 100%;
    font-size: .82rem;
    padding: .48rem .58rem .44rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 5px;
    background: #fff;
    line-height: 1.25;
    transition: .16s;
}

.tbl-cell-textarea {
    resize: vertical;
}

    .tbl-cell-input:focus,
    .tbl-cell-textarea:focus {
        border-color: var(--c-accent);
        box-shadow: 0 0 0 2px color-mix(in srgb,var(--c-accent) 40%, transparent);
    }

.tbl-cell-checkbox {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* ---------- Program Selector / Program Matrix ---------- */
.criteria-program-selector {
    border: 1px solid var(--c-border);
    background: var(--c-panel);
    border-radius: var(--c-radius-sm);
    padding: 1rem 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.criteria-program-block {
    border: 1px solid var(--c-border-strong);
    background: #fff;
    border-radius: 6px;
    padding: .65rem .75rem .7rem;
    transition: .16s;
}

    .criteria-program-block:hover {
        border-color: var(--c-accent);
    }

    .criteria-program-block ul {
        margin: .45rem 0 0;
        padding-left: 1.1rem;
        font-size: .64rem;
        line-height: 1.25;
    }

/* Wrapper holding the program matrix tables (accordion content) */
.criteria-program-table {
    width: 100%;
    overflow-x: auto; /* horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

    .criteria-program-table::-webkit-scrollbar {
        height: 8px;
    }

    .criteria-program-table::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: 4px;
    }

/* Program Matrix table itself */
.program-matrix {
    width: 100%;
    min-width: 720px; /* ensure columns don't squeeze; scroll instead */
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
}

    .program-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--c-table-head);
        border-bottom: 1px solid var(--c-border);
        white-space: nowrap;
    }

/* ---------- Mobile Table Behavior (<660px) ----------
   - Default: KEEP REAL TABLES with horizontal scroll
   - Stacked layout is OPT-IN via .criteria-table-stack
------------------------------------------------------ */
@media (max-width:660px) {
    /* Composite tables: keep as tables and allow scroll */
    .criteria-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .criteria-table {
        display: table !important;
        width: 100% !important;
        border-collapse: separate;
    }

        .criteria-table thead {
            display: table-header-group !important;
        }

        .criteria-table tbody {
            display: table-row-group !important;
        }

        .criteria-table tr {
            display: table-row !important;
            box-shadow: none !important;
            border: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .criteria-table td,
        .criteria-table th {
            display: table-cell !important;
            border-bottom: 1px solid var(--c-border-soft);
            padding: .55rem .75rem .65rem;
            background: #fff;
        }

            .criteria-table td::before {
                content: none !important;
            }

    /* Program Matrix: keep as table and allow scroll in wrapper/accordion */
    .criteria-program-table .program-matrix,
    .criteria-accordion-item .program-matrix {
        display: table !important;
        width: 100% !important;
        border-collapse: separate;
    }

        .criteria-program-table .program-matrix thead,
        .criteria-accordion-item .program-matrix thead {
            display: table-header-group !important;
        }

        .criteria-program-table .program-matrix tbody,
        .criteria-accordion-item .program-matrix tbody {
            display: table-row-group !important;
        }

        .criteria-program-table .program-matrix tr,
        .criteria-accordion-item .program-matrix tr {
            display: table-row !important;
            box-shadow: none !important;
            border: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .criteria-program-table .program-matrix td,
        .criteria-program-table .program-matrix th,
        .criteria-accordion-item .program-matrix td,
        .criteria-accordion-item .program-matrix th {
            display: table-cell !important;
            border-bottom: 1px solid var(--c-border-soft);
            padding: .55rem .75rem .65rem;
            background: #fff;
        }

            .criteria-program-table .program-matrix td::before,
            .criteria-accordion-item .program-matrix td::before {
                content: none !important;
            }

    /* OPT-IN stacked layout for any table wrapped with .criteria-table-stack */
    .criteria-table-stack .criteria-table-container {
        overflow-x: hidden;
    }

    .criteria-table-stack .criteria-table {
        display: block !important;
        min-width: 100% !important;
        width: 100% !important;
    }

        .criteria-table-stack .criteria-table thead {
            display: none !important;
        }

        .criteria-table-stack .criteria-table tbody {
            display: block !important;
        }

            .criteria-table-stack .criteria-table tbody tr {
                display: flex !important;
                flex-direction: column;
                background: #fff;
                border: 1px solid var(--c-border-soft);
                border-radius: 10px;
                margin-bottom: .9rem;
                padding: .6rem .7rem .55rem;
                box-shadow: 0 2px 4px rgba(0,0,0,.04);
            }

                .criteria-table-stack .criteria-table tbody tr:last-child {
                    margin-bottom: 0 !important;
                }

        .criteria-table-stack .criteria-table td {
            display: flex !important;
            padding: .5rem 0 .45rem !important;
            border: none !important;
            background: transparent !important;
            border-bottom: 1px solid var(--c-border-soft) !important;
        }

            .criteria-table-stack .criteria-table td:last-child {
                border-bottom: 0 !important;
            }

            .criteria-table-stack .criteria-table td::before {
                content: attr(data-col);
                flex: 0 0 46%;
                font-weight: 600;
                font-size: .7rem;
                letter-spacing: .45px;
                color: var(--c-text-light);
                padding-right: .75rem;
                text-transform: uppercase;
                line-height: 1.2;
            }

    .criteria-th-desc {
        font-size: .6rem;
        line-height: 1.15;
    }

    .tbl-cell-label-block {
        margin-top: .6rem;
        padding-top: .6rem;
    }

    .tbl-cell-label-text {
        font-size: .74rem;
    }
}

/* ---------- Accordion (Program per details/summary) ---------- */
/* Wrapper item */
.criteria-accordion-item {
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    margin: 8px 0;
    background: #fff;
    overflow-x: auto; /* allow horizontal scroll when table overflows */
    -webkit-overflow-scrolling: touch; /* smooth */
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

    .criteria-accordion-item::-webkit-scrollbar {
        height: 8px;
    }

    .criteria-accordion-item::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: 4px;
    }

/* Summary header */
.criteria-accordion-summary {
    list-style: none; /* remove default marker in some browsers */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    font-size: .9rem;
    letter-spacing:.5px;
}

    .criteria-accordion-summary::-webkit-details-marker {
        display: none;
    }

    .criteria-accordion-summary::before {
        content: "▸";
        display: inline-block;
        transition: transform 0.15s ease-in-out;
        margin-right: 6px;
        color: #6c757d;
    }
/* Rotate caret when open */
.criteria-accordion-item[open] .criteria-accordion-summary::before {
    transform: rotate(90deg);
    color: #495057;
}

/* Inner table spacing in accordion */
.criteria-accordion-item .program-matrix {
    width: 100%;
    border-collapse: collapse;
}

    .criteria-accordion-item .program-matrix th,
    .criteria-accordion-item .program-matrix td {
        border-top: 0px solid #e9ecef;
        padding: 8px;
    }

.criteria-accordion-item .criteria-th-desc {
    font-size: 0.8rem;
    color: #6c757d;
}

/* ---------- Flat Mode ---------- */
.criteria-shell.criteria-flat .criteria-section {
    border: 1px solid var(--c-border-soft);
    background: linear-gradient(#fff,#fefefe);
    box-shadow: none;
}

.criteria-shell.criteria-flat .criteria-field {
    background: transparent;
    border: 0;
    padding: .45rem 0 .7rem;
    border-bottom: 1px solid var(--c-border-soft);
    min-height: auto;
    border-radius: 0;
}

    .criteria-shell.criteria-flat .criteria-field:hover {
        border-bottom-color: var(--c-border);
    }

    .criteria-shell.criteria-flat .criteria-field:focus-within {
        border-bottom-color: var(--c-accent);
        box-shadow: none;
    }

.criteria-shell.criteria-flat .criteria-field-label {
    font-size: .82rem;
}

.criteria-shell.criteria-flat .criteria-composite,
.criteria-shell.criteria-flat .criteria-program-selector {
    border: 1px dashed var(--c-border-soft);
    background: #fff;
    box-shadow: none;
}

.criteria-shell.criteria-flat .criteria-table-container {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.criteria-shell.criteria-flat .criteria-table {
    min-width: 760px;
    border: 1px solid var(--c-border-soft);
    border-radius: 8px;
    overflow: hidden;
}

    .criteria-shell.criteria-flat .criteria-table th {
        background: var(--c-panel);
        border-bottom: 1px solid var(--c-border-soft);
    }

.criteria-shell.criteria-flat .criteria-note {
    background: #f2f6fa;
    border: 1px solid #d9e4ef;
    padding: .6rem .75rem;
}

/* ---------- Animations ---------- */
.criteria-field,
.criteria-note,
.criteria-program-selector,
.criteria-composite,
.criteria-section {
   /* animation: cFade .24s ease;*/

}

@keyframes cFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Utilities ---------- */
.rz-field {
    margin: 0 !important;
}

.rz-mb-3, .rz-mb-2 {
    margin-bottom: 0 !important;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.wrap {
    flex-wrap: wrap;
}

.gap-sm {
    gap: .55rem;
}

.text-muted {
    color: var(--c-text-light) !important;
}

/* ---------- Tiny Devices ---------- */
@media (max-width:380px) {
    .criteria-field {
        padding: .75rem .7rem .65rem;
    }

    .criteria-input-text,
    .criteria-input-number,
    .criteria-input-date,
    .criteria-input-textarea {
        padding: .58rem .65rem .54rem;
    }
}

/* ---------- Legacy Program Grid (if used anywhere) ---------- */
.program-table {
    display: grid;
    grid-template-columns: 60px 1fr repeat(3, minmax(160px, 1fr));
    gap: 8px;
}

.program-table-header-row {
    display: contents;
    font-weight: 600;
    color: #495057;
}

.program-table-row {
    display: contents;
}

.program-group-title {
    margin: 10px 0 6px;
    font-weight: 600;
    color: #3f51b5;
}

.col.srno {
    text-align: center;
}

.col.discipline {
    white-space: pre-wrap;
}

.col.data-col .col-help {
    font-size: 0.75rem;
    color: #6c757d;
}
/* === Mobile Fixes === */
/* Mobile card-style table rows */
/* Mobile: convert program tables to cards */
/* Mobile: convert program tables to cards */
@media (max-width: 420px) {
    :root {
        --font-scale: 16px;
    }
}

/* 1) ALWAYS one column on mobile for both containers */
@media (max-width: 639.98px) {
    .criteria-section .criteria-section-grid,
    .criteria-section .criteria-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--form-gap-y) var(--form-gap-x);
        align-items: start;
        width: 100%;
    }

    /* Any spans collapse to single col on mobile */
    .criteria-section-grid .criteria-field[data-span],
    .criteria-grid .criteria-field[data-span] {
        grid-column: auto !important;
    }
}

/* 2) Keep COMPOSITE tables as TABLES on mobile + horizontal scroll */
@media (max-width: 660px) {
    .criteria-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--c-border-strong) transparent;
    }

        .criteria-table-container::-webkit-scrollbar {
            height: 8px;
        }

        .criteria-table-container::-webkit-scrollbar-thumb {
            background: var(--c-border-strong);
            border-radius: 4px;
        }

    .criteria-table {
        display: table !important;
        width: 100% !important;
        min-width: 640px; /* prevent squish, allow scroll */
        border-collapse: separate;
    }

        .criteria-table thead {
            display: table-header-group !important;
        }

        .criteria-table tbody {
            display: table-row-group !important;
        }

        .criteria-table tr {
            display: table-row !important;
            box-shadow: none !important;
            border: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .criteria-table th,
        .criteria-table td {
            display: table-cell !important;
            border-bottom: 1px solid var(--c-border-soft);
            padding: .55rem .75rem .65rem;
            background: #fff;
        }

            .criteria-table td::before {
                content: none !important;
            }
    /* disable stacked labels if any */
}

/* 3) Program Matrix table (inside accordion) – keep as TABLE + scroll */
.criteria-program-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

    .criteria-program-table::-webkit-scrollbar {
        height: 8px;
    }

    .criteria-program-table::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: 4px;
    }

.program-matrix {
    width: 100%;
    min-width: 720px; /* tune if you have many columns */
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
}

    .program-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--c-table-head);
        border-bottom: 1px solid var(--c-border);
        white-space: nowrap;
    }

/* 4) Make each accordion <details> itself scroll when table overflows */
.criteria-accordion-item {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

    .criteria-accordion-item::-webkit-scrollbar {
        height: 8px;
    }

    .criteria-accordion-item::-webkit-scrollbar-thumb {
        background: var(--c-border-strong);
        border-radius: 4px;
    }

/* 5) Small visual polish for cramped mobile width */
@media (max-width: 639.98px) {
    .criteria-section .criteria-section-grid,
    .criteria-section .criteria-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .criteria-section-grid .criteria-field[data-span],
    .criteria-grid .criteria-field[data-span] {
        grid-column: auto !important;
    }
}
@media (max-width: 660px) {
    .criteria-table,
    .program-matrix {
        display: table !important;
        width: 100% !important;
        min-width: 640px !important;
        border-collapse: separate !important;
    }

        .criteria-table thead,
        .program-matrix thead {
            display: table-header-group !important;
        }

        .criteria-table tbody,
        .program-matrix tbody {
            display: table-row-group !important;
        }

        .criteria-table tr,
        .program-matrix tr {
            display: table-row !important;
        }

        .criteria-table th,
        .criteria-table td,
        .program-matrix th,
        .program-matrix td {
            display: table-cell !important;
        }
}

.dy-fileupload {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    max-width: 420px;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: var(--dy-upload-files-background-color, #fff);
    color: var(--dy-upload-choose-color, #222);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
}

    /* Style the native button part (modern browsers) */
    .dy-fileupload::file-selector-button,
    .dy-fileupload::-webkit-file-upload-button,
    .dy-fileupload::-webkit-file-upload-button:hover {
        margin-right: 0.6rem;
        padding: 0.35rem 0.65rem;
        border: 0;
        border-radius: 6px;
        background-color: var(--dy-upload-choose-background-color, #2a970c);
        color: var(--dy-upload-choose-color, #fff);
        font: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
    }

        /* Hover/active states for the button */
        .dy-fileupload::file-selector-button:hover,
        .dy-fileupload::-webkit-file-upload-button:hover {
            background-color: var(--dy-upload-choose-hover-background-color, #23910b);
            color: var(--dy-upload-choose-hover-color, #fff);
        }

        /* Active state */
        .dy-fileupload::file-selector-button:active,
        .dy-fileupload::-webkit-file-upload-button:active {
            background-color: var(--dy-upload-choose-active-background-color, #1f7f0a);
        }

    /* Firefox vendor prefix */
    .dy-fileupload::-moz-file-upload-button {
        margin-right: 0.6rem;
        padding: 0.35rem 0.65rem;
        border: 0;
        border-radius: 6px;
        background: var(--dy-upload-choose-background-color, #2a970c);
        color: var(--dy-upload-choose-color, #fff);
        cursor: pointer;
        font: inherit;
    }

/* Make sure long filenames wrap/truncate nicely */
.dy-fileupload {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    /* Disabled state */
    .dy-fileupload:disabled,
    .dy-fileupload[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: var(--dy-upload-files-background-color-disabled, #f7f7f7);
    }

    /* Focus ring */
    .dy-fileupload:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(42,151,12,0.12);
        border-color: rgba(42,151,12,0.5);
    }

.criteria-section--viewonly {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.criteria-heading--viewonly {
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.criteria-field--viewonly {
    background-color: white;
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.criteria-viewonly-value {
    font-weight: 500;
    color: #495057;
    min-height: 1.5rem;
}

.criteria-composite--viewonly {
    background-color: white;
    border-radius: 0.25rem;
    padding: 0.25rem 0;
}

.composite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.composite-label {
    font-weight: 600;
    color: #6c757d;
}

.composite-value {
    color: #495057;
    text-align: right;
}

.criteria-program-selector--viewonly {
    background-color: white;
    border-radius: 0.25rem;
    padding: 0.5rem;
}
.criteria-skeleton {
    background: linear-gradient(90deg, #f3f3f3 25%, #ececec 37%, #f3f3f3 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s linear infinite;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.criteria-shell-placeholder {
    min-height: 420px; /* reserve space for rendered form to avoid jump */
}
.rz-tabview > .rz-tabview-nav li > a {
    font-weight: 600;
    font-size: 0.95rem;
}

/* ===========================
   FORM TABS (INNER)
   =========================== */

.form-tabs .rz-tabview-nav li > a {
    font-size: 0.85rem;
    background-color: #f5f7fa;
    border-radius: 6px;
    margin-right: 6px;
    padding: 6px 12px;
    color: #495057;
}

/* Active form tab */
.form-tabs .rz-tabview-nav li.rz-tabview-selected > a {
    background-color: #0d6efd;
    color: #ffffff;
}

/* Hover effect */
.form-tabs .rz-tabview-nav li > a:hover {
    background-color: #e9ecef;
}