:root {
    --sidebar-bg: #0E2F66;
    --sidebar-bg-light: #16397a;
    --sidebar-accent: #38bdf8;
}

.section-title {
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
    margin-bottom: 25px;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #e4e7ea;
    opacity: 1;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.bd-callout-info {
    border-left-color: #5bc0de;
}

.table th,
.table td,
table th,
table td {
    white-space: normal;
    /* allows wrapping */
    word-wrap: break-word;
    /* wraps long words */
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .welcome-text {
    font-size: 20px;
    line-height: 15px;
}

.container-fluid {
    /* background: #FFF; */
}

.sidebar {
    min-height: calc(100vh - 70px);
}

.content-wrapper {
    padding: 1rem 2rem 1.5rem 2rem;
    /* background: url('{{ URL::to('/') }}/img/brand/pasig-city.jpg') no-repeat center 200px fixed; */
    background-size: cover;
    /* background-color: rgba(255, 255, 255, 0.2); */
    background: #F5F8FC;
    /* Semi-transparent black overlay */
    background-blend-mode: overlay;
    /* Blends the color with the image */
}

/* .card .card-title {
            margin: 0.5rem;
        } */
.form-group {
    margin-bottom: 1rem;
}

.form-group label,
.form-group .form-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.45rem;
}

.form-control-modern,
.form-select-modern {
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    background-color: #ffffff;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control-modern:focus,
.form-select-modern:focus {
    border-color: #4f8ef7;
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.12);
}

.form-control-modern[readonly] {
    background-color: #f4f7fb;
    color: #475569;
}

.modal .modal-dialog .modal-content .modal-header {
    padding: 10px 20px;
}

.modal .modal-dialog {
    margin-top: 25px;
}

.img-md {
    width: 45px;
    height: 45px;
}

.navbar .navbar-brand-wrapper .navbar-brand,
.navbar .navbar-brand-wrapper .navbar-brand:hover {
    color: #FFF;
}

.navbar.headerLight .navbar-menu-wrapper,
.navbar.headerLight .navbar-brand-wrapper {
    background: #FFF;
}

.navbar.headerLight .navbar-menu-wrapper,
.navbar.headerLight .navbar-brand-wrapper {
    height: 70px;
}


/* ── unchanged structural rules — kept exactly as you have them ── */
.navbar .navbar-brand-wrapper,
.sidebar {
    width: 240px;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper {
    width: 70px;
}

.sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    transition: width 0.2s ease;
}

.sidebar-icon-only .sidebar {
    overflow: visible !important;
}

.sidebar-icon-only .sidebar .nav {
    overflow: visible !important;
    will-change: transform;
}

.main-panel {
    width: calc(100% - 240px) !important;
    margin-left: 240px !important;
    min-height: calc(100vh - 70px);
    transition: width 0.2s ease, margin-left 0.2s ease;
}

.sidebar-icon-only .sidebar {
    width: 70px;
}

.sidebar-icon-only .main-panel {
    width: calc(100% - 70px) !important;
    margin-left: 70px !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    white-space: normal !important;
}

.sidebar .nav:not(.sub-menu)>.nav-item>.nav-link[aria-expanded=true],
.sidebar .nav.sub-menu {
    border-radius: 0;
}

.sidebar-icon-only .navbar .navbar-menu-wrapper {
    width: calc(100% - 70px);
}

/* ── Sidebar minimize/expand performance ──────────────────────────────
   While the sidebar is collapsing/expanding, the whole page reflows as
   widths/margins animate. Recomputing the navbar's backdrop-blur and the
   content-wrapper's layered gradient on every frame is what causes the
   stutter. Suspend those heavy paints for the ~0.2s transition, then the
   full visual treatment is restored by removing .sidebar-animating. */
.sidebar-animating .navbar .navbar-menu-wrapper {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sidebar-animating .content-wrapper {
    background: var(--page-bg, #eef2f8) !important;
}

.sidebar-animating .content-wrapper .card,
.sidebar-animating .main-panel > .content-wrapper {
    animation: none !important;
}

/* ── visual layer — enhanced ── */

.sidebar-dark .sidebar,
.sidebar-dark .navbar .navbar-brand-wrapper {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0a2450 100%);
}

.sidebar-dark .sidebar .nav:not(.sub-menu)>.nav-item .nav-link[aria-expanded=true],
.sidebar-dark .sidebar .nav.sub-menu {
    background: rgba(0, 90, 197, 0.35);
}

/* top-level link: quiet by default, lift + tint on hover */
.sidebar-dark .sidebar .nav:not(.sub-menu)>.nav-item>.nav-link {
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.sidebar-dark .sidebar .nav:not(.sub-menu)>.nav-item>.nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* active top-level item: left accent bar instead of a flat block */
.sidebar-dark .sidebar .nav:not(.sub-menu)>.nav-item.active>.nav-link {
    background: rgba(56, 189, 248, 0.12);
    box-shadow: inset 3px 0 0 var(--sidebar-accent);
    color: #fff;
}

/* submenu items */
.sidebar-dark .sidebar .nav.sub-menu .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}

.sidebar-dark .sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: #FFF;
    text-decoration: underline;
    font-weight: 600;
}

.sidebar-dark.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: #0E2F66;
    text-decoration: underline;
    font-weight: 600;
}

.sidebar .nav.sub-menu .nav-item::before {
    background: rgba(255, 255, 255, 0.2);
}
.sidebar .nav.sub-menu .nav-item::after {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar .nav.sub-menu .nav-item.active::before {
    background: var(--sidebar-accent);
}
.sidebar .nav.sub-menu .nav-item.active::after {
    background: var(--sidebar-accent);
}

/* webkit scrollbar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
}

.navbar .navbar-menu-wrapper {
    width: calc(100% - 240px);
    padding-left: 1rem;
    height: 70px;
    /* background: #FFF; */
    transition: width 0.2s ease;
    /* Establish stacking context above sidebar so dropdowns render on top */
    position: relative;
    z-index: 1031;
}

/* Ensure navbar dropdowns render above everything */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.user-dropdown .dropdown-menu {
    z-index: 1050;
}

.navbar .navbar-brand-wrapper{
    height: 70px;
}


/* .dt-container select {
    border: 1px solid #dee2e6;
    outline: 0;
}

.dt-container select {
    height: 0rem;
} */

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left;
}

table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: 0;
    background: #f9f9f9;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
    left: 70%;
    top: 20px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    top: 40px;
}

select.form-control {
    background-color: #FFF;
}

.highcharts-data-table table {
    width: 100%;
}

.highcharts-data-table thead tr {
    background-color: #4a90e2;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
}

.highcharts-data-table table th,
.highcharts-data-table table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: center;
}
.badge-pill {
    border-radius: 50rem;
    padding: 0.35em 0.75em;
    font-size: 0.85em;
    font-weight: 600;
}
.info-row {
    min-height: 130px;
    display: flex;
    gap: 12px; /* controls equal spacing */
}

.info-box {
    flex: 1; /* makes all boxes equal width */
    position: relative;
    padding: 25px;
    color: #fff; /* better contrast */
    transition: all 0.3s ease;
    cursor: default;
    overflow: hidden;
    border-radius: 12px; /* optional nice look */
}

.info-box .label {
    font-size: 14px;
    line-height: 1rem;
    margin-bottom: 0.25rem;
}

.info-box .value {
    /* font-family: 'Inter'; */
    font-size: 24px;
    line-height: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.info-box .value.value-string {
    font-size: 16px;
}

.value-group {
    display: flex;
    justify-content: space-between; /* pushes left & right */
    align-items: center;
    margin-top: 5px;
}

.value-group .subvalue {
    font-size: 12px;
    line-height: 1rem;
    font-weight: 500;
    font-style: italic;
}
.info-box:hover {
    transform: translateY(-5px);
    z-index: 2;
}

/* Background Icons */
.bg-icon {
    position: absolute;
    right: -15px;
    bottom: -15px;
    font-size: 5rem;
    opacity: 0.3;
    pointer-events: none;
}

/* Gradient Flow (complementary colors) */
.box-1 {
    background: #4B9DCF;
}

.box-2 {
    background: #24BAB7;
}

.box-3 {
    background: #8BBB3C;
}

.box-4 {
    background:#F3BA6D;
}

.box-5 {
    background: #ED6C9A;
}

.main-title {
    font-family: 'Inter';
    color:#0E2F66;
    font-size: 21px;
    font-weight: 600;
    line-height: 2.25rem;
}
.badge{
    display:inline-block;
    width:100px;
}
#performanceTable tbody, #overdueTable tbody, #eligibilityTable tbody {
    display: block;
    overflow-y: auto;
}

#performanceTable thead, #performanceTable tbody tr , #overdueTable thead, #overdueTable tbody tr , #eligibilityTable thead, #eligibilityTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Darker solid blue for table header */
.table-th-header th {
    border-bottom: 4px solid #dee2e6;
}

/* Lighter blue for user name row */
.table-td-user td {
    /* background-color: #ffbc33;  */
    background-color: #f4f5f7;
    font-weight: bold;
}

.card-header-filter .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-header-filter  .form-control,
.card-header-filter  .btn {
    min-width: 40px;
}
.tab-content{
    background: #fff;
}

.progress-bar {
    background-color: #4B9DCF;
}
.card .card-title.card-title-dash {
    color: var(--brand-navy, #0E2F66) !important;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
}
.card .card-title.card-title-dash i {
    font-size: 1.25rem;
    opacity: .7;
}

/* ── Dashboard card wrappers ──────────────────────────────────── */
.card-rounded {
    border-radius: 16px !important;
}
.grid-margin {
    margin-bottom: 1.25rem;
}
.stretch-card {
    flex: 1 1 auto;
}
.stretch-card > .card {
    height: 100%;
}

/* ── Dashboard Carousel ──────────────────────────────────────── */
.carousel .carousel-inner {
    border-radius: 12px;
    overflow: hidden;
}
.carousel .carousel-item img {
    border-radius: 12px;
    /* max-height: 260px; */
    object-fit: cover;
}
.carousel .carousel-caption {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
    padding: 16px 14px 10px;
    border-radius: 0 0 12px 12px;
    bottom: 0;
    left: 0;
    right: 0;
}
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    opacity: 1;
}
.carousel .carousel-control-prev { left: 10px; }
.carousel .carousel-control-next { right: 10px; }
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    width: 14px;
    height: 14px;
    filter: invert(1) brightness(0);
}
@media (max-width: 767.98px) {
    .card-header-filter  .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .card-header-filter .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .card-header-filter .form-control,
    .card-header-filter  .btn {
        width: 100% !important;
        min-width: 0;
    }
    .card-header-filter .card-title {
        margin-bottom: 0.5rem;
    }
}


@media (min-width: 992px) {

    .sidebar-dark.sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon,
    .sidebar-dark.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-toggler {
        color: white;
    }
}

@media screen and (max-width: 991px) {
    /* Sidebar hidden off-screen left by default on mobile */
    .sidebar {
        position: fixed;
        top: 70px;
        left: -240px;
        width: 240px !important;
        height: calc(100vh - 70px);
        z-index: 200;
        transition: left 0.25s ease;
    }

    /* off-canvas.js toggles .active on .sidebar-offcanvas — slide it in */
    .sidebar-offcanvas.active {
        left: 0 !important;
    }

    /* Main panel and navbar take full width on mobile */
    .main-panel {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .navbar .navbar-menu-wrapper {
        width: calc(100% - 240px);
    }

    .sidebar-dark .navbar .navbar-brand-wrapper {
        background: #F4F5F7;
    }

    .navbar.headerLight .navbar-menu-wrapper,
    .navbar.headerLight .navbar-brand-wrapper {
        background: #FFF;
    }
}

.card.card-bt {
    border-top: 5px solid #0E2F66;
}


/* ── Sidebar: long menu title fix ─────────────────────────────── */

/* Expanded sidebar: allow titles to wrap and align icon/title horizontally */
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    white-space: normal;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    line-height: 1.3;
    gap: 0.65rem;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-title {
    white-space: normal;
    word-break: break-word;
    flex: 1;
    line-height: 1.35;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-icon {
    flex-shrink: 0;
    margin-top: 0;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-arrow {
    flex-shrink: 0;
    margin-top: 0;
}

/* Reduce font size slightly for admin sidebar to keep items compact */
#sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-title {
    font-size: 0.8rem;
}

/* Collapsed (icon-only) sidebar: reset to centered layout */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-icon {
    margin-top: 0;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-arrow {
    margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   REUSABLE PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header & breadcrumb ───────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.4rem;
}
.page-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0E2F66;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Stat cards (white background, light icon box) ──────────── */
.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(14,47,102,0.08);
    transition: transform 0.18s, box-shadow 0.18s;
    overflow: hidden;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(14,47,102,0.13);
}
.stat-card .card-body {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-card .stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c9ab1;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-card .stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0E2F66;
    line-height: 1;
}
/* Colour variants */
.stat-total   .stat-icon { background: rgba(14,47,102,0.10);  color: #0E2F66; }
.stat-active  .stat-icon { background: rgba(13,148,136,0.12); color: #0d9488; }
.stat-closed  .stat-icon { background: rgba(220,38,38,0.10);  color: #dc2626; }
.stat-urgent  .stat-icon { background: rgba(217,119,6,0.12);  color: #d97706; }
.stat-success .stat-icon { background: rgba(22,163,74,0.10);  color: #16a34a; }
.stat-info    .stat-icon { background: rgba(6,182,212,0.10);  color: #0891b2; }
.stat-warning .stat-icon { background: rgba(245,158,11,0.12); color: #d97706; }
.stat-danger  .stat-icon { background: rgba(239,68,68,0.10);  color: #dc2626; }

/* ── Gradient employee cards (colored background) ───────────── */
.emp-card {
    border: 1px solid var(--line, #e5eaf2);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color .2s ease;
    position: relative;
}
.emp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 14px 0 0 14px;
}
.emp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -6px rgba(14,47,102,0.10);
    border-color: #d0daf0;
}
.emp-card .card-body {
    padding: 18px 20px 18px 24px;
    position: relative;
}
.emp-card .emp-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--ink-faint, #94a3b8);
}
.emp-card .emp-count {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.emp-card .emp-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: transform .2s ease;
}
.emp-card:hover .emp-icon-wrap {
    transform: scale(1.06);
}

/* Colour accents — left bar + icon tint only */
.emp-permanent::before   { background: #1a56c4; }
.emp-permanent .emp-icon-wrap { background: rgba(26,86,196,.08); color: #1a56c4; }

.emp-contractual::before { background: #0d9488; }
.emp-contractual .emp-icon-wrap { background: rgba(13,148,136,.08); color: #0d9488; }

.emp-casual::before      { background: #5b8e3b; }
.emp-casual .emp-icon-wrap { background: rgba(91,142,59,.08); color: #5b8e3b; }

.emp-joborder::before    { background: #d97706; }
.emp-joborder .emp-icon-wrap { background: rgba(217,119,6,.08); color: #d97706; }

.emp-cos::before         { background: #9333ea; }
.emp-cos .emp-icon-wrap { background: rgba(147,51,234,.08); color: #9333ea; }

/* Remove old full-background gradients */
.emp-permanent, .emp-contractual, .emp-casual, .emp-joborder, .emp-cos {
    background: #fff;
    color: inherit;
}

/* ── Modal — consistent app-wide style ──────────────────────── */
.modal .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 45px rgba(14,47,102,0.18);
}
.modal .modal-header {
    background: linear-gradient(135deg, #0E2F66, #005AC5);
    color: #fff;
    border-radius: 14px 14px 0 0;
    padding: 14px 20px;
    border-bottom: none;
}
.modal .modal-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}
.modal .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}
.modal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 12px 20px;
}

.datatable-header thead th,
table.dataTable thead th {
    background: #F8F9FB !important;
    color: #4B5563 !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid #E5E7EB !important;
    vertical-align: middle;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.datatable-header thead th:hover,
table.dataTable thead th:hover {
    background: #F1F3F6 !important;
}

table.dataTable tbody tr.selected td,
table.dataTable tbody tr.active td {
    background-color: #f3f4f6 !important;
    color: #374151;
    font-weight: 500;
}

/* ── Status badges ───────────────────────────────────────────── */
.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.badge-open    { background: #dcfce7; color: #166534; }
.badge-closed  { background: #fee2e2; color: #991b1b; }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-draft   { background: #e0e7ff; color: #3730a3; }


/* ── Quick filter tabs ───────────────────────────────────────── */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-tab {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    background: #f3f4f6;
    color: #6b7280;
    user-select: none;
}
.filter-tab:hover,
.filter-tab.active {
    background: #0E2F66;
    color: #fff;
    border-color: #0E2F66;
}

/* ── Memo list items ─────────────────────────────────────────── */
.memo-item {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    transition: background .12s ease;
}
.memo-item:last-child { border-bottom: none; }
.memo-item:hover { background: #f8faff; }
.memo-item a {
    color: var(--brand-navy, #0E2F66);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.memo-item a i {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.memo-item a:hover {
    color: var(--brand-blue, #005AC5);
}


/* ── Voting / progress bar components ───────────────────────── */
.vote-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0E2F66, #1a56c4);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 14px -2px rgba(14,47,102,0.30);
    letter-spacing: .02em;
}
.vote-header-badge .vote-total-num { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.vote-row { margin-bottom: 18px; }
.vote-row:last-child { margin-bottom: 0; }
.vote-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.vote-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--brand-navy, #0E2F66);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}
.vote-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.vote-pill .pill-count { font-size: 0.85rem; font-weight: 900; }
.vote-pill .pill-sep   { opacity: 0.55; font-weight: 400; }
.vote-pill .pill-pct   { opacity: 0.9; }

.vote-progress {
    height: 10px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.vote-progress .vote-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.vote-tier-1      { background: #0E2F66; }
.vote-tier-2      { background: #3d6098; }
.vote-tier-3      { background: #7a93b0; }
.vote-tier-1-pill { background: #0E2F66; }
.vote-tier-2-pill { background: #3d6098; }
.vote-tier-3-pill { background: #7a93b0; }

.dt-export-btn { display: inline-flex; align-items: center; gap: 4px; }

.badge-btn-primary  { background:#0E2F66; color:#fff; border:none; }
.badge-btn-success   { background:#0d9488; color:#fff; border:none; }
.badge-btn-secondary { background:#16a34a; color:#fff; border:none; }
.badge-btn-danger   { background:#dc2626; color:#fff; border:none; }
.badge-btn-default { background:#6b7280; color:#fff; border:none; }

.badge-btn-primary:hover  { background:#1a3f80; color:#fff; }
.badge-btn-success:hover   { background:#0f766e; color:#fff; }
.badge-btn-secondary:hover { background:#15803d; color:#fff; }
.badge-btn-danger:hover   { background:#b91c1c; color:#fff; }
.badge-btn-default:hover { background:#4b5563; color:#fff; }

.ts-control{
    /* padding: 0.66rem 0.75rem; */
    /* Fix height — never let a long value stretch the control */
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    background-color: #fff !important;
}
/* Override tom-select.bootstrap5 transparent background rule */
.ts-wrapper.form-control:not(.disabled) .ts-control,
.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,
.ts-wrapper.form-select:not(.disabled) .ts-control,
.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control {
    background: #fff !important;
}
/* Truncate the selected item text with ellipsis */
.ts-control .item {
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Keep the wrapper a fixed single-line height */
.ts-wrapper.single .ts-control {
    height: 2.8rem !important;
    align-items: center;
}
.ts-dropdown,
.ts-dropdown .ts-dropdown-content {
    z-index: 99999 !important;
}
/* Prevent cards from clipping TomSelect dropdowns */
.card:has(.ts-wrapper),
.card-body:has(.ts-wrapper) {
    overflow: visible !important;
}
.ts-control .item,
.ts-control .item span,
.ts-control input,
.ts-control .ts-input {
    font-size: inherit !important;
}

/* ──────────────────────────────────────────────────────────────────
   Job Opening Card Design (DataTable inline cards)
   ────────────────────────────────────────────────────────────────── */
.job-card {
    position: relative;
    padding: 14px 16px;
    border-left: 4px solid;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.job-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Status-based card backgrounds */
.job-card-active {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-left-color: #16a34a;
}

.job-card-closed {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-left-color: #dc2626;
}

.job-card-pending {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-left-color: #f59e0b;
}

.job-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.job-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0E2F66;
    line-height: 1.3;
    flex: 1;
}

.badge-sg {
    background: linear-gradient(135deg, #005AC5, #0E2F66);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-dept {
    font-size: 0.88rem;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.job-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78rem;
    color: #6b7280;
}

.job-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-meta-item i {
    font-size: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.job-meta-item strong {
    color: #111827;
    font-weight: 600;
}

/* Status badge in metadata */
.job-status-badge {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.job-card-active .job-status-badge {
    color: #166534;
}

.job-card-active .job-status-badge i {
    color: #16a34a;
}

.job-card-closed .job-status-badge {
    color: #991b1b;
}

.job-card-closed .job-status-badge i {
    color: #dc2626;
}

.job-card-pending .job-status-badge {
    color: #92400e;
}

.job-card-pending .job-status-badge i {
    color: #f59e0b;
}

/* ──────────────────────────────────────────────────────────────────
   Qualification Standards List
   ────────────────────────────────────────────────────────────────── */
.qs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
}

.qs-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.qs-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Education - Blue (lighter) */
.qs-icon-blue {
    background: linear-gradient(135deg, #f5f9ff, #dbeafe);
    color: #3b82f6;
}

/* Training - Green (lighter) */
.qs-icon-green {
    background: linear-gradient(135deg, #f2fdf6, #d1fae5);
    color: #10b981;
}

/* Experience - Amber (lighter) */
.qs-icon-amber {
    background: linear-gradient(135deg, #fffcf0, #fef3c7);
    color: #f59e0b;
}

/* Eligibility - Purple (lighter) */
.qs-icon-purple {
    background: linear-gradient(135deg, #fbf7ff, #f3e8ff);
    color: #a855f7;
}

.qs-content {
    flex: 1;
    min-width: 0;
}

.qs-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 2px;
}

.qs-value {
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.4;
}

.qs-empty {
    color: #9ca3af;
    font-size: 0.82rem;
    font-style: italic;
    padding: 10px;
    text-align: center;
    background: #f3f4f6;
    border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────
   Quick Apply Buttons
   ────────────────────────────────────────────────────────────────── */
.btn-apply {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(245,158,11,0.3);
}

.btn-apply:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245,158,11,0.4);
    color: #fff;
}

.btn-apply:active {
    transform: translateY(0);
}

.btn-apply-closed {
    background: #e5e7eb;
    color: #9ca3af;
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .job-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-meta {
        font-size: 0.75rem;
    }

    .qs-item {
        flex-direction: column;
        gap: 6px;
    }
}

.custom-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.custom-check .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    border-width: 2px;
}

.custom-check .form-check-label {
    margin: 0;
    min-height: auto;
    font-size: .875rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.custom-check .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.custom-check .form-check-input:checked + .form-check-label {
    color: #0d6efd;
    font-weight: 600;
}



.access-card {
    border-radius: 16px;
    overflow: visible;
    border-top: none;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 24px -8px rgba(14, 47, 102, .07);
    transition: box-shadow .2s ease, transform .2s ease;
}
.access-card:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 8px 32px -8px rgba(14, 47, 102, .12);
}

/* ── Modern Toolbar (page title + subtitle + action buttons) ────────────── */
.modern-toolbar {
    position: relative;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-soft, #f1f4f9);
}
.modern-toolbar h4,
.modern-toolbar .fw-bold {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--brand-navy, #0E2F66);
    line-height: 1.3;
    margin-bottom: .3rem !important;
}
.modern-toolbar p.text-muted,
.modern-toolbar .small.text-muted {
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink-faint, #94a3b8) !important;
    letter-spacing: .01em;
    line-height: 1.4;
}

/* ── DataTable Premium Styling ──────────────────────────────────────────── */
.access-card .table {
    font-size: .84rem;
    color: var(--ink, #0f172a);
}
.access-card .table > thead > tr > th {
    background: linear-gradient(180deg, #f8fafd, #f3f6fb) !important;
    color: var(--ink-faint, #94a3b8) !important;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--line, #e5eaf2) !important;
    padding: .75rem .85rem;
    white-space: nowrap;
}
.access-card .table > tbody > tr {
    transition: background .12s ease, box-shadow .12s ease;
}
.access-card .table > tbody > tr > td {
    padding: .7rem .85rem;
    border-bottom: 1px solid #f4f6fa;
    vertical-align: middle;
    color: var(--ink, #0f172a);
}
.access-card .table > tbody > tr:last-child > td {
    border-bottom: none;
}
.access-card .table > tbody > tr:hover > td {
    background: #f8faff !important;
}
.access-card .table > tbody > tr.selected > td,
.access-card .table > tbody > tr.active > td {
    background: linear-gradient(135deg, #eef3ff, #f5f8ff) !important;
    box-shadow: inset 3px 0 0 var(--brand-blue, #005AC5);
    color: var(--brand-navy, #0E2F66);
    font-weight: 550;
}

/* ── Modal Form Inputs (inside modernized modals) ───────────────────────── */
.modal .modal-body .form-label,
.modal .modal-body label.form-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
    letter-spacing: .02em;
    margin-bottom: .4rem;
}
.modal .modal-body .form-control {
    height: 42px;
    padding: .55rem .9rem;
    font-size: .875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.modal .modal-body .form-control:focus {
    border-color: var(--brand-blue, #005AC5);
    box-shadow: 0 0 0 4px rgba(0, 90, 197, .08);
    background: #fff;
}
.modal .modal-body .form-control::placeholder {
    color: #b0b8c9;
    font-weight: 450;
}
.modal .modal-body .form-control[readonly] {
    background: #f8fafc;
    border-color: #edf0f4;
    color: var(--ink-soft, #475569);
    cursor: default;
}
.modal .modal-body .form-select {
    height: 42px;
    padding: .55rem 2.2rem .55rem .9rem;
    font-size: .875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #fff;
    color: var(--ink, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.modal .modal-body .form-select:focus {
    border-color: var(--brand-blue, #005AC5);
    box-shadow: 0 0 0 4px rgba(0, 90, 197, .08);
}
.modal .modal-body textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}
.modal .modal-body .row.g-3 > [class*="col-"] {
    margin-bottom: 0;
}

/* ── Action Buttons (toolbar) — refined ────────────────────────────────── */
.modern-toolbar .btn-action {
    height: 36px;
    padding: 0 14px;
    font-size: .8rem;
    font-weight: 650;
    border-radius: 9px;
    gap: 5px;
    letter-spacing: .01em;
    transition: all .15s ease;
}
.modern-toolbar .btn-action:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, .15);
}
.modern-toolbar .btn-action i {
    font-size: 1.05rem;
}

/* ── Card Body spacing refinement ──────────────────────────────────────── */
.access-card > .card-body {
    padding: 1.5rem 1.75rem;
}

/* ── DataTable Toolbar (.dt-toolbar) ───────────────────────────────────── */
.dt-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line, #e5eaf2);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .03);
}
.dt-toolbar .form-control,
.dt-toolbar .form-control-sm {
    height: 38px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: var(--ink, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dt-toolbar .form-control:focus,
.dt-toolbar .form-control-sm:focus {
    border-color: var(--brand-blue, #005AC5);
    box-shadow: 0 0 0 3px rgba(0, 90, 197, .08);
    background: #fff;
}
.dt-toolbar .btn-group {
    gap: 4px;
    border: none;
}
.dt-toolbar .btn-group .btn,
.dt-toolbar .dt-export-btn {
    height: 38px;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.15rem;
    border-radius: 10px !important;
    border: 1.5px solid #edf0f7;
    background: #f8fafd;
    color: var(--ink-soft, #475569);
    transition: all .15s ease;
    box-shadow: none;
}
.dt-toolbar .btn-group .btn:hover,
.dt-toolbar .dt-export-btn:hover {
    background: #eef2fe;
    border-color: #c3d4f0;
    color: var(--brand-blue, #005AC5);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 90, 197, .10);
}
.dt-toolbar .btn-group .btn:active,
.dt-toolbar .dt-export-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Inline Action Buttons (inside DataTable rows) ─────────────────────── */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: .8rem;
    font-weight: 650;
    border-radius: 8px;
    border: 1.5px solid;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    line-height: 1;
}
.btn-action:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, .10);
}
.btn-action:active {
    box-shadow: none;
}
.btn-action i {
    font-size: 1rem;
    line-height: 1;
}

/* Colour variants — soft tinted backgrounds */
.btn-action.btn-print  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.btn-action.btn-print:hover  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; box-shadow: 0 3px 10px rgba(5, 150, 105, .15); }

.btn-action.btn-view   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.btn-action.btn-view:hover   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; box-shadow: 0 3px 10px rgba(29, 78, 216, .12); }

.btn-action.btn-edit   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.btn-action.btn-edit:hover   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; box-shadow: 0 3px 10px rgba(29, 78, 216, .12); }

.btn-action.btn-delete { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.btn-action.btn-delete:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; box-shadow: 0 3px 10px rgba(220, 38, 38, .12); }

.btn-action.btn-adj    { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.btn-action.btn-adj:hover    { background: #fef3c7; color: #b45309; border-color: #fcd34d; box-shadow: 0 3px 10px rgba(217, 119, 6, .12); }

/* Outline variant for toolbar buttons */
.btn-action--outline {
    background: #fff;
    color: #1d4ed8;
    border: 1.5px solid #bfdbfe;
}
.btn-action--outline:hover {
    background: #eff6ff;
    color: #1e40af;
    border-color: #93c5fd;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .10);
}

/* Primary fill variant (Add button in toolbar) */
.btn-action.btn-sm {
    height: 34px;
    padding: 0 14px;
    font-size: .8rem;
    border-radius: 9px;
}
.btn-action.btn-sm:not(.btn-action--outline) {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
}
.btn-action.btn-sm:not(.btn-action--outline):hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .30);
    color: #fff;
}

/* ── Plain .card inside .content-wrapper (non .access-card pages) ──────── */
.content-wrapper > .card {
    border: 1px solid var(--line, #e5eaf2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 24px -8px rgba(14, 47, 102, .07);
    overflow: visible;
}
.content-wrapper > .card > .card-body {
    padding: 1.5rem 1.75rem;
}
.content-wrapper > .card .card-title {
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--brand-navy, #0E2F66);
}

/* ── Generic .table inside .content-wrapper cards ──────────────────────── */
.content-wrapper .card .table > thead > tr > th {
    background: linear-gradient(180deg, #f8fafd, #f3f6fb) !important;
    color: var(--ink-faint, #94a3b8) !important;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--line, #e5eaf2) !important;
    padding: .75rem .85rem;
    white-space: nowrap;
}
.content-wrapper .card .table > tbody > tr {
    transition: background .12s ease;
}
.content-wrapper .card .table > tbody > tr > td {
    padding: .7rem .85rem;
    border-bottom: 1px solid #f4f6fa;
    vertical-align: middle;
    font-size: .74rem;
    color: var(--ink, #0f172a);
}
.content-wrapper .card .table > tbody > tr:last-child > td {
    border-bottom: none;
}
.content-wrapper .card .table > tbody > tr:hover > td {
    background: #f8faff !important;
}
.content-wrapper .card .table > tbody > tr.selected > td {
    background: #f3f4f6 !important;
    box-shadow: none !important;
    color: #374151;
    font-weight: 550;
}
/* Override DataTables selected row box-shadow (blue inset) */
table.dataTable > tbody > tr.selected > *,
table.dataTable > tbody > tr.selected:hover > *,
table.dataTable.table-hover > tbody > tr.selected:hover > * {
    background-color: #f3f4f6 !important;
    box-shadow: none !important;
    color: #374151;
}

/* ── Form inputs globally (consistent premium look) ────────────────────── */
.form-control {
    height: 42px;
    padding: .55rem .9rem;
    font-size: .875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:focus {
    border-color: var(--brand-blue, #005AC5);
    box-shadow: 0 0 0 4px rgba(0, 90, 197, .08);
    background: #fff;
}
.form-control::placeholder {
    color: #b0b8c9;
    font-weight: 450;
}
.form-control[readonly] {
    background: #f8fafc;
    border-color: #edf0f4;
    color: var(--ink-soft, #475569);
}
.form-control-sm {
    height: 36px;
    padding: .4rem .75rem;
    font-size: .82rem;
    border-radius: 9px;
}
.form-select {
    height: 42px;
    padding: .55rem 2.2rem .55rem .9rem;
    font-size: .875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #fff;
    color: var(--ink, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-select:focus {
    border-color: var(--brand-blue, #005AC5);
    box-shadow: 0 0 0 4px rgba(0, 90, 197, .08);
}
textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}
.form-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
    letter-spacing: .02em;
    margin-bottom: .4rem;
}

.icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}

/* Title + subtitle next to .icon-badge */
.icon-badge + div h5,
.icon-badge ~ div h5 {
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--ink, #0f172a);
    margin-bottom: 2px !important;
}
.icon-badge + div p,
.icon-badge ~ div p {
    font-size: .76rem;
    font-weight: 500;
    color: var(--ink-faint, #94a3b8) !important;
    letter-spacing: .01em;
    line-height: 1.4;
}

.icon-badge--amber {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}


.access-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* Segmented pill toggle */
.pill-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.pill-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pill-option {
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.pill-option:hover {
    color: #374151;
}

.pill-input:checked + .pill-option {
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Distinct color for "No" side when checked, using nth-of-type within each group */
.pill-toggle .pill-input:checked + .pill-option {
    font-weight: 600;
}

/* Editable fields: crisp focus state */
.form-control:not(.field-readonly):not(.field-disabled):focus,
.form-select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Read-only: looks intentional, not just greyed-out/broken */
.field-readonly {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
    cursor: default;
}
.field-readonly:focus {
    box-shadow: none;
    border-color: #e5e7eb;
}

/* Disabled: distinct from readonly, slightly more muted */
.field-disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
}

/* Modern Multi-Row Tabs */
.modern-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    padding: .75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    overflow: visible;
}

.modern-tabs .nav-item {
    flex: 0 1 auto;
    margin: 0;
}

.modern-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    min-height: 40px;
    padding: .45rem .9rem;

    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;

    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;

    white-space: nowrap;

    transition: all .2s ease;
}

.modern-tabs .nav-link i {
    font-size: .85rem;
    opacity: .8;
}

.modern-tabs .nav-link:hover {
    background: #ffffff;
    color: #334155;
    border-color: #dbeafe;
}

.modern-tabs .nav-link.active {
    color: #2563eb;
    background: #ffffff;
    border-color: #bfdbfe;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .12);
}

.modern-tabs .nav-link.active i {
    opacity: 1;
}

.modern-tabs-content {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
}

.modern-tabs-content .tab-pane {
    animation: tabFadeIn .2s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tablet */
@media (max-width: 992px) {
    .modern-tabs .nav-link {
        font-size: .8rem;
        padding: .4rem .75rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .modern-tabs {
        gap: .35rem;
    }

    .modern-tabs .nav-item {
        flex: 1 1 calc(50% - .35rem);
    }

    .modern-tabs .nav-link {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}



.modern-modal {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}
.modern-modal .modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 1.1rem 1.5rem;
}
.modern-modal .modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 1rem 1.5rem;
}
.modern-modal .modal-body {
    padding: 1.5rem;
}

.modern-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.modern-table {
    margin-bottom: 0;
}
.modern-table thead th {
    background: #f9fafb;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.85rem 1rem;
}
.modern-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.modern-table tbody tr:last-child td {
    border-bottom: none;
}
.modern-table tbody tr:hover {
    background: #f9fafb;
}

#servicerecordlist td,
#tbleligibility td {
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
    line-height: 1.4;
}

#servicerecordlist td:nth-child(3),
#servicerecordlist td:nth-child(4) {
    min-width: 160px;
}

#servicerecordlist tbody tr,
#tbleligibility tbody tr {
    transition: background 0.12s ease;
}

.table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
}

.status-pill--yes {
    background: #dcfce7;
    color: #166534;
}

.status-pill--no {
    background: #fee2e2;
    color: #dc2626;
}

.modern-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.modern-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.modern-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    background: #e5e7eb;
    border-radius: 999px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.modern-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.modern-switch input:checked + .modern-switch-track {
    background: #6366f1;
}

.modern-switch input:checked + .modern-switch-track::after {
    transform: translateX(18px);
}

.modern-switch-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
}

/* Loading state */
.ts-wrapper.loading .ts-control {
    position: relative;
    padding-left: 34px !important;
}

.ts-wrapper.loading .ts-control::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;

    border: 2px solid #d1d5db;
    border-top-color: #3b82f6;
    border-radius: 50%;

    animation: ts-spin .6s linear infinite;
}

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

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4b5563;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.legend-swatch.tdAbolition { background: #ef4444; }
.legend-swatch.trPending   { background: #f59e0b; }
.legend-swatch.tdVacant    { background: #22c55e; }

.controller-options {
    display: grid;
    gap: 0.75rem;
}

.controller-option {
    display: block;
    cursor: pointer;
}

.controller-option__body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #fff;
    color: #374151;
    font-weight: 600;
    transition: all 0.2s ease;
}

.controller-option__body i {
    width: 1.25rem;
    text-align: center;
    color: #2563eb;
}

.controller-option:hover .controller-option__body,
.controller-option:focus-within .controller-option__body {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.controller-option input:checked + .controller-option__body {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    color: #1d4ed8;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.controller-option input:checked + .controller-option__body i {
    color: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GEMS PREMIUM UI LAYER  ·  v2
   ───────────────────────────────────────────────────────────────────────────
   Design language lifted from the System Logs page and promoted to the shared
   layout (layouts/back.blade.php loads this file).

   Two things live below:
     1. GLOBAL SURFACES — Bootstrap 5 + DataTables 2.x elements retuned to the
        System Logs geometry, so existing pages inherit the look for free.
     2. GEMS UI KIT (.gems-*) — the System Logs components published as
        reusable classes: hero, toolbar, data panel, pager, pills, switches,
        toasts, empty states, collapsibles.

   Geometry: 8/12/18px radii · 10px controls · a 3-step shadow ramp.
   Type:     uppercase micro-labels at .09em · monospace tabular numerals for
             IDs, counts and timestamps.
   Hue:      the Pasig GEMS navy stays the brand anchor; the slate "ink" scale
             from System Logs supplies the neutrals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────────
   Superset of the previous token block. Every custom property the rules above
   this point reference (--page-bg, --card-radius, --ring, --shadow-*,
   --brand-*) is redeclared here, so earlier rules keep resolving. */
:root {
    /* brand */
    --brand-navy:   #0E2F66;
    --brand-blue:   #005AC5;
    --brand-accent: #38bdf8;

    /* ink scale (System Logs neutrals) */
    --ink:        #0f172a;
    --ink-soft:   #475569;
    --ink-faint:  #94a3b8;
    --ink-ghost:  #cbd5e1;

    /* lines & surfaces */
    --line:       #e5eaf2;
    --line-soft:  #f1f4f9;
    --surface:    #ffffff;
    --canvas:     #f6f8fc;
    --page-bg:    #eef2f8;

    /* radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-ctl: 10px;
    --card-radius: 14px;

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 16px -4px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .22);

    /* focus ring */
    --ring: 0 0 0 4px rgba(0, 90, 197, .13);

    /* semantic accents (drive pills, switches, status tints) */
    --c-view:   #2563eb;
    --c-add:    #059669;
    --c-edit:   #d97706;
    --c-delete: #e11d48;
    --c-all:    #7c3aed;

    --gems-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── 2. BASE ────────────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .1px;
    color: var(--ink);
}

::selection { background: rgba(0, 90, 197, .18); }

/* Layered page canvas instead of a flat fill. The .sidebar-animating override
   further up the file is more specific and still wins mid-transition, which is
   what keeps the sidebar collapse smooth. */
.content-wrapper {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(0, 90, 197, .06), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(56, 189, 248, .05), transparent 55%),
        var(--page-bg) !important;
}

/* Utility: visually hidden but reachable by screen readers */
.gems-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Utility: monospace tabular numerals, for IDs / counts / money */
.gems-mono,
.gems-num {
    font-family: var(--gems-mono);
    font-variant-numeric: tabular-nums;
}

/* ── 3. CARDS ───────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card .card-title {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--brand-navy);
}
.card .card-header {
    background: linear-gradient(180deg, #fbfcff, #f6f8fe);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 650;
    color: var(--ink);
}
.card.card-bt { border-top: 3px solid var(--brand-navy); }

/* Retune the older bespoke cards to the new geometry so the app reads as one
   system. Their colours are left alone on purpose. */
.stat-card,
.emp-card,
.access-card,
.modern-tabs-content,
.modern-table-wrap {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.stat-card:hover,
.emp-card:hover { box-shadow: var(--shadow-md); }

/* ── 4. BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--r-ctl);
    font-weight: 650;
    letter-spacing: .1px;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease,
                background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; box-shadow: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    border: none;
    box-shadow: 0 4px 12px rgba(0, 90, 197, .25);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0064da, #123a7c);
    box-shadow: 0 6px 16px rgba(0, 90, 197, .32);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, var(--c-add));
    border: none;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .25);
}
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, var(--c-add), #047857);
    box-shadow: 0 6px 16px rgba(5, 150, 105, .32);
}

.btn-danger {
    background: linear-gradient(135deg, #f43f5e, var(--c-delete));
    border: none;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .25);
}
.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, var(--c-delete), #be123c);
    box-shadow: 0 6px 16px rgba(225, 29, 72, .32);
}

.btn-warning {
    background: linear-gradient(135deg, #fbbf24, var(--c-edit));
    border: none;
    color: #6b3d00;
    box-shadow: 0 4px 12px rgba(217, 119, 6, .28);
}
.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, var(--c-edit), #b45309);
    color: #522f00;
    box-shadow: 0 6px 16px rgba(217, 119, 6, .34);
}

.btn-info {
    background: linear-gradient(135deg, var(--brand-accent), #0891b2);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(8, 145, 178, .25);
}
.btn-info:hover,
.btn-info:focus {
    background: linear-gradient(135deg, #0ea5e9, #0e7490);
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 145, 178, .32);
}

.btn-secondary {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    border: none;
    box-shadow: 0 4px 12px rgba(100, 116, 139, .22);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 6px 16px rgba(100, 116, 139, .3);
}

.btn-dark {
    background: linear-gradient(135deg, #334155, #1e293b);
    border: none;
    box-shadow: 0 4px 12px rgba(30, 41, 59, .25);
}
.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(135deg, #1e293b, var(--ink));
    box-shadow: 0 6px 16px rgba(30, 41, 59, .32);
}

/* Outline variants — fill with their own hue on hover */
.btn-outline-primary { border-color: #b9d2f5; color: var(--brand-blue); }
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
    box-shadow: 0 4px 12px rgba(0, 90, 197, .22);
}
.btn-outline-success { border-color: #a7f3d0; color: var(--c-add); }
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--c-add); border-color: var(--c-add); color: #fff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .22);
}
.btn-outline-danger { border-color: #fecdd3; color: var(--c-delete); }
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--c-delete); border-color: var(--c-delete); color: #fff;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .22);
}
.btn-outline-warning { border-color: #fde68a; color: #b45309; }
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: var(--c-edit); border-color: var(--c-edit); color: #fff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, .24);
}
.btn-outline-info { border-color: #a5e2f4; color: #0891b2; }
.btn-outline-info:hover,
.btn-outline-info:focus {
    background: #0891b2; border-color: #0891b2; color: #fff;
    box-shadow: 0 4px 12px rgba(8, 145, 178, .22);
}
.btn-outline-secondary { border-color: var(--ink-ghost); color: var(--ink-soft); }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: #64748b; border-color: #64748b; color: #fff;
    box-shadow: 0 4px 12px rgba(100, 116, 139, .2);
}

.btn-light {
    background: var(--canvas);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.btn-light:hover,
.btn-light:focus {
    background: var(--page-bg);
    border-color: var(--ink-ghost);
    color: var(--ink);
}

/* ── 5. FORMS ───────────────────────────────────────────────────────────── */
.form-label,
label.col-form-label,
.form-group label,
.form-group .form-label {
    font-weight: 650;
    color: var(--ink-soft);
    letter-spacing: .1px;
    margin-bottom: .45rem;
}

.form-control,
.form-select {
    border-radius: var(--r-ctl);
    border-color: var(--line);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring);
}
.form-control::placeholder { color: var(--ink-faint); }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--canvas);
    color: var(--ink-soft);
    opacity: 1;
}

.input-group-text {
    border-radius: var(--r-ctl);
    background: var(--canvas);
    border-color: var(--line);
    color: var(--ink-soft);
}

.form-check-input {
    border: 2px solid var(--ink-ghost);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.form-check-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring);
}
.form-switch .form-check-input { width: 2.4em; height: 1.25em; cursor: pointer; }

/* Tom Select parity with .form-control */
.ts-wrapper.single .ts-control { border-radius: var(--r-ctl) !important; }
.ts-dropdown {
    border-radius: var(--r-md);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    z-index: 99999 !important;
}

/* ── 6. TABLES ──────────────────────────────────────────────────────────────
   The System Logs table treatment: quiet uppercase header, hairline row rules,
   generous vertical rhythm, soft hover. The !important flags beat the older
   `table.dataTable thead th` block earlier in this file. */
.table > thead th,
.datatable-header thead th,
table.dataTable > thead > tr > th,
table.dataTable thead th {
    background: #f8fafd !important;
    color: var(--ink-faint) !important;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line) !important;
    vertical-align: middle;
    padding-top: .7rem;
    padding-bottom: .7rem;
    white-space: nowrap;
}
.table > thead th:hover,
.datatable-header thead th:hover,
table.dataTable thead th:hover { background: #f2f5fc !important; }

/* Sorted column reads as active */
table.dataTable > thead > tr > th.dt-ordering-asc,
table.dataTable > thead > tr > th.dt-ordering-desc,
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
    background: #eef2fe !important;
    color: var(--brand-blue) !important;
}

.table > tbody > tr,
table.dataTable > tbody > tr { transition: background-color .12s ease; }

.table > tbody > td,
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    padding-top: .65rem;
    padding-bottom: .65rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.table-hover > tbody > tr:hover > *,
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable > tbody > tr:hover > * {
    background-color: #fafbff !important;
    box-shadow: none;
}
.table-bordered { border-color: var(--line-soft); }

/* Row state tints keep their accent bar */
.selected,
table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected td,
table.dataTable tbody tr.active td {
    background-color: #eef2fe !important;
    color: var(--brand-navy);
    box-shadow: inset 3px 0 0 var(--brand-blue);
}


.table-td-user td { background-color: var(--canvas); font-weight: 650; }
.table-th-header th { border-bottom: 2px solid var(--line) !important; }

/* ── 7. DATATABLES CONTROLS (v2 `dt-*` and legacy `dataTables_*`) ────────── */
div.dt-container .dt-search input,
div.dt-container .dt-length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    padding: 0 .8rem;
    background: var(--canvas);
    font-size: 13.5px;
    color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    background: #fff;
    border-color: var(--brand-blue);
    box-shadow: var(--ring);
    outline: none;
}
div.dt-container .dt-search input { margin-left: .5rem; }

div.dt-container .dt-search label,
div.dt-container .dt-length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}


div.dt-container .dt-info,
.dataTables_wrapper .dataTables_info {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

div.dt-container .dt-processing {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    background: #fff;
    font-weight: 650;
    color: var(--brand-blue);
}

/* Export / print buttons */
div.dt-buttons .dt-button,
.dt-export-btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-ctl) !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--ink-soft) !important;
    font-size: 13px;
    font-weight: 650;
    padding: 0 .9rem !important;
    margin-right: 6px;
    box-shadow: var(--shadow-sm);
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
div.dt-buttons .dt-button:hover,
.dt-export-btn:hover {
    background: #eef2fe !important;
    border-color: #c3d4f0 !important;
    color: var(--brand-blue) !important;
    transform: translateY(-1px);
}

/* ── 8. MODALS ──────────────────────────────────────────────────────────── */
.modal-content,
.modal .modal-content {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal .modal-header {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
    color: #fff;
    border-bottom: none;
    padding: 14px 20px;
}
.modal .modal-title {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    color: #fff;
}
.modal .btn-close { filter: invert(1) brightness(2); opacity: .85; }
.modal .btn-close:hover { opacity: 1; }
.modal .modal-body { padding: 1.25rem 1.35rem; }
.modal .modal-footer {
    border-top: 1px solid var(--line-soft);
    background: #fbfcfe;
    padding: 12px 20px;
}

/* Cheap solid backdrop on purpose: blurring the whole page behind a heavy
   DataTables view forces a full repaint on every frame of the fade. */
.modal-backdrop.show { background: rgba(10, 25, 55, .5); opacity: 1; }
.modal.fade .modal-dialog {
    transform: translateY(-14px);
    transition: transform .2s ease, opacity .2s ease;
    will-change: transform, opacity;
}
.modal.show .modal-dialog { transform: translateY(0) scale(1); }

/* ── 9. BADGES ──────────────────────────────────────────────────────────────
   NOTE: an earlier rule in this file sets `.badge { width: 100px }`, which
   forces every badge to a fixed width and breaks pill sizing. Neutralised here
   so badges hug their content. To restore the old behaviour, delete the
   width/min-width lines in the block below. */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-width: 0;
    font-weight: 650;
    font-size: .74rem;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: .4em .8em;
}
.badge-pill { border-radius: 999px; padding: .35em .75em; font-size: .85em; font-weight: 650; }

.badge.bg-primary   { background: rgba(0, 90, 197, .12) !important;   color: var(--brand-blue) !important; }
.badge.bg-secondary { background: rgba(100, 116, 139, .14) !important; color: var(--ink-soft) !important; }
.badge.bg-success   { background: #ecfdf5 !important;                  color: #047857 !important; }
.badge.bg-danger    { background: #fff1f2 !important;                  color: #be123c !important; }
.badge.bg-warning   { background: #fffbeb !important;                  color: #b45309 !important; }
.badge.bg-info      { background: #e6f6fb !important;                  color: #0e7490 !important; }
.badge.bg-dark      { background: rgba(30, 41, 59, .12) !important;    color: #1e293b !important; }
.badge.bg-light     { background: var(--line-soft) !important;         color: var(--ink-soft) !important; }

.badge-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.badge-open    { background: #ecfdf5; color: #047857; }
.badge-closed  { background: #fff1f2; color: #be123c; }
.badge-pending { background: #fffbeb; color: #b45309; }
.badge-draft   { background: #eef2fe; color: #3730a3; }

/* ── 10. ALERTS ─────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: var(--r-md);
    font-size: .88rem;
    box-shadow: var(--shadow-sm);
}
.alert-primary   { background: #eff4fd; color: #123a7c; border-left-color: var(--brand-blue); }
.alert-success   { background: #ecfdf5; color: #047857; border-left-color: var(--c-add); }
.alert-danger    { background: #fff1f2; color: #be123c; border-left-color: var(--c-delete); }
.alert-warning   { background: #fffbeb; color: #b45309; border-left-color: var(--c-edit); }
.alert-info      { background: #e6f6fb; color: #0e7490; border-left-color: #0891b2; }
.alert-secondary { background: var(--canvas); color: var(--ink-soft); border-left-color: var(--ink-faint); }

/* ── 11. bootstrap-notify TOASTS ────────────────────────────────────────────
   Restyled to the dark System Logs toast. ShowNotification() in
   layouts/back.blade.php renders these, so no JS change is needed. */
[data-notify="container"] {
    border: none !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 13px 44px 13px 15px !important;
    background: #101827 !important;
    color: #f1f5f9 !important;
    border-left: 3px solid var(--ink-faint) !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.4;
}
[data-notify="container"] [data-notify="icon"] { font-size: 1.3rem; line-height: 1; }
[data-notify="container"] .btn-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(1) brightness(2);
    opacity: .7;
}
[data-notify="container"] .btn-close:hover { opacity: 1; }
[data-notify="container"].alert-success { border-left-color: #10b981 !important; background: #101827 !important; color: #f1f5f9 !important; }
[data-notify="container"].alert-success [data-notify="icon"] { color: #34d399; }
[data-notify="container"].alert-danger  { border-left-color: var(--c-delete) !important; background: #101827 !important; color: #f1f5f9 !important; }
[data-notify="container"].alert-danger  [data-notify="icon"] { color: #fb7185; }
[data-notify="container"].alert-warning { border-left-color: var(--c-edit) !important; background: #101827 !important; color: #f1f5f9 !important; }
[data-notify="container"].alert-warning [data-notify="icon"] { color: #fbbf24; }
[data-notify="container"].alert-info    { border-left-color: var(--brand-accent) !important; background: #101827 !important; color: #f1f5f9 !important; }
[data-notify="container"].alert-info    [data-notify="icon"] { color: var(--brand-accent); }

/* ── 12. NAV TABS, PILLS, BREADCRUMB, PAGINATION, PROGRESS ──────────────── */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    color: var(--ink-soft);
    font-weight: 650;
    font-size: .86rem;
    padding: .65rem 1.1rem;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--brand-navy); background: #f5f8ff; border-bottom-color: var(--ink-ghost); }
.nav-tabs .nav-link.active { color: var(--brand-blue); background: transparent; border-bottom-color: var(--brand-blue); }

.nav-pills .nav-link {
    border-radius: 999px;
    color: var(--ink-soft);
    font-weight: 650;
    font-size: .86rem;
    padding: .45rem 1.1rem;
    transition: all .15s ease;
}
.nav-pills .nav-link:hover { color: var(--brand-navy); background: var(--page-bg); }
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 90, 197, .28);
}

.breadcrumb {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .82rem;
    box-shadow: var(--shadow-sm);
}
.breadcrumb-item a { color: var(--brand-blue); text-decoration: none; font-weight: 650; }
.breadcrumb-item a:hover { color: var(--brand-navy); }
.breadcrumb-item.active { color: var(--ink-soft); }

.pagination { gap: 4px; }
.page-link {
    border: 1px solid var(--line);
    border-radius: 9px !important;
    color: var(--ink-soft);
    font-weight: 650;
    font-size: .84rem;
    padding: .4rem .75rem;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.page-link:hover { background: #eef2fe; color: var(--brand-blue); border-color: #c3d4f0; }
.page-item.active .page-link {
    background: linear-gradient(180deg, #0f68d8, var(--brand-blue));
    border-color: var(--brand-navy);
    color: #fff;
    box-shadow: 0 2px 6px -1px rgba(0, 90, 197, .45);
}
.page-item.disabled .page-link { opacity: .45; }


/* ── 13. ACCORDION, LIST GROUP, DROPDOWNS, TOOLTIPS ─────────────────────── */
.accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md) !important;
    margin-bottom: 8px;
    overflow: hidden;
}
.accordion-button { font-weight: 650; color: var(--ink-soft); background: #fff; }
.accordion-button:not(.collapsed) { color: var(--brand-blue); background: #f5f8ff; box-shadow: none; }
.accordion-button:focus { border-color: transparent; box-shadow: var(--ring); }

.list-group { border-radius: var(--r-md); overflow: hidden; }
.list-group-item { border-color: var(--line-soft); font-size: .88rem; padding: .75rem 1rem; }
.list-group-item.active { background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy)); border-color: transparent; }
.list-group-item-action:hover { background: #f5f8ff; }

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    font-size: .86rem;
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: .5rem .75rem;
    font-weight: 550;
    color: var(--ink-soft);
    transition: background .12s ease, color .12s ease;
}
.dropdown-item:hover,
.dropdown-item:focus { background: rgba(0, 90, 197, .07); color: var(--brand-navy); }
.dropdown-divider { border-color: var(--line-soft); }

.tooltip-inner {
    background: #101827;
    border-radius: var(--r-sm);
    font-size: .78rem;
    font-weight: 550;
    padding: 6px 10px;
    box-shadow: var(--shadow-md);
}
.tooltip.bs-tooltip-top .tooltip-arrow::before    { border-top-color: #101827; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #101827; }
.tooltip.bs-tooltip-start .tooltip-arrow::before  { border-left-color: #101827; }
.tooltip.bs-tooltip-end .tooltip-arrow::before    { border-right-color: #101827; }

.popover { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.popover-header { background: #f5f8ff; border-bottom: 1px solid var(--line-soft); font-weight: 700; color: var(--brand-navy); }

/* ── 14. TOPBAR ─────────────────────────────────────────────────────────── */
.navbar.default-layout .navbar-menu-wrapper {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 14px rgba(14, 47, 102, .06);
    border-bottom: 1px solid var(--line);
}
.navbar .welcome-text { font-weight: 650; color: var(--ink); }
.navbar .welcome-sub-text { color: var(--ink-faint); font-size: .82rem; letter-spacing: .2px; }

.navbar .user-dropdown .nav-link .img-xs {
    border: 2px solid rgba(0, 90, 197, .15);
    box-shadow: 0 2px 8px rgba(14, 47, 102, .12);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.navbar .user-dropdown .nav-link:hover .img-xs {
    transform: translateY(-1px);
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(0, 90, 197, .22);
}

.navbar .navbar-toggler { border-radius: var(--r-ctl); transition: background .15s ease, color .15s ease; }
.navbar .navbar-menu-wrapper .navbar-toggler:hover { background: rgba(14, 47, 102, .06); }

.navbar .navbar-dropdown,
.navbar .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    overflow: hidden;
    animation: navDropIn .16s ease;
}
@keyframes navDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown-menu .dropdown-header { padding: 14px 12px 10px; }
.navbar .dropdown-menu .dropdown-item {
    border-radius: var(--r-ctl);
    padding: 9px 12px;
    font-size: .86rem;
}
.navbar .dropdown-menu .dropdown-header .img-md {
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(14, 47, 102, .18);
}

/* ── 15. FOOTER & SCROLLBARS ────────────────────────────────────────────── */
.footer {
    background: #fff;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .8rem;
    letter-spacing: .2px;
    margin: 0 !important;
    padding: 16px 2rem;
}
.footer a { color: var(--brand-blue); font-weight: 650; text-decoration: none; }
.footer a:hover { color: var(--brand-navy); }

* { scrollbar-width: thin; scrollbar-color: rgba(14, 47, 102, .25) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(14, 47, 102, .22);
    border-radius: var(--r-sm);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(14, 47, 102, .4); background-clip: content-box; }

/* ── 16. MICRO-INTERACTIONS ─────────────────────────────────────────────────
   fill-mode is "backwards", not "both", on purpose. With "both" the element
   keeps the final transform forever, and a non-none transform turns
   .content-wrapper into a containing block for fixed descendants — which traps
   Bootstrap modals BEHIND the body-level .modal-backdrop. */
.main-panel > .content-wrapper { animation: pageFadeIn .32s ease backwards; }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper .card { animation: cardFadeIn .38s ease backwards; }
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

#app-loading-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 20000;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-accent));
    box-shadow: 0 0 10px rgba(56, 189, 248, .6);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
}
#app-loading-bar.active { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   GEMS UI KIT
   ───────────────────────────────────────────────────────────────────────────
   The System Logs components, published for any page to use. Prefix `gems-`
   is unused elsewhere in the project, so nothing can collide.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────────────────────────
   <section class="gems-hero">
     <div class="gems-hero__inner">
       <div>
         <span class="gems-hero__eyebrow"><span class="gems-pulse"></span> Section</span>
         <h1 class="gems-hero__title">Page title</h1>
         <p class="gems-hero__sub">One line of context.</p>
         <div class="gems-hero__meta">
           <span class="gems-chip"><i class="fa fa-database"></i> <b>128</b> records</span>
         </div>
       </div>
       <div class="gems-score">
         <div class="gems-score__item">
           <span class="gems-score__num">12</span><span class="gems-score__lbl">Open</span>
         </div>
       </div>
     </div>
   </section>                                                                 */
.gems-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    padding: 26px 28px;
    margin-bottom: 16px;
    background:
        radial-gradient(1000px 300px at 86% -45%, rgba(56, 189, 248, .32), transparent 60%),
        radial-gradient(720px 280px at 6% 135%, rgba(0, 90, 197, .40), transparent 62%),
        linear-gradient(135deg, #14315f 0%, var(--brand-navy) 45%, #071b3d 100%);
    box-shadow: var(--shadow-lg);
    color: #fff;
}
.gems-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(540px 250px at 80% 0%, #000, transparent 72%);
    mask-image: radial-gradient(540px 250px at 80% 0%, #000, transparent 72%);
    pointer-events: none;
}
.gems-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.gems-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, .95);
}
.gems-hero__title {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}
.gems-hero__sub {
    margin: 0;
    font-size: 13.5px;
    color: rgba(226, 232, 240, .78);
    max-width: 64ch;
}
.gems-hero__meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.gems-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .20);
    animation: gemsPulse 2s ease-in-out infinite;
}
@keyframes gemsPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .20); }
    50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, .05); }
}

.gems-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #e8ecf6;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.gems-chip b { font-weight: 750; color: #fff; font-variant-numeric: tabular-nums; }

.gems-score {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 4px;
    border-radius: var(--card-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.gems-score__item { padding: 9px 18px; text-align: center; min-width: 96px; }
.gems-score__item + .gems-score__item { border-left: 1px solid rgba(255, 255, 255, .13); }
.gems-score__num {
    display: block;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.gems-score__lbl {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, .72);
}

/* ── TOOLBAR ────────────────────────────────────────────────────────────────
   Add .gems-toolbar--sticky to pin it while scrolling long tables.          */
.gems-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.gems-toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
}
.gems-toolbar__spacer { flex: 1 1 auto; }

.gems-search { position: relative; flex: 1 1 280px; min-width: 210px; }
.gems-search__icon {
    position: absolute;
    top: 50%; left: 13px;
    transform: translateY(-50%);
    color: var(--ink-faint);
    font-size: 13px;
    pointer-events: none;
}
.gems-search input {
    width: 100%;
    height: 40px;
    padding: 0 36px;
    font-size: 13.5px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--canvas);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gems-search input::placeholder { color: var(--ink-faint); }
.gems-search input:focus {
    background: #fff;
    border-color: var(--brand-blue);
    box-shadow: var(--ring);
}
.gems-search__clear {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    display: none;
    width: 24px; height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 24px;
    cursor: pointer;
}
.gems-search__clear:hover { background: var(--ink-ghost); }
.gems-search.has-value .gems-search__clear { display: block; }

.gems-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    cursor: pointer;
    white-space: nowrap;
    transition: all .16s ease;
}
.gems-btn:hover {
    color: var(--brand-blue);
    border-color: #c3d4f0;
    background: #eef2fe;
    transform: translateY(-1px);
}
.gems-btn:active { transform: translateY(0); }
.gems-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.gems-btn.is-on {
    color: #fff;
    background: linear-gradient(180deg, #0f68d8, var(--brand-blue));
    border-color: var(--brand-navy);
}
.gems-btn.is-on:hover { color: #fff; }
.gems-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.gems-select {
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}
.gems-select:focus { border-color: var(--brand-blue); box-shadow: var(--ring); }

.gems-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gems-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink-soft);
}
.gems-legend__dot { width: 9px; height: 9px; border-radius: 3px; }

/* ── DATA PANEL ─────────────────────────────────────────────────────────── */
.gems-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.gems-panel__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gems-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
}

/* indeterminate progress line, pin to the top of a .gems-panel */
.gems-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 5;
}
.gems-progress.is-on { opacity: 1; }
.gems-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
    animation: gemsSlide 1.1s ease-in-out infinite;
}
@keyframes gemsSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* ── CELL PRIMITIVES ───────────────────────────────────────────────────── */
.gems-id {
    font-family: var(--gems-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.gems-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--canvas);
    border: 1px solid var(--line);
    font-family: var(--gems-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}
.gems-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gems-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 750;
    color: #fff;
    background: var(--brand-blue);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.gems-avatar--lg { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.gems-user__txt { min-width: 0; }
.gems-user__name {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gems-user__sub {
    display: block;
    margin-top: 1px;
    font-family: var(--gems-mono);
    font-size: 10.5px;
    color: var(--ink-faint);
}
.gems-when { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.gems-when__abs {
    font-family: var(--gems-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.gems-when__rel { font-size: 10.5px; font-weight: 550; color: var(--ink-faint); }

/* ── EVENT / STATUS PILL ────────────────────────────────────────────────── */
.gems-event {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 460px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    background: #f3f4f8;
    border: 1px solid var(--line);
    color: var(--ink);
}
.gems-event__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.gems-event__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gems-event--info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.gems-event--info    .gems-event__dot { background: var(--c-view); }
.gems-event--muted   { background: #f4f5f7; border-color: #dde2ea; color: var(--ink-soft); }
.gems-event--muted   .gems-event__dot { background: #64748b; }
.gems-event--success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.gems-event--success .gems-event__dot { background: var(--c-add); }
.gems-event--warn    { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.gems-event--warn    .gems-event__dot { background: var(--c-edit); }
.gems-event--danger  { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.gems-event--danger  .gems-event__dot { background: var(--c-delete); }
.gems-event--none    { color: var(--ink-faint); font-style: italic; font-weight: 500; }

/* ── EXPANDED DETAIL BLOCK ─────────────────────────────────────────────── */
.gems-detail { padding: 16px 18px; background: #fbfcff; }
.gems-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 22px;
}
.gems-detail__k {
    display: block;
    margin-bottom: 3px;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.gems-detail__v {
    display: block;
    font-size: 13px;
    font-weight: 550;
    color: var(--ink);
    word-break: break-word;
}
.gems-detail__v--mono { font-family: var(--gems-mono); font-size: 12px; }
.gems-detail__full {
    grid-column: 1 / -1;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── PAGER ──────────────────────────────────────────────────────────────── */
.gems-info { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gems-info b { color: var(--ink); font-weight: 750; }
.gems-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gems-page {
    min-width: 34px; height: 34px;
    padding: 0 9px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    transition: all .14s ease;
}
.gems-page:hover:not(:disabled):not(.is-active) {
    color: var(--brand-blue);
    border-color: #c3d4f0;
    background: #eef2fe;
}
.gems-page.is-active {
    color: #fff;
    background: linear-gradient(180deg, #0f68d8, var(--brand-blue));
    border-color: var(--brand-navy);
    box-shadow: 0 2px 6px -1px rgba(0, 90, 197, .45);
    cursor: default;
}
.gems-page:disabled { opacity: .4; cursor: not-allowed; }
.gems-page:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.gems-gap { padding: 0 4px; color: var(--ink-faint); font-size: 12px; align-self: flex-end; }

/* ── EMPTY STATE ───────────────────────────────────────────────────────── */
.gems-empty { padding: 56px 20px; text-align: center; }
.gems-empty__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    border-radius: 15px;
    background: #eef2fe;
    color: var(--brand-blue);
    font-size: 20px;
}
.gems-empty__title { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--ink); }
.gems-empty__text { margin: 0; font-size: 13px; color: var(--ink-faint); }

/* ── TOASTS (standalone; bootstrap-notify is styled in §11) ─────────────── */
.gems-toasts {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 340px;
    pointer-events: none;
}
.gems-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: #101827;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    border-left: 3px solid #10b981;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: auto;
}
.gems-toast.is-in { opacity: 1; transform: none; }
.gems-toast--error { border-left-color: var(--c-delete); }
.gems-toast--info  { border-left-color: var(--c-view); }
.gems-toast--warn  { border-left-color: var(--c-edit); }

/* ── COLOURED TOGGLE SWITCH ─────────────────────────────────────────────────
   <label class="gems-switch gems-switch--add">
     <input type="checkbox">
     <span class="gems-switch__track"><span class="gems-switch__thumb"></span></span>
     <span class="gems-switch__lbl">Add</span>
   </label>                                                                   */
.gems-switch {
    --sw: var(--brand-blue);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.gems-switch input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
    pointer-events: none;
}
.gems-switch__track {
    position: relative;
    display: block;
    width: 38px; height: 21px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dde3ec;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.gems-switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.gems-switch__lbl { font-size: 11.5px; font-weight: 650; color: var(--ink-soft); }
.gems-switch:hover .gems-switch__track { background: #cfd7e3; }
.gems-switch input:checked + .gems-switch__track { background: var(--sw); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14); }
.gems-switch input:checked + .gems-switch__track .gems-switch__thumb { transform: translateX(17px); }
.gems-switch input:focus-visible + .gems-switch__track { outline: 2px solid var(--sw); outline-offset: 2px; }
.gems-switch input:disabled + .gems-switch__track { opacity: .5; cursor: not-allowed; }

.gems-switch--view   { --sw: var(--c-view); }
.gems-switch--add    { --sw: var(--c-add); }
.gems-switch--edit   { --sw: var(--c-edit); }
.gems-switch--delete { --sw: var(--c-delete); }
.gems-switch--all    { --sw: var(--c-all); }

/* ── TALLY PILL (granted / total with mini progress bar) ────────────────── */
.gems-tally {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--canvas);
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.gems-tally__bar { width: 46px; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.gems-tally__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--c-all));
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
}
.gems-tally.is-empty { color: var(--ink-faint); }
.gems-tally.is-full { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.gems-tally.is-full .gems-tally__fill { background: linear-gradient(90deg, var(--c-add), #10b981); }

/* ── COLLAPSIBLE GROUP ─────────────────────────────────────────────────────
   <section class="gems-collapse">
     <button class="gems-collapse__head" aria-expanded="false" aria-controls="p1">
       <span class="gems-caret"><i class="fa fa-chevron-right"></i></span>
       <span class="gems-collapse__text">
         <span class="gems-collapse__title">Group</span>
         <span class="gems-collapse__hint">4 items</span>
       </span>
       <span class="gems-collapse__aside">...</span>
     </button>
     <div class="gems-collapse__panel" id="p1" style="display:none">...</div>
   </section>                                                                 */
.gems-collapse {
    position: relative;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.gems-collapse:hover { box-shadow: var(--shadow-md); }
.gems-collapse.is-open { border-color: #cfdcf2; box-shadow: var(--shadow-md); }

.gems-collapse__head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background .16s ease;
}
.gems-collapse__head:hover { background: #fafbff; }
.gems-collapse__head:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.gems-collapse.is-open > .gems-collapse__head {
    background: linear-gradient(180deg, #fbfcff, #f6f8fe);
    border-bottom: 1px solid var(--line-soft);
}
.gems-collapse__text { flex: 1 1 auto; min-width: 0; }
.gems-collapse__title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gems-collapse__hint { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }
.gems-collapse__aside { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.gems-collapse__panel { display: none; padding: 14px 16px 16px; background: #fcfdff; }

/* nested variant */
.gems-collapse--sub { border-radius: var(--r-md); margin-bottom: 0; }
.gems-collapse--sub + .gems-collapse--sub { margin-top: 10px; }
.gems-collapse--sub > .gems-collapse__head { padding: 12px 16px; gap: 12px; }
.gems-collapse--sub > .gems-collapse__head .gems-collapse__title { font-size: 13.5px; font-weight: 680; }
.gems-collapse--sub.is-open > .gems-collapse__head { background: #f8fafd; }
.gems-collapse--sub > .gems-collapse__panel { padding: 0; }

.gems-caret {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    background: var(--canvas);
    color: var(--ink-soft);
    font-size: 11px;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .16s ease, color .16s ease;
}
.gems-collapse.is-open > .gems-collapse__head .gems-caret {
    transform: rotate(90deg);
    background: #eef2fe;
    color: var(--brand-blue);
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gems-hero { padding: 20px; }
    .gems-hero__title { font-size: 21px; }
    .gems-score { width: 100%; }
    .gems-score__item { flex: 1; }
    .gems-toolbar--sticky { position: static; }
    .gems-legend { display: none; }
    .gems-panel__foot { justify-content: center; }
    .gems-detail { padding: 14px; }
}
@media (max-width: 600px) {
    .gems-btn__label { display: none; }
    .gems-btn { padding: 0 12px; }
    .gems-event { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CHROME  ·  v3  ·  replaces stylev2.css for layouts/back.blade.php
   ───────────────────────────────────────────────────────────────────────────
   The back office loads plain Bootstrap 5 (assetsv2/bs/css/bootstrap5.min.css);
   every template-specific style lives here. This block styles the redesigned
   topbar / sidebar / shell markup.

   stylev2.css is still on disk because resources/views/layouts/front.blade.php
   uses it. Don't delete the file — it just isn't loaded by this layout.

   JS contracts honoured:
     body.sidebar-icon-only     minimised rail          (template.js)
     body.sidebar-animating     suspend costly paints   (template.js)
     .fixed-top.headerLight     scrolled past 97px      (template.js)
     .nav-item.hover-open       flyout while minimised  (hoverable-collapse.js)
     #sidebar > .nav            must stay a direct child (hoverable-collapse.js)
     .sidebar-offcanvas.active  mobile drawer           (off-canvas.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--page-bg);
    margin: 0;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
a { text-decoration: none; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.container-scroller { position: relative; min-height: 100vh; overflow-x: hidden; }

/* Clears the 70px fixed topbar and drops the .container-fluid gutter. */
.page-body-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: calc(100vh - 70px);
    padding: 70px 0 0 0 !important;
    margin: 0;
}
.main-panel { display: flex; flex-direction: column; }
.main-panel > .content-wrapper { flex: 1 1 auto; }
.main-panel > .footer:last-child { margin-bottom: 0; padding-bottom: 16px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 0;
    padding: 16px 2rem;
    background: #fff;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .8rem;
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.footer__mark { width: 26px; height: 26px; object-fit: contain; opacity: .9; }
.footer__brand b { display: block; color: var(--brand-navy); font-size: .84rem; font-weight: 750; letter-spacing: -.01em; }
.footer__sub { display: block; font-size: .72rem; color: var(--ink-faint); }
.footer__meta { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-ghost); }
.footer a { color: var(--brand-blue); font-weight: 650; }
.footer a:hover { color: var(--brand-navy); }

/* ═══ TOPBAR ═══════════════════════════════════════════════════════════════ */
.navbar.default-layout {
    height: 70px;
    padding: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Brand zone reads as a continuation of the navy sidebar. */
.navbar .navbar-brand-wrapper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    overflow: hidden;
    transition: width .2s ease;
}
.navbar .navbar-brand-wrapper .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.brand-mark img { width: 24px; height: 24px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}
.brand-tag {
    margin-top: 2px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, .78);
}
.navbar .navbar-brand-wrapper .brand-logo-mini { display: none; }

/* Minimised: swap the wordmark for the mini mark */
.sidebar-icon-only .navbar .navbar-brand-wrapper { padding: 0; justify-content: center; }
.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo { display: none; }
.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini { display: inline-flex; }

/* Action bar. Bootstrap 5 makes .navbar-nav a column without .navbar-expand-*,
   so all topbar rows are laid out explicitly here instead. */
.navbar .navbar-menu-wrapper {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1.25rem 0 .85rem;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease, background .2s ease;
}
/* template.js adds .headerLight past 97px of scroll */
.navbar.headerLight .navbar-menu-wrapper {
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 4px 18px -6px rgba(14, 47, 102, .18);
}
.topbar-spacer { flex: 1 1 auto; }

/* Square icon buttons (hamburger, fullscreen, drawer) */
.topbar-btn,
.navbar .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.topbar-btn:hover,
.navbar .navbar-toggler:hover {
    background: #eef2fe;
    border-color: #d7e1f6;
    color: var(--brand-blue);
}
.topbar-btn:focus { box-shadow: none; outline: none; }
.topbar-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* Identity block */
.topbar-identity { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.topbar-seal { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.topbar-greeting { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-greeting__hello {
    font-size: .9rem;
    font-weight: 550;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-greeting__hello b { color: var(--ink); font-weight: 750; }
.topbar-greeting__sub {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.topbar-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* Clock chip */
.topbar-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: .3rem .75rem;
    border-radius: var(--r-ctl);
    background: var(--canvas);
    border: 1px solid var(--line);
    line-height: 1.15;
}
.topbar-clock__time {
    font-family: var(--gems-mono);
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.topbar-clock__date {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* User trigger */
.topbar-user__trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    height: 44px;
    padding: 0 .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.topbar-user__trigger:hover {
    border-color: #c3d4f0;
    background: #f7f9ff;
    box-shadow: var(--shadow-sm);
}
.topbar-user__trigger:focus { outline: none; }
.topbar-user__trigger:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.topbar-user__trigger .img-xs { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.topbar-user__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.topbar-user__name {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-user__role {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.topbar-user__caret { font-size: 1rem; color: var(--ink-faint); transition: transform .18s ease; }
.topbar-user__trigger[aria-expanded="true"] .topbar-user__caret { transform: rotate(180deg); }

/* User dropdown */
.user-menu { min-width: 262px; padding: 6px; }
.user-menu__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 12px 12px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
}
.user-menu__head .img-md {
    width: 46px; height: 46px;
    border: 3px solid #fff;
    box-shadow: 0 3px 12px rgba(14, 47, 102, .18);
}
.user-menu__id { display: flex; flex-direction: column; min-width: 0; }
.user-menu__name {
    font-size: .88rem;
    font-weight: 750;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu__no {
    font-family: var(--gems-mono);
    font-size: .7rem;
    color: var(--ink-faint);
}
.user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.user-menu .dropdown-item i { width: 1.1rem; font-size: 1.05rem; color: var(--brand-blue); text-align: center; }
.dropdown-item--danger { color: #be123c !important; }
.dropdown-item--danger i { color: var(--c-delete) !important; }
.dropdown-item--danger:hover,
.dropdown-item--danger:focus { background: #fff1f2 !important; color: #9f1239 !important; }

/* Avatars */
.img-xs { width: 32px; height: 32px; object-fit: cover; }
.img-sm { width: 38px; height: 38px; object-fit: cover; }
.img-md { object-fit: cover; }

/* Dropdown anchor for the user menu (explicit, not inherited from .dropdown). */
.topbar-user { position: relative; }

/* ═══ SIDEBAR ══════════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; }
/* Keep natural height so .sidebar's own overflow-y does the scrolling; without
   this the flex column would shrink the nav instead. */
.sidebar > .nav { flex: 0 0 auto; }

/* Sticky filter — a sibling of .nav, never a wrapper (see JS contract above). */
.sidebar-search {
    position: sticky;
    top: 0;
    z-index: 6;
    flex: 0 0 auto;
    padding: .8rem .85rem .6rem;
    background: linear-gradient(180deg, rgba(10, 36, 80, .98), rgba(10, 36, 80, .88));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.sidebar-search__icon {
    position: absolute;
    top: 50%; left: 1.5rem;
    transform: translateY(-50%);
    font-size: 1rem;
    color: rgba(255, 255, 255, .5);
    pointer-events: none;
}
.sidebar-search input {
    width: 100%;
    height: 36px;
    padding: 0 2rem 0 2.15rem;
    font-size: .8rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-ctl);
    outline: none;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sidebar-search input::placeholder { color: rgba(255, 255, 255, .45); }
.sidebar-search input:focus {
    background: rgba(255, 255, 255, .14);
    border-color: var(--sidebar-accent);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}
.sidebar-search__clear {
    position: absolute;
    top: 50%; right: 1.35rem;
    transform: translateY(-50%);
    display: none;
    width: 20px; height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
}
.sidebar-search__clear:hover { background: rgba(255, 255, 255, .34); }
.sidebar-search.has-value .sidebar-search__clear { display: inline-flex; align-items: center; justify-content: center; }

/* Bootstrap 5 .nav is a wrapping ROW and the sidebar's root <ul class="nav">
   carries no .flex-column, so the column is forced here. */
.sidebar .nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: .35rem 0 2.5rem;
    margin: 0;
    list-style: none;
}
.sidebar .nav .nav-item { display: block; width: 100%; position: relative; }
.sidebar .nav .nav-item .nav-link {
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
}

/* Section labels */
.nav-section {
    padding: 1rem 1.25rem .35rem;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, .52);
    pointer-events: none;
}
.nav-section:first-child { padding-top: .35rem; }
.nav-section span { display: block; }

/* Horizontal padding for top-level rows; the vertical rhythm comes from the
   more specific rule earlier in this file. */
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    padding-left: 1.25rem;
    padding-right: .9rem;
}
.sidebar .nav .nav-item .nav-link .menu-icon {
    width: 1.5rem;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
    opacity: .88;
}

/* Child-count pill */
.menu-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
    font-size: .62rem;
    font-weight: 750;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease, color .15s ease;
}
.sidebar .nav-item > .nav-link:hover .menu-count { background: rgba(255, 255, 255, .2); color: #fff; }

/* Chevron drawn with borders — independent of any icon-font codepoint. */
.sidebar .nav .nav-item .nav-link .menu-arrow {
    position: relative;
    width: 12px; height: 12px;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.sidebar .nav .nav-item .nav-link .menu-arrow::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translate(-70%, -50%) rotate(-45deg);
    opacity: .6;
}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }

/* Submenus */
.sidebar .nav.sub-menu {
    display: flex;
    flex-direction: column;
    padding: .2rem 0 .45rem 1.75rem;
    margin: 0;
    list-style: none;
}
.sidebar .nav.sub-menu .nav-item { position: relative; padding-left: 1.1rem; }
/* Tree line connector for submenu items */
.sidebar .nav.sub-menu .nav-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
}
.sidebar .nav.sub-menu .nav-item::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
/* Vertical line connecting siblings */
.sidebar .nav.sub-menu .nav-item:not(:last-child)::before {
    bottom: 0;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
    display: block;
    padding: .4rem .6rem .4rem 0;
    font-size: .775rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .62);
}
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: #fff;
    font-weight: 700;
}

/* Filter states */
.sidebar .nav .nav-item.is-hidden,
.sidebar .nav .nav-section.is-hidden { display: none !important; }
/* Own class instead of Bootstrap's .show so Collapse instances stay in sync. */
.sidebar .collapse.search-open {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}
.nav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, .45);
    font-size: .78rem;
    text-align: center;
}
.nav-empty i { font-size: 1.5rem; opacity: .6; }

/* ── Minimised rail ───────────────────────────────────────────────────────── */
.sidebar-icon-only .sidebar-search,
.sidebar-icon-only .sidebar .nav-section,
.sidebar-icon-only .sidebar .nav .nav-item > .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav .nav-item > .nav-link .menu-count,
.sidebar-icon-only .sidebar .nav .nav-item > .nav-link .menu-arrow {
    display: none;
}
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}
.sidebar-icon-only .sidebar .nav .nav-item > .nav-link .menu-icon {
    width: auto;
    font-size: 1.32rem;
    margin: 0;
}
.sidebar-icon-only .sidebar .nav .nav-item > .collapse { display: none; }

/* Flyout — hoverable-collapse.js sets .hover-open on mouseenter */
.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .nav-link .menu-title {
    display: flex;
    align-items: center;
    position: absolute;
    left: 70px;
    top: 0;
    z-index: 120;
    width: 236px;
    min-height: 100%;
    padding: .7rem 1rem;
    background: var(--sidebar-bg-light, #16397a);
    color: #fff;
    font-size: .82rem;
    font-weight: 650;
    border-radius: 0 var(--r-sm) 0 0;
    box-shadow: var(--shadow-lg);
}
.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .collapse,
.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .collapse.show,
.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .collapsing {
    display: block !important;
    height: auto !important;
    position: absolute;
    left: 70px;
    top: 100%;
    z-index: 119;
    width: 236px;
    background: var(--sidebar-bg-light, #16397a);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: var(--shadow-lg);
}
.sidebar-icon-only .sidebar .nav .nav-item.hover-open > .collapse .sub-menu {
    padding: .4rem 0 .5rem 1.5rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Staged so the topbar degrades one element at a time instead of collapsing.
   Priority as width shrinks: brand → drawer toggle → user menu → seal →
   greeting → fullscreen → clock.                                            */

/* Laptop: the greeting subtitle and the user's name/role text go first. */
@media (max-width: 1199px) {
    .topbar-greeting__sub { display: none; }
    .topbar-user__meta { display: none; }
    .topbar-user__trigger { padding: 0 .3rem; gap: .3rem; }
}

/* ── Tablet & phone: the sidebar becomes an off-canvas drawer ───────────── */
@media screen and (max-width: 991px) {

    /* FIX: two rules earlier in this file repaint the brand zone light on
       mobile — `.sidebar-dark .navbar .navbar-brand-wrapper{background:#F4F5F7}`
       and `.navbar.headerLight .navbar-brand-wrapper{background:#FFF}`. The new
       brand lockup is white text on a translucent-white mark, so those turned
       the whole GEMS brand invisible below 992px. Same specificity (0,3,0) but
       this block is later in the file, so it wins. Keep the zone navy. */
    .sidebar-dark .navbar .navbar-brand-wrapper,
    .navbar.headerLight .navbar-brand-wrapper,
    .sidebar-dark .navbar.headerLight .navbar-brand-wrapper {
        background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0a2450 100%);
    }

    /* FIX: the minimize toggler and the drawer toggler were both visible here,
       giving two hamburgers side by side. Minimize is meaningless on mobile —
       the sidebar is off-canvas and its width is pinned by `width:240px
       !important` — so only the drawer toggle stays. */
    .navbar [data-bs-toggle="minimize"] { display: none !important; }

    .navbar.default-layout { flex-wrap: nowrap; }

    /* Brand no longer has to match the sidebar rail width once the sidebar is
       off-canvas, so let it size to content and give the actions the slack. */
    .navbar .navbar-brand-wrapper {
        width: auto !important;
        min-width: 0;
        flex: 0 1 auto;
        padding: 0 .8rem;
    }
    .navbar .navbar-menu-wrapper {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        gap: .4rem;
        padding-left: .6rem;
        padding-right: max(.6rem, env(safe-area-inset-right));
    }

    /* Truncate rather than push the actions off-screen. */
    .topbar-identity { min-width: 0; flex: 0 1 auto; }
    .topbar-greeting { min-width: 0; }
    .topbar-actions { gap: .35rem; margin-left: auto; }

    /* Comfortable touch targets */
    .topbar-btn,
    .navbar .navbar-toggler { width: 40px; height: 40px; font-size: 1.4rem; }

    .page-body-wrapper { display: block; }
    .sidebar-offcanvas { box-shadow: var(--shadow-lg); }
    .topbar-clock { display: none; }
    .brand-tag { display: none; }
    .footer { padding: 14px 1rem; justify-content: center; text-align: center; }
}

/* Small tablet: drop the greeting text, keep the city seal. */
@media screen and (max-width: 767px) {
    .topbar-greeting { display: none; }
    .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .brand-mark img { width: 21px; height: 21px; }
}

/* Phone: seal and fullscreen go; brand keeps mark + wordmark. */
@media screen and (max-width: 575px) {
    .content-wrapper { padding: .85rem 1rem 1.25rem; }
    .topbar-seal { display: none; }
    #gemsFullscreen { display: none; }
    .topbar-user__caret { display: none; }
    .brand-name { font-size: 1rem; }
    .navbar .navbar-brand-wrapper { padding: 0 .6rem; }
    .navbar .navbar-menu-wrapper { padding-left: .45rem; }
    .topbar-user__trigger { height: 40px; padding: 0 .2rem; border-color: transparent; background: transparent; }
    .topbar-user__trigger:hover { background: transparent; box-shadow: none; }
}

/* Very narrow: wordmark drops to the mark alone so the actions never wrap. */
@media screen and (max-width: 400px) {
    .brand-copy { display: none; }
    .navbar .navbar-brand-wrapper { padding: 0 .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP 4 → 5 COMPATIBILITY SHIM
   ───────────────────────────────────────────────────────────────────────────
   The views still carry Bootstrap 4 class names that Bootstrap 5 renamed and
   therefore ignores. These were already inert before this refactor (stylev2.css
   was Bootstrap 5 as well), so this shim is a net fix, not a workaround for it.

   Counted across every blade view in resources/views:
     .form-row        67   ← biggest win: these form grids were laying out as
                             stacked half-width blocks with no flex parent
     .sr-only         46   ← screen-reader text was rendering visibly
     .mr-*            95     .ml-*  40
     .text-left       71     .text-right 3     .float-right 1
     .custom-control  20     .badge-*  8       .btn-block  6

   NOT fixable in CSS — flagged for a follow-up pass:
     data-toggle= (707), data-target= (657), data-dismiss= (794) are Bootstrap 4
     *JavaScript* hooks. Bootstrap 5 only listens for data-bs-toggle /
     data-bs-target / data-bs-dismiss, so those modals, tabs and dropdowns are
     inert until the attributes are renamed in the markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── .form-row → Bootstrap 5 row with tight gutters ───────────────────────── */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* ── .sr-only → visually hidden (BS5 renamed it .visually-hidden) ─────────── */
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── directional spacing (BS5 uses logical -s-/-e- suffixes) ──────────────── */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* ── text alignment & float (BS5 uses -start / -end) ──────────────────────── */
.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left  { float: left !important; }
.float-right { float: right !important; }
@media (min-width: 576px) {
    .text-sm-left  { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}
@media (min-width: 768px) {
    .text-md-left  { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}

/* ── .btn-block → full-width button ──────────────────────────────────────── */
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block { margin-top: .5rem; }

/* ── .badge-* → soft-tint pills matching the .badge.bg-* set above ────────── */
.badge-primary   { background: rgba(0, 90, 197, .12);   color: var(--brand-blue); }
.badge-secondary { background: rgba(100, 116, 139, .14); color: var(--ink-soft); }
.badge-success   { background: #ecfdf5;                  color: #047857; }
.badge-danger    { background: #fff1f2;                  color: #be123c; }
.badge-warning   { background: #fffbeb;                  color: #b45309; }
.badge-info      { background: #e6f6fb;                  color: #0e7490; }
.badge-dark      { background: rgba(30, 41, 59, .12);    color: #1e293b; }
.badge-light     { background: var(--line-soft);         color: var(--ink-soft); }

/* ── .custom-control → approximate BS5 .form-check ───────────────────────── */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75rem;
}
.custom-control-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    top: .2rem;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand-blue);
}
.custom-control-label {
    margin-bottom: 0;
    font-weight: 550;
    color: var(--ink-soft);
    cursor: pointer;
}
.custom-select {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2rem .375rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-select:focus { border-color: var(--brand-blue); box-shadow: var(--ring); outline: none; }

/* ── misc v4 leftovers ───────────────────────────────────────────────────── */
.align-items-top { align-items: flex-start !important; }
.font-weight-bold    { font-weight: 700 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-light   { font-weight: 300 !important; }
.font-weight-bolder  { font-weight: 800 !important; }

/* Inverse Primary Button */
.btn-inverse-primary {
    background-color: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    border: 1px solid transparent;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-inverse-primary:hover,
.btn-inverse-primary:focus {
    background-color: rgba(13, 110, 253, 0.15);
    color: #0a58ca;
    border-color: rgba(13, 110, 253, 0.2);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
}

.btn-inverse-primary:active {
    background-color: rgba(13, 110, 253, 0.22);
    color: #084298;
}

.btn-inverse-primary:disabled {
    background-color: rgba(13, 110, 253, 0.05);
    color: #6c757d;
    pointer-events: none;
}

.bg-opacity-primary {
  background: rgba(31, 59, 179, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-primary i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-primary p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-secondary {
  background: rgba(5, 195, 251, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-secondary i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-secondary p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-success {
  background: rgba(52, 177, 170, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-success i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-success p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-info {
  background: rgba(81, 177, 225, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-info i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-info p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-warning {
  background: rgba(226, 158, 9, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-warning i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-warning p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-danger {
  background: rgba(249, 95, 83, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-danger i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-danger p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-light {
  background: rgba(233, 233, 233, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-light i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-light p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-dark {
  background: rgba(30, 40, 61, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-dark i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-dark p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}

.bg-opacity-purple {
  background: rgba(123, 32, 199, 0.12);
  padding: 20px;
  border-radius: 14px;
  color: #333;
}
.bg-opacity-purple i {
  color: #000000;
  font-size: 26px;
}
.bg-opacity-purple p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: start;
}