/* ============================================================
   SWASTIK RMC INDIA — PREMIUM ADMIN THEME
   Override-first: AdminLTE structure stays, visuals replaced
   ============================================================ */

:root {
    --primary:      #5e5ce6;
    --primary-dk:   #4a48c4;
    --primary-lt:   #7b79ff;
    --accent:       #e94560;
    --success:      #10b981;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --info:         #3b82f6;

    --topbar-bg:    #1e1e2d;
    --topbar-h:     58px;
    --body-bg:      #f4f5f9;
    --card-bg:      #fff;
    --card-radius:  12px;
    --card-shadow:  0 2px 12px rgba(0,0,0,0.07);
    --border:       #e9eaef;
    --text:         #181c32;
    --muted:        #a1a5b7;
    --font:         'Inter', sans-serif;
    --ease:         0.22s ease;
    /* The ring drawn round whatever the Tab key has landed on — see KEYBOARD
       FOCUS below. Strong enough to be picked out against a coloured button. */
    --focus-ring:   #2f2dbb;
}

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    font-family: var(--font) !important;
    background: var(--body-bg) !important;
    color: var(--text) !important;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   HIDE THINGS WE DON'T USE
══════════════════════════════════════════════ */
.main-sidebar,
.main-footer,
[class*="sidebar-toggler"] { display: none !important; }

/* ══════════════════════════════════════════════
   TOP NAVBAR — fully restyled
══════════════════════════════════════════════ */
.main-header.sk-topbar-nav {
    background: var(--topbar-bg) !important;
    height: var(--topbar-h) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1040 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* Brand */
.sk-navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sk-navbar-brand img { height: 32px !important; }
.sk-brand-name {
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    margin-left: 4px !important;
}
/* Back button */
.sk-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 7px !important;
    padding: 5px 12px !important;
    transition: all var(--ease) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.sk-nav-btn:hover { color:#fff !important; background: rgba(255,255,255,0.14) !important; }

/* Hamburger button */
.sk-hamburger {
    display: none; /* hidden on desktop via bootstrap d-lg-none usually, but we ensure it here */
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: none;
    color: #fff; font-size: 18px;
    border-radius: 8px; cursor: pointer;
    transition: background var(--ease);
}
@media (max-width: 991.98px) {
    .sk-hamburger { display: flex !important; }
}
.sk-hamburger:hover { background: rgba(255,255,255,0.1); }

/* Center nav */
.sk-center-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.sk-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    color: rgba(255,255,255,0.65) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all var(--ease) !important;
    border: 1px solid transparent !important;
}
.sk-nav-link i { font-size: 12.5px; }
.sk-nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; }
.sk-nav-link.active { color: #fff !important; background: rgba(94,92,230,0.3) !important; border-color: rgba(94,92,230,0.5) !important; }
.sk-nav-link.dropdown-toggle::after { display: none !important; }

/* Dropdown menus */
.sk-dropdown-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
    padding: 6px 0 !important;
    min-width: 220px !important;
    top: calc(100% + 4px) !important;
    animation: menuIn 0.15s ease !important;
}
@keyframes menuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

.sk-drop-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 16px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
    background: transparent !important;
    transition: background var(--ease) !important;
}
.sk-drop-item i { width: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.sk-drop-item:hover { background: #f5f5fb !important; color: var(--text) !important; }
.sk-drop-item:hover i { color: var(--primary) !important; }
.dropdown-divider { border-top: 1px solid var(--border) !important; margin: 4px 0 !important; }

.sk-drop-danger { color: var(--danger) !important; }
.sk-drop-danger i { color: var(--danger) !important; }

/* User avatar in topbar */
.sk-avatar-circle {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dk));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
    flex-shrink: 0; margin-right: 6px;
}
.sk-user-toggle { display: flex !important; align-items: center !important; gap: 4px !important; }
.sk-user-toggle::after { display: none !important; }

/* User dropdown menu */
.sk-user-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
    padding: 6px 0 !important;
    min-width: 200px !important;
    animation: menuIn 0.15s ease !important;
}
.sk-user-menu-header {
    padding: 12px 16px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 4px !important;
}
.sk-um-name { font-weight: 700; font-size: 14px; color: var(--text); }
.sk-um-role {
    display: inline-block; margin-top: 3px;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 20px;
    background: rgba(94,92,230,0.1); color: var(--primary);
}

/* ══════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════ */
.sk-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
    z-index: 1045; opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.sk-drawer-overlay.show { opacity: 1; visibility: visible; }

.sk-mobile-drawer {
    position: fixed; top: 0; left: -280px; bottom: 0;
    width: 280px; background: var(--topbar-bg);
    z-index: 1050; box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.sk-mobile-drawer.open { transform: translateX(280px); }

.sk-drawer-header {
    height: var(--topbar-h); padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sk-drawer-close {
    background: rgba(255,255,255,0.08); border: none;
    width: 30px; height: 30px; border-radius: 8px;
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.sk-drawer-body {
    flex: 1; overflow-y: auto; padding: 16px;
}
.sk-drawer-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 16px 0 6px 10px;
}
.sk-drawer-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    color: rgba(255,255,255,0.7) !important; font-size: 13.5px; font-weight: 500;
    text-decoration: none !important; transition: all 0.2s;
    margin-bottom: 4px;
}
.sk-drawer-item i { width: 18px; text-align: center; font-size: 14px; }
.sk-drawer-item:hover, .sk-drawer-item.active {
    background: rgba(255,255,255,0.1); color: #fff !important;
}
.sk-drawer-item.active {
    background: rgba(94,92,230,0.3); color: #fff !important; border-left: 3px solid var(--primary);
}

/* ══════════════════════════════════════════════
   CONTENT WRAPPER — AdminLTE compatible
══════════════════════════════════════════════ */
.content-wrapper {
    margin-left: 0 !important;
    background: var(--body-bg) !important;
    min-height: calc(100vh - var(--topbar-h)) !important;
    padding: 0 !important;
    padding-top: var(--topbar-h) !important;
}
/* Hide the old header — we inject a new one via JS */
.content-wrapper > .content-header { display: none !important; }

/* Section content padding */
section.content { padding: 0 24px 30px !important; background: var(--body-bg) !important; }
section.content > .container-fluid { padding: 0 !important; }

@media (max-width: 767.98px) {
    /* Extra bottom padding so a form's submit/save button on the last row
       clears the mobile browser chrome (address bar / gesture area) and
       stays fully tappable. Applies to every page-bottom form. */
    section.content { padding: 0 12px 96px !important; }
}

/* ══════════════════════════════════════════════
   INJECTED PAGE HEADER (from JS)
══════════════════════════════════════════════ */
.sk-page-hdr {
    display: flex; align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 20px 24px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.sk-page-hdr-left { display: flex; align-items: center; gap: 14px; }
.sk-phdr-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dk));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    box-shadow: 0 5px 16px rgba(94,92,230,0.3);
    flex-shrink: 0;
}
.sk-phdr-title {
    font-size: 18px !important; font-weight: 700 !important;
    color: var(--text) !important; margin: 0 0 2px !important;
    line-height: 1.2 !important;
}
.sk-phdr-sub {
    font-size: 12.5px !important; color: var(--muted) !important; margin: 0 !important;
}
.sk-page-hdr-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 991.98px) {
    .sk-desktop-nav-wrap { display: none !important; }
    .sk-center-nav { display: none !important; }
    .sk-page-hdr { padding: 14px 12px; }
    .sk-phdr-title { font-size: 15px !important; }
}

@media (max-width: 575.98px) {
    .sk-user-toggle { padding: 0 !important; }
    .sk-user-toggle .sk-um-name { display: none !important; }
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.sk-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600;
    text-decoration: none !important; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--primary-dk));
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(94,92,230,0.28);
    transition: all 0.2s; white-space: nowrap;
    font-family: var(--font);
}
.sk-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(94,92,230,0.4); color: #fff !important; }

/* Override all Bootstrap btn inside content */
section.content .btn,
.content-wrapper .btn,
.sk-page-hdr .btn,
.sk-page-hdr a.btn {
    border-radius: 8px !important; font-weight: 600 !important;
    font-size: 13px !important; padding: 8px 18px !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    font-family: var(--font) !important;
}
.sk-page-hdr .btn-secondary, .sk-page-hdr a.btn-secondary,
section.content .btn-secondary, .content-wrapper .btn-secondary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dk)) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(94,92,230,0.25) !important;
}
.sk-page-hdr .btn-secondary:hover, section.content .btn-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(94,92,230,0.4) !important;
}
section.content .btn-primary, .content-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dk)) !important;
    border: none !important; color: #fff !important;
}
section.content .btn-danger, .content-wrapper .btn-danger {
    background: linear-gradient(135deg, var(--danger), #c72d2d) !important;
    border: none !important; color: #fff !important;
}
section.content .btn-success, .content-wrapper .btn-success {
    background: linear-gradient(135deg, var(--success), #0a9460) !important;
    border: none !important; color: #fff !important;
}
section.content .btn-warning, .content-wrapper .btn-warning {
    background: linear-gradient(135deg, var(--warning), #d97706) !important;
    border: none !important; color: #fff !important;
}

/* ══════════════════════════════════════════════
   KEYBOARD FOCUS
══════════════════════════════════════════════ */
/* A form is filled in with the Tab key, and where Tab has got to has to be
   followable by eye the whole way down. The boxes have said so since the theme
   was written (.form-control:focus, further down), but nothing else did: the
   Bootstrap that AdminLTE bundles takes both indicators off a button outright
   (.btn:focus { outline: 0; box-shadow: none }). So tabbing off the last field
   of a Material Book entry and onto Save Entry / Save & New / Cancel simply lost
   the cursor — the same for the Edit and Delete links down a listing, and for
   the pager under it.

   An outline is what says it here: it is drawn outside the element rather than
   over it, so a button keeps its own shadow, and !important is what gets it
   past Bootstrap's `outline: 0`. :focus-visible rather than :focus, so the ring
   answers the keyboard and does not follow the mouse around. The boxes are left
   to the focus style they already have: two rings on the one field would be
   louder than either. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dataTables_paginate .paginate_button:focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* Safari and anything else without :focus-visible: a ring on plain focus is
   better than no ring at all — it only means a clicked button keeps it until
   the click moves on. */
@supports not selector(:focus-visible) {
    a:focus, button:focus, .btn:focus, [tabindex]:focus {
        outline: 3px solid var(--focus-ring) !important;
        outline-offset: 2px !important;
    }
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
.card, section.content .card, .content-wrapper .card {
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    background: var(--card-bg) !important;
    overflow: hidden !important;
    margin-bottom: 22px;
}
.card-body, .content-wrapper .card-body { padding: 20px !important; }
.content-wrapper .card-body.p-0 { padding: 0 !important; }

/* ══════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════ */
.table { margin-bottom: 0 !important; font-size: 13.5px !important; font-family: var(--font) !important; }
.table thead th {
    background: #f6f7fb !important;
    border-bottom: 2px solid var(--border) !important;
    border-top: none !important;
    padding: 6px 8px !important;
    font-weight: 700 !important; color: var(--text) !important;
    font-size: 11.5px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
}
.table tbody td {
    padding: 3px 5px !important; vertical-align: middle !important;
    color: #444 !important; font-size: 13.5px !important;
    border-bottom: 1px solid #f0f0f6 !important; border-top: none !important;
}
.table-bordered { border: none !important; }
.table-bordered th, .table-bordered td { border-left: none !important; border-right: none !important; }
.table-striped tbody tr:nth-of-type(odd) { background: #fafbff !important; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Row hover. On a dense list it has to be obvious at a glance which row the
   pointer is on, so this is a real tint plus a left accent bar, not a whisper.
   Painted on the cells rather than the <tr>: .table-striped, .bg-light and
   DataTables all paint the row itself at the same specificity, so a tr-level
   hover loses to them — which is why striped rows showed no hover at all. */
.table tbody tr > td, .table tbody tr > th {
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* DataTables 1.13 draws its own stripe/hover as an inset box-shadow flooding
   the cell, which sits on top of the colours below and mutes them. Ours
   replace it, so it is cleared first. */
table.dataTable > tbody > tr > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr.odd > *,
table.dataTable.display > tbody > tr:hover > * { box-shadow: none !important; }

.table tbody tr:hover > td,
.table tbody tr:hover > th {
    background-color: #e5e5fb !important;   /* ≈16% of --primary over white */
    color: var(--text) !important;
    border-bottom-color: #c9c8f2 !important;
}
.table tbody tr:hover > td:first-child,
.table tbody tr:hover > th:first-child {
    box-shadow: inset 3px 0 0 0 var(--primary) !important;
}

/* The row just come back to from its Edit screen, scrolled into the middle of
   the list by list-return.js. Flashed rather than left marked: it says "this is
   the one you were on" and is then out of the way. The animation is on the
   cells because .table-striped paints the row underneath it. */
@keyframes sk-row-return {
    0%   { background-color: rgba(94,92,230,0.30); }
    70%  { background-color: rgba(94,92,230,0.18); }
    100% { background-color: transparent; }
}
tr.sk-row-return > td { animation: sk-row-return 2.4s ease-out; }

/* ══════════════════════════════════════════════
   DATATABLES
══════════════════════════════════════════════ */
.dataTables_wrapper { padding: 16px 20px 20px !important; }
.dataTables_filter label { font-size: 13px !important; color: var(--muted) !important; font-weight: 500 !important; }
.dataTables_filter input {
    border: 1.5px solid #e2e6f0 !important; border-radius: 8px !important;
    padding: 7px 12px !important; font-size: 13px !important;
    margin-left: 8px; outline: none; font-family: var(--font) !important;
}
.dataTables_filter input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(94,92,230,0.1) !important; }
.dataTables_length select { border: 1.5px solid #e2e6f0 !important; border-radius: 7px !important; padding: 5px 10px !important; font-size: 13px !important; margin: 0 6px; }
.dataTables_info { color: var(--muted) !important; font-size: 12.5px !important; margin-top: 14px !important; }
.dataTables_paginate { margin-top: 14px !important; }
.dataTables_paginate .paginate_button {
    border-radius: 7px !important; border: 1px solid var(--border) !important;
    margin: 0 2px !important; padding: 5px 12px !important;
    font-size: 13px !important; color: var(--text) !important; transition: all 0.2s !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
.dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f0f0f9 !important; color: var(--primary) !important; border-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.form-control {
    border-radius: 8px !important; border: 1.5px solid #e2e6f0 !important;
    padding: 10px 14px !important; height: auto !important; box-shadow: none !important;
    font-size: 13.5px !important; font-family: var(--font) !important;
    color: var(--text) !important; background: #fff !important; transition: all 0.2s;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(94,92,230,0.1) !important; outline: none !important;
}
label { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 6px !important; }
.select2-container .select2-selection--single { height: 44px !important; border-radius: 8px !important; border: 1.5px solid #e2e6f0 !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 14px !important; font-size: 13.5px !important; color: var(--text) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(94,92,230,0.1) !important; }

/* ══════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════ */
.sk-dashboard { padding: 24px; }
@media (max-width: 767.98px) { .sk-dashboard { padding: 12px; } }

/* Hero banner */
.sk-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt) 60%, #a78bfa 100%);
    border-radius: 14px; padding: 26px 28px; color: #fff;
    margin-bottom: 24px; position: relative; overflow: hidden;
}
.sk-hero::before {
    content: ''; position: absolute; right: -35px; top: -35px;
    width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.08);
}
.sk-hero h1 { font-size: 22px; font-weight: 800; margin: 0 0 5px; line-height: 1.2; }
.sk-hero p  { font-size: 13.5px; opacity: 0.8; margin: 0; }

/* Stat cards grid */
.sk-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px; margin-bottom: 24px;
}
.sk-stat {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    padding: 18px; display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform var(--ease), box-shadow var(--ease);
}
.sk-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.sk-stat .st-icon {
    width: 50px; height: 50px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; flex-shrink: 0;
}
.sk-stat .st-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sk-stat .st-value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
.sk-stat .st-sub   { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sk-stat .st-bg    { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); font-size: 64px; opacity: 0.06; pointer-events: none; }

/* ══════════════════════════════════════════════
   CHARTS
══════════════════════════════════════════════ */
.sk-chart-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    overflow: hidden; margin-bottom: 22px;
}
.sk-chart-hdr {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.sk-chart-hdr h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text); }
.sk-chart-hdr .ch-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.sk-chart-icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; flex-shrink: 0;
}
.ch-badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
    background: rgba(94,92,230,0.1); color: var(--primary);
}
/* Fixed height container so chart doesn't grow huge */
.sk-chart-body {
    padding: 16px 18px;
    height: 240px;         /* fixed height — chart fills this */
    position: relative;
}
.sk-chart-body canvas {
    max-height: 100% !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════
   DASHBOARD MODULE SECTIONS
══════════════════════════════════════════════ */
.sk-section-hdr {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.sk-section-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; flex-shrink: 0;
}
.sk-section-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.sk-dash-section { margin-bottom: 30px; }

/* Module cards */
.sk-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.sk-module-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 14px 14px;
    text-decoration: none !important; display: flex; flex-direction: column; gap: 6px;
    position: relative; overflow: hidden;
    transition: all 0.22s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sk-module-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.1); border-color: var(--cc, var(--primary)); }
.sk-module-card .mc-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cc, var(--primary)), var(--cc2, var(--primary-dk)));
}
.sk-module-card .mc-icon {
    width: 42px; height: 42px; border-radius: 11px;
    background: linear-gradient(135deg, var(--cc, var(--primary)), var(--cc2, var(--primary-dk)));
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform 0.22s; margin-bottom: 4px;
}
.sk-module-card:hover .mc-icon { transform: scale(1.08) rotate(-4deg); }
.sk-module-card .mc-name { font-size: 13px; font-weight: 700; color: var(--text) !important; line-height: 1.3; }
.sk-module-card .mc-desc { font-size: 11.5px; color: var(--muted) !important; line-height: 1.5; flex-grow: 1; }
.sk-module-card .mc-arrow { font-size: 12px; color: var(--cc, var(--primary)); opacity: 0; transform: translateX(-4px); transition: all 0.2s; margin-top: 4px; }
.sk-module-card:hover .mc-arrow { opacity: 1; transform: translateX(0); }

/* Search bar */
.sk-search { position: relative; max-width: 380px; }
.sk-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.sk-search input {
    width: 100%; border: 1.5px solid var(--border); border-radius: 20px;
    padding: 8px 16px 8px 38px; font-size: 13.5px; outline: none;
    background: var(--card-bg); color: var(--text); font-family: var(--font);
    transition: all 0.2s;
}
.sk-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(94,92,230,0.1); }

/* ══════════════════════════════════════════════
   MODAL FIX (retained)
══════════════════════════════════════════════ */
#moveTransactionModel.in {
    opacity: 1; overflow: hidden;
    background: rgba(0,0,0,0.5); padding: 0px !important;
}
#moveTransactionModel.in .modal-dialog-centered {
    min-height: 100%; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; transition: none;
}
#moveTransactionModel { transition: none !important; }
@media (max-width: 767.98px) {
    #moveTransactionModel.in .modal-dialog-centered { width: 88%; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden !important; }
    .sk-modules-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (min-width: 576px) { .sk-modules-grid { grid-template-columns: 1fr 1fr 1fr; } }
    .sk-module-card { padding: 12px 10px 10px; }
    .sk-module-card .mc-icon { width: 36px; height: 36px; font-size: 14px; }
    .sk-module-card .mc-name { font-size: 11px; }
    .sk-module-card .mc-desc,
    .sk-module-card .mc-arrow { display: none !important; }
    .sk-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sk-hero { padding: 18px; }
    .sk-hero h1 { font-size: 17px; }
    .sk-chart-body { height: 180px; }
}

/* ── page fade-in ── */
.content-wrapper { animation: skFade 0.35s ease; }
@keyframes skFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════
   LOGIN PAGE - Premium Button
══════════════════════════════════════════════ */
.sk-login-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px 30px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    text-align: center;
}
.sk-login-logo {
    margin-bottom: 25px;
}
.sk-login-logo img {
    height: 65px;
    margin-bottom: 14px;
}
.sk-login-logo h2 {
    font-size: 24px;
    font-weight: 800;
    color: #181c32;
    margin-bottom: 6px;
}
.sk-login-logo p {
    font-size: 13.5px;
    color: #a1a5b7;
}

@media (max-width: 575.98px) {
    .sk-login-card {
        padding: 25px 20px;
        max-width: 90%;
        margin: 0 auto;
    }
    .sk-login-logo img { height: 54px; }
    .sk-login-logo h2 { font-size: 20px; }
}

.sk-login-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(94, 92, 230, 0.2);
    margin-top: 10px;
}
.sk-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(94, 92, 230, 0.4);
    background: linear-gradient(135deg, var(--primary-lt) 0%, var(--primary) 100%);
}
.sk-login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* thin scrollbar */
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ══════════════════════════════════════════════
   ANNOUNCEMENT TICKER (scrolling marquee)
══════════════════════════════════════════════ */
:root { --announce-h: 36px; }

.sk-announce-bar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: var(--announce-h);
    z-index: 1035;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-lt) 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(94, 92, 230, 0.25);
}
.sk-announce-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}
.sk-announce-viewport {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.sk-announce-track {
    display: inline-block;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    /* The message scrolls across once per cycle (left → right) with no duplicated
       copy on screen. padding-left:100% starts it just off the left edge. */
    padding-left: 100%;
    will-change: transform;
    animation: sk-marquee-ltr 22s linear infinite;
}
.sk-announce-track:hover { animation-play-state: paused; }
.sk-announce-text { padding: 0 4px; }
.sk-announce-track .sep { opacity: 0.55; padding: 0 14px; }

@keyframes sk-marquee-ltr {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Push page content down so the ticker never overlaps it. */
/* body.has-announcement-bar .content-wrapper {
    padding-top: calc(var(--topbar-h) + var(--announce-h)) !important;
} */

@media (max-width: 575.98px) {
    .sk-announce-label span { display: none; }
    .sk-announce-label { padding: 0 10px; }
}

/* ══════════════════════════════════════════════
   ANNOUNCEMENT POPUP (after-login modal)
══════════════════════════════════════════════ */
.sk-announce-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.sk-announce-modal .modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt) 100%);
    color: #fff;
    border: none;
    padding: 18px 22px;
}
.sk-announce-modal .modal-header .modal-title {
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sk-announce-modal .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; }
.sk-announce-modal .modal-body { padding: 8px 22px 20px; }
.sk-announce-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
    background: #fbfbff;
}
.sk-announce-card .sk-ac-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.sk-announce-card .sk-ac-msg {
    font-size: 13.5px;
    color: #4b4f63;
    margin: 0;
    white-space: pre-line;
}
.sk-announce-card .sk-ac-date { font-size: 11px; color: var(--muted); margin-top: 8px; }