:root {
    --admin-bg: #f4f7fb;
    --panel-bg: #ffffff;
    --sidebar-bg: linear-gradient(180deg,#0f172a 0%,#111827 100%);
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 12px 40px rgba(15,23,42,.08);
    --teal: #0f766e;
    --blue: #2563eb;
    --amber: #d97706;
    --danger: #dc2626;
}

* {
    box-sizing: border-box
}
html.admin-html,
body.admin-body,
body.admin-body #root {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.admin-body {
    background: linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%);
    font-family: "Inter",sans-serif;
    color: var(--text);
}
body.admin-body {
    margin: 0;
    background: linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%);
    font-family: "Inter",sans-serif;
    color: var(--text);
}

.admin-shell {
    min-height: 100vh;
    display: flex;
}

.admin-shell {
    min-height: 100vh;
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.admin-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.admin-content {
    padding: 28px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.panel-card,
.panel-card-body,
.table-responsive,
.dataTables_wrapper {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollHead {
    max-width: 100%;
}
.admin-sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 24px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .28s ease, padding .28s ease, transform .28s ease;
    box-shadow: 20px 0 60px rgba(2,6,23,.18);
    z-index: 1000;
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    margin-bottom: 24px;
}

.brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    font-size: 1.2rem;
}

.brand-title {
    font-size: 1rem;
    font-weight: 800;
}

.brand-subtitle {
    font-size: .78rem;
    opacity: .75;
}

.admin-nav-title {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .55;
    margin: 24px 12px 12px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    transition: .2s ease;
    border: 1px solid transparent;
}

    .admin-nav-link:hover,
    .admin-nav-link.active {
        color: #fff;
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.12);
        transform: translateX(2px);
    }

.admin-main {
    flex: 1;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226,232,240,.9);
}

.sidebar-toggle-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: #e2e8f0;
    color: #0f172a;
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 800;
}

.topbar-subtitle {
    font-size: .9rem;
    color: var(--muted);
}

.topbar-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: .9rem;
}

.admin-content {
    padding: 28px;
}

.page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(135deg,#0f172a 0%,#134e4a 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

    .page-hero.compact {
        padding: 24px 28px;
    }

.hero-chip {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.page-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
}

.page-description {
    color: rgba(255,255,255,.82);
    max-width: 760px;
}

.metric-card,
.panel-card,
.feature-card-admin {
    background: var(--panel-bg);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 26px;
    box-shadow: var(--shadow);
}

.metric-card {
    padding: 24px;
    height: 100%;
}

.metric-icon,
.feature-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

    .metric-icon.teal, .feature-card-icon.teal {
        background: linear-gradient(135deg,#14b8a6,#0f766e)
    }

    .metric-icon.blue, .feature-card-icon.blue {
        background: linear-gradient(135deg,#60a5fa,#2563eb)
    }

    .metric-icon.amber, .feature-card-icon.amber {
        background: linear-gradient(135deg,#fbbf24,#d97706)
    }

.metric-label {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.metric-link {
    color: #0f766e;
    text-decoration: none;
    font-weight: 700;
}

.feature-card-admin {
    display: block;
    padding: 28px;
    height: 100%;
    color: var(--text);
}

    .feature-card-admin h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0 0 10px;
    }

    .feature-card-admin p {
        color: var(--muted);
        margin: 0 0 16px;
    }

    .feature-card-admin span {
        color: #0f766e;
        font-weight: 700;
    }

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(226,232,240,.9);
}

.panel-card-body {
    padding: 24px;
}

.panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
}

.panel-subtitle {
    color: var(--muted);
    margin: 0;
}

.admin-input {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    padding: 12px 14px;
    box-shadow: none !important;
}

textarea.admin-input {
    min-height: 140px;
    resize: vertical;
}

.form-label {
    font-weight: 700;
    margin-bottom: 10px;
}

.form-help {
    color: var(--muted);
    font-size: .85rem;
    margin-top: 8px;
}

.form-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    width:100%
}

.btn-admin-primary,
.btn-admin-light,
.btn-admin-edit,
.btn-admin-delete {
    border-radius: 14px;
    font-weight: 700;
    padding: 12px 20px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-admin-primary {
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    color: #fff;
}

.btn-admin-light {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-admin-edit {
    background: #dbeafe;
    color: #1d4ed8;
}

.btn-admin-delete {
    background: #fee2e2;
    color: #b91c1c;
}

.table-link {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

    .table-link:hover {
        text-decoration: underline;
    }

.uploaded-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ecfeff;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    font-size: .9rem;
}

.info-list {
    display: grid;
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
}

    .info-item i {
        color: #10b981;
        margin-top: 4px;
    }

.validation-summary-box {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 700;
}

.field-error {
    display: block;
    margin-top: 8px;
    color: #dc2626;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-input.input-error,
.form-select.admin-input.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 .18rem rgba(239,68,68,.14) !important;
    background: #fffafa;
}

.empty-grid-state {
    padding: 20px 22px;
    border-radius: 20px;
    background: #fff7ed;
    border: 1px dashed #fdba74;
    color: #9a3412;
    font-weight: 700;
}

/* =========================================================
   ONE SIMPLE TABLE DESIGN FOR ALL ADMIN TABLES
   ========================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-grid {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    margin: 0;
}

    .admin-grid th {
        background: #f8fafc;
        color: #334155;
        font-size: 14px;
        font-weight: 800;
        padding: 16px 14px;
        border: 1px solid #e2e8f0;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }

    .admin-grid td {
        padding: 16px 14px;
        border: 1px solid #eef2f7;
        vertical-align: middle;
        color: #1f2937;
        font-size: 14px;
        line-height: 1.6;
        background: #fff;
        word-break: break-word;
        white-space: normal;
    }

    .admin-grid tr:hover td {
        background: #fcfdff;
    }

.title-cell {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.55;
    word-break: break-word;
}

.description-cell {
    color: #334155;
    line-height: 1.7;
    word-break: break-word;
    white-space: normal;
}

.doc-link-cell {
    word-break: break-word;
    line-height: 1.6;
}

    .doc-link-cell a {
        color: #0f766e;
        font-weight: 700;
        text-decoration: none;
        word-break: break-word;
    }

        .doc-link-cell a:hover {
            text-decoration: underline;
        }

.date-nowrap {
    white-space: nowrap;
    font-weight: 700;
    color: #111827;
    display: inline-block;
}

.date-time-nowrap {
    white-space: nowrap;
    color: #334155;
    font-size: 13px;
    display: inline-block;
}

.actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 170px;
    white-space: nowrap;
}
.status-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}




.status-active {
    background: #dcfce7;
    color: #166534;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}

.status-inactive {
    background: #fee2e2;
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px #fecaca;
}

.admin-grid .btn-admin-edit,
.admin-grid .btn-admin-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.admin-grid th:nth-child(1),
.admin-grid td:nth-child(1) {
    text-align:center;
    min-width: 130px;
}

.admin-grid th:nth-child(2),
.admin-grid td:nth-child(2) {
    text-align: center;
    min-width: 130px;
}

.admin-grid th:nth-child(3),
.admin-grid td:nth-child(3) {
    text-align: center;
    min-width: 150px;
}

.admin-grid th:nth-child(4),
.admin-grid td:nth-child(4) {
    text-align: center;
    min-width: 200px;
}

/*.admin-grid th:nth-child(5),
.admin-grid td:nth-child(5) {
    min-width: 110px;
}
*/
.admin-grid th:nth-child(6),
.admin-grid td:nth-child(6) {
    text-align: center;
}

.admin-grid th:nth-child(7),
.admin-grid td:nth-child(7) {
    text-align: center;
    /* min-width: 180px; */
}

.admin-grid th:nth-child(8),
.admin-grid td:nth-child(8) {
    text-align: center;
    min-width: 130px;
}

.admin-grid th:nth-child(9),
.admin-grid td:nth-child(9) {
    text-align: center;
    min-width: 180px;
}

.admin-grid th:nth-child(10),
.admin-grid td:nth-child(10) {
    text-align: center;
    min-width: 180px;
}

@media (max-width: 991.98px) {
    .gov-title-col .hi-translit-toolbar {
        position: static;
        margin-bottom: 8px;
    }
}

/* Home Slider form field alignment */
.slider-title-col .hi-translit-wrapper {
    position: relative;
}

.slider-title-col .hi-translit-toolbar {
    position: absolute;
    top: -36px;
    right: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

.slider-title-col .hi-translit-label {
    display: none;
}

@media (max-width: 991.98px) {
    .slider-title-col .hi-translit-toolbar {
        position: static;
        margin-bottom: 8px;
    }
}


.member-title-col .hi-translit-wrapper {
    position: relative;
}

.member-title-col .hi-translit-toolbar {
    position: absolute;
    top: -36px;
    right: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

.member-title-col .hi-translit-label {
    display: none;
}

@media (max-width: 991.98px) {
    .member-title-col .hi-translit-toolbar {
        position: static;
        margin-bottom: 8px;
    }
}

    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-content {
        padding: 18px;
    }

    .admin-topbar {
        padding: 16px 18px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .topbar-badge {
        display: none;
    }


@media (max-width: 767px) {
    .admin-grid {
        min-width: 1000px;
    }

        .admin-grid th,
        .admin-grid td {
            padding: 12px 10px;
            font-size: 13px;
        }

    .date-time-nowrap {
        font-size: 12px;
    }

    .actions-cell {
        min-width: 130px;
    }
}
/* =========================================
   SIDEBAR COLLAPSE + MOBILE CLOSE
   ========================================= */

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    margin-bottom: 24px;
    transition: padding .28s ease, justify-content .28s ease, gap .28s ease;
}

.brand-text {
    min-width: 0;
    overflow: hidden;
    max-width: 180px;
    opacity: 1;
    transition: max-width .22s ease, opacity .18s ease;
}

.admin-nav-title {
    overflow: hidden;
    max-height: 20px;
    opacity: .55;
    transition: max-height .22s ease, opacity .18s ease, margin .22s ease;
}

.nav-text {
    display: inline-block;
    overflow: hidden;
    max-width: 180px;
    opacity: 1;
    transition: max-width .22s ease, opacity .18s ease, margin .22s ease;
    white-space: nowrap;
}

.sidebar-close-btn {
    display: none;
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
}
    .sidebar-close-btn span {
        display: inline-block;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        transform: translateY(-1px);
    }

.admin-sidebar {
    overflow-x: hidden;
    transition: width .28s ease, padding .28s ease, transform .28s ease;
}

/* desktop collapsed state */
body.desktop-sidebar-collapsed .admin-sidebar {
    width: 92px;
    padding: 24px 12px;
}

body.desktop-sidebar-collapsed .brand-wrap {
    justify-content: center;
    padding: 14px 10px;
    gap: 0;
}

body.desktop-sidebar-collapsed .brand-text {
    max-width: 0;
    opacity: 0;
}

body.desktop-sidebar-collapsed .admin-nav-title {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

body.desktop-sidebar-collapsed .nav-text {
    max-width: 0;
    opacity: 0;
    margin: 0;
}

body.desktop-sidebar-collapsed .admin-nav-link {
    justify-content: center;
    padding: 14px 10px;
    gap: 0;
    transition: padding .28s ease, gap .28s ease, justify-content .28s ease;
}

    body.desktop-sidebar-collapsed .admin-nav-link i {
        margin: 0;
        font-size: 1.1rem;
    }

body.desktop-sidebar-collapsed .brand-icon {
    margin: 0;
}

body.desktop-sidebar-collapsed .admin-sidebar::-webkit-scrollbar {
    width: 4px;
}

/* mobile sidebar */
@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: 280px;
        z-index: 1200;
    }

    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .sidebar-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.desktop-sidebar-collapsed .admin-sidebar {
        width: 280px;
        padding: 24px 18px;
    }

    body.desktop-sidebar-collapsed .brand-wrap {
        justify-content: flex-start;
        gap: 14px;
        padding: 16px;
    }

    body.desktop-sidebar-collapsed .brand-text {
        max-width: 180px;
        opacity: 1;
    }

    body.desktop-sidebar-collapsed .admin-nav-title {
        max-height: 20px;
        opacity: .55;
        margin: 24px 12px 12px;
    }

    body.desktop-sidebar-collapsed .nav-text {
        max-width: 180px;
        opacity: 1;
        margin: 0;
    }

    body.desktop-sidebar-collapsed .admin-nav-link {
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
}


.admin-grid th.status-header {
    text-align: center;
}
.status-header {
    width: 1% !important;
    min-width: 1px !important;
    max-width: 1% !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding-left: 10px !important;
/*    padding-right: 10px !important;*/
}

.status-column {
    width: 1% !important;
    min-width: 1px !important;
    max-width: 1% !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}



/* =========================================
   BRAND DIVIDER
   ========================================= */
.brand-wrap {
    position: relative;
    margin-bottom: 30px;
}

    .brand-wrap::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: -16px;
        height: 1px;
        background: rgba(255,255,255,.10);
    }

/* =========================================
   DATATABLES ADMIN STYLING
   ========================================= */
.dataTables_wrapper {
    padding-top: 6px;
}

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 14px;
    }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-weight: 600;
            color: #334155;
            font-size: 14px;
        }

        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            min-height: 40px;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            padding: 8px 12px;
            background: #fff;
            color: #0f172a;
            outline: none;
        }

        .dataTables_wrapper .dataTables_filter input {
            min-width: 220px;
        }

    .dataTables_wrapper .dataTables_info {
        color: #64748b;
        font-size: 14px;
        padding-top: 14px;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 10px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            min-width: 38px !important;
            height: 38px;
            border-radius: 10px !important;
            border: 1px solid #dbe3ef !important;
            background: #fff !important;
            color: #0f172a !important;
            margin-left: 6px !important;
            padding: 8px 12px !important;
            box-shadow: none !important;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current {
                background: linear-gradient(135deg,#14b8a6,#0f766e) !important;
                border-color: #0f766e !important;
                color: #fff !important;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                background: #f8fafc !important;
                border-color: #cbd5e1 !important;
                color: #0f172a !important;
            }

    .dataTables_wrapper .dt-layout-row {
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dt-layout-table {
        overflow-x: auto;
    }

    .dataTables_wrapper table.dataTable {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse !important;
    }

        .dataTables_wrapper table.dataTable thead th {
            border-bottom: 1px solid #e2e8f0 !important;
        }

        .dataTables_wrapper table.dataTable tbody td {
            border-top: none !important;
        }

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
    width: 100% !important;
}


/* =========================================
   BILINGUAL HINDI + ENGLISH INPUT SUPPORT
   ========================================= */

.admin-input,
.bilingual-input {
    font-family: "Noto Sans Devanagari","Inter","Nirmala UI","Mangal","Segoe UI",sans-serif;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

.bilingual-input {
    line-height: 1.7;
    letter-spacing: 0;
    word-spacing: 0;
}

textarea.bilingual-input {
    line-height: 1.8;
    resize: vertical;
}

.bilingual-help {
    color: #64748b;
    font-size: .84rem;
    margin-top: 8px;
}


/* =========================================
   ADMIN HINDI TRANSLITERATION INPUT
   ========================================= */

.hi-translit-wrapper {
    width: 100%;
}

.hi-translit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.hi-translit-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .02em;
}

.hi-translit-mode-group {
    display: inline-flex;
    align-items: center;
    background: #eef2ff;
    border: 1px solid #dbe4ff;
    border-radius: 12px;
    overflow: hidden;
}

.hi-mode-btn {
    border: none;
    background: transparent;
    color: #334155;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    min-width: 44px;
    cursor: pointer;
    transition: .18s ease;
}

    .hi-mode-btn.active {
        background: #2563eb;
        color: #fff;
    }

.hi-suggestion-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.hi-suggestion-chip {
    border: none;
    background: #fff;
    color: #0f172a;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    border: 1px solid #dbeafe;
    cursor: pointer;
    transition: .18s ease;
}

    .hi-suggestion-chip:hover {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .hi-suggestion-chip.active {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
    }

.admin-input[data-hindi-translit='true'] {
    font-family: "Noto Sans Devanagari","Nirmala UI","Mangal","Segoe UI",sans-serif;
    line-height: 1.7;
}

/* Notice form title/date alignment */
.notice-title-col .hi-translit-wrapper {
    position: relative;
}

.notice-title-col .hi-translit-toolbar {
    position: absolute;
    top: -36px;
    right: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

.notice-title-col .hi-translit-label {
    display: none;
}

@media (max-width: 991.98px) {
    .notice-title-col .hi-translit-toolbar {
        position: static;
        margin-bottom: 8px;
    }
}


.notice-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

    .notice-form-actions .btn {
        width: 100%;
        margin: 0;
    }


.gov-title-col .hi-translit-wrapper {
    position: relative;
}

.gov-title-col .hi-translit-toolbar {
    position: absolute;
    top: -36px;
    right: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

.gov-title-col .hi-translit-label {
    display: none;
}

/* Government Order buttons 50-50 */
.gov-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

    .gov-form-actions .btn {
        width: 100%;
        margin: 0;
    }

@media (max-width: 991.98px) {
    .gov-title-col .hi-translit-toolbar {
        position: static;
        margin-bottom: 8px;
    }
}

/* =========================================
   ADMIN TOAST FIX
   ========================================= */
/* =========================================
   ADMIN TOAST FIX
   ========================================= */
/* =========================================
   ADMIN TOAST FIX
   ========================================= */
body.admin-body .swal2-container.admin-toast-container {
    position: fixed !important;
    z-index: 100000 !important;
    pointer-events: none !important;
}

body.admin-body .swal2-container.admin-toast-container.swal2-top-end {
    top: 0 !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
}

body.admin-body .swal2-popup.admin-toast-popup.swal2-toast {
    margin: 0 !important;
    pointer-events: auto !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
}


/* =========================================
   ADMIN RESPONSIVE POLISH
   ========================================= */

@media (max-width: 991.98px) {
    .page-hero {
        flex-direction: column;
        padding: 22px 20px;
        border-radius: 22px;
    }

    .panel-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-card-body {
        padding: 20px;
    }

    .notice-form-actions,
    .gov-form-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body.admin-body .admin-content {
        padding: 84px 12px 12px;
    }

    .admin-topbar {
        padding: 14px 12px;
    }

    .topbar-title {
        font-size: 1rem;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .page-hero,
    .panel-card,
    .metric-card,
    .feature-card-admin {
        border-radius: 18px;
    }

    .panel-card-header,
    .panel-card-body {
        padding: 16px;
    }

    .form-actions,
    .btn-admin-primary,
    .btn-admin-light,
    .btn-admin-edit,
    .btn-admin-delete {
        width: 100%;
    }
}


@media (max-width: 991.98px) {
  .brand-wrap {
    border-radius: 12px;
    padding: 12px;
    gap: 10px;
    margin-bottom: 16px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-subtitle {
    font-size: 11px;
  }

  .sidebar-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .brand-text {
    max-width: 140px;
  }
}



body.desktop-sidebar-collapsed .brand-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  margin-bottom: 16px;
  justify-content: center;
}


/* ============================================================
   Notice Management — link-source toggle (URL vs PDF)
   Used on /admin/notices form.
   ============================================================ */
.notice-link-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.notice-link-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.notice-link-option:hover { border-color: #cbd5e1; }

.notice-link-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notice-link-option-bullet {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    position: relative;
    background: #ffffff;
    transition: border-color .15s ease;
}

.notice-link-option.is-active {
    border-color: #1d4ed8;
    background: #eff5ff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}

.notice-link-option.is-active .notice-link-option-bullet { border-color: #1d4ed8; }

.notice-link-option.is-active .notice-link-option-bullet::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d4ed8;
}

.notice-link-option-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.notice-link-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.notice-link-option-help {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.notice-link-row { animation: noticeLinkRowFade .18s ease; }

@keyframes noticeLinkRowFade {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Inline clear button on the uploaded-pill (selected file) */
.uploaded-pill .uploaded-clear {
    background: transparent;
    border: 0;
    padding: 0 0 0 4px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.uploaded-pill .uploaded-clear:hover { color: #b91c1c; }

/* Admin grid — Notice link-source pill + clickable link cell */
.link-type-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.link-type-cell.is-url { color: #1d4ed8; background: #eff5ff; }
.link-type-cell.is-pdf { color: #92400e; background: #fef3c7; }

.link-source-cell a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

.link-source-cell a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
    .notice-link-toggle { grid-template-columns: 1fr; }
}