:root {
    --primary: #175ca2;
    --primary-dark: #0f4278;
    --primary-light: #2b74bf;
    --accent: #E07B39;
    --accent-dark: #c4652a;
    --heading-color: #3a3b3e;
    --bg: #F5F6F8;
    --card: #ffffff;
    --border: #d8dce3;
    --text: #22262c;
    --muted: #6b7280;
    --saffron: #FF9933;
    --green-tri: #138808;
    --bs-table-bg: #ffffff4d !important;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', 'Noto Sans Devanagari', 'Segoe UI', sans-serif;
    background: #fff;
    color: var(--text);
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
body {
    background: radial-gradient(circle at 15% 20%, rgba(255, 183, 51, 0.05), transparent 25%), radial-gradient(circle at 85% 80%, rgba(19, 136, 8, 0.10), transparent 25%), #f8fafc !important;
}

    body::before {
        content: "☸";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 420px;
        font-family: "Segoe UI Symbol", sans-serif;
        color: rgba(0, 51, 102, 0.025);
        pointer-events: none;
        z-index: 0;
    }

    body > * {
        z-index: 1;
    }
.sidebar {
    background: radial-gradient(circle at 15% 20%, rgba(255, 183, 51, 0.05), transparent 25%), radial-gradient(circle at 85% 80%, rgba(19, 136, 8, 0.05), transparent 25%), #f8fafc !important;
}
.table{
 background:#fffffc24;
}

.sidebar::before {
    content: "☸";
    position: fixed;
    top: 50%;
    left: 2%;
    transform: translate(-50%, -50%);
    font-size: 420px;
    font-family: "Segoe UI Symbol", sans-serif;
    color: rgba(0, 51, 102, 0.025);
    pointer-events: none;
    z-index: 0;
}

.sidebar > * {
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.5;
}
.nav-link {
    color: #034bb4
    ;
}

.tabular {
    font-variant-numeric: tabular-nums;
}
.form-control {
    padding:.475rem .75rem .375rem !important;
}
/* ===== Tricolor strip ===== */
.tricolor-strip {
    height: 3px;
    width: 100%;
    display: flex;
}

    .tricolor-strip span {
        flex: 1;
    }

    .tricolor-strip .saffron {
        background: var(--saffron);
    }

    .tricolor-strip .white {
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    .tricolor-strip .green {
        background: var(--green-tri);
    }

/* ===== Top navbar ===== */
.gov-navbar {
    background: var(--primary);
    color: #fff;
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.gov-emblem {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    border: 2px solid var(--saffron);
}

.gov-title-block {
    line-height: 1.25;
    min-width: 0;
}

    .gov-title-block .t1 {
        font-size: .98rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gov-title-block .t2 {
        font-size: .76rem;
        color: #cfd9ea;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.gov-navbar .btn-hamburger {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
}

    .gov-navbar .btn-hamburger:hover {
        background: rgba(255,255,255,.12);
    }

.role-switch-wrap select {
    background: var(--primary-dark);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    font-size: .85rem;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

    .user-chip .user-chip-caret {
        font-size: .65rem;
        opacity: .8;
    }

    .user-chip .role-badge {
        background: var(--accent);
        color: #fff;
        font-size: .72rem;
        padding: .38rem .45rem .12rem;
        border-radius: 20px;
        font-weight: 400;
        text-align: center;
        align-items: center;
        align-content: center;
    }

/* ===== Layout shell ===== */
#appShell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 6px);
    overflow: hidden;
}

.app-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar {
    width: 230px;
    background: #fbfcfd;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

    .sidebar .sidebar-nav-items {
        flex: 1;
        overflow-y: auto;
        padding: 1rem .75rem;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        /* Reserve the scrollbar's own gutter at all times so its (in)visibility on hover
           never changes the panel's content width — without this, toggling the scrollbar
           on/off reflows and wraps the nav-link text. */
        scrollbar-gutter: stable;
    }

        /* Thin, light scrollbar — invisible at rest, appears while hovering the panel. Width
           stays fixed at 6px whether shown or not, so only the thumb color changes on hover. */
        .sidebar .sidebar-nav-items::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar .sidebar-nav-items::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 3px;
        }
        .sidebar .sidebar-nav-items:hover {
            scrollbar-color: #c7cdd6 transparent;
        }
            .sidebar .sidebar-nav-items:hover::-webkit-scrollbar-thumb {
                background: #c7cdd6;
            }

    .sidebar .sidebar-footer {
        flex-shrink: 0;
        border-top: 1px solid var(--border);
        padding: .4rem .5rem;
        background: #fafbfc;
    }

    .sidebar .sidebar-footer-user {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .sidebar .sidebar-footer-user i {
            font-size: 1.5rem;
            color: var(--primary);
        }

    .sidebar .sidebar-footer-text {
        min-width: 0;
    }

    .sidebar .sidebar-footer-name {
        font-size: .85rem;
        font-weight: 600;
        color: var(--heading-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar .sidebar-footer-role {
        font-size: .72rem;
        color: var(--muted);
    }

    .sidebar-support-line {
        display: flex;
        align-items: flex-start;
        gap: .4rem;
        font-size: .72rem;
        color: var(--muted);
        line-height: 1.4;
    }

        .sidebar-support-line i {
            flex-shrink: 0;
            font-size: 1.5rem;
            color: var(--primary);
        }

        .sidebar-support-line span {
            min-width: 0;
            overflow-wrap: break-word;
        }

    .sidebar .nav-link {
        color: var(--text);
        border-radius: 6px;
        padding: .45rem .8rem;
        font-size: .856rem;
        display: flex;
        align-items: center;
        gap: .6rem;
        margin-bottom: .2rem;
    }
.table-gov td {
    font-size: .85rem !important;
    vertical-align: middle;
    font-weight: 400 !important;
    color: var(--text);
}
.btn {
    font-size: .88rem;
}

.sidebar .nav-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.sidebar .nav-link:hover {
    background: #eef1f6;
}

.sidebar .nav-link.active {
    background: var(--primary);
    color: #fff;
}

    .sidebar .nav-link.active i {
        color: #fff;
    }

.sidebar .nav-link.disabled-link {
    color: #a9afb9;
    cursor: pointer;
}

    .sidebar .nav-link.disabled-link i {
        color: #c2c7d0;
    }

.sidebar .soon-badge {
    font-size: .62rem;
    background: #eceff3;
    color: #8a90a0;
    padding: .1rem .4rem;
    border-radius: 10px;
    margin-left: auto;
}

/* Reports collapse group (S-10) — a nav-link that expands into a set of preset sub-links. */
.sidebar .nav-link[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform .15s;
}
.sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.sidebar .nav-sublink {
    padding-left: 2.2rem;
    font-size: .86rem;
}

.sidebar .sidebar-heading {
    font-size: .72rem;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 1rem .5rem .35rem;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: .8rem .8rem 1rem;
    overflow-y: auto;
}

.breadcrumb-bar {
    background: transparent;
    padding: 0 0 .75rem;
    font-size: .85rem;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ===== Cards ===== */
.gov-card {
    background: #ffffff4d;
    border: 1px solid var(--border);
    border-radius: 2px;
    /*box-shadow: 0 1px 3px rgba(20,30,60,.06);*/
}

.section-card {
    background: #ffffff4d;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .9rem 1rem;
    margin-bottom: 6px;
}

    .section-card .section-title {
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--primary);
        border-bottom: 2px solid #eef1f6;
        padding-bottom: .4rem;
        margin-bottom: .7rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .section-card .section-title .num {
            background: var(--primary);
            color: #fff;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .78rem;
            font-weight: 700;
        }

#s06 .row.g-3 {
    --bs-gutter-y: .75rem;
}

.form-step {
    display: none;
}

    .form-step.active {
        display: block;
    }

.form-step-indicator {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
}

    .form-step-indicator .fs-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #eceff3;
        color: #8a90a0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        font-weight: 700;
    }

        .form-step-indicator .fs-dot.done {
            background: var(--accent);
            color: #fff;
        }

        .form-step-indicator .fs-dot.current {
            background: var(--primary);
            color: #fff;
        }

    .form-step-indicator .fs-sep {
        width: 24px;
        height: 2px;
        background: var(--border);
    }

label.req::after {
    content: " *";
    color: var(--accent-dark);
    font-weight: 700;
}

.form-label {
    font-weight: 600;
    font-size: .86rem;
    color: #3a4150;
}

.form-control, .form-select {
    border-radius: 5px;
    border-color: var(--border);
    font-size:.85rem !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 .2rem rgba(27,58,107,.15);
    }

.helper-text {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .3rem;
}

.invalid-msg {
    font-size: .78rem;
    color: #c1121f;
    margin-top: .25rem;
    display: none;
}
.list-group {
    background: #ffffff4d !important;
}
    .is-invalid ~ .invalid-msg, .invalid-msg.show {
        display: block;
    }

/* ===== Count cards (compact, icon-box style) ===== */
.count-card {
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #ffffff4d;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

    .count-card:hover {
        box-shadow: 0 4px 14px rgba(20,30,60,.1);
        transform: translateY(-2px);
    }

    .count-card .count-text {
        min-width: 0;
    }

    .count-card .count-num {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1.15;
    }

    .count-card .count-label {
        font-size: .76rem;
        color: var(--muted);
        font-weight: 400;
        margin-bottom: .15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .count-card .count-icon {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
    }

/* S-13 login history — user-agent strings are long; truncate with an ellipsis, full text on hover via the cell's title attribute. */
.user-agent-cell { max-width: 260px; }

/* S-03/S-04 dashboard chart canvases (FR-51). */
.chart-box { height: 220px; position: relative; }

/* S-03 "वापस आई प्रविष्टियाँ" widget — visually emphasised per SRS S-03. */
.returned-entries-card { border-left: 4px solid var(--accent); }

/* Count-card icon colour variants — matches prototype2.html's ICON_STYLES (S-03/S-04). */
.count-icon-navy    { background: #e7eff8; color: #175ca2; }
.count-icon-saffron { background: #fdeee3; color: #E07B39; }
.count-icon-green   { background: #e6f4ea; color: #2f9e44; }
.count-icon-amber   { background: #fff4e0; color: #c98a1c; }
.count-icon-red     { background: #fdeaea; color: #c1121f; }
.count-icon-indigo  { background: #eef1fd; color: #4c5fd5; }

/* ===== Badges ===== */
.badge-status {
    font-size: .74rem;
    font-weight: 600;
    padding: .32rem .6rem;
    border-radius: 18px;
}

.badge-draft {
    background: #e9ecef;
    color: #495057;
}

.badge-submitted {
    background: #cfe2ff;
    color: #084298;
}

.badge-returned {
    background: #ffe4c7;
    color: #8a4a06;
}

.badge-verified {
    background: #cdeeee;
    color: #0b5d5d;
}

.badge-approved {
    background: #d1e7dd;
    color: #0f5132;
}

.badge-rejected {
    background: #f8d7da;
    color: #842029;
}

.badge-pending-dswo {
    background: #cdeeee;
    color: #0b5d5d;
}

.badge-dswo-verified {
    background: #b7e4d8;
    color: #0a4f3c;
}

.badge-assigned-agency {
    background: #e0dcfa;
    color: #4c2f9e;
}

.badge-proposal {
    background: #ecd6f7;
    color: #6a1b9a;
}

.badge-pending-ho {
    background: #ddb8f0;
    color: #5a1478;
}

.badge-awaiting-accept {
    background: #ffe9b3;
    color: #8a5a00;
}

.badge-inprogress {
    background: #c6f0f7;
    color: #046070;
}

.badge-cond {
    font-size: .74rem;
    font-weight: 600;
    padding: .32rem .6rem;
    border-radius: 4px;
}

.cond-achi {
    background: #d1e7dd;
    color: #0f5132;
}

.cond-samanya {
    background: #cfe2ff;
    color: #084298;
}

.cond-marammat {
    background: #fff3cd;
    color: #664d03;
}

.cond-kshati {
    background: #ffe4c7;
    color: #8a4a06;
}

.cond-punasthapana {
    background: #f8d7da;
    color: #842029;
}

/* ===== Photo upload cards ===== */
.photo-slot {
    border: 2px dashed var(--border);
    border-radius: 6px;
    background: #fbfcfd;
    padding: 1rem;
    text-align: center;
    height: 100%;
    position: relative;
}

    .photo-slot.filled {
        border-style: solid;
        border-color: #9fc7a8;
        background: #f4faf6;
    }

    .photo-slot .photo-icon {
        font-size: 2.1rem;
        color: var(--primary-light);
    }

    .photo-slot .photo-label {
        font-weight: 600;
        font-size: .86rem;
        margin: .4rem 0 .6rem;
    }

.photo-preview {
    width: 100%;
    height: 130px;
    border-radius: 5px;
    background: #e7ebf1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 2rem;
    overflow: hidden;
    margin-bottom: .6rem;
}

    .photo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ===== Sticky action bar ===== */
.sticky-actionbar {
    padding: .25rem 2.35rem;
    margin: 0 1.0rem -0px;
    border-radius: 0 0 6px 6px;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .sticky-actionbar {
        padding: .5rem .25rem;
    }

        .sticky-actionbar .btn {
            flex: 1 1 calc(50% - .3rem);
        }
}


/* ===== Modals — global width fix =====
   Bootstrap 5.3 sizes every .modal-dialog via max-width: var(--bs-modal-width), not a
   plain max-width — overriding max-width directly on .modal-dialog in site.css has no
   effect since var(--bs-modal-width) still resolves to Bootstrap's own 500px and wins
   (confirmed: this is why the previous attempt only shifted alignment, never widened
   anything). Setting the variable itself is what Bootstrap's own docs specify for this,
   and it's what every one of Bootstrap's own width/breakpoint rules keys off consistently. */
.modal-dialog {
    --bs-modal-width: 680px;
}

.modal-dialog > form {
    width: 100%;
}

@media (max-width: 767.98px) {
    .modal-dialog {
        --bs-modal-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }
}

/* ===== Buttons ===== */
.btn-primary-gov {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

    .btn-primary-gov:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

.btn-accent-gov {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

    .btn-accent-gov:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
        color: #fff;
    }

.btn-outline-gov {
    border-color: var(--primary);
    color: var(--primary);
}
.btn {
    padding: .42rem .5rem .2rem !important;
}

    .btn-outline-gov:hover {
        background: var(--primary);
        color: #fff;
    }

/* ===== Headings ===== */
h1.h5, h2.h6, .table-gov thead th, .breadcrumb-bar .bc-current {
    color: var(--heading-color);
    font-weight: 500;
}
.col-xl {
    flex: 1 0 20% !important;
}
.fw-semibold {
    font-weight: 500 !important;
}
.small, small {
    font-size: .815em !important;
}
.fw-bold {
    font-weight: 600 !important;
}
/* ===== Tables ===== */
.table-gov thead th {
    background: var(--bs-table-bg);
    font-size: .82rem;
    /* border-bottom: 2px solid var(--border); */
    white-space: nowrap;
    padding-top: 13px;
    padding-bottom: 10px;
}

    .table-gov td {
        font-size: .87rem;
        vertical-align: middle;
    }

        .table-gov td.no-print {
            white-space: nowrap;
        }

            .table-gov td.no-print, .table-gov td.no-print > div {
                display: flex;
                align-items: center;
                gap: .4rem;
            }

    .table-responsive-gov {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

        /* Same thin, light, hover-only scrollbar treatment as the sidebar — height stays
           fixed whether shown or not, so only the thumb color changes on hover. */
        .table-responsive-gov::-webkit-scrollbar {
            height: 6px;
        }
        .table-responsive-gov::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 3px;
        }

/* जिला-विधानसभा स्थिति सारांश (DistrictAssemblyMatrix) — narrow numeric columns since there
   are 10 status columns plus a total, and the rowspan'd district cell needs a visible
   separator from its विधानसभा sub-rows. */
.matrix-table th, .matrix-table td {
    font-size: .8rem;
    padding-left: .5rem;
    padding-right: .5rem;
}
/* विधानसभा count / लक्ष्य line under the उप-योग label — second line, lighter weight. */
.matrix-subtotal-target {
    font-weight: 500;
    white-space: nowrap;
}
/* Header text vertically centered, not Bootstrap's own bottom-aligned <th> default — with
   several headers now wrapping to 2 lines (long renamed status labels) next to short 1-line
   ones, bottom-alignment made the row look uneven (Vivek's instruction). */
.matrix-table thead th {
    vertical-align: middle;
}
/* जनपद header centred (Bootstrap's own <th> default is left) to match जनपद's own
   text-align: center body cells above (Vivek's instruction). */
.matrix-table thead th:first-child {
    text-align: center;
}
/* white-space: nowrap on विधानसभा — with 10 numeric status columns pulling width to the
   right, the browser's auto table layout otherwise squeezes it down to less than its own
   text needs and wraps even a short name (found live); .table-responsive-gov already gives
   the table a horizontal scrollbar, so forcing this column to its natural single-line width
   is safe. जनपद instead gets a capped max-width + normal wrap — checked live: its column was
   genuinely sizing to the longest real district name ("Gautam Buddha Nagar", ~152px at this
   font-size, not a padding bug — confirmed by measuring), which left every shorter name
   ("Agra") looking stranded in a lot of empty space once centred. Capped so most one/two-word
   names (up to ~99px, e.g. "Muzaffarnagar"/"Kanpur Nagar") still render on one line, and only
   the genuinely long ones ("Gautam Buddha Nagar", "Sant Ravidas Nagar", "Lakhimpur Kheri", …)
   wrap to 2 lines instead of stretching the column for every row (Vivek's instruction).
   overflow-wrap: break-word is required alongside max-width, not optional — many single-word
   district names have no internal space to wrap at ("Ambedkarnagar", "Siddharthnagar",
   "Muzaffarnagar" all exceed 100px as one unbroken word), and without it the cell's content
   simply overflowed the capped width and visibly ran into विधानसभा's column next to it
   (found live: "Ambedkarnagar" printing over "Jalalpur" as "Ambedkarnagarjalalpur"). */
.matrix-district-cell {
    font-weight: 600;
    vertical-align: middle !important;
    text-align: center;
    border-right: 2px solid var(--border, #dee2e6);
    white-space: normal;
    min-width: 135px;
    max-width: 170px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.matrix-ac-cell {
    font-weight: 600;
    vertical-align: middle !important;
    border-right: 1px solid var(--border, #dee2e6);
    white-space: nowrap;
}
/* Two distinct highlight strengths, darkest at the bottom of the hierarchy it totals: every
   जिला's उप-योग row (.matrix-subtotal-row) -> the single ग्रैंड टोटल row (darkest,
   .matrix-grandtotal-row — the last <tbody> row, not a <tfoot>: a <tfoot> row repeats on every
   printed page of a long table, which put ग्रैंड टोटल at the bottom of every page instead of
   only the very end — found live, Vivek's instruction). No separate विधानसभा-level subtotal
   row (Vivek's instruction — removed; the AC's own rowspan cell plus the district subtotal
   already carry that total). No separate कुल योग column either (removed, Vivek's instruction
   — every row's own counts are what's needed, not a running total column). Hardcoded greys,
   not Bootstrap's --bs-tertiary-bg/--bs-secondary-bg tokens — this theme resolves both of
   those to the same #f8f9fa/#e9ecef pair already used elsewhere on the page, which made two
   different intended strengths look identical. `!important` beats `.table-gov td {
   font-weight: 400 !important; }` (this file, "Tables" section), which would otherwise force
   every cell in this table back to normal weight. */
.matrix-subtotal-row td {
    background: #dde2e7;
    font-weight: 600 !important;
}
.matrix-grandtotal-row td {
    background: #c9d0d8;
    font-weight: 600 !important;
}
/* कुल आवेदन की संख्या (row total) column — positioned left of ड्राफ्ट (Vivek's instruction:
   moved from the far right, where it was before, to just after विकास खण्ड / नगरीय क्षेत्र का
   नाम). A light tint down every row so it's easy to scan top-to-bottom regardless of which
   rows are already highlighted, darker where the row itself is already tinted — same
   specificity fight as .matrix-subtotal-row/.matrix-grandtotal-row above, `.matrix-table
   td.matrix-total-cell` (0,2,1) needed to reliably outrank Bootstrap's own
   `.table > :not(caption) > * > *` background-color rule (0,1,1). */
.matrix-table td.matrix-total-cell,
.matrix-table th.matrix-total-cell {
    background-color: #eef6fb;
    font-weight: 600 !important;
}
.matrix-table tr.matrix-subtotal-row td.matrix-total-cell {
    background-color: #cfe0ea;
}
.matrix-table tr.matrix-grandtotal-row td.matrix-total-cell {
    background-color: #b7cddb;
}
/* Print-only page-break border row — see the print rule below and the view's <tfoot> comment. */
.matrix-page-rule {
    display: none;
}
        .table-responsive-gov:hover {
            scrollbar-color: #c7cdd6 transparent;
        }
            .table-responsive-gov:hover::-webkit-scrollbar-thumb {
                background: #c7cdd6;
            }

    .statue-row {
        cursor: pointer;
    }
    /* ===== Timeline ===== */
    .timeline {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

        .timeline li {
            position: relative;
            padding-left: 2.1rem;
            padding-bottom: 1.5rem;
            border-left: 2px solid var(--border);
            margin-left: .6rem;
        }

            .timeline li:last-child {
                border-left: 2px solid transparent;
                padding-bottom: 0;
            }

            .timeline li .dot {
                position: absolute;
                left: -.55rem;
                top: 0;
                width: 1.1rem;
                height: 1.1rem;
                border-radius: 50%;
                background: var(--primary);
                border: 3px solid #fff;
                box-shadow: 0 0 0 1px var(--border);
            }

            .timeline li .tl-status {
                font-weight: 700;
                font-size: .88rem;
                color: var(--primary);
                margin-bottom: 5px;
            }

            .timeline li .tl-meta {
                font-size: .78rem;
                color: var(--muted);
            }

            .timeline li .tl-remark {
                font-size: .84rem;
                background: #f8f9fb;
                border: 1px solid var(--border);
                border-radius: 5px;
                padding: .5rem .7rem;
                margin-top: .35rem;
            }
    /* ===== Login screen ===== */
    .login-wrap {
        min-height: calc(100vh - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }

    .login-split {
        display: flex;
        align-items: center;
        gap: 2.5rem;
        width: 100%;
        max-width: 1040px;
    }

    .login-illustration {
        flex: .45 .4 0;
        padding: 2.5rem 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .login-illustration svg {
            width: 100%;
            max-width: 410px;
            height: auto;
            margin-bottom: 1.1rem;
        }

        .login-illustration h2 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: .4rem;
        }

        .login-illustration p {
            font-size: .83rem;
            color: var(--muted);
            max-width: 300px;
            margin: 0 auto;
        }

    .login-form-col {
        flex: 1 1 0;
        max-width: 470px;
        width: 100%;
    }

    .login-header {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .login-card {
        width: 100%;
        padding: 2rem 1.8rem;
    }

    .login-footer {
        text-align: center;
        font-size: .76rem;
        color: var(--muted);
        margin-top: 1.2rem;
    }

    .form-control {
        font-size: .93rem;
    }
    /* ===== Photo gallery / detail =====
   Each group (प्रारंभिक फोटो, अन्य दस्तावेज़, DSWO सत्यापन दस्तावेज़, प्रस्ताव दस्तावेज़...) gets
   its own heading and its own row, so photos are never confused with docs and the two
   verification passes stay visually distinct (later change, Vivek's explicit instruction —
   previously every group flowed into one continuous row with only a per-tile caption). */
    .gallery-group-heading {
        font-size: .78rem;
        font-weight: 600;
        color: var(--heading-color);
        margin: .5rem 0 .4rem;
    }

        .gallery-group-heading:first-child {
            margin-top: 0;
        }

    .gallery-flow {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem .4rem;
    }

    .gallery-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90px;
        flex-shrink: 0;
    }

    .gallery-thumb {
        width: 100%;
        height: 110px;
        border-radius: 5px;
        background: #e7ebf1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 1.7rem;
        cursor: pointer;
        border: 1px solid var(--border);
        overflow: hidden;
        flex-shrink: 0;
    }

        .gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .gallery-doc {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--muted);
    }

        .gallery-doc i {
            font-size: 1.6rem;
            color: #b5423a;
        }

        .gallery-doc .small {
            color: var(--text);
            font-size: .68rem;
        }

    .detail-row {
        display: flex;
        padding: .45rem 0;
        border-bottom: 1px dashed #eaecef;
        font-size: .87rem;
    }

        .detail-row .dk {
            width: 42%;
            color: var(--muted);
            font-weight: 600;
        }

        .detail-row .dv {
            width: 58%;
            font-weight: 500;
        }
    /* ===== Help floating button (placeholder for future phase) ===== */
    .help-fab {
        position: fixed;
        bottom: 1.4rem;
        right: 1.4rem;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        box-shadow: 0 4px 14px rgba(0,0,0,.25);
        z-index: 1040;
        border: none;
    }

    .help-panel {
        display: none;
        position: fixed;
        bottom: 5.2rem;
        right: 1.4rem;
        width: 340px;
        max-width: 88vw;
        height: 440px;
        z-index: 1041;
    }

        .help-panel.open {
            display: flex;
            flex-direction: column;
        }
    /* ===== Misc ===== */
    .filter-bar {
        background: #fafbfc;
        border: 1px solid var(--border);
        border-radius: 2px;
        padding: 1rem;
        margin-bottom: 5px;
    }

    .map-350 {
        height: 350px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--border);
    }

    .map-260 {
        height: 260px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--border);
    }

    .geo-status-line {
        font-size: .8rem;
        padding: .5rem .7rem;
        border-radius: 5px;
        background: #eef1f6;
        color: var(--primary-dark);
        margin-top: .6rem;
    }

        .geo-status-line.error {
            background: #f8d7da;
            color: #842029;
        }

    .screen {
        display: none;
    }

        .screen.active-screen {
            display: block;
        }

    .report-pill {
        display: block;
        padding: .6rem .9rem;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: #fff;
        font-size: .87rem;
        margin-bottom: .4rem;
        cursor: pointer;
        color: var(--text);
        font-weight: 500;
    }

        .report-pill.active, .report-pill:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

    [data-bs-toggle="collapse"] .bi-caret-right-fill {
        transition: transform .2s ease;
    }

    [data-bs-toggle="collapse"][aria-expanded="true"] .bi-caret-right-fill {
        transform: rotate(90deg);
    }

    @media (max-width: 991.98px) {
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1050;
            transform: translateX(-100%);
            transition: transform .2s;
            box-shadow: 0 0 20px rgba(0,0,0,.2);
        }

            .sidebar.show-mobile {
                transform: translateX(0);
            }

        .sidebar-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.4);
            z-index: 1045;
            display: none;
        }

            .sidebar-backdrop.show {
                display: block;
            }

        .main-content {
            padding: .8rem .8rem 1rem
        }

        .gov-title-block .t2 {
            display: none;
        }

        .detail-row .dk, .detail-row .dv {
            width: 50%;
        }
    }

    @media print {
        .gov-navbar, .sidebar, .tricolor-strip, .help-fab, .sticky-actionbar, .no-print, .breadcrumb-bar {
            display: none !important;
        }

        .main-content {
            padding: 0;
            overflow: visible;
        }

        #appShell {
            height: auto;
            overflow: visible;
        }

        .app-shell {
            overflow: visible;
        }

        body {
            background: #fff;
        }
        /* FR-55 — landscape + a smaller table font so a wide report (S-05/S-10) prints every
       column instead of clipping the right edge; .table-responsive-gov's scroll wrapper
       must not clip in print either. A plain @page margin, not a margin:0 + wrapper-padding
       trick — that trick only gave whitespace at the very top/bottom of the whole flowed
       document, not the top of every individual printed page, so page 2+ of a multi-page
       report printed flush against the edge. @page margin is the simple, standard way to get
       a consistent margin on every page; Chrome's own print "headers and footers" (URL/date/
       page-number) may draw into that margin if the user has that browser print-dialog option
       on — that's a print-dialog setting outside this page's control, not something to chase
       with more CSS tricks. */
        @page {
            size: landscape;
            margin: 10mm;
        }

        .table-responsive-gov {
            overflow: visible !important;
        }

        .table-gov {
            width: 100% !important;
            font-size: 10px;
            border-collapse: collapse;
        }

            .table-gov th, .table-gov td {
                white-space: normal !important;
                word-break: break-word;
                padding: 4px 6px;
                border: 1px solid #000 !important;
            }

            /* DistrictAssemblyMatrix's जनपद/विधानसभा rowspan'd name cells: cap their width so
               a short name ("Agra") never wraps just because a long one ("Ambedkar Nagar")
               elsewhere in the table pulled the whole column wide (found live — an earlier
               nowrap-everywhere fix over-corrected the other way, making जनपद too wide once
               real long district names showed up; Vivek's instruction: let a long name wrap to
               2 lines instead, don't force every row's column that wide). max-width, not a
               fixed width, so a table with only short names still sizes the column naturally. */
            /* जनपद specifically must be wide enough to fit "Ambedkarnagar" (the longest
               single-word — no space to wrap at — district name, ~79px at this 10px print
               font-size) on one line without wrapping (found live, Vivek's repeated
               instruction — an earlier 75px cap was still under that and wrapped it to 2
               lines, plus was shared with विधानसभा which doesn't need to fit the same name).
               95px gives it real headroom rather than a bare minimum. विधानसभा keeps its own,
               narrower cap since it never needs to fit a district name. */
            .table-gov td.matrix-district-cell {
                min-width: 100px;
                max-width: 100px;
                overflow-wrap: break-word;
                word-break: break-word;
            }
            .table-gov td.matrix-ac-cell {
                min-width: 55px;
                max-width: 65px;
                overflow-wrap: break-word;
                word-break: break-word;
            }

            /* विकास खण्ड / नगरीय क्षेत्र / प्राधिकरण का नाम (column 3) — same idea as जनपद/विधानसभा above,
               capped so a long विकास खण्ड/नगर निकाय name wraps instead of pulling the column
               wide; it has no rowspan of its own to protect, so this is the plain 3rd-column
               selector rather than a class. */
            .matrix-table td:nth-child(3) {
                min-width: 60px;
                max-width: 95px;
            }

            /* Column headers were technically allowed to wrap (white-space: normal is already
               set above) but never actually did — table-layout: auto grows a column to fit its
               longest single-line content by default, so a long header like "जमा किये गये
               आवेदन पत्रों की संख्या" (142px) or "विकास खण्ड / नगरीय क्षेत्र का नाम" (135px; now also
               "/ प्राधिकरण", which just wraps under the same cap)
               just pulled the whole table wider instead of wrapping onto a 2nd line, pushing
               every other column wider than it needed to be too (found live, Vivek's report).
               Capping every header's own width forces the wrap to actually happen. जनपद/
               विधानसभा/विकास खण्ड headers (columns 1-3) get the wider 80px cap matching their
               own body-cell columns above; every count-column header (4 onward) gets a
               tighter 68px — wide enough for the shortest real headers ("DM अनुमोदित"/"DM
               अस्वीकृत", ~58px) to stay one line, forcing only the genuinely long ones to
               wrap. */
            /* The renamed count headers are much longer now (department's own wording, e.g.
               "सत्यापनोपरान्त जिलाधिकारी को प्रेषित आवेदन पत्रों की संख्या"), so the old flat
               68px/85px caps squeezed them into tall, narrow, cramped strips. Cap each header
               by its heading's length instead: short ones (total, Estimate, Budget Approved)
               stay compact, medium ones (Draft/Submitted/Verification letter) get a bit more,
               and the long DM-stage and work-stage ones get the most room, so every heading
               wraps to a similar 3-4 lines. Smaller header font + tighter cell padding in this
               table only, to give the headings that room within one landscape page. */
            .matrix-table th, .matrix-table td {
                padding: 3px 4px;
            }
            .matrix-table thead th {
                font-size: 9px;
                max-width: 80px;
            }
            .matrix-table thead th:nth-child(-n+3) {
                max-width: 90px;
            }
            .matrix-table thead th:nth-child(4),
            .matrix-table thead th:nth-child(11),
            .matrix-table thead th:nth-child(12) {
                max-width: 75px;
            }
            .matrix-table thead th:nth-child(5),
            .matrix-table thead th:nth-child(6),
            .matrix-table thead th:nth-child(7) {
                max-width: 85px;
            }
            .matrix-table thead th:nth-child(8),
            .matrix-table thead th:nth-child(9),
            .matrix-table thead th:nth-child(10),
            .matrix-table thead th:nth-child(13),
            .matrix-table thead th:nth-child(14) {
                max-width: 105px;
            }

            /* Heading ke baad extra line thi (Vivek's report) — .gpf-header ka apna
               border-bottom + margin/padding is ek page pr redundant lag raha tha, title pehle
               se hi underlined hai. Sirf isi page ke liye hataya, baaki gpf-header wale pages
               (S-05/S-07/S-10) pe wahi rahega. */
            .matrix-gpf-header {
                border-bottom: none;
                padding-bottom: 0;
                margin-bottom: 8px;
            }

            /* A plain black-and-white report reads as "official paperwork" — the on-screen
               brand color and filled status/condition pills don't belong on a printed page.
               Every badge becomes plain text, same as every other cell — no box/border of its
               own (Vivek's explicit instruction). */
            .table-gov thead th {
                background: #fff !important;
                color: #000 !important;
                font-weight: 700;
                text-align: center;
                vertical-align: middle;
            }

            /* DistrictAssemblyMatrix header alignment was inconsistent in print — जनपद/
               विधानसभा/विकास खण्ड headers looked left-aligned against their own centered
               count-column siblings (no explicit text-align existed anywhere before this,
               so it fell to whatever the browser's print engine defaulted a <th> to). जनपद/
               विधानसभा/विकास खण्ड hold names, left-aligned to match their own body cells;
               every count column header stays centered like the rule above and its own body
               cells (found live, Vivek's report). जनपद (column 1) is excluded — it stays
               centered like its own centered body cell, same as on screen (Vivek's instruction). */
            .matrix-table thead th:nth-child(2),
            .matrix-table thead th:nth-child(3) {
                text-align: left;
            }

            /* break-inside: avoid on EVERY row (an earlier attempt at fixing border loss at a
               page break) badly overcorrected — found live: since जनपद/विधानसभा's rowspan
               ties a whole AC/district's rows together, "never split any row" effectively
               meant "never split the group", so once a large group (e.g. a district with many
               विधानसभा) didn't fully fit in the space left on a page, the print engine pushed
               the *entire* group to the next page, leaving a large blank gap at the bottom of
               the previous one instead of just filling it (Vivek's report: "blank space deke
               next page pe aa rha"). Scoped down to just the उप-योग/ग्रैंड टोटल rows instead —
               those are single, non-rowspan'd rows, so keeping just them intact doesn't drag
               a whole group along, and a plain data row is still free to split naturally at a
               page boundary (accepting that smaller, original border-loss tradeoff on an
               ordinary row rather than this much worse gap). */
            .matrix-table tr.matrix-subtotal-row,
            .matrix-table tr.matrix-grandtotal-row {
                break-inside: avoid;
            }

            /* The real fix for the border lost at a page break: a rowspan'd जनपद/विधानसभा
               cell split across two pages gets no bottom border on the first page (Chromium
               doesn't draw a collapsed border at a fragment break, and box-decoration-break:
               clone has no effect on collapsed table borders — both checked by printing).
               This empty <tfoot> repeats at the foot of every page, and its top border draws
               the missing line across the full width. Zero height, so it adds no space. */
            .matrix-table tfoot.matrix-page-rule {
                display: table-footer-group;
            }
            .table-gov tfoot.matrix-page-rule td {
                padding: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 0 !important;
                border-top: 1px solid #000 !important;
                background: transparent !important;
            }

            .badge-status, .badge-cond {
                background: transparent !important;
                color: #000 !important;
                border: none;
                border-radius: 0;
                padding: 0;
            }

        .gov-card {
            border: none;
            box-shadow: none;
            padding: 0 !important;
        }
    }

/* ===== S-07 detail "Download PDF" (window.print()) — renders as an official government-form
   printout matching the department's own Annexure paperwork, not the on-screen dashboard-card
   look: a bordered form box with a numbered field list on page 1, then (only if any exist) a
   separate page of just the initial Front/Side/Surrounding photos so the DSWO can discard that
   page physically if it isn't needed — never the other document slots (A-F) or completion
   photos, since this form is generated and printed once at Submit time, before any of those
   exist. No status-history table, no watermark — sent as a clean official form. .no-print (the
   on-screen view) is hidden by the existing global print rule above; .only-print (this form) is
   hidden on screen and shown only for print. */
.only-print {
    display: none;
}

@page gpf-portrait {
    /* Named page (CSS Paged Media) — Chromium/Edge print engines support selecting this per
       element via the `page` property below, so this one form can print portrait while the
       S-05/S-10 report screens keep the shared landscape @page rule above; a form this text-
       heavy reads far better as a normal A4 portrait sheet, matching the physical paper. A
       plain @page margin — see the report @page rule above for why this isn't zeroed with the
       whitespace faked via a wrapper's own padding/margin: that only works for a single page,
       and this form's page 2 (initial photos) needs its own top margin too. */
    size: portrait;
    margin: 12mm;
}

@media print {
    .only-print {
        display: block !important;
    }

    /* Kill the decorative Ashoka Chakra watermark and tinted gradient (site.css `body`,
       `body::before`) for print — this form must be plain white, no background art. */
    body {
        background: #fff !important;
    }

    body::before, .sidebar::before {
        content: none !important;
        display: none !important;
    }

    .gov-print-form {
        page: gpf-portrait;
    }

    .gpf-border {
        border: 2px solid #000;
        padding: 14px 18px;
        font-size: 11.5px;
        color: #000;
        background: #fff;
    }

    .gpf-photo-page {
        page-break-before: always;
        break-before: page;
    }

    .gpf-header {
        text-align: center;
        border-bottom: 1px solid #000;
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .gpf-logo {
        display: block;
        margin: 0 auto 6px;
        height: 64px;
        width: auto;
    }

    .gpf-logo-rule {
        border: none;
        border-top: 1px solid #000;
        margin: 0 0 6px;
    }

    .gpf-scheme-name {
        font-size: 15px;
        font-weight: 700;
    }

    .gpf-form-title {
        font-size: 13px;
        font-weight: 700;
        text-decoration: underline;
        margin-top: 2px;
    }

    .gpf-meta-row {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        font-size: 11px;
    }

    .gpf-section-title {
        font-weight: 700;
        border-bottom: 1px solid #000;
        margin: 10px 0 6px;
        padding-bottom: 2px;
        font-size: 12px;
    }

    .gpf-field {
        display: flex;
        align-items: baseline;
        gap: 4px;
        padding: 2px 0;
        break-inside: avoid;
    }

    .gpf-no {
        flex: 0 0 20px;
        font-weight: 700;
    }

    .gpf-label {
        flex: 0 0 190px;
        font-weight: 600;
    }

    .gpf-colon {
        flex: 0 0 10px;
    }

    .gpf-value {
        flex: 1 1 auto;
        border-bottom: 1px dotted #000;
        min-height: 14px;
        word-break: break-word;
    }

    .gpf-doc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 6px;
    }

    .gpf-doc-thumb {
        border: 1px solid #000;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .gpf-doc-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .gpf-signature-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 26px;
        font-size: 10.5px;
        text-align: center;
    }

    .gpf-sign-block {
        flex: 1 1 0;
    }

    .gpf-sign-line {
        border-bottom: 1px solid #000;
        height: 22px;
        margin-bottom: 4px;
    }
}

/* ===== Error page (Views/Shared/Error.cshtml) ===== */
.error-panel {
    width: 100%;
    max-width: 460px;
}

.error-icon {
    font-size: 2.5rem;
}