/* ============================================================
   Game Raffle — Black & Red Theme (Bootstrap 5)
   Palette adapted from Mobile Money Aggregator theme
   ============================================================ */

:root {
    --mm-black:       #0a0a0a;
    --mm-black-soft:  #141414;
    --mm-black-elev:  #1e1e1e;
    --mm-red:         #e10600;
    --mm-red-dark:    #a30400;
    --mm-red-soft:    #ff3b30;
    --mm-white:       #ffffff;
    --mm-muted:       #9ca3af;
    --mm-border:      #2a2a2a;

    /* Legacy aliases used throughout views */
    --primary:        #e10600;
    --primary-hover:  #a30400;
    --primary-light:  #fff0ef;
    --accent:         #ff3b30;
    --success:        #0f9d58;
    --warning:        #f59e0b;
    --danger:         #e10600;
    --bg:             #f5f6f8;
    --surface:        #ffffff;
    --border:         #e5e7eb;
    --sidebar-bg:     #0a0a0a;
    --sidebar-width:  240px;
    --topnav-height:  56px;
    --text:           #111827;
    --text-muted:     #6b7280;
    --card-radius:    10px;
    --shadow-sm:      0 1px 4px rgba(0,0,0,.06);
    --shadow:         0 2px 12px rgba(0,0,0,.08);
    --font-size-base: .875rem;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-size: var(--font-size-base);
    padding-top: var(--topnav-height);
    font-family: 'Inter', "Nunito", system-ui, -apple-system, sans-serif;
    letter-spacing: 0.01em;
    min-height: 100vh;
}

a { color: var(--mm-red); text-decoration: none; }
a:hover { color: var(--mm-red-dark); }

/* ---- Top Navbar ---- */
#topNavbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topnav-height);
    z-index: 1040;
    background: var(--mm-white);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
}

#topNavbar .navbar-brand {
    font-size: .95rem;
    font-weight: 800;
    color: var(--mm-black) !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#topNavbar .navbar-brand i.text-primary { color: var(--mm-red) !important; }

#topNavbar .nav-link {
    color: var(--text-muted);
    font-size: .82rem;
    padding: .4rem .75rem;
}
#topNavbar .nav-link:hover { color: var(--mm-red); }

/* User avatar in topbar */
#topNavbar .rounded-circle.bg-primary {
    background: var(--mm-black) !important;
}

/* Wallet badge */
.mm-wallet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: var(--mm-black);
    color: var(--mm-white);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
}
.mm-wallet .mm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mm-red); }

/* ---- Sidebar ---- */
#layoutSidenav_nav {
    width: var(--sidebar-width);
    position: fixed;
    top: var(--topnav-height);
    bottom: 0;
    left: 0;
    z-index: 1038;
    background: linear-gradient(180deg, var(--mm-black) 0%, var(--mm-black-soft) 100%);
    border-right: 1px solid var(--mm-border);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
    transition: width .2s ease;
}

#layoutSidenav_nav::-webkit-scrollbar { width: 6px; }
#layoutSidenav_nav::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ---- Sidebar Nav ---- */
.sb-sidenav { height: 100%; display: flex; flex-direction: column; }
.sb-sidenav-menu { flex: 1; padding: .75rem 0; }
.sb-sidenav-nav-items { display: flex; flex-direction: column; }

.sb-sidenav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    color: #cbd5e1;
    border-left: 3px solid transparent;
    font-weight: 500;
    white-space: nowrap;
    transition: all .15s ease;
    text-decoration: none;
    background: transparent;
}

.sb-sidenav .nav-link i {
    width: 18px;
    text-align: center;
    font-size: .8rem;
    flex-shrink: 0;
    color: #9ca3af;
}

.sb-sidenav .nav-link:hover,
.sb-sidenav .nav-link.active {
    background: rgba(225, 6, 0, 0.08);
    color: var(--mm-white);
    border-left-color: var(--mm-red);
}

.sb-sidenav .nav-link:hover i,
.sb-sidenav .nav-link.active i {
    color: var(--mm-red);
}

/* Accordion heading / section headers */
.sb-sidenav .nav-link[data-bs-toggle="collapse"] {
    color: #cbd5e1;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .6rem 1.1rem .35rem;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.sb-sidenav .nav-link[data-bs-toggle="collapse"]:hover {
    background: rgba(225,6,0,0.08);
    color: var(--mm-white);
    border-left-color: var(--mm-red);
}

/* Chevron arrow on collapsible links */
.sb-sidenav .nav-link[data-bs-toggle="collapse"] .fa-chevron-down {
    color: #6b7280;
    transition: transform .2s;
}
.sb-sidenav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Sub-menu items */
.sb-sidenav .collapse .nav-link,
.sb-sidenav .collapsing .nav-link {
    padding-left: 2.5rem;
    font-size: .78rem;
    font-weight: 400;
    color: #94a3b8;
    border-left-color: transparent;
    background: rgba(255,255,255,.02);
}
.sb-sidenav .collapse .nav-link:hover,
.sb-sidenav .collapse .nav-link.active {
    background: rgba(225,6,0,.15);
    color: var(--mm-white);
    border-left-color: var(--mm-red);
}

/* Sidebar HR divider */
.sb-sidenav hr { border-color: var(--mm-border); margin: .5rem .9rem; opacity: 1; }

/* Sidebar footer */
.sb-sidenav .sb-sidenav-footer {
    padding: .75rem 1.1rem;
    font-size: .75rem;
    color: #6b7280;
    border-top: 1px solid var(--mm-border);
}

/* ---- Content area ---- */
#layoutSidenav_content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left .2s ease;
    background: var(--bg);
}

/* Toggled sidebar */
body.sb-sidenav-toggled #layoutSidenav_nav { width: 0; }
body.sb-sidenav-toggled #layoutSidenav_content { margin-left: 0; }

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border: 1px solid #eceef1 !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid #f0f1f4;
    padding: .75rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    border-top-left-radius: var(--card-radius) !important;
    border-top-right-radius: var(--card-radius) !important;
}

.card-body { padding: 1rem; }
.card-body.p-0 { padding: 0 !important; }

/* ---- Stat cards ---- */
.stat-card {
    border-radius: var(--card-radius);
    overflow: hidden;
    padding: 1.1rem;
    position: relative;
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.stat-card.black { background: linear-gradient(135deg, #0a0a0a, #2b2b2b); color: var(--mm-white); }
.stat-card.red   { background: linear-gradient(135deg, #e10600, #a30400); color: var(--mm-white); }
.stat-card.outline-black {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.stat-card.outline-red {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #fde2e2 !important;
    border-left: 4px solid var(--mm-red) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Icon — always absolute so it never affects card height */
.stat-card .stat-icon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.75rem;
    opacity: .15;
    width: auto; height: auto;
    border-radius: 0;
    display: block;
    flex-shrink: unset;
}
.stat-card.outline-black .stat-icon { color: var(--mm-black); opacity: .12; }
.stat-card.outline-red   .stat-icon { color: var(--mm-red);   opacity: .18; }

.stat-value { font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.stat-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: .3rem;
}
.stat-sub {
    margin-top: .35rem;
    font-size: .75rem;
    opacity: .75;
}
/* On solid cards keep label/sub legible against dark background */
.stat-card.black .stat-label,
.stat-card.red   .stat-label { color: rgba(255,255,255,.7); }

/* SB-Admin border-left accent cards */
.border-left-primary { border-left: 4px solid var(--mm-black) !important; }
.border-left-secondary { border-left: 4px solid #6b7280 !important; }
.border-left-success { border-left: 4px solid var(--success) !important; }
.border-left-info    { border-left: 4px solid var(--mm-red) !important; }
.border-left-warning { border-left: 4px solid var(--warning) !important; }
.border-left-danger  { border-left: 4px solid var(--mm-red) !important; }

/* ---- Tables ---- */
.table { font-size: .82rem; color: var(--text); margin-bottom: 0; }
.table thead th {
    background: var(--mm-black);
    color: var(--mm-white);
    border-bottom: none;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .75rem .9rem;
    white-space: nowrap;
}
/* Keep all links inside table headers white — overrides global a { color: red } */
.table thead th a,
.table thead th a:hover,
.table thead th a:visited,
.kv-sort-link,
.kv-sort-link:hover {
    color: var(--mm-white) !important;
}
.table tbody td {
    padding: .6rem .9rem;
    border-top: 1px solid #f1f2f4;
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) { background: #fafafa; }
.table-hover tbody tr:hover { background: #fff0ef; }

/* ---- Buttons ---- */
.btn {
    font-size: .82rem;
    border-radius: 8px;
    padding: .45rem 1rem;
    font-weight: 600;
    transition: all .15s ease;
}
.btn-sm { font-size: .75rem; padding: .28rem .7rem; border-radius: 6px; }

.btn-primary,
.btn-info {
    background: var(--mm-red);
    border-color: var(--mm-red);
    color: var(--mm-white);
}
.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus {
    background: var(--mm-red-dark);
    border-color: var(--mm-red-dark);
    color: var(--mm-white);
    box-shadow: 0 0 0 .2rem rgba(225,6,0,.25);
}

.btn-dark { background: var(--mm-black); border-color: var(--mm-black); color: var(--mm-white); }
.btn-dark:hover { background: #222; border-color: #222; color: var(--mm-white); }

.btn-outline-primary {
    color: var(--mm-red);
    border-color: var(--mm-red);
}
.btn-outline-primary:hover {
    background: var(--mm-red);
    border-color: var(--mm-red);
    color: var(--mm-white);
}

.btn-outline-dark {
    color: var(--mm-black);
    border-color: var(--mm-black);
}
.btn-outline-dark:hover { background: var(--mm-black); color: var(--mm-white); }

.btn-outline-danger {
    color: var(--mm-red);
    border-color: var(--mm-red);
}
.btn-outline-danger:hover { background: var(--mm-red); color: var(--mm-white); }

/* ---- Forms ---- */
.form-control, .form-select {
    font-size: .85rem;
    border-color: #d1d5db;
    border-radius: 8px;
    padding: .5rem .8rem;
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--mm-red);
    box-shadow: 0 0 0 .2rem rgba(225,6,0,.15);
}
.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .3rem;
}
.form-control-sm, .form-select-sm { font-size: .78rem; padding: .25rem .55rem; }

/* ---- Badges ---- */
.badge { font-size: .7rem; font-weight: 600; border-radius: 6px; padding: .35em .65em; letter-spacing: .03em; }
.badge.bg-success { background: var(--success) !important; }
.badge.bg-danger,
.badge.bg-info    { background: var(--mm-red) !important; color: #fff !important; }
.badge.bg-dark    { background: var(--mm-black) !important; }
.badge.bg-warning { background: var(--warning) !important; color: #fff !important; }
.badge.bg-primary { background: var(--mm-black) !important; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: .78rem; background: transparent; padding: 0; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text-muted); }

/* ---- Page title area ---- */
.page-header { margin-bottom: 1.1rem; }
.page-header h4 { font-size: 1.05rem; font-weight: 800; color: var(--mm-black); margin: 0; }

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.1rem;
}
.page-title h1 { font-size: 1.25rem; font-weight: 800; color: var(--mm-black); margin: 0; }
.page-title .subtitle { color: var(--text-muted); font-size: .82rem; margin-top: .15rem; }

/* ---- Filter card ---- */
.filter-card .card-header { background: var(--primary-light) !important; color: var(--mm-red); }

/* ---- Nav pills ---- */
.nav-pills .nav-link {
    font-size: .75rem;
    padding: .3rem .8rem;
    color: var(--text-muted);
    border-radius: 6px;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--mm-red);
    color: #fff;
}

/* ---- Modals ---- */
.modal-header { border-bottom: 1px solid var(--border); padding: .85rem 1rem; }
.modal-footer { border-top: 1px solid var(--border); padding: .75rem 1rem; }
.modal-title { font-size: .9rem; font-weight: 700; }
.modal-content { border-radius: var(--card-radius); border: 0; box-shadow: 0 8px 32px rgba(0,0,0,.15); }

/* Progress modal spinner */
.spinner-border.text-primary { color: var(--mm-red) !important; }

/* ---- Alerts ---- */
.alert { border-radius: 8px; border: none; padding: .75rem 1rem; font-size: .88rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger, .alert-error { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info    { background: #e0f2fe; color: #075985; }

/* ---- Login page ---- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #e10600 100%);
    padding: 1.5rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}

/* ---- Text & bg utilities ---- */
.text-primary { color: var(--mm-red) !important; }
.text-info    { color: var(--mm-red) !important; }
.text-danger  { color: var(--mm-red) !important; }
.text-warning { color: var(--warning) !important; }
.text-success { color: var(--success) !important; }
.text-gray-100 { color: #f3f4f6 !important; }
.text-gray-200 { color: #e5e7eb !important; }
.text-gray-300 { color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-900 { color: #111827 !important; }

.bg-primary    { background-color: var(--mm-black) !important; color: #fff !important; }
.bg-info       { background-color: var(--mm-red) !important; color: #fff !important; }
.bg-dark       { background-color: var(--mm-black) !important; color: #fff !important; }
.border-primary { border-color: var(--mm-red) !important; }

.bg-gradient-info,
.bg-gradient-primary,
.bg-gradient-success,
.bg-gradient-warning,
.bg-gradient-danger {
    background: linear-gradient(135deg, var(--mm-black) 0%, var(--mm-red) 100%) !important;
    color: #fff !important;
}

/* ---- Scroll-to-top ---- */
.scroll-to-top {
    position: fixed; right: 1rem; bottom: 1rem;
    display: none; width: 2.5rem; height: 2.5rem;
    background: var(--mm-black); color: var(--mm-white) !important;
    border-radius: 50%; line-height: 2.5rem; text-align: center; z-index: 1000;
}
.scroll-to-top:hover { background: var(--mm-red); }

/* ---- Sticky footer ---- */
.sticky-footer {
    padding: 1rem;
    background: var(--mm-white);
    border-top: 1px solid #e5e7eb;
    color: var(--text-muted);
    font-size: .78rem;
}

/* ---- Dropdown menus ---- */
.dropdown-menu {
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-radius: 10px;
    font-size: .82rem;
}
.dropdown-item:hover { background: var(--primary-light); color: var(--mm-red); }

/* ---- Kartik GridView ---- */
.kv-panel-before .kv-expand-detail-row { display: none !important; }
.grid-view .table th { background: var(--mm-black); color: var(--mm-white); }
.grid-view .filters .form-control { font-size: .75rem; padding: .2rem .4rem; height: auto; }
.grid-view .summary { color: var(--text-muted); font-size: .82rem; margin-bottom: .5rem; }
.grid-view .pagination { margin: .75rem 0; display: flex; gap: .25rem; list-style: none; padding: 0; }
.grid-view .pagination .page-link {
    border-radius: 6px; border: 1px solid #d1d5db;
    color: var(--mm-black); padding: .3rem .7rem; font-size: .82rem;
}
.grid-view .pagination .active .page-link {
    background: var(--mm-red); border-color: var(--mm-red); color: #fff;
}

/* ---- Utility / misc ---- */
.fw-600 { font-weight: 600; }
.fs-xs  { font-size: .75rem; }
.fs-sm  { font-size: .82rem; }
.shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,.12) !important; }
.shadow    { box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-bolder { font-weight: 800 !important; }
.font-weight-light  { font-weight: 300 !important; }

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

/* ---- Glyphicon → Font Awesome 6 (Kartik GridView BS3 mode) ---- */
.glyphicon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    font-style: normal;
    display: inline-block;
    speak: never;
    -webkit-font-smoothing: antialiased;
}
.glyphicon-sort-by-attributes::before      { content: "\f15d"; }
.glyphicon-sort-by-attributes-alt::before  { content: "\f15e"; }
.glyphicon-sort-by-order::before           { content: "\f160"; }
.glyphicon-sort-by-order-alt::before       { content: "\f161"; }
.glyphicon-sort::before                    { content: "\f0dc"; }
.glyphicon-export::before        { content: "\f14d"; }
.glyphicon-floppy-open::before   { content: "\f1c9"; }
.glyphicon-floppy-save::before   { content: "\f15c"; }
.glyphicon-floppy-remove::before { content: "\f1c3"; }
.glyphicon-floppy-disk::before   { content: "\f1c1"; }
.glyphicon-floppy-saved::before  { content: "\f0c7"; }
.glyphicon-resize-full::before   { content: "\f065"; }
.glyphicon-resize-small::before  { content: "\f066"; }
.glyphicon-trash::before         { content: "\f1f8"; }
.glyphicon-pencil::before        { content: "\f303"; }
.glyphicon-eye-open::before      { content: "\f06e"; }
.glyphicon-plus::before          { content: "\2b";   }
.glyphicon-minus::before         { content: "\f068"; }
.glyphicon-ok::before            { content: "\f00c"; }
.glyphicon-remove::before        { content: "\f00d"; }
.glyphicon-search::before        { content: "\f002"; }
.glyphicon-refresh::before       { content: "\f021"; }
.glyphicon-download-alt::before  { content: "\f019"; }
.glyphicon-upload::before        { content: "\f093"; }
.glyphicon-filter::before        { content: "\f0b0"; }
.glyphicon-chevron-left::before  { content: "\f053"; }
.glyphicon-chevron-right::before { content: "\f054"; }
.glyphicon-chevron-up::before    { content: "\f077"; }
.glyphicon-chevron-down::before  { content: "\f078"; }
.glyphicon-menu-left::before     { content: "\f053"; }
.glyphicon-menu-right::before    { content: "\f054"; }
.glyphicon-asterisk::before      { content: "\f069"; }
.glyphicon-warning-sign::before  { content: "\f071"; }
.glyphicon-info-sign::before     { content: "\f129"; }
.glyphicon-cog::before           { content: "\f013"; }
.glyphicon-list::before          { content: "\f03a"; }
.glyphicon-th-list::before       { content: "\f00b"; }
.glyphicon-th::before            { content: "\f009"; }
.glyphicon-user::before          { content: "\f007"; }
.glyphicon-lock::before          { content: "\f023"; }
.glyphicon-link::before          { content: "\f0c1"; }
.glyphicon-home::before          { content: "\f015"; }

.kv-sort-icon { display: none; }
.kv-sort-link::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .65em;
    margin-left: 5px;
    opacity: .35;
    content: "\f0dc";
}
.kv-sort-link.asc::after  { content: "\f0de"; opacity: 1; color: var(--mm-white); }
.kv-sort-link.desc::after { content: "\f0dd"; opacity: 1; color: var(--mm-white); }

/* ---- BS4 → BS5 spacing shims ---- */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

@media (min-width: 576px) { .ml-sm-2{margin-left:.5rem!important}.mr-sm-2{margin-right:.5rem!important}.ml-sm-auto{margin-left:auto!important}.mr-sm-auto{margin-right:auto!important} }
@media (min-width: 768px) { .ml-md-2{margin-left:.5rem!important}.mr-md-2{margin-right:.5rem!important}.ml-md-3{margin-left:1rem!important}.mr-md-3{margin-right:1rem!important}.ml-md-auto{margin-left:auto!important}.mr-md-auto{margin-right:auto!important} }
@media (min-width: 992px) { .ml-lg-2{margin-left:.5rem!important}.mr-lg-2{margin-right:.5rem!important}.ml-lg-auto{margin-left:auto!important}.mr-lg-auto{margin-right:auto!important} }

.float-left  { float: left !important; }
.float-right { float: right !important; }
.form-group  { margin-bottom: 1rem; }

.form-control-user { border-radius: 8px !important; padding: .7rem 1rem !important; font-size: .9rem !important; }
.btn-user    { border-radius: 8px !important; padding: .55rem 1rem !important; font-size: .9rem !important; }
.btn-block   { display: block; width: 100%; }

.close {
    float: right; font-size: 1.25rem; font-weight: 700; line-height: 1;
    color: #000; text-shadow: 0 1px 0 #fff; opacity: .5;
    background: transparent; border: 0; padding: 0 .5rem; cursor: pointer;
}
.close:hover { opacity: .9; }

.custom-control { position: relative; padding-left: 1.75rem; display: block; min-height: 1.25rem; }
.custom-control-input { position: absolute; left: 0; width: 1rem; height: 1rem; margin-top: .25rem; }
.custom-control-label { margin-bottom: 0; cursor: pointer; }

.input-group-append, .input-group-prepend { display: flex; align-items: stretch; }
.input-group-append .input-group-text, .input-group-prepend .input-group-text {
    background: #f3f4f6; border: 1px solid #d1d5db;
    padding: 0 .75rem; display: flex; align-items: center;
}
.input-group-prepend .input-group-text { border-right: 0; border-radius: 8px 0 0 8px; }
.input-group-append  .input-group-text { border-left:  0; border-radius: 0 8px 8px 0; }

.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.custom-select {
    display: block; width: 100%;
    padding: .55rem 2rem .55rem .8rem;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .75rem center/10px 6px;
    border: 1px solid #d1d5db; border-radius: 8px; font-size: .9rem;
}

.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > [class^="col-"],
.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #layoutSidenav_nav {
        position: fixed;
        left: -260px;
        top: 0; bottom: 0;
        z-index: 1040;
        transition: left .25s ease;
    }
    #layoutSidenav_nav.mm-show { left: 0; }
    .mm-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1039; display: none;
    }
    .mm-backdrop.show { display: block; }
    #layoutSidenav_content { margin-left: 0; }
}

/* ---- Sidebar toggle button ---- */
#sidebarToggle {
    width: 2.2rem; height: 2.2rem;
    background: transparent;
    border: none;
    color: var(--mm-black);
    font-size: 1.1rem;
}
#sidebarToggle:hover { color: var(--mm-red); }

/* ---- Tight top spacing (remove extra space above main content) ---- */
#layoutSidenav_content { padding-top: 0 !important; }
#layoutSidenav_content > main { margin: 0 !important; padding: 0 !important; }
#layoutSidenav_content > main > .container-fluid { padding-top: .75rem !important; }
.page-header { margin: 0 0 .6rem !important; padding-top: 0 !important; }
.page-header h4,
.page-header h1,
.page-header h2,
.page-header h3 { margin: 0 !important; }
.page-title { margin: 0 0 .8rem !important; padding-top: 0 !important; }
.page-title h1,
.page-title h2,
.page-title h3,
.page-title h4 { margin: 0 !important; }