/**
 * MSMS Minimal Modern SaaS design system
 * Separate presentation layer. The original playful-geometric.css is not
 * modified and is disabled while this theme is active.
 */

@font-face {
    font-family: "MSMS Inter";
    src: url("../fonts/inter/inter-v12-latin-300.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 400;
    font-display: swap;
}

@font-face {
    font-family: "MSMS Inter";
    src: url("../fonts/inter/inter-v12-latin-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "MSMS Inter";
    src: url("../fonts/inter/inter-v12-latin-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
}

@font-face {
    font-family: "MSMS Inter";
    src: url("../fonts/inter/inter-v12-latin-800.woff2") format("woff2");
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
}

:root {
    --saas-background: #fafafa;
    --saas-surface: #ffffff;
    --saas-foreground: #0f172a;
    --saas-muted: #f1f5f9;
    --saas-muted-foreground: #64748b;
    --saas-accent: #0052ff;
    --saas-accent-secondary: #4d7cff;
    --saas-accent-soft: #edf3ff;
    --saas-border: #e2e8f0;
    --saas-border-strong: #cbd5e1;
    --saas-success: #059669;
    --saas-success-soft: #ecfdf5;
    --saas-warning: #d97706;
    --saas-warning-soft: #fffbeb;
    --saas-danger: #dc2626;
    --saas-danger-soft: #fef2f2;
    --saas-info: #0284c7;
    --saas-radius-sm: 8px;
    --saas-radius-md: 12px;
    --saas-radius-lg: 16px;
    --saas-radius-xl: 22px;
    --saas-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
    --saas-shadow-md: 0 5px 15px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);
    --saas-shadow-lg: 0 16px 35px rgba(15, 23, 42, .09), 0 3px 8px rgba(15, 23, 42, .04);
    --saas-shadow-xl: 0 24px 55px rgba(15, 23, 42, .13);
    --saas-shadow-accent: 0 10px 24px rgba(0, 82, 255, .24);
    --saas-ease: 220ms cubic-bezier(.16, 1, .3, 1);
    --saas-footer-clearance: 0;

    /* Bootstrap, legacy and standalone POS bridges. */
    --bs-primary: #0052ff;
    --bs-primary-rgb: 0, 82, 255;
    --primary-color: #0052ff;
    --secondary-color: #4d7cff;
    --background-color: #fafafa;
    --text-color: #0f172a;
    --accent-color: #0052ff;
    --hover-color: #0047de;
    --active-color: #003bbd;
    --border-color: #e2e8f0;
    --success-color: #059669;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --info-color: #0284c7;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-sm: var(--saas-shadow-sm);
    --shadow-md: var(--saas-shadow-md);
    --shadow-lg: var(--saas-shadow-lg);
    --shadow-xl: var(--saas-shadow-xl);
    --transition-base: var(--saas-ease);

    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-2: #f1f5f9;
    --field: #ffffff;
    --field-sunken: #f8fafc;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --line-soft: rgba(100, 116, 139, .13);
    --text: #0f172a;
    --text-2: #475569;
    --text-3: #64748b;
    --accent: #0052ff;
    --accent-2: #4d7cff;
    --accent-soft: #edf3ff;
    --money: #059669;
    --ok: #059669;
    --warn: #d97706;
    --exchange: #c2410c;
    --danger: #dc2626;
    --radius: 10px;
    --shadow-panel: var(--saas-shadow-md);
    --shadow-pop: var(--saas-shadow-xl);
    --focus-ring: 0 0 0 4px rgba(0, 82, 255, .16);
}

html {
    color-scheme: light;
    background: var(--saas-background);
    scroll-behavior: smooth;
}

body,
.layout-wrapper,
.layout-container,
.layout-page,
.main-panel {
    color: var(--saas-foreground) !important;
    font-family: "MSMS Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
    min-height: 100vh;
    background-color: var(--saas-background) !important;
    background-image:
        radial-gradient(circle at 90% 4%, rgba(0, 82, 255, .055), transparent 26rem),
        radial-gradient(circle at 12% 90%, rgba(77, 124, 255, .035), transparent 24rem) !important;
    background-attachment: fixed !important;
}

.layout-wrapper,
.layout-container,
.layout-page {
    background: transparent !important;
}

.layout-page {
    display: flex !important;
    min-height: 100vh !important;
    flex-direction: column !important;
}

.content-wrapper,
.main-panel > .content-wrapper {
    position: relative;
    background: transparent !important;
}

.layout-page > .content-wrapper {
    display: flex !important;
    min-height: 0 !important;
    padding-bottom: var(--saas-footer-clearance) !important;
    flex: 1 0 auto !important;
    flex-direction: column !important;
}

.layout-page > .content-wrapper > .container,
.layout-page > .content-wrapper > .container-fluid,
.layout-page > .content-wrapper > .container-xxl {
    width: 100%;
    flex: 0 0 auto;
}

.container-p-y {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
}

a {
    color: var(--saas-accent);
    text-decoration-color: rgba(0, 82, 255, .3);
    text-underline-offset: .18em;
}

a:hover { color: #003fca; }

::selection {
    color: #fff;
    background: var(--saas-accent);
}

:focus-visible {
    outline: 3px solid rgba(0, 82, 255, .42) !important;
    outline-offset: 3px;
}

h1,
h2,
.display-1,
.display-2,
.display-3,
.welcome-content h3,
.card-header h2 {
    color: var(--saas-foreground) !important;
    font-family: Calistoga, Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;
    letter-spacing: -.025em;
}

h3,
h4,
h5,
h6,
.card-title,
.modal-title {
    color: var(--saas-foreground);
    font-family: "MSMS Inter", Inter, sans-serif;
    letter-spacing: -.018em;
}

.text-muted,
.form-text,
.text-secondary {
    color: var(--saas-muted-foreground) !important;
}

/* Shared navigation shell */
.layout-menu,
.sidebar.sidebar-offcanvas {
    background:
        radial-gradient(circle at 12% 2%, rgba(77, 124, 255, .18), transparent 16rem),
        var(--saas-foreground) !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 12px 0 38px rgba(15, 23, 42, .12) !important;
}

.app-brand,
.sidebar-brand-wrapper {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}

.sidebar-brand-shell {
    min-height: 90px !important;
}

.sidebar-brand-logo-wrap,
.app-brand-logo,
.sidebar-brand-icon {
    border-radius: var(--saas-radius-md) !important;
}

.sidebar-brand-logo-wrap,
.app-brand-logo img,
.sidebar-brand-logo {
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}

.sidebar-brand-name,
.app-brand-text,
.brand-title {
    color: #fff !important;
}

.sidebar-brand-eyebrow {
    color: rgba(255, 255, 255, .52) !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .59rem !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}

.sidebar-collapse-toggle {
    color: rgba(255, 255, 255, .68) !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 9px !important;
}

.sidebar-collapse-toggle:hover {
    color: #fff !important;
    background: rgba(77, 124, 255, .22) !important;
    border-color: rgba(77, 124, 255, .42) !important;
}

.sidebar-quick-panel {
    margin: .85rem !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: var(--saas-radius-md) !important;
    box-shadow: none !important;
}

.sidebar-quick-heading { color: rgba(255, 255, 255, .52) !important; }
.sidebar-live-status { color: #86efac !important; }
.sidebar-live-status > span { background: #22c55e !important; box-shadow: 0 0 0 4px rgba(34, 197, 94, .11) !important; }

.sidebar-quick-action {
    color: rgba(255, 255, 255, .78) !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transition: transform var(--saas-ease), background-color var(--saas-ease), border-color var(--saas-ease) !important;
}

.sidebar-quick-action:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
}

.menu-inner,
.sidebar-menu {
    scrollbar-color: rgba(77, 124, 255, .5) transparent;
}

.sidebar-section-label,
.menu-header {
    color: rgba(255, 255, 255, .38) !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .59rem !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}

.menu-inner > .menu-item,
.sidebar .nav-item { margin: .16rem .65rem; }

.menu-inner .menu-link,
.sidebar .nav-link,
.sidebar .menu-group-header {
    min-height: 44px;
    color: rgba(226, 232, 240, .7) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 500;
    transition: color var(--saas-ease), background-color var(--saas-ease), transform var(--saas-ease) !important;
}

.menu-inner .menu-link:hover,
.sidebar .nav-link:hover,
.sidebar .menu-group-header:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .075) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
    transform: translateX(2px) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active.open > .menu-link,
.sidebar .nav-item.active > .nav-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 8px 20px rgba(0, 82, 255, .24) !important;
}

.menu-inner .menu-icon,
.sidebar .menu-icon,
.sidebar .group-icon,
.sidebar-menu-icon,
.sidebar-sub-icon {
    color: rgba(147, 197, 253, .8) !important;
}

.menu-inner .menu-item.active > .menu-link .menu-icon,
.menu-inner .menu-item.active > .menu-link .sidebar-menu-icon,
.sidebar .nav-item.active > .nav-link .menu-icon { color: #fff !important; }

.sidebar-link-description { color: rgba(226, 232, 240, .4) !important; }
.menu-item.active .sidebar-link-description { color: rgba(255, 255, 255, .72) !important; }

.menu-sub {
    margin: .28rem 0 .45rem !important;
    padding-left: .35rem !important;
    border-left: 1px solid rgba(77, 124, 255, .26) !important;
}

.menu-sub .menu-link { min-height: 39px !important; font-size: .79rem !important; }

.sidebar-count-badge {
    color: #dbeafe !important;
    background: rgba(77, 124, 255, .2) !important;
    border: 1px solid rgba(147, 197, 253, .2) !important;
    box-shadow: none !important;
}

.sidebar-account-dock {
    background: rgba(255, 255, 255, .045) !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.sidebar-account-link { color: #fff !important; }
.sidebar-account-copy small { color: rgba(226, 232, 240, .48) !important; }
.sidebar-account-avatar { color: #fff !important; background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: 0 7px 16px rgba(0, 82, 255, .22) !important; }
.sidebar-account-logout { color: rgba(255, 255, 255, .58) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 9px !important; }
.sidebar-account-logout:hover { color: #fecaca !important; background: rgba(220, 38, 38, .14) !important; }

/* The dedicated sidebar component is intentionally specific; these scoped
   rules ensure it adopts the SaaS layer without changing modern-sidebar.css. */
#layout-menu.msms-sidebar {
    --sidebar-bg: #0f172a;
    --sidebar-surface: rgba(255, 255, 255, .055);
    --sidebar-surface-hover: rgba(255, 255, 255, .075);
    --sidebar-border: rgba(255, 255, 255, .1);
    --sidebar-soft-border: rgba(255, 255, 255, .08);
    --sidebar-text: #f8fafc;
    --sidebar-muted: rgba(226, 232, 240, .46);
    --sidebar-accent: #0052ff;
    --sidebar-accent-strong: #4d7cff;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 12% 2%, rgba(77, 124, 255, .2), transparent 16rem),
        #0f172a !important;
    background-size: 100% 100% !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 12px 0 38px rgba(15, 23, 42, .12) !important;
}

#layout-menu.msms-sidebar::before {
    width: 3px;
    opacity: .8;
    background: linear-gradient(180deg, #0052ff, #4d7cff);
}

.msms-sidebar .sidebar-brand-shell {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}

.msms-sidebar .sidebar-brand-shell::after { display: none !important; }
.msms-sidebar .sidebar-brand-eyebrow { color: rgba(255, 255, 255, .44) !important; }
.msms-sidebar .sidebar-brand-name { color: #fff !important; }
.msms-sidebar .sidebar-collapse-toggle { color: rgba(255, 255, 255, .68) !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; }
.msms-sidebar .sidebar-collapse-toggle:hover { color: #fff !important; background: rgba(77, 124, 255, .2) !important; border-color: rgba(77, 124, 255, .38) !important; box-shadow: none !important; transform: translateY(-1px) !important; }

.msms-sidebar .sidebar-quick-panel {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    box-shadow: none !important;
}

.msms-sidebar .sidebar-quick-heading { color: rgba(255, 255, 255, .48) !important; }
.msms-sidebar .sidebar-quick-action,
.msms-sidebar .sidebar-quick-action:nth-child(2) {
    color: rgba(255, 255, 255, .76) !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
}

.msms-sidebar .sidebar-quick-action i { color: #93c5fd !important; }
.msms-sidebar .sidebar-quick-action:hover,
.msms-sidebar .sidebar-quick-action:nth-child(2):hover { color: #fff !important; background: linear-gradient(135deg, #0052ff, #4d7cff) !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(0, 82, 255, .22) !important; transform: translateY(-2px) !important; }

.msms-sidebar .sidebar-section-label {
    color: rgba(255, 255, 255, .34) !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
}

.msms-sidebar .sidebar-section-label::before { background: #4d7cff !important; border: 0 !important; box-shadow: 0 0 0 3px rgba(77, 124, 255, .12) !important; }
.msms-sidebar .sidebar-section-label::after { border-top: 1px solid rgba(255, 255, 255, .075) !important; }

.msms-sidebar .sidebar-primary-link {
    color: rgba(226, 232, 240, .68) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.msms-sidebar .sidebar-primary-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
    transform: translateX(2px) !important;
}

.msms-sidebar .sidebar-menu-icon,
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n) .sidebar-menu-icon,
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n + 1) .sidebar-menu-icon,
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n + 2) .sidebar-menu-icon {
    color: #93c5fd !important;
    background: rgba(77, 124, 255, .11) !important;
    border: 1px solid rgba(147, 197, 253, .12) !important;
    border-radius: 9px !important;
}

.msms-sidebar .sidebar-link-description { color: rgba(226, 232, 240, .38) !important; }
.msms-sidebar .menu-toggle::after { color: rgba(226, 232, 240, .42) !important; }

.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link,
.msms-sidebar .sidebar-navigation > .menu-item.active.open > .sidebar-primary-link {
    color: #fff !important;
    background: linear-gradient(135deg, #0052ff, #4d7cff) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 9px 20px rgba(0, 82, 255, .24) !important;
}

.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link .sidebar-menu-icon { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .22) !important; }
.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link .sidebar-link-description,
.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link.menu-toggle::after { color: rgba(255, 255, 255, .7) !important; }

.msms-sidebar .sidebar-count-badge { color: #dbeafe !important; background: rgba(77, 124, 255, .2) !important; border: 1px solid rgba(147, 197, 253, .2) !important; box-shadow: none !important; }
.msms-sidebar .menu-sub::before { border-left: 1px solid rgba(77, 124, 255, .28) !important; }
.msms-sidebar .sidebar-sub-link { color: rgba(226, 232, 240, .52) !important; border-width: 1px !important; }
.msms-sidebar .sidebar-sub-link:hover { color: #fff !important; background: rgba(255, 255, 255, .065) !important; border-color: rgba(255, 255, 255, .06) !important; box-shadow: none !important; transform: translateX(2px) !important; }
.msms-sidebar .sidebar-sub-icon { color: #93c5fd !important; }
.msms-sidebar .menu-sub > .menu-item.active > .sidebar-sub-link { color: #fff !important; background: rgba(77, 124, 255, .18) !important; border-color: rgba(77, 124, 255, .25) !important; box-shadow: none !important; }
.msms-sidebar .menu-sub > .menu-item.active > .sidebar-sub-link .sidebar-sub-icon { color: #bfdbfe !important; }

.msms-sidebar .sidebar-account-dock {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
}

.msms-sidebar .sidebar-account-copy strong { color: #fff !important; }
.msms-sidebar .sidebar-account-copy small { color: rgba(226, 232, 240, .42) !important; }
.msms-sidebar .sidebar-account-logout { color: rgba(255, 255, 255, .55) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
.msms-sidebar .sidebar-account-logout:hover { color: #fecaca !important; background: rgba(220, 38, 38, .14) !important; border-color: rgba(248, 113, 113, .24) !important; box-shadow: none !important; transform: translateY(-1px) !important; }

.layout-navbar,
.navbar.glass-navbar,
.navbar.default-layout-navbar {
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(226, 232, 240, .94) !important;
    border-radius: var(--saas-radius-lg) !important;
    box-shadow: var(--saas-shadow-md) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
}

.glass-search,
.navbar .search-container,
.navbar .search-field {
    min-height: 42px;
    background: #f8fafc !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025) !important;
    transition: border-color var(--saas-ease), box-shadow var(--saas-ease), background-color var(--saas-ease) !important;
}

.glass-search:focus-within,
.navbar .search-container:focus-within {
    background: #fff !important;
    border-color: rgba(0, 82, 255, .5) !important;
    box-shadow: 0 0 0 4px rgba(0, 82, 255, .09) !important;
}

#navbarSearch { color: var(--saas-foreground) !important; }

.navbar .avatar {
    border-color: rgba(0, 82, 255, .28) !important;
    box-shadow: 0 0 0 4px rgba(0, 82, 255, .06) !important;
}

.navbar .dropdown-menu {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: var(--saas-radius-md) !important;
    box-shadow: var(--saas-shadow-xl) !important;
    backdrop-filter: blur(20px) !important;
}

.settlement-reminder-toggle {
    color: var(--saas-muted-foreground) !important;
    background: var(--saas-muted) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.settlement-reminder-toggle.has-warning { color: var(--saas-danger) !important; background: var(--saas-danger-soft) !important; border-color: #fecaca !important; }
.settlement-reminder-toggle.is-clear { color: var(--saas-success) !important; background: var(--saas-success-soft) !important; border-color: #a7f3d0 !important; }
.settlement-reminder-count { color: #fff !important; background: var(--saas-danger) !important; border: 2px solid #fff !important; box-shadow: var(--saas-shadow-sm) !important; }
.settlement-reminder-menu { color: var(--saas-foreground) !important; background: #fff !important; border: 1px solid var(--saas-border) !important; border-radius: var(--saas-radius-md) !important; box-shadow: var(--saas-shadow-xl) !important; }
.settlement-reminder-header { border-bottom: 1px solid var(--saas-border); }
.settlement-reminder-eyebrow { color: var(--saas-accent); }
.settlement-reminder-total-count { color: #fff; background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)); }
.settlement-reminder-summary { color: #991b1b !important; background: var(--saas-danger-soft) !important; border: 1px solid #fecaca !important; border-radius: 9px !important; }
.settlement-reminder-item { color: var(--saas-foreground) !important; border-bottom: 1px solid var(--saas-border) !important; }
.settlement-reminder-item:hover { background: #f8fafc !important; }
.settlement-reminder-icon { border: 1px solid var(--saas-border) !important; border-radius: 10px !important; box-shadow: none !important; }
.settlement-reminder-copy strong { color: var(--saas-foreground); }
.settlement-reminder-copy small,
.settlement-reminder-footer { color: var(--saas-muted-foreground); }
.settlement-reminder-amount { color: var(--saas-danger); }
.settlement-warning-callout {
    color: #991b1b !important;
    background: rgba(254, 242, 242, .98) !important;
    border: 1px solid #fecaca !important;
    border-radius: 11px !important;
    box-shadow: 0 12px 28px rgba(127, 29, 29, .12), inset 0 1px 0 #fff !important;
}
.settlement-warning-callout > i { color: var(--saas-danger) !important; }
.settlement-warning-callout strong { color: #991b1b !important; }
.settlement-warning-callout small { color: #b45309 !important; font-weight: 600; }

@media (min-width: 1200px) {
    .settlement-warning-callout { display: inline-flex !important; }
}

/* Page landmarks and dashboard */
.welcome-section {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(77, 124, 255, .35), transparent 18rem),
        var(--saas-foreground) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: var(--saas-radius-xl) !important;
    box-shadow: var(--saas-shadow-lg) !important;
    margin-top: 0 !important;
    margin-bottom: 1.75rem !important;
    padding: 2rem 2.25rem !important;
}

.welcome-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .045;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.welcome-section::after {
    content: "";
    position: absolute;
    top: -62px;
    right: -52px;
    width: 190px;
    height: 190px;
    border: 1px dashed rgba(147, 197, 253, .28);
    border-radius: 50%;
    animation: saas-slow-spin 70s linear infinite;
    pointer-events: none;
}

.welcome-section > * { position: relative; z-index: 1; }
.welcome-content h1,
.welcome-content h2,
.welcome-content h3,
.welcome-content h4,
.welcome-content p { color: #fff !important; }
.welcome-content h3 { font-size: clamp(1.8rem, 3vw, 2.65rem) !important; }

.welcome-date-badge {
    color: #bfdbfe !important;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(147, 197, 253, .18) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .68rem !important;
    letter-spacing: .035em;
}

.dashboard-section-title {
    display: inline-flex !important;
    width: auto !important;
    min-height: 32px;
    margin: 1.4rem 0 1rem !important;
    padding: .38rem .78rem !important;
    align-items: center;
    color: var(--saas-accent) !important;
    background: rgba(0, 82, 255, .055) !important;
    border: 1px solid rgba(0, 82, 255, .15) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
}

.dashboard-section-title i { color: var(--saas-accent) !important; }

/* Cards and data surfaces */
.card,
.card-modern,
.glass-card,
.content-card,
.modal-content,
.toast,
.list-group {
    color: var(--saas-foreground);
    background: var(--saas-surface) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: var(--saas-radius-lg) !important;
    box-shadow: var(--saas-shadow-md) !important;
}

.card {
    overflow: hidden;
    transition: border-color var(--saas-ease), box-shadow var(--saas-ease), transform var(--saas-ease) !important;
}

.card:hover,
.card.hover-lift:hover {
    border-color: rgba(0, 82, 255, .2) !important;
    box-shadow: var(--saas-shadow-lg) !important;
    transform: translateY(-3px) !important;
}

.card::before,
.card::after { display: none !important; }

.card-header,
.modal-header,
.card-footer,
.modal-footer {
    background: rgba(248, 250, 252, .7) !important;
    border-color: var(--saas-border) !important;
}

.card-header {
    padding: 1.15rem 1.35rem !important;
    font-weight: 650;
}

.card-body { padding: 1.35rem !important; }
.card-footer { padding: 1rem 1.35rem !important; }
.card-title { color: var(--saas-foreground) !important; font-weight: 650 !important; }
.card-value { color: var(--saas-foreground) !important; font-family: "MSMS Inter", sans-serif !important; font-weight: 750 !important; letter-spacing: -.035em !important; }

.dashboard-card {
    position: relative;
    min-height: 132px;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
    box-shadow: var(--saas-shadow-sm) !important;
}

.dashboard-card .card-body {
    padding: 1.1rem 1.2rem !important;
}

.dashboard-card::before {
    content: "" !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block !important;
    width: 3px;
    background: linear-gradient(to bottom, var(--saas-accent), var(--saas-accent-secondary));
}

.dashboard-card::after {
    content: "" !important;
    position: absolute;
    top: -48px;
    right: -45px;
    display: block !important;
    width: 130px;
    height: 130px;
    background: rgba(0, 82, 255, .04);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-card.card-metallic-red::before { background: linear-gradient(to bottom, #dc2626, #fb7185); }
.dashboard-card.card-metallic-red::after { background: rgba(220, 38, 38, .045); }
.dashboard-card.card-metallic-green::before { background: linear-gradient(to bottom, #059669, #34d399); }
.dashboard-card.card-metallic-dark::before { background: linear-gradient(to bottom, #0f172a, #475569); }

.dashboard-card .card-title,
.dashboard-card .card-value,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4,
.dashboard-card h5,
.dashboard-card h6,
.dashboard-card .text-white,
.dashboard-card .text-white-50,
.dashboard-card small,
.dashboard-card strong {
    color: var(--saas-foreground) !important;
    text-shadow: none !important;
}

.dashboard-card .card-title,
.dashboard-card .card-value,
.dashboard-card small,
.dashboard-card i {
    text-shadow: none !important;
}

.dashboard-card .text-white-50,
.dashboard-card small { color: var(--saas-muted-foreground) !important; }

.dashboard-card .card-icon,
.card-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff !important;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--saas-shadow-accent) !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    filter: none !important;
    opacity: 1 !important;
}

.dashboard-card .card-icon::before { line-height: 1 !important; }

a[href="customer.php"] .dashboard-card .d-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem !important;
    row-gap: .25rem !important;
}

a[href="customer.php"] .dashboard-card .d-grid > small:last-child {
    grid-column: 1 / -1;
}

.dashboard-card.card-metallic-red .card-icon { background: linear-gradient(135deg, #dc2626, #fb7185) !important; box-shadow: 0 9px 20px rgba(220, 38, 38, .18) !important; }
.dashboard-card.card-metallic-green .card-icon { background: linear-gradient(135deg, #047857, #34d399) !important; box-shadow: 0 9px 20px rgba(5, 150, 105, .18) !important; }
.dashboard-card.card-metallic-dark .card-icon { background: linear-gradient(135deg, #0f172a, #475569) !important; box-shadow: 0 9px 20px rgba(15, 23, 42, .18) !important; }

.card.card-metallic-blue:not(.dashboard-card),
.card.card-metallic-green:not(.dashboard-card),
.card.card-metallic-red:not(.dashboard-card),
.card.card-metallic-dark:not(.dashboard-card) {
    color: var(--saas-foreground) !important;
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
}

/* Legacy semantic summary cards retain strong color and readable contrast. */
.card.card-metallic-blue:not(.dashboard-card) {
    color: #fff !important;
    background: linear-gradient(135deg, #0759ff, #4d7cff) !important;
    border-color: rgba(0, 82, 255, .3) !important;
}

.card.card-metallic-green:not(.dashboard-card) {
    color: #fff !important;
    background: linear-gradient(135deg, #047857, #10b981) !important;
    border-color: rgba(5, 150, 105, .3) !important;
}

.card.card-metallic-red:not(.dashboard-card) {
    color: #fff !important;
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    border-color: rgba(220, 38, 38, .3) !important;
}

.card.card-metallic-dark:not(.dashboard-card) {
    color: #fff !important;
    background: linear-gradient(135deg, #0f172a, #334155) !important;
    border-color: rgba(51, 65, 85, .42) !important;
}

.card.card-metallic-blue:not(.dashboard-card) .card-title,
.card.card-metallic-green:not(.dashboard-card) .card-title,
.card.card-metallic-red:not(.dashboard-card) .card-title,
.card.card-metallic-dark:not(.dashboard-card) .card-title,
.card.card-metallic-blue:not(.dashboard-card) h1,
.card.card-metallic-blue:not(.dashboard-card) h2,
.card.card-metallic-blue:not(.dashboard-card) h3,
.card.card-metallic-green:not(.dashboard-card) h1,
.card.card-metallic-green:not(.dashboard-card) h2,
.card.card-metallic-green:not(.dashboard-card) h3,
.card.card-metallic-red:not(.dashboard-card) h1,
.card.card-metallic-red:not(.dashboard-card) h2,
.card.card-metallic-red:not(.dashboard-card) h3,
.card.card-metallic-dark:not(.dashboard-card) h1,
.card.card-metallic-dark:not(.dashboard-card) h2,
.card.card-metallic-dark:not(.dashboard-card) h3,
.card.card-metallic-blue:not(.dashboard-card) .text-white,
.card.card-metallic-green:not(.dashboard-card) .text-white,
.card.card-metallic-red:not(.dashboard-card) .text-white,
.card.card-metallic-dark:not(.dashboard-card) .text-white {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.card.card-metallic-blue:not(.dashboard-card) small,
.card.card-metallic-green:not(.dashboard-card) small,
.card.card-metallic-red:not(.dashboard-card) small,
.card.card-metallic-dark:not(.dashboard-card) small,
.card.card-metallic-blue:not(.dashboard-card) .text-white-50,
.card.card-metallic-green:not(.dashboard-card) .text-white-50,
.card.card-metallic-red:not(.dashboard-card) .text-white-50,
.card.card-metallic-dark:not(.dashboard-card) .text-white-50 {
    color: rgba(255, 255, 255, .78) !important;
    opacity: 1 !important;
}

.card.card-metallic-blue:not(.dashboard-card) .avatar,
.card.card-metallic-green:not(.dashboard-card) .avatar,
.card.card-metallic-red:not(.dashboard-card) .avatar,
.card.card-metallic-dark:not(.dashboard-card) .avatar {
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
}

.card.card-metallic-blue:not(.dashboard-card) .avatar i,
.card.card-metallic-green:not(.dashboard-card) .avatar i,
.card.card-metallic-red:not(.dashboard-card) .avatar i,
.card.card-metallic-dark:not(.dashboard-card) .avatar i { color: #fff !important; }

.dashboard-card.card-metallic-dark .list-group-metallic .list-group-item {
    color: #334155 !important;
    background: transparent !important;
    border-color: var(--saas-border) !important;
}

.dashboard-card.card-metallic-dark .list-group-metallic .text-muted {
    color: var(--saas-muted-foreground) !important;
}

/* Buttons and action controls */
.btn,
.btn-modern,
.btn-glass,
button,
input[type="button"],
input[type="submit"] {
    min-height: 42px;
    border-radius: 10px !important;
    font-family: "MSMS Inter", Inter, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.005em;
    transition: transform var(--saas-ease), box-shadow var(--saas-ease), border-color var(--saas-ease), background-color var(--saas-ease), color var(--saas-ease) !important;
}

.btn-sm { min-height: 36px; border-radius: 8px !important; }
.btn-lg { min-height: 50px; border-radius: 12px !important; }

.btn:hover,
.btn-modern:hover,
.btn-glass:hover {
    transform: translateY(-1px) !important;
}

.btn:active,
.btn-modern:active,
.btn-glass:active {
    transform: scale(.98) !important;
}

.btn-primary,
.btn-modern.btn-primary,
.btn-glass-primary,
button.btn-primary,
input.btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border-color: transparent !important;
    box-shadow: 0 5px 14px rgba(0, 82, 255, .18) !important;
}

.btn-primary:hover,
.btn-modern.btn-primary:hover,
.btn-glass-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0048e3, #3f6cf1) !important;
    box-shadow: var(--saas-shadow-accent) !important;
    filter: brightness(1.04);
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    color: var(--saas-foreground) !important;
    background: #fff !important;
    border: 1px solid var(--saas-border-strong) !important;
    box-shadow: var(--saas-shadow-sm) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    color: var(--saas-accent) !important;
    background: var(--saas-accent-soft) !important;
    border-color: rgba(0, 82, 255, .34) !important;
    box-shadow: 0 5px 14px rgba(0, 82, 255, .09) !important;
}

.btn-success { color: #fff !important; background: linear-gradient(135deg, #047857, #10b981) !important; border-color: transparent !important; }
.btn-warning { color: #fff !important; background: linear-gradient(135deg, #b45309, #f59e0b) !important; border-color: transparent !important; }
.btn-info { color: #fff !important; background: linear-gradient(135deg, #0369a1, #38bdf8) !important; border-color: transparent !important; }
.btn-danger { color: #fff !important; background: linear-gradient(135deg, #b91c1c, #ef4444) !important; border-color: transparent !important; }
.btn-link { min-height: auto; border-radius: 5px !important; box-shadow: none !important; }
.btn-close { min-height: 32px; background-color: var(--saas-muted) !important; border: 1px solid var(--saas-border) !important; border-radius: 8px !important; box-shadow: none !important; }

.btn-glass {
    color: var(--saas-foreground) !important;
    background: rgba(255, 255, 255, .085) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
}

.welcome-section .btn-glass { color: #fff !important; }
.welcome-section .btn-glass:hover { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .25) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .12) !important; }

/* Forms */
label,
.form-label { color: #334155 !important; font-weight: 600 !important; }

.form-control,
.form-select,
.custom-select,
.form-control-modern,
.input-group-text,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    min-height: 44px;
    color: var(--saas-foreground) !important;
    background-color: #fff !important;
    border: 1px solid var(--saas-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025) !important;
    font-family: "MSMS Inter", Inter, sans-serif !important;
    transition: border-color var(--saas-ease), box-shadow var(--saas-ease), background-color var(--saas-ease) !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.form-control-modern:focus,
input:focus,
select:focus,
textarea:focus {
    color: var(--saas-foreground) !important;
    background-color: #fff !important;
    border-color: rgba(0, 82, 255, .65) !important;
    box-shadow: 0 0 0 4px rgba(0, 82, 255, .1) !important;
    outline: 0 !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: #94a3b8 !important; opacity: 1; }

.input-group-text { min-width: 44px; justify-content: center; color: var(--saas-muted-foreground) !important; background: #f8fafc !important; }
.form-check-input { border-color: var(--saas-border-strong) !important; box-shadow: none !important; }
.form-check-input:checked { background-color: var(--saas-accent) !important; border-color: var(--saas-accent) !important; }
.form-check-input:focus { border-color: var(--saas-accent) !important; box-shadow: 0 0 0 4px rgba(0, 82, 255, .1) !important; }

/* Tables, tabs and pagination */
.table-responsive {
    overflow: auto;
    border-radius: 0 0 var(--saas-radius-lg) var(--saas-radius-lg);
}

.table,
.table-modern,
.table-metallic {
    margin-bottom: 0;
    color: var(--saas-foreground) !important;
    background: #fff !important;
    border-color: var(--saas-border) !important;
}

.table thead th,
.table-modern thead th,
.table-metallic thead th {
    padding: .82rem 1rem !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: var(--saas-border) !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.table tbody td,
.table-modern tbody td,
.table-metallic td {
    padding: .9rem 1rem !important;
    color: #334155 !important;
    background: #fff !important;
    border-color: var(--saas-border) !important;
    vertical-align: middle;
}

.table-hover tbody tr:hover > *,
.table-modern tbody tr:hover,
.table-metallic tr:hover td { background: #f8fbff !important; }

.nav-tabs {
    gap: .35rem;
    padding: .35rem;
    background: var(--saas-muted) !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 11px !important;
}

.nav-tabs .nav-link {
    min-height: 40px;
    color: var(--saas-muted-foreground) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600;
}

.nav-tabs .nav-link:hover { color: var(--saas-foreground) !important; }
.nav-tabs .nav-link.active { color: var(--saas-accent) !important; background: #fff !important; box-shadow: var(--saas-shadow-sm) !important; }

.page-link,
.pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    margin: 0 .14rem;
    display: grid;
    place-items: center;
    color: var(--saas-muted-foreground) !important;
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.page-item.active .page-link,
.pagination .active > .page-link { color: #fff !important; background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important; border-color: transparent !important; box-shadow: 0 5px 14px rgba(0, 82, 255, .2) !important; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--saas-muted-foreground) !important; }

.dropdown-menu {
    color: var(--saas-foreground) !important;
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: var(--saas-radius-md) !important;
    box-shadow: var(--saas-shadow-lg) !important;
}

.dropdown-item {
    min-height: 40px;
    color: #334155 !important;
    border-radius: 8px !important;
}

.dropdown-item:hover,
.dropdown-item:focus { color: var(--saas-accent) !important; background: var(--saas-accent-soft) !important; }

.badge {
    padding: .42em .68em;
    border: 1px solid transparent;
    border-radius: 999px !important;
    font-weight: 650;
    letter-spacing: .01em;
}

.bg-label-primary { color: #0044d4 !important; background: var(--saas-accent-soft) !important; border-color: #c7d7fe !important; }
.bg-label-success { color: #047857 !important; background: var(--saas-success-soft) !important; border-color: #a7f3d0 !important; }
.bg-label-warning { color: #b45309 !important; background: var(--saas-warning-soft) !important; border-color: #fde68a !important; }
.bg-label-danger { color: #b91c1c !important; background: var(--saas-danger-soft) !important; border-color: #fecaca !important; }
.bg-label-info { color: #0369a1 !important; background: #f0f9ff !important; border-color: #bae6fd !important; }

/* Feedback, overlays and dialogs */
.alert {
    color: #334155;
    background: #fff;
    border: 1px solid var(--saas-border);
    border-left-width: 4px;
    border-radius: 10px !important;
    box-shadow: var(--saas-shadow-sm);
}

.alert-success { color: #065f46 !important; background: var(--saas-success-soft) !important; border-color: #a7f3d0 !important; border-left-color: var(--saas-success) !important; }
.alert-warning { color: #92400e !important; background: var(--saas-warning-soft) !important; border-color: #fde68a !important; border-left-color: var(--saas-warning) !important; }
.alert-danger { color: #991b1b !important; background: var(--saas-danger-soft) !important; border-color: #fecaca !important; border-left-color: var(--saas-danger) !important; }
.alert-info { color: #075985 !important; background: #f0f9ff !important; border-color: #bae6fd !important; border-left-color: var(--saas-info) !important; }

body.modal-open { overflow: hidden !important; }
.modal { z-index: 1090 !important; }
.modal-backdrop { z-index: 1080 !important; background: #0f172a !important; }
.modal-backdrop.show { opacity: .48 !important; backdrop-filter: none !important; }
.modal-dialog { margin: 1.25rem auto; }
.modal-content { overflow: hidden; box-shadow: 0 26px 68px rgba(15, 23, 42, .2) !important; }
.modal-header { padding: 1.15rem 1.35rem !important; }
.modal-body { padding: 1.35rem !important; color: #334155 !important; }
.modal-footer { padding: 1rem 1.35rem !important; }

.tooltip-inner { padding: .45rem .65rem !important; color: #fff !important; background: var(--saas-foreground) !important; border-radius: 7px !important; box-shadow: var(--saas-shadow-md) !important; font-size: .72rem; }
.progress { overflow: hidden; background: var(--saas-muted) !important; border-radius: 999px !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06); }
.progress-bar { background: linear-gradient(90deg, var(--saas-accent), var(--saas-accent-secondary)) !important; }

/* Footer */
.content-footer,
.footer,
.glass-footer {
    background: rgba(255, 255, 255, .92) !important;
    border-top: 1px solid var(--saas-border) !important;
    box-shadow: 0 -8px 26px rgba(15, 23, 42, .035) !important;
    backdrop-filter: blur(16px) !important;
}

.layout-page > .content-wrapper {
    padding-bottom: 0 !important;
}

.content-footer.glass-footer,
.footer.glass-footer {
    position: static !important;
    inset: auto !important;
    width: calc(100% - 4rem) !important;
    margin: 1.5rem 2rem 0 !important;
    border-radius: var(--saas-radius-lg) var(--saas-radius-lg) 0 0 !important;
    z-index: auto !important;
}

.footer-text { color: var(--saas-muted-foreground) !important; font-weight: 500 !important; }
.footer-text a { color: var(--saas-accent) !important; }

/* Authentication page. Strong selectors intentionally win over its legacy inline CSS. */
body > .left-panel {
    color: #fff !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(77, 124, 255, .3), transparent 23rem),
        radial-gradient(circle at 85% 90%, rgba(0, 82, 255, .16), transparent 18rem),
        var(--saas-foreground) !important;
}

body > .left-panel::before {
    opacity: .045 !important;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

body > .left-panel .brand-logo {
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(0, 82, 255, .32) !important;
}

body > .left-panel .brand-name {
    color: #fff !important;
    font-family: Calistoga, Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -.025em !important;
}

body > .left-panel .brand-sub { color: rgba(226, 232, 240, .7) !important; }

body > .left-panel .feature-item {
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body > .left-panel .feature-icon {
    background: linear-gradient(135deg, rgba(0, 82, 255, .42), rgba(77, 124, 255, .22)) !important;
    border: 1px solid rgba(147, 197, 253, .16) !important;
    border-radius: 10px !important;
}

body > .left-panel .feature-text,
body > .left-panel .feature-text strong { color: #fff !important; }
body > .left-panel .feature-text { color: rgba(226, 232, 240, .65) !important; }

body > .right-panel { background: var(--saas-background) !important; }

body > .right-panel .login-card {
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--saas-shadow-xl) !important;
}

body > .right-panel .login-card::before { background: linear-gradient(90deg, var(--saas-accent), var(--saas-accent-secondary)) !important; }
body > .right-panel .card-header { background: transparent !important; border: 0 !important; }
body > .right-panel .card-header h2 { color: var(--saas-foreground) !important; }
body > .right-panel .card-header p { color: var(--saas-muted-foreground) !important; }
body > .right-panel .input-wrap { background: #fff !important; border: 1px solid var(--saas-border-strong) !important; border-radius: 10px !important; box-shadow: none !important; }
body > .right-panel .input-wrap:focus-within { border-color: var(--saas-accent) !important; box-shadow: 0 0 0 4px rgba(0, 82, 255, .1) !important; }
body > .right-panel .input-wrap .form-control { border: 0 !important; box-shadow: none !important; }
body > .right-panel .input-icon { color: var(--saas-accent) !important; }
body > .right-panel button.btn-primary { background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important; box-shadow: var(--saas-shadow-accent) !important; }

/* ========================================================================== 
   Professional workspace architecture
   Shared structural refinement for authenticated SaaS pages. These rules are
   intentionally isolated from the standalone Mobile Sale workspace.
   ========================================================================== */

html[data-design-theme="saas"] body.msms-enhanced-shell {
    background:
        radial-gradient(circle at 72% -8%, rgba(77, 124, 255, .09), transparent 30rem),
        linear-gradient(180deg, #f7f9fd 0, #fafafa 28rem) !important;
}

body.msms-enhanced-shell .container-p-y {
    width: 100%;
    max-width: 1760px;
    margin-inline: auto;
    padding-top: 1.75rem !important;
    padding-bottom: 2.25rem !important;
}

/* Consistent page landmark generated from each page's existing heading. */
.workspace-page-header,
.workspace-page-title {
    position: relative;
    overflow: hidden;
    color: var(--saas-foreground) !important;
    background:
        radial-gradient(circle at 92% 15%, rgba(77, 124, 255, .11), transparent 13rem),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .065), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.workspace-page-header {
    min-height: 104px;
    padding: 1.35rem 1.55rem !important;
    gap: 1rem;
}

.workspace-page-title {
    min-height: 88px;
    margin-bottom: 1.5rem !important;
    padding: 1.45rem 1.55rem !important;
    display: flex;
    align-items: center;
}

.workspace-page-header::before,
.workspace-page-title::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--saas-accent), var(--saas-accent-secondary));
}

.workspace-page-header::after,
.workspace-page-title::after {
    content: "";
    position: absolute;
    top: -48px;
    right: -24px;
    width: 138px;
    height: 138px;
    border: 1px solid rgba(0, 82, 255, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(0, 82, 255, .025);
    pointer-events: none;
}

.workspace-page-header > *,
.workspace-page-title > * { position: relative; z-index: 1; }

.workspace-page-header h1,
.workspace-page-header h2,
.workspace-page-header h3,
.workspace-page-header h4,
.workspace-page-title {
    color: var(--saas-foreground) !important;
    font-weight: 760 !important;
    letter-spacing: -.035em !important;
}

.workspace-page-header h4,
.workspace-page-title { font-size: clamp(1.35rem, 2vw, 1.75rem) !important; }
.workspace-page-header p { color: var(--saas-muted-foreground) !important; font-weight: 450 !important; }
.workspace-page-header .text-muted,
.workspace-page-title .text-muted,
.workspace-page-header .text-dark,
.workspace-page-title .text-dark {
    color: var(--saas-accent) !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .72em;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* A denser, premium command bar. */
.layout-navbar,
.navbar.glass-navbar {
    min-height: 68px;
    overflow: visible;
    background: rgba(255, 255, 255, .9) !important;
    border-color: rgba(203, 213, 225, .82) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .075), inset 0 1px 0 #fff !important;
}

.layout-navbar::before {
    content: "";
    position: absolute;
    inset: -1px 18px auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--saas-accent), var(--saas-accent-secondary), transparent);
    border-radius: 999px;
    opacity: .72;
    pointer-events: none;
}

#navbar-collapse { gap: 1rem; }

.layout-navbar a.btn-primary[href="mobile_sales.php"] {
    min-height: 42px;
    padding-inline: 1rem !important;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    border: 1px solid rgba(0, 82, 255, .18) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(0, 82, 255, .2) !important;
}

.layout-navbar a.btn-primary[href="mobile_sales.php"]:hover {
    box-shadow: 0 12px 24px rgba(0, 82, 255, .28) !important;
}

.glass-search,
.navbar .search-container {
    min-width: min(26vw, 340px);
    min-height: 44px;
    background: rgba(248, 250, 252, .86) !important;
}

.sms-toggle-nav > div {
    min-height: 42px;
    background: #f8fafc !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 11px !important;
}

/* Navigation with clearer hierarchy, stronger alignment and calmer depth. */
#layout-menu.msms-sidebar {
    background:
        radial-gradient(circle at 8% 0, rgba(77, 124, 255, .24), transparent 17rem),
        linear-gradient(180deg, #111c35 0, #0d1629 44%, #0b1324 100%) !important;
    border-right: 1px solid rgba(96, 165, 250, .16) !important;
    box-shadow: 18px 0 48px rgba(15, 23, 42, .14) !important;
}

.msms-sidebar .sidebar-brand-shell {
    min-height: 88px;
    padding-inline: 1rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent) !important;
}

.msms-sidebar .sidebar-brand-logo-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.msms-sidebar .sidebar-quick-panel {
    margin: .8rem .85rem 1rem !important;
    padding: .78rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)) !important;
    border-color: rgba(147, 197, 253, .12) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.msms-sidebar .sidebar-quick-action,
.msms-sidebar .sidebar-quick-action:nth-child(2) {
    min-height: 43px;
    border-radius: 10px !important;
}

.msms-sidebar .sidebar-section-label { margin-top: .65rem !important; }

.msms-sidebar .sidebar-primary-link {
    min-height: 52px !important;
    margin-block: .08rem;
    border-radius: 12px !important;
}

.msms-sidebar .sidebar-menu-icon {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px;
    border-radius: 10px !important;
}

.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link,
.msms-sidebar .sidebar-navigation > .menu-item.active.open > .sidebar-primary-link {
    background: linear-gradient(135deg, #0759ff, #4d7cff) !important;
    box-shadow: 0 12px 26px rgba(0, 82, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.msms-sidebar .sidebar-account-dock {
    margin: .7rem .8rem .85rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035)) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

/* Standard content surfaces: structured headers, quiet bodies, deliberate depth. */
.card,
.card-modern,
.content-card {
    border-color: rgba(203, 213, 225, .8) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.card:hover,
.card.hover-lift:hover {
    border-color: rgba(0, 82, 255, .18) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .075) !important;
    transform: none !important;
}

a:hover > .card,
a .card:hover,
.dashboard-card:hover {
    border-color: rgba(0, 82, 255, .28) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .09), 0 5px 15px rgba(0, 82, 255, .06) !important;
    transform: translateY(-3px) !important;
}

.card-header,
.modal-header {
    min-height: 62px;
    padding: 1rem 1.3rem !important;
    align-items: center;
    background: linear-gradient(180deg, #fff, #fbfcfe) !important;
    border-bottom: 1px solid var(--saas-border) !important;
}

h5.card-header,
h6.card-header { display: flex; align-items: center; gap: .55rem; }

.card-header h5,
.card-header h6,
h5.card-header,
h6.card-header {
    color: #172033 !important;
    font-weight: 700 !important;
    letter-spacing: -.018em !important;
}

.card-header h5 > i:first-child,
.card-header h6 > i:first-child,
h5.card-header > i:first-child,
h6.card-header > i:first-child {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--saas-accent) !important;
    background: var(--saas-accent-soft) !important;
    border: 1px solid rgba(0, 82, 255, .12) !important;
    border-radius: 10px;
    font-size: 1rem !important;
}

.card-body { color: #334155 !important; }

/* Dashboard information architecture. */
.welcome-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    min-height: 184px;
    align-items: center;
    background:
        radial-gradient(circle at 78% 2%, rgba(77, 124, 255, .45), transparent 22rem),
        radial-gradient(circle at 8% 120%, rgba(0, 82, 255, .18), transparent 20rem),
        linear-gradient(135deg, #0b1428, #14213d 58%, #172a57) !important;
    border-color: rgba(147, 197, 253, .14) !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.welcome-content h3 {
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    letter-spacing: -.035em !important;
}

.welcome-content p { max-width: 42rem; color: rgba(226, 232, 240, .76) !important; }

.quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(126px, 1fr));
    gap: .75rem !important;
}

.quick-actions-grid .btn-glass {
    min-height: 76px;
    padding: .85rem 1rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .45rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055)) !important;
    border: 1px solid rgba(191, 219, 254, .16) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

.quick-actions-grid .btn-glass:hover {
    background: linear-gradient(145deg, rgba(77, 124, 255, .3), rgba(255, 255, 255, .09)) !important;
    border-color: rgba(147, 197, 253, .32) !important;
}

.quick-actions-grid .btn-glass i { font-size: 1.35rem !important; }

.dashboard-section-title {
    width: 100% !important;
    min-height: 34px;
    margin: 1.75rem 0 1rem !important;
    padding: 0 !important;
    gap: .55rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.dashboard-section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary));
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(0, 82, 255, .09);
}

.dashboard-section-title::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: .45rem;
    background: linear-gradient(90deg, rgba(0, 82, 255, .2), rgba(226, 232, 240, .72), transparent);
}

.dashboard-section-title + .row,
.dashboard-cost-grid { --bs-gutter-x: 1.15rem; }

.dashboard-card {
    min-height: 146px;
    border-radius: 17px !important;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .055), inset 0 1px 0 #fff !important;
}

.dashboard-card .card-body {
    position: relative;
    z-index: 2;
    padding: 1.2rem 1.25rem !important;
}

.dashboard-card::before {
    inset: 0 0 auto !important;
    width: auto !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--saas-accent), var(--saas-accent-secondary), rgba(77, 124, 255, .2)) !important;
}

.dashboard-card::after {
    top: -58px !important;
    right: -42px !important;
    width: 150px !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(0, 82, 255, .085), rgba(0, 82, 255, .018) 58%, transparent 60%) !important;
    border: 1px solid rgba(0, 82, 255, .05);
}

.dashboard-card.card-metallic-red::before { background: linear-gradient(90deg, #dc2626, #fb7185, rgba(251, 113, 133, .18)) !important; }
.dashboard-card.card-metallic-green::before { background: linear-gradient(90deg, #059669, #34d399, rgba(52, 211, 153, .18)) !important; }
.dashboard-card.card-metallic-dark::before { background: linear-gradient(90deg, #0f172a, #64748b, rgba(100, 116, 139, .16)) !important; }

.dashboard-card .card-title {
    margin-bottom: .45rem !important;
    color: #64748b !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: .67rem !important;
    font-weight: 650 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
}

.dashboard-card .card-value {
    margin-bottom: .35rem !important;
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
    line-height: 1.08 !important;
}

.dashboard-card .card-icon,
.card-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(0, 82, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

a[href="customer.php"] .dashboard-card .d-grid {
    margin-top: .15rem;
    row-gap: .2rem !important;
}

a[href="customer.php"] .dashboard-card .d-grid small {
    min-width: 0;
    padding: .15rem .32rem;
    gap: .35rem;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .8);
    border-radius: 6px;
    font-size: .66rem !important;
    line-height: 1.25;
}

/* Dense data tools and modern content controls. */
.nav-pills {
    padding: .3rem;
    gap: .25rem;
    background: #f1f5f9;
    border: 1px solid var(--saas-border);
    border-radius: 12px;
}

.nav-pills .nav-link {
    min-height: 38px;
    border-radius: 9px !important;
    font-weight: 600 !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-secondary)) !important;
    box-shadow: 0 7px 16px rgba(0, 82, 255, .19) !important;
}

.tab-content {
    background: #fff !important;
    border: 1px solid var(--saas-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}

.input-group,
.input-group-merge { border-radius: 11px; }
.input-group-text { color: #64748b !important; background: #f8fafc !important; border-color: var(--saas-border-strong) !important; }

.table-responsive {
    scrollbar-color: rgba(100, 116, 139, .42) transparent;
    scrollbar-width: thin;
}

.table thead th,
.table-modern thead th,
.table-metallic thead th {
    font-size: .67rem !important;
    letter-spacing: .065em !important;
}

.table tbody tr { transition: background-color var(--saas-ease); }

/* Footer as a deliberate final landmark instead of an overlay. */
.content-footer.glass-footer,
.footer.glass-footer {
    position: relative !important;
    overflow: hidden;
    min-height: 62px;
    background:
        linear-gradient(90deg, rgba(0, 82, 255, .035), transparent 30%, rgba(77, 124, 255, .045)),
        #fff !important;
    border-color: rgba(203, 213, 225, .82) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 26px rgba(15, 23, 42, .045) !important;
}

.content-footer.glass-footer::before,
.footer.glass-footer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--saas-accent), var(--saas-accent-secondary));
}

.footer-text { font-size: .78rem !important; letter-spacing: .025em !important; }
.footer-text a {
    padding: .25rem .48rem;
    background: var(--saas-accent-soft);
    border-radius: 6px;
}

/* Bootstrap semantic surfaces must remain semantic after the global card reset. */
.card.bg-primary,
.card.bg-info,
.card.bg-success,
.card.bg-danger,
.card.bg-dark {
    color: #fff !important;
    border-color: transparent !important;
}
.card.bg-primary { background: linear-gradient(135deg, #0759ff, #4d7cff) !important; }
.card.bg-info { background: linear-gradient(135deg, #0369a1, #0ea5e9) !important; }
.card.bg-success { background: linear-gradient(135deg, #047857, #10b981) !important; }
.card.bg-danger { background: linear-gradient(135deg, #b91c1c, #ef4444) !important; }
.card.bg-dark { background: linear-gradient(135deg, #0f172a, #334155) !important; }
.card.bg-warning { color: #fff !important; background: linear-gradient(135deg, #b45309, #f59e0b) !important; border-color: transparent !important; }

.card.bg-primary :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small),
.card.bg-info :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small),
.card.bg-success :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small),
.card.bg-danger :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small),
.card.bg-warning :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small),
.card.bg-dark :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-white-50, small) {
    color: #fff !important;
    text-shadow: none !important;
}

.card.bg-primary :is(.text-white-50, small),
.card.bg-info :is(.text-white-50, small),
.card.bg-success :is(.text-white-50, small),
.card.bg-danger :is(.text-white-50, small),
.card.bg-warning :is(.text-white-50, small),
.card.bg-dark :is(.text-white-50, small) { color: rgba(255, 255, 255, .8) !important; }

.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-dark {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .16) !important;
}
.modal-header.bg-primary { background: linear-gradient(135deg, #0759ff, #4d7cff) !important; }
.modal-header.bg-info { background: linear-gradient(135deg, #0369a1, #0ea5e9) !important; }
.modal-header.bg-success { background: linear-gradient(135deg, #047857, #10b981) !important; }
.modal-header.bg-danger { background: linear-gradient(135deg, #b91c1c, #ef4444) !important; }
.modal-header.bg-dark { background: linear-gradient(135deg, #0f172a, #334155) !important; }
.modal-header.bg-primary :is(.modal-title, h1, h2, h3, h4, h5, h6, i),
.modal-header.bg-info :is(.modal-title, h1, h2, h3, h4, h5, h6, i),
.modal-header.bg-success :is(.modal-title, h1, h2, h3, h4, h5, h6, i),
.modal-header.bg-danger :is(.modal-title, h1, h2, h3, h4, h5, h6, i),
.modal-header.bg-dark :is(.modal-title, h1, h2, h3, h4, h5, h6, i) { color: #fff !important; }

body > .modal { z-index: 1090 !important; }
body > .modal-backdrop { z-index: 1080 !important; }

.toast.bg-primary,
.toast.bg-info,
.toast.bg-success,
.toast.bg-danger,
.toast.bg-dark {
    color: #fff !important;
    border-color: transparent !important;
}
.toast.bg-primary { background: #0759ff !important; }
.toast.bg-info { background: #0284c7 !important; }
.toast.bg-success { background: #059669 !important; }
.toast.bg-danger { background: #dc2626 !important; }
.toast.bg-dark { background: #0f172a !important; }
.toast.bg-primary :is(.toast-body, i, .text-white),
.toast.bg-info :is(.toast-body, i, .text-white),
.toast.bg-success :is(.toast-body, i, .text-white),
.toast.bg-danger :is(.toast-body, i, .text-white),
.toast.bg-dark :is(.toast-body, i, .text-white) { color: #fff !important; }

/* Responsive shell */
@media (min-width: 1200px) {
    .layout-navbar { margin-top: 1rem !important; }
    .container-fluid.container-p-y { padding-right: clamp(1.25rem, 2.5vw, 2.5rem) !important; padding-left: clamp(1.25rem, 2.5vw, 2.5rem) !important; }
}

@media (max-width: 1199.98px) {
    .layout-menu {
        box-shadow: 22px 0 55px rgba(15, 23, 42, .28) !important;
    }

    #layout-menu.msms-sidebar {
        box-shadow: none !important;
    }

    #layout-menu.msms-sidebar::before { display: none !important; }

    html.layout-menu-expanded #layout-menu.msms-sidebar {
        box-shadow: 22px 0 55px rgba(15, 23, 42, .28) !important;
    }

    .layout-navbar { margin: .75rem !important; border-radius: 13px !important; }
}

@media (max-width: 767.98px) {
    :root { --saas-footer-clearance: 0; }
    .container-p-y { padding-top: 1.15rem !important; padding-right: .85rem !important; padding-left: .85rem !important; }
    .workspace-page-header { min-height: 0; padding: 1.15rem !important; align-items: stretch !important; }
    .workspace-page-title { min-height: 74px; padding: 1.15rem 1.2rem !important; }
    .workspace-page-header::after,
    .workspace-page-title::after { display: none; }
    .welcome-section { grid-template-columns: 1fr !important; gap: 1.2rem; padding: 1.35rem !important; border-radius: 16px !important; }
    .welcome-section::after { display: none; }
    .welcome-content h3 { font-size: 1.65rem !important; }
    .quick-actions-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .55rem !important; }
    .quick-actions-grid .btn-glass { width: 100%; justify-content: center; }
    .quick-actions-grid .btn-glass span { font-size: .68rem; line-height: 1.3; }
    .card-body { padding: 1.1rem !important; }
    .card-header { padding: 1rem 1.1rem !important; }
    .dashboard-card { min-height: 126px; }
    .layout-navbar { margin: .55rem !important; padding-right: .7rem !important; padding-left: .7rem !important; }
    #navbar-collapse > .navbar-nav:first-child { min-width: 0; flex: 1 1 auto; }
    #navbar-collapse .search-container { min-width: 0; max-width: min(50vw, 220px); }
    .settlement-warning-callout { display: none !important; }
    .modal-dialog { margin: .65rem !important; }
    .modal-content { border-radius: 14px !important; }
    .content-footer.glass-footer,
    .footer.glass-footer { width: calc(100% - 1.5rem) !important; margin: 1rem .75rem 0 !important; }
    a[href="customer.php"] .dashboard-card .d-grid { grid-template-columns: 1fr; }
    a[href="customer.php"] .dashboard-card .d-grid > small:last-child { grid-column: auto; }
}

@media (max-width: 575.98px) {
    .dashboard-section-title { font-size: .6rem !important; letter-spacing: .06em !important; }
    .dashboard-card .card-value { font-size: 1.35rem !important; }
    .dashboard-card .card-icon { width: 40px; height: 40px; font-size: 1.15rem !important; }
    .table thead th,
    .table tbody td { padding-right: .72rem !important; padding-left: .72rem !important; }
}

@keyframes saas-slow-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/*
 * SaaS application shell geometry.
 *
 * The navigation sidebar intentionally uses a 300px desktop rail. Bootstrap's
 * container-xxl cap and the old floating-footer rules were constraining the
 * remaining workspace a second time. Keep every shell landmark on the same
 * fluid grid and let the footer follow the page content in normal flow.
 */
html[data-design-theme="saas"],
html[data-design-theme="mixed"] {
    --msms-shell-gutter: clamp(1.15rem, 2vw, 2.25rem);
    --msms-fixed-footer-clearance: 104px;
}

html[data-design-theme="saas"] body,
html[data-design-theme="mixed"] body {
    overflow-x: clip !important;
}

html[data-design-theme="saas"] .layout-wrapper,
html[data-design-theme="saas"] .layout-container,
html[data-design-theme="saas"] .layout-page,
html[data-design-theme="saas"] .content-wrapper,
html[data-design-theme="mixed"] .layout-wrapper,
html[data-design-theme="mixed"] .layout-container,
html[data-design-theme="mixed"] .layout-page,
html[data-design-theme="mixed"] .content-wrapper {
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html[data-design-theme="saas"] .layout-page,
html[data-design-theme="mixed"] .layout-page {
    width: 100% !important;
    inline-size: 100% !important;
}

html[data-design-theme="saas"] .layout-page > .layout-navbar.container-xxl,
html[data-design-theme="mixed"] .layout-page > .layout-navbar.container-xxl {
    width: auto !important;
    inline-size: auto !important;
    max-width: none !important;
    max-inline-size: none !important;
    margin: 1rem var(--msms-shell-gutter) 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

html[data-design-theme="saas"] .layout-page > .content-wrapper,
html[data-design-theme="mixed"] .layout-page > .content-wrapper {
    width: 100% !important;
    inline-size: 100% !important;
    padding-bottom: var(--msms-fixed-footer-clearance) !important;
    overflow: visible !important;
}

html[data-design-theme="saas"] .layout-page > .content-wrapper > .container,
html[data-design-theme="saas"] .layout-page > .content-wrapper > .container-fluid,
html[data-design-theme="saas"] .layout-page > .content-wrapper > .container-xxl,
html[data-design-theme="mixed"] .layout-page > .content-wrapper > .container,
html[data-design-theme="mixed"] .layout-page > .content-wrapper > .container-fluid,
html[data-design-theme="mixed"] .layout-page > .content-wrapper > .container-xxl {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

html[data-design-theme="saas"] .layout-page > .content-wrapper > .container-p-y,
html[data-design-theme="mixed"] .layout-page > .content-wrapper > .container-p-y {
    padding-right: var(--msms-shell-gutter) !important;
    padding-left: var(--msms-shell-gutter) !important;
}

html[data-design-theme="saas"] .content-footer.glass-footer,
html[data-design-theme="saas"] .footer.glass-footer,
html[data-design-theme="mixed"] .content-footer.glass-footer,
html[data-design-theme="mixed"] .footer.glass-footer {
    position: fixed !important;
    inset: auto var(--msms-shell-gutter) 0 var(--msms-shell-gutter) !important;
    width: auto !important;
    inline-size: auto !important;
    max-width: none !important;
    max-inline-size: none !important;
    min-height: 64px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    z-index: 1035 !important;
}

html[data-design-theme="saas"] .glass-footer .container-xxl,
html[data-design-theme="mixed"] .glass-footer .container-xxl {
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: .9rem 1.25rem !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

html[data-design-theme="saas"] .glass-footer .footer-text,
html[data-design-theme="mixed"] .glass-footer .footer-text {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    line-height: 1.45;
    text-align: center;
}

@media (min-width: 1200px) {
    html[data-design-theme="saas"].layout-menu-fixed:not(.layout-menu-collapsed) .content-footer.glass-footer,
    html[data-design-theme="saas"].layout-menu-fixed:not(.layout-menu-collapsed) .footer.glass-footer,
    html[data-design-theme="mixed"].layout-menu-fixed:not(.layout-menu-collapsed) .content-footer.glass-footer,
    html[data-design-theme="mixed"].layout-menu-fixed:not(.layout-menu-collapsed) .footer.glass-footer {
        left: calc(var(--bs-menu-width) + var(--msms-shell-gutter)) !important;
    }

    html[data-design-theme="saas"].layout-menu-fixed.layout-menu-collapsed .content-footer.glass-footer,
    html[data-design-theme="saas"].layout-menu-fixed.layout-menu-collapsed .footer.glass-footer,
    html[data-design-theme="mixed"].layout-menu-fixed.layout-menu-collapsed .content-footer.glass-footer,
    html[data-design-theme="mixed"].layout-menu-fixed.layout-menu-collapsed .footer.glass-footer {
        left: calc(var(--bs-menu-collapsed-width, 5.25rem) + var(--msms-shell-gutter)) !important;
    }
}

@media (max-width: 1199.98px) {
    html[data-design-theme="saas"],
    html[data-design-theme="mixed"] {
        --msms-shell-gutter: 1rem;
    }

    html[data-design-theme="saas"] .layout-page > .layout-navbar.container-xxl,
    html[data-design-theme="mixed"] .layout-page > .layout-navbar.container-xxl {
        margin-top: .75rem !important;
    }
}

@media (max-width: 767.98px) {
    html[data-design-theme="saas"],
    html[data-design-theme="mixed"] {
        --msms-shell-gutter: .75rem;
        --msms-fixed-footer-clearance: 92px;
    }

    html[data-design-theme="saas"] .layout-page > .layout-navbar.container-xxl,
    html[data-design-theme="mixed"] .layout-page > .layout-navbar.container-xxl {
        margin-top: .55rem !important;
    }

    html[data-design-theme="saas"] .content-footer.glass-footer,
    html[data-design-theme="saas"] .footer.glass-footer,
    html[data-design-theme="mixed"] .content-footer.glass-footer,
    html[data-design-theme="mixed"] .footer.glass-footer {
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
    }

    html[data-design-theme="saas"] .glass-footer .container-xxl,
    html[data-design-theme="mixed"] .glass-footer .container-xxl {
        min-height: 0 !important;
        padding: .8rem 1rem !important;
    }
}

@media print {
    body { color: #000 !important; background: #fff !important; background-image: none !important; }
    .layout-menu,
    .layout-navbar,
    .content-footer,
    .btn,
    .no-print { display: none !important; }
    .card,
    .modal-content { border: 1px solid #cbd5e1 !important; box-shadow: none !important; }
}