/**
 * MSMS Playful Geometric design system
 * A presentation-only layer shared by the Sneat and legacy Bootstrap shells.
 */

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

:root {
    --pg-background: #fffdf5;
    --pg-surface: #ffffff;
    --pg-foreground: #1e293b;
    --pg-muted: #f1f5f9;
    --pg-muted-foreground: #64748b;
    --pg-accent: #8b5cf6;
    --pg-accent-dark: #7c3aed;
    --pg-secondary: #f472b6;
    --pg-tertiary: #fbbf24;
    --pg-quaternary: #34d399;
    --pg-danger: #ef4444;
    --pg-border: #1e293b;
    --pg-soft-border: #e2e8f0;
    --pg-radius-sm: 8px;
    --pg-radius-md: 16px;
    --pg-radius-lg: 24px;
    --pg-radius-full: 9999px;
    --pg-shadow: 4px 4px 0 #1e293b;
    --pg-shadow-hover: 6px 6px 0 #1e293b;
    --pg-shadow-soft: 7px 7px 0 #e2e8f0;
    --pg-bounce: 300ms cubic-bezier(.34, 1.56, .64, 1);
    --pg-fixed-footer-clearance: 124px;

    /* Bridge the new tokens into both existing themes. */
    --bs-primary: #8b5cf6;
    --bs-primary-rgb: 139, 92, 246;
    --primary-color: #8b5cf6;
    --secondary-color: #f472b6;
    --background-color: #fffdf5;
    --text-color: #1e293b;
    --accent-color: #8b5cf6;
    --hover-color: #7c3aed;
    --active-color: #6d28d9;
    --border-color: #e2e8f0;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #8b5cf6;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 24px;
    --shadow-sm: 2px 2px 0 #e2e8f0;
    --shadow-md: 4px 4px 0 #e2e8f0;
    --shadow-lg: 7px 7px 0 #e2e8f0;
    --shadow-xl: 8px 8px 0 #e2e8f0;
    --transition-base: var(--pg-bounce);

    /* Standalone point-of-sale page compatibility tokens. */
    --bg: #fffdf5;
    --panel: #ffffff;
    --panel-2: #faf5ff;
    --field: #ffffff;
    --field-sunken: #f8fafc;
    --line: #e2e8f0;
    --line-strong: #1e293b;
    --line-soft: rgba(100, 116, 139, .18);
    --text: #1e293b;
    --text-2: #475569;
    --text-3: #64748b;
    --accent: #8b5cf6;
    --accent-2: #7c3aed;
    --accent-soft: #ede9fe;
    --money: #059669;
    --ok: #10b981;
    --warn: #f59e0b;
    --exchange: #d97706;
    --danger: #ef4444;
    --radius: 8px;
    --shadow-panel: 7px 7px 0 #e2e8f0;
    --shadow-pop: 9px 9px 0 #1e293b;
    --focus-ring: 4px 4px 0 #8b5cf6;
}

html {
    background: var(--pg-background);
}

body,
.layout-wrapper,
.layout-container,
.layout-page,
.main-panel {
    color: var(--pg-foreground);
    font-family: "Plus Jakarta Sans", "MSMS Jakarta Fallback", "Segoe UI", sans-serif !important;
}

body {
    min-height: 100vh;
    background-color: var(--pg-background) !important;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(139, 92, 246, .11) 2px, transparent 2.5px),
        linear-gradient(135deg, rgba(251, 191, 36, .055) 25%, transparent 25%);
    background-size: 30px 30px, 80px 80px;
}

.layout-wrapper,
.layout-container,
.layout-page {
    background-color: var(--pg-background) !important;
}

.layout-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background-image: radial-gradient(circle at 14px 14px, rgba(139, 92, 246, .075) 1.5px, transparent 2px) !important;
    background-size: 32px 32px !important;
}

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

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

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

.content-wrapper::before {
    content: "";
    position: absolute;
    top: 5.5rem;
    right: 3.5rem;
    width: 34px;
    height: 34px;
    border: 6px solid var(--pg-secondary);
    border-radius: 50%;
    opacity: .7;
    pointer-events: none;
    z-index: 0;
}

.content-wrapper::after {
    content: "";
    position: absolute;
    top: 9rem;
    right: 8.5rem;
    width: 22px;
    height: 22px;
    background: var(--pg-quaternary);
    border: 2px solid var(--pg-border);
    transform: rotate(14deg);
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}

.content-wrapper > :not(.content-backdrop):not(.modal):not(.offcanvas),
.main-panel > .content-wrapper > :not(.content-backdrop):not(.modal):not(.offcanvas) {
    position: relative;
    z-index: auto;
}

.content-wrapper > .content-backdrop,
.main-panel > .content-wrapper > .content-backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    pointer-events: none;
    z-index: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.app-brand-text,
.brand-title,
.brand-name,
.card-title,
.modal-title {
    color: var(--pg-foreground);
    font-family: "Outfit", "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-weight: 700;
    letter-spacing: -.02em;
}

a {
    color: var(--pg-accent);
}

a:hover {
    color: var(--pg-accent-dark);
}

::selection {
    color: var(--pg-foreground);
    background: rgba(251, 191, 36, .62);
}

:focus-visible {
    outline: 3px solid var(--pg-tertiary) !important;
    outline-offset: 3px;
}

/* Layout navigation */
.layout-menu,
.sidebar.sidebar-offcanvas {
    background: var(--pg-surface) !important;
    border-right: 2px solid var(--pg-border) !important;
    box-shadow: 6px 0 0 rgba(139, 92, 246, .14) !important;
}

.app-brand,
.sidebar-brand-wrapper {
    background: var(--pg-surface) !important;
    border-bottom: 2px dashed var(--pg-soft-border) !important;
}

.app-brand-logo,
.sidebar-brand-icon {
    border-radius: 14px;
}

.app-brand-logo img,
.sidebar-brand-logo {
    border: 2px solid var(--pg-border);
    box-shadow: 3px 3px 0 var(--pg-tertiary);
}

.app-brand-text,
.brand-title {
    color: var(--pg-foreground) !important;
}

.menu-inner,
.sidebar-menu {
    scrollbar-color: var(--pg-accent) transparent;
}

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

.menu-inner .menu-link,
.sidebar .nav-link,
.sidebar .menu-group-header {
    min-height: 44px;
    color: var(--pg-muted-foreground) !important;
    border: 2px solid transparent;
    border-radius: 14px !important;
    font-weight: 600;
    transition: transform var(--pg-bounce), background-color var(--pg-bounce), border-color var(--pg-bounce), box-shadow var(--pg-bounce) !important;
}

.menu-inner .menu-link:hover,
.sidebar .nav-link:hover,
.sidebar .menu-group-header:hover {
    color: var(--pg-foreground) !important;
    background: #fef3c7 !important;
    border-color: var(--pg-border);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--pg-border);
}

.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: var(--pg-accent) !important;
    border: 2px solid var(--pg-border) !important;
    box-shadow: 4px 4px 0 var(--pg-border) !important;
}

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

.menu-inner .menu-icon,
.sidebar .menu-icon,
.sidebar .group-icon {
    color: var(--pg-accent) !important;
    font-size: 1.25rem;
}

.menu-header,
.menu-group-header .group-title {
    font-family: "Outfit", sans-serif;
    letter-spacing: .06em;
}

.layout-navbar,
.navbar.glass-navbar,
.navbar.default-layout-navbar {
    background: rgba(255, 255, 255, .96) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-lg) !important;
    box-shadow: 5px 5px 0 var(--pg-secondary) !important;
    backdrop-filter: none !important;
}

.glass-search,
.navbar .search-container,
.navbar .search-field {
    background: var(--pg-muted) !important;
    border: 2px solid var(--pg-soft-border) !important;
    border-radius: var(--pg-radius-full) !important;
}

.navbar .search-container:focus-within,
.navbar .search-field:focus-within {
    background: var(--pg-surface) !important;
    border-color: var(--pg-accent) !important;
    box-shadow: 3px 3px 0 var(--pg-accent) !important;
}

.navbar .avatar,
.navbar .avatar img {
    border-radius: 50% !important;
}

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

/* Navbar settlement reminder */
.settlement-reminder {
    position: relative;
}

.settlement-reminder-toggle {
    position: relative;
    display: inline-grid !important;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    place-items: center;
    color: var(--pg-foreground) !important;
    background: #fef3c7 !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 50% !important;
    box-shadow: 3px 3px 0 var(--pg-border);
    transition: transform var(--pg-bounce), box-shadow var(--pg-bounce), background-color var(--pg-bounce) !important;
}

.settlement-reminder-toggle > i {
    font-size: 1.35rem;
}

.settlement-reminder-toggle.has-warning {
    color: #991b1b !important;
    background: #fde68a !important;
    box-shadow: 3px 3px 0 #ef4444;
    animation: pg-reminder-pulse 1.8s ease-in-out infinite;
}

.settlement-reminder-toggle.is-clear {
    color: #047857 !important;
    background: #d1fae5 !important;
    box-shadow: 3px 3px 0 #10b981;
}

.settlement-reminder-toggle:hover,
.settlement-reminder-toggle[aria-expanded="true"] {
    color: var(--pg-foreground) !important;
    background: #fbbf24 !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--pg-border);
}

.settlement-reminder-count {
    position: absolute;
    top: -8px;
    right: -9px;
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #dc2626;
    border: 2px solid #ffffff;
    border-radius: var(--pg-radius-full);
    box-shadow: 2px 2px 0 var(--pg-border);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.settlement-warning-callout {
    position: absolute;
    top: 50%;
    right: calc(100% + .9rem);
    display: none;
    width: max-content;
    max-width: 245px;
    padding: .55rem .75rem;
    align-items: center;
    gap: .55rem;
    color: #7f1d1d;
    background: #fff7ed;
    border: 2px solid #ef4444;
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--pg-tertiary);
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 4;
    animation: pg-callout-nudge 2.4s ease-in-out infinite;
}

.settlement-warning-callout::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 14px;
    height: 14px;
    background: #fff7ed;
    border-top: 2px solid #ef4444;
    border-right: 2px solid #ef4444;
    transform: translateY(-50%) rotate(45deg);
}

.settlement-warning-callout > i {
    flex: 0 0 auto;
    color: #dc2626;
    font-size: 1.25rem;
}

.settlement-warning-callout span,
.settlement-warning-callout strong,
.settlement-warning-callout small {
    display: block;
}

.settlement-warning-callout strong {
    color: #991b1b;
    font-size: .75rem;
    line-height: 1.25;
}

.settlement-warning-callout small {
    margin-top: .08rem;
    color: #b45309;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.25;
}

.settlement-reminder.is-open .settlement-warning-callout {
    opacity: 0;
    visibility: hidden;
}

.settlement-reminder-menu {
    width: min(390px, calc(100vw - 2rem)) !important;
    margin-top: .85rem !important;
    padding: .75rem !important;
    overflow: hidden;
    color: var(--pg-foreground) !important;
    background: #ffffff !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: 7px 7px 0 var(--pg-tertiary) !important;
    z-index: 1075 !important;
}

.settlement-reminder-menu.show {
    top: 100%;
    right: 0;
    left: auto;
    display: block;
}

.settlement-reminder-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .45rem .75rem;
}

.settlement-reminder-header h6 {
    color: var(--pg-foreground) !important;
    font-size: 1rem;
}

.settlement-reminder-eyebrow {
    display: block;
    margin-bottom: .15rem;
    color: #b45309;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.settlement-reminder-total-count {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    padding: 0 .55rem;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #dc2626;
    border: 2px solid var(--pg-border);
    border-radius: var(--pg-radius-full);
    font-family: "Outfit", sans-serif;
    font-weight: 800;
}

.settlement-reminder-toggle.is-clear + .settlement-reminder-menu .settlement-reminder-total-count {
    background: #059669;
}

.settlement-reminder-summary {
    display: flex;
    margin-bottom: .65rem;
    padding: .75rem .85rem;
    align-items: center;
    justify-content: space-between;
    color: #7f1d1d;
    background: #fee2e2;
    border: 2px solid #fca5a5;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
}

.settlement-reminder-summary strong {
    color: #b91c1c;
    font-family: "Outfit", sans-serif;
    font-size: .95rem;
}

.settlement-reminder-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .75rem .45rem;
    align-items: center;
    color: var(--pg-foreground) !important;
    border-top: 1px dashed var(--pg-soft-border);
    border-radius: 10px;
}

.settlement-reminder-item:hover {
    color: var(--pg-foreground) !important;
    background: #fffbeb;
}

.settlement-reminder-icon {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 2px solid var(--pg-border);
    border-radius: 12px;
    box-shadow: 2px 2px 0 var(--pg-border);
    font-size: 1.15rem;
}

.settlement-reminder-icon.repair {
    color: #6d28d9;
    background: #ede9fe;
}

.settlement-reminder-icon.out-shop {
    color: #b45309;
    background: #fef3c7;
}

.settlement-reminder-copy {
    min-width: 0;
}

.settlement-reminder-copy strong,
.settlement-reminder-copy small {
    display: block;
}

.settlement-reminder-copy strong {
    color: var(--pg-foreground);
    font-size: .82rem;
}

.settlement-reminder-copy small {
    margin-top: .15rem;
    color: var(--pg-muted-foreground);
    font-size: .68rem;
    line-height: 1.35;
}

.settlement-reminder-amount {
    color: #dc2626;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.settlement-reminder-footer {
    display: flex;
    gap: .45rem;
    padding: .7rem .45rem .2rem;
    align-items: flex-start;
    color: var(--pg-muted-foreground);
    font-size: .68rem;
    line-height: 1.4;
}

.settlement-reminder-footer i {
    margin-top: .05rem;
    color: var(--pg-accent);
    font-size: 1rem;
}

.settlement-reminder-empty {
    display: flex;
    padding: 1rem .75rem;
    flex-direction: column;
    align-items: center;
    color: var(--pg-muted-foreground);
    text-align: center;
}

.settlement-reminder-empty i {
    margin-bottom: .45rem;
    color: #059669;
    font-size: 2.25rem;
}

.settlement-reminder-empty strong {
    margin-bottom: .25rem;
    color: #047857;
}

.settlement-reminder-empty span {
    font-size: .75rem;
}

@keyframes pg-reminder-pulse {
    0%, 100% { transform: translateY(0) rotate(0); }
    45% { transform: translateY(-2px) rotate(-5deg); }
    55% { transform: translateY(-2px) rotate(5deg); }
}

@keyframes pg-callout-nudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-3px); }
}

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

@media (prefers-reduced-motion: reduce) {
    .settlement-reminder-toggle.has-warning,
    .settlement-warning-callout {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .layout-navbar {
        padding-right: .65rem !important;
        padding-left: .65rem !important;
    }

    .layout-navbar .layout-menu-toggle {
        margin-right: .4rem !important;
    }

    #navbar-collapse,
    #navbar-collapse > .navbar-nav:first-child,
    #navbar-collapse .search-container,
    #navbarSearch {
        min-width: 0 !important;
    }

    #navbar-collapse > .navbar-nav:first-child {
        flex: 1 1 auto;
        max-width: clamp(145px, 48vw, 210px);
    }

    #navbar-collapse .search-container {
        width: 100%;
        max-width: clamp(145px, 48vw, 210px);
        padding-right: .55rem !important;
        padding-left: .55rem !important;
    }

    #navbar-collapse > .navbar-nav.ms-auto {
        flex: 0 0 auto;
        margin-left: .4rem !important;
    }

    .sms-toggle-nav {
        display: none !important;
    }

    .settlement-reminder {
        margin-right: .4rem !important;
    }

    .settlement-reminder-toggle {
        width: 38px;
        height: 38px;
    }

    .settlement-reminder-menu {
        width: min(360px, calc(100vw - 3rem)) !important;
    }

    .settlement-reminder-summary {
        gap: .5rem;
        flex-wrap: wrap;
    }

    .settlement-reminder-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: .65rem;
    }

    .settlement-reminder-amount {
        grid-column: 2;
        justify-self: start;
        margin-top: -.35rem;
    }

    .navbar .dropdown-user .avatar {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Cards and content groups */
.card,
.glass-card,
.dashboard-card,
.login-card,
.modal-content,
.offcanvas,
.swal-modal {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    background-image: none !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: var(--pg-shadow-soft) !important;
    backdrop-filter: none !important;
}

.card,
.dashboard-card,
.glass-card {
    transition: transform var(--pg-bounce), box-shadow var(--pg-bounce) !important;
}

a:hover > .card,
.dashboard-card:hover,
.glass-card:hover,
.card.hover-lift:hover {
    transform: translate(-2px, -2px) rotate(-.35deg) !important;
    box-shadow: 9px 9px 0 var(--pg-secondary) !important;
}

.card::before,
.dashboard-card::before,
.dashboard-card::after,
.glass-card::before {
    background: none !important;
}

.card-header,
.glass-card-header,
.modal-header,
.offcanvas-header {
    color: var(--pg-foreground) !important;
    background: #faf5ff !important;
    border-bottom: 2px dashed var(--pg-soft-border) !important;
}

.card-footer,
.glass-card-footer,
.modal-footer {
    color: var(--pg-foreground) !important;
    background: var(--pg-muted) !important;
    border-top: 2px dashed var(--pg-soft-border) !important;
}

/* Keep every Bootstrap modal above its backdrop and outside page-level
   stacking traps. This is especially important for modals rendered inside
   content containers rather than directly under <body>. */
body.modal-open {
    overflow: hidden !important;
}

.modal {
    --bs-modal-zindex: 1090;
    z-index: 1090 !important;
    color: var(--pg-foreground) !important;
}

.modal-backdrop {
    --bs-backdrop-zindex: 1089;
    --bs-backdrop-bg: #0f172a;
    --bs-backdrop-opacity: .55;
    display: block !important;
    z-index: 1089 !important;
    background-color: #0f172a !important;
}

.modal-backdrop.fade:not(.show) {
    opacity: 0 !important;
}

.modal-backdrop.show {
    opacity: .55 !important;
}

.modal-dialog {
    margin: 1rem auto !important;
    padding: 0 .75rem;
    pointer-events: none;
}

.modal-dialog-centered {
    min-height: calc(100% - 2rem) !important;
}

.modal-dialog-scrollable {
    height: calc(100% - 2rem) !important;
}

.modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    pointer-events: auto;
}

.modal-header {
    flex: 0 0 auto;
    gap: .75rem;
    padding: 1rem 1.25rem !important;
}

.modal-header .modal-title,
.modal-header .modal-title.text-white,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
    min-width: 0;
    margin: 0;
    color: var(--pg-foreground) !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-shadow: none !important;
}

.modal-header .btn-close,
.modal-header .btn-close-white {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0 0 0 auto !important;
    padding: .45rem !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-sm) !important;
    box-shadow: 2px 2px 0 var(--pg-border) !important;
    filter: none !important;
}

.modal-body {
    min-height: 0;
    padding: 1.25rem !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--pg-foreground) !important;
}

.modal-body label,
.modal-body .form-label,
.modal-body .form-check-label,
.modal-body p,
.modal-body li,
.modal-body td,
.modal-body th,
.modal-body strong,
.modal-body code {
    text-shadow: none !important;
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body .input-group-text,
.modal-body input,
.modal-body select,
.modal-body textarea {
    color: var(--pg-foreground) !important;
    background-color: #ffffff !important;
}

.modal-body .form-control::placeholder,
.modal-body input::placeholder,
.modal-body textarea::placeholder {
    color: var(--pg-muted-foreground) !important;
    opacity: 1;
}

.modal-footer {
    flex: 0 0 auto;
    gap: .75rem;
    padding: 1rem 1.25rem !important;
}

.card-title,
.dashboard-card .card-title,
.dashboard-card .card-value,
.dashboard-card small,
.dashboard-card i,
.card-metallic-dark .card-title,
.card-metallic-dark .text-muted,
.text-white-50 {
    color: var(--pg-foreground) !important;
    text-shadow: none !important;
}

.card-value {
    color: var(--pg-foreground) !important;
    font-family: "Outfit", sans-serif;
    font-weight: 800;
}

/* Legacy colored summary cards used by reports and expense screens. */
.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: #ffffff !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 var(--pg-soft-border) !important;
}

.card.card-metallic-blue:not(.dashboard-card) {
    background: #7c3aed !important;
    background-image: radial-gradient(circle at 112% -18%, rgba(255, 255, 255, .2) 0 34%, transparent 35%) !important;
    box-shadow: 7px 7px 0 #c4b5fd !important;
}

.card.card-metallic-green:not(.dashboard-card) {
    background: #059669 !important;
    background-image: radial-gradient(circle at 112% -18%, rgba(255, 255, 255, .2) 0 34%, transparent 35%) !important;
    box-shadow: 7px 7px 0 #6ee7b7 !important;
}

.card.card-metallic-red:not(.dashboard-card) {
    background: #dc2626 !important;
    background-image: radial-gradient(circle at 112% -18%, rgba(255, 255, 255, .2) 0 34%, transparent 35%) !important;
    box-shadow: 7px 7px 0 #fca5a5 !important;
}

.card.card-metallic-dark:not(.dashboard-card) {
    background: #334155 !important;
    box-shadow: 7px 7px 0 #94a3b8 !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: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.card.card-metallic-blue:not(.dashboard-card) small.text-white,
.card.card-metallic-green:not(.dashboard-card) small.text-white,
.card.card-metallic-red:not(.dashboard-card) small.text-white,
.card.card-metallic-dark:not(.dashboard-card) small.text-white {
    color: rgba(255, 255, 255, .86) !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: var(--pg-foreground) !important;
    background: #ffffff !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 50% !important;
    box-shadow: 3px 3px 0 var(--pg-border);
}

.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: var(--pg-foreground) !important;
}

.report-metric-card {
    min-height: 132px;
    cursor: help;
}

.report-metric-card h2 {
    font-size: clamp(1.25rem, 1.65vw, 1.8rem) !important;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.report-metric-card:focus-visible {
    outline: 3px solid var(--pg-tertiary) !important;
    outline-offset: 4px;
}

.card-icon,
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
    border: 2px solid var(--pg-border);
    border-radius: 50% !important;
    filter: none !important;
    box-shadow: 3px 3px 0 var(--pg-border);
}

.row > div:nth-child(4n + 2) .card-icon,
.row > div:nth-child(4n + 2) .avatar-initial {
    background: #fbcfe8 !important;
}

.row > div:nth-child(4n + 3) .card-icon,
.row > div:nth-child(4n + 3) .avatar-initial {
    background: #d1fae5 !important;
}

.row > div:nth-child(4n + 4) .card-icon,
.row > div:nth-child(4n + 4) .avatar-initial {
    background: #ede9fe !important;
}

.dashboard-card:hover .card-icon {
    color: var(--pg-foreground) !important;
    transform: rotate(5deg) scale(1.06);
}

/* Dashboard contrast and compact metric layout. */
.dashboard-card.card-metallic-blue,
.dashboard-card.card-metallic-dark {
    background: #f8f6ff !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 #ddd6fe !important;
}

.dashboard-card.card-metallic-red {
    background: #fff7f8 !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 #fecdd3 !important;
}

.dashboard-card.card-metallic-green {
    background: #f4fff9 !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 #a7f3d0 !important;
}

/* Soft color rotation keeps metric groups lively without reducing clarity. */
.dashboard-section-title + .row > div:nth-child(4n + 1) .dashboard-card.card-metallic-blue {
    background: #fffbeb !important;
    box-shadow: 7px 7px 0 #fde68a !important;
}

.dashboard-section-title + .row > div:nth-child(4n + 2) .dashboard-card.card-metallic-blue {
    background: #faf5ff !important;
    box-shadow: 7px 7px 0 #ddd6fe !important;
}

.dashboard-section-title + .row > div:nth-child(4n + 3) .dashboard-card.card-metallic-blue {
    background: #ecfdf5 !important;
    box-shadow: 7px 7px 0 #a7f3d0 !important;
}

.dashboard-section-title + .row > div:nth-child(4n + 4) .dashboard-card.card-metallic-blue {
    background: #fdf2f8 !important;
    box-shadow: 7px 7px 0 #fbcfe8 !important;
}

/* Cost cards: unmistakably red, with accessible white content. */
.dashboard-cost-grid .dashboard-card,
.dashboard-cost-grid .dashboard-card.card-metallic-red,
.dashboard-cost-grid .dashboard-card.card-metallic-blue {
    color: #ffffff !important;
    background: #dc2626 !important;
    background-image: radial-gradient(circle at 112% -18%, rgba(255, 255, 255, .2) 0 34%, transparent 35%) !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 #fca5a5 !important;
}

.dashboard-cost-grid .dashboard-card:hover,
.dashboard-cost-grid a:hover > .dashboard-card {
    background: #b91c1c !important;
    box-shadow: 9px 9px 0 #fca5a5 !important;
}

.dashboard-cost-grid .dashboard-card .card-title,
.dashboard-cost-grid .dashboard-card p.card-title {
    color: #fee2e2 !important;
}

.dashboard-cost-grid .dashboard-card .card-value,
.dashboard-cost-grid .dashboard-card h2.card-value,
.dashboard-cost-grid .dashboard-card strong {
    color: #ffffff !important;
}

.dashboard-cost-grid .dashboard-card small,
.dashboard-cost-grid .dashboard-card .text-white-50,
.dashboard-cost-grid .dashboard-card .text-muted {
    color: #fecaca !important;
}

.dashboard-cost-grid .dashboard-card .card-icon {
    color: #991b1b !important;
    background: #ffffff !important;
    border-color: var(--pg-border) !important;
    box-shadow: 3px 3px 0 var(--pg-border) !important;
}

/* Win over the general nth-card color rotation inside cost sections. */
.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) .dashboard-card,
.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) .dashboard-card.card-metallic-red,
.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) .dashboard-card.card-metallic-blue {
    color: #ffffff !important;
    background-color: #dc2626 !important;
    background-image: radial-gradient(circle at 112% -18%, rgba(255, 255, 255, .2) 0 34%, transparent 35%) !important;
    border-color: var(--pg-border) !important;
    box-shadow: 7px 7px 0 #fca5a5 !important;
}

.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) .dashboard-card .card-icon {
    color: #991b1b !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: var(--pg-border) !important;
    box-shadow: 3px 3px 0 var(--pg-border) !important;
}

.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) a:hover .dashboard-card,
.dashboard-section-title + .row.dashboard-cost-grid > div:nth-child(n) .dashboard-card:hover {
    background-color: #b91c1c !important;
    box-shadow: 9px 9px 0 #fca5a5 !important;
}

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

.dashboard-card .card-body > .d-flex > div:first-child {
    min-width: 0;
    max-width: calc(100% - 60px);
}

.dashboard-card .card-title,
.dashboard-card p.card-title {
    margin-bottom: .45rem !important;
    color: #475569 !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    line-height: 1.35;
    letter-spacing: .075em;
    opacity: 1 !important;
}

.dashboard-card .card-value,
.dashboard-card h2.card-value {
    margin-bottom: .35rem !important;
    color: #0f172a !important;
    font-size: clamp(1.2rem, 1.35vw, 1.65rem) !important;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: -.035em;
    word-spacing: .12em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    opacity: 1 !important;
}

.dashboard-card small,
.dashboard-card .text-white-50,
.dashboard-card .text-muted,
.card-metallic-dark .text-muted,
.list-group-metallic .text-muted {
    color: #64748b !important;
    font-weight: 600;
    line-height: 1.35;
    opacity: 1 !important;
}

.dashboard-card .d-grid.gap-1 {
    gap: .12rem !important;
    margin-top: .45rem;
}

.dashboard-card .d-grid.gap-1 small {
    font-size: .7rem !important;
    line-height: 1.25;
}

.dashboard-card .d-grid.gap-1 small strong {
    margin-left: .75rem;
    color: #0f172a !important;
    font-weight: 800;
}

.dashboard-card .list-group-item,
.list-group-metallic .list-group-item {
    color: var(--pg-foreground) !important;
    background: transparent !important;
    border-color: var(--pg-soft-border) !important;
}

/* Legacy white utility classes must remain readable on the light dashboard cards. */
.dashboard-card .text-white,
.list-group-metallic .text-white {
    color: var(--pg-foreground) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.dashboard-cost-grid .dashboard-card .text-white {
    color: #ffffff !important;
}

.dashboard-card .table td,
.dashboard-card .table td span:not(.badge),
.dashboard-card .table-metallic td,
.dashboard-card .table-metallic .text-white-50 {
    color: var(--pg-foreground) !important;
    opacity: 1 !important;
}

.dashboard-card .table thead th,
.dashboard-card .table-metallic thead th {
    color: #334155 !important;
}

.dashboard-card .badge.bg-label-success {
    color: #065f46 !important;
}

.dashboard-card .badge.bg-label-warning {
    color: #78350f !important;
}

.dashboard-card .badge.bg-label-danger {
    color: #7f1d1d !important;
}

/* Dashboard hero and section labels */
.welcome-section {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 0 var(--pg-radius-lg) var(--pg-radius-lg) var(--pg-radius-lg) !important;
    box-shadow: 9px 9px 0 var(--pg-tertiary) !important;
    margin-top: 1.5rem !important;
}

.welcome-section::before {
    top: -90px !important;
    right: -70px !important;
    width: 260px !important;
    height: 260px !important;
    background: var(--pg-tertiary) !important;
    border: 2px solid var(--pg-border);
    border-radius: 50%;
    opacity: .92;
}

.welcome-section::after {
    content: "";
    position: absolute;
    right: 26%;
    bottom: -22px;
    width: 44px;
    height: 44px;
    background: repeating-linear-gradient(45deg, var(--pg-secondary) 0 5px, #fff 5px 10px);
    border: 2px solid var(--pg-border);
    transform: rotate(14deg);
}

.welcome-content,
.quick-actions-grid {
    position: relative;
    z-index: 2;
}

.welcome-section h3,
.welcome-section p {
    color: var(--pg-foreground) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

.welcome-date-badge {
    color: var(--pg-foreground) !important;
    background: #fef3c7 !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-full) !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.dashboard-section-title {
    color: var(--pg-foreground) !important;
    font-family: "Outfit", sans-serif;
    font-size: .95rem;
    letter-spacing: .08em;
    text-shadow: none !important;
}

.dashboard-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--pg-foreground);
    background: var(--pg-tertiary);
    border: 2px solid var(--pg-border);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--pg-border);
}

.dashboard-section-title::after {
    flex: 1;
    height: 3px !important;
    background: repeating-linear-gradient(90deg, var(--pg-accent) 0 10px, transparent 10px 18px) !important;
    opacity: .55 !important;
}

.glass-footer,
.footer.glass-footer {
    position: fixed !important;
    inset: auto 1rem 0 1rem !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 1035 !important;
    color: var(--pg-muted-foreground) !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 2px solid var(--pg-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--pg-radius-lg) var(--pg-radius-lg) 0 0 !important;
    box-shadow: 5px -5px 0 rgba(52, 211, 153, .32) !important;
    backdrop-filter: none !important;
}

/* Reserve content space for the fixed footer on every shared admin/cashier shell. */
body.has-msms-fixed-footer .content-wrapper,
body.has-msms-fixed-footer .main-panel > .content-wrapper,
body.has-msms-fixed-footer .checkout-container {
    padding-bottom: var(--pg-fixed-footer-clearance) !important;
}

@media (min-width: 1200px) {
    html.layout-menu-fixed:not(.layout-menu-collapsed) .glass-footer,
    html.layout-menu-fixed:not(.layout-menu-collapsed) .footer.glass-footer {
        left: calc(var(--bs-menu-width) + 1rem) !important;
    }

    html.layout-menu-fixed.layout-menu-collapsed .glass-footer,
    html.layout-menu-fixed.layout-menu-collapsed .footer.glass-footer {
        left: calc(var(--bs-menu-collapsed-width) + 1rem) !important;
    }
}

.glass-footer .container-xxl {
    min-height: 58px;
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

.glass-footer .footer-text,
.footer-standalone .footer-text {
    color: #475569 !important;
    font-family: "Plus Jakarta Sans", "MSMS Jakarta Fallback", sans-serif !important;
    font-size: .82rem;
    font-weight: 700 !important;
    line-height: 1.4;
}

.glass-footer .footer-text a,
.footer-standalone .footer-text a {
    color: var(--pg-accent) !important;
}

.glass-footer .footer-text a:hover,
.footer-standalone .footer-text a:hover {
    color: var(--pg-accent-dark) !important;
}

/* Shared Bootstrap tooltip treatment. */
.tooltip {
    --bs-tooltip-max-width: 420px;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-bg: #1e293b;
    --bs-tooltip-opacity: 1;
    z-index: 1095 !important;
    font-family: "Plus Jakarta Sans", "MSMS Jakarta Fallback", sans-serif !important;
}

.tooltip.show {
    opacity: 1 !important;
}

.tooltip .tooltip-inner {
    width: max-content;
    min-width: 230px;
    max-width: min(420px, calc(100vw - 2rem)) !important;
    padding: .85rem 1rem !important;
    color: #ffffff !important;
    background: #1e293b !important;
    border: 2px solid #0f172a;
    border-radius: 12px !important;
    box-shadow: 5px 5px 0 var(--pg-secondary);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left !important;
}

.tooltip .tooltip-inner span,
.tooltip .tooltip-inner div {
    color: inherit;
}

.tooltip .tooltip-inner .text-danger { color: #fda4af !important; }
.tooltip .tooltip-inner .text-success { color: #6ee7b7 !important; }
.tooltip .tooltip-inner .text-warning { color: #fde68a !important; }
.tooltip .tooltip-inner .text-info { color: #c4b5fd !important; }
.tooltip .tooltip-inner .text-white-50 { color: #cbd5e1 !important; }

.bs-tooltip-top .tooltip-arrow::before,
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #0f172a !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #0f172a !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #0f172a !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #0f172a !important;
}

/* Buttons */
.btn,
.btn-modern,
.btn-glass,
button.btn-primary,
button.btn-secondary,
input[type="submit"],
input[type="button"] {
    min-height: 42px;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-full) !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700 !important;
    box-shadow: var(--pg-shadow) !important;
    transition: transform var(--pg-bounce), box-shadow var(--pg-bounce), background-color var(--pg-bounce) !important;
}

.btn:hover,
.btn-modern:hover,
.btn-glass:hover,
button.btn-primary:hover,
button.btn-secondary:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--pg-shadow-hover) !important;
}

.btn:active,
.btn-modern:active,
.btn-glass:active,
button.btn-primary:active,
button.btn-secondary:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 var(--pg-border) !important;
}

.btn-primary,
.btn-modern.btn-primary,
.btn-glass-primary,
button.btn-primary,
input.btn-primary,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background: var(--pg-accent) !important;
    background-image: none !important;
    border-color: var(--pg-border) !important;
}

.btn-primary:hover,
.btn-modern.btn-primary:hover,
.btn-glass-primary:hover,
button.btn-primary:hover {
    color: #fff !important;
    background: var(--pg-accent-dark) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
button.btn-secondary {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border-color: var(--pg-border) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
button.btn-secondary:hover {
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
}

.btn-success {
    color: var(--pg-foreground) !important;
    background: var(--pg-quaternary) !important;
}

.btn-warning,
.btn-glass-warning {
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
}

.btn-info,
.btn-glass-info {
    color: var(--pg-foreground) !important;
    background: #c4b5fd !important;
}

.btn-danger {
    color: #fff !important;
    background: var(--pg-danger) !important;
}

.btn-link,
.btn-close,
.navbar .nav-link,
.dropdown-toggle.hide-arrow {
    box-shadow: none !important;
}

.btn-close {
    border: 0 !important;
}

.btn-glass {
    color: var(--pg-foreground) !important;
    background: #f3e8ff !important;
    backdrop-filter: none !important;
}

.btn-glass i,
.btn-glass span {
    color: var(--pg-foreground) !important;
    text-shadow: none !important;
}

/* Forms */
.form-label,
.form-field label,
.form-label-modern,
label:not(.form-check-label) {
    color: var(--pg-foreground) !important;
    font-size: .76rem;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.form-control,
.form-select,
.form-control-modern,
.input-group-text,
.select2-container--default .select2-selection,
.select2-container--bootstrap .select2-selection,
.phone-select-btn,
.otp-digit {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: var(--pg-radius-sm) !important;
    box-shadow: 4px 4px 0 transparent !important;
    transition: border-color var(--pg-bounce), box-shadow var(--pg-bounce), transform var(--pg-bounce) !important;
}

.form-control:focus,
.form-select:focus,
.form-control-modern:focus,
.select2-container--open .select2-selection,
.phone-select-btn:hover,
.phone-select-btn.open,
.otp-digit:focus {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border-color: var(--pg-accent) !important;
    outline: 0 !important;
    box-shadow: 4px 4px 0 var(--pg-accent) !important;
}

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

.input-group-text {
    background: var(--pg-muted) !important;
}

.form-check-input {
    border: 2px solid var(--pg-border) !important;
}

.form-check-input:checked {
    background-color: var(--pg-accent) !important;
    border-color: var(--pg-border) !important;
}

.form-range::-webkit-slider-thumb {
    background: var(--pg-accent);
    border: 2px solid var(--pg-border);
}

/* Tables, tabs, pagination and data tools */
.table-responsive {
    border-radius: var(--pg-radius-md);
}

.table,
.table-modern,
.table-metallic,
table.dataTable {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
}

.table thead th,
.table-modern thead th,
.table-metallic thead th,
table.dataTable thead th {
    color: var(--pg-foreground) !important;
    background: #f3e8ff !important;
    border-bottom: 2px solid var(--pg-border) !important;
    font-size: .76rem;
    font-weight: 800 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.table tbody td,
.table-modern tbody td,
.table-metallic td,
table.dataTable tbody td {
    color: var(--pg-foreground) !important;
    background-color: var(--pg-surface);
    border-bottom: 1px dashed var(--pg-soft-border) !important;
    text-shadow: none !important;
}

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

.page-link {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 50% !important;
    margin: 0 .18rem;
    font-weight: 700;
}

.page-item.active .page-link {
    color: #fff !important;
    background: var(--pg-accent) !important;
    box-shadow: 2px 2px 0 var(--pg-border);
}

.nav-tabs,
.nav-pills {
    gap: .4rem;
    border-bottom: 2px dashed var(--pg-soft-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--pg-muted-foreground) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pg-radius-full) !important;
    font-weight: 700;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
    border-color: var(--pg-border) !important;
    box-shadow: 3px 3px 0 var(--pg-border);
}

.dropdown-menu,
.select2-dropdown,
.phone-select-dropdown,
.datepicker,
.ui-menu {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: var(--pg-shadow) !important;
    backdrop-filter: none !important;
}

.dropdown-item,
.phone-option {
    color: var(--pg-foreground) !important;
    border-radius: var(--pg-radius-sm) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.phone-option:hover,
.phone-option.selected {
    color: var(--pg-foreground) !important;
    background: #fef3c7 !important;
}

/* Feedback */
.badge,
.badge-modern,
.menu-badge {
    border: 2px solid currentColor;
    border-radius: var(--pg-radius-full) !important;
    font-weight: 700;
    box-shadow: 2px 2px 0 rgba(30, 41, 59, .25);
}

.bg-label-primary,
.badge-primary {
    color: #6d28d9 !important;
    background: #ede9fe !important;
}

.bg-label-success,
.badge-success {
    color: #065f46 !important;
    background: #d1fae5 !important;
}

.bg-label-warning,
.badge-warning {
    color: #92400e !important;
    background: #fef3c7 !important;
}

.bg-label-danger,
.badge-danger {
    color: #991b1b !important;
    background: #fee2e2 !important;
}

.alert,
.alert-box,
.toast,
.swal-modal {
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: var(--pg-shadow) !important;
}

.alert-success,
.alert-box.alert-success {
    color: #064e3b !important;
    background: #d1fae5 !important;
}

.alert-warning {
    color: #78350f !important;
    background: #fef3c7 !important;
}

.alert-danger,
.alert-error {
    color: #7f1d1d !important;
    background: #fee2e2 !important;
}

.alert-info {
    color: #4c1d95 !important;
    background: #ede9fe !important;
}

.progress {
    background: var(--pg-muted) !important;
    border: 2px solid var(--pg-border);
    border-radius: var(--pg-radius-full);
}

.progress-bar {
    background: var(--pg-accent) !important;
}

/* Login */
body:has(.left-panel + .right-panel) {
    background: var(--pg-background) !important;
}

.left-panel {
    color: var(--pg-foreground) !important;
    background-color: #fef3c7 !important;
    background-image:
        radial-gradient(circle at 18px 18px, rgba(30, 41, 59, .16) 2px, transparent 2.5px),
        linear-gradient(145deg, transparent 64%, rgba(244, 114, 182, .28) 64%) !important;
    background-size: 36px 36px, 100% 100% !important;
    border-right: 2px solid var(--pg-border);
}

.left-panel::before {
    width: 190px !important;
    height: 190px !important;
    top: -58px !important;
    left: -48px !important;
    background: var(--pg-secondary) !important;
    border: 2px solid var(--pg-border);
    border-radius: 50%;
    opacity: .92;
}

.left-panel::after {
    width: 150px !important;
    height: 150px !important;
    right: -48px !important;
    bottom: -45px !important;
    background: var(--pg-quaternary) !important;
    border: 2px solid var(--pg-border);
    transform: rotate(14deg);
    opacity: .9;
}

.right-panel {
    background-color: var(--pg-background) !important;
    background-image: radial-gradient(circle, rgba(139, 92, 246, .14) 2px, transparent 2.5px) !important;
    background-size: 28px 28px !important;
}

.brand-logo {
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 36px 36px 36px 0 !important;
    box-shadow: 9px 9px 0 var(--pg-accent) !important;
}

.brand-logo:hover {
    transform: translate(-2px, -2px) rotate(-1deg) !important;
    box-shadow: 12px 12px 0 var(--pg-accent) !important;
}

.brand-logo .initials {
    color: var(--pg-accent) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.brand-name,
.brand-sub,
.feature-text,
.feature-text strong,
.card-header h2,
.card-header p,
.phone-select-label-top,
.phone-select-label-val,
.phone-option-num,
.phone-option-tag,
.otp-hint,
.back-link {
    color: var(--pg-foreground) !important;
}

.feature-item {
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: 4px 4px 0 rgba(30, 41, 59, .18);
}

.feature-item:nth-child(2) .feature-icon { background: #d1fae5 !important; }
.feature-item:nth-child(3) .feature-icon { background: #fef3c7 !important; }
.feature-item:nth-child(4) .feature-icon { background: #ede9fe !important; }

.login-card {
    border-radius: var(--pg-radius-lg) var(--pg-radius-lg) var(--pg-radius-lg) 0 !important;
    box-shadow: 10px 10px 0 var(--pg-secondary) !important;
}

.input-wrap .input-icon {
    color: var(--pg-accent) !important;
}

.section-divider {
    color: var(--pg-muted-foreground) !important;
}

.section-divider::before,
.section-divider::after {
    height: 2px !important;
    background: repeating-linear-gradient(90deg, var(--pg-accent) 0 6px, transparent 6px 11px) !important;
}

.resend-link {
    color: var(--pg-accent) !important;
}

/* Standalone mobile point-of-sale screen */
.mobile-sales-page {
    color: var(--pg-foreground) !important;
    background-color: var(--pg-background) !important;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(139, 92, 246, .11) 2px, transparent 2.5px),
        linear-gradient(135deg, rgba(251, 191, 36, .055) 25%, transparent 25%) !important;
    background-size: 30px 30px, 80px 80px !important;
}

.mobile-sales-page .main-container {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

.mobile-sales-page .app-topbar {
    position: relative;
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-lg) !important;
    box-shadow: 6px 6px 0 var(--pg-secondary) !important;
}

.mobile-sales-page .app-topbar::after {
    content: "";
    position: absolute;
    right: 20%;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background: var(--pg-tertiary);
    border: 2px solid var(--pg-border);
    transform: rotate(14deg);
    pointer-events: none;
}

.mobile-sales-page .header-logo {
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 12px 12px 12px 0 !important;
    box-shadow: 3px 3px 0 var(--pg-tertiary);
}

.mobile-sales-page .brand-name,
.mobile-sales-page .panel-title,
.mobile-sales-page .cyber-title,
.mobile-sales-page .pcard-name {
    color: var(--pg-foreground) !important;
    font-family: "Outfit", "Plus Jakarta Sans", sans-serif !important;
}

.mobile-sales-page .brand-sub,
.mobile-sales-page .field-hint,
.mobile-sales-page .scan-hint,
.mobile-sales-page .text-muted,
.mobile-sales-page .text-secondary {
    color: var(--pg-muted-foreground) !important;
}

.mobile-sales-page .cyber-card,
.mobile-sales-page .form-section,
.mobile-sales-page .product-results-container,
.mobile-sales-page .payment-summary {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    box-shadow: var(--pg-shadow-soft) !important;
}

.mobile-sales-page .form-section,
.mobile-sales-page .product-results-container,
.mobile-sales-page .payment-summary {
    border-color: var(--pg-soft-border) !important;
    box-shadow: 3px 3px 0 var(--pg-soft-border) !important;
}

.mobile-sales-page .panel-head {
    color: var(--pg-foreground) !important;
    background: #faf5ff !important;
    border-bottom: 2px dashed var(--pg-soft-border) !important;
}

.mobile-sales-page .panel-icon,
.mobile-sales-page .pcard-avatar {
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: 50% !important;
    box-shadow: 2px 2px 0 var(--pg-border);
}

.mobile-sales-page .cyber-btn,
.mobile-sales-page .tb-btn,
.mobile-sales-page .btn-chip,
.mobile-sales-page .bill-btn,
.mobile-sales-page .btn-cancel {
    min-height: 42px;
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-full) !important;
    font-weight: 700 !important;
    box-shadow: var(--pg-shadow) !important;
    transition: transform var(--pg-bounce), box-shadow var(--pg-bounce), background-color var(--pg-bounce) !important;
}

.mobile-sales-page .cyber-btn,
.mobile-sales-page .cyber-action-btn {
    color: #fff !important;
    background: var(--pg-accent) !important;
}

.mobile-sales-page .cyber-btn:hover:not(:disabled),
.mobile-sales-page .tb-btn:hover,
.mobile-sales-page .btn-chip:hover,
.mobile-sales-page .bill-btn:hover,
.mobile-sales-page .btn-cancel:hover {
    color: var(--pg-foreground) !important;
    background: var(--pg-tertiary) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--pg-shadow-hover) !important;
}

.mobile-sales-page .cyber-btn:hover:not(:disabled),
.mobile-sales-page .cyber-action-btn:hover:not(:disabled) {
    color: #fff !important;
    background: var(--pg-accent-dark) !important;
}

.mobile-sales-page .tb-btn-exchange {
    background: #fef3c7 !important;
}

.mobile-sales-page .tb-btn-exit,
.mobile-sales-page .btn-chip-danger,
.mobile-sales-page .cyber-btn.btn-danger {
    color: #fff !important;
    background: var(--pg-danger) !important;
}

.mobile-sales-page .cyber-input,
.mobile-sales-page .form-control,
.mobile-sales-page .form-select {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: var(--pg-radius-sm) !important;
    box-shadow: 4px 4px 0 transparent !important;
}

.mobile-sales-page .cyber-input:focus,
.mobile-sales-page .form-control:focus,
.mobile-sales-page .form-select:focus {
    border-color: var(--pg-accent) !important;
    box-shadow: 4px 4px 0 var(--pg-accent) !important;
}

.mobile-sales-page .product-card {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-soft-border) !important;
    border-left: 5px solid var(--pg-accent) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 var(--pg-soft-border);
    transition: transform var(--pg-bounce), box-shadow var(--pg-bounce) !important;
}

.mobile-sales-page .product-card:hover {
    background: #fffbeb !important;
    border-color: var(--pg-border) !important;
    border-left-color: var(--pg-accent) !important;
    transform: translate(-1px, -1px) rotate(-.2deg) !important;
    box-shadow: 5px 5px 0 var(--pg-tertiary) !important;
}

.mobile-sales-page .order-tag,
.mobile-sales-page .price-chip,
.mobile-sales-page .stock-chip {
    color: var(--pg-foreground) !important;
    background: #ede9fe !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-full) !important;
}

.mobile-sales-page .cyber-table,
.mobile-sales-page .cyber-table td,
.mobile-sales-page .cyber-table th {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
}

.mobile-sales-page .cyber-table th {
    background: #f3e8ff !important;
    border-bottom: 2px solid var(--pg-border) !important;
}

.mobile-sales-page .cyber-table td {
    border-bottom: 1px dashed var(--pg-soft-border) !important;
}

.mobile-sales-page .payment-label,
.mobile-sales-page .payment-value,
.mobile-sales-page .cyber-highlight,
.mobile-sales-page .form-section-title {
    color: var(--pg-foreground) !important;
}

.mobile-sales-page .form-section-title::after {
    height: 2px !important;
    background: repeating-linear-gradient(90deg, var(--pg-accent) 0 7px, transparent 7px 12px) !important;
}

.mobile-sales-page .cyber-modal .modal-content,
.mobile-sales-page .modal-content {
    color: var(--pg-foreground) !important;
    background: var(--pg-surface) !important;
    border: 2px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-lg) !important;
    box-shadow: var(--pg-shadow-hover) !important;
}

.mobile-sales-page .modal-header {
    background: #faf5ff !important;
    border-bottom: 2px dashed var(--pg-soft-border) !important;
}

.mobile-sales-page .modal-footer {
    background: var(--pg-muted) !important;
    border-top: 2px dashed var(--pg-soft-border) !important;
}

/* Keep decorative motion fun, short, and optional. */
@keyframes pg-pop-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.welcome-section,
.content-wrapper > .container-fluid > .row .card {
    animation: pg-pop-in 420ms cubic-bezier(.34, 1.56, .64, 1) both;
}

@media (max-width: 1199.98px) {
    .layout-menu {
        box-shadow: 6px 0 0 var(--pg-secondary) !important;
    }

    .layout-navbar {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --pg-shadow: 2px 2px 0 #1e293b;
        --pg-shadow-hover: 3px 3px 0 #1e293b;
        --pg-shadow-soft: 3px 3px 0 #e2e8f0;
    }

    .content-wrapper::before,
    .content-wrapper::after,
    .welcome-section::after {
        display: none;
    }

    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .layout-navbar,
    .navbar.glass-navbar,
    .navbar.default-layout-navbar {
        border-radius: var(--pg-radius-md) !important;
        box-shadow: 3px 3px 0 var(--pg-secondary) !important;
    }

    .welcome-section {
        padding: 1.5rem !important;
        margin-top: 3.5rem !important;
        gap: 1.25rem !important;
        box-shadow: 4px 4px 0 var(--pg-tertiary) !important;
    }

    .welcome-content {
        min-width: 0 !important;
    }

    .welcome-section h3 {
        font-size: 1.55rem !important;
    }

    .quick-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .btn,
    .btn-modern,
    .btn-glass,
    button.btn-primary,
    button.btn-secondary,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
    }

    .btn-glass {
        min-width: 0 !important;
        padding: .7rem .9rem !important;
    }

    .table-responsive {
        border: 2px solid var(--pg-border);
        box-shadow: 3px 3px 0 var(--pg-soft-border);
    }

    .dashboard-card .card-value,
    .dashboard-card h2.card-value {
        white-space: normal;
    }

    .report-metric-card h2 {
        white-space: normal;
    }

    .tooltip .tooltip-inner {
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 1.5rem) !important;
    }

    .dashboard-cost-grid .dashboard-card,
    .dashboard-cost-grid .dashboard-card.card-metallic-red,
    .dashboard-cost-grid .dashboard-card.card-metallic-blue {
        box-shadow: 3px 3px 0 #fca5a5 !important;
    }

    .left-panel {
        border-right: 0;
        border-bottom: 2px solid var(--pg-border);
    }

    .login-card {
        box-shadow: 5px 5px 0 var(--pg-secondary) !important;
    }

    .mobile-sales-page .app-topbar::after {
        display: none;
    }

    .mobile-sales-page .main-container {
        padding: .8rem !important;
    }

    .mobile-sales-page .app-topbar {
        box-shadow: 3px 3px 0 var(--pg-secondary) !important;
    }

    .mobile-sales-page .cyber-btn,
    .mobile-sales-page .tb-btn,
    .mobile-sales-page .btn-chip,
    .mobile-sales-page .bill-btn,
    .mobile-sales-page .btn-cancel {
        min-height: 48px;
    }
}

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

@media print {
    body {
        color: #000 !important;
        background: #fff !important;
    }

    body::before,
    body::after,
    .content-wrapper::before,
    .content-wrapper::after {
        display: none !important;
    }

    .card,
    .dashboard-card,
    .table-responsive {
        border-color: #000 !important;
        box-shadow: none !important;
    }
}