/**
 * MSMS Playful + SaaS hybrid
 * Loaded after both source themes. It keeps SaaS structure and typography while
 * restoring selected geometric outlines, lively color and tactile movement.
 */

:root {
    --mix-ink: #13213a;
    --mix-blue: #0052ff;
    --mix-blue-2: #4d7cff;
    --mix-pink: #f472b6;
    --mix-yellow: #fbbf24;
    --mix-green: #34d399;
    --mix-paper: #fffdf8;
    --mix-lavender: #f5f3ff;
    --mix-border: #dce4f0;
    --mix-shadow: 4px 4px 0 rgba(19, 33, 58, .12);
    --mix-shadow-strong: 5px 5px 0 var(--mix-ink);
    --mix-pop: 240ms cubic-bezier(.34, 1.56, .64, 1);

    --saas-background: #fffdf8;
    --saas-foreground: #13213a;
    --saas-border: #dce4f0;
    --saas-muted: #f5f3ff;
    --saas-shadow-sm: 2px 2px 0 rgba(19, 33, 58, .09);
    --saas-shadow-md: var(--mix-shadow);
    --saas-shadow-lg: 8px 10px 0 rgba(19, 33, 58, .08), 0 18px 35px rgba(15, 23, 42, .07);

    --background-color: #fffdf8;
    --text-color: #13213a;
    --border-color: #dce4f0;
    --bg: #fffdf8;
    --panel-2: #f5f3ff;
    --line: #dce4f0;
    --line-strong: #bfcadd;
    --text: #13213a;
    --shadow-panel: var(--mix-shadow);
    --shadow-pop: 7px 7px 0 rgba(19, 33, 58, .16), 0 20px 45px rgba(15, 23, 42, .12);
}

body {
    color: var(--mix-ink) !important;
    background-color: var(--mix-paper) !important;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(0, 82, 255, .08) 1.5px, transparent 2px),
        radial-gradient(circle at 92% 5%, rgba(244, 114, 182, .11), transparent 22rem),
        radial-gradient(circle at 7% 92%, rgba(52, 211, 153, .08), transparent 20rem) !important;
    background-size: 34px 34px, auto, auto !important;
}

::selection {
    color: var(--mix-ink);
    background: rgba(251, 191, 36, .68);
}

:focus-visible {
    outline-color: var(--mix-yellow) !important;
    outline-width: 3px !important;
}

/* SaaS-dark navigation with playful precision details. */
.layout-menu,
.sidebar.sidebar-offcanvas {
    background:
        radial-gradient(circle at 18% 5%, rgba(77, 124, 255, .25), transparent 15rem),
        radial-gradient(circle at 82% 95%, rgba(244, 114, 182, .1), transparent 14rem),
        var(--mix-ink) !important;
    border-right: 3px solid var(--mix-blue-2) !important;
    box-shadow: 7px 0 0 rgba(77, 124, 255, .1), 15px 0 35px rgba(15, 23, 42, .1) !important;
}

.sidebar-brand-logo-wrap,
.app-brand-logo img,
.sidebar-brand-logo {
    border: 2px solid #fff !important;
    box-shadow: 3px 3px 0 var(--mix-yellow) !important;
    transform: rotate(-2deg);
}

.sidebar-collapse-toggle {
    border: 2px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 2px 2px 0 rgba(77, 124, 255, .35) !important;
}

.sidebar-quick-panel {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 3px 3px 0 rgba(77, 124, 255, .16) !important;
}

.sidebar-quick-action:hover {
    border: 1px solid rgba(255, 255, 255, .28) !important;
    box-shadow: 3px 3px 0 rgba(244, 114, 182, .5) !important;
    transform: translate(-1px, -2px) rotate(-.5deg) !important;
}

.menu-inner .menu-link,
.sidebar .nav-link,
.sidebar .menu-group-header {
    border-radius: 11px !important;
    transition: transform var(--mix-pop), background-color var(--mix-pop), box-shadow var(--mix-pop) !important;
}

.menu-inner .menu-link:hover,
.sidebar .nav-link:hover,
.sidebar .menu-group-header:hover {
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: 2px 2px 0 rgba(77, 124, 255, .22) !important;
    transform: translate(2px, -1px) !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 {
    border: 2px solid rgba(255, 255, 255, .76) !important;
    box-shadow: 4px 4px 0 var(--mix-pink) !important;
    transform: translate(-1px, -1px);
}

.sidebar-count-badge {
    color: var(--mix-ink) !important;
    background: var(--mix-yellow) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .22) !important;
}

.sidebar-account-avatar {
    border: 2px solid #fff !important;
    box-shadow: 3px 3px 0 var(--mix-green) !important;
}

/* Match the specificity of the standalone sidebar component while retaining
   the SaaS dark base inherited from saas-design-system.css. */
#layout-menu.msms-sidebar {
    --sidebar-accent: #0052ff;
    color: #fff !important;
    background:
        radial-gradient(circle at 18% 5%, rgba(77, 124, 255, .27), transparent 15rem),
        radial-gradient(circle at 82% 95%, rgba(244, 114, 182, .12), transparent 14rem),
        var(--mix-ink) !important;
    border-right: 2px solid var(--mix-blue-2) !important;
    box-shadow: 6px 0 0 rgba(244, 114, 182, .18), 15px 0 35px rgba(15, 23, 42, .12) !important;
}

#layout-menu.msms-sidebar::before {
    display: block !important;
    width: 4px;
    opacity: .9;
    background: linear-gradient(180deg, var(--mix-yellow) 0 25%, var(--mix-pink) 25% 52%, var(--mix-blue-2) 52% 76%, var(--mix-green) 76% 100%);
}

.msms-sidebar .sidebar-brand-shell::after {
    display: block !important;
    background: var(--mix-yellow) !important;
    border: 2px solid #fff !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .22) !important;
}

.msms-sidebar .sidebar-quick-panel { box-shadow: 3px 3px 0 rgba(77, 124, 255, .16) !important; }
.msms-sidebar .sidebar-quick-action:hover,
.msms-sidebar .sidebar-quick-action:nth-child(2):hover { border: 1px solid rgba(255, 255, 255, .24) !important; box-shadow: 3px 3px 0 rgba(244, 114, 182, .5) !important; transform: translate(-1px, -2px) rotate(-.5deg) !important; }

.msms-sidebar .sidebar-section-label::before { background: var(--mix-pink) !important; box-shadow: 0 0 0 3px rgba(244, 114, 182, .13) !important; }
.msms-sidebar .sidebar-menu-icon { box-shadow: 2px 2px 0 rgba(77, 124, 255, .13) !important; }
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n) .sidebar-menu-icon { color: #fcd34d !important; background: rgba(251, 191, 36, .1) !important; border-color: rgba(251, 191, 36, .15) !important; }
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n + 1) .sidebar-menu-icon { color: #f9a8d4 !important; background: rgba(244, 114, 182, .1) !important; border-color: rgba(244, 114, 182, .15) !important; }
.msms-sidebar .sidebar-navigation > .menu-item:nth-child(4n + 2) .sidebar-menu-icon { color: #6ee7b7 !important; background: rgba(52, 211, 153, .1) !important; border-color: rgba(52, 211, 153, .15) !important; }

.msms-sidebar .sidebar-navigation > .menu-item.active > .sidebar-primary-link,
.msms-sidebar .sidebar-navigation > .menu-item.active.open > .sidebar-primary-link {
    border: 2px solid rgba(255, 255, 255, .75) !important;
    box-shadow: 4px 4px 0 var(--mix-pink) !important;
    transform: translate(-1px, -1px) !important;
}

.msms-sidebar .sidebar-count-badge { color: var(--mix-ink) !important; background: var(--mix-yellow) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, .22) !important; }
.msms-sidebar .sidebar-account-dock { box-shadow: 3px 3px 0 rgba(52, 211, 153, .15) !important; }

/* Glass shell with a crisp illustrated edge. */
.layout-navbar,
.navbar.glass-navbar,
.navbar.default-layout-navbar {
    background: rgba(255, 255, 255, .94) !important;
    border: 2px solid var(--mix-ink) !important;
    border-radius: 18px !important;
    box-shadow: 5px 5px 0 var(--mix-blue-2) !important;
}

.glass-search,
.navbar .search-container,
.navbar .search-field {
    background: var(--mix-lavender) !important;
    border: 1px solid var(--mix-border) !important;
    border-radius: 10px !important;
}

.glass-search:focus-within,
.navbar .search-container:focus-within {
    background: #fff !important;
    border-color: var(--mix-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 255, .1), 3px 3px 0 var(--mix-yellow) !important;
}

.navbar .avatar {
    border: 2px solid var(--mix-ink) !important;
    box-shadow: 3px 3px 0 var(--mix-green) !important;
}

.navbar .dropdown-menu,
.dropdown-menu,
.settlement-reminder-menu {
    border: 2px solid var(--mix-ink) !important;
    box-shadow: 6px 6px 0 rgba(77, 124, 255, .3), 0 20px 45px rgba(15, 23, 42, .12) !important;
}

.settlement-reminder-toggle {
    border: 2px solid var(--mix-ink) !important;
    box-shadow: 2px 2px 0 var(--mix-yellow) !important;
}

.settlement-reminder-toggle:hover { transform: translate(-1px, -2px) rotate(-2deg) !important; }
.settlement-reminder-icon { border: 2px solid var(--mix-ink) !important; box-shadow: 2px 2px 0 var(--mix-border) !important; }
.settlement-warning-callout { border: 2px solid #ef4444 !important; box-shadow: 4px 4px 0 var(--mix-yellow) !important; }

/* Inverted hero with subtle playful orbit. */
.welcome-section {
    border: 2px solid var(--mix-ink) !important;
    border-radius: 22px 22px 60px 22px !important;
    box-shadow: 7px 7px 0 var(--mix-blue-2) !important;
}

.welcome-section::after {
    border: 2px dashed rgba(244, 114, 182, .55) !important;
}

.welcome-date-badge {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    box-shadow: 3px 3px 0 rgba(244, 114, 182, .34) !important;
}

.dashboard-section-title {
    color: var(--mix-blue) !important;
    background: #fff !important;
    border: 2px solid var(--mix-blue) !important;
    box-shadow: 3px 3px 0 rgba(77, 124, 255, .16) !important;
}

.dashboard-section-title::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: .2rem;
    background: var(--mix-pink);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, .14);
}

/* Clean SaaS cards with tactile geometric accents. */
.card,
.card-modern,
.glass-card,
.content-card,
.modal-content,
.toast,
.list-group {
    border: 1px solid var(--mix-border) !important;
    border-radius: 15px !important;
    box-shadow: var(--mix-shadow) !important;
}

.card:hover,
.card.hover-lift:hover {
    border-color: rgba(0, 82, 255, .3) !important;
    box-shadow: 6px 7px 0 rgba(77, 124, 255, .14), 0 16px 32px rgba(15, 23, 42, .07) !important;
    transform: translate(-1px, -4px) !important;
}

.card-header,
.modal-header,
.card-footer,
.modal-footer { background: linear-gradient(90deg, rgba(245, 243, 255, .78), rgba(255, 255, 255, .86)) !important; }

.dashboard-card {
    border: 2px solid var(--mix-ink) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 rgba(19, 33, 58, .13) !important;
}

.dashboard-card::before {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 5px !important;
    background: linear-gradient(90deg, var(--mix-blue), var(--mix-blue-2)) !important;
}

.dashboard-card::after {
    top: -38px !important;
    right: -35px !important;
    width: 108px !important;
    height: 108px !important;
    background: transparent !important;
    border: 2px dashed rgba(0, 82, 255, .11) !important;
}

.dashboard-card.card-metallic-red::before { background: linear-gradient(90deg, #dc2626, var(--mix-pink)) !important; }
.dashboard-card.card-metallic-red::after { border-color: rgba(244, 114, 182, .18) !important; }
.dashboard-card.card-metallic-green::before { background: linear-gradient(90deg, #059669, var(--mix-green)) !important; }
.dashboard-card.card-metallic-dark::before { background: linear-gradient(90deg, var(--mix-ink), var(--mix-blue-2)) !important; }

.dashboard-card .card-icon,
.card-icon {
    border: 2px solid var(--mix-ink) !important;
    border-radius: 13px !important;
    box-shadow: 3px 3px 0 var(--mix-ink) !important;
    transform: rotate(2deg);
    transition: transform var(--mix-pop) !important;
}

.dashboard-card:hover .card-icon { transform: rotate(-3deg) scale(1.06); }
.dashboard-card.card-metallic-red .card-icon { box-shadow: 3px 3px 0 var(--mix-pink) !important; }
.dashboard-card.card-metallic-green .card-icon { box-shadow: 3px 3px 0 var(--mix-green) !important; }

/* Tactile controls */
.btn,
.btn-modern,
.btn-glass,
button,
input[type="button"],
input[type="submit"] {
    transition: transform var(--mix-pop), box-shadow var(--mix-pop), background-color var(--mix-pop), border-color var(--mix-pop) !important;
}

.btn-primary,
.btn-modern.btn-primary,
.btn-glass-primary,
button.btn-primary,
input.btn-primary {
    border: 2px solid var(--mix-ink) !important;
    box-shadow: 3px 3px 0 var(--mix-ink) !important;
}

.btn-primary:hover,
.btn-modern.btn-primary:hover,
.btn-glass-primary:hover {
    box-shadow: 5px 5px 0 var(--mix-ink) !important;
    transform: translate(-2px, -2px) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    border: 2px solid var(--mix-ink) !important;
    box-shadow: 2px 2px 0 rgba(19, 33, 58, .18) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    box-shadow: 3px 3px 0 var(--mix-yellow) !important;
    transform: translate(-1px, -2px) !important;
}

.btn-success,
.btn-warning,
.btn-info,
.btn-danger { border: 2px solid var(--mix-ink) !important; box-shadow: 3px 3px 0 var(--mix-ink) !important; }

.welcome-section .btn-glass {
    border: 1px solid rgba(255, 255, 255, .25) !important;
    box-shadow: 3px 3px 0 rgba(244, 114, 182, .28) !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 {
    border: 1px solid #bfcadd !important;
    border-radius: 10px !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.form-control-modern:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mix-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 255, .09), 3px 3px 0 var(--mix-yellow) !important;
}

.form-check-input:checked { box-shadow: 2px 2px 0 var(--mix-yellow) !important; }

.table-responsive { border: 1px solid var(--mix-border); }
.table thead th,
.table-modern thead th,
.table-metallic thead th { background: linear-gradient(90deg, #f5f3ff, #f8fafc) !important; }
.table tbody tr:nth-child(even) td { background: rgba(245, 243, 255, .26) !important; }
.table-hover tbody tr:hover > *,
.table-modern tbody tr:hover,
.table-metallic tr:hover td { background: #eef4ff !important; }

.nav-tabs { border: 2px solid var(--mix-ink) !important; box-shadow: 3px 3px 0 rgba(77, 124, 255, .15) !important; }
.nav-tabs .nav-link.active { box-shadow: 2px 2px 0 var(--mix-yellow) !important; }
.page-link,
.pagination .page-link { border: 1px solid var(--mix-border) !important; box-shadow: 2px 2px 0 rgba(19, 33, 58, .07) !important; }
.page-item.active .page-link,
.pagination .active > .page-link { border: 2px solid var(--mix-ink) !important; box-shadow: 3px 3px 0 var(--mix-yellow) !important; }

.badge { border-width: 1px !important; }
.alert { border-width: 1px 1px 1px 5px !important; box-shadow: 3px 3px 0 rgba(19, 33, 58, .07) !important; }
.modal-content { border: 2px solid var(--mix-ink) !important; box-shadow: 7px 7px 0 rgba(77, 124, 255, .22), 0 28px 70px rgba(15, 23, 42, .2) !important; }
.progress { border: 1px solid var(--mix-border) !important; }

.content-footer,
.footer,
.glass-footer {
    border-top: 2px solid var(--mix-ink) !important;
    box-shadow: 0 -4px 0 rgba(77, 124, 255, .12) !important;
}

/* Login and POS hybrid details */
body > .left-panel .brand-logo {
    border: 2px solid #fff !important;
    box-shadow: 5px 5px 0 var(--mix-pink) !important;
    transform: rotate(-2deg);
}

body > .left-panel .feature-item {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 3px 3px 0 rgba(77, 124, 255, .12) !important;
}

body > .right-panel .login-card {
    border: 2px solid var(--mix-ink) !important;
    border-radius: 20px 20px 50px 20px !important;
    box-shadow: 8px 8px 0 rgba(77, 124, 255, .2), 0 24px 55px rgba(15, 23, 42, .1) !important;
}

body > .right-panel .input-wrap { border: 1px solid #bfcadd !important; }
body > .right-panel .input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(0, 82, 255, .08), 3px 3px 0 var(--mix-yellow) !important; }

/* ========================================================================== 
   Professional hybrid architecture
   SaaS structure with restrained geometric personality and color.
   ========================================================================== */

html[data-design-theme="mixed"] body.msms-enhanced-shell {
    background:
        radial-gradient(circle at 78% -6%, rgba(139, 92, 246, .1), transparent 29rem),
        radial-gradient(circle at 30% 18%, rgba(52, 211, 153, .045), transparent 24rem),
        linear-gradient(180deg, #faf9ff, #fffdf9 31rem) !important;
}

.workspace-page-header,
.workspace-page-title {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 247, 255, .94)),
        #fff !important;
    border: 1px solid rgba(19, 33, 58, .2) !important;
    border-radius: 18px 18px 28px 18px !important;
    box-shadow: 0 14px 32px rgba(19, 33, 58, .07), 4px 4px 0 rgba(77, 124, 255, .1) !important;
}

.workspace-page-header::before,
.workspace-page-title::before {
    width: 5px;
    background: linear-gradient(180deg, var(--mix-blue), var(--mix-pink) 52%, var(--mix-yellow));
}

.workspace-page-header::after,
.workspace-page-title::after {
    border-color: rgba(139, 92, 246, .13);
    box-shadow: 0 0 0 20px rgba(244, 114, 182, .025);
}

.workspace-page-header .text-muted,
.workspace-page-title .text-muted,
.workspace-page-header .text-dark,
.workspace-page-title .text-dark { color: #6d45d8 !important; }

#layout-menu.msms-sidebar {
    background:
        radial-gradient(circle at 12% 2%, rgba(77, 124, 255, .3), transparent 16rem),
        radial-gradient(circle at 90% 96%, rgba(244, 114, 182, .11), transparent 17rem),
        linear-gradient(180deg, #14213a, #101a30 54%, #0d172a) !important;
    border-right: 1px solid rgba(77, 124, 255, .42) !important;
    box-shadow: 18px 0 46px rgba(19, 33, 58, .16) !important;
}

#layout-menu.msms-sidebar::before {
    width: 4px;
    background: linear-gradient(180deg, var(--mix-blue), var(--mix-pink) 55%, var(--mix-yellow)) !important;
}

.msms-sidebar .sidebar-brand-logo-wrap {
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 13px 13px 18px 13px !important;
    box-shadow: 3px 3px 0 rgba(52, 211, 153, .55), 0 10px 22px rgba(0, 0, 0, .2) !important;
}

.msms-sidebar .sidebar-quick-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
    border: 1px solid rgba(191, 219, 254, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !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, var(--mix-blue), var(--mix-blue-2)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 12px 26px rgba(0, 82, 255, .28), 3px 3px 0 rgba(244, 114, 182, .48) !important;
}

.layout-navbar,
.navbar.glass-navbar {
    background: rgba(255, 255, 255, .91) !important;
    border: 1px solid rgba(19, 33, 58, .18) !important;
    border-radius: 16px 16px 22px 16px !important;
    box-shadow: 0 13px 34px rgba(19, 33, 58, .075), 3px 3px 0 rgba(77, 124, 255, .12) !important;
}

.layout-navbar::before {
    background: linear-gradient(90deg, transparent, var(--mix-blue), var(--mix-pink), var(--mix-yellow), transparent);
    opacity: .82;
}

.layout-navbar a.btn-primary[href="mobile_sales.php"] {
    background: linear-gradient(135deg, var(--mix-blue), var(--mix-blue-2)) !important;
    box-shadow: 0 9px 20px rgba(0, 82, 255, .22), 2px 2px 0 rgba(244, 114, 182, .55) !important;
}

.glass-search,
.navbar .search-container {
    background: #fff !important;
    border-color: rgba(19, 33, 58, .18) !important;
    box-shadow: inset 0 1px 2px rgba(19, 33, 58, .035) !important;
}

.welcome-section {
    background:
        radial-gradient(circle at 76% 0, rgba(77, 124, 255, .5), transparent 22rem),
        radial-gradient(circle at 8% 115%, rgba(244, 114, 182, .16), transparent 19rem),
        linear-gradient(135deg, #111d36, #17284c 62%, #213867) !important;
    border: 1px solid rgba(191, 219, 254, .18) !important;
    border-radius: 20px 20px 42px 20px !important;
    box-shadow: 0 24px 54px rgba(19, 33, 58, .17), 5px 5px 0 rgba(77, 124, 255, .13) !important;
}

.welcome-section::after { border-color: rgba(251, 191, 36, .3) !important; }

.quick-actions-grid .btn-glass {
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    border: 1px solid rgba(255, 255, 255, .19) !important;
    border-radius: 12px 12px 18px 12px !important;
    box-shadow: 2px 2px 0 rgba(244, 114, 182, .25), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.quick-actions-grid .btn-glass:nth-child(2) { box-shadow: 2px 2px 0 rgba(52, 211, 153, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
.quick-actions-grid .btn-glass:nth-child(3) { box-shadow: 2px 2px 0 rgba(251, 191, 36, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }

.dashboard-section-title { color: #6137cc !important; }
.dashboard-section-title::before {
    background: linear-gradient(135deg, var(--mix-blue), var(--mix-pink)) !important;
    box-shadow: 0 0 0 5px rgba(139, 92, 246, .1), 2px 2px 0 rgba(251, 191, 36, .72) !important;
}
.dashboard-section-title::after { background: linear-gradient(90deg, rgba(139, 92, 246, .25), rgba(244, 114, 182, .14), rgba(226, 232, 240, .65), transparent); }

.card,
.card-modern,
.content-card,
.modal-content {
    border: 1px solid rgba(19, 33, 58, .16) !important;
    border-radius: 16px 16px 22px 16px !important;
    box-shadow: 0 9px 24px rgba(19, 33, 58, .06), 2px 2px 0 rgba(77, 124, 255, .07) !important;
}

.card:hover,
.card.hover-lift:hover {
    border-color: rgba(77, 124, 255, .28) !important;
    box-shadow: 0 14px 32px rgba(19, 33, 58, .085), 3px 3px 0 rgba(77, 124, 255, .1) !important;
    transform: none !important;
}

a:hover > .card,
a .card:hover,
.dashboard-card:hover {
    border-color: rgba(77, 124, 255, .38) !important;
    box-shadow: 0 17px 36px rgba(19, 33, 58, .1), 3px 3px 0 rgba(244, 114, 182, .16) !important;
    transform: translateY(-3px) !important;
}

.card-header,
.modal-header,
.card-footer,
.modal-footer {
    background: linear-gradient(90deg, rgba(249, 247, 255, .88), rgba(255, 255, 255, .94)) !important;
}

.dashboard-card {
    border-radius: 16px 16px 24px 16px !important;
    box-shadow: 0 8px 22px rgba(19, 33, 58, .06), 2px 2px 0 rgba(77, 124, 255, .08) !important;
}

.dashboard-card::before {
    inset: 0 0 auto !important;
    width: auto !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--mix-blue), var(--mix-blue-2), var(--mix-pink)) !important;
}

.dashboard-card.card-metallic-red::before { background: linear-gradient(90deg, #dc2626, var(--mix-pink), var(--mix-yellow)) !important; }
.dashboard-card.card-metallic-green::before { background: linear-gradient(90deg, #059669, var(--mix-green), var(--mix-yellow)) !important; }
.dashboard-card.card-metallic-dark::before { background: linear-gradient(90deg, var(--mix-ink), var(--mix-blue-2), var(--mix-pink)) !important; }

.dashboard-card::after {
    background: radial-gradient(circle, rgba(139, 92, 246, .09), rgba(244, 114, 182, .025) 58%, transparent 60%) !important;
    border-color: rgba(139, 92, 246, .07) !important;
}

.dashboard-card .card-icon,
.card-icon {
    border: 1px solid rgba(255, 255, 255, .38) !important;
    border-radius: 13px 13px 18px 13px !important;
    box-shadow: 3px 3px 0 rgba(244, 114, 182, .48), 0 10px 22px rgba(0, 82, 255, .16) !important;
}

.dashboard-card.card-metallic-red .card-icon { box-shadow: 3px 3px 0 rgba(251, 191, 36, .72), 0 10px 22px rgba(220, 38, 38, .14) !important; }
.dashboard-card.card-metallic-green .card-icon { box-shadow: 3px 3px 0 rgba(52, 211, 153, .66), 0 10px 22px rgba(5, 150, 105, .14) !important; }

.nav-pills { background: #f7f4ff; border-color: rgba(139, 92, 246, .16); }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--mix-blue), var(--mix-blue-2)) !important; box-shadow: 2px 2px 0 rgba(244, 114, 182, .48), 0 7px 16px rgba(0, 82, 255, .16) !important; }

.table-responsive { border-color: rgba(19, 33, 58, .14) !important; }
.table thead th,
.table-modern thead th,
.table-metallic thead th { background: linear-gradient(90deg, #f8f5ff, #fafcff) !important; }

.content-footer.glass-footer,
.footer.glass-footer {
    background: linear-gradient(90deg, rgba(139, 92, 246, .055), #fff 35%, rgba(244, 114, 182, .045)) !important;
    border: 1px solid rgba(19, 33, 58, .15) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 26px rgba(19, 33, 58, .045), 3px 0 0 rgba(77, 124, 255, .12) !important;
}

/* Keep the hybrid footer fixed like the playful source theme, but use the
   corrected SaaS shell gutters and reserve content clearance underneath it. */
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,
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 {
    position: fixed !important;
    inset: auto var(--msms-shell-gutter) 0 var(--msms-shell-gutter) !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1035 !important;
}

@media (min-width: 1200px) {
    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="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;
    }
}

.content-footer.glass-footer::before,
.footer.glass-footer::before { background: linear-gradient(180deg, var(--mix-blue), var(--mix-pink), var(--mix-yellow)); }

.footer-text a { color: #6137cc !important; background: #f3efff; }

.settlement-warning-callout {
    color: #991b1b !important;
    background: rgba(255, 247, 237, .98) !important;
    border: 1px solid #fb7185 !important;
    border-radius: 11px 11px 16px 11px !important;
    box-shadow: 0 12px 28px rgba(127, 29, 29, .11), 2px 2px 0 rgba(251, 191, 36, .55) !important;
}

.card.card-metallic-blue:not(.dashboard-card) { background: linear-gradient(135deg, #0759ff, #6d5dfc) !important; }
.card.card-metallic-green:not(.dashboard-card) { background: linear-gradient(135deg, #047857, #10b981) !important; }
.card.card-metallic-red:not(.dashboard-card) { background: linear-gradient(135deg, #b91c1c, #ef476f) !important; }
.card.card-metallic-dark:not(.dashboard-card) { background: linear-gradient(135deg, #13213a, #334b70) !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),
.card.bg-primary,
.card.bg-info,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-dark {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 12px 28px rgba(19, 33, 58, .13), 2px 2px 0 rgba(244, 114, 182, .22) !important;
}

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

.modal-content {
    border: 1px solid rgba(19, 33, 58, .22) !important;
    box-shadow: 0 28px 72px rgba(19, 33, 58, .22) !important;
}

@media (max-width: 767.98px) {
    #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: 18px 0 45px rgba(15, 23, 42, .28) !important; }
    .layout-navbar { border-radius: 14px 14px 19px 14px !important; box-shadow: 0 10px 28px rgba(19, 33, 58, .1), 2px 2px 0 rgba(77, 124, 255, .18) !important; }
    .workspace-page-header,
    .workspace-page-title { border-radius: 15px 15px 22px 15px !important; box-shadow: 0 10px 26px rgba(19, 33, 58, .07), 2px 2px 0 rgba(77, 124, 255, .1) !important; }
    .welcome-section { border-radius: 17px 17px 32px 17px !important; box-shadow: 0 18px 40px rgba(19, 33, 58, .16), 3px 3px 0 rgba(77, 124, 255, .14) !important; }
    .dashboard-card { box-shadow: 0 8px 22px rgba(19, 33, 58, .065), 2px 2px 0 rgba(77, 124, 255, .08) !important; }
    body > .right-panel .login-card { border-radius: 16px 16px 34px 16px !important; box-shadow: 5px 5px 0 rgba(77, 124, 255, .2) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-brand-logo-wrap,
    .app-brand-logo img,
    .sidebar-brand-logo,
    .dashboard-card .card-icon,
    body > .left-panel .brand-logo { transform: none !important; }
}