/**
 * MoneyMapper ERP — Modern Theme
 * All rules scoped under html.modern-theme — completely inert on classic mode.
 *
 * Phase 1 (Infrastructure): CSS token skeleton only.
 * Visual styles added in Phases 2–6.
 *
 * Sections:
 *  1. CSS Tokens (custom properties)
 *  2. Page Base
 *  3. Main Header
 *  4. POS Header
 *  5. Sidebar
 *  6. Buttons
 *  7. Form Controls
 *  8. Select2
 *  9. Input Groups
 * 10. Boxes / Cards
 * 11. DataTables
 * 12. Modals
 * 13. Alerts & Callouts
 * 14. Badges & Labels
 * 15. Info Boxes
 * 16. Tabs
 * 17. Breadcrumbs
 * 18. Pagination
 * 19. Dropdowns
 * 20. POS Components (cart, product grid, payment, totals, shipping)
 * 21. Status Colors
 * 22. Print Preservation
 */

/* ==========================================================================
   SECTION 1 — CSS TOKENS
   ========================================================================== */
html.modern-theme {
    /* Primary palette */
    --mm-primary:        #2563eb;
    --mm-primary-hover:  #1d4ed8;
    --mm-primary-light:  #eff4ff;

    /* Semantic colours */
    --mm-success:        #059669;
    --mm-warning:        #d97706;
    --mm-danger:         #dc2626;
    --mm-info:           #0284c7;
    --mm-purple:         #7c3aed;
    --mm-navy:           #0f172a;

    /* Header */
    --mm-header-bg:      #1a2035;
    --mm-header-text:    #e2e8f0;

    /* Sidebar */
    --mm-sidebar-bg:     #1e2a45;
    --mm-sidebar-active: #2563eb;
    --mm-sidebar-hover:  rgba(255,255,255,0.08);

    /* Page & Card */
    --mm-page-bg:        #f0f2f7;
    --mm-card-bg:        #ffffff;

    /* Text */
    --mm-text-ink:       #1e2938;
    --mm-text-soft:      #4b5563;
    --mm-text-muted:     #9ca3af;

    /* Borders */
    --mm-border:         #e2e6ef;
    --mm-border-dark:    #ccd2e0;

    /* Radius */
    --mm-radius-card:    8px;
    --mm-radius-input:   5px;
    --mm-radius-btn:     5px;
}

/* Phases 2–6 styles will be appended below this line. */

/* ==========================================================================
   SECTION 2 — PAGE BASE
   ========================================================================== */
html.modern-theme body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--mm-page-bg) !important;
    color: var(--mm-text-ink);
}

/* Main content area */
html.modern-theme .content-wrapper {
    background-color: var(--mm-page-bg) !important;
}

/* Content header */
html.modern-theme .content-header > h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--mm-text-ink);
}
html.modern-theme .content-header .breadcrumb {
    background: transparent;
}

/* ==========================================================================
   SECTION 3 — MAIN HEADER (header.blade.php)
   ========================================================================== */

/* Header bar */
html.modern-theme .main-header {
    background-color: var(--mm-header-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Logo area */
html.modern-theme .main-header .logo,
html.modern-theme .main-header .logo:hover {
    background-color: #141929 !important;
    border-bottom: none !important;
    color: #fff !important;
}
html.modern-theme .main-header .logo .logo-lg {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
}
html.modern-theme .main-header .logo .logo-lg logo-lg-2 {
    color: var(--mm-primary);
}
html.modern-theme .main-header .logo .logo-lg sup {
    font-size: 9px;
    font-weight: 600;
    color: var(--mm-header-text, #e2e8f0);
    opacity: .7;
    letter-spacing: .5px;
}

/* Navbar */
html.modern-theme .main-header .navbar {
    background-color: var(--mm-header-bg) !important;
    border-bottom: none !important;
    min-height: 50px;
}
html.modern-theme .main-header .sidebar-toggle {
    color: #fff !important;
    font-size: 18px;
    padding: 15px 16px !important;
}
html.modern-theme .main-header .sidebar-toggle:hover {
    background-color: rgba(255,255,255,.08) !important;
}

/* Datetime text in header */
html.modern-theme .main-header .pull-left.mt-15 {
    color: rgba(255,255,255,.6) !important;
    font-size: 12px;
}

/* Back-to-user banner */
html.modern-theme .main-header .btn-danger.m-8 {
    background-color: var(--mm-danger) !important;
    border-color: var(--mm-danger) !important;
}

/* ── Header Buttons (calculator, register, theme-toggle, etc.) ── */
html.modern-theme .main-header .btn.btn-success.btn-flat,
html.modern-theme .main-header .btn.btn-success.btn-flat:focus {
    background-color: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
    border-radius: var(--mm-radius-btn) !important;
    transition: background .15s, border-color .15s !important;
}
html.modern-theme .main-header .btn.btn-success.btn-flat:hover {
    background-color: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.3) !important;
    color: #fff !important;
}

/* POS-link button in header */
html.modern-theme .main-header .btn-success:not(.btn-flat) {
    background-color: var(--mm-primary) !important;
    border-color: var(--mm-primary) !important;
    border-radius: var(--mm-radius-btn) !important;
    color: #fff !important;
}
html.modern-theme .main-header .btn-success:not(.btn-flat):hover {
    background-color: var(--mm-primary-hover) !important;
    border-color: var(--mm-primary-hover) !important;
}

/* Danger button in header (close register) */
html.modern-theme .main-header .btn.btn-danger.btn-flat {
    background-color: rgba(220,38,38,.15) !important;
    border: 1px solid rgba(220,38,38,.35) !important;
    color: #fca5a5 !important;
    border-radius: var(--mm-radius-btn) !important;
}
html.modern-theme .main-header .btn.btn-danger.btn-flat:hover {
    background-color: rgba(220,38,38,.28) !important;
    color: #fed7d7 !important;
}

/* Quick-add dropdown toggle */
html.modern-theme .main-header .btn-group .dropdown-menu {
    background: #fff;
    border: 1px solid var(--mm-border-dark);
    border-radius: var(--mm-radius-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 4px 0;
    min-width: 200px;
}
html.modern-theme .main-header .btn-group .dropdown-menu > li > a {
    color: var(--mm-text-soft);
    font-size: 13px;
    padding: 8px 16px;
}
html.modern-theme .main-header .btn-group .dropdown-menu > li > a:hover {
    background-color: var(--mm-primary-light);
    color: var(--mm-primary);
}
html.modern-theme .main-header .btn-group .dropdown-menu > li.divider {
    background-color: var(--mm-border);
    margin: 4px 0;
}

/* User menu */
html.modern-theme .main-header .user-menu > a {
    color: rgba(255,255,255,.85) !important;
}
html.modern-theme .main-header .user-menu > a:hover {
    background-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
html.modern-theme .main-header .navbar-nav .open > a,
html.modern-theme .main-header .navbar-nav .open > a:hover,
html.modern-theme .main-header .navbar-nav .open > a:focus {
    background-color: rgba(255,255,255,.12) !important;
}
html.modern-theme .main-header .user-menu .dropdown-menu {
    background: #fff;
    border: 1px solid var(--mm-border-dark);
    border-radius: var(--mm-radius-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    min-width: 200px;
}
html.modern-theme .main-header .user-menu .user-header {
    background: var(--mm-primary) !important;
    padding: 16px;
}
html.modern-theme .main-header .user-menu .user-header p {
    color: rgba(255,255,255,.9);
    font-size: 14px;
    font-weight: 600;
}
html.modern-theme .main-header .user-footer {
    background: #f9fafb;
    border-top: 1px solid var(--mm-border);
    padding: 10px 14px;
}
html.modern-theme .main-header .user-footer .btn-default {
    border-radius: var(--mm-radius-btn);
    border-color: var(--mm-border-dark);
    color: var(--mm-text-soft);
    font-size: 13px;
}
html.modern-theme .main-header .user-footer .btn-default:hover {
    border-color: var(--mm-primary);
    color: var(--mm-primary);
    background: var(--mm-primary-light);
}

/* Notifications bell area (header-notifications partial) */
html.modern-theme .main-header .notifications-menu > a,
html.modern-theme .main-header .messages-menu > a,
html.modern-theme .main-header .tasks-menu > a {
    color: rgba(255,255,255,.8) !important;
}
html.modern-theme .main-header .notifications-menu > a:hover,
html.modern-theme .main-header .messages-menu > a:hover {
    background-color: rgba(255,255,255,.08) !important;
}
html.modern-theme .main-header .notifications-menu .dropdown-menu,
html.modern-theme .main-header .messages-menu .dropdown-menu {
    background: #fff;
    border: 1px solid var(--mm-border-dark);
    border-radius: var(--mm-radius-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ==========================================================================
   SECTION 4 — POS HEADER (header-pos.blade.php)
   ========================================================================== */

html.modern-theme .pos-header {
    background-color: var(--mm-header-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
    padding: 6px 12px !important;
}

/* Location / datetime text */
html.modern-theme .pos-header p,
html.modern-theme .pos-header p strong {
    color: #fff !important;
}
html.modern-theme .pos-header .curr_datetime {
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

/* All POS header buttons — glass style */
html.modern-theme .pos-header .btn {
    background-color: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.85) !important;
    border-radius: var(--mm-radius-btn) !important;
    transition: background .15s, border-color .15s !important;
}
html.modern-theme .pos-header .btn:hover {
    background-color: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.3) !important;
    color: #fff !important;
}
/* Danger button (close register) */
html.modern-theme .pos-header .btn-danger {
    background-color: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.38) !important;
    color: #fca5a5 !important;
}
html.modern-theme .pos-header .btn-danger:hover {
    background-color: rgba(220,38,38,.3) !important;
    color: #fed7d7 !important;
}
/* Amber button (suspended sales) */
html.modern-theme .pos-header .btn.bg-yellow,
html.modern-theme .pos-header .btn.bg-yellow:focus {
    background-color: rgba(217,119,6,.18) !important;
    border-color: rgba(217,119,6,.38) !important;
    color: #fcd34d !important;
}
html.modern-theme .pos-header .btn.bg-yellow:hover {
    background-color: rgba(217,119,6,.32) !important;
}
/* Info button (go back) */
html.modern-theme .pos-header .btn-info {
    background-color: rgba(2,132,199,.18) !important;
    border-color: rgba(2,132,199,.38) !important;
    color: #7dd3fc !important;
}
html.modern-theme .pos-header .btn-info:hover {
    background-color: rgba(2,132,199,.3) !important;
    color: #bae6fd !important;
}
/* Purple button (add expense) */
html.modern-theme .pos-header .btn.bg-purple {
    background-color: rgba(124,58,237,.18) !important;
    border-color: rgba(124,58,237,.38) !important;
    color: #c4b5fd !important;
}
html.modern-theme .pos-header .btn.bg-purple:hover {
    background-color: rgba(124,58,237,.3) !important;
}

/* Location select control in POS header */
html.modern-theme .pos-header .form-control.input-sm {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border-radius: var(--mm-radius-input) !important;
}

/* ==========================================================================
   SECTION 5 — SIDEBAR
   ========================================================================== */

/* Sidebar wrapper */
html.modern-theme .main-sidebar,
html.modern-theme .main-sidebar .sidebar {
    background-color: var(--mm-sidebar-bg) !important;
}

/* Sidebar logo link (sidebar.blade.php has a logo anchor) */
html.modern-theme .main-sidebar .sidebar > a.logo {
    display: block;
    padding: 14px 16px;
    background-color: #141929 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
}
html.modern-theme .main-sidebar .sidebar > a.logo:hover {
    background-color: #141929 !important;
    color: #fff !important;
}

/* Scrollbar */
html.modern-theme .main-sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}
html.modern-theme .main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 4px;
}
html.modern-theme .main-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.28);
}

/* Menu section headers */
html.modern-theme .sidebar-menu > li.header {
    background: transparent !important;
    color: rgba(255,255,255,.35) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 14px 16px 5px !important;
}

/* All menu items */
html.modern-theme .sidebar-menu > li {
    background: transparent !important;
}
html.modern-theme .sidebar-menu > li > a {
    color: #c8d6f0 !important;
    font-weight: 500 !important;
    padding: 10px 16px 10px 16px !important;
    border-radius: 0 !important;
    transition: background .15s, color .15s !important;
}
html.modern-theme .sidebar-menu > li > a:hover,
html.modern-theme .sidebar-menu > li.menu-open > a {
    background-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Active menu item */
html.modern-theme .sidebar-menu > li.active > a {
    background-color: var(--mm-sidebar-active) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-top: none !important;
    border-bottom: none !important;
}
html.modern-theme .sidebar-menu > li.active > a .fa,
html.modern-theme .sidebar-menu > li.active > a .fas,
html.modern-theme .sidebar-menu > li.active > a .far {
    color: rgba(255,255,255,.9) !important;
}

/* Menu icons */
html.modern-theme .sidebar-menu > li > a .fa,
html.modern-theme .sidebar-menu > li > a .fas,
html.modern-theme .sidebar-menu > li > a .far,
html.modern-theme .sidebar-menu > li > a .fab {
    color: rgba(255,255,255,.5) !important;
    width: 20px;
    text-align: center;
}
html.modern-theme .sidebar-menu > li > a:hover .fa,
html.modern-theme .sidebar-menu > li > a:hover .fas,
html.modern-theme .sidebar-menu > li > a:hover .far {
    color: rgba(255,255,255,.85) !important;
}

/* Arrow indicator for treeview */
html.modern-theme .sidebar-menu > li > a > .pull-right-container > .fa-angle-left,
html.modern-theme .sidebar-menu > li > a > .pull-right-container > .fa-angle-down {
    color: rgba(255,255,255,.4) !important;
}

/* Submenu */
html.modern-theme .sidebar-menu .treeview-menu {
    background-color: rgba(0,0,0,.15) !important;
    padding: 4px 0;
}
html.modern-theme .sidebar-menu .treeview-menu > li > a {
    color: rgba(200,214,240,.75) !important;
    padding: 7px 16px 7px 38px !important;
    font-size: 13px;
    font-weight: 400 !important;
    transition: color .12s, background .12s !important;
}
html.modern-theme .sidebar-menu .treeview-menu > li > a:hover {
    background-color: rgba(255,255,255,.06) !important;
    color: #fff !important;
}
html.modern-theme .sidebar-menu .treeview-menu > li.active > a {
    color: #fff !important;
    font-weight: 600 !important;
}
html.modern-theme .sidebar-menu .treeview-menu > li > a .fa,
html.modern-theme .sidebar-menu .treeview-menu > li > a .fas {
    color: rgba(255,255,255,.4) !important;
}

/* User panel in sidebar (if present) */
html.modern-theme .main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html.modern-theme .main-sidebar .user-panel .info a {
    color: rgba(200,214,240,.85) !important;
}

/* Sidebar mini mode (collapsed) */
html.modern-theme.sidebar-mini .main-sidebar:hover .sidebar-menu > li > a,
html.modern-theme .sidebar-mini .main-sidebar:hover .sidebar-menu > li > a {
    color: #c8d6f0 !important;
}

/* ==========================================================================
   SECTION 6 — BUTTONS
   All variants with proper semantic colors, overriding app.css !important rules.
   Header-specific glass overrides (Section 3) win via higher specificity.
   ========================================================================== */

/* ── Base button shape ── */
html.modern-theme .btn {
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 500;
    transition: background-color .15s, border-color .15s, box-shadow .15s !important;
}

/* ── Primary ── */
html.modern-theme .btn-primary {
    background-color: var(--mm-primary) !important;
    border-color: var(--mm-primary) !important;
    color: #fff !important;
}
html.modern-theme .btn-primary:hover,
html.modern-theme .btn-primary:focus,
html.modern-theme .btn-primary:active {
    background-color: var(--mm-primary-hover) !important;
    border-color: var(--mm-primary-hover) !important;
    color: #fff !important;
}

/* ── Success (Green) ── */
/* app.css re-colors .btn-success to light-blue globally; restore proper green */
html.modern-theme .btn-success {
    background-color: var(--mm-success) !important;
    border-color: var(--mm-success) !important;
    color: #fff !important;
}
html.modern-theme .btn-success:hover,
html.modern-theme .btn-success:focus,
html.modern-theme .btn-success:active {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: #fff !important;
}

/* ── Danger (Red) ── */
html.modern-theme .btn-danger {
    background-color: var(--mm-danger) !important;
    border-color: var(--mm-danger) !important;
    color: #fff !important;
}
html.modern-theme .btn-danger:hover,
html.modern-theme .btn-danger:focus,
html.modern-theme .btn-danger:active {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

/* ── Warning (Amber) ── */
html.modern-theme .btn-warning {
    background-color: var(--mm-warning) !important;
    border-color: var(--mm-warning) !important;
    color: #fff !important;
}
html.modern-theme .btn-warning:hover,
html.modern-theme .btn-warning:focus,
html.modern-theme .btn-warning:active {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

/* ── Info ── */
html.modern-theme .btn-info {
    background-color: var(--mm-info) !important;
    border-color: var(--mm-info) !important;
    color: #fff !important;
}
html.modern-theme .btn-info:hover,
html.modern-theme .btn-info:focus,
html.modern-theme .btn-info:active {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #fff !important;
}

/* ── Default ── */
html.modern-theme .btn-default {
    background-color: #fff !important;
    border-color: var(--mm-border-dark) !important;
    color: var(--mm-text-soft) !important;
}
html.modern-theme .btn-default:hover,
html.modern-theme .btn-default:focus {
    background-color: #f9fafb !important;
    border-color: var(--mm-primary) !important;
    color: var(--mm-primary) !important;
}

/* ── bg-purple ── */
html.modern-theme .bg-purple,
html.modern-theme .btn-modal.bg-purple,
html.modern-theme .btn.bg-purple {
    background-color: var(--mm-purple) !important;
    border-color: var(--mm-purple) !important;
    color: #fff !important;
}
html.modern-theme .bg-purple:hover,
html.modern-theme .btn-modal.bg-purple:hover,
html.modern-theme .btn.bg-purple:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #fff !important;
}

/* ── bg-navy ── */
html.modern-theme .bg-navy,
html.modern-theme .btn.bg-navy {
    background-color: var(--mm-navy) !important;
    border-color: var(--mm-navy) !important;
    color: #fff !important;
}
html.modern-theme .bg-navy:hover,
html.modern-theme .btn.bg-navy:hover {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
    color: #fff !important;
}

/* ── bg-yellow / amber ── */
html.modern-theme .btn-modal.bg-yellow,
html.modern-theme .btn.bg-yellow {
    background-color: var(--mm-warning) !important;
    border-color: var(--mm-warning) !important;
    color: #fff !important;
}
html.modern-theme .btn-modal.bg-yellow:hover,
html.modern-theme .btn.bg-yellow:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

/* ── bg-maroon ── */
html.modern-theme .bg-maroon {
    background-color: #9b1c1c !important;
    border-color: #9b1c1c !important;
    color: #fff !important;
}

/* ── btn-link ── */
html.modern-theme .btn-link {
    color: var(--mm-primary) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html.modern-theme .btn-link:hover {
    color: var(--mm-primary-hover) !important;
}

/* ── btn-flat: no box-shadow, no extra styling beyond colour ── */
html.modern-theme .btn-flat {
    box-shadow: none !important;
}

/* ── Sizes — keep Bootstrap proportions, just correct radius ── */
html.modern-theme .btn-xs { font-size: 11px; padding: 2px 8px;  }
html.modern-theme .btn-sm { font-size: 12px; padding: 5px 12px; }
html.modern-theme .btn-lg { font-size: 15px; padding: 10px 20px;}

/* ── Specific named IDs that app.css overrides with light-blue ── */
html.modern-theme #full_screen,
html.modern-theme #return_sale {
    background-color: var(--mm-primary) !important;
    border-color: var(--mm-primary) !important;
    color: #fff !important;
}
html.modern-theme #full_screen:hover,
html.modern-theme #return_sale:hover {
    background-color: var(--mm-primary-hover) !important;
    border-color: var(--mm-primary-hover) !important;
}
html.modern-theme #close_register,
html.modern-theme #pos-cancel {
    background-color: var(--mm-danger) !important;
    border-color: var(--mm-danger) !important;
    color: #fff !important;
}
html.modern-theme #close_register:hover,
html.modern-theme #pos-cancel:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}
html.modern-theme #pos-quotation {
    background-color: var(--mm-warning) !important;
    border-color: var(--mm-warning) !important;
    color: #fff !important;
}

/* ── POS total pill (bg-navy.pos-total) ── */
html.modern-theme .bg-navy.pos-total.text-white {
    background-color: var(--mm-navy) !important;
    border-color: var(--mm-navy) !important;
    color: #fff !important;
}

/* ==========================================================================
   SECTION 7 — FORM CONTROLS
   ========================================================================== */

/* Base field */
html.modern-theme .form-control {
    background-color: #fff !important;
    border-color: var(--mm-border-dark) !important;
    color: var(--mm-text-ink) !important;
    border-radius: var(--mm-radius-input) !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
html.modern-theme .form-control::placeholder {
    color: var(--mm-text-muted) !important;
    opacity: 1;
}

/* Focus — override app.css #0078d4 focus colour */
html.modern-theme .form-control:focus {
    border-color: var(--mm-primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
    outline: none !important;
}

/* Validation states */
html.modern-theme .has-error .form-control {
    border-color: var(--mm-danger) !important;
}
html.modern-theme .has-error .form-control:focus {
    border-color: var(--mm-danger) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
html.modern-theme .has-success .form-control {
    border-color: var(--mm-success) !important;
}
html.modern-theme .has-success .form-control:focus {
    border-color: var(--mm-success) !important;
    box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important;
}
html.modern-theme .has-warning .form-control {
    border-color: var(--mm-warning) !important;
}

/* Labels */
html.modern-theme .control-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-text-soft);
    letter-spacing: .2px;
}
html.modern-theme .has-error .control-label,
html.modern-theme .has-error .help-block {
    color: var(--mm-danger) !important;
}
html.modern-theme .has-success .control-label {
    color: var(--mm-success) !important;
}

/* Disabled */
html.modern-theme .form-control[disabled],
html.modern-theme .form-control[readonly] {
    background-color: #f3f4f6 !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-muted) !important;
    cursor: not-allowed;
}

/* Small inputs */
html.modern-theme .form-control.input-sm {
    height: 30px;
    font-size: 12px;
}
html.modern-theme .form-control.input-lg {
    font-size: 15px;
    border-radius: var(--mm-radius-card) !important;
}

/* ==========================================================================
   SECTION 8 — SELECT2
   ========================================================================== */

/* ── Closed state ── */
html.modern-theme .select2-container--default .select2-selection--single,
html.modern-theme .select2-container--default .select2-selection--multiple {
    background-color: #fff !important;
    border-color: var(--mm-border-dark) !important;
    border-radius: var(--mm-radius-input) !important;
    min-height: 34px;
    transition: border-color .15s, box-shadow .15s;
}
html.modern-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mm-text-ink) !important;
    line-height: 32px;
    padding-left: 10px;
}
html.modern-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}
html.modern-theme .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--mm-text-muted) !important;
}

/* ── Focus ── */
html.modern-theme .select2-container--default.select2-container--focus .select2-selection--single,
html.modern-theme .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mm-primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}
html.modern-theme .select2-container--default.select2-container--open .select2-selection--single,
html.modern-theme .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--mm-primary) !important;
}

/* ── Open dropdown panel ── */
html.modern-theme .select2-container--default .select2-dropdown {
    background-color: #fff !important;
    border-color: var(--mm-primary) !important;
    border-radius: 0 0 var(--mm-radius-input) var(--mm-radius-input);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
html.modern-theme .select2-container--default .select2-dropdown--above {
    border-radius: var(--mm-radius-input) var(--mm-radius-input) 0 0;
}
html.modern-theme .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--mm-border-dark) !important;
    border-radius: var(--mm-radius-input) !important;
    color: var(--mm-text-ink) !important;
    font-size: 13px;
    padding: 5px 8px;
}
html.modern-theme .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--mm-primary) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.1);
    outline: none;
}

/* ── Options ── */
html.modern-theme .select2-container--default .select2-results__option {
    font-size: 13px;
    color: var(--mm-text-soft);
    padding: 7px 12px;
}
html.modern-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mm-primary) !important;
    color: #fff !important;
}
html.modern-theme .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--mm-primary-light) !important;
    color: var(--mm-primary) !important;
    font-weight: 600;
}
html.modern-theme .select2-container--default .select2-results__option[aria-selected=true]:hover,
html.modern-theme .select2-container--default .select2-results__option[aria-selected=true]:focus {
    background-color: var(--mm-primary) !important;
    color: #fff !important;
}

/* ── Multi-select tags ── */
html.modern-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--mm-primary-light) !important;
    border-color: #bfdbfe !important;
    color: var(--mm-primary) !important;
    border-radius: 4px !important;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px !important;
    width: auto !important;
    margin: 2px 3px !important;
}
html.modern-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mm-primary) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    font-weight: 700;
    margin-right: 3px;
    padding: 0 3px !important;
}
html.modern-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(220,38,38,.1) !important;
    color: var(--mm-danger) !important;
}

/* ==========================================================================
   SECTION 9 — INPUT GROUPS
   ========================================================================== */

/* Addons */
html.modern-theme .input-group-addon {
    background-color: #f3f4f6 !important;
    border-color: var(--mm-border-dark) !important;
    color: var(--mm-text-soft) !important;
    font-size: 13px;
}
html.modern-theme .input-group-addon:first-child {
    border-top-left-radius: var(--mm-radius-input) !important;
    border-bottom-left-radius: var(--mm-radius-input) !important;
}
html.modern-theme .input-group-addon:last-child {
    border-top-right-radius: var(--mm-radius-input) !important;
    border-bottom-right-radius: var(--mm-radius-input) !important;
}

/* Focus ring propagation: when inner input is focused, style the group */
html.modern-theme .input-group:focus-within .input-group-addon {
    border-color: var(--mm-primary) !important;
}

/* Buttons inside input groups — flatten the joining side */
html.modern-theme .input-group .input-group-btn:first-child > .btn {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}
html.modern-theme .input-group .input-group-btn:last-child > .btn {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Quick-add customer button in input groups */
html.modern-theme .input-group-btn > .btn.btn-default.btn-flat {
    background-color: #f3f4f6 !important;
    border-color: var(--mm-border-dark) !important;
    color: var(--mm-text-soft) !important;
}
html.modern-theme .input-group-btn > .btn.btn-default.btn-flat:hover {
    background-color: var(--mm-primary-light) !important;
    border-color: var(--mm-primary) !important;
    color: var(--mm-primary) !important;
}

/* ==========================================================================
   SECTION 10 — BOXES / CARDS
   ========================================================================== */

/* Base card */
html.modern-theme .box,
html.modern-theme .info-box {
    border-radius: var(--mm-radius-card) !important;
    background: var(--mm-card-bg);
    border: 1px solid var(--mm-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
    margin-bottom: 20px;
}

/* Box header */
html.modern-theme .box .box-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mm-border);
    background: transparent;
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0 !important;
}
html.modern-theme .box .box-header.with-border {
    border-top: 3px solid var(--mm-primary) !important;
    border-image: none !important;
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0 !important;
}

/* Box title */
html.modern-theme .box .box-title {
    font-size: 15px !important;
    font-weight: 700;
    color: var(--mm-text-ink) !important;
}
html.modern-theme .box .box-title > a {
    color: var(--mm-primary) !important;
    font-size: 15px !important;
}
html.modern-theme .box .box-title > a:hover {
    color: var(--mm-primary-hover) !important;
}

/* Box body and footer */
html.modern-theme .box .box-body {
    border-radius: 0 !important;
    padding: 16px 18px;
}
html.modern-theme .box .box-footer {
    border-top: 1px solid var(--mm-border);
    background: #f9fafb;
    padding: 10px 18px;
    border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card) !important;
}

/* Box header with centred text (subscription/special) */
html.modern-theme .box-header.with-border.text-center {
    background: var(--mm-navy) !important;
    border: 2px solid var(--mm-navy) !important;
    color: #fff;
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0 !important;
}
html.modern-theme .box-body.text-center {
    background-image: none !important;
    background-color: var(--mm-primary-light) !important;
    color: var(--mm-text-ink);
    border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card) !important;
}

/* Colour variants — top border accent */
html.modern-theme .box.box-primary {
    border-top: 3px solid var(--mm-primary) !important;
    border-top-left-radius: var(--mm-radius-card) !important;
    border-top-right-radius: var(--mm-radius-card) !important;
}
html.modern-theme .box.box-success {
    border-top: 3px solid var(--mm-success) !important;
}
html.modern-theme .box.box-danger {
    border-top: 3px solid var(--mm-danger) !important;
}
html.modern-theme .box.box-warning {
    border-top: 3px solid var(--mm-warning) !important;
    border-image: none !important;
}
html.modern-theme .box.box-info {
    border-top: 3px solid var(--mm-info) !important;
}

/* Solid box variant */
html.modern-theme .box.box-solid {
    border: none !important;
    border-radius: var(--mm-radius-card) !important;
}
html.modern-theme .box.box-solid.box-primary {
    background: var(--mm-primary) !important;
}
html.modern-theme .box.box-solid.bg-orange {
    background: var(--mm-warning) !important;
}
html.modern-theme .box.box-solid > .box-header {
    border-bottom-color: rgba(255,255,255,.15) !important;
}

/* Box tools (collapse/remove buttons) */
html.modern-theme div.box-tools.pull-right {
    display: flex !important;
}
html.modern-theme .box-tools .btn {
    background: transparent !important;
    border: none !important;
    color: var(--mm-text-muted) !important;
    padding: 2px 6px !important;
}
html.modern-theme .box-tools .btn:hover {
    color: var(--mm-text-ink) !important;
}

/* Content header custom (dashboard top strip) */
html.modern-theme .content-header-custom {
    background-color: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   SECTION 11 — DATATABLES
   ========================================================================== */

/* Table wrapper */
html.modern-theme .dataTables_wrapper {
    font-size: 13px;
    color: var(--mm-text-soft);
}

/* Table itself */
html.modern-theme table.dataTable {
    border-collapse: collapse !important;
}

/* Header row */
html.modern-theme .table > thead:first-child > tr:first-child > th,
html.modern-theme .table > thead:first-child > tr:first-child > td,
html.modern-theme table.dataTable thead th,
html.modern-theme table.dataTable thead td {
    background-color: #f8f9fb !important;
    color: var(--mm-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--mm-border) !important;
    vertical-align: middle !important;
    white-space: nowrap;
    padding: 10px 12px !important;
}

/* Sort arrows colour */
html.modern-theme table.dataTable thead .sorting:after,
html.modern-theme table.dataTable thead .sorting_asc:after,
html.modern-theme table.dataTable thead .sorting_desc:after {
    color: var(--mm-primary);
}

/* Body rows */
html.modern-theme table.dataTable tbody tr,
html.modern-theme .table > tbody > tr > td {
    border-bottom: 1px solid var(--mm-border) !important;
    vertical-align: middle !important;
}
html.modern-theme table.dataTable tbody tr > td {
    padding: 9px 12px !important;
    color: var(--mm-text-soft);
    font-size: 13px;
}

/* Striped */
html.modern-theme .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc !important;
}

/* Hover */
html.modern-theme .table-hover > tbody > tr:hover {
    background-color: #f0f5ff !important;
}

/* Selected row */
html.modern-theme table.dataTable tbody > tr.selected {
    background-color: var(--mm-primary-light) !important;
    color: var(--mm-primary);
}

/* Footer total row */
html.modern-theme tr.footer-total > td {
    background-color: #f8f9fb !important;
    font-weight: 700 !important;
    color: var(--mm-text-ink) !important;
    border-top: 2px solid var(--mm-border) !important;
}

/* DataTable controls (search, length, pagination text) */
html.modern-theme .dataTables_filter label,
html.modern-theme .dataTables_length label,
html.modern-theme .dataTables_info {
    font-size: 12px;
    color: var(--mm-text-muted);
}
html.modern-theme .dataTables_filter input {
    border: 1px solid var(--mm-border-dark) !important;
    border-radius: var(--mm-radius-input) !important;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--mm-text-ink);
    background: #fff;
}
html.modern-theme .dataTables_filter input:focus {
    border-color: var(--mm-primary) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.1);
    outline: none;
}

/* ==========================================================================
   SECTION 12 — MODALS
   ========================================================================== */

/* Overlay */
html.modern-theme .modal-backdrop {
    background-color: rgba(15,23,42,.55);
}

/* Modal container */
html.modern-theme .modal-content {
    border-radius: var(--mm-radius-card) !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.1) !important;
    padding: 0 !important;
    background: #fff;
}

/* Modal header */
html.modern-theme .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0;
    background: #fff;
}
html.modern-theme .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mm-text-ink) !important;
}

/* Modal body */
html.modern-theme .modal-body {
    padding: 20px;
    color: var(--mm-text-soft);
}

/* Modal footer */
html.modern-theme .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--mm-border);
    background: #f9fafb;
    border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card);
}

/* Close button — override app.css heavy styling */
html.modern-theme .close,
html.modern-theme .close:focus,
html.modern-theme .close:hover {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--mm-text-muted) !important;
    border-color: transparent !important;
    border-radius: 4px !important;
    background: transparent !important;
    padding: 4px 8px !important;
    opacity: .7 !important;
    text-transform: none !important;
    transition: background .12s, color .12s;
}
html.modern-theme .close:hover {
    background: #fee2e2 !important;
    color: var(--mm-danger) !important;
    opacity: 1 !important;
}
html.modern-theme .close > span {
    font-size: 20px !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* Modal sizes */
html.modern-theme .modal-dialog.modal-sm  { max-width: 420px; }
html.modern-theme .modal-dialog.modal-lg  { max-width: 860px; }
html.modern-theme .modal-dialog.modal-xl  { max-width: 1100px; }

/* ==========================================================================
   SECTION 13 — ALERTS & CALLOUTS
   ========================================================================== */

/* Bootstrap 3 alerts */
html.modern-theme .alert {
    border-radius: var(--mm-radius-input) !important;
    border-width: 1px;
    font-size: 13px;
    padding: 12px 16px;
}
html.modern-theme .alert-success {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
html.modern-theme .alert-danger,
html.modern-theme .alert-error {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
html.modern-theme .alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
html.modern-theme .alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

/* AdminLTE callouts */
html.modern-theme .callout {
    border-radius: var(--mm-radius-input) !important;
    border-left-width: 4px;
    padding: 12px 16px;
    font-size: 13px;
}
html.modern-theme .callout.callout-success {
    background-color: #ecfdf5 !important;
    border-color: var(--mm-success) !important;
    color: #065f46;
}
html.modern-theme .callout.callout-danger {
    background-color: #fef2f2 !important;
    border-color: var(--mm-danger) !important;
    color: #991b1b;
}
html.modern-theme .callout.callout-warning {
    background-color: #fffbeb !important;
    border-color: var(--mm-warning) !important;
    color: #92400e;
}
html.modern-theme .callout.callout-info {
    background-color: #eff6ff !important;
    border-color: var(--mm-info) !important;
    color: #1e40af;
}

/* Toastr toast notifications */
html.modern-theme #toast-container > .toast {
    border-radius: var(--mm-radius-input) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    font-size: 13px;
    opacity: 1 !important;
}
html.modern-theme #toast-container > .toast-success { background-color: var(--mm-success) !important; }
html.modern-theme #toast-container > .toast-error   { background-color: var(--mm-danger)  !important; }
html.modern-theme #toast-container > .toast-warning { background-color: var(--mm-warning) !important; }
html.modern-theme #toast-container > .toast-info    { background-color: var(--mm-info)    !important; }

/* ==========================================================================
   SECTION 14 — BADGES & LABELS
   ========================================================================== */

html.modern-theme .badge {
    border-radius: 10px !important;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
}

/* Bootstrap label pills */
html.modern-theme .label {
    border-radius: 4px !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
}
html.modern-theme .label-primary { background-color: var(--mm-primary)  !important; }
html.modern-theme .label-success { background-color: var(--mm-success)  !important; }
html.modern-theme .label-danger  { background-color: var(--mm-danger)   !important; }
html.modern-theme .label-warning { background-color: var(--mm-warning)  !important; color: #fff !important; }
html.modern-theme .label-info    { background-color: var(--mm-info)     !important; }
html.modern-theme .label-default { background-color: #e5e7eb !important; color: var(--mm-text-soft) !important; }

/* AdminLTE bg-gray label */
html.modern-theme .label.bg-gray {
    background-color: #e5e7eb !important;
    color: var(--mm-text-soft) !important;
}

/* Round label variant */
html.modern-theme .label-round {
    border-radius: 10px !important;
}

/* Labels inside table cells */
html.modern-theme table .label {
    display: inline-block;
    white-space: nowrap;
}

/* ==========================================================================
   SECTION 15 — INFO BOXES (dashboard stat cards)
   ========================================================================== */

html.modern-theme .info-box {
    border-radius: var(--mm-radius-card) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    border: 1px solid var(--mm-border) !important;
    overflow: hidden;
    min-height: 80px;
}
html.modern-theme .info-box-content {
    padding: 12px 16px;
}
html.modern-theme .info-box-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
html.modern-theme .info-box-number {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--mm-text-ink) !important;
    line-height: 1.2;
}

/* Icon column — keep existing pastel colours, just refine */
html.modern-theme .info-box-icon {
    border-radius: var(--mm-radius-card) 0 0 var(--mm-radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
}
html.modern-theme .info-box-icon.bg-green {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}
html.modern-theme .info-box-icon.bg-aqua,
html.modern-theme .bg-aqua {
    background-color: #dbeafe !important;
    color: var(--mm-primary) !important;
}
html.modern-theme .info-box-icon.bg-yellow {
    background-color: #fef9c3 !important;
    color: #a16207 !important;
}
html.modern-theme .info-box-icon.bg-red,
html.modern-theme .info-box-icon.bg-red.text-white {
    background-color: #fee2e2 !important;
    color: var(--mm-danger) !important;
}
html.modern-theme .info-box-icon.bg-purple {
    background-color: #f5f3ff !important;
    color: var(--mm-purple) !important;
}
html.modern-theme .info-box-icon i {
    font-size: 32px !important;
}

/* New-style info boxes */
html.modern-theme .info-box-new-style:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
    transition: transform .15s, box-shadow .15s;
}

/* ==========================================================================
   SECTION 16 — TABS
   ========================================================================== */

/* AdminLTE nav-tabs-custom */
html.modern-theme .nav-tabs-custom {
    border-radius: var(--mm-radius-card) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid var(--mm-border);
}
html.modern-theme .nav-tabs-custom > .nav-tabs {
    background-color: #f3f4f6 !important;
    border-bottom: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0 !important;
    margin: 0;
    padding: 0 8px;
}
html.modern-theme .nav-tabs-custom > .nav-tabs > li {
    border-top: 3px solid transparent;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: -1px;
}
html.modern-theme .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--mm-text-muted) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    transition: color .12s;
}
html.modern-theme .nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--mm-text-ink) !important;
    background: transparent !important;
}
html.modern-theme .nav-tabs-custom > .nav-tabs > li.active {
    border-top: 3px solid var(--mm-primary) !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
html.modern-theme .nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--mm-primary) !important;
    font-weight: 600 !important;
    background: #fff !important;
    border-bottom: 1px solid #fff !important;
}
html.modern-theme .nav-tabs-custom > .tab-content {
    background: #fff;
    border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card);
    padding: 16px;
}

/* Standard Bootstrap nav-tabs */
html.modern-theme .nav-tabs > li > a {
    color: var(--mm-text-soft) !important;
    border-radius: var(--mm-radius-input) var(--mm-radius-input) 0 0 !important;
    border-color: var(--mm-border) !important;
}
html.modern-theme .nav-tabs > li > a:hover {
    background-color: var(--mm-primary-light) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-primary) !important;
}
html.modern-theme .nav-tabs > li.active > a,
html.modern-theme .nav-tabs > li.active > a:hover,
html.modern-theme .nav-tabs > li.active > a:focus {
    color: var(--mm-primary) !important;
    border-color: var(--mm-border) var(--mm-border) transparent !important;
    background-color: #fff !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   SECTION 17 — BREADCRUMBS
   ========================================================================== */

html.modern-theme .breadcrumb {
    background-color: transparent !important;
    padding: 6px 0 !important;
    margin-bottom: 6px;
    font-size: 12px;
}
html.modern-theme .breadcrumb > li {
    color: var(--mm-text-muted);
}
html.modern-theme .breadcrumb > li > a {
    color: var(--mm-primary);
    text-decoration: none;
}
html.modern-theme .breadcrumb > li > a:hover {
    color: var(--mm-primary-hover);
    text-decoration: underline;
}
html.modern-theme .breadcrumb > li + li::before {
    color: var(--mm-text-muted);
    content: "/\00a0";
}
html.modern-theme .breadcrumb > li.active {
    color: var(--mm-text-soft);
    font-weight: 500;
}

/* Content header breadcrumb integration */
html.modern-theme .content-header > .breadcrumb {
    position: static;
    float: none;
    display: inline-block;
    margin: 0;
    padding: 4px 0;
    background: transparent;
}

/* ==========================================================================
   SECTION 18 — PAGINATION
   ========================================================================== */

html.modern-theme .pagination > li > a,
html.modern-theme .pagination > li > span {
    color: var(--mm-primary);
    background-color: #fff;
    border-color: var(--mm-border-dark);
    font-size: 13px;
    padding: 5px 12px;
    transition: background .12s, border-color .12s;
}
html.modern-theme .pagination > li > a:hover,
html.modern-theme .pagination > li > span:hover {
    background-color: var(--mm-primary-light);
    border-color: var(--mm-primary);
    color: var(--mm-primary);
}
html.modern-theme .pagination > .active > a,
html.modern-theme .pagination > .active > span {
    background-color: var(--mm-primary) !important;
    border-color: var(--mm-primary) !important;
    color: #fff !important;
}
html.modern-theme .pagination > .active > a:hover,
html.modern-theme .pagination > .active > span:hover,
html.modern-theme .pagination > .active > a:focus,
html.modern-theme .pagination > .active > span:focus {
    background-color: var(--mm-primary-hover) !important;
    border-color: var(--mm-primary-hover) !important;
    color: #fff !important;
}
html.modern-theme .pagination > .disabled > a,
html.modern-theme .pagination > .disabled > span {
    color: var(--mm-text-muted);
    background-color: #f9fafb;
    border-color: var(--mm-border);
    cursor: not-allowed;
}
html.modern-theme .pagination > li:first-child > a,
html.modern-theme .pagination > li:first-child > span {
    border-top-left-radius: var(--mm-radius-input);
    border-bottom-left-radius: var(--mm-radius-input);
}
html.modern-theme .pagination > li:last-child > a,
html.modern-theme .pagination > li:last-child > span {
    border-top-right-radius: var(--mm-radius-input);
    border-bottom-right-radius: var(--mm-radius-input);
}

/* ==========================================================================
   SECTION 19 — DROPDOWNS
   ========================================================================== */

/* Standard dropdown menu */
html.modern-theme .dropdown-menu {
    background-color: #fff !important;
    border: 1px solid var(--mm-border-dark) !important;
    border-radius: var(--mm-radius-input) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
    padding: 4px 0 !important;
    min-width: 200px;
}
html.modern-theme .dropdown-menu > li > a {
    color: var(--mm-text-soft) !important;
    font-size: 13px;
    padding: 8px 16px;
    line-height: 1.5;
    transition: background .1s, color .1s;
}
html.modern-theme .dropdown-menu > li > a:hover,
html.modern-theme .dropdown-menu > li > a:focus {
    background-color: var(--mm-primary-light) !important;
    color: var(--mm-primary) !important;
}
html.modern-theme .dropdown-menu > li > a > .fas,
html.modern-theme .dropdown-menu > li > a > .fa {
    width: 16px;
    text-align: center;
    margin-right: 6px;
    color: var(--mm-text-muted);
}
html.modern-theme .dropdown-menu > li > a:hover > .fas,
html.modern-theme .dropdown-menu > li > a:hover > .fa {
    color: var(--mm-primary);
}
html.modern-theme .dropdown-menu > li.divider {
    background-color: var(--mm-border) !important;
    margin: 4px 0;
    height: 1px;
    padding: 0;
}
html.modern-theme .dropdown-menu > li.dropdown-header {
    color: var(--mm-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 8px 16px 4px;
}

/* Action dropdowns (DataTable action menus) */
html.modern-theme .btn-group.open .dropdown-toggle {
    box-shadow: none !important;
}

/* ==========================================================================
   SECTION 20 — POS COMPONENTS
   ========================================================================== */

/* POS page background */
html.modern-theme body.lockscreen {
    background-color: var(--mm-page-bg) !important;
}

/* POS main wrapper box */
html.modern-theme .pos-content .box.box-solid,
html.modern-theme .box.box-solid.mb-12 {
    border-radius: var(--mm-radius-card) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
    border: 1px solid var(--mm-border) !important;
}

/* ── Product search row (customer + product inputs) ── */
html.modern-theme .pos-content .input-group .form-control,
html.modern-theme [class*="col-md"] .pos-search .form-control {
    background: #fff !important;
}

/* ── Product table (sales_table) ── */
html.modern-theme table.pos-table,
html.modern-theme .pos-content table.table {
    border-collapse: collapse;
}
html.modern-theme .pos-content table.table thead > tr > th {
    background-color: #f8f9fb !important;
    color: var(--mm-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--mm-border) !important;
    padding: 8px 10px !important;
}
html.modern-theme .pos-content table.table tbody > tr {
    border-bottom: 1px solid var(--mm-border) !important;
    transition: background .1s;
}
html.modern-theme .pos-content table.table tbody > tr:hover {
    background-color: #f8fbff !important;
}
html.modern-theme .pos-content table.table tbody > tr > td {
    padding: 7px 10px !important;
    vertical-align: middle !important;
    font-size: 13px;
    color: var(--mm-text-soft);
}

/* Product name in POS row */
html.modern-theme .pos-content table.table tbody td .product-name,
html.modern-theme .pos-content .product_name {
    font-weight: 600;
    color: var(--mm-text-ink);
    font-size: 13px;
}

/* Quantity input in POS row */
html.modern-theme .pos-content .input-group.input-number .form-control,
html.modern-theme .pos-content input.pos_quantity,
html.modern-theme .pos-content input[name*="quantity"] {
    text-align: center;
    font-weight: 600;
    border-radius: var(--mm-radius-input) !important;
}

/* Delete row button */
html.modern-theme .pos-content .remove_product_row,
html.modern-theme .pos-content .pos_remove_row {
    background-color: #fee2e2 !important;
    color: var(--mm-danger) !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background .12s;
}
html.modern-theme .pos-content .remove_product_row:hover,
html.modern-theme .pos-content .pos_remove_row:hover {
    background-color: var(--mm-danger) !important;
    color: #fff !important;
}

/* ── POS Totals section ── */
html.modern-theme .pos_form_totals {
    background-color: #f8f9fb;
    border-top: 2px solid var(--mm-border);
    padding: 6px 0;
}
html.modern-theme .pos_form_totals table.table-condensed {
    margin-bottom: 0;
    width: 100%;
}
html.modern-theme .pos_form_totals table.table-condensed td {
    padding: 5px 14px !important;
    font-size: 13px;
    color: var(--mm-text-soft);
    white-space: nowrap;
    vertical-align: middle !important;
}
html.modern-theme .pos_form_totals table.table-condensed td b {
    color: var(--mm-text-ink);
    font-weight: 600;
}
/* Shipping row — preserved and visually distinct */
html.modern-theme .pos_form_totals #shipping_charges_amount {
    font-weight: 700;
    color: var(--mm-text-ink);
}
html.modern-theme .pos_form_totals .fa-edit.cursor-pointer {
    color: var(--mm-primary);
    opacity: .7;
    transition: opacity .12s;
}
html.modern-theme .pos_form_totals .fa-edit.cursor-pointer:hover {
    opacity: 1;
}
/* Total quantity and price spans */
html.modern-theme .pos_form_totals .price_total,
html.modern-theme .pos_form_totals .total_quantity {
    font-weight: 700;
    color: var(--mm-text-ink);
    font-size: 14px;
}

/* ── Total payable pill ── */
html.modern-theme .bg-navy.pos-total.text-white {
    background: var(--mm-navy) !important;
    border: none !important;
    border-radius: var(--mm-radius-input) !important;
    color: #fff !important;
    padding: 8px 18px;
    font-size: 15px;
}
html.modern-theme .bg-navy.pos-total .text {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.6);
}
html.modern-theme .bg-navy.pos-total .number {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
html.modern-theme #total_payable.text-success {
    color: var(--mm-success) !important;
    font-size: 18px;
    font-weight: 700;
}

/* ── POS Payment action buttons ── */
html.modern-theme .pos-form-actions {
    background-color: #f8f9fb;
    border-top: 2px solid var(--mm-border);
    padding: 10px 14px;
}
/* Draft button */
html.modern-theme #pos-draft {
    background-color: #eff6ff !important;
    border-color: var(--mm-primary) !important;
    color: var(--mm-primary) !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Quotation button (bg-yellow) */
html.modern-theme #pos-quotation {
    background-color: #fffbeb !important;
    border-color: var(--mm-warning) !important;
    color: var(--mm-warning) !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Suspend button (bg-red) */
html.modern-theme #pos-cancel,
html.modern-theme .pos-express-finalize.btn.bg-red {
    background-color: var(--mm-danger) !important;
    border-color: var(--mm-danger) !important;
    color: #fff !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Credit sale (bg-purple) */
html.modern-theme .pos-express-finalize.btn.bg-purple {
    background-color: var(--mm-purple) !important;
    border-color: var(--mm-purple) !important;
    color: #fff !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Card checkout (bg-maroon) */
html.modern-theme .pos-express-finalize.btn.bg-maroon {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
    color: #fff !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Multi-pay (bg-navy) */
html.modern-theme #pos-finalize {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #fff !important;
    border-radius: var(--mm-radius-btn) !important;
    font-weight: 600 !important;
}
/* Express cash checkout (btn-success) — already green from Section 6 */
html.modern-theme .pos-express-finalize.btn-success {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* ── POS Product list/grid (right div) ── */
html.modern-theme .pos_product_div {
    background: var(--mm-page-bg);
    border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card);
}
html.modern-theme .pos_product_div .product_list_box,
html.modern-theme .product_list_box {
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-input);
    padding: 8px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    text-align: center;
}
html.modern-theme .product_list_box:hover {
    border-color: var(--mm-primary);
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
}
html.modern-theme .product_list_box .product_name {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-text-ink);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
html.modern-theme .product_list_box .product_price {
    font-size: 13px;
    font-weight: 700;
    color: var(--mm-success);
    margin-top: 4px;
}

/* ==========================================================================
   SECTION 21 — STATUS COLORS
   Payment status labels (output by @payment_status Blade directive)
   Classes: bg-light-green (paid), bg-yellow (due), bg-aqua (partial),
            bg-red (overdue/partial-overdue)
   Also: exact-match attribute selectors from lines 19–47 of app.css
   ========================================================================== */

/* ── Paid ── */
html.modern-theme .label.bg-light-green,
html.modern-theme [class="label bg-light-green"],
html.modern-theme [class="label bg-green"] {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border-radius: 10px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── Due ── */
html.modern-theme .label.bg-yellow,
html.modern-theme [class="label bg-yellow"] {
    background-color: #fef9c3 !important;
    color: #a16207 !important;
    border-radius: 10px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── Partial ── */
html.modern-theme .label.bg-aqua,
html.modern-theme [class="label bg-aqua"] {
    background-color: #dbeafe !important;
    color: var(--mm-primary) !important;
    border-radius: 10px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── Overdue / partial-overdue ── */
html.modern-theme .label.bg-red,
html.modern-theme [class="label bg-red"] {
    background-color: #fee2e2 !important;
    color: var(--mm-danger) !important;
    border-radius: 10px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── Custom status labels ── */
html.modern-theme [class="label custom-bg-red"] {
    background: #fee2e2 !important;
    color: var(--mm-danger) !important;
    border-radius: 10px !important;
}
html.modern-theme [class="label custom-bg-green"] {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-radius: 10px !important;
}
html.modern-theme [class="label custom-bg-blue"] {
    background-color: var(--mm-primary-light) !important;
    color: var(--mm-primary) !important;
    border-radius: 10px !important;
}

/* ── bg-aqua-lite ── */
html.modern-theme .bg-aqua-lite {
    background-color: #dbeafe !important;
    color: var(--mm-primary) !important;
}

/* Transaction status dots / pills in tables */
html.modern-theme .payment-status-label {
    text-decoration: none !important;
}
html.modern-theme .payment-status-label:hover .label {
    filter: brightness(.95);
}

/* ==========================================================================
   SECTION 22 — PRINT PRESERVATION
   Ensure classic print styles are completely unaffected.
   These rules are scoped to screen only; @media print has no html.modern-theme.
   ========================================================================== */

@media print {
    /* Remove all modern-theme overrides when printing */
    html.modern-theme .main-header,
    html.modern-theme .main-sidebar,
    html.modern-theme .content-header,
    html.modern-theme .no-print,
    html.modern-theme .pos-header {
        display: none !important;
    }

    /* Restore white backgrounds for print */
    html.modern-theme body,
    html.modern-theme .content-wrapper,
    html.modern-theme .box,
    html.modern-theme .box-header,
    html.modern-theme .box-body,
    html.modern-theme .modal-content,
    html.modern-theme table,
    html.modern-theme table thead th,
    html.modern-theme table tbody td {
        background-color: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #ddd !important;
        box-shadow: none !important;
    }

    /* Restore black text for print */
    html.modern-theme .label,
    html.modern-theme .badge {
        border: 1px solid #000 !important;
        background: transparent !important;
        color: #000 !important;
    }

    /* Status labels print in plain text */
    html.modern-theme .label.bg-light-green,
    html.modern-theme .label.bg-yellow,
    html.modern-theme .label.bg-aqua,
    html.modern-theme .label.bg-red {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #888 !important;
    }

    /* Ensure invoice/receipt print section renders correctly */
    html.modern-theme .print_section,
    html.modern-theme .invoice {
        display: block !important;
        width: 100% !important;
    }
}