: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: .5rem;
    font-size: .85rem;
}

    .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: .75rem;
        background: #fafbfc;
    }

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

        .sidebar .sidebar-footer-user i {
            font-size: 1.9rem;
            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 .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;
        }
        .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;
            }

            /* 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;
            }

            .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-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;
}