/* ==========================================================================
   योजना व्यवस्थापन प्रणाली — Design tokens & theme
   Layered on top of AdminLTE 3 / Bootstrap 4. Load AFTER adminlte.min.css
   and custom_style.css.

   Colour hierarchy (global standard):
     brand   — identity + the single primary action per view
     neutral — surfaces, borders, ink; carries ~90% of the interface
     status  — good / warning / serious / critical; reserved, never decorative
     series  — chart identity only; never used for UI chrome
   ========================================================================== */

:root {
    /* ---- Brand ramp (single hue, light -> dark) ------------------------- */
    --brand-100: #cde2fb;
    --brand-150: #b7d3f6;
    --brand-200: #9ec5f4;
    --brand-300: #6da7ec;
    --brand-400: #3987e5;
    --brand-500: #2a78d6;
    --brand-600: #256abf;
    --brand-700: #1c5cab;
    --brand-800: #184f95;
    --brand-900: #0d366b;

    --brand: var(--brand-700);
    --brand-hover: var(--brand-800);
    --brand-active: var(--brand-900);
    --brand-wash: #eef4fd;
    --brand-ring: rgba(42, 120, 214, 0.28);

    /* ---- Neutral scale -------------------------------------------------- */
    --n-0: #ffffff;
    --n-25: #fbfcfd;
    --n-50: #f5f7fa;
    --n-100: #eef1f5;
    --n-200: #e2e6ec;
    --n-300: #cbd2dc;
    --n-400: #a3adbb;
    --n-500: #79838f;
    --n-600: #57606c;
    --n-700: #3d4753;
    --n-800: #28303a;
    --n-900: #161c24;

    /* ---- Ink ------------------------------------------------------------ */
    --ink-primary: #161c24;
    --ink-secondary: #57606c;
    --ink-muted: #79838f;
    --ink-inverse: #ffffff;

    /* ---- Surfaces & lines ----------------------------------------------- */
    --surface: #ffffff;
    --surface-sunken: #f5f7fa;
    --surface-raised: #ffffff;
    --line: #e2e6ec;
    --line-strong: #cbd2dc;

    /* ---- Status (reserved — always paired with an icon + label) --------- */
    --good: #0ca30c;
    --good-ink: #0a7d0a;
    --good-wash: #e9f7e9;
    --warning: #fab219;
    --warning-ink: #8a5d00;
    --warning-wash: #fff6e2;
    --serious: #ec835a;
    --serious-ink: #a3441c;
    --serious-wash: #fdeee7;
    --critical: #d03b3b;
    --critical-ink: #a92a2a;
    --critical-wash: #fceaea;
    --info-ink: #1c5cab;
    --info-wash: #eef4fd;

    /* ---- Chart series (validated: adjacent CVD dE 9.1, normal dE 19.6) --- */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;

    /* ---- Chart chrome --------------------------------------------------- */
    --grid-line: #eef1f5;
    --axis-line: #cbd2dc;
    --axis-ink: #79838f;

    /* ---- Radius / elevation / motion ------------------------------------ */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(22, 28, 36, 0.06);
    --shadow-sm: 0 1px 3px rgba(22, 28, 36, 0.08), 0 1px 2px rgba(22, 28, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(22, 28, 36, 0.08), 0 1px 3px rgba(22, 28, 36, 0.05);
    --shadow-lg: 0 12px 32px rgba(22, 28, 36, 0.12);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Type ------------------------------------------------------------ */
    --font-ui: "Noto Sans Devanagari", "Inter", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

body,
.wrapper {
    font-family: var(--font-ui);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-primary);
    background-color: var(--surface-sunken);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    color: var(--ink-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.15s var(--ease);
}

a:hover,
a:focus {
    color: var(--brand-active);
    text-decoration: none;
}

/* Visible, consistent focus ring — keyboard users must never be lost. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--brand-900);
    color: #fff;
    border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.main-header.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    min-height: 56px;
    padding: 0 0.5rem;
}

.main-header .nav-link {
    color: var(--ink-secondary) !important;
    height: 56px;
    display: flex;
    align-items: center;
    border-radius: var(--r-md);
}

.main-header .nav-link i,
.main-header .nav-link .fas,
.main-header .nav-link .far {
    color: var(--ink-secondary) !important;
}

.main-header .nav-link:hover {
    background: var(--n-50);
    color: var(--ink-primary) !important;
}

.topbar-search {
    min-width: 260px;
    max-width: 420px;
}

.topbar-search .form-control {
    background: var(--n-50);
    border-color: var(--line);
    height: 38px;
}

.topbar-search .form-control:focus {
    background: var(--surface);
}

.topbar-search .input-group-text {
    background: var(--n-50);
    border-color: var(--line);
    color: var(--ink-muted);
}

.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: var(--brand-wash);
    color: var(--info-ink);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.avatar-initial {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--brand-900);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.main-sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--line);
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    background: var(--brand-900) !important;
    border-bottom: 0;
    padding: 0.85rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-sidebar .brand-link .brand-image {
    margin: 0;
    max-height: 36px;
    width: 36px;
    background: #fff;
    padding: 2px;
    opacity: 1;
    box-shadow: none;
}

.main-sidebar .brand-link .brand-text {
    color: #fff;
    font-size: 14.5px;
    line-height: 1.25;
    white-space: normal;
}

.main-sidebar .brand-link .brand-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--line);
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    align-items: center;
    gap: 10px;
}

.main-sidebar .user-panel .info {
    padding-left: 0;
    line-height: 1.25;
}

.main-sidebar .user-panel .info a {
    color: var(--ink-primary);
    font-weight: 600;
    font-size: 13.5px;
}

.main-sidebar .user-panel .info .user-role {
    display: block;
    font-size: 11.5px;
    color: var(--ink-muted);
}

/* Section captions break a 30-item list into scannable groups. */
.nav-sidebar .nav-section {
    padding: 14px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.nav-sidebar > .nav-item {
    margin-bottom: 1px;
}

.nav-sidebar .nav-link {
    color: var(--ink-secondary);
    border-radius: var(--r-md);
    margin: 0 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nav-sidebar .nav-link .nav-icon {
    color: var(--ink-muted);
    font-size: 15px;
    width: 1.4rem;
    margin-right: 6px;
    transition: color 0.15s var(--ease);
}

.nav-sidebar .nav-link p {
    white-space: normal;
    line-height: 1.35;
}

.nav-sidebar .nav-link:hover {
    background: var(--n-50);
    color: var(--ink-primary);
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: var(--ink-secondary);
}

/* Active: tinted pill + brand ink + weight. Colour is never the only cue. */
.nav-pills.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active {
    background: var(--brand-wash) !important;
    color: var(--brand-800) !important;
    font-weight: 600;
    box-shadow: none;
}

.nav-sidebar .nav-link.active .nav-icon {
    color: var(--brand-700) !important;
}

.nav-sidebar .nav-treeview {
    background: transparent;
    margin-bottom: 4px;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    margin-left: 22px;
    margin-right: 8px;
    padding: 6px 10px;
    font-size: 13.5px;
    font-weight: 400;
    position: relative;
}

/* Hairline rail ties children to their parent group. */
.nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 4px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
}

.nav-sidebar .nav-treeview {
    position: relative;
}

.nav-sidebar .nav-link > p > .right {
    color: var(--ink-muted);
    transition: transform 0.2s var(--ease);
}

.nav-sidebar .menu-open > .nav-link > p > .right {
    transform: rotate(-90deg);
}

.nav-sidebar .nav-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: var(--n-100);
    color: var(--ink-secondary);
    border-radius: var(--r-pill);
    padding: 1px 8px;
}

.sidebar {
    padding-bottom: 24px;
}

/* Collapsed (sidebar-mini) state: the captions, the sub-brand and the treeview
   rail have nothing to label at 4.6rem wide, so they step out of the way. They
   come back when the rail is hovered, which is how AdminLTE peeks the menu. */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-section,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-sub,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-treeview::before {
    display: none;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
    margin-left: 4px;
    margin-right: 4px;
}

/* ==========================================================================
   Page header / breadcrumb / toolbar
   ========================================================================== */

.content-wrapper {
    background: var(--surface-sunken);
}

.breadcrumb {
    padding: 0.65rem 0;
    background: transparent;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
    font-size: 13px;
}

.breadcrumb-item a {
    color: var(--ink-secondary);
}

.breadcrumb-item.active {
    color: var(--ink-primary);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--n-400);
    content: "›";
}

.content-header {
    padding: 16px 0.5rem 8px;
}

.content-header h4,
.page-title {
    font-size: 21px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.015em;
}

.page-subtitle {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 2px 0 0;
}

/* The header action slot is already right-aligned by its flex row. Legacy
   `float-right` wrappers inside it would collapse their parent to zero height,
   so the float is neutralised there. */
.content-header .float-right,
.content-header .float-left {
    float: none !important;
}

.content-header .float-right > .btn,
.content-header .float-left > .btn {
    margin-bottom: 4px;
}

/* One filter row above everything it scopes. */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
}

.filter-bar label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-wash);
    color: var(--info-ink);
    border-radius: var(--r-pill);
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 500;
    margin: 4px 6px 0 0;
}

.filter-chip a {
    color: inherit;
    opacity: 0.65;
    line-height: 1;
}

.filter-chip a:hover {
    opacity: 1;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
}

.card.card-outline {
    border-top: 1px solid var(--line);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* AdminLTE floats the title, which breaks the flex header layout. */
.card-title {
    float: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: var(--ink-primary);
}

.card-tools {
    float: none;
    margin: 0;
}

.card-subtitle {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 2px 0 0;
    font-weight: 400;
}

.card-body {
    padding: 16px;
}

.card-footer {
    background: var(--n-25);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 12px 16px;
}

/* AdminLTE's coloured top strips, restated as hairlines in the token set. */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
    background: var(--brand-700);
    color: #fff;
}

.card-info.card-outline { border-top: 2px solid var(--brand-600); }
.card-success.card-outline { border-top: 2px solid var(--good); }
.card-warning.card-outline { border-top: 2px solid var(--warning); }
.card-danger.card-outline { border-top: 2px solid var(--critical); }
.card-primary.card-outline { border-top: 2px solid var(--brand-700); }

/* ==========================================================================
   Buttons — one solid primary per view; everything else recedes.
   ========================================================================== */

.btn {
    border-radius: var(--r-md);
    font-weight: 500;
    font-size: 13.5px;
    padding: 7px 14px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
        color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.btn-sm {
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
}

.btn-lg {
    font-size: 15px;
    padding: 10px 20px;
}

.btn i,
.btn em {
    margin-right: 5px;
}

.btn-primary,
.btn-info {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #fff;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active {
    background: var(--brand-900);
    border-color: var(--brand-900);
}

/* Secondary action: quiet, outlined, still obviously clickable. */
.btn-secondary,
.btn-default,
.btn-outline-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-secondary);
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover {
    background: var(--n-50);
    border-color: var(--n-400);
    color: var(--ink-primary);
}

.btn-success,
.btn.bg-olive,
.btn.bg-teal {
    background: var(--good-ink);
    border-color: var(--good-ink);
    color: #fff;
}

.btn-success:hover,
.btn.bg-olive:hover,
.btn.bg-teal:hover {
    background: #086508;
    border-color: #086508;
    color: #fff;
}

.btn-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #4a3600;
}

.btn-warning:hover {
    background: #e9a30d;
    border-color: #e9a30d;
    color: #4a3600;
}

.btn-danger {
    background: var(--critical);
    border-color: var(--critical);
    color: #fff;
}

.btn-danger:hover {
    background: var(--critical-ink);
    border-color: var(--critical-ink);
    color: #fff;
}

.btn.bg-lightblue,
.btn-teal {
    background: var(--brand-wash);
    border-color: var(--brand-200);
    color: var(--brand-800);
}

.btn.bg-lightblue:hover,
.btn-teal:hover {
    background: var(--brand-100);
    border-color: var(--brand-300);
    color: var(--brand-900);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-secondary);
}

.btn-ghost:hover {
    background: var(--n-100);
    color: var(--ink-primary);
}

/* Row-level action menu — replaces stacked button soup in tables. */
.action-menu .dropdown-toggle::after {
    margin-left: 6px;
}

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    font-size: 13.5px;
    color: var(--ink-primary);
}

.dropdown-item {
    border-radius: var(--r-sm);
    padding: 7px 10px;
    color: var(--ink-secondary);
    display: flex;
    align-items: center;
    gap: 9px;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--ink-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--n-50);
    color: var(--ink-primary);
}

.dropdown-item.text-danger i,
.dropdown-item.text-danger {
    color: var(--critical-ink);
}

.dropdown-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    font-weight: 700;
    padding: 8px 10px 4px;
}

.dropdown-divider {
    border-top-color: var(--line);
    margin: 6px 0;
}

/* Pending state — the button says it is working and refuses a second click. */
.btn.is-pending {
    opacity: 0.75;
    cursor: progress;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: yojana-spin 0.6s linear infinite;
}

@keyframes yojana-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.custom-select,
.select2-container--bootstrap4 .select2-selection {
    border-radius: var(--r-md);
    border-color: var(--line-strong);
    color: var(--ink-primary);
    font-size: 13.5px;
    height: calc(2.25rem + 4px);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.form-control::placeholder {
    color: var(--n-400);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.form-control.is-invalid {
    border-color: var(--critical);
}

.invalid-feedback {
    color: var(--critical-ink);
    font-size: 12.5px;
}

label {
    font-weight: 500;
    color: var(--ink-secondary);
    margin-bottom: 4px;
    font-size: 13.5px;
}

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    background: var(--surface);
}

fieldset > legend {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-800);
    text-transform: uppercase;
    padding: 0 8px;
}

.input-group-text {
    background: var(--n-50);
    border-color: var(--line-strong);
    color: var(--ink-muted);
    border-radius: var(--r-md);
}

.select2-container--default .select2-selection--single {
    border-color: var(--line-strong);
    border-radius: var(--r-md);
    height: calc(2.25rem + 4px);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem + 2px);
    color: var(--ink-primary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    color: var(--ink-primary);
    font-size: 13.5px;
    margin-bottom: 0;
}

.table thead > tr > th {
    background: var(--n-50);
    border-bottom: 1px solid var(--line) !important;
    border-top: 0;
    color: var(--ink-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px;
    vertical-align: middle;
}

.table tbody > tr > td {
    border-top: 1px solid var(--line);
    padding: 11px 12px;
    vertical-align: middle;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--line);
}

/* Zebra stripes fight the status colours; a hairline + hover row is enough. */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover tbody tr:hover,
.table-striped tbody tr:hover {
    background-color: var(--brand-wash);
}

.table tfoot > tr > th,
.table tfoot > tr > td {
    background: var(--n-50);
    font-weight: 700;
    border-top: 2px solid var(--line-strong);
}

.table .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Long report tables: keep the header in view while scrolling the body. */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--line);
}

/* Wide tables scroll horizontally, which used to push the action column out of
   sight. Pinning it right keeps the next step reachable without scrolling.

   Layering inside a table (all below the portalled menu at 1080):
     1  ordinary cells
     2  pinned action cells
     3  sticky header row
     4  sticky header's own pinned cell (must beat both)                   */
.table-actions-pinned th:last-child,
.table-actions-pinned td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: -6px 0 8px -6px rgba(22, 28, 36, 0.15);
}

.table-actions-pinned thead th:last-child {
    background: var(--n-50);
    z-index: 4;
}

.table-sticky.table-actions-pinned thead th {
    z-index: 3;
}

.table-actions-pinned tbody tr:hover td:last-child {
    background: var(--brand-wash);
}

/* While open, a row action menu is re-parented to <body> (see ux.js) so the
   scroll container can neither clip it nor stack on top of it. */
.dropdown-menu--portal {
    z-index: 1080;
}

.card-body.table-responsive.p-0 > .table > thead > tr > th:first-child,
.card-body.table-responsive.p-0 > .table > tbody > tr > td:first-child {
    padding-left: 16px;
}

/* ==========================================================================
   Badges & status pills
   ========================================================================== */

.badge {
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    padding: 4px 9px;
    border-radius: var(--r-pill);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pill i {
    font-size: 10px;
}

.status-pill--neutral {
    background: var(--n-100);
    color: var(--ink-secondary);
    border-color: var(--n-200);
}

.status-pill--info {
    background: var(--info-wash);
    color: var(--info-ink);
    border-color: var(--brand-150);
}

.status-pill--good {
    background: var(--good-wash);
    color: var(--good-ink);
    border-color: #bfe6bf;
}

.status-pill--warning {
    background: var(--warning-wash);
    color: var(--warning-ink);
    border-color: #f3ddaa;
}

.status-pill--serious {
    background: var(--serious-wash);
    color: var(--serious-ink);
    border-color: #f6cbb8;
}

.status-pill--critical {
    background: var(--critical-wash);
    color: var(--critical-ink);
    border-color: #f0c2c2;
}

/* AdminLTE colour utility classes, remapped onto the token set. */
.badge-info, .bg-info { background-color: var(--brand-600) !important; color: #fff !important; }
.badge-primary, .bg-primary { background-color: var(--brand-700) !important; color: #fff !important; }
.badge-success, .bg-success { background-color: var(--good-ink) !important; color: #fff !important; }
.badge-warning, .bg-warning { background-color: var(--warning) !important; color: #4a3600 !important; }
.badge-danger, .bg-danger { background-color: var(--critical) !important; color: #fff !important; }
.bg-olive, .bg-teal { background-color: var(--good-ink) !important; color: #fff !important; }
.bg-cyan { background-color: var(--brand-900) !important; color: #fff !important; }
.bg-lightblue { background-color: var(--brand-wash) !important; color: var(--brand-800) !important; }

.text-primary { color: var(--brand-700) !important; }
.text-success { color: var(--good-ink) !important; }
.text-danger { color: var(--critical-ink) !important; }
.text-warning { color: var(--warning-ink) !important; }
.text-info { color: var(--info-ink) !important; }

/* ==========================================================================
   Stat tiles (KPI row) — label · value · delta · trend
   ========================================================================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 118px;
    transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
    color: inherit;
}

a.stat-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: inherit;
}

.stat-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.stat-tile__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.01em;
    margin: 0;
}

.stat-tile__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--brand-wash);
    color: var(--brand-700);
}

.stat-tile__icon--good { background: var(--good-wash); color: var(--good-ink); }
.stat-tile__icon--warning { background: var(--warning-wash); color: var(--warning-ink); }
.stat-tile__icon--critical { background: var(--critical-wash); color: var(--critical-ink); }
.stat-tile__icon--neutral { background: var(--n-100); color: var(--ink-secondary); }

/* Proportional figures: tabular-nums makes big standalone numbers look loose. */
.stat-tile__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink-primary);
}

.stat-tile__value small {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
    margin-left: 2px;
}

.stat-tile__meta {
    font-size: 12.5px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.stat-tile__delta--up { color: var(--good-ink); font-weight: 600; }
.stat-tile__delta--down { color: var(--critical-ink); font-weight: 600; }

/* Hero figure — exactly one per view. */
.hero-figure {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink-primary);
}

/* Meter — fill carries severity, track is a lighter step of the same ramp. */
.meter {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--brand-100);
    overflow: hidden;
}

.meter__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--brand-600);
    transition: width 0.5s var(--ease);
}

.meter--good .meter__fill { background: var(--good-ink); }
.meter--good { background: var(--good-wash); }
.meter--warning .meter__fill { background: var(--warning); }
.meter--warning { background: var(--warning-wash); }
.meter--critical .meter__fill { background: var(--critical); }
.meter--critical { background: var(--critical-wash); }

/* ==========================================================================
   Charts
   ========================================================================== */

.chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.chart-card__head {
    padding: 14px 16px 4px;
}

.chart-card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.chart-card__sub {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 2px 0 0;
}

/* Height includes the axis band, so the axis is never cut off into a scroller. */
.chart-canvas-wrap {
    position: relative;
    padding: 8px 16px 16px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0 16px 12px;
    font-size: 12.5px;
    color: var(--ink-secondary);
}

.chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.chart-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 10px;
}

.chart-legend__swatch--line {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

/* Every chart ships a WCAG-clean table twin. */
.table-twin {
    border-top: 1px solid var(--line);
}

.table-twin summary {
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

.table-twin summary::-webkit-details-marker {
    display: none;
}

.table-twin summary::before {
    content: "\f0ce";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--ink-muted);
}

.table-twin summary:hover {
    background: var(--n-50);
    color: var(--ink-primary);
}

.table-twin[open] summary {
    border-bottom: 1px solid var(--line);
}

.table-twin .table {
    font-size: 12.5px;
}

.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    color: var(--ink-muted);
    font-size: 13.5px;
}

.chart-empty i {
    font-size: 26px;
    color: var(--n-300);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--ink-muted);
}

.empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--n-100);
    color: var(--n-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.empty-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: 4px;
}

/* ==========================================================================
   Timeline (project stage progress)
   ========================================================================== */

.stage-track {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--n-100);
}

.stage-track__step {
    flex: 1;
    height: 6px;
    background: var(--n-200);
}

.stage-track__step--done {
    background: var(--brand-600);
}

.stage-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 5px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    margin: 0;
    gap: 4px;
}

.page-link {
    border-radius: var(--r-sm) !important;
    border-color: var(--line);
    color: var(--ink-secondary);
    font-size: 13px;
    padding: 6px 11px;
}

.page-link:hover {
    background: var(--n-50);
    color: var(--ink-primary);
    border-color: var(--line-strong);
}

.page-item.active .page-link {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--n-400);
    background: var(--surface);
}

/* ==========================================================================
   Modals & alerts
   ========================================================================== */

.modal-content {
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
    padding: 14px 18px;
}

.modal-body {
    padding: 18px;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 13.5px;
}

.alert-success { background: var(--good-wash); border-color: #bfe6bf; color: var(--good-ink); }
.alert-warning { background: var(--warning-wash); border-color: #f3ddaa; color: var(--warning-ink); }
.alert-danger { background: var(--critical-wash); border-color: #f0c2c2; color: var(--critical-ink); }
.alert-info { background: var(--info-wash); border-color: var(--brand-150); color: var(--info-ink); }

/* ==========================================================================
   Small-box (legacy AdminLTE KPI) — kept usable if any page still uses it
   ========================================================================== */

.small-box {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}

.small-box > .inner {
    padding: 16px;
}

/* ==========================================================================
   Page-level affordances
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Top progress bar (Pace) — navigation stops feeling like a dead click. */
.pace {
    pointer-events: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
    background: var(--brand-500);
    box-shadow: 0 0 8px rgba(42, 120, 214, 0.5);
}

/* Rows that navigate on click say so on hover. */
tr[data-href] {
    cursor: pointer;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1030;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-secondary);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--brand-wash);
    color: var(--brand-800);
    border-color: var(--brand-200);
}

/* Toasts inherit the token set instead of the plugin's stock colours. */
.jq-toast-single {
    font-family: var(--font-ui);
    font-size: 13.5px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
}

.jq-toast-single h2 {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
}

.jq-icon-success {
    background-color: var(--good-ink);
    border-color: var(--good-ink);
    color: #fff;
}

.jq-icon-error {
    background-color: var(--critical);
    border-color: var(--critical);
    color: #fff;
}

.jq-icon-info {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

.jq-icon-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #4a3600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767.98px) {
    .content-header h4,
    .page-title {
        font-size: 18px;
    }

    .stat-tile__value {
        font-size: 24px;
    }

    .hero-figure {
        font-size: 36px;
    }

    .topbar-search {
        display: none;
    }

    .filter-bar {
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* The spinner must keep turning — it is the only signal that work is
       in flight — so it opts out of the blanket animation kill. */
    .spinner {
        animation-duration: 0.8s !important;
    }
}

/* ==========================================================================
   Print — the shell disappears, the document stays
   ========================================================================== */

@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .content-header,
    .breadcrumb,
    .filter-bar,
    .no-print,
    .table-twin summary {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        background: #fff !important;
    }

    .card,
    .chart-card {
        border: 0;
        box-shadow: none;
    }

    .table-twin[open] .table,
    .table-twin .table {
        display: table !important;
    }

    a[href]::after {
        content: "";
    }
}