<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailoring ERP — <?= isset($page_title) ? $page_title : 'Dashboard' ?></title>
    <link rel="icon" href="data:,">

    <!-- Preconnect — CDN sathi DNS/TLS handshake aadhich karun theva, load fast houण्यासाठी -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
    <link rel="preconnect" href="https://cdn.datatables.net" crossorigin>
    <link rel="preconnect" href="https://code.jquery.com" crossorigin>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

    <!-- JS libraries loaded here (in <head>) instead of footer, so they are
         available before any page's inline <script> (which runs in <body>,
         before footer.php loads) tries to use $, bootstrap, Swal, etc. -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <style>
        /* ════════════════════════════════════════════════
           CSS VARIABLES
        ════════════════════════════════════════════════ */
        :root {
            --sb-full:      220px;
            --sb-mini:       68px;
            --sb-bg:       #ffffff;
    --sb-hover:    #f3f4f6;
    --sb-active:   #7c3aed;
    --sb-border:   #e5e7eb;
    --sb-label:    #6b7280;
    --sb-text:     #374151;

            --hdr-h:         64px;
            --primary:     #7c3aed;
            --primary-d:   #6d28d9;
            --radius:         10px;
            --trans:    .28s cubic-bezier(.4,0,.2,1);
        }

        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background: #f1f5f9;
            font-family: 'Segoe UI', system-ui, Arial, sans-serif;
            font-size: 15px;
            overflow-x: hidden;
        }

        /* ════════════════════════════════════════════════
           SIDEBAR
        ════════════════════════════════════════════════ */
        .sidebar {
            width: var(--sb-full);
            background: #ffffff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            height: 100vh;
            position: fixed;
            left: 0; top: 0;
            display: flex;
            flex-direction: column;
            z-index: 1050;
            transition: width var(--trans), transform var(--trans);
            box-shadow: 4px 0 24px rgba(124,58,237,.18);
            overflow: hidden;
        }

        /* ── MINI mode (icon-only) on DESKTOP ── */
        body.sb-mini .sidebar          { width: var(--sb-mini); }
        body.sb-mini .sidebar .sb-txt  { opacity:0; width:0; overflow:hidden; white-space:nowrap; transition: opacity var(--trans), width var(--trans); }
        body.sb-mini .sidebar .sb-arrow { display:none; }
        body.sb-mini .sidebar .menu-label { opacity:0; height:0; padding:0; overflow:hidden; transition: opacity var(--trans); }
        body.sb-mini .sidebar .brand-name  { opacity:0; width:0; overflow:hidden; white-space:nowrap; }
        body.sb-mini .sidebar .sidebar-footer-info,
        body.sb-mini .sidebar .sidebar-logout-btn { opacity:0; width:0; overflow:hidden; }
        body.sb-mini .sidebar .sub-menu { display:none !important; }

        /* ── FLYOUT submenu when a has-sub icon is clicked in MINI mode ── */
        body.sb-mini .sidebar li.has-sub.flyout-open > a .sb-tooltip { display:none !important; }
        body.sb-mini .sidebar li.has-sub.flyout-open .sub-menu {
            display: block !important;
            position: absolute;
            left: calc(var(--sb-mini) + 8px);
            top: 4px;
            min-width: 210px;
            background: #1e293b;
            border-radius: 10px;
            padding: 8px;
            box-shadow: 0 10px 28px rgba(0,0,0,.35);
            z-index: 9999;
            animation: slideRightFlyout .18s ease;
        }
        body.sb-mini .sidebar li.has-sub.flyout-open .flyout-label {
            display: block;
            font-size: 10.5px; font-weight:700; color:#94a3b8; text-transform:uppercase;
            letter-spacing: 1.2px; padding: 4px 10px 8px;
        }
        body.sb-mini .sidebar li.has-sub.flyout-open .sub-menu li a {
            color: #cbd5e1;
            padding: 9px 12px;
        }
        body.sb-mini .sidebar li.has-sub.flyout-open .sub-menu li a .sb-txt {
            opacity: 1 !important; width: auto !important; overflow: visible !important;
        }
        body.sb-mini .sidebar li.has-sub.flyout-open .sub-menu li a:hover {
            background: rgba(124,58,237,.35); color:#fff;
        }
        body.sb-mini .sidebar li.has-sub.flyout-open .sub-menu li a.active {
            background: rgba(124,58,237,.6); color:#fff;
        }
        .flyout-label { display:none; }
        @keyframes slideRightFlyout { from { opacity:0; transform: translateX(-6px); } to { opacity:1; transform: translateX(0); } }
        body.sb-mini .sidebar li a    { justify-content: center; padding: 11px 0; }
        body.sb-mini .sidebar li a i  { width:auto; font-size:17px; }
        body.sb-mini .sidebar .sidebar-footer { justify-content: center; padding: 14px 0; }
        body.sb-mini .sidebar .sidebar-brand  { justify-content: center; padding: 18px 0; }

        /* Tooltip on mini mode */
        body.sb-mini .sidebar li { position: relative; }
        body.sb-mini .sidebar li a .sb-tooltip {
            display: block;
            position: absolute;
            left: calc(var(--sb-mini) + 8px);
            top: 50%; transform: translateY(-50%);
            background: #1e293b;
            color: #fff;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            z-index: 9999;
            transition: opacity .18s;
            box-shadow: 0 4px 12px rgba(0,0,0,.3);
        }
        body.sb-mini .sidebar li a:hover .sb-tooltip { opacity: 1; }
        .sb-tooltip { display: none; }

        /* ── MOBILE hidden ── */
        @media (max-width: 991px) {
            .sidebar { transform: translateX(-100%); width: var(--sb-full) !important; }
            .sidebar.mob-open { transform: translateX(0); }
            body.sb-mini .sidebar { width: var(--sb-full) !important; }
        }

        /* ── BRAND ── */
        /*.sidebar-brand {*/
        /*    width: 100%;*/
        /*    padding: 18px 20px;*/
        /*    border-bottom: 1px solid var(--sb-border);*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    gap: 12px;*/
        /*    min-height: var(--hdr-h);*/
        /*    transition: padding var(--trans), justify-content var(--trans);*/
        /*    overflow: hidden;*/
        /*}*/
        
        .sidebar-brand{
    width:100%;
    padding:14px 16px;   /* icon(36px) + 14px*2 = 64px = var(--hdr-h), topbar chya line sobat exact align hoण्यासाठी */
    height:var(--hdr-h);
    border-bottom:1px solid var(--sb-border);
    display:flex;
    align-items:center;
    gap:12px;
    transition:padding var(--trans),justify-content var(--trans);
    overflow:hidden;
    box-sizing:border-box;
}
        .brand-icon {
            width: 36px; height: 36px;
            background: var(--sb-active);
            border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 16px; flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(124,58,237,.4);
            transition: transform var(--trans);
        }
        .sidebar-brand:hover .brand-icon { transform: rotate(-10deg) scale(1.05); }
        .brand-name {
            font-size: 15px; font-weight: 800; color: #111827;
            line-height: 1.2; transition: opacity var(--trans), width var(--trans);
        }
        .brand-sub { font-size: 10.5px; color: var(--sb-label); font-weight: 400; }

        /* ── MENU ── */
        .sidebar-menu {
            flex: 1; padding:10px 16px;
            list-style: none; overflow-y: auto; overflow-x: hidden;
             -ms-overflow-style: none; 
    scrollbar-width: none;
        }
        .sidebar-menu::-webkit-scrollbar { width: 3px;display: none; }
        .sidebar-menu::-webkit-scrollbar-thumb {  background: #000;     
    border-radius: 10px; }

        .menu-label {
            font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px;
            color: var(--sb-label); text-transform: uppercase;
            padding: 16px 12px 5px;
            transition: opacity var(--trans), height var(--trans), padding var(--trans);
        }

        .sidebar-menu li a {
            display: flex; align-items: center; gap: 11px;
            padding: 10px 13px; border-radius: 9px;
            color: var(--sb-text); text-decoration: none;
            font-size: 13.5px; font-weight: 500;
            transition: background var(--trans), color var(--trans), transform .15s, box-shadow .15s;
            white-space: nowrap; overflow: hidden;
            position: relative;
            cursor: pointer;        /* FIX: ensure clickable */
        }
        .sidebar-menu li a i {
            width: 18px; text-align: center; font-size: 14px; flex-shrink: 0;
            transition: transform var(--trans);
            pointer-events: none;   /* FIX: clicks pass through icon to <a> */
        }
        .sidebar-menu li a:hover {
             background: #f3f4f6;
    color: #7c3aed;
            transform: translateX(3px);
        }
        .sidebar-menu li a:hover i { transform: scale(1.15); }
        .sidebar-menu li a.active {
            background: #ede9fe;
    color: #7c3aed;
    box-shadow: none;
        }
        .sidebar-menu li a.active i { transform: scale(1.1); }

        /* FIX: make sure has-sub parent <a href="#"> is always clickable */
        .has-sub > a {
            cursor: pointer !important;
            pointer-events: all !important;
    box-shadow: none;
            
        }

        .sb-arrow {
            margin-left: auto; font-size: 11px;
            color: var(--sb-label); transition: transform var(--trans);
            pointer-events: none;  /* FIX: arrow icon doesn't block click */
        }
        .has-sub.open > a .sb-arrow { transform: rotate(90deg); }

        .sub-menu {
            list-style: none; padding: 3px 0 4px 22px;
            display: none; overflow: hidden;
        }
        .has-sub.open .sub-menu { display: block; animation: slideDown .22s ease; }
        @keyframes slideDown { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }

        .sub-menu li a {
            font-size: 12.5px; padding: 8px 11px;
            color: var(--sb-label); border-radius: 7px;
        }
        .sub-menu li a:hover, .sub-menu li a.active {
            color: #e9d5ff; background: var(--sb-hover);
        }
        .sub-menu li a.active {
            color: #fff; background: rgba(124,58,237,.55);
        }

        /* ── FOOTER ── */
        .sidebar-footer {
            padding: 13px 16px;
            border-top: 1px solid var(--sb-border);
            display: flex; align-items: center; gap: 10px;
            overflow: hidden; transition: padding var(--trans);
        }
        .sf-avatar {
            width: 34px; height: 34px; border-radius: 50%;
            background: var(--sb-active); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 14px; flex-shrink: 0;
        }
        .sidebar-footer-info { flex:1; font-size:13px; font-weight:600; color: #111827; overflow:hidden; transition: opacity var(--trans), width var(--trans); }
        .sidebar-footer-info small { color: var(--sb-label); font-size: 10.5px; font-weight:400; }
        .sidebar-logout-btn {
            color: var(--sb-label); font-size:16px; text-decoration:none;
            transition: color .2s, transform .2s; padding:4px; flex-shrink:0;
        }
        .sidebar-logout-btn:hover { color: #f87171; transform: translateX(2px); }

        /* ════════════════════════════════════════════════
           OVERLAY (mobile)
        ════════════════════════════════════════════════ */
        .sb-overlay {
            display:none; position:fixed; inset:0;
            background: rgba(0,0,0,.52); z-index: 1040;
            backdrop-filter: blur(2px);
        }
        .sb-overlay.on { display:block; animation: fadeIn .2s ease; }
        @keyframes fadeIn { from{opacity:0} to{opacity:1} }

        /* ════════════════════════════════════════════════
           MAIN WRAPPER — FULL WIDTH FIX
        ════════════════════════════════════════════════ */
        .main-wrapper {
            margin-left: var(--sb-full);
            width: calc(100% - var(--sb-full));   /* FIX: explicit width */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            transition: margin-left var(--trans), width var(--trans);
        }
        body.sb-mini .main-wrapper {
            margin-left: var(--sb-mini);
            width: calc(100% - var(--sb-mini));   /* FIX: shrinks correctly */
        }

        @media (max-width: 991px) {
            .main-wrapper {
                margin-left: 0 !important;
                width: 100% !important;
            }
        }

        /* ════════════════════════════════════════════════
           TOP HEADER — FULL WIDTH FIX
        ════════════════════════════════════════════════ */
        .top-header {
            height: var(--hdr-h);
            background: #fff;
            border-bottom: 1px solid #e8e4f7;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky; top:0; z-index:1000;
            box-shadow: 0 2px 12px rgba(124,58,237,.06);
            width: 100%;                            /* FIX: header full width */
        }
        .hdr-left { display:flex; align-items:center; gap:12px; }

        /* Toggle button */
        .sb-toggle {
            width: 38px; height: 38px;
            background: #f5f3ff; border: 1.5px solid #ede9fe;
            border-radius: 9px; color: var(--primary);
            font-size:16px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition: all .2s; flex-shrink:0;
        }
        .sb-toggle:hover { background: var(--primary); color:#fff; border-color: var(--primary); transform: scale(1.05); }

        .page-title-txt { font-size:16px; font-weight:700; color:#0f172a; margin:0; }
        .breadcrumb-nav .breadcrumb { margin:0; font-size:11.5px; }
        .breadcrumb-item a { color: var(--primary); text-decoration:none; }

        .hdr-right { display:flex; align-items:center; gap:14px; }
        .hdr-bell {
            width:36px; height:36px; border-radius:9px;
            background:#f5f3ff; border:1.5px solid #ede9fe;
            display:flex; align-items:center; justify-content:center;
            color: var(--primary); font-size:15px; text-decoration:none;
            transition: all .2s;
        }
        .hdr-bell:hover { background: var(--primary); color:#fff; transform: scale(1.05); }
        .hdr-user { display:flex; align-items:center; gap:9px; }
        .hdr-avatar {
            width:38px; height:38px; border-radius:50%;
            background: var(--primary); color:#fff;
            display:flex; align-items:center; justify-content:center;
            font-weight:700; font-size:15px;
            box-shadow: 0 3px 10px rgba(124,58,237,.3);
        }
        .hdr-uname { font-size:13px; font-weight:700; color:#0f172a; }
        .hdr-urole { font-size:10.5px; color:#64748b; }

        /* ════════════════════════════════════════════════
           PAGE BODY — FULL WIDTH
        ════════════════════════════════════════════════ */
        .page-body {
            padding: 12px 14px 60px 14px;   /* top ani left-right space kami keli, bottom footer sathi tashich */
            flex: 1;
            width: 100%;             /* FIX: full content width */
        }

        /* ── CARD BOX ── */
        .card-box {
            background: #fff;
            border-radius: var(--radius);
            box-shadow: 0 1px 8px rgba(0,0,0,.07);
            padding: 22px 24px;
            transition: box-shadow .2s;
            width: 100%;             /* FIX: card always full width */
        }
        .card-box:hover { box-shadow: 0 4px 20px rgba(124,58,237,.10); }

        .card-box-header {
            display:flex; align-items:center; justify-content:space-between;
            margin-bottom:10px; padding-bottom:8px;
            border-bottom: 1px solid #f1f5f9;
        }
        .card-box-header h5 {
            font-size:16px; font-weight:700; color:#0f172a;
            margin:0; display:flex; align-items:center; gap:8px;
        }

        /* ── STAT CARDS ── */
        .stat-card {
            background:#fff; border-radius:var(--radius);
            padding:20px 22px;
            box-shadow: 0 1px 8px rgba(0,0,0,.07);
            display:flex; align-items:center; gap:16px;
            border-left: 4px solid transparent;
            transition: transform .22s, box-shadow .22s;
            cursor: default;
            width: 100%;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,0,0,.12);
        }
        .stat-icon {
            width:52px; height:52px; border-radius:12px;
            display:flex; align-items:center; justify-content:center;
            font-size:22px; flex-shrink:0;
            transition: transform .22s;
        }
        .stat-card:hover .stat-icon { transform: scale(1.12) rotate(-5deg); }
        .stat-label { font-size:12.5px; color:#64748b; margin-bottom:3px; }
        .stat-value { font-size:28px; font-weight:800; color:#0f172a; line-height:1; }

        /* ── TABLE — FULL WIDTH FIX ── */
        .table {
            width: 100% !important;
        }
        .table-responsive {
            width: 100%;
        }
        .table thead th {
            background: #e4d4e9; color: #020202;
            font-weight:600; font-size:15px;
            padding: 3px 10px;
            border: 1.5px solid #5a7a5a !important;
            white-space:nowrap;
        }
        .table-bordered, .table-bordered th, .table-bordered td {
            border: 1.5px solid #adb5bd !important;
        }
        .table-bordered thead th {
            border: 1.5px solid #5a7a5a !important;
        }
        .table tbody td {
            font-size:15px;
            padding: 3px 10px;
            border: 1.5px solid #adb5bd !important;
        }
        .table tbody tr { transition: background .15s, transform .15s; }
        .table tbody tr:hover { background: #faf5ff; }

        /* ── SELECT2 — Amber Orange Theme ── */
        .select2-container--bootstrap-5 .select2-selection {
            border: 1.5px solid #e2e8f0;
            border-radius: 9px;
            font-size: 13.5px;
            transition: border-color .2s, box-shadow .2s;
        }
        .select2-container--bootstrap-5.select2-container--focus .select2-selection,
        .select2-container--bootstrap-5.select2-container--open .select2-selection {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 3px rgba(245,158,11,.18) !important;
        }
        .select2-container--bootstrap-5 .select2-selection:hover {
            border-color: #fcd34d !important;
        }
        .select2-container--bootstrap-5 .select2-dropdown {
            border: 1.5px solid #f59e0b !important;
            border-radius: 9px;
            box-shadow: 0 4px 16px rgba(245,158,11,.18);
        }
        .select2-container--bootstrap-5 .select2-results__option--highlighted,
        .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #f59e0b !important;
            color: #fff !important;
        }
        .select2-container--bootstrap-5 .select2-results__option--selected {
            background-color: #fffbeb !important;
            color: #b45309 !important;
        }
        .select2-container--bootstrap-5 .select2-search__field:focus {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
        }
        .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
            background-color: #fffbeb; border: 1px solid #fcd34d; color: #b45309;
        }
        .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
            color: #f59e0b;
        }
        .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #b45309;
        }
        .badge-active   { background:#dcfce7; color:#16a34a; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
        .badge-inactive { background:#fee2e2; color:#dc2626; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }

        /* ── FORM — FULL WIDTH ── */
        .form-label { font-weight:600; font-size:13px; color:#374151; margin-bottom:5px; }
        .required-star { color:#dc2626; }
        .form-control, .form-select {
            font-size:13.5px; border:1.5px solid #e2e8f0;
            border-radius:9px; transition: border-color .2s, box-shadow .2s;
            width: 100%;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(124,58,237,.13);
        }
        .form-control:hover:not(:focus), .form-select:hover:not(:focus) {
            border-color: #c4b5fd;
        }

        /* ── BUTTONS ── */
        .btn {
            border-radius:9px; font-size:13.5px; font-weight:600;
            padding:8px 18px; transition: all .2s;
        }
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .btn-primary { background: var(--primary); border:none; box-shadow: 0 3px 10px rgba(124,58,237,.25); }
        .btn-primary:hover { background: var(--primary-d); box-shadow: 0 6px 18px rgba(124,58,237,.35); }
        .btn-sm { padding:5px 11px; font-size:12px; }

        .btn-edit   { background:#fdba74; color:#7c2d12; border:1.5px solid #f97316; }
        .btn-edit:hover   { background:#fb923c; color:#431407; box-shadow: 0 3px 10px rgba(124,45,18,.3); }
        .btn-delete { background:#fef2f2; color:#dc2626; border:1.5px solid #fecaca; }
        .btn-delete:hover { background:#fee2e2; color:#dc2626; box-shadow: 0 3px 10px rgba(220,38,38,.15); }
        .btn-view   { background:#f5f3ff; color:#7c3aed; border:1.5px solid #ddd6fe; }
        .btn-view:hover   { background:#ede9fe; color:#7c3aed; box-shadow: 0 3px 10px rgba(124,58,237,.15); }

        /* ── ALERTS ── */
        .alert { border-radius:10px; font-size:13.5px; }

        /* ── PAGE FOOTER — FIXED AT BOTTOM ── */
        .page-footer {
            background:#fff; border-top:1px solid #e2e8f0;
            padding:12px 24px; text-align:center;
            font-size:14px; color:#94a3b8;
            position: fixed; bottom: 0; left: var(--sb-full); right: 0;
            z-index: 900;
            transition: left var(--trans);
        }
        body.sb-mini .page-footer { left: var(--sb-mini); }
        @media (max-width: 991px) {
            .page-footer { left: 0; }
        }

        /* ── DATATABLES FULL WIDTH FIX ── */
        .dataTables_wrapper {
            width: 100% !important;
        }
        .dataTables_wrapper .dataTables_filter input {
            border-radius:8px; border:1.5px solid #e2e8f0;
            padding:6px 12px; font-size:13px; outline:none;
        }
        .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); }
        .dataTables_wrapper .dataTables_length select {
            border-radius:7px; border:1.5px solid #e2e8f0; padding:4px 8px; font-size:13px;
        }

        /* ── RIPPLE on buttons ── */
        .btn { position:relative; overflow:hidden; }
        .btn::after {
            content:''; position:absolute; inset:0;
            background: rgba(255,255,255,.18);
            opacity:0; border-radius:inherit;
            transition: opacity .3s;
        }
        .btn:active::after { opacity:1; }

        /* ── Input group ── */
        .input-group-text {
            background:#f5f3ff; border:1.5px solid #e2e8f0;
            color: var(--primary); font-weight:600;
        }

        /* ════════════════════════════════════════════════
           RESPONSIVE HELPERS
        ════════════════════════════════════════════════ */
        @media (max-width:768px) {
            .page-body { padding:14px; padding-bottom:60px; }
            .card-box { padding:16px; }
            .stat-value { font-size:22px; }
            .hdr-uname, .hdr-urole { display:none; }
        }
        @media (max-width:576px) {
            .breadcrumb-nav { display:none; }
        }

    </style>
    <script>
        var base_path = "<?php echo base_url(); ?>";
    </script>
</head>
<body>

<div class="sb-overlay" id="sbOverlay" onclick="closeMobileSidebar()"></div>