/* ============================================================
   Dekole Admin · Dark Theme
   Loaded AFTER custom.css to override the legacy light skin.
   Palette:
     --bg          #0b1020   app background (dark navy)
     --surface     #131a2e   card / panel surface
     --surface-2   #1a2238   raised surface, table headers
     --sidebar     #07090f   sidebar (near-black)
     --sidebar-2   #0f1320   sidebar hover/active row
     --border      #232c47   subtle divider
     --text        #e6ebf5   primary text
     --text-muted  #8a96b3   secondary text
     --accent      #3b82f6   electric blue (active state)
     --accent-2    #60a5fa   electric blue hover
     --success     #22c55e
     --warning     #f59e0b
     --danger      #ef4444
   ============================================================ */

:root {
    --dk-bg: #0b1020;
    --dk-surface: #131a2e;
    --dk-surface-2: #1a2238;
    --dk-sidebar: #07090f;
    --dk-sidebar-2: #0f1320;
    --dk-border: #232c47;
    --dk-text: #e6ebf5;
    --dk-text-muted: #8a96b3;
    --dk-accent: #3b82f6;
    --dk-accent-2: #60a5fa;
    --dk-accent-glow: rgba(59, 130, 246, 0.35);
    --dk-success: #22c55e;
    --dk-warning: #f59e0b;
    --dk-danger: #ef4444;
}

/* ---------- Base ---------- */

html, body {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

body, .wrapper, .content-wrapper, .main-footer {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

a {
    color: var(--dk-accent-2);
}
a:hover {
    color: var(--dk-accent);
    text-decoration: none;
}

/* ---------- Sidebar ---------- */

/* Wider sidebar so long labels don't wrap. AdminLTE default is 250px;
   we go to 270px for desktop and adjust the content-wrapper to match. */
.main-sidebar,
.main-sidebar.sidebar-dark-primary,
.sidebar-dark-primary {
    background-color: var(--dk-sidebar) !important;
    border-right: 1px solid var(--dk-border) !important;
    width: 270px !important;
}
body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs) .content-wrapper,
body:not(.sidebar-collapse) .main-header.navbar:not(.navbar-expand-xs):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg),
body:not(.sidebar-collapse) .main-footer {
    margin-left: 270px !important;
}

/* Collapsed (icon-only) sidebar */
body.sidebar-collapse .main-sidebar,
body.sidebar-collapse .main-sidebar.sidebar-dark-primary {
    width: 4.6rem !important;
}
body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer,
body.sidebar-collapse .main-header {
    margin-left: 4.6rem !important;
}

/* Mobile (≤ 991px): sidebar slides off-screen; AdminLTE handles via .sidebar-open */
@media (max-width: 991.98px) {
    .main-sidebar,
    .main-sidebar.sidebar-dark-primary {
        width: 270px !important;
        margin-left: -270px !important;
        transition: margin-left .25s ease-in-out !important;
    }
    body.sidebar-open .main-sidebar {
        margin-left: 0 !important;
        box-shadow: 0 0 30px rgba(0,0,0,0.6) !important;
    }
    .content-wrapper,
    .main-header,
    .main-footer {
        margin-left: 0 !important;
    }
    /* Backdrop when sidebar is open on mobile */
    body.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 1000;
        backdrop-filter: blur(2px);
    }
    .main-sidebar { z-index: 1100 !important; }
}

.main-sidebar .brand-link {
    background-color: var(--dk-sidebar) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    text-align: center;
    padding: 14px 0 !important;
    height: auto !important;
}
.main-sidebar .brand-link img {
    background-color: transparent !important;
    box-shadow: none !important;
    filter: brightness(1.05);
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    position: static !important;
    padding: 0 !important;
    float: none !important;
    border-radius: 6px;
}
.main-sidebar .brand-link .brand-text {
    color: var(--dk-text) !important;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.sidebar {
    padding: 14px 10px !important;
    background-color: var(--dk-sidebar) !important;
}

/* Section headers */
.sidebar .nav-sidebar .nav-header,
.sidebar ul li.nav-header {
    color: var(--dk-text-muted) !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 18px 14px 8px !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Collapsed sidebar — hide section headers */
.sidebar-collapse .sidebar .nav-sidebar .nav-header { display: none !important; }

/* Top-level nav items */
.sidebar .nav-sidebar .nav-item > .nav-link,
.sidebar-dark-primary .sidebar .nav-sidebar > li.nav-item > a.nav-link,
.sidebar ul.nav li.nav-item.has-treeview a.nav-link {
    color: var(--dk-text) !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}
.sidebar .nav-sidebar .nav-item > .nav-link p,
.sidebar ul.nav li.nav-item p {
    color: var(--dk-text) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    /* Prevent long labels (e.g. "Marketplace Listings",
       "Deals & Promotions") from wrapping onto a second line. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 4px !important;
}
.sidebar .nav-sidebar .nav-item > .nav-link i,
.sidebar ul.nav li.nav-item.has-treeview a.nav-link i {
    color: var(--dk-text-muted) !important;
    width: 20px !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}
/* Right-side chevron / badge: keep flush right, never push text */
.sidebar .nav-sidebar .nav-item > .nav-link .right,
.sidebar .nav-sidebar .nav-item > .nav-link p > .right {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Hover */
.sidebar .nav-sidebar .nav-item > .nav-link:hover,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a:hover,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a {
    background-color: var(--dk-sidebar-2) !important;
    color: var(--dk-text) !important;
}
.sidebar .nav-sidebar .nav-item > .nav-link:hover i,
.sidebar .nav-sidebar .nav-item > .nav-link:hover p {
    color: var(--dk-accent-2) !important;
}

/* -------------------------------------------------------------
   State hierarchy (most → least visually prominent):
     1. Leaf with .active            → bright electric-blue pill
     2. Top-level link with .active   → bright electric-blue pill
     3. Parent expanded (.menu-open)  → subtle dark fill + accent icon
     4. Hover                         → subtle dark fill
     5. Default                       → transparent
   Parent with open submenu does NOT get blue — it would compete
   with the active leaf inside it. Only the leaf wins.
   ------------------------------------------------------------- */

/* (3) Parent expanded — subtle indicator only */
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open > a.nav-link {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: var(--dk-text) !important;
    box-shadow: none !important;
}
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open > a.nav-link i,
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open > a.nav-link p {
    color: var(--dk-accent-2) !important;
}
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open > a.nav-link p {
    color: var(--dk-text) !important;
    font-weight: 600 !important;
}
/* Chevron in expanded parent — point down, accent color */
.sidebar .nav-sidebar li.has-treeview.menu-open > .nav-link .fa-angle-left.right {
    color: var(--dk-accent-2) !important;
}

/* (2) Top-level LINK active (no submenu) — bright electric-blue pill */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    background: linear-gradient(90deg, var(--dk-accent) 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px var(--dk-accent-glow), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    border-left: 0 !important;
    font-weight: 600 !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active i,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active p {
    color: #ffffff !important;
}

/* (1) Sub-nav (treeview leaf) active — text + icon turn blue, NO pill fill.
   Subtle 2px left accent bar marks the active row. */
.sidebar .nav-treeview .nav-link.active,
.sidebar .nav-treeview .nav-link.active:hover {
    background: transparent !important;
    box-shadow: inset 2px 0 0 var(--dk-accent) !important;
    border-radius: 0 7px 7px 0 !important;
    font-weight: 600 !important;
}
.sidebar .nav-treeview .nav-link.active i,
.sidebar .nav-treeview .nav-link.active p {
    color: var(--dk-accent-2) !important;
}
.sidebar .nav-treeview .nav-link.active p {
    font-weight: 600 !important;
}

/* Soft override for the legacy ".nav-pills .has-treeview" path
   used by the pre-existing custom.css — keep parent restrained */
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active:hover,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active:hover p,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active:hover i {
    background: transparent !important;
    color: var(--dk-text) !important;
    box-shadow: none !important;
}

/* Treeview wrapper */
.sidebar-dark-primary .sidebar .nav-sidebar li.has-treeview.menu-open ul.nav.nav-treeview,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a {
    background-color: transparent !important;
}

/* Treeview container — left guide rail */
.sidebar .nav-treeview {
    background: transparent !important;
    margin: 4px 0 6px 22px;
    padding-left: 8px !important;
    border-left: 1px solid var(--dk-border);
    position: relative;
}

/* Treeview leaf — default */
.sidebar .nav-treeview .nav-link {
    color: var(--dk-text-muted) !important;
    background: transparent !important;
    padding: 8px 12px !important;
    margin: 2px 6px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    position: relative;
}
.sidebar .nav-treeview .nav-link {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}
.sidebar .nav-treeview .nav-link p {
    color: var(--dk-text-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding-left: 4px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.sidebar .nav-treeview .nav-link i {
    color: var(--dk-text-muted) !important;
    font-size: 12px !important;
    width: 18px;
    flex-shrink: 0 !important;
}

/* Treeview leaf — hover */
.sidebar .nav-treeview .nav-link:hover {
    background-color: var(--dk-sidebar-2) !important;
}
.sidebar .nav-treeview .nav-link:hover p,
.sidebar .nav-treeview .nav-link:hover i {
    color: var(--dk-text) !important;
}

/* Legacy override path — collapsed dark text, no bright fill */
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open a.nav-link~ul li a,
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open a.nav-link~ul li a:hover,
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open a.nav-link~ul li a:hover p,
.sidebar-dark-primary .sidebar .nav-sidebar li.nav-item.has-treeview.menu-open a.nav-link~ul li a:hover i {
    background-color: transparent !important;
    color: var(--dk-text-muted) !important;
}
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active~ul li a.active,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active~ul li a.active:hover,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active~ul li a.active:hover p,
.sidebar-mini .wrapper .main-sidebar ul.nav-pills li.has-treeview a.active~ul li a.active:hover i {
    background: transparent !important;
    color: var(--dk-accent-2) !important;
    box-shadow: inset 2px 0 0 var(--dk-accent) !important;
}

/* OS scrollbar in sidebar */
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255,255,255,0.18) !important;
}

/* ---------- Top Navbar ---------- */

.main-header.navbar,
.main-header.navbar-white,
.main-header.navbar-light,
.wrapper nav.main-header {
    background-color: var(--dk-surface) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.4);
    z-index: 1050 !important;
    flex-wrap: nowrap !important;
    min-height: 56px;
}
.main-header.navbar .navbar-nav {
    flex-wrap: nowrap !important;
}
.main-header.navbar .nav-item {
    white-space: nowrap;
}
/* Hamburger toggle button — make it a clear tap target */
.main-header .nav-link[data-widget="pushmenu"] {
    padding: 8px 12px !important;
    border-radius: 6px !important;
}
.main-header .nav-link[data-widget="pushmenu"] i {
    font-size: 18px;
}
.main-header .nav-link,
.wrapper .navbar-light ul a.dropdown-toggle,
.main-header .navbar-nav .nav-item .nav-link {
    color: var(--dk-text) !important;
    font-weight: 500;
}
.main-header .nav-link:hover,
.wrapper .navbar-light ul a.dropdown-toggle:hover {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-accent-2) !important;
    border-radius: 6px;
}
.main-header .navbar-nav .nav-item ul.dropdown-menu {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.main-header .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
    color: var(--dk-text) !important;
}
.main-header .dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-accent-2) !important;
}
.dropdown-divider {
    border-top: 1px solid var(--dk-border) !important;
}

/* Logout button in navbar */
.sidebar-mini .wrapper .navbar-light li.user-footer a.btn,
.sidebar-mini .wrapper .navbar-light li.user-footer a.btn:hover {
    background-color: var(--dk-danger) !important;
    border-color: var(--dk-danger) !important;
    color: #fff !important;
}

/* ---------- Content header ---------- */

.content-header h1,
.content-wrapper .content-header h1 {
    color: var(--dk-text) !important;
    font-weight: 600 !important;
}
.content-header .breadcrumb,
.breadcrumb {
    background-color: transparent !important;
}
.content-header .breadcrumb-item,
.content-header .breadcrumb-item a,
.breadcrumb-item, .breadcrumb-item a {
    color: var(--dk-text-muted) !important;
}
.breadcrumb-item.active { color: var(--dk-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--dk-text-muted) !important; }

/* ---------- Cards ---------- */

.card,
.content-wrapper .card {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    color: var(--dk-text) !important;
}
.card-header,
.content-wrapper .card .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    margin: 0 !important;
    padding: 16px 20px !important;
}
.card-header h3,
.content-wrapper .card .card-header h3,
.card-header h5,
.card-header .card-title {
    color: var(--dk-text) !important;
    font-weight: 600 !important;
}
.card-body { color: var(--dk-text) !important; padding: 20px !important; }
.card-footer,
.content-wrapper .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--dk-border) !important;
    margin: 0 !important;
    color: var(--dk-text-muted) !important;
}

/* ---------- Legacy small-box dashboard cards (kept for back-compat) ---------- */

section.content .small-box,
section.content .small-box.customer,
section.content .small-box.jobseeker,
section.content .small-box.guests,
section.content .small-box.job-posted,
section.content .small-box.payment,
section.content .small-box.content {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    border-radius: 12px !important;
}
section.content .small-box .inner h3 { color: var(--dk-text) !important; }
section.content .small-box .inner p { color: var(--dk-text-muted) !important; }
section.content .small-box a.small-box-footer {
    background: none !important;
    color: var(--dk-text-muted) !important;
    border-top: 1px solid var(--dk-border) !important;
}
body section.content .small-box:hover,
section.content .small-box.customer:hover,
section.content .small-box.admin:hover,
section.content .small-box.jobseeker:hover,
section.content .small-box.job-posted:hover,
section.content .small-box.job-applied:hover {
    background-color: var(--dk-surface-2) !important;
    transform: translateY(-2px);
}
body section.content .small-box:hover a {
    color: var(--dk-accent-2) !important;
    border-top: 1px solid var(--dk-border) !important;
}
section.content .small-box:hover .inner h3 { color: var(--dk-text) !important; }
section.content .small-box:hover .inner p { color: var(--dk-text-muted) !important; }

/* Legacy info-box */
.info-box {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
    border-radius: 10px !important;
}
.info-box .title, .info-box span.title {
    color: var(--dk-text-muted) !important;
}
.info-box h3 { color: var(--dk-text) !important; }

/* ---------- Tables ---------- */

.table,
.table-bordered {
    color: var(--dk-text) !important;
    background-color: transparent !important;
    border-color: var(--dk-border) !important;
}
.table thead th,
.table-bordered thead th,
.table-bordered tr th,
.table-bordered tfoot tr th {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.table tbody tr td,
.table-bordered tr td {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
    vertical-align: middle;
}
.table tbody tr:hover td,
.table-bordered tbody tr:hover td {
    background-color: var(--dk-surface-2) !important;
}
.table-bordered tr td a {
    color: var(--dk-accent-2) !important;
    background-color: transparent !important;
}

/* DataTables wrapper */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--dk-text) !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--dk-text-muted) !important;
}
.dataTables_wrapper .dataTables_filter label input,
.dataTables_wrapper .dataTables_length label select {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 6px !important;
}
/* Pagination wrapper itself stays transparent so empty tables
   don't show a hollow box. Buttons carry the chrome. */
.dataTables_paginate {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
}
.dataTables_paginate .paginate_button {
    color: var(--dk-text) !important;
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 7px !important;
    margin: 0 3px !important;
    padding: 6px 11px !important;
    font-size: 12.5px !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--dk-accent) !important;
    color: #fff !important;
    border-color: var(--dk-accent) !important;
    box-shadow: 0 4px 12px var(--dk-accent-glow);
}
.dataTables_paginate .paginate_button:hover {
    background: var(--dk-surface-2) !important;
    color: var(--dk-accent-2) !important;
    border-color: var(--dk-accent) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--dk-text-muted) !important;
    border-color: var(--dk-border) !important;
    opacity: 0.45;
    cursor: not-allowed;
}
.dataTables_wrapper table#paymentTransactionsList tbody tr td:last-child a {
    color: var(--dk-accent-2) !important;
    background-color: transparent !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 4px;
}

/* ---------- Forms ---------- */

.form-control,
.content-wrapper .card-body .form-group input,
.content-wrapper .card-body .form-group select,
.form-group textarea,
.wrapper .content .card-body form.form_wrap .form-group input,
select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
input[type="date"], input[type="time"], input[type="datetime-local"],
textarea {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 8px !important;
}
.form-control::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--dk-text-muted) !important;
    opacity: 0.7;
}
.form-control:focus {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-accent) !important;
    box-shadow: 0 0 0 3px var(--dk-accent-glow) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--dk-text-muted) !important;
}
.wrapper .content .card-body form.form_wrap .form-group label,
.content-wrapper .card-body .form-group label,
label {
    color: var(--dk-text) !important;
    font-weight: 500 !important;
}
.custom-control-label { color: var(--dk-text) !important; }
.custom-file-label {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.custom-file-label::after {
    background-color: var(--dk-accent) !important;
    color: #fff !important;
    border-color: var(--dk-accent) !important;
}

/* ---------- Buttons ---------- */

.btn-primary {
    background-color: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--dk-accent-2) !important;
    border-color: var(--dk-accent-2) !important;
    box-shadow: 0 6px 16px var(--dk-accent-glow);
}

/* The legacy theme used green btn-success everywhere (#2d8427) — re-skin */
.btn-success,
.card-body a.btn-success,
.content-wrapper .card-footer button {
    background-color: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
    color: #fff !important;
}
.btn-success:hover,
.card-body a.btn-success:hover,
.content-wrapper .card-footer button:hover {
    background-color: var(--dk-accent-2) !important;
    border-color: var(--dk-accent-2) !important;
}

.btn-danger { background-color: var(--dk-danger) !important; border-color: var(--dk-danger) !important; }
.btn-warning { background-color: var(--dk-warning) !important; border-color: var(--dk-warning) !important; color: #1a1300 !important; }
.btn-info { background-color: #06b6d4 !important; border-color: #06b6d4 !important; }
.btn-secondary {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.btn-light, .btn-default {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.btn-outline-primary {
    color: var(--dk-accent-2) !important;
    border-color: var(--dk-accent) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--dk-accent) !important;
    color: #fff !important;
}

/* ---------- Alerts ---------- */

.alert-success {
    background-color: rgba(34,197,94,0.12) !important;
    color: #86efac !important;
    border: 1px solid rgba(34,197,94,0.35) !important;
}
.alert-danger {
    background-color: rgba(239,68,68,0.12) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
}
.alert-warning {
    background-color: rgba(245,158,11,0.12) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245,158,11,0.35) !important;
}
.alert-info {
    background-color: rgba(59,130,246,0.12) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59,130,246,0.35) !important;
}
.wrapper .content .alert .close_button,
.wrapper .content .alert.alert-success a,
.wrapper .content .alert-danger a {
    color: inherit !important;
    opacity: 0.85;
}

/* ---------- Modals ---------- */

.modal-content {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 12px !important;
}
.modal-header {
    border-bottom: 1px solid var(--dk-border) !important;
}
.modal-footer {
    border-top: 1px solid var(--dk-border) !important;
}
.modal .close { color: var(--dk-text) !important; opacity: 0.8; }
.modal .close:hover { color: var(--dk-accent-2) !important; opacity: 1; }
.modal-backdrop.show { opacity: 0.7 !important; }

/* ---------- SweetAlert ---------- */

body.sidebar-mini .sweet-alert {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
body.sidebar-mini .sweet-alert h2 { color: var(--dk-text) !important; }
body.sidebar-mini .sweet-alert p { color: var(--dk-text-muted) !important; }
body.sidebar-mini .sweet-alert .sa-confirm-button-container button.confirm {
    background-color: var(--dk-accent) !important;
    box-shadow: 0 6px 16px var(--dk-accent-glow), rgba(0,0,0,0.05) 0px 0px 0px 1px inset !important;
}
body.sidebar-mini .sweet-alert button.cancel {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
}

/* ---------- Pagination (Laravel default) ---------- */

.pagination .page-item .page-link {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
    color: #fff !important;
}
.pagination .page-item.disabled .page-link {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-muted) !important;
}
.pagination .page-item .page-link:hover {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-accent-2) !important;
}

/* ---------- Misc widgets ---------- */

hr { border-top: 1px solid var(--dk-border) !important; }

.text-muted, small.text-muted { color: var(--dk-text-muted) !important; }
.text-dark, .text-black-50 { color: var(--dk-text) !important; }

.badge-primary { background-color: var(--dk-accent) !important; color: #fff !important; }
.badge-success { background-color: var(--dk-success) !important; color: #fff !important; }
.badge-danger  { background-color: var(--dk-danger)  !important; color: #fff !important; }
.badge-warning { background-color: var(--dk-warning) !important; color: #1a1300 !important; }
.badge-info    { background-color: #06b6d4 !important; color: #fff !important; }
.badge-secondary {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border);
}

.list-group-item {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--dk-border) !important;
}
.nav-tabs .nav-link {
    color: var(--dk-text-muted) !important;
    border: 0 !important;
}
.nav-tabs .nav-link.active {
    color: var(--dk-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--dk-accent) !important;
}

.permissions-section {
    background-color: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* CKEditor / colorbox / intl-tel-input — keep readable */
.cke_chrome { border: 1px solid var(--dk-border) !important; }
.intl-tel-input .selected-flag { background-color: var(--dk-surface-2) !important; }

/* Footer */
.main-footer {
    background-color: var(--dk-surface) !important;
    border-top: 1px solid var(--dk-border) !important;
    color: var(--dk-text-muted) !important;
}

/* Selection */
::selection { background: var(--dk-accent); color: #fff; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dk-bg); }
::-webkit-scrollbar-thumb { background: var(--dk-surface-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dk-border); }

/* ============================================================
   Dashboard SaaS layout
   ============================================================ */

.dk-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 4px 18px;
}
.dk-page-head h1 {
    color: var(--dk-text) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.2px;
}
.dk-page-head .dk-page-sub {
    color: var(--dk-text-muted);
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Date filter pill group */
.dk-datefilter {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background-color: var(--dk-surface);
    border: 1px solid var(--dk-border);
    padding: 6px;
    border-radius: 10px;
}
.dk-datefilter button {
    background: transparent;
    border: 0;
    color: var(--dk-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.dk-datefilter button:hover {
    background-color: var(--dk-surface-2);
    color: var(--dk-text);
}
.dk-datefilter button.active {
    background-color: var(--dk-accent);
    color: #fff;
    box-shadow: 0 4px 12px var(--dk-accent-glow);
}
.dk-datefilter input[type="date"] {
    background-color: var(--dk-surface-2);
    border: 1px solid var(--dk-border);
    color: var(--dk-text);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    color-scheme: dark;
}

/* Section sub-headings */
.dk-section-title {
    color: var(--dk-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 28px 4px 12px;
}

/* Stat card grid */
.dk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dk-stat {
    background: linear-gradient(180deg, var(--dk-surface) 0%, #10172a 100%);
    border: 1px solid var(--dk-border);
    border-radius: 12px;
    padding: 18px 18px 16px;
    color: var(--dk-text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-decoration: none !important;
}
.dk-stat:hover {
    transform: translateY(-2px);
    border-color: var(--dk-accent);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 0 1px var(--dk-accent-glow);
    color: var(--dk-text);
}
.dk-stat .dk-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dk-stat .dk-stat-label {
    font-size: 12px;
    color: var(--dk-text-muted);
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.dk-stat .dk-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59,130,246,0.12);
    color: var(--dk-accent-2);
    font-size: 15px;
    flex-shrink: 0;
}
.dk-stat .dk-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--dk-text);
    letter-spacing: -0.5px;
    line-height: 1.05;
}
.dk-stat .dk-stat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--dk-text-muted);
}
.dk-stat .dk-trend-up   { color: #4ade80; }
.dk-stat .dk-trend-down { color: #f87171; }

/* Tone variants (icon background only) */
.dk-stat.tone-revenue  .dk-stat-icon { background: rgba(34,197,94,0.14); color: #4ade80; }
.dk-stat.tone-orders   .dk-stat-icon { background: rgba(59,130,246,0.14); color: #60a5fa; }
.dk-stat.tone-pending  .dk-stat-icon { background: rgba(245,158,11,0.14); color: #fbbf24; }
.dk-stat.tone-danger   .dk-stat-icon { background: rgba(239,68,68,0.14);  color: #f87171; }
.dk-stat.tone-people   .dk-stat-icon { background: rgba(139,92,246,0.14); color: #a78bfa; }
.dk-stat.tone-store    .dk-stat-icon { background: rgba(6,182,212,0.14);  color: #22d3ee; }
.dk-stat.tone-product  .dk-stat-icon { background: rgba(236,72,153,0.14); color: #f472b6; }
.dk-stat.tone-promo    .dk-stat-icon { background: rgba(251,146,60,0.14); color: #fb923c; }
.dk-stat.tone-event    .dk-stat-icon { background: rgba(20,184,166,0.14); color: #2dd4bf; }
.dk-stat.tone-marketing .dk-stat-icon { background: rgba(99,102,241,0.14); color: #818cf8; }

/* ============================================================
   Toggle switch  (label.switch > input + span.slider.round)
   Used across stores, banners, categories, promos, etc.
   ============================================================ */
label.switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    vertical-align: middle;
    cursor: pointer;
}
label.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}
label.switch .slider,
label.switch .slider.round {
    position: absolute !important;
    inset: 0 !important;
    background-color: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 24px !important;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    cursor: pointer;
}
label.switch .slider::before,
label.switch .slider.round::before {
    content: "" !important;
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    left: 2px !important;
    bottom: 2px !important;
    top: auto !important;
    right: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #e5ecf7 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05) !important;
    transition: transform .25s cubic-bezier(.4,.0,.2,1), background .25s ease !important;
}
label.switch input:checked + .slider,
label.switch input:checked + .slider.round {
    background: linear-gradient(90deg, var(--dk-accent) 0%, #2563eb 100%) !important;
    border-color: var(--dk-accent) !important;
    box-shadow: 0 0 0 3px var(--dk-accent-glow), inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}
label.switch input:checked + .slider::before,
label.switch input:checked + .slider.round::before {
    transform: translateX(20px) !important;
    background: #ffffff !important;
}
label.switch:hover .slider {
    border-color: var(--dk-accent) !important;
}
label.switch input:disabled + .slider {
    opacity: 0.5 !important;
    cursor: not-allowed;
}

/* Slider-btn variant used by a few pages */
label.switch input:checked + .slider-btn:before {
    transform: translateX(20px) !important;
    background: #ffffff !important;
}
label.switch .slider-btn {
    position: absolute !important;
    inset: 0 !important;
    background-color: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 24px !important;
    cursor: pointer;
    transition: background-color .25s ease;
}
label.switch input:checked + .slider-btn {
    background: linear-gradient(90deg, var(--dk-accent) 0%, #2563eb 100%) !important;
    border-color: var(--dk-accent) !important;
    box-shadow: 0 0 0 3px var(--dk-accent-glow) !important;
}
label.switch .slider-btn:before {
    content: "" !important;
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    left: 2px !important;
    bottom: 2px !important;
    background: linear-gradient(180deg, #ffffff 0%, #e5ecf7 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35) !important;
    transition: transform .25s cubic-bezier(.4,.0,.2,1) !important;
}

/* ============================================================
   AUTH PAGES  (login, register, password reset)
   The shell markup is in vendor/adminlte/auth/auth-page.blade.php
   and resources/views/auth/login.blade.php.  We restyle without
   touching markup so the form continues to work.
   ============================================================ */

body.login-page,
body.register-page,
body.lockscreen-page {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,0.18), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(99,102,241,0.18), transparent 60%),
        var(--dk-bg) !important;
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Outer wrapper */
.login-box,
.register-box,
.lockscreen-box {
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
}

/* Logo block ABOVE the card (auth-page.blade.php renders this) */
.login-page .login-logo,
.register-page .register-logo {
    margin-bottom: 18px;
    text-align: center;
}
.login-page .login-logo a,
.register-page .register-logo a {
    color: var(--dk-text) !important;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.3px;
    text-decoration: none;
}
.login-page .login-logo img,
.register-page .register-logo img {
    filter: brightness(1.1);
    max-height: 44px;
    width: auto;
}

/* The card frame — replace the green-bordered AdminLTE default */
.login-page .card,
.register-page .card,
.login-page .card.card-outline.card-primary,
.register-page .card.card-outline.card-primary {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    border-top: 1px solid var(--dk-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
    overflow: hidden;
}
.login-page .card-body,
.register-page .card-body {
    padding: 0 !important;
    background: transparent !important;
}

/* Split layout: image left, form right */
.login_wrap {
    display: flex !important;
    flex-direction: row;
    min-height: 480px;
    background: transparent;
}
.login_wrap .left {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1a36 0%, #1e1b4b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_wrap .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity .3s ease;
}

/* Decorative panel when no image is available */
.login_wrap .left .left-panel-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(59,130,246,0.45) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(99,102,241,0.45) 0%, transparent 50%),
        linear-gradient(135deg, #0b1224 0%, #1e1b4b 100%);
}
.login_wrap .left .art-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.7;
    pointer-events: none;
}
.login_wrap .left .art-blob-1 {
    width: 280px;
    height: 280px;
    top: -60px;
    left: -60px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    animation: dk-blob-float 9s ease-in-out infinite;
}
.login_wrap .left .art-blob-2 {
    width: 320px;
    height: 320px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    animation: dk-blob-float 11s ease-in-out infinite reverse;
}
@keyframes dk-blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -20px) scale(1.1); }
}
.login_wrap .left .art-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 40px;
    max-width: 360px;
}
.login_wrap .left .art-content h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    color: #fff;
}
.login_wrap .left .art-content p {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    margin: 0;
}

.login_wrap .left::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11,16,32,0.10) 0%, rgba(11,16,32,0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

/* The auth-page wrapper renders a redundant outer logo block.
   The inner one (inside .right) is what we want — hide the outer. */
.login-page > .content > .login-box > .login-logo,
.login-page > .login-box > .login-logo,
.register-page > .content > .register-box > .register-logo,
.register-page > .register-box > .register-logo {
    display: none !important;
}
.login_wrap .right {
    flex: 1 1 50%;
    background: var(--dk-surface);
    padding: 44px 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Inner logo (inside the form column) */
.login-logo-inner {
    text-align: center;
    margin-bottom: 6px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-logo-inner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--dk-text) !important;
}
.login-logo-inner img {
    max-height: 48px;
    width: auto;
    filter: brightness(1.1);
}

/* Heading */
.card-header-heading {
    text-align: center;
    margin-bottom: 26px;
    padding-top: 8px;
}
.card-header-heading h3,
.card-header-heading .card-title {
    color: var(--dk-text) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin: 0 !important;
    letter-spacing: -0.2px;
}
.card-header-heading::after {
    content: "Sign in to continue to your dashboard";
    display: block;
    color: var(--dk-text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-top: 6px;
}

/* Inputs (input-group pattern with right-side icon) */
.login-page .input-group,
.register-page .input-group {
    margin-bottom: 16px !important;
}
.login-page .input-group .form-control,
.register-page .input-group .form-control {
    background: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    height: 48px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: none !important;
}
.login-page .input-group .form-control::placeholder,
.register-page .input-group .form-control::placeholder {
    color: var(--dk-text-muted) !important;
    opacity: 0.7;
}
.login-page .input-group .form-control:focus,
.register-page .input-group .form-control:focus {
    border-color: var(--dk-accent) !important;
    background: var(--dk-surface-2) !important;
    box-shadow: 0 0 0 3px var(--dk-accent-glow) !important;
    z-index: 2;
}
.login-page .input-group .input-group-append,
.register-page .input-group .input-group-append {
    margin-left: -1px;
}
.login-page .input-group .input-group-text,
.register-page .input-group .input-group-text {
    background: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    border-left: 0 !important;
    color: var(--dk-text-muted) !important;
    width: 46px;
    justify-content: center;
    border-radius: 0 10px 10px 0 !important;
}
.login-page .input-group .form-control:focus ~ .input-group-append .input-group-text {
    border-color: var(--dk-accent) !important;
    color: var(--dk-accent-2) !important;
}
.login-page .input-group .invalid-feedback,
.register-page .input-group .invalid-feedback {
    color: #fca5a5 !important;
    font-size: 12px;
    margin-top: 4px;
}

/* Login button */
.login-page form button[type="submit"],
.register-page form button[type="submit"] {
    background: linear-gradient(90deg, var(--dk-accent) 0%, #2563eb 100%) !important;
    border: 0 !important;
    color: #fff !important;
    height: 48px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px var(--dk-accent-glow) !important;
    margin-top: 8px;
    transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
}
.login-page form button[type="submit"]:hover,
.register-page form button[type="submit"]:hover {
    filter: brightness(1.08);
    box-shadow: 0 14px 32px var(--dk-accent-glow) !important;
    transform: translateY(-1px);
}
.login-page form button[type="submit"]:active,
.register-page form button[type="submit"]:active {
    transform: translateY(0);
}
.login-page form button[type="submit"] .fas {
    margin-right: 6px;
    opacity: 0.85;
}

/* icheck remember-me */
.login-page .icheck-primary label,
.register-page .icheck-primary label {
    color: var(--dk-text-muted) !important;
    font-size: 13px;
}

/* Validation error message from jquery.validate */
.login-page .error,
.register-page .error {
    color: #fca5a5 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    display: block;
    margin-top: 4px;
}

/* Footer links if shown */
.login-page .card-footer-inner a,
.register-page .card-footer-inner a {
    color: var(--dk-accent-2) !important;
    font-size: 13px;
}
.login-page .card-footer-inner a:hover,
.register-page .card-footer-inner a:hover {
    color: var(--dk-accent) !important;
}

/* Responsive: stack vertically below 768px */
@media (max-width: 767.98px) {
    .login_wrap {
        flex-direction: column;
        min-height: auto;
    }
    .login_wrap .left {
        flex: none;
        min-height: 180px;
        max-height: 220px;
    }
    .login_wrap .left img {
        height: 220px;
    }
    .login_wrap .right {
        padding: 32px 24px 28px;
    }
    .login-box,
    .register-box {
        max-width: 460px !important;
    }
}

/* ============================================================
   GLOBAL RESPONSIVE — applies to every admin page
   ============================================================ */

/* Universal table horizontal scroll wrapper.
   Wrap any <table> in <div class="table-responsive"> in legacy views;
   if not wrapped, force the bare table to be scrollable on mobile. */
@media (max-width: 991.98px) {
    .card-body > table,
    .card-body > .dataTables_wrapper > table,
    .content-wrapper table:not(.no-responsive) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table-responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
}

/* Container padding on mobile */
@media (max-width: 767.98px) {
    .content-wrapper > .content > .container,
    .content-wrapper > .content > .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Cards take full width with smaller padding */
    .card-body { padding: 14px !important; }
    .card-header { padding: 12px 14px !important; }

    /* Page headers stack vertically */
    .merchant_header,
    .filter_btn {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .merchant_header h4,
    .merchant_header h3 {
        text-align: center;
    }
    .filter_btn {
        flex-direction: row !important;
        justify-content: center;
    }
    .filter_btn .btn {
        flex: 1;
    }

    /* Headings smaller */
    h1, h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }
    h4 { font-size: 15px !important; }
    h5 { font-size: 14px !important; }
}

/* DataTables filter / length controls — stack on mobile */
@media (max-width: 767.98px) {
    .dataTables_wrapper { flex-direction: column; gap: 10px; }
    .dataTables_length, .dataTables_filter {
        width: 100% !important;
    }
    .dataTables_filter label,
    .dataTables_length label {
        width: 100% !important;
        flex-direction: column;
        align-items: stretch !important;
    }
    .dataTables_filter input,
    .dataTables_length select {
        width: 100% !important;
    }
    .dataTables_paginate {
        text-align: center;
        margin: 14px auto !important;
    }
    .dataTables_paginate .paginate_button {
        margin: 2px !important;
        padding: 5px 9px !important;
        font-size: 12px !important;
    }
    .dataTables_info { text-align: center; }
}

/* Bootstrap pagination — compact on mobile */
@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: 5px 9px !important;
        font-size: 12px !important;
    }
}

/* Forms — stack on small screens, full-width inputs */
@media (max-width: 767.98px) {
    .form-row > [class*="col-"],
    .form-group[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px;
    }
    .form-control,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="date"],
    textarea {
        width: 100% !important;
        font-size: 14px !important;
    }
    /* Prevent iOS zoom on input focus */
    input, select, textarea { font-size: 16px !important; }
}

/* Buttons — full-width when stacked, comfortable tap targets */
@media (max-width: 767.98px) {
    .card-footer .btn,
    .merchant_header .btn,
    form .btn-block {
        min-height: 42px;
    }
    /* Action button rows: wrap and gap */
    .btn-group, .btn-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Modals — full-screen-ish on mobile */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    .modal-content { border-radius: 10px !important; }
    .modal-header, .modal-body, .modal-footer {
        padding: 14px !important;
    }
}

/* Dashboard stat grid — already responsive via auto-fill, but tighten gap */
@media (max-width: 575.98px) {
    .dk-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .dk-stat-value { font-size: 22px !important; }
    .dk-page-head {
        flex-direction: column;
        align-items: stretch !important;
        text-align: left;
    }
    .dk-page-head h1 { font-size: 19px !important; }
    .dk-datefilter {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .dk-datefilter button {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .dk-section-title { font-size: 10px !important; }
}

/* Top navbar — hide brand text on small, keep hamburger + user dropdown */
@media (max-width: 575.98px) {
    .main-header.navbar { padding: 0 8px !important; min-height: 50px !important; }
    .main-header .navbar-brand { display: none; }
    .main-header .nav-item .nav-link { padding: 6px 8px !important; font-size: 13px !important; }
}

/* Action button rows in tables — keep tight on mobile */
@media (max-width: 767.98px) {
    td .action-button,
    td a.btn-sm {
        margin: 2px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

/* Sidebar opens over content — content scroll lock */
@media (max-width: 991.98px) {
    body.sidebar-open {
        overflow: hidden;
    }
}

/* Card-header action button row stacks on tiny screens */
@media (max-width: 575.98px) {
    .card-header.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
    }
    .card-header.d-flex .btn {
        width: 100%;
    }
}

/* Dashboard analytics chart + map — tighten margins */
@media (max-width: 767.98px) {
    #analyticsChart { max-height: 250px; }
    #map { height: 220px !important; }
}

/* Suspicious login banner stacks */
@media (max-width: 575.98px) {
    .dk-security-alert {
        flex-direction: column;
        text-align: center;
    }
    .dk-security-ips { justify-content: center; }
}