/* ==========================================================================
   NOVIX • Design System 2.0
   Modern visual layer for the admin panel + auth screens.
   Loaded last, so it intentionally overrides style.default.css / custom-*.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand — plum / violet */
    --brand-50:  #F5F2FE;
    --brand-100: #EAE3FC;
    --brand-200: #D5C8F8;
    --brand-300: #B69FF0;
    --brand-400: #9878E4;
    --brand-500: #7C5CC4;
    --brand-600: #6A49AC;
    --brand-700: #55388C;
    --brand-800: #3F2A69;
    --brand-900: #2A1B48;

    /* Accent — champagne gold (boutique signature) */
    --gold-100: #FBF3E2;
    --gold-300: #EBD09A;
    --gold-500: #C9A25C;
    --gold-700: #9A7736;

    /* Semantic */
    --success-50: #E7F8F0;  --success-500: #12B76A;  --success-700: #067647;
    --danger-50:  #FEECEB;  --danger-500:  #F04438;  --danger-700:  #B42318;
    --warning-50: #FEF4E6;  --warning-500: #F79009;  --warning-700: #B54708;
    --info-50:    #E9F2FE;  --info-500:    #2E90FA;  --info-700:    #175CD3;

    /* Neutrals */
    --ink-900: #16112B;
    --ink-800: #241C42;
    --ink-700: #3A3157;
    --ink-600: #554E70;
    --ink-500: #6F6889;
    --ink-400: #918BA6;
    --ink-300: #B7B2C6;
    --ink-200: #DCD9E5;
    --ink-100: #EDEBF3;
    --ink-50:  #F6F5FA;

    --canvas: #F5F4FA;
    --surface: #FFFFFF;
    --surface-2: #FBFAFE;
    --border: #E8E5F0;
    --border-strong: #D8D4E5;

    /* Typography */
    --font-sans: 'Plus Jakarta Sans', 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
    --font-num: 'Plus Jakarta Sans', 'Vazirmatn', system-ui, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    /* Radii */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 999px;

    /* Elevation */
    --sh-xs: 0 1px 2px rgba(22, 17, 43, .05);
    --sh-sm: 0 1px 3px rgba(22, 17, 43, .06), 0 1px 2px rgba(22, 17, 43, .04);
    --sh-md: 0 4px 12px -2px rgba(22, 17, 43, .08), 0 2px 6px -2px rgba(22, 17, 43, .05);
    --sh-lg: 0 12px 28px -6px rgba(22, 17, 43, .12), 0 4px 10px -4px rgba(22, 17, 43, .06);
    --sh-xl: 0 24px 56px -12px rgba(22, 17, 43, .18), 0 8px 20px -8px rgba(22, 17, 43, .08);
    --sh-brand: 0 8px 22px -6px rgba(124, 92, 196, .45);

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 420ms;

    /* Layout */
    --sidebar-w: 248px;
    --header-h: 66px;

    --grad-brand: linear-gradient(135deg, #8A68D8 0%, #6A49AC 100%);
    --grad-gold:  linear-gradient(135deg, #E3C78B 0%, #C9A25C 100%);
    --grad-canvas: radial-gradient(1200px 600px at 100% -10%, rgba(124, 92, 196, .07), transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, rgba(201, 162, 92, .07), transparent 60%);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-700);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); color: var(--ink-900); font-weight: 700; }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: var(--fs-base); }

a { color: var(--brand-600); transition: color var(--dur-fast) var(--ease-soft); }
a:hover, a:focus { color: var(--brand-700); text-decoration: none; }

small, .small { font-size: var(--fs-xs); }
hr { border-color: var(--border); }
::selection { background: var(--brand-200); color: var(--ink-900); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; }

/* Focus ring — accessible + on brand */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 92, 196, .28);
    border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. SHELL — page / header / sidebar / footer
   -------------------------------------------------------------------------- */
.page {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    background-color: var(--canvas);
    background-image: var(--grad-canvas);
    background-attachment: fixed;
    transition: margin-left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out);
    /* .header is fixed, so the page reserves its height */
    padding-top: calc(var(--header-h) + 10px);
    padding-bottom: 72px;
}
.page.active { margin-left: 0; width: 100%; }

.page > .container-fluid,
.page section > .container-fluid { padding-left: 26px; padding-right: 26px; }

#content { padding-top: 6px; }

/* ---- Header --------------------------------------------------------- */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--header-h);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.header.is-scrolled { box-shadow: var(--sh-md); background: rgba(255, 255, 255, .94); }

.header nav.navbar { padding: 0; height: var(--header-h); }
.header .navbar-holder { height: var(--header-h); }

nav.navbar a {
    font-size: var(--fs-sm);
    color: var(--ink-700);
    line-height: 1.4;
    font-weight: 600;
}

/* Hamburger */
nav.navbar a.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-600) !important;
    padding: 0;
    transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
nav.navbar a.menu-btn:hover {
    background: var(--grad-brand);
    color: #fff !important;
    transform: translateY(-1px);
}
nav.navbar a.menu-btn i { margin: 0; font-size: 16px; }

/* Top-right nav items */
.nav-menu { gap: 2px; margin-bottom: 0; align-items: center; }
.nav-menu > .nav-item { position: relative; }
.nav-menu > .nav-item > a,
.nav-menu > .nav-item > a.dropdown-item {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px !important;
    border-radius: var(--r-sm);
    color: var(--ink-600) !important;
    background: transparent;
    white-space: nowrap;
    transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-spring);
}
.nav-menu > .nav-item > a:hover,
.nav-menu > .nav-item > a:focus,
.nav-menu > .nav-item > a[aria-expanded="true"] {
    background: var(--brand-50);
    color: var(--brand-700) !important;
    transform: translateY(-1px);
}
.nav-menu > .nav-item > a i { margin: 0; font-size: 16px; }
.nav-menu > .nav-item > a .fa-angle-down { font-size: 12px; opacity: .6; transition: transform var(--dur) var(--ease-out); }
.nav-menu > .nav-item > a[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }

/* POS pill button in header */
.nav-item a.btn-pos,
.nav-item a.dropdown-item.btn-pos {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--sh-brand);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0 18px !important;
    height: 40px;
    border-radius: var(--r-full);
}
.nav-item a.btn-pos:hover {
    background: var(--grad-brand) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(124, 92, 196, .6);
}
.nav-item a.btn-pos i, .nav-item a.btn-pos span { color: #fff !important; }

/* Notification badge */
nav.navbar .badge.notification-number {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 18px; height: 18px; width: auto;
    padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FF6A5B, #F04438) !important;
    color: #fff !important;
    font-size: 10px; font-weight: 700;
    border-radius: var(--r-full);
    box-shadow: 0 0 0 2px #fff, 0 4px 10px -2px rgba(240, 68, 56, .5);
    animation: mrm-pulse 2.4s var(--ease-soft) infinite;
}
@keyframes mrm-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(240, 68, 56, .45); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(240, 68, 56, 0); }
}

/* Brand mark */
.brand-big, .brand-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ink-900);
}
.brand-text.float-left { font-size: var(--fs-2xl); line-height: 1.2; }
.brand-text strong { color: var(--brand-600); }

.brand-big {
    position: static;
    left: auto;
    transform: none;
    margin-left: 14px;
    margin-right: auto;
    line-height: 1.2;
}
.brand-lockup {
    display: inline-flex !important;
    align-items: center;
    gap: 11px;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.brand-lockup-text { display: flex; flex-direction: column; }
.brand-lockup-text strong {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    line-height: 1.2;
    text-transform: none;
}
.brand-lockup-text em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-400);
}
@media (max-width: 1024px) {
    .brand-big { display: inline-flex; margin-left: 10px; }
    /* no logo mark any more — keep the title, drop only the tagline */
    .brand-lockup-text em { display: none; }
}

/* ---- Sidebar -------------------------------------------------------- */
.side-navbar {
    top: var(--header-h);
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 10px 28px;
    box-shadow: 1px 0 0 rgba(22, 17, 43, .02);
    transition: width var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-soft), transform var(--dur-slow) var(--ease-out);
    overflow-x: hidden;
}
.side-navbar.shrink { width: 0; opacity: 0; padding-left: 0; padding-right: 0; }
.pos-page .side-navbar { top: 0; height: 100vh; }

.side-menu { padding: 0; }

.side-navbar li a {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 2px 4px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-600);
    position: relative;
    transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-out);
}
.side-navbar li a > span { flex: 1; }

.side-navbar li a i {
    color: var(--ink-400);
    font-size: 15px;
    width: 30px; height: 30px;
    min-width: 30px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ink-50);
    line-height: 1;
    transition: all var(--dur) var(--ease-out);
}

.side-navbar li a:hover,
.side-navbar li a:focus {
    background: var(--brand-50);
    color: var(--brand-700);
    transform: translateX(2px);
}
.side-navbar li a:hover i { background: var(--brand-100); color: var(--brand-600); }

.side-navbar li a[aria-expanded="true"] {
    background: var(--brand-50);
    color: var(--brand-700);
}
.side-navbar li a[aria-expanded="true"] i {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--sh-brand);
}

/* active page pill */
.side-navbar li.active > a,
.side-navbar li a.is-active {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--sh-brand);
}
.side-navbar li.active > a i,
.side-navbar li a.is-active i {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* caret */
.side-navbar li a[data-toggle="collapse"]::before {
    content: '\f104';
    right: 12px;
    font-size: 13px;
    opacity: .45;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-soft);
    transform: translateY(-50%) rotate(0deg);
}
.side-navbar li a[aria-expanded="true"]::before {
    content: '\f104';
    transform: translateY(-50%) rotate(-90deg);
    opacity: .9;
}

/* submenu */
.side-navbar li ul {
    background: transparent;
    margin: 2px 4px 6px 26px;
    padding: 2px 0 2px 14px;
    border-left: 1.5px solid var(--border);
    border-radius: 0;
}
.side-navbar li ul li a {
    color: var(--ink-500);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: var(--r-xs);
    line-height: 1.5;
}
.side-navbar li ul li a::after {
    content: '';
    position: absolute;
    left: -15px; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transform: translateY(-50%) scale(.6);
    transition: all var(--dur) var(--ease-spring);
}
.side-navbar li ul li a:hover {
    background: var(--brand-50);
    color: var(--brand-700);
    transform: translateX(3px);
}
.side-navbar li ul li a:hover::after { background: var(--brand-500); transform: translateY(-50%) scale(1); }
.side-navbar li ul li.active > a,
.side-navbar li ul li a.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 700;
    box-shadow: none;
}
.side-navbar li ul li.active > a::after,
.side-navbar li ul li a.is-active::after { background: var(--brand-500); transform: translateY(-50%) scale(1.1); }
.side-navbar li ul li form { margin: 0; }

/* group heading */
.side-navbar .sidenav-heading {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--ink-300);
    text-transform: uppercase;
    margin: 18px 0 6px 16px;
}

/* ---- Footer --------------------------------------------------------- */
.main-footer {
    background: transparent;
    border-top: 1px solid var(--border);
    margin-top: 32px;
    padding: 18px 0;
}
.main-footer p { color: var(--ink-400); font-size: var(--fs-xs); margin: 0; }
.main-footer .external { color: var(--brand-500); font-weight: 700; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.005em;
    padding: 9px 18px;
    border-radius: var(--r-sm);
    border-width: 1px;
    line-height: 1.5;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-soft),
                background-color var(--dur) var(--ease-soft),
                border-color var(--dur) var(--ease-soft),
                color var(--dur) var(--ease-soft);
    will-change: transform;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(124, 92, 196, .25); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--grad-brand);
    background-color: var(--brand-500);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-brand);
}
.btn-primary:hover { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -8px rgba(124, 92, 196, .6); }

.btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink-600);
    box-shadow: var(--sh-xs);
}
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-800); }

.btn-success { background: linear-gradient(135deg, #2ED08A, #12B76A); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(18, 183, 106, .55); }
.btn-success:hover { background: linear-gradient(135deg, #2ED08A, #0E9F5C); border-color: transparent; }
.btn-danger  { background: linear-gradient(135deg, #FB6C60, #F04438); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(240, 68, 56, .55); }
.btn-danger:hover  { background: linear-gradient(135deg, #FB6C60, #D92D20); border-color: transparent; }
.btn-warning { background: linear-gradient(135deg, #FDB022, #F79009); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(247, 144, 9, .5); }
.btn-warning:hover { color: #fff; }
.btn-info    { background: linear-gradient(135deg, #53B1FD, #2E90FA); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(46, 144, 250, .5); }
.btn-info:hover { color: #fff; }
.btn-dark    { background: linear-gradient(135deg, #3A3157, #16112B); border-color: transparent; color: #fff; }

.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-200); background: transparent; }
.btn-outline-primary:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; box-shadow: var(--sh-brand); }

.btn-link { color: var(--brand-600); font-weight: 600; box-shadow: none; }
.btn-link:hover { color: var(--brand-700); text-decoration: none; }

.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn-lg { padding: 13px 26px; font-size: var(--fs-md); border-radius: var(--r-md); }
.btn-block { width: 100%; }

/* ripple, injected by motion.js */
.mrm-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .45);
    pointer-events: none;
    animation: mrm-ripple-anim 620ms var(--ease-out) forwards;
}
.btn-secondary .mrm-ripple, .btn-link .mrm-ripple,
.btn-outline-primary .mrm-ripple { background: rgba(124, 92, 196, .22); }
@keyframes mrm-ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* segmented filter group (dashboard date range) */
.filter-toggle.btn-group {
    background: var(--surface);
    padding: 4px;
    border-radius: var(--r-full);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    gap: 2px;
}
.filter-toggle .btn.date-btn {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--r-full) !important;
    color: var(--ink-500);
    padding: 7px 16px;
}
.filter-toggle .btn.date-btn:hover { background: var(--ink-50); color: var(--ink-800); transform: none; }
.filter-toggle .btn.date-btn.active {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--sh-brand);
}

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
label, .col-form-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-600);
    letter-spacing: .01em;
    margin-bottom: 6px;
}

.form-control,
.custom-select,
textarea.form-control {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--ink-800);
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    height: auto;
    min-height: 42px;
    box-shadow: var(--sh-xs);
    transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:hover { border-color: var(--ink-300); }
.form-control:focus {
    border-color: var(--brand-400);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(124, 92, 196, .14);
    outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--ink-50); color: var(--ink-400); }
textarea.form-control { min-height: 90px; line-height: 1.6; }
.form-group { margin-bottom: 18px; }
.form-text { font-size: var(--fs-xs); color: var(--ink-400); }

div.has-error > input,
.is-invalid, .form-control.is-invalid {
    border-color: var(--danger-500) !important;
    box-shadow: 0 0 0 4px rgba(240, 68, 56, .1);
}
div.has-error > .form-text, .invalid-feedback { color: var(--danger-700); }

input[type="file"].form-control { padding: 7px 10px; line-height: 1.7; cursor: pointer; }
input[type="file"]::file-selector-button {
    border: 0;
    border-radius: var(--r-xs);
    background: var(--brand-50);
    color: var(--brand-700);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 7px 14px;
    margin-right: 12px;
    cursor: pointer;
    transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
input[type="file"]::file-selector-button:hover { background: var(--brand-500); color: #fff; }

/* bootstrap-select (btn-link style) */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn-link.dropdown-toggle {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink-800) !important;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none !important;
    padding: 10px 14px;
    min-height: 42px;
    box-shadow: var(--sh-xs);
    transform: none !important;
}
.bootstrap-select > .dropdown-toggle:hover { border-color: var(--ink-300) !important; }
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--brand-400) !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 196, .14) !important;
    outline: none !important;
}
.bootstrap-select .dropdown-toggle .filter-option { color: var(--ink-800); }
.bootstrap-select .dropdown-menu { border-radius: var(--r-md); }
.bootstrap-select .dropdown-menu li a { border-radius: var(--r-xs); font-size: var(--fs-sm); }
.bootstrap-select .bs-searchbox .form-control { min-height: 38px; }

/* native checkboxes / radios */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--brand-500);
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    cursor: pointer;
}
label > input[type="checkbox"], label > input[type="radio"] { margin-right: 8px; }

/* TinyMCE + Dropzone */
.tox-tinymce { border: 1px solid var(--border-strong) !important; border-radius: var(--r-sm) !important; }
.dropzone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-400);
    transition: border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.dropzone:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-600); }

/* checkbox / radio / toggle */
.abc-checkbox label::before, .abc-radio label::before {
    border-color: var(--border-strong);
    border-radius: var(--r-xs);
    transition: all var(--dur) var(--ease-spring);
}
.abc-checkbox input[type="checkbox"]:checked + label::before {
    background: var(--brand-500) !important;
    border-color: var(--brand-500) !important;
}
.toggle.btn { border-radius: var(--r-full); overflow: hidden; }

/* material inputs (auth screens) */
input.input-material {
    font-family: var(--font-sans);
    color: var(--ink-900);
    border-bottom-color: var(--border-strong);
    transition: border-color var(--dur) var(--ease-soft);
}
input.input-material:focus { border-color: var(--brand-500); }
input.input-material ~ label.label-material { color: var(--ink-400); font-weight: 600; }
input.input-material ~ label.active { color: var(--brand-600); }

/* --------------------------------------------------------------------------
   6. CARDS & PANELS
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    margin-bottom: 24px;
    /* no overflow:hidden — table action dropdowns must escape the card */
    transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-soft);
}
.card > .table:last-child tbody tr:last-child td:first-child,
.card > .table-responsive:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.card > .table:last-child tbody tr:last-child td:last-child,
.card > .table-responsive:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
.card:hover { box-shadow: var(--sh-lg); border-color: var(--border-strong); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--ink-900);
    letter-spacing: -0.015em;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
}
.card-header .h6, .card-header h6 { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.card-body { padding: 22px; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 16px 22px; }

.colored-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 20px;
    margin-bottom: 24px;
    color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   7. DASHBOARD STAT TILES
   -------------------------------------------------------------------------- */
.dashboard-counts { padding-top: 8px; }

.dashboard-counts .wrapper.count-title {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 22px 20px;
    text-align: left !important;
    overflow: hidden;
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.dashboard-counts .wrapper.count-title::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--grad-brand);
    opacity: .9;
}
.dashboard-counts .wrapper.count-title:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
}

.dashboard-counts .count-title .icon {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--brand-50);
    margin-bottom: 14px;
    transition: transform var(--dur) var(--ease-spring);
}
.dashboard-counts .wrapper.count-title:hover .icon { transform: scale(1.08) rotate(-4deg); }
.dashboard-counts .count-title i { font-size: 22px; width: auto; }

.dashboard-counts .count-title .name strong {
    display: block;
    font-size: var(--fs-xs) !important;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .85;
}
.dashboard-counts .count-number {
    font-family: var(--font-num);
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* statistics blocks */
.statistics .user-activity .progress { height: 8px; border-radius: var(--r-full); background: var(--ink-100); overflow: hidden; }
.statistics .user-activity .progress .progress-bar { border-radius: var(--r-full); background: var(--grad-brand) !important; }
.statistics .user-activity .page-statistics strong { font-family: var(--font-num); font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   8. TABLES + DATATABLES
   -------------------------------------------------------------------------- */
.table {
    font-size: var(--fs-sm);
    color: var(--ink-700);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.table thead th {
    background: var(--surface-2);
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-top: 0;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 16px;
    white-space: nowrap;
    vertical-align: middle;
}
.table tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
    color: var(--ink-700);
}
.table tbody tr { transition: background var(--dur-fast) var(--ease-soft), box-shadow var(--dur) var(--ease-soft); }
.table tbody tr:hover { background: var(--brand-50); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(246, 245, 250, .6); }
.table-striped tbody tr:nth-of-type(odd):hover { background-color: var(--brand-50); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border); }
.table td strong, .table th strong { color: var(--ink-900); }

/* DataTables chrome */
.dataTables_wrapper { padding: 4px 0 0; }
.dataTables_wrapper .row:first-child { align-items: center; margin-bottom: 14px; }

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    background: var(--surface);
    box-shadow: var(--sh-xs);
    transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(124, 92, 196, .14);
    outline: none;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    font-size: var(--fs-xs);
    color: var(--ink-500);
    font-weight: 600;
}

.dt-buttons .btn, div.dt-buttons .dt-button {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-600) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--sh-xs) !important;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 8px 14px;
    margin-right: 6px;
    background-image: none !important;
}
.dt-buttons .btn:hover, div.dt-buttons .dt-button:hover {
    background: var(--brand-50) !important;
    border-color: var(--brand-200) !important;
    color: var(--brand-700) !important;
    transform: translateY(-1.5px);
}

/* DataTables wraps each button label in its own <span>, and the legacy sheet
   paints that span white (`.dt-buttons button span { color: #FFF }`) — which
   made sense when the buttons were solid pink/blue/amber. These buttons are
   white now, so the label has to inherit the button colour or it disappears.
   The old solid backgrounds are neutralised here too, for the same reason. */
.dt-buttons .btn span, .dt-buttons button span,
div.dt-buttons .dt-button span { color: inherit !important; }

.dt-buttons .buttons-pdf, .dt-buttons .buttons-csv,
.dt-buttons .buttons-excel, .dt-buttons .buttons-print,
.dt-buttons .buttons-collection, .dt-buttons .buttons-colvis {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-600) !important;
}

/* The Buttons plugin ships its own stylesheet, which this app never loads, so
   the column-visibility panel gets its styling from here. */
.dt-button-collection.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: 8px !important;
    min-width: 200px;
}
.dt-button-collection.dropdown-menu a,
.dt-button-collection .dt-button {
    display: block;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--r-xs);
    color: var(--ink-600) !important;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
    text-align: left;
}
.dt-button-collection.dropdown-menu a:hover,
.dt-button-collection .dt-button:hover {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
.dt-button-collection .dt-button.active {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }
table.dataTable thead th.sorting:hover { color: var(--brand-600); }
table.dataTable.no-footer { border-bottom: 1px solid var(--border); }
table.dataTable tbody tr.selected,
table.dataTable tbody > tr.selected td { background: var(--brand-50) !important; color: var(--brand-800); }

/* pagination */
.pagination { gap: 4px; margin: 16px 0 0; }
.page-link {
    border: 1px solid var(--border);
    border-radius: var(--r-sm) !important;
    color: var(--ink-600);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 8px 13px;
    background: var(--surface);
    transition: all var(--dur) var(--ease-soft);
}
.page-link:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.page-item.active .page-link {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-brand);
}
.page-item.disabled .page-link { color: var(--ink-300); background: var(--ink-50); border-color: var(--border); }

.dataTables_paginate .paginate_button {
    border-radius: var(--r-sm) !important;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--grad-brand) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* action dropdowns inside tables */
.table .dropdown-menu { min-width: 190px; }

/* A DataTable paints later rows after earlier ones. Raising only the menu is
   not sufficient in that layout, because the following cells can still paint
   their Action buttons over it. Raise the owning row and cell as one layer. */
#sale-table tbody tr.action-menu-open {
    position: relative;
    z-index: 1040;
}
#sale-table tbody tr.action-menu-open > td {
    position: relative;
    z-index: 1041;
}
#sale-table tbody tr.action-menu-open .btn-group,
#sale-table tbody tr.action-menu-open .dropdown-menu.show {
    z-index: 1045 !important;
}
#sale-table tbody tr.action-menu-open .dropdown-menu.show {
    background: var(--surface, #fff);
    opacity: 1;
}
.page section > .table-responsive.action-menu-visible {
    overflow: visible;
}

/* --------------------------------------------------------------------------
   9. BADGES / ALERTS / MISC
   -------------------------------------------------------------------------- */
.badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 11px;
    border-radius: var(--r-full);
    line-height: 1.5;
}
.badge-primary { background: var(--brand-50) !important; color: var(--brand-700) !important; }
.badge-success { background: var(--success-50) !important; color: var(--success-700) !important; }
.badge-danger  { background: var(--danger-50) !important;  color: var(--danger-700) !important; }
.badge-warning { background: var(--warning-50) !important; color: var(--warning-700) !important; }
.badge-info    { background: var(--info-50) !important;    color: var(--info-700) !important; }
.badge-secondary { background: var(--ink-100) !important;  color: var(--ink-600) !important; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 14px 18px;
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: var(--sh-sm);
    position: relative;
    padding-left: 22px;
    overflow: hidden;
}
.alert::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.alert-success { background: var(--success-50); color: var(--success-700); border-color: rgba(18, 183, 106, .18); }
.alert-success::before { background: var(--success-500); }
.alert-danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: rgba(240, 68, 56, .18); }
.alert-danger::before  { background: var(--danger-500); }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border-color: rgba(247, 144, 9, .18); }
.alert-warning::before { background: var(--warning-500); }
.alert-info    { background: var(--info-50);    color: var(--info-700);    border-color: rgba(46, 144, 250, .18); }
.alert-info::before    { background: var(--info-500); }
.alert .close { opacity: .5; text-shadow: none; transition: opacity var(--dur) var(--ease-soft); }
.alert .close:hover { opacity: 1; }

.breadcrumb-holder { background: transparent; border: 0; padding: 0; }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--fs-xs); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-300); }
.breadcrumb-item.active { color: var(--ink-400); }

/* --------------------------------------------------------------------------
   10. MODALS / DROPDOWNS / TOOLTIPS
   -------------------------------------------------------------------------- */
.modal-backdrop.show { background: rgba(22, 17, 43, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 1; }

.modal-content {
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
}
.modal-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    align-items: center;
}
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-900); }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border); padding: 16px 24px; }
.modal-header .close {
    opacity: .55;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur) var(--ease-soft);
    text-shadow: none;
    margin: 0;
    padding: 0;
}
.modal-header .close:hover { background: var(--danger-50); color: var(--danger-500); opacity: 1; transform: rotate(90deg); }

.modal.fade .modal-dialog {
    transform: translateY(24px) scale(.96);
    transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-soft);
    opacity: 0;
}
.modal.show .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }

/* an open menu must paint above later table rows */
.dropdown.show, .btn-group.show, .dropup.show { position: relative; z-index: 1035; }
.dropdown-menu.show { z-index: 1035; }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: 8px;
    font-size: var(--fs-sm);
    min-width: 210px;
    animation: mrm-dropdown-in var(--dur) var(--ease-out) both;
}
@keyframes mrm-dropdown-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item,
.dropdown-menu li a.btn-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--r-xs);
    padding: 9px 12px;
    color: var(--ink-600);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-align: left;
    white-space: normal;
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-out);
}
.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu li a.btn-link:hover {
    background: var(--brand-50);
    color: var(--brand-700);
    transform: translateX(2px);
}
.dropdown-menu > li > a i { color: var(--brand-500); font-size: 15px; width: 18px; }
.dropdown-menu .notifications a { line-height: 1.45; }
.dropdown-divider { border-color: var(--border); margin: 6px 0; }

.tooltip-inner {
    background: var(--ink-900);
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 7px 11px;
}
.tooltip .arrow::before { border-top-color: var(--ink-900); }

/* tabs / pills */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    color: var(--ink-500);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 11px 18px;
    position: relative;
    transition: color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.nav-tabs .nav-link:hover { background: var(--brand-50); color: var(--brand-700); }
.nav-tabs .nav-link.active { color: var(--brand-700); background: transparent; }
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2.5px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    animation: mrm-tab-in var(--dur) var(--ease-out) both;
}
@keyframes mrm-tab-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nav-pills .nav-link { border-radius: var(--r-full); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-500); }
.nav-pills .nav-link.active { background: var(--grad-brand); box-shadow: var(--sh-brand); }

/* --------------------------------------------------------------------------
   11. LOADER + PAGE TRANSITION
   -------------------------------------------------------------------------- */
#loader {
    left: 50%; top: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    border: 3px solid var(--brand-100);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    z-index: 1200;
}
.pos-page #loader, .page #loader { }

/* top progress bar for navigations */
#mrm-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: linear-gradient(90deg, var(--brand-400), var(--gold-500));
    box-shadow: 0 0 12px rgba(124, 92, 196, .7);
    border-radius: 0 var(--r-full) var(--r-full) 0;
    opacity: 0;
    transition: width .3s var(--ease-out), opacity .3s var(--ease-soft);
}
#mrm-progress.active { opacity: 1; }

.animate-bottom { animation: none; }

/* --------------------------------------------------------------------------
   12. MOTION PRIMITIVES  (Framer-Motion style, CSS driven)
   -------------------------------------------------------------------------- */
[data-motion] { opacity: 0; will-change: transform, opacity; }
[data-motion].in-view { opacity: 1; }

[data-motion="fade"]        { transform: none; }
[data-motion="fade-up"]     { transform: translateY(18px); }
[data-motion="fade-down"]   { transform: translateY(-18px); }
[data-motion="fade-left"]   { transform: translateX(24px); }
[data-motion="fade-right"]  { transform: translateX(-24px); }
[data-motion="scale-in"]    { transform: scale(.94); }
[data-motion="blur-in"]     { transform: translateY(12px); filter: blur(8px); }

[data-motion].in-view {
    transform: none;
    filter: none;
    transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out), filter 520ms var(--ease-out);
    transition-delay: var(--motion-delay, 0ms);
}

/* hover affordances */
.mrm-lift { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.mrm-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

@keyframes mrm-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes mrm-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(28px, -22px) scale(1.06); }
    66%  { transform: translate(-20px, 18px) scale(.96); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes mrm-shimmer {
    0%   { background-position: -420px 0; }
    100% { background-position: 420px 0; }
}

/* --------------------------------------------------------------------------
   13. AUTH SCREENS — login / register / password
   -------------------------------------------------------------------------- */
.login-page, .register-page {
    min-height: 100vh;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    background: #120C24;
    background-image:
        radial-gradient(900px 700px at 15% 15%, rgba(124, 92, 196, .55), transparent 60%),
        radial-gradient(800px 600px at 85% 80%, rgba(201, 162, 92, .32), transparent 60%),
        radial-gradient(700px 500px at 70% 10%, rgba(70, 45, 130, .55), transparent 65%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.login-page::before,
.login-page::after,
.register-page::before,
.register-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.login-page::before, .register-page::before {
    width: 460px; height: 460px;
    top: -120px; left: -100px;
    background: rgba(138, 104, 216, .45);
    animation: mrm-drift 18s var(--ease-soft) infinite;
}
.login-page::after, .register-page::after {
    width: 380px; height: 380px;
    bottom: -110px; right: -80px;
    background: rgba(201, 162, 92, .32);
    animation: mrm-drift 22s var(--ease-soft) infinite reverse;
}

.login-page > .container,
.register-page > .container { position: relative; z-index: 2; }

.login-page .form-outer,
.register-page .form-outer {
    background: transparent;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
}

.login-page .form-inner,
.register-page .form-inner {
    width: 100%;
    max-width: 424px;
    margin: 0 auto;
    padding: 44px 40px 40px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--r-xl);
    box-shadow: 0 32px 80px -20px rgba(10, 6, 24, .6), 0 0 0 1px rgba(255, 255, 255, .08);
    animation: mrm-auth-in 780ms var(--ease-spring) both;
}
@keyframes mrm-auth-in {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-page .logo,
.register-page .logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-bottom: 6px;
    text-transform: none;
}
.login-page .logo span, .register-page .logo span { color: var(--brand-600); }

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.auth-badge .dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--grad-brand);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px;
}
.auth-sub {
    color: var(--ink-400);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 26px;
}

.login-page form, .register-page form { margin-top: 4px; }
.login-page .form-group-material, .register-page .form-group-material { margin-bottom: 26px; text-align: left; }

.login-page input.input-material,
.register-page input.input-material {
    width: 100%;
    padding: 12px 14px 12px 40px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-900);
    box-shadow: var(--sh-xs);
    transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.login-page input.input-material:focus,
.register-page input.input-material:focus {
    background: #fff;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(124, 92, 196, .16);
}
.login-page .form-group-material .field-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-300);
    font-size: 15px;
    pointer-events: none;
    transition: color var(--dur) var(--ease-soft);
    z-index: 2;
}
.login-page .form-group-material:focus-within .field-icon { color: var(--brand-500); }
.login-page .form-group-material { position: relative; }

.login-page label.label-material,
.register-page label.label-material {
    position: absolute;
    left: 40px;
    top: 13px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-400);
    pointer-events: none;
    transition: all var(--dur) var(--ease-out);
    background: transparent;
    padding: 0 4px;
}
.login-page input.input-material ~ label.active,
.register-page input.input-material ~ label.active {
    top: -9px;
    left: 32px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-600);
    background: #fff;
    border-radius: 4px;
}

.login-page .pw-toggle {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: var(--ink-300);
    border-radius: var(--r-xs);
    cursor: pointer;
    z-index: 3;
    transition: color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.login-page .pw-toggle:hover { color: var(--brand-600); background: var(--brand-50); }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.login-page .btn-primary, .register-page .btn-primary {
    padding: 13px 20px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: .02em;
    margin-top: 4px;
}

.login-page .alert, .register-page .alert { text-align: left; font-size: var(--fs-xs); }

/* demo quick-login */
.demo-panel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.demo-panel-title {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-300);
    margin-bottom: 12px;
}
.demo-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.demo-btn {
    flex: 1 1 0;
    min-width: 96px;
    padding: 9px 10px;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: var(--r-sm);
}
.demo-btn i { margin-right: 6px; opacity: .8; }
.demo-btn.is-loading::after { border-color: rgba(124, 92, 196, .3); border-top-color: var(--brand-500); }

/* demo banner inside the panel */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 11px 18px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--gold-100), #FFFDF7);
    border: 1px solid rgba(201, 162, 92, .35);
    color: var(--gold-700);
    font-size: var(--fs-xs);
    font-weight: 700;
    box-shadow: var(--sh-xs);
}
.demo-banner i { font-size: 15px; }
.demo-banner strong { color: var(--ink-900); }

.login-page .copyrights, .register-page .copyrights {
    position: relative;
    margin-top: 26px;
    width: 100%;
}
.login-page .copyrights p, .register-page .copyrights p {
    color: rgba(255, 255, 255, .5);
    font-size: var(--fs-xs);
    font-weight: 500;
    margin: 0;
}
.login-page .copyrights .external, .register-page .copyrights .external { color: var(--gold-300); font-weight: 700; }

.login-page a.forgot-pass, .login-page a.signup,
.register-page a.forgot-pass, .register-page a.signup {
    color: var(--brand-600);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.login-page p, .register-page p { color: var(--ink-400); font-size: var(--fs-xs); }

/* Simple Laravel layout (verify e-mail / reset password) */
#app { min-height: 100vh; background: var(--canvas); background-image: var(--grad-canvas); }
.navbar-laravel {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    padding: 14px 0;
}
.navbar-laravel .navbar-brand {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--brand-600) !important;
}
.navbar-laravel .nav-link {
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    padding: 8px 14px !important;
    transition: background var(--dur) var(--ease-soft);
}
.navbar-laravel .nav-link:hover { background: var(--brand-50); }
#app main.py-4 { padding-top: 48px !important; }
#app main .card { border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
#app main .card-header { font-size: var(--fs-lg); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. POS SCREEN
   -------------------------------------------------------------------------- */
.pos-page {
    background: var(--canvas);
    background-image: var(--grad-canvas);
    padding-top: calc(var(--header-h) + 8px);
}
.pos-page .card { border-radius: var(--r-md); }

/* colour-coded payment keys keep their inline hue, gain modern shape */
.btn-custom {
    color: #fff !important;
    border: 0;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: -0.005em;
    padding: 11px 18px;
    margin: 0 6px 10px 0;
    box-shadow: 0 6px 16px -6px rgba(22, 17, 43, .35);
}
.btn-custom i { margin-right: 7px; }
.btn-custom:hover { color: #fff !important; filter: brightness(1.07); box-shadow: 0 12px 24px -8px rgba(22, 17, 43, .4); }

.pos-page #product-search, .pos-page input[name="product_code_name"] { font-size: var(--fs-sm); }
.pos-page .table thead th { padding: 11px 12px; }
.pos-page .table tbody td { padding: 10px 12px; }
.pos-page .btn { border-radius: var(--r-sm); }

.product-list .product-item,
.pos-page .product-grid .item {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-soft);
}
.product-list .product-item:hover,
.pos-page .product-grid .item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
    border-color: var(--brand-200);
}

/* --------------------------------------------------------------------------
   15. UTILITIES
   -------------------------------------------------------------------------- */
.text-brand { color: var(--brand-600) !important; }
.bg-brand-soft { background: var(--brand-50) !important; }
.shadow-soft { box-shadow: var(--sh-md) !important; }
.rounded-xl { border-radius: var(--r-lg) !important; }
.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.025em;
    margin: 0;
}

.skeleton {
    background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 37%, var(--ink-100) 63%);
    background-size: 840px 100%;
    animation: mrm-shimmer 1.4s linear infinite;
    border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .page { margin-left: 0; width: 100%; }
    .side-navbar { transform: translateX(-100%); box-shadow: var(--sh-xl); }
    .side-navbar.show-sm { transform: translateX(0); left: 0 !important; }
    .side-navbar.shrink { width: var(--sidebar-w); opacity: 1; padding: 14px 10px 28px; }
}

@media (max-width: 767px) {
    :root { --header-h: 60px; }
    .page > .container-fluid, .page section > .container-fluid { padding-left: 14px; padding-right: 14px; }
    .card-body { padding: 16px; }
    .card-header { padding: 14px 16px; }
    .dashboard-counts .wrapper.count-title { padding: 18px 16px; margin-bottom: 12px; }
    .dashboard-counts .count-number { font-size: var(--fs-xl); }
    .login-page .form-inner, .register-page .form-inner { padding: 32px 24px; }
    .filter-toggle.btn-group { flex-wrap: wrap; border-radius: var(--r-md); }
    .table thead th, .table tbody td { padding: 11px 12px; }
}

/* --------------------------------------------------------------------------
   17. PRINT — keep invoices clean
   -------------------------------------------------------------------------- */
@media print {
    .side-navbar, .header, .main-footer, #mrm-progress, .dt-buttons { display: none !important; }
    .page { margin-left: 0 !important; width: 100% !important; background: #fff !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    [data-motion] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   19. V5 POLISH PASS
   Sitewide refinements layered on 2.0: carded list tables, picker skins,
   header hairline, card/modal accents, empty states, toolbar rhythm.
   -------------------------------------------------------------------------- */

/* ---- header: gold-violet hairline under the glass bar ------------------- */
.header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 92, 196, .38) 28%,
        rgba(201, 162, 92, .34) 72%,
        transparent 100%);
    pointer-events: none;
}

/* ---- content entrance ---------------------------------------------------- */
/* Opacity ONLY — a transform animation on #content (even one ending at
   `none`, while its fill-mode keeps it applied) turns #content into the
   containing block for every position:fixed descendant. The POS shell
   (.pos-modern { position: fixed; inset: 0 }) and in-content modals live
   inside #content and collapse to a zero-height box when that happens.
   `backwards` fill so the animation stops applying entirely once done. */
#content { animation: nvx-page-in 420ms var(--ease-out) backwards; }
@keyframes nvx-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- session alerts sit flush with the page gutter ----------------------- */
#content > .alert { margin: 2px 26px 18px; }

/* ---- list pages: action buttons become a toolbar row --------------------- */
.page section > .container-fluid > .btn,
.page section > .container-fluid > a.btn {
    margin: 0 10px 16px 0;
}

/* ---- list pages: the naked full-bleed table becomes a card --------------- */
/* Index views render `<section><div class=table-responsive>` straight on the
   canvas. Direct-child scoping leaves tables that already live inside cards,
   modals or form layouts untouched. width:auto is required — bootstrap sets
   width:100%, which would overflow once side margins are added. */
.page section > .table-responsive {
    width: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 18px 18px 14px;
    margin: 0 26px 28px;
    transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-soft);
}
.page section > .table-responsive:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }

/* ---- tables: empty + loading states -------------------------------------- */
.table td.dataTables_empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--ink-400);
    font-weight: 600;
    font-size: var(--fs-sm);
}
div.dataTables_processing {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    color: var(--brand-600);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 14px;
}

/* ---- tables: totals row --------------------------------------------------- */
.table tfoot th, .table tfoot td {
    background: var(--surface-2);
    color: var(--ink-900);
    font-weight: 800;
    border-top: 2px solid var(--border-strong) !important;
    padding: 13px 16px;
    font-variant-numeric: tabular-nums;
}

/* ---- tables: reading-edge accent on row hover ----------------------------- */
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand-300); }

/* ---- card + modal headers carry the brand tick ---------------------------- */
.card-header::before,
.modal-title::before {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 4px;
    height: 16px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    margin-right: 10px;
    vertical-align: -3px;
}

/* ---- odd bootstrap leftovers ---------------------------------------------- */
.btn-default {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--ink-600);
    box-shadow: var(--sh-xs);
}
.btn-default:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-800); }

.input-group-text {
    background: var(--ink-50);
    border: 1px solid var(--border-strong);
    color: var(--ink-500);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.validation-msg {
    display: block;
    margin-top: 5px;
    color: var(--danger-700);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* bootstrap-select: selected option state */
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a.active {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
.bootstrap-select .dropdown-menu li a .check-mark { color: var(--brand-600); }

/* ---- bootstrap-datepicker ------------------------------------------------- */
.datepicker.dropdown-menu {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-family: var(--font-sans);
}
.datepicker table tr td, .datepicker table tr th {
    width: 34px; height: 34px;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.datepicker table tr th { color: var(--ink-500); }
.datepicker .datepicker-switch { font-weight: 800; color: var(--ink-900); }
.datepicker .prev:hover, .datepicker .next:hover, .datepicker .datepicker-switch:hover,
.datepicker table tr td.day:hover, .datepicker table tr td.focused {
    background: var(--brand-50);
    color: var(--brand-700);
}
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--ink-300); }
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: var(--gold-100) !important;
    color: var(--gold-700) !important;
    border: 0;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled {
    background: var(--grad-brand) !important;
    background-color: var(--brand-500) !important;
    color: #fff !important;
    text-shadow: none;
    border: 0;
}
.datepicker table tr td span { border-radius: var(--r-sm); }
.datepicker table tr td span:hover { background: var(--brand-50); }
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--grad-brand) !important;
    text-shadow: none;
    border: 0;
}

/* ---- daterangepicker ------------------------------------------------------ */
.daterangepicker {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-family: var(--font-sans);
}
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--brand-500); }
.daterangepicker td.in-range { background-color: var(--brand-50); }
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

/* ---- jquery.timepicker ---------------------------------------------------- */
.ui-timepicker-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}
.ui-timepicker-list li { padding: 8px 14px; color: var(--ink-600); }
.ui-timepicker-list li:hover,
.ui-timepicker-list li.ui-timepicker-selected {
    background: var(--brand-500);
    color: #fff;
}

/* ---- jQuery UI autocomplete (product search) ------------------------------ */
/* custom-<theme>.css paints this menu as a flat solid box with a five-class
   selector — every rule here must carry at least that weight to win. */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    width: auto;
    min-width: 280px;
    max-width: 420px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    position: absolute !important;
    z-index: 1500;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item {
    color: var(--ink-700);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    list-style: none;
    padding: 8px 12px;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item:hover,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item .ui-state-active {
    background: var(--brand-50);
    color: var(--brand-700);
    opacity: 1;
    margin: 0;
    border: 0;
}

/* ---- v5 responsive + print guards ----------------------------------------- */
@media (max-width: 767px) {
    #content > .alert { margin: 2px 14px 14px; }
    .page section > .table-responsive { margin: 0 14px 20px; padding: 12px 12px 10px; }
    .page section > .container-fluid > .btn,
    .page section > .container-fluid > a.btn { margin: 0 6px 12px 0; }
}
@media print {
    .header::after, .card-header::before, .modal-title::before { display: none !important; }
    #content { animation: none !important; }
    .page section > .table-responsive {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .table tbody tr:hover td:first-child { box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-motion] { opacity: 1 !important; transform: none !important; filter: none !important; }
}