/* =========================================================
   TRITIP VISUAL REFRESH
   Light-first hybrid system: readable surfaces + deep navy navigation
   Orange action color + indigo premium accent
   Loaded last so page-specific legacy CSS stays visually consistent.
   ========================================================= */

:root {
    --bg-primary: #f5f7fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef2f7;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.94);
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;
    --surface-navy: #101827;
    --surface-navy-soft: #172235;

    --text-primary: #172033;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-dark: #94a3b8;

    --accent-blue: #4f46e5;
    --accent-blue-hover: #3730a3;
    --accent-blue-light: #818cf8;
    --accent-purple: #7c3aed;
    --accent-purple-hover: #6d28d9;
    --accent-purple-light: #a78bfa;
    --accent-green: #059669;
    --accent-green-hover: #047857;
    --accent-green-light: #34d399;
    --accent-red: #dc2626;
    --accent-red-hover: #b91c1c;
    --accent-red-light: #f87171;
    --accent-yellow: #d97706;
    --accent-yellow-hover: #b45309;
    --accent-yellow-light: #fbbf24;
    --accent-orange: #ea580c;
    --accent-orange-hover: #c2410c;
    --accent-orange-light: #fb923c;
    --accent-cyan: #0891b2;
    --accent-cyan-light: #22d3ee;
    --accent-pink: #db2777;

    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-strong: #94a3b8;
    --glass-border: 1px solid #e2e8f0;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 22px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 38px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.16);
    --shadow-glow-blue: 0 8px 24px rgba(79, 70, 229, 0.2);
    --shadow-glow-purple: 0 8px 24px rgba(124, 58, 237, 0.18);
    --shadow-glow-green: 0 8px 24px rgba(5, 150, 105, 0.18);
}

html,
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body {
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

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

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

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-blue) !important; }
.text-success { color: var(--accent-green) !important; }
.text-danger { color: var(--accent-red) !important; }
.text-warning { color: var(--accent-yellow) !important; }
.text-info { color: var(--accent-cyan) !important; }

/* Shared surfaces */
.glass-card,
.glass-card-static,
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.glass-card:hover,
.card:hover {
    border-color: #c7d2fe;
    box-shadow: var(--shadow-lg);
}

.glass-input,
.form-control {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.glass-input:hover,
.form-control:hover {
    background: #ffffff !important;
    border-color: var(--border-strong) !important;
}

.glass-input:focus,
.form-control:focus {
    background: #ffffff !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

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

.form-label,
.premium-form-label {
    color: var(--text-primary) !important;
}

.form-hint {
    color: var(--text-muted) !important;
}

select.form-control option,
select.premium-form-control option {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

/* Buttons: orange is the action, indigo is the premium/system accent */
.btn-primary,
.auth-card .btn-primary.w-100 {
    background: linear-gradient(135deg, var(--accent-orange), #f97316) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.23) !important;
}

.btn-primary:hover,
.auth-card .btn-primary.w-100:hover {
    background: linear-gradient(135deg, var(--accent-orange-hover), var(--accent-orange)) !important;
    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.3) !important;
}

.btn-secondary {
    background: var(--surface-navy-soft) !important;
    color: #ffffff !important;
    border: 1px solid var(--surface-navy-soft) !important;
}

.btn-secondary:hover {
    background: var(--surface-navy) !important;
    border-color: var(--surface-navy) !important;
}

.btn-outline {
    background: #ffffff !important;
    color: var(--accent-blue) !important;
    border: 1px solid #a5b4fc !important;
}

.btn-outline:hover {
    background: #eef2ff !important;
    color: var(--accent-blue-hover) !important;
    border-color: var(--accent-blue) !important;
}

.btn-success { background: var(--accent-green) !important; }
.btn-danger { background: var(--accent-red) !important; }

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.28);
    outline-offset: 2px;
}

/* Navigation and mobile bottom bar */
.navbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.navbar-brand,
.navbar-brand span {
    color: var(--surface-navy) !important;
}

.navbar-brand span {
    background: linear-gradient(135deg, var(--surface-navy), var(--accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-orange);
    background: #fff7ed;
}

.dropdown-toggle {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.dropdown-toggle:hover {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}

.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background: #eef2ff !important;
    color: var(--accent-blue) !important;
}

.bottom-nav {
    background: rgba(16, 24, 39, 0.96);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24), 0 0 24px rgba(79, 70, 229, 0.12);
}

.bottom-nav-item {
    color: #94a3b8;
}

.bottom-nav-item.active {
    color: #ffffff;
}

.bottom-nav-item.active::before {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.38), rgba(79, 70, 229, 0.38));
}

.bottom-nav-item.active::after {
    background: var(--accent-orange);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.8), 0 0 16px rgba(249, 115, 22, 0.45);
}

.btn-fab {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple));
    box-shadow: 0 10px 26px rgba(234, 88, 12, 0.28), 0 0 22px rgba(124, 58, 237, 0.18);
}

/* Cards, tables, status, alerts */
.card-footer,
.table th,
.table td,
.card-bordered,
.progress-track-content {
    border-color: var(--border-light) !important;
}

.table,
.table-container {
    background: #ffffff;
    border-color: var(--border-light);
}

.table thead {
    background: var(--surface-muted);
}

.table th {
    color: var(--text-primary);
}

.table td {
    color: var(--text-secondary);
}

.table tbody tr:hover {
    background: #eef2ff;
}

.badge-secondary {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.alert {
    border: 1px solid var(--border-light);
    border-left-width: 4px;
}

.alert-success { background: #ecfdf5; color: #047857; }
.alert-danger { background: #fef2f2; color: #b91c1c; }
.alert-warning { background: #fffbeb; color: #b45309; }
.alert-info { background: #eff6ff; color: #1d4ed8; }

.toast {
    background: #ffffff;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.modal {
    background: #ffffff;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
}

.modal-close {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

/* Admin shell: navy navigation, bright readable workspace */
.admin-layout {
    background: var(--bg-primary) !important;
}

.admin-sidebar {
    background: linear-gradient(180deg, #101827 0%, #111c2e 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
    box-shadow: 8px 0 30px rgba(15, 23, 42, 0.08);
}

.sidebar-header,
.sidebar-footer {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar-link {
    color: #a9b5c7 !important;
}

.sidebar-link:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #ffffff !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(79, 70, 229, 0.25)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.28), 0 6px 18px rgba(15, 23, 42, 0.16) !important;
}

.sidebar-link.active::before {
    background: linear-gradient(180deg, #fb923c, #818cf8) !important;
}

.sidebar-link i,
.sidebar-link:hover i,
.sidebar-link.active i {
    color: inherit;
}

.menu-label {
    color: #718096 !important;
}

.admin-main {
    background: var(--bg-primary) !important;
}

.admin-main::before {
    background:
        radial-gradient(ellipse at 16% 10%, rgba(234, 88, 12, 0.055) 0%, transparent 38%),
        radial-gradient(ellipse at 84% 22%, rgba(79, 70, 229, 0.06) 0%, transparent 42%) !important;
}

.admin-topbar .page-title h2,
.page-title h2 {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

.admin-topbar .page-title p,
.page-title p {
    color: var(--text-muted) !important;
}

.topbar-utility-group,
.user-info,
.btn-mobile-toggle {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.topbar-icon-btn {
    color: var(--text-muted) !important;
}

.topbar-icon-btn:hover,
.topbar-icon-btn.active {
    background: #eef2ff !important;
    color: var(--accent-blue) !important;
}

.user-name-text {
    color: var(--text-primary) !important;
}

.btn-website-link {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: var(--accent-orange-hover) !important;
}

.btn-website-link:hover {
    background: #ffedd5 !important;
    border-color: #fdba74 !important;
    color: var(--accent-orange-hover) !important;
}

/* Shared admin premium components */
.stat-card-premium,
.chart-panel,
.content-panel,
.premium-stat-card,
.premium-card,
.premium-driver-card {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary);
}

.stat-card-premium:hover,
.chart-panel:hover,
.content-panel:hover,
.premium-stat-card:hover,
.premium-card:hover,
.premium-driver-card:hover {
    border-color: #c7d2fe !important;
    box-shadow: var(--shadow-lg) !important;
}

.stat-card-premium .stat-label,
.premium-stat-label,
.premium-table thead th,
.chart-panel-title,
.panel-title,
.premium-card-title,
.premium-form-label {
    color: var(--text-primary) !important;
}

.stat-card-premium .stat-value,
.premium-stat-value,
.order-id-cell,
.amount-cell,
.premium-driver-name,
.premium-card-title {
    color: var(--text-primary) !important;
}

.stat-card-premium .stat-label,
.premium-stat-label,
.premium-stat-value small,
.empty-state p,
.premium-empty p,
.premium-table .cell-muted {
    color: var(--text-muted) !important;
}

.chart-filter-select,
.premium-toolbar,
.premium-toolbar .form-control,
.premium-pill,
.premium-table-wrap,
.premium-form-control,
.permission-checkbox,
.quick-action-btn,
.timeline-content,
.premium-driver-meta,
.system-info-card {
    background: var(--surface-soft) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.chart-filter-select:focus,
.premium-toolbar .form-control:focus,
.premium-form-control:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13) !important;
}

.premium-pill {
    color: var(--text-secondary) !important;
}

.premium-pill:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: var(--accent-blue) !important;
}

.premium-pill.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)) !important;
    color: #ffffff !important;
}

.premium-table tbody tr,
.premium-table tbody td {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

.premium-table tbody tr {
    background: #ffffff !important;
}

.premium-table tbody tr:hover {
    background: #eef2ff !important;
}

.quick-action-btn {
    color: var(--text-primary) !important;
}

.quick-action-btn:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.empty-state-icon,
.premium-empty-icon {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: var(--accent-blue) !important;
}

.premium-modal,
.premium-modal-content,
.premium-modal-header,
.premium-modal-footer {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
}

.premium-modal-header h4,
.premium-modal-title {
    color: var(--text-primary) !important;
}

.premium-modal-close {
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
}

.premium-modal-backdrop,
.premium-modal {
    color: var(--text-primary);
}

.admin-permission-banner {
    background: linear-gradient(135deg, #fff7ed, #eef2ff) !important;
    border-color: #fdba74 !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-permission-banner-text,
.admin-permission-banner-text strong {
    color: var(--text-primary) !important;
}

.admin-permission-banner-text .banner-sub {
    color: var(--text-muted) !important;
}

/* Auth: keep premium depth, but make the card and controls unmistakable */
.auth-premium-bg {
    background:
        radial-gradient(circle at 8% 12%, rgba(251, 146, 60, 0.2), transparent 28%),
        radial-gradient(circle at 90% 82%, rgba(129, 140, 248, 0.2), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #fff7ed 100%) !important;
}

.auth-premium-bg::before {
    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%) !important;
}

.auth-premium-orb.orb-1 {
    background: linear-gradient(135deg, #fb923c, #fbbf24) !important;
    opacity: 0.25;
}

.auth-premium-orb.orb-2 {
    background: linear-gradient(135deg, #818cf8, #c084fc) !important;
    opacity: 0.24;
}

.auth-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
}

.auth-header .navbar-brand,
.auth-title {
    color: var(--text-primary) !important;
}

.auth-header .navbar-brand {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.auth-title {
    color: var(--text-primary) !important;
}

.auth-subtitle,
.auth-divider,
.auth-terms,
.back-link {
    color: var(--text-muted) !important;
}

.auth-form-label {
    color: var(--text-primary) !important;
}

.auth-form-label i {
    color: var(--accent-orange) !important;
}

.auth-input {
    background: #ffffff !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.auth-input::placeholder {
    color: #94a3b8 !important;
}

.auth-input:focus {
    background: #ffffff !important;
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.13), 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

.auth-toggle-pw {
    color: var(--text-muted) !important;
}

.auth-toggle-pw:hover {
    color: var(--accent-orange) !important;
    background: #fff7ed !important;
}

.auth-divider::before,
.auth-divider::after {
    background: var(--border-light) !important;
}

.back-link:hover,
.auth-terms a {
    color: var(--accent-orange) !important;
}

.auth-card .btn-outline.w-100 {
    background: #ffffff !important;
    color: var(--accent-blue) !important;
    border-color: #a5b4fc !important;
}

.auth-card .alert {
    border-color: var(--border-light) !important;
}

.auth-demo-card {
    background: var(--surface-soft) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.auth-demo-title,
.auth-demo-btn {
    color: var(--text-secondary) !important;
}

.auth-demo-btn {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
}

.auth-demo-btn:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: var(--accent-blue) !important;
}

/* Landing page: brighter canvas while retaining colorful premium accents */
.landing-bg .orb-1 { background: rgba(234, 88, 12, 0.12) !important; }
.landing-bg .orb-2 { background: rgba(79, 70, 229, 0.11) !important; }
.landing-bg .orb-3 { background: rgba(5, 150, 105, 0.09) !important; }

.nav-premium.scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.nav-logo,
.nav-links a,
.nav-btn-ghost,
.hero-inner h1,
.section-header h2,
.feature-card h4,
.step-card h4,
.resto-card-body h5,
.cta-box h2,
.signup-cta h4 {
    color: var(--text-primary) !important;
}

.nav-logo,
.footer-brand {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.nav-links a:hover {
    color: var(--accent-orange) !important;
    background: #fff7ed !important;
}

.nav-btn-ghost,
.hero-cta .cta-ghost {
    background: #ffffff !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.nav-btn-ghost:hover,
.hero-cta .cta-ghost:hover {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
    color: var(--accent-orange-hover) !important;
}

.nav-btn-primary,
.hero-cta .cta-main {
    background: linear-gradient(135deg, var(--accent-orange), #f97316) !important;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.23) !important;
}

.hero-inner p,
.section-header p,
.feature-card p,
.step-card p,
.resto-desc,
.resto-meta,
.footer-col p,
.footer-col ul a,
.footer-bottom p,
.hero-metric .lbl,
.cta-box p,
.signup-cta p {
    color: var(--text-secondary) !important;
}

.hero-badge,
.section-header .section-tag {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: var(--accent-orange-hover) !important;
}

.hero-inner h1 .gradient-text {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple), var(--accent-blue)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.hero-metrics,
.feature-card,
.resto-card,
.signup-cta {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.feature-card:hover,
.resto-card:hover,
.signup-cta:hover {
    border-color: #c7d2fe !important;
    box-shadow: var(--shadow-lg) !important;
}

.hero-metric + .hero-metric::before,
.resto-card-foot,
.footer-bottom,
.footer-premium {
    border-color: var(--border-light) !important;
}

.resto-card-foot {
    color: var(--text-muted) !important;
}

.cta-box {
    background: linear-gradient(135deg, #fff7ed, #eef2ff) !important;
    border-color: #fdba74 !important;
    box-shadow: var(--shadow-md) !important;
}

.footer-premium {
    background: var(--surface-navy) !important;
}

.footer-premium .footer-col h6,
.footer-premium .footer-col p,
.footer-premium .footer-col ul a,
.footer-premium .footer-col ul li span,
.footer-premium .footer-bottom p {
    color: #a9b5c7 !important;
}

.footer-premium .footer-col ul a:hover {
    color: #fb923c !important;
}

.footer-socials a {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

/* User mobile drawer */
.user-mobile-nav-overlay,
.mobile-nav-overlay {
    background: rgba(248, 250, 252, 0.96) !important;
}

.user-mobile-nav-content,
.mobile-nav-content {
    color: var(--text-primary);
}

.user-mobile-nav-header,
.mobile-nav-header,
.user-mobile-footer,
.mobile-nav-footer {
    border-color: var(--border-light) !important;
}

.user-mobile-profile-card,
.user-mobile-admin-card,
.mobile-user-card,
.mobile-welcome-card,
.user-menu-item,
.mobile-menu-item {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.user-menu-item.active,
.mobile-menu-item.active {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.user-menu-title,
.mobile-nav-section-title,
.user-card-email,
.u-sub,
.mobile-user-role,
.welcome-text p {
    color: var(--text-muted) !important;
}

.u-title,
.user-card-name,
.mobile-user-name,
.welcome-text h6 {
    color: var(--text-primary) !important;
}

/* Responsive safety net */
img,
video,
iframe,
canvas {
    max-width: 100%;
}

.table-container,
.premium-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.input-group {
    min-width: 0;
}

.input-group .btn {
    min-height: 44px;
}

@media (max-width: 992px) {
    .admin-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .admin-topbar,
    .admin-header-flex {
        gap: 14px;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 0.95rem;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .admin-main {
        padding: 14px 10px !important;
    }

    .auth-premium-bg {
        padding: 20px 12px !important;
    }

    .auth-card {
        padding: 30px 18px !important;
        border-radius: 22px !important;
    }

    .auth-input,
    .form-control {
        min-height: 48px;
        font-size: 16px !important;
    }

    .btn,
    .nav-btn,
    .quick-action-btn,
    .mobile-menu-item,
    .user-menu-item {
        min-height: 44px;
    }

    .admin-btn-group,
    .input-group,
    .hero-cta {
        width: 100%;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group .form-control,
    .input-group .btn {
        width: 100%;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .toast {
        min-width: 0;
        width: 100%;
    }
}

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

/* Final contrast and touch-target refinements */
.status-pill.pending,
.premium-badge-warning,
.stat-trend.neutral {
    background: #fffbeb !important;
    color: #92400e !important;
}

.status-pill.confirmed,
.premium-badge-info {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.status-pill.shopping {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
}

.status-pill.on_the_way {
    background: #fff7ed !important;
    color: #c2410c !important;
}

.status-pill.delivered,
.premium-badge-success,
.stat-trend.up {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.status-pill.cancelled,
.premium-badge-danger,
.stat-trend.down {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.premium-badge-dark {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.nav-hamburger,
.menu-toggle,
.mobile-nav-close,
.user-mobile-close,
.premium-modal-close,
.modal-close,
.topbar-icon-btn,
.btn-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
}

.nav-hamburger span {
    background: var(--surface-navy) !important;
}

.mobile-nav-close,
.user-mobile-close {
    background: #ffffff !important;
    border-color: var(--border-medium) !important;
    color: var(--surface-navy) !important;
}

.mobile-nav-close:hover,
.user-mobile-close:hover {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
    color: var(--accent-orange-hover) !important;
}

.nav-hamburger:focus-visible,
.menu-toggle:focus-visible,
.mobile-nav-close:focus-visible,
.user-mobile-close:focus-visible {
    outline: 3px solid rgba(234, 88, 12, 0.3);
    outline-offset: 2px;
}

/* =========================================================
   PAGE-BY-PAGE POLISH
   These rules intentionally use scoped selectors and !important
   because several legacy pages contain inline/page-local CSS.
   ========================================================= */

/* Admin: normalize legacy inline dark surfaces inside the readable workspace. */
.admin-main [style*="rgba(15, 23, 42"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="rgba(15,23,42"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="rgba(30, 41, 59"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="rgba(30,41,59"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="#0f172a"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="#1e293b"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]) {
    background: var(--surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main [style*="color: white"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#ffffff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #ffffff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]) {
    color: var(--text-primary) !important;
}

.admin-main [style*="border: 1px solid rgba(255,255,255"],
.admin-main [style*="border: 1px solid rgba(255, 255, 255"] {
    border-color: var(--border-light) !important;
}

.admin-main hr,
.admin-main [style*="border-top: 1px solid rgba(255"],
.admin-main [style*="border-bottom: 1px solid rgba(255"] {
    border-color: var(--border-light) !important;
}

/* Admin forms, filters, reports and settings */
.admin-main .premium-toolbar .form-control,
.admin-main .glass-card .form-control,
.admin-main .glass-card-static .form-control,
.admin-main .premium-card .form-control,
.admin-main .premium-toolbar .premium-form-control,
.admin-main .glass-card .premium-form-control,
.admin-main .glass-card-static .premium-form-control,
.admin-main .premium-card .premium-form-control,
.admin-main .filter-input,
.admin-main .form-select-custom,
.admin-main .date-inp {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main .premium-toolbar .form-control:focus,
.admin-main .glass-card .form-control:focus,
.admin-main .glass-card-static .form-control:focus,
.admin-main .premium-card .form-control:focus,
.admin-main .premium-toolbar .premium-form-control:focus,
.admin-main .glass-card .premium-form-control:focus,
.admin-main .glass-card-static .premium-form-control:focus,
.admin-main .premium-card .premium-form-control:focus,
.admin-main .filter-input:focus,
.admin-main .form-select-custom:focus,
.admin-main .date-inp:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13) !important;
    outline: none !important;
}

.admin-main option {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

.admin-main .filter-card,
.admin-main .filter-panel,
.admin-main .filter-section,
.admin-main .hero-filter-section,
.admin-main .premium-toolbar,
.admin-main .filters-grid {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
}

.admin-main .heatmap-panel,
.admin-main .glass-box-panel,
.admin-main .chart-panel,
.admin-main .report-panel,
.admin-main .content-panel,
.admin-main .table-panel,
.admin-main .premium-card {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}

.admin-main .hero-conv-banner,
.admin-main .rpt-hero-banner,
.admin-main .admin-permission-banner {
    background: linear-gradient(135deg, #fff7ed, #eef2ff) !important;
    border-color: #fdba74 !important;
    color: var(--text-primary) !important;
}

.admin-main .hero-title-text,
.admin-main .hero-desc-text,
.admin-main .card-title-text,
.admin-main .panel-title,
.admin-main .filter-label,
.admin-main .filter-field-item label,
.admin-main .stat-number-lg,
.admin-main .stat-label,
.admin-main .item-card-hero h3,
.admin-main .podium-card h3 {
    color: var(--text-primary) !important;
}

.admin-main .hero-desc-text,
.admin-main .filter-label,
.admin-main .hero-filter-section small,
.admin-main .metric-item-label,
.admin-main .empty-state,
.admin-main .empty-state p {
    color: var(--text-muted) !important;
}

.admin-main .form-select-custom,
.admin-main .filter-input,
.admin-main .date-inp,
.admin-main .chart-filter-select {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium) !important;
}

.admin-main .filter-chip-btn,
.admin-main .preset-pill,
.admin-main .premium-pill {
    background: var(--surface-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
}

.admin-main .filter-chip-btn.active,
.admin-main .preset-pill.active,
.admin-main .premium-pill.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.admin-main .premium-table-wrap,
.admin-main .table-responsive-custom,
.admin-main .heatmap-table-container,
.admin-main .table-container {
    border-color: var(--border-light) !important;
    background: #ffffff !important;
}

.admin-main table thead th {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main table tbody td {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

.admin-main table tbody tr:hover {
    background: #eef2ff !important;
}

/* POS: a high-clarity workspace while preserving sticky cart/tally behavior. */
.admin-main .pos-topbar,
.admin-main .menu-search-row,
.admin-main .pos-footer-cart,
.admin-main .tally-bottom-bar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1) !important;
}

.admin-main .pos-topbar h4,
.admin-main .cart-summary-total,
.admin-main .item-row-title,
.admin-main .tally-grand-total,
.admin-main .tally-toast-text strong {
    color: var(--text-primary) !important;
}

.admin-main .pos-mode-switcher,
.admin-main .restaurant-chip,
.admin-main .resto-search-wrap input,
.admin-main .menu-search-bar,
.admin-main .pos-menu-card,
.admin-main .cart-item-row,
.admin-main .cart-totals,
.admin-main .payment-tab,
.admin-main .change-helper,
.admin-main .tally-total-display,
.admin-main .tally-cash-btn {
    background: var(--surface-soft) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

.admin-main .restaurant-chip:hover,
.admin-main .restaurant-chip.active,
.admin-main .payment-tab.active,
.admin-main .tally-cash-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.admin-main .pos-menu-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: var(--shadow-lg) !important;
}

.admin-main .menu-card-title,
.admin-main .menu-card-price,
.admin-main .cart-summary-left,
.admin-main .item-row-price,
.admin-main .total-row,
.admin-main .cart-expand-icon,
.admin-main .payment-tab,
.admin-main .tally-item-count,
.admin-main .tally-total-display .label,
.admin-main .tally-total-display strong,
.admin-main .tally-total-display .label {
    color: var(--text-secondary) !important;
}

.admin-main .menu-card-price,
.admin-main .tally-grand-total,
.admin-main .tally-total-display strong {
    color: var(--accent-orange) !important;
}

.admin-main .pos-footer-cart .form-control,
.admin-main .tally-change-modal .form-control,
.admin-main .tally-cash-input {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main .tally-change-modal,
.admin-main .tally-toast-banner {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* User home, restaurant, cart and checkout */
.main-content .glass-card,
.main-content .glass-card-static {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.main-content .glass-card:hover,
.main-content .glass-card-static:hover {
    border-color: #c7d2fe !important;
    box-shadow: var(--shadow-lg) !important;
}

.main-content [style*="color: #f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.main-content [style*="color:#f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.main-content [style*="color: white"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.main-content [style*="color:#fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.main-content [style*="color: #fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]) {
    color: var(--text-primary) !important;
}

.main-content [style*="rgba(59, 130, 246"],
.main-content [style*="rgba(59,130,246"],
.main-content [style*="rgba(139, 92, 246"],
.main-content [style*="rgba(139,92,246"],
.main-content [style*="rgba(16, 185, 129"],
.main-content [style*="rgba(16,185,129"] {
    border-color: var(--border-light) !important;
}

.main-content .cart-item,
.main-content .cart-summary-row,
.main-content .cart-summary-total,
.main-content .menu-item,
.main-content .order-card,
.main-content .promo-ticket,
.main-content .profile-sidebar-wrap,
.main-content .profile-main-wrap {
    border-color: var(--border-light) !important;
}

.main-content .cart-item,
.main-content .menu-item,
.main-content .order-card,
.main-content .promo-ticket {
    background: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
}

.main-content .cart-item-title,
.main-content .cart-item-price,
.main-content .menu-item-title,
.main-content .order-card h4,
.main-content .profile-name,
.main-content .ticket-title,
.main-content .ticket-code {
    color: var(--text-primary) !important;
}

.main-content .cart-item-price,
.main-content .menu-item-price,
.main-content .cart-summary-total,
.main-content .text-accent {
    color: var(--accent-orange) !important;
}

.main-content .quantity-btn,
.main-content .menu-item-add {
    min-width: 44px;
    min-height: 44px;
}

.main-content .payment-option,
.main-content .payment-method,
.main-content .checkout-option {
    background: var(--surface-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

.main-content .payment-option.active,
.main-content .payment-method.active,
.main-content .checkout-option.active {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}

/* Checkout layout remains one-column and readable on small devices. */
@media (max-width: 767px) {
    .main-content .cart-grid,
    .main-content .grid-profile-layout,
    .main-content .grid-checkout-layout,
    .main-content .grid-order-layout {
        grid-template-columns: 1fr !important;
    }

    .main-content .input-group,
    .main-content .checkout-actions,
    .main-content .promo-input-row {
        flex-wrap: wrap !important;
    }

    .main-content .input-group > *,
    .main-content .promo-input-row > *,
    .main-content .checkout-actions > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .main-content .cart-item {
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .main-content .cart-item-info {
        min-width: 0 !important;
    }

    .main-content .cart-item-title,
    .main-content .ticket-title,
    .main-content .order-card h4 {
        overflow-wrap: anywhere;
    }
}

/* Tracking and support chat */
.main-content #order-tracking,
.main-content #review-card,
.main-content #driver-card,
.main-content #chat-window {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.main-content .timeline-content,
.main-content .tracking-step,
.main-content .chat-msg,
.main-content #chat-messages {
    background: var(--surface-soft) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

.main-content .chat-msg-driver {
    background: #eef2ff !important;
    color: var(--text-primary) !important;
}

.main-content .chat-msg-user {
    background: #fff7ed !important;
    color: var(--text-primary) !important;
}

/* =========================================================
   ADMIN FINAL LIGHT SURFACE HARDENING
   Legacy admin pages still contain inline dark-theme paint styles.
   These rules change paint only; display/position/layout remain JS-owned.
   ========================================================= */

.admin-main,
.admin-main * {
    scrollbar-color: #cbd5e1 #f8fafc;
}

/* Backdrops stay translucent for focus, but no longer look like a black theme. */
.admin-main [id$="Backdrop"],
.admin-main [id$="backdrop"],
.admin-main #branchModal,
.admin-main #userModal,
.admin-main #shareholderModal,
.admin-main #executeModal,
.admin-main .modal-backdrop,
.admin-main .modal-backdrop-custom,
.admin-main .premium-modal-backdrop {
    background: rgba(15, 23, 42, 0.24) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Every admin edit/view surface gets the same premium paper treatment. */
.admin-main #branchModal > div,
.admin-main #userModal > div,
.admin-main #editOrderModal,
.admin-main #expense-modal,
.admin-main #instruction-modal,
.admin-main #shareholderModal > div,
.admin-main #executeModal > div,
.admin-main #account-modal,
.admin-main #transaction-modal,
.admin-main #receiptModal,
.admin-main #printerModal,
.admin-main #expenseModal,
.admin-main .premium-modal,
.admin-main .modal-content {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2) !important;
}

.admin-main #branchModal > div > .flex-between,
.admin-main #userModal > div > .flex-between,
.admin-main #editOrderModal > .flex-between,
.admin-main .modal-header,
.admin-main .premium-modal-header,
.admin-main .modal-footer,
.admin-main .premium-modal-footer {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.admin-main #branchModal h4,
.admin-main #userModal h4,
.admin-main #editOrderModal h4,
.admin-main #editOrderModal label,
.admin-main #expense-modal h4,
.admin-main #instruction-modal h4,
.admin-main .modal-content h4,
.admin-main .premium-modal-header h4,
.admin-main .modal-title,
.admin-main .text-white:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]) {
    color: var(--text-primary) !important;
}

.admin-main .modal-body,
.admin-main .premium-modal-body,
.admin-main #editOrderModal form,
.admin-main #branchModal form,
.admin-main #userModal form {
    color: var(--text-secondary) !important;
}

/* Catch remaining inline black/navy paint, including dynamic rows created by JS. */
.admin-main [style*="background: rgba(0,0,0"]:not([id$="Backdrop"]):not([id$="backdrop"]):not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(0,0,0"]:not([id$="Backdrop"]):not([id$="backdrop"]):not(.btn):not([class*="btn"]),
.admin-main [style*="background: rgba(0, 0, 0"]:not([id$="Backdrop"]):not([id$="backdrop"]):not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(0, 0, 0"]:not([id$="Backdrop"]):not([id$="backdrop"]):not(.btn):not([class*="btn"]),
.admin-main [style*="background: #000"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:#000"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background: #111"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:#111"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background: #222"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:#222"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background: black"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:black"]:not(.btn):not([class*="btn"]) {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main [style*="color: white"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #fff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#ffffff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #ffffff"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color: #f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]),
.admin-main [style*="color:#f8fafc"]:not(.btn):not(.badge):not([class*="btn"]):not([class*="badge"]) {
    color: var(--text-primary) !important;
}

.admin-main input,
.admin-main select,
.admin-main textarea,
.admin-main .form-control,
.admin-main .premium-form-control {
    color-scheme: light;
}

.admin-main input[style*="background"],
.admin-main select[style*="background"],
.admin-main textarea[style*="background"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main input::placeholder,
.admin-main textarea::placeholder {
    color: #94a3b8 !important;
}

.admin-main select option {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

/* Premium button and icon language across every admin menu. */
.admin-main .btn:not(.btn-icon):not(.qty-btn):not(.card-qty-btn):not(.btn-tally-action):not(.btn-tally-submit):not(.tally-cash-btn) {
    min-height: 42px;
    border-radius: 11px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.admin-main .btn:not(.btn-icon):not(.qty-btn):not(.card-qty-btn):not(.btn-tally-action):not(.btn-tally-submit):not(.tally-cash-btn):hover {
    transform: translateY(-1px);
}

.admin-main .btn:not(.btn-icon):not(.qty-btn):not(.card-qty-btn):not(.btn-tally-action):not(.btn-tally-submit):not(.tally-cash-btn):active {
    transform: translateY(0) scale(0.98);
}

.admin-main .btn-secondary {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-main .btn-secondary:hover {
    background: #eef2ff !important;
    color: var(--accent-blue-hover) !important;
    border-color: #a5b4fc !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .btn-primary,
.admin-main .btn-success,
.admin-main .btn-danger,
.admin-main .btn-warning {
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.13) !important;
}

.admin-main .btn-icon,
.admin-main .action-icon,
.admin-main .topbar-icon-btn {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-main .btn-icon i,
.admin-main .action-icon i {
    transition: transform 180ms ease, color 180ms ease;
}

.admin-main .btn-icon:hover i,
.admin-main .action-icon:hover i {
    transform: scale(1.08);
}

/* POS: replace the legacy dark workbench with a bright, dense cashier UI. */
.admin-main .pos-topbar,
.admin-main .menu-search-row,
.admin-main .menus-grid-wrap,
.admin-main .pos-footer-cart,
.admin-main .tally-bottom-bar {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .pos-topbar,
.admin-main .pos-footer-cart,
.admin-main .tally-bottom-bar {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1) !important;
}

.admin-main .pos-mode-switcher {
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 12px !important;
    padding: 4px !important;
}

.admin-main .pos-mode-btn {
    color: var(--text-secondary) !important;
    border-radius: 9px !important;
}

.admin-main .pos-mode-btn:hover,
.admin-main .pos-mode-btn.active,
.admin-main .pos-mode-btn.mode-tally-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.2) !important;
}

.admin-main .resto-search-wrap input,
.admin-main .menu-search-bar {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.admin-main .restaurant-chips {
    scrollbar-color: #cbd5e1 transparent;
}

.admin-main .restaurant-chip {
    background: #f8fafc !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-main .restaurant-chip:hover {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
    color: var(--accent-orange-hover) !important;
}

.admin-main .restaurant-chip.active {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.2) !important;
}

.admin-main .pos-menu-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-main .pos-menu-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: var(--shadow-lg) !important;
}

.admin-main .menu-card-img {
    background: #eef2f7 !important;
}

.admin-main .menu-card-title,
.admin-main .item-row-title {
    color: var(--text-primary) !important;
}

.admin-main .menu-card-price,
.admin-main .tally-grand-total {
    color: var(--accent-orange) !important;
}

.admin-main .cart-summary-bar,
.admin-main .cart-expanded-panel,
.admin-main .cart-item-row,
.admin-main .cart-checkout-section,
.admin-main .cart-totals,
.admin-main .payment-section,
.admin-main .payment-tab,
.admin-main .change-helper,
.admin-main .tally-summary-box,
.admin-main .tally-total-display,
.admin-main .tally-change-display-box,
.admin-main .tally-cash-btn {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

.admin-main .cart-summary-total,
.admin-main .total-row.grand-total,
.admin-main .tally-total-display strong,
.admin-main .tally-change-display-box .change-amount {
    color: var(--accent-orange) !important;
}

.admin-main .cart-badge-count {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple)) !important;
    color: #ffffff !important;
}

.admin-main .payment-tab:hover,
.admin-main .payment-tab.active,
.admin-main .change-helper:hover,
.admin-main .tally-cash-btn:hover,
.admin-main .tally-cash-btn.active {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: var(--accent-blue-hover) !important;
}

.admin-main .qty-btn,
.admin-main .card-qty-btn {
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-main .tally-change-modal,
.admin-main .tally-toast-banner,
.admin-main #receiptModal,
.admin-main #printerModal,
.admin-main #expenseModal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .tally-modal-header,
.admin-main .tally-change-modal .tally-modal-header {
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.admin-main .tally-change-modal .tally-cash-input,
.admin-main #tallyNegoInput,
.admin-main #promoInput,
.admin-main #customDiscountInput,
.admin-main #customServiceFeeInput,
.admin-main #cashPaidInput,
.admin-main #transactionNotesInput {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main #tallyNegoInput {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #f59e0b !important;
}

/* Order detail / view page: keep maps, summaries and supporting panels light. */
.admin-main .grid-order-layout .glass-card-static,
.admin-main .grid-order-layout .card-accent-blue,
.admin-main .grid-order-layout .card-accent-left-purple,
.admin-main .grid-order-layout .card-accent-orange,
.admin-main #user-map {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main #user-map {
    background: #eef2f7 !important;
}

.admin-main .grid-order-layout [style*="background: rgba(255,255,255"],
.admin-main .grid-order-layout [style*="background:rgba(255,255,255"] {
    background: #f8fafc !important;
    border-color: var(--border-light) !important;
}

/* Modal/detail tables and JS-created transfer rows. */
.admin-main #editOrderModal .table-container,
.admin-main #transferModal [style*="background"],
.admin-main #detailModal [style*="background"],
.admin-main #itemRows > div {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #editOrderModal .table,
.admin-main #detailModal .premium-table {
    background: #ffffff !important;
}

.admin-main #editOrderModal .table td,
.admin-main #detailModal .premium-table td {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

@media (max-width: 767px) {
    .admin-main .premium-modal,
    .admin-main #editOrderModal,
    .admin-main #branchModal > div,
    .admin-main #userModal > div {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .admin-main .pos-mode-switcher,
    .admin-main .tally-actions,
    .admin-main .payment-tabs {
        width: 100% !important;
    }

    .admin-main .tally-actions,
    .admin-main .payment-tabs {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   ADMIN FINANCE / OPERATIONS / SETTINGS FINAL POLISH
   Covers legacy page-specific dark component families while
   preserving state/layout properties owned by PHP and JavaScript.
   ========================================================= */

/* Shared page cards and controls */
.admin-main .bank-card,
.admin-main .stat-card,
.admin-main .recap-supplier-card,
.admin-main .recap-item-row,
.admin-main .recap-total-row,
.admin-main .recap-empty,
.admin-main .filters-grid,
.admin-main .settings-card,
.admin-main .perm-card,
.admin-main .counter-stat-card,
.admin-main .sc-glass,
.admin-main .glass-panel-box,
.admin-main .vibrant-stat-card,
.admin-main .stat-procure-card,
.admin-main .resto-shop-card,
.admin-main .hero-filter-section,
.admin-main .filter-panel {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .bank-card:hover,
.admin-main .recap-supplier-card:hover,
.admin-main .settings-card:hover,
.admin-main .perm-card:hover,
.admin-main .resto-shop-card:hover,
.admin-main .stat-procure-card:hover,
.admin-main .sc-glass:hover {
    border-color: #c7d2fe !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.admin-main .bank-card-title,
.admin-main .bank-card-number,
.admin-main .total-label,
.admin-main .total-value,
.admin-main .settings-card-title,
.admin-main .settings-page-title,
.admin-main .perm-label,
.admin-main .role-header,
.admin-main .resto-name-text,
.admin-main .sc-hero-title,
.admin-main .sc-zona-label,
.admin-main .procure-container h1,
.admin-main .hero-title-text,
.admin-main .dividend-container h1,
.admin-main .hero-main-title {
    color: var(--text-primary) !important;
}

.admin-main .bank-card-number,
.admin-main .settings-page-subtitle,
.admin-main .settings-text-muted,
.admin-main .hero-desc-text,
.admin-main .sc-hero-sub,
.admin-main .sc-zona-desc,
.admin-main .sc-zona-saran,
.admin-main .resto-address-text,
.admin-main .subtotal-label,
.admin-main .filter-label,
.admin-main .filter-label-text,
.admin-main .perm-actions,
.admin-main .sr-resto-meta,
.admin-main .sr-small-info,
.admin-main .sr-modal-field small {
    color: var(--text-muted) !important;
}

.admin-main .filters-grid,
.admin-main .hero-filter-bar,
.admin-main .hero-filter-form,
.admin-main .premium-toolbar,
.admin-main .settings-form-group,
.admin-main .perm-table-wrap {
    background: #f8fafc !important;
    border-color: var(--border-light) !important;
}

/* Finance/accounts */
.admin-main .bank-card-header,
.admin-main .bank-card-balances,
.admin-main .bank-card-footer,
.admin-main .balance-item,
.admin-main .card-actions,
.admin-main .total-label-group {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .bank-card-icon,
.admin-main .stat-icon-box,
.admin-main .resto-avatar-icon,
.admin-main .sr-resto-avatar,
.admin-main .quick-action-icon {
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.14) !important;
}

.admin-main #account-modal,
.admin-main #transaction-modal,
.admin-main #autoRestockModal,
.admin-main #depositModal,
.admin-main #returnModal,
.admin-main .sr-modal-overlay .sr-modal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-xl) !important;
}

.admin-main #account-modal .modal-header,
.admin-main #transaction-modal .modal-header,
.admin-main #autoRestockModal .modal-header,
.admin-main #autoRestockModal .modal-footer,
.admin-main #account-modal .modal-footer,
.admin-main #transaction-modal .modal-footer,
.admin-main .sr-modal-header,
.admin-main .sr-modal-actions {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .modal-backdrop,
.admin-main .modal-backdrop-custom,
.admin-main .sr-modal-overlay {
    background: rgba(15, 23, 42, 0.25) !important;
    backdrop-filter: blur(10px) !important;
}

/* Purchasing and recommendation surfaces */
.admin-main .procure-hero-banner,
.admin-main .sc-hero-banner,
.admin-main .dividend-hero-banner {
    background: linear-gradient(135deg, #fff7ed 0%, #eef2ff 100%) !important;
    border-color: #fdba74 !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

.admin-main .procure-hero-banner .hero-title-text,
.admin-main .procure-hero-banner .hero-desc-text,
.admin-main .sc-hero-banner .sc-hero-title,
.admin-main .sc-hero-banner .sc-hero-sub,
.admin-main .dividend-hero-banner .hero-main-title,
.admin-main .dividend-hero-banner .hero-subtext {
    color: var(--text-primary) !important;
}

.admin-main .kpi-procure-grid,
.admin-main .kpi-cards-wrapper,
.admin-main .sc-kpi-grid,
.admin-main .calc-payout-grid {
    background: transparent !important;
}

.admin-main .stat-procure-card,
.admin-main .vibrant-stat-card,
.admin-main .sc-kpi-card,
.admin-main .sc-zona-card {
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}

.admin-main .stat-number-main,
.admin-main .stat-main-number,
.admin-main .sc-kpi-value,
.admin-main .sc-zona-counter-value,
.admin-main .subtotal-val {
    color: var(--text-primary) !important;
}

.admin-main .resto-header-card-top,
.admin-main .resto-actions-bar,
.admin-main .resto-subtotal-block,
.admin-main .table-responsive-custom,
.admin-main .table-responsive-custom table,
.admin-main .table-responsive-custom td,
.admin-main .table-responsive-custom th,
.admin-main .table-responsive-custom tr {
    border-color: var(--border-light) !important;
}

.admin-main .table-responsive-custom,
.admin-main .table-responsive-custom table {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
}

.admin-main .table-responsive-custom th,
.admin-main .table-responsive-custom thead {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

.admin-main .filter-chip-btn,
.admin-main .preset-chips-group .filter-chip-btn,
.admin-main .sr-filter-chip,
.admin-main .quick-preset-btn,
.admin-main .segmented-tab,
.admin-main .duration-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.admin-main .filter-chip-btn:hover,
.admin-main .filter-chip-btn.active,
.admin-main .sr-filter-chip:hover,
.admin-main .sr-filter-chip.active,
.admin-main .quick-preset-btn:hover,
.admin-main .segmented-tab:hover,
.admin-main .segmented-tab.active,
.admin-main .duration-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(79, 70, 229, 0.2) !important;
}

.admin-main .btn-auto-restock,
.admin-main .btn-print-checklist,
.admin-main .btn-filter-apply,
.admin-main .btn-manage-sh,
.admin-main .execute-main-btn,
.admin-main .btn-wa-resto,
.admin-main .sr-btn-retur,
.admin-main .sr-btn-copy-wa,
.admin-main .sr-btn-submit,
.admin-main .sr-btn-cancel {
    border-radius: 11px !important;
    font-weight: 800 !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.admin-main .btn-auto-restock:hover,
.admin-main .btn-print-checklist:hover,
.admin-main .btn-filter-apply:hover,
.admin-main .btn-manage-sh:hover,
.admin-main .execute-main-btn:hover,
.admin-main .btn-wa-resto:hover,
.admin-main .sr-btn-retur:hover,
.admin-main .sr-btn-copy-wa:hover,
.admin-main .sr-btn-submit:hover,
.admin-main .sr-btn-cancel:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15) !important;
}

/* Dividends / scale-up forms */
.admin-main .form-control-custom,
.admin-main .settings-input,
.admin-main .settings-select,
.admin-main .rupiah-input,
.admin-main #autoRestockModal .form-control,
.admin-main #depositModal .form-control,
.admin-main #shareholderModal .form-control,
.admin-main #executeModal .form-control {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.admin-main .form-control-custom:focus,
.admin-main .settings-input:focus,
.admin-main .settings-select:focus,
.admin-main .rupiah-input:focus,
.admin-main #autoRestockModal .form-control:focus,
.admin-main #depositModal .form-control:focus,
.admin-main #shareholderModal .form-control:focus,
.admin-main #executeModal .form-control:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13) !important;
}

.admin-main .input-group-text {
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main .breakdown-line,
.admin-main .partner-share-card,
.admin-main .share-progress-bar,
.admin-main .segmented-control-container,
.admin-main .settings-option-box,
.admin-main .settings-branding-option,
.admin-main .settings-maintenance-row {
    background: #f8fafc !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.admin-main .dividend-container table,
.admin-main .dividend-container th,
.admin-main .dividend-container td,
.admin-main .scaleup-container table,
.admin-main .scaleup-container th,
.admin-main .scaleup-container td,
.admin-main .perm-table,
.admin-main .perm-table th,
.admin-main .perm-table td {
    border-color: var(--border-light) !important;
}

.admin-main .dividend-container thead,
.admin-main .scaleup-container thead,
.admin-main .perm-table thead,
.admin-main .perm-table tbody tr.group-header {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

/* Stock return module */
.admin-main .sr-container {
    color: var(--text-primary) !important;
}

.admin-main .sr-hero {
    background: linear-gradient(135deg, #fff7ed, #eef2ff) !important;
    border: 1px solid #fdba74 !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

.admin-main .sr-hero-text,
.admin-main .sr-hero-text h1,
.admin-main .sr-hero-text h2,
.admin-main .sr-resto-name,
.admin-main .sr-menu-name,
.admin-main .sr-stat-num,
.admin-main .sr-modal h4,
.admin-main .sr-modal label {
    color: var(--text-primary) !important;
}

.admin-main .sr-stats-ribbon,
.admin-main .sr-resto-card,
.admin-main .sr-menu-section,
.admin-main .sr-history-wrap,
.admin-main .sr-menu-table,
.admin-main .sr-history-table {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .sr-resto-header,
.admin-main .sr-menu-table th,
.admin-main .sr-history-table th,
.admin-main .sr-menu-table td,
.admin-main .sr-history-table td {
    border-color: var(--border-light) !important;
}

.admin-main .sr-resto-header:hover,
.admin-main .sr-menu-table tr:hover,
.admin-main .sr-history-table tr:hover {
    background: #eef2ff !important;
}

.admin-main .sr-stock-badge,
.admin-main .sr-resto-badge,
.admin-main .sr-return-qty {
    border-color: var(--border-light) !important;
}

.admin-main #returQuantity {
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Foot traffic: light dashboard chrome, camera viewport remains a functional media surface. */
.admin-main .ft-camera-wrapper,
.admin-main .ft-camera-wrapper + *,
.admin-main .camera-panel,
.admin-main .conversion-panel {
    border-color: var(--border-light) !important;
}

.admin-main .ft-camera-wrapper,
.admin-main .counter-stat-card,
.admin-main .ft-camera-wrapper ~ .glass-card,
.admin-main .row > [class*="col-"] > .glass-card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .ft-camera-wrapper #camera-placeholder {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
}

.admin-main .ft-camera-wrapper #camera-placeholder h4,
.admin-main .ft-camera-wrapper #camera-placeholder p,
.admin-main .row h3.text-white,
.admin-main .row h4.text-white,
.admin-main .row .counter-number.text-white {
    color: var(--text-primary) !important;
}

.admin-main #camera-select,
.admin-main #select-branch-id,
.admin-main #input-store-hours,
.admin-main #input-conversion-rate,
.admin-main #input-location-note {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main #instruction-modal .modal-body,
.admin-main #instruction-modal .modal-footer {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Permissions and settings */
.admin-main .perm-table-wrap,
.admin-main .perm-table,
.admin-main .perm-table tbody,
.admin-main .perm-table tr,
.admin-main .role-header,
.admin-main .perm-actions {
    color: var(--text-primary) !important;
}

.admin-main .perm-table tbody tr:not(.group-header):hover,
.admin-main .permission-grid > *:hover {
    background: #eef2ff !important;
}

.admin-main .perm-checkbox {
    accent-color: var(--accent-orange);
}

.admin-main .role-header .role-badge {
    background: #eef2ff !important;
    color: var(--accent-blue-hover) !important;
    border-color: #c7d2fe !important;
}

.admin-main .settings-premium-wrap,
.admin-main .settings-grid,
.admin-main .settings-card {
    color: var(--text-primary) !important;
}

.admin-main .settings-label,
.admin-main .settings-card-title,
.admin-main .settings-maintenance-row label {
    color: var(--text-primary) !important;
}

.admin-main .settings-submit-btn,
.admin-main .settings-btn {
    border-radius: 11px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.13) !important;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.admin-main .settings-submit-btn:hover,
.admin-main .settings-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18) !important;
}

/* Generic inline dark paint used by these legacy pages. */
.admin-main [style*="background: rgba(15, 23, 42"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(15,23,42"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background: rgba(30, 41, 59"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(30,41,59"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background: rgba(0, 0, 0"]:not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(0,0,0"]:not(.btn):not([class*="btn"]) {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main [style*="color: white"]:not(.btn):not([class*="btn"]),
.admin-main [style*="color: #fff"]:not(.btn):not([class*="btn"]),
.admin-main [style*="color:#fff"]:not(.btn):not([class*="btn"]),
.admin-main [style*="color: #f8fafc"]:not(.btn):not([class*="btn"]),
.admin-main [style*="color:#f8fafc"]:not(.btn):not([class*="btn"]) {
    color: var(--text-primary) !important;
}

@media (max-width: 767px) {
    .admin-main .sr-hero-top,
    .admin-main .hero-top-block,
    .admin-main .hero-top-row,
    .admin-main .purchases-header-flex,
    .admin-main .header-actions-responsive,
    .admin-main .settings-maintenance-row {
        flex-wrap: wrap !important;
    }

    .admin-main .sr-modal,
    .admin-main #autoRestockModal .modal-content,
    .admin-main #depositModal > div,
    .admin-main #shareholderModal > div,
    .admin-main #executeModal > div,
    .admin-main #instruction-modal {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 18px !important;
    }

    .admin-main .kpi-procure-grid,
    .admin-main .kpi-cards-wrapper,
    .admin-main .sc-kpi-grid,
    .admin-main .grid-stats {
        grid-template-columns: 1fr !important;
    }

    .admin-main .sr-menu-table,
    .admin-main .sr-history-table,
    .admin-main .perm-table,
    .admin-main .table-responsive-custom {
        min-width: 620px;
    }
}

/* Keep all fixed/floating elements above the mobile safe area. */
@media (max-width: 767px) {
    .bottom-nav {
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    .btn-fab {
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .pos-footer-cart,
    .tally-bottom-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================
   ADMIN BATCH FINAL OVERRIDES
   Finance, purchasing, analytics and settings pages still contain
   legacy dark declarations and purchase modal IDs outside the shared
   modal naming convention. Paint only; visibility and positioning stay
   owned by the page JavaScript.
   ========================================================= */

/* Purchases: create/edit, debt payment and recap dialogs. */
.admin-main #purchase-modal,
.admin-main #pay-debt-modal,
.admin-main #edit-purchase-modal,
.admin-main #recap-modal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-xl) !important;
}

.admin-main #purchase-modal .modal-header,
.admin-main #pay-debt-modal .modal-header,
.admin-main #edit-purchase-modal .modal-header,
.admin-main #recap-modal .modal-header,
.admin-main #purchase-modal .modal-footer,
.admin-main #pay-debt-modal .modal-footer,
.admin-main #edit-purchase-modal .modal-footer,
.admin-main #recap-modal .modal-footer,
.admin-main #purchase-modal .modal-body,
.admin-main #pay-debt-modal .modal-body,
.admin-main #edit-purchase-modal .modal-body,
.admin-main #recap-modal .modal-body {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #purchase-modal h4,
.admin-main #purchase-modal h5,
.admin-main #purchase-modal label,
.admin-main #pay-debt-modal h4,
.admin-main #pay-debt-modal h5,
.admin-main #pay-debt-modal label,
.admin-main #edit-purchase-modal h4,
.admin-main #edit-purchase-modal h5,
.admin-main #edit-purchase-modal label,
.admin-main #recap-modal h4,
.admin-main #recap-modal h5,
.admin-main #recap-modal label,
.admin-main #purchase-modal .text-white,
.admin-main #pay-debt-modal .text-white,
.admin-main #edit-purchase-modal .text-white,
.admin-main #recap-modal .text-white {
    color: var(--text-primary) !important;
}

.admin-main #purchase-modal [style*="background: rgba(15, 23, 42"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:rgba(15,23,42"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background: rgba(0, 0, 0"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:rgba(0,0,0"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background: #0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:#0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: rgba(15, 23, 42"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:rgba(15,23,42"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: rgba(0, 0, 0"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:rgba(0,0,0"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: #0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:#0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: rgba(15, 23, 42"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:rgba(15,23,42"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: rgba(0, 0, 0"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:rgba(0,0,0"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: #0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:#0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: rgba(15, 23, 42"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:rgba(15,23,42"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: rgba(0, 0, 0"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:rgba(0,0,0"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: #0f172a"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:#0f172a"]:not(.btn):not([class*="btn"]) {
    background: var(--surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #purchase-modal [style*="background: rgba(2, 6, 23"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:rgba(2,6,23"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background: rgba(30, 41, 59"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:rgba(30,41,59"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background: #090d16"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:#090d16"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background: #1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #purchase-modal [style*="background:#1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: rgba(2, 6, 23"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:rgba(2,6,23"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: rgba(30, 41, 59"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:rgba(30,41,59"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: #090d16"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:#090d16"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background: #1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #pay-debt-modal [style*="background:#1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: rgba(2, 6, 23"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:rgba(2,6,23"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: rgba(30, 41, 59"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:rgba(30,41,59"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: #090d16"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:#090d16"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background: #1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #edit-purchase-modal [style*="background:#1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: rgba(2, 6, 23"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:rgba(2,6,23"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: rgba(30, 41, 59"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:rgba(30,41,59"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: #090d16"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:#090d16"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background: #1e293b"]:not(.btn):not([class*="btn"]),
.admin-main #recap-modal [style*="background:#1e293b"]:not(.btn):not([class*="btn"]) {
    background: var(--surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #purchase-modal #multiItemSection,
.admin-main #purchase-modal .purchase-total-box,
.admin-main #pay-debt-modal .debt-summary,
.admin-main #edit-purchase-modal .purchase-total-box,
.admin-main #recap-modal .recap-supplier-card {
    background: var(--surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #purchase-modal #multiItemSection span,
.admin-main #pay-debt-modal .debt-summary strong,
.admin-main #edit-purchase-modal .purchase-total-box strong,
.admin-main #recap-modal .recap-supplier-card strong {
    color: var(--text-primary) !important;
}

.admin-main #purchase-modal input,
.admin-main #purchase-modal select,
.admin-main #purchase-modal textarea,
.admin-main #pay-debt-modal input,
.admin-main #pay-debt-modal select,
.admin-main #pay-debt-modal textarea,
.admin-main #edit-purchase-modal input,
.admin-main #edit-purchase-modal select,
.admin-main #edit-purchase-modal textarea,
.admin-main #recap-modal input,
.admin-main #recap-modal select,
.admin-main #recap-modal textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.admin-main #purchase-modal table,
.admin-main #pay-debt-modal table,
.admin-main #edit-purchase-modal table,
.admin-main #recap-modal table {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
}

.admin-main #purchase-modal table th,
.admin-main #pay-debt-modal table th,
.admin-main #edit-purchase-modal table th,
.admin-main #recap-modal table th {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main #purchase-modal table td,
.admin-main #pay-debt-modal table td,
.admin-main #edit-purchase-modal table td,
.admin-main #recap-modal table td {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Finance/account cards and their legacy white-on-dark headings. */
.admin-main .stat-card,
.admin-main .bank-card,
.admin-main .bank-card-header,
.admin-main .bank-card-balances,
.admin-main .bank-card-footer,
.admin-main .card-actions {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .stat-card h3,
.admin-main .stat-card h4,
.admin-main .stat-card strong,
.admin-main .bank-card-title,
.admin-main .bank-card-number,
.admin-main .bank-card .balance-value,
.admin-main .bank-card .balance-label,
.admin-main .bank-card-footer,
.admin-main .stat-card .text-white {
    color: var(--text-primary) !important;
}

.admin-main .stat-card:hover,
.admin-main .bank-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

/* Foot traffic: keep the actual camera/video viewport dark for usable video,
   but make its surrounding controls and empty state readable. */
.admin-main .ft-camera-wrapper,
.admin-main .ft-camera-wrapper ~ .glass-card,
.admin-main .counter-stat-card,
.admin-main .ft-camera-wrapper + * {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .ft-camera-wrapper video {
    background: #111827 !important;
}

.admin-main .ft-camera-wrapper canvas {
    background: transparent !important;
}

.admin-main .ft-camera-wrapper #camera-placeholder {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .ft-camera-wrapper #camera-placeholder h4,
.admin-main .ft-camera-wrapper #camera-placeholder p,
.admin-main .counter-stat-card .text-white,
.admin-main .counter-stat-card strong,
.admin-main #history-table strong {
    color: var(--text-primary) !important;
}

.admin-main #conversion-badge-display {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

/* Purchasing, scale-up and dividend content surfaces. */
.admin-main .procure-container,
.admin-main .dividend-container,
.admin-main .scaleup-container,
.admin-main .procure-container .resto-shop-card,
.admin-main .dividend-container .glass-panel-box,
.admin-main .scaleup-container .sc-glass,
.admin-main .scaleup-container .sc-table-wrap {
    color: var(--text-primary) !important;
}

.admin-main .procure-container .resto-shop-card,
.admin-main .dividend-container .glass-panel-box,
.admin-main .dividend-container .partner-share-card,
.admin-main .scaleup-container .sc-glass,
.admin-main .scaleup-container .sc-table-wrap {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .stat-procure-card,
.admin-main .vibrant-stat-card,
.admin-main .sc-kpi-card,
.admin-main .sc-zona-card {
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.admin-main .procure-container .table-dark,
.admin-main .procure-container .table-dark th,
.admin-main .procure-container .table-dark td {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Permissions and settings: readable rows, labels and controls. */
.admin-main .perm-card,
.admin-main .perm-table-wrap,
.admin-main .perm-table,
.admin-main .perm-table tbody tr,
.admin-main .settings-premium-wrap,
.admin-main .settings-card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .perm-table thead th,
.admin-main .perm-table tbody td,
.admin-main .perm-label,
.admin-main .perm-actions label,
.admin-main .settings-label,
.admin-main .settings-card-title,
.admin-main .settings-text-muted {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.admin-main .perm-table tbody tr:hover,
.admin-main .perm-actions label:hover,
.admin-main .settings-option-box:hover {
    background: #eef2ff !important;
}

.admin-main .settings-input,
.admin-main .settings-select,
.admin-main .settings-premium-wrap input,
.admin-main .settings-premium-wrap select,
.admin-main .settings-premium-wrap textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Keep compact icon controls compact while adding a clear premium interaction. */
.admin-main .card-actions .btn-icon,
.admin-main .perm-actions .action-icon,
.admin-main .sr-modal-close {
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.admin-main .card-actions .btn-icon:hover,
.admin-main .perm-actions .action-icon:hover,
.admin-main .sr-modal-close:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: var(--shadow-md) !important;
}

@media (max-width: 767px) {
    .admin-main #purchase-modal,
    .admin-main #pay-debt-modal,
    .admin-main #edit-purchase-modal,
    .admin-main #recap-modal {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    .admin-main .purchases-header-flex,
    .admin-main .purchases-btn-group,
    .admin-main .settings-buttons-gap {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   FOCUSED UI REBUILD: readable typography + deliberate light surfaces
   ========================================================= */
:root {
    --ui-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-ink: #172033;
    --ui-ink-soft: #475569;
    --ui-muted: #64748b;
    --ui-border: #dbe3ef;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-blue: #4f46e5;
    --ui-cyan: #0891b2;
    --ui-orange: #ea580c;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--ui-font) !important;
}

body,
.admin-main,
.main-content {
    color: var(--ui-ink);
}

/* Notification permission banner: robust two-column desktop / stacked mobile layout. */
.admin-main .admin-permission-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 58%, #fff7ed 100%) !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(79, 70, 229, 0.12) !important;
    color: var(--ui-ink) !important;
}

.admin-main .admin-permission-banner::before,
.admin-main .admin-permission-banner::after {
    opacity: 0.28;
}

.admin-main .admin-permission-banner-text {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: var(--ui-ink) !important;
}

.admin-main .admin-permission-banner-text > div:last-child {
    min-width: 0;
}

.admin-main .admin-permission-banner-text strong {
    color: var(--ui-ink) !important;
    font-size: 0.94rem;
}

.admin-main .admin-permission-banner-text .banner-sub {
    display: inline-block;
    margin-top: 3px;
    color: var(--ui-ink-soft) !important;
    line-height: 1.45;
}

.admin-main .admin-permission-banner .banner-icon-wrap {
    flex: 0 0 44px;
    background: linear-gradient(135deg, #c7d2fe, #bae6fd) !important;
    color: var(--ui-blue) !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.16) !important;
}

.admin-main .admin-permission-banner .banner-icon-wrap i {
    color: var(--ui-blue) !important;
}

.admin-main .admin-permission-banner .banner-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.admin-main .admin-permission-banner .banner-actions .btn {
    min-height: 42px;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--ui-blue), #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.24) !important;
}

.admin-main .admin-permission-banner .banner-close-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

.admin-main .admin-permission-banner .banner-close-btn:hover,
.admin-main .admin-permission-banner .banner-close-btn:focus-visible {
    background: #fff1f2 !important;
    border-color: #fda4af !important;
    color: #be123c !important;
    transform: translateY(-1px) !important;
}

/* Dashboard chart surfaces and canvas sizing. */
.admin-main #panel-revenue-chart,
.admin-main #panel-status-chart {
    background: #ffffff !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

.admin-main #panel-revenue-chart .chart-panel-title,
.admin-main #panel-status-chart .chart-panel-title {
    color: var(--ui-ink) !important;
}

.admin-main #panel-revenue-chart .chart-panel-title i,
.admin-main #panel-status-chart .chart-panel-title i {
    color: var(--ui-blue) !important;
    opacity: 1;
}

.admin-main #panel-revenue-chart .chart-filter-select {
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink-soft) !important;
}

/* User pages: light-first visual language with clear hierarchy. */
.main-content .glass-card,
.main-content .glass-card-static,
.main-content .card {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
}

.main-content .glass-card:hover,
.main-content .card:hover {
    border-color: #a5b4fc !important;
    box-shadow: 0 18px 36px rgba(79, 70, 229, 0.12) !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
    color: var(--ui-ink) !important;
    letter-spacing: -0.025em;
}

.main-content p,
.main-content .text-muted {
    color: var(--ui-ink-soft) !important;
}

.main-content .form-control,
.main-content .glass-input,
.main-content select.form-control {
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    border-color: #cbd5e1 !important;
}

.main-content .form-control:focus,
.main-content .glass-input:focus {
    border-color: var(--ui-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

.main-content .btn {
    min-height: 44px;
    border-radius: 12px !important;
    font-weight: 700;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.main-content .btn:hover {
    transform: translateY(-1px);
}

/* User order cards and detail modal. */
.main-content .order-card,
.main-content #order-detail-modal {
    color: var(--ui-ink) !important;
}

#order-detail-modal {
    width: min(680px, calc(100vw - 28px)) !important;
    max-width: 680px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2) !important;
}

#order-detail-modal .modal-header {
    margin: 0 !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
}

#order-detail-modal .modal-title {
    color: var(--ui-ink) !important;
    font-size: 1.15rem !important;
}

#order-detail-modal .modal-close {
    width: 42px !important;
    height: 42px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

#order-detail-modal .modal-close:hover,
#order-detail-modal .modal-close:focus-visible {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fda4af !important;
}

#order-detail-content {
    padding: 20px 22px 22px;
    color: var(--ui-ink-soft);
}

.order-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.order-detail-meta span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
}

.order-detail-meta small {
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.order-detail-meta strong,
.order-detail-section h4,
.order-detail-total strong {
    color: var(--ui-ink);
}

.order-detail-status {
    color: var(--ui-blue) !important;
    text-transform: capitalize;
}

.order-detail-section {
    padding: 15px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
}

.order-detail-section h4 {
    margin: 0 0 9px;
    font-size: 1rem;
}

.order-detail-section p {
    margin: 5px 0 0;
    color: var(--ui-ink-soft);
    font-size: 0.86rem;
}

.order-detail-section i {
    width: 18px;
    color: var(--ui-blue);
}

.order-detail-items {
    display: grid;
    gap: 9px;
}

.order-detail-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: #ffffff;
}

.order-detail-item img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #eef2ff;
}

.order-detail-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.order-detail-item-info strong {
    color: var(--ui-ink);
    overflow-wrap: anywhere;
}

.order-detail-item-info span,
.order-detail-item b {
    color: var(--ui-ink-soft);
    font-size: 0.82rem;
}

.order-detail-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-ink-soft);
    font-weight: 700;
}

.order-detail-total strong {
    color: var(--ui-orange) !important;
    font-size: 1.08rem;
}

.order-detail-empty {
    padding: 25px 10px;
    text-align: center;
    color: var(--ui-muted);
}

@media (max-width: 700px) {
    .admin-main .admin-permission-banner {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    .admin-main .admin-permission-banner .banner-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        width: 100%;
    }

    .admin-main .admin-permission-banner .banner-actions .btn {
        width: 100%;
    }

    #order-detail-modal {
        max-height: calc(100vh - 28px) !important;
    }

    #order-detail-content {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 16px;
    }

    .order-detail-meta {
        grid-template-columns: 1fr 1fr;
    }

    .order-detail-meta span:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .main-content .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .main-content .flex-between .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .order-detail-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .order-detail-item > b {
        grid-column: 2;
    }
}

/* =========================================================
   TARGETED ADMIN MODULE CONTRAST POLISH
   Final light-theme layer for legacy finance/procurement pages.
   Scoped to the page wrappers so existing transactions and scripts
   remain untouched while every text surface stays readable.
   ========================================================= */

.admin-main .sr-container,
.admin-main .procure-container,
.admin-main .dividend-container,
.admin-main .scaleup-container {
    color: var(--text-primary) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.admin-main .sr-container h1,
.admin-main .sr-container h2,
.admin-main .sr-container h3,
.admin-main .sr-container h4,
.admin-main .sr-container h5,
.admin-main .sr-container p,
.admin-main .procure-container h1,
.admin-main .procure-container h2,
.admin-main .procure-container h3,
.admin-main .procure-container h4,
.admin-main .procure-container h5,
.admin-main .procure-container p,
.admin-main .dividend-container h1,
.admin-main .dividend-container h2,
.admin-main .dividend-container h3,
.admin-main .dividend-container h4,
.admin-main .dividend-container h5,
.admin-main .dividend-container p,
.admin-main .scaleup-container h1,
.admin-main .scaleup-container h2,
.admin-main .scaleup-container h3,
.admin-main .scaleup-container h4,
.admin-main .scaleup-container h5,
.admin-main .scaleup-container p {
    color: var(--text-primary) !important;
}

/* Page hero/header surfaces */
.admin-main .sr-hero,
.admin-main .procure-hero-banner,
.admin-main .dividend-hero-banner,
.admin-main .sc-hero-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef2ff 100%) !important;
    border: 1px solid #dbe3ef !important;
    color: var(--text-primary) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
}

.admin-main .sr-hero-text h2,
.admin-main .hero-title-text,
.admin-main .hero-main-title,
.admin-main .sc-hero-title {
    color: #172033 !important;
    text-shadow: none !important;
}

.admin-main .sr-hero-text p,
.admin-main .hero-desc-text,
.admin-main .hero-subtext,
.admin-main .sc-hero-sub {
    color: #475569 !important;
}

/* Cards, KPI panels and nested dark legacy surfaces */
.admin-main .sr-resto-card,
.admin-main .stat-procure-card,
.admin-main .resto-shop-card,
.admin-main .vibrant-stat-card,
.admin-main .glass-panel-box,
.admin-main .partner-share-card,
.admin-main .sc-zona-card,
.admin-main .sc-kpi-card,
.admin-main .sc-glass {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #dbe3ef !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

.admin-main .sr-stat-item,
.admin-main .sr-menu-section,
.admin-main .hero-filter-section,
.admin-main .sc-glass-header,
.admin-main .settings-group,
.admin-main .setting-row,
.admin-main .timeline-content {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-stat-num,
.admin-main .sr-resto-name,
.admin-main .sr-menu-name,
.admin-main .resto-name-text,
.admin-main .sc-kpi-value,
.admin-main .sc-zona-label,
.admin-main .sc-zona-desc,
.admin-main .setting-label,
.admin-main .total-biaya-display {
    color: var(--text-primary) !important;
}

.admin-main .sr-stat-label,
.admin-main .sr-resto-meta,
.admin-main .sr-small-info,
.admin-main .filter-label,
.admin-main .filter-label-text,
.admin-main .metric-item-label,
.admin-main .sc-kpi-label,
.admin-main .sc-kpi-sub,
.admin-main .sc-zona-saran,
.admin-main .sc-zona-reasons,
.admin-main .settings-group-title,
.admin-main .setting-row small {
    color: #64748b !important;
}

/* Filter controls and labels */
.admin-main .sr-filter-chip,
.admin-main .filter-chip-btn,
.admin-main .form-select-custom,
.admin-main .form-control-custom,
.admin-main .date-inp,
.admin-main .sc-glass input,
.admin-main .sc-glass select,
.admin-main .sc-glass textarea,
.admin-main .setting-input-wrap input,
.admin-main .setting-input-wrap select,
.admin-main .setting-input-wrap textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #cbd5e1 !important;
}

.admin-main .sr-filter-chip:hover,
.admin-main .filter-chip-btn:hover,
.admin-main .sc-glass input:focus,
.admin-main .sc-glass select:focus,
.admin-main .sc-glass textarea:focus,
.admin-main .setting-input-wrap input:focus,
.admin-main .setting-input-wrap select:focus,
.admin-main .setting-input-wrap textarea:focus {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
    outline: none !important;
}

.admin-main .sr-filter-chip.active,
.admin-main .filter-chip-btn.active {
    color: #ffffff !important;
}

.admin-main .sr-filter-chip-count {
    color: inherit !important;
}

.admin-main .sr-menu-table,
.admin-main .sr-history-table,
.admin-main .sc-table,
.admin-main .procure-container table,
.admin-main .dividend-container table {
    color: var(--text-secondary) !important;
}

.admin-main .sr-menu-table thead th,
.admin-main .sr-history-table th,
.admin-main .sc-table th,
.admin-main .procure-container table thead th,
.admin-main .dividend-container table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #dbe3ef !important;
}

.admin-main .sr-menu-table td,
.admin-main .sr-history-table td,
.admin-main .sc-table td,
.admin-main .procure-container table tbody td,
.admin-main .dividend-container table tbody td {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-menu-table tbody tr:hover,
.admin-main .sr-history-table tbody tr:hover,
.admin-main .sc-table tbody tr:hover,
.admin-main .procure-container table tbody tr:hover,
.admin-main .dividend-container table tbody tr:hover {
    background: #eef2ff !important;
}

/* Replace only legacy light-on-dark inline text; action buttons and badges stay intact. */
.admin-main .sr-container [style*="color: white"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color: white"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color: white"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color: white"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color: #e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color: #e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color: #e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color: #e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color: #cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color: #cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color: #cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color: #cbd5e1"]:not(button):not(.btn):not(.badge) {
    color: var(--text-primary) !important;
}

.admin-main .sr-container [style*="color: #94a3b8"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color: #94a3b8"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color: #94a3b8"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color: #94a3b8"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color: #64748b"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color: #64748b"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color: #64748b"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color: #64748b"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color:#fff"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color:#fff"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color:#fff"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color:#fff"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color:#e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color:#e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color:#e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color:#e2e8f0"]:not(button):not(.btn):not(.badge),
.admin-main .sr-container [style*="color:#cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .procure-container [style*="color:#cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .dividend-container [style*="color:#cbd5e1"]:not(button):not(.btn):not(.badge),
.admin-main .scaleup-container [style*="color:#cbd5e1"]:not(button):not(.btn):not(.badge) {
    color: var(--text-primary) !important;
}

/* Compact legacy rgba surfaces also need the light paper treatment. */
.admin-main .sr-container [style*="rgba(10,15,30"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .procure-container [style*="rgba(10,15,30"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .dividend-container [style*="rgba(10,15,30"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .scaleup-container [style*="rgba(10,15,30"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .sr-container [style*="rgba(15,23,42"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .procure-container [style*="rgba(15,23,42"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .dividend-container [style*="rgba(15,23,42"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .scaleup-container [style*="rgba(15,23,42"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .sr-container [style*="#1e293b"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .procure-container [style*="#1e293b"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .dividend-container [style*="#1e293b"]:not(button):not(.btn):not(.badge):not([class*="btn"]),
.admin-main .scaleup-container [style*="#1e293b"]:not(button):not(.btn):not(.badge):not([class*="btn"]) {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Modals on procurement, dividends, scaleup and returns */
.admin-main .sr-modal,
.admin-main .procure-container .modal-content,
.admin-main .dividend-container .modal-backdrop-custom > div,
.admin-main .scaleup-container .modal-backdrop-custom > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #dbe3ef !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2) !important;
}

.admin-main .sr-modal-header,
.admin-main .procure-container .modal-header,
.admin-main .procure-container .modal-footer,
.admin-main .dividend-container .modal-backdrop-custom .flex-between,
.admin-main .scaleup-container .modal-backdrop-custom .flex-between {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-modal-field label,
.admin-main .procure-container .modal-body label,
.admin-main .dividend-container .modal-backdrop-custom label,
.admin-main .scaleup-container .modal-backdrop-custom label {
    color: #334155 !important;
}

.admin-main .sr-modal-field .form-control,
.admin-main .procure-container .modal-content .form-control,
.admin-main .dividend-container .modal-backdrop-custom .form-control,
.admin-main .scaleup-container .modal-backdrop-custom .form-control {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #cbd5e1 !important;
}

.admin-main .sr-modal-overlay,
.admin-main .procure-container + .modal-backdrop,
.admin-main .dividend-container + .modal-backdrop,
.admin-main .scaleup-container + .modal-backdrop {
    background: rgba(15, 23, 42, 0.28) !important;
}

/* Premium motion and mobile safety for these modules. */
.admin-main .sr-resto-card,
.admin-main .procure-hero-banner,
.admin-main .resto-shop-card,
.admin-main .dividend-hero-banner,
.admin-main .glass-panel-box,
.admin-main .sc-glass,
.admin-main .sc-kpi-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.admin-main .sr-resto-card:hover,
.admin-main .resto-shop-card:hover,
.admin-main .glass-panel-box:hover,
.admin-main .sc-glass:hover,
.admin-main .sc-kpi-card:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

@media (max-width: 700px) {
    .admin-main .sr-hero-top,
    .admin-main .hero-top-block,
    .admin-main .hero-top-row,
    .admin-main .sc-hero-top {
        align-items: stretch !important;
    }

    .admin-main .sr-hero-text h2,
    .admin-main .hero-main-title,
    .admin-main .hero-title-text,
    .admin-main .sc-hero-title {
        font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-resto-badges,
    .admin-main .hero-actions-group,
    .admin-main .hero-filter-form,
    .admin-main .hero-filter-grid-form,
    .admin-main .share-actions-row {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .admin-main .sr-resto-badges > *,
    .admin-main .hero-actions-group > *,
    .admin-main .hero-filter-form > *,
    .admin-main .hero-filter-grid-form > * {
        min-width: 0;
        max-width: 100%;
    }

    .admin-main .sr-history-wrap,
    .admin-main .table-responsive-custom,
    .admin-main .sc-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   ACCOUNTS PAGE ICON COLOR POLISH
   Give financial icons a visible semantic color system in light mode.
   Scoped to .accounts-page so other admin modules are unaffected.
   ========================================================= */

.admin-main .accounts-page .stat-card {
    background: #ffffff !important;
    border-color: #dbe3ef !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

.admin-main .accounts-page .stat-card:hover {
    background: #ffffff !important;
    border-color: #c7d2fe !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
}

.admin-main .accounts-page .stat-card > div:first-child {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px currentColor, 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.admin-main .accounts-page .stat-card:hover > div:first-child {
    transform: translateY(-2px) scale(1.04);
    box-shadow: inset 0 0 0 1px currentColor, 0 10px 22px rgba(15, 23, 42, 0.13);
}

.admin-main .accounts-page .stat-card:nth-child(1) > div:first-child {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.admin-main .accounts-page .stat-card:nth-child(2) > div:first-child {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.admin-main .accounts-page .stat-card:nth-child(3) > div:first-child {
    background: #f5f3ff !important;
    color: #7c3aed !important;
}

.admin-main .accounts-page .stat-card:nth-child(4) > div:first-child {
    background: #fff7ed !important;
    color: #ea580c !important;
}

.admin-main .accounts-page .stat-card > div:first-child i {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 1.45rem;
}

.admin-main .accounts-page .stat-card h3 {
    color: var(--text-primary) !important;
}

.admin-main .accounts-page .bank-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: #dbe3ef !important;
    color: var(--text-primary) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09) !important;
}

.admin-main .accounts-page .bank-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 0 0 3px rgba(99, 102, 241, 0.06) !important;
}

.admin-main .accounts-page .bank-card-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    opacity: 1 !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    box-shadow: inset 0 0 0 1px #c7d2fe, 0 8px 16px rgba(79, 70, 229, 0.14);
}

.admin-main .accounts-page .bank-card:nth-child(4n + 2) .bank-card-icon {
    color: #059669 !important;
    background: #ecfdf5 !important;
    box-shadow: inset 0 0 0 1px #a7f3d0, 0 8px 16px rgba(5, 150, 105, 0.14);
}

.admin-main .accounts-page .bank-card:nth-child(4n + 3) .bank-card-icon {
    color: #ea580c !important;
    background: #fff7ed !important;
    box-shadow: inset 0 0 0 1px #fed7aa, 0 8px 16px rgba(234, 88, 12, 0.14);
}

.admin-main .accounts-page .bank-card:nth-child(4n + 4) .bank-card-icon {
    color: #7c3aed !important;
    background: #f5f3ff !important;
    box-shadow: inset 0 0 0 1px #ddd6fe, 0 8px 16px rgba(124, 58, 237, 0.14);
}

.admin-main .accounts-page .bank-card-icon i {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 1.25rem;
}

.admin-main .accounts-page .bank-card-title,
.admin-main .accounts-page .total-value,
.admin-main .accounts-page .balance-value {
    color: var(--text-primary) !important;
}

.admin-main .accounts-page .bank-card-number,
.admin-main .accounts-page .balance-label,
.admin-main .accounts-page .total-label {
    color: var(--text-muted) !important;
}

.admin-main .accounts-page .bank-card-balances {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.admin-main .accounts-page .bank-card-footer {
    border-color: #e2e8f0 !important;
}

.admin-main .accounts-page .balance-label i,
.admin-main .accounts-page .card-actions i,
.admin-main .accounts-page .admin-header-flex > h4 i,
.admin-main .accounts-page .table i {
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

.admin-main .accounts-page .balance-label .text-success,
.admin-main .accounts-page .text-success {
    color: #059669 !important;
}

.admin-main .accounts-page .balance-label .text-accent,
.admin-main .accounts-page .text-accent {
    color: #4f46e5 !important;
}

.admin-main .accounts-page .balance-label .text-warning,
.admin-main .accounts-page .text-warning {
    color: #d97706 !important;
}

.admin-main .accounts-page .card-actions .btn {
    background: #f8fafc !important;
    border-color: #dbe3ef !important;
    color: var(--text-secondary) !important;
}

.admin-main .accounts-page .card-actions .btn:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
}

.admin-main .accounts-page .card-actions .btn:first-child i,
.admin-main .accounts-page .card-actions .text-warning {
    color: #d97706 !important;
}

.admin-main .accounts-page .card-actions .btn:last-child i,
.admin-main .accounts-page .card-actions .text-danger {
    color: #dc2626 !important;
}

.admin-main .accounts-page .table .text-muted .fa-arrow-right,
.admin-main .accounts-page .table .fa-undo,
.admin-main .accounts-page .table .fa-chevron-left,
.admin-main .accounts-page .table .fa-chevron-right {
    color: #64748b !important;
}

.admin-main .accounts-page .table .badge i {
    color: inherit !important;
    opacity: 1 !important;
}

.admin-main .accounts-page .modal-header .btn-icon i,
.admin-main #account-modal .modal-header .btn-icon i,
.admin-main #transaction-modal .modal-header .btn-icon i {
    color: #475569 !important;
    opacity: 1 !important;
}

.admin-main #account-modal .modal-header .btn-icon,
.admin-main #transaction-modal .modal-header .btn-icon {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.admin-main #account-modal .modal-header .btn-icon:hover,
.admin-main #transaction-modal .modal-header .btn-icon:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

@media (max-width: 768px) {
    .admin-main .accounts-page .stat-card {
        min-width: 0;
    }

    .admin-main .accounts-page .bank-card-icon {
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   PURCHASES PAGE: EDIT CLARITY + COMPACT TABLE
   ========================================================= */

.admin-main .purchases-page {
    color: var(--text-primary) !important;
}

/* The main purchase history is intentionally denser than dashboard tables. */
.admin-main .purchases-page > .col-12:last-child .glass-card {
    padding: 18px !important;
}

.admin-main .purchases-page > .col-12:last-child .table-container {
    overflow-x: auto !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table {
    width: 100% !important;
    min-width: 980px;
    margin: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table thead th {
    padding: 8px 9px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table tbody td {
    padding: 7px 9px !important;
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table tbody tr {
    height: 42px;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table .badge {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table small {
    font-size: 0.66rem !important;
}

.admin-main .purchases-page > .col-12:last-child .table-container > table.table .btn-sm {
    min-height: 30px !important;
    font-size: 0.68rem !important;
}

/* Edit modal: readable paper surface and clear action hierarchy. */
.admin-main #edit-purchase-modal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #dbe3ef !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2) !important;
}

.admin-main #edit-purchase-modal .modal-header,
.admin-main #edit-purchase-modal .modal-footer {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #e2e8f0 !important;
}

.admin-main #edit-purchase-modal .modal-header h4,
.admin-main #edit-purchase-modal .modal-header .text-white,
.admin-main #edit-purchase-modal .modal-body label,
.admin-main #edit-purchase-modal .modal-body .form-label,
.admin-main #edit-purchase-modal .modal-body .text-white,
.admin-main #edit-purchase-modal .modal-body strong,
.admin-main #edit-purchase-modal .modal-body span:not(.text-danger):not(.text-success):not(.text-warning) {
    color: var(--text-primary) !important;
}

.admin-main #edit-purchase-modal #edit-preview-disc-row,
.admin-main #edit-purchase-modal #edit-preview-disc-row span {
    color: #dc2626 !important;
}

.admin-main #edit-purchase-modal .modal-body {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
    padding: 18px 22px !important;
}

.admin-main #edit-purchase-modal .modal-body > div,
.admin-main #edit-purchase-modal .purchase-total-box,
.admin-main #edit-purchase-modal [style*="background: rgba(255,255,255"] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.admin-main #edit-purchase-modal input,
.admin-main #edit-purchase-modal select,
.admin-main #edit-purchase-modal textarea,
.admin-main #edit-purchase-modal .form-control {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #cbd5e1 !important;
    min-height: 40px;
}

.admin-main #edit-purchase-modal input::placeholder,
.admin-main #edit-purchase-modal textarea::placeholder {
    color: #94a3b8 !important;
}

.admin-main #edit-purchase-modal input:focus,
.admin-main #edit-purchase-modal select:focus,
.admin-main #edit-purchase-modal textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13) !important;
    outline: none !important;
}

.admin-main #edit-purchase-modal #edit-menu-label {
    color: #0369a1 !important;
    font-weight: 800 !important;
}

.admin-main #edit-purchase-modal .modal-header .btn-icon,
.admin-main #edit-purchase-modal .modal-header .btn-icon i {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    opacity: 1 !important;
}

.admin-main #edit-purchase-modal .modal-header .btn-icon:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

.admin-main #edit-purchase-modal .modal-footer .btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

.admin-main #edit-purchase-modal .modal-footer .btn-warning,
.admin-main #edit-purchase-modal .modal-footer button[type="submit"] {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    border: 0 !important;
    color: #ffffff !important;
    min-height: 42px !important;
    padding: 10px 22px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.24) !important;
}

.admin-main #edit-purchase-modal .modal-footer .btn-warning:hover,
.admin-main #edit-purchase-modal .modal-footer button[type="submit"]:hover {
    background: linear-gradient(135deg, #c2410c, #9a3412) !important;
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(234, 88, 12, 0.32) !important;
}

@media (max-width: 767px) {
    .admin-main .purchases-page > .col-12:last-child .glass-card {
        padding: 12px !important;
    }

    .admin-main .purchases-page > .col-12:last-child .table-container > table.table {
        font-size: 0.72rem !important;
    }

    .admin-main .purchases-page > .col-12:last-child .table-container > table.table thead th,
    .admin-main .purchases-page > .col-12:last-child .table-container > table.table tbody td {
        padding: 6px 7px !important;
    }

    .admin-main #edit-purchase-modal {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    .admin-main #edit-purchase-modal .modal-footer {
        flex-wrap: wrap !important;
    }

    .admin-main #edit-purchase-modal .modal-footer .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* =========================================================
   ACCOUNTS TRANSACTION HISTORY: MOBILE CARD LAYOUT
   ========================================================= */

.admin-main .transaction-history-card {
    min-width: 0;
}

.admin-main .transaction-history-table-wrap {
    max-width: 100%;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.admin-main .transaction-history-table {
    margin: 0 !important;
    color: var(--text-secondary) !important;
}

.admin-main .transaction-history-table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.admin-main .transaction-history-table tbody td {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.admin-main .transaction-history-table tbody td strong {
    color: var(--text-primary) !important;
}

.admin-main .transaction-history-table tbody tr:hover {
    background: #eef2ff !important;
}

.admin-main .transaction-history-header {
    gap: 14px;
}

.admin-main .transaction-history-header h4 {
    color: var(--text-primary) !important;
}

.admin-main .transaction-history-header h4 i {
    color: var(--accent-blue) !important;
    opacity: 1 !important;
}

.admin-main .transaction-history-pagination {
    border-color: var(--border-light) !important;
}

@media (max-width: 767px) {
    .admin-main .transaction-history-card {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .admin-main .transaction-history-header {
        align-items: stretch !important;
        flex-direction: column !important;
        margin-bottom: 14px !important;
    }

    .admin-main .transaction-history-header h4 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .admin-main .transaction-history-header .admin-btn-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .admin-main .transaction-history-header .admin-btn-group .btn {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        white-space: normal !important;
    }

    .admin-main .transaction-history-card .filters-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 11px !important;
        margin-bottom: 14px !important;
    }

    .admin-main .transaction-history-card .filters-grid .form-label {
        font-size: 0.72rem !important;
        color: #475569 !important;
        margin-bottom: 4px !important;
    }

    .admin-main .transaction-history-card .filters-grid .form-control {
        min-height: 42px !important;
        font-size: 0.88rem !important;
    }

    /* Clean transaction history pagination */
    .admin-main .transaction-history-pagination {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 14px !important;
        padding-top: 14px !important;
    }

    .admin-main .transaction-history-pagination > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .admin-main .transaction-history-pagination > div:last-child .btn {
        min-width: 36px !important;
        min-height: 36px !important;
        justify-content: center;
    }
}

/* =========================================================
   STOCK RETURNS: FINAL FLUID MOBILE SYSTEM
   Overrides the legacy 620px table floor and keeps every module
   readable from narrow phones through large screens.
   ========================================================= */

.admin-main .sr-container {
    width: 100% !important;
    max-width: 1400px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
}

.admin-main .sr-container,
.admin-main .sr-container * {
    box-sizing: border-box;
}

.admin-main .sr-hero,
.admin-main .sr-resto-card {
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    color: var(--text-primary) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

.admin-main .sr-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef2ff 100%) !important;
}

.admin-main .sr-hero-text h2,
.admin-main .sr-resto-name,
.admin-main .sr-menu-name,
.admin-main .sr-stat-num,
.admin-main .sr-history-heading h4,
.admin-main .sr-empty h4 {
    color: var(--text-primary) !important;
}

.admin-main .sr-hero-text p,
.admin-main .sr-resto-meta,
.admin-main .sr-stat-label,
.admin-main .sr-small-info,
.admin-main .sr-history-heading .text-muted,
.admin-main .sr-empty p {
    color: #64748b !important;
}

.admin-main .sr-stats-ribbon {
    border-color: #e2e8f0 !important;
}

.admin-main .sr-stat-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-filter-chip {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

.admin-main .sr-filter-chip:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

.admin-main .sr-filter-chip.active {
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.admin-main .sr-resto-header {
    border-color: #e2e8f0 !important;
}

.admin-main .sr-resto-badges {
    min-width: 0;
}

.admin-main .sr-menu-section,
.admin-main .sr-history-wrap {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-menu-table,
.admin-main .sr-history-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #475569 !important;
}

.admin-main .sr-menu-table th,
.admin-main .sr-history-table th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #dbe3ef !important;
}

.admin-main .sr-menu-table td,
.admin-main .sr-history-table td {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.admin-main .sr-history-table td strong,
.admin-main .sr-history-table td span:not(.sr-return-qty) {
    color: var(--text-primary) !important;
}

.admin-main .sr-history-table .sr-return-qty {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

.admin-main .sr-modal-overlay {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}

.admin-main .sr-modal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #dbe3ef !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

.admin-main .sr-modal-header,
.admin-main .sr-modal-actions {
    border-color: #e2e8f0 !important;
}

.admin-main .sr-modal-header h4,
.admin-main .sr-modal-field label {
    color: var(--text-primary) !important;
}

.admin-main .sr-modal-field .form-control {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #cbd5e1 !important;
}

.admin-main .sr-modal-field .form-control:disabled {
    background: #f1f5f9 !important;
    color: #475569 !important;
    opacity: 1 !important;
}

.admin-main .sr-btn-cancel {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

.admin-main .sr-btn-submit {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .admin-main .sr-container {
        gap: 12px !important;
        padding: 0 !important;
    }

    .admin-main .sr-hero {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .admin-main .sr-hero-top {
        display: block !important;
    }

    .admin-main .sr-hero-text h2 {
        font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-hero-text p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    .admin-main .sr-stats-ribbon {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
    }

    .admin-main .sr-stat-item {
        min-width: 0 !important;
        padding: 9px !important;
        gap: 8px !important;
        border-radius: 11px !important;
    }

    .admin-main .sr-stat-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.85rem !important;
    }

    .admin-main .sr-stat-num {
        font-size: 0.95rem !important;
    }

    .admin-main .sr-stat-label {
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
    }

    .admin-main .sr-filter-chips {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .admin-main .sr-filter-chips > span:first-child {
        grid-column: 1 / -1;
        margin: 0 !important;
    }

    .admin-main .sr-filter-chip {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 8px 7px !important;
        font-size: 0.7rem !important;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-resto-card {
        padding: 12px !important;
        border-radius: 15px !important;
    }

    .admin-main .sr-resto-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .admin-main .sr-resto-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-main .sr-resto-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 1rem !important;
    }

    .admin-main .sr-resto-name {
        font-size: 0.92rem !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .admin-main .sr-resto-meta {
        font-size: 0.68rem !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-resto-badges {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .admin-main .sr-resto-badge,
    .admin-main .sr-btn-copy-wa {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 0.68rem !important;
        white-space: normal !important;
        text-align: center;
    }

    .admin-main .sr-chevron {
        display: none !important;
    }

    .admin-main .sr-menu-section {
        margin-top: 12px !important;
        padding-top: 10px !important;
        overflow: visible !important;
    }

    .admin-main .sr-menu-table,
    .admin-main .sr-menu-table tbody,
    .admin-main .sr-menu-table tr,
    .admin-main .sr-menu-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-main .sr-menu-table thead {
        display: none !important;
    }

    .admin-main .sr-menu-table tbody tr {
        margin-bottom: 9px !important;
        padding: 9px !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
    }

    .admin-main .sr-menu-table tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    .admin-main .sr-menu-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(72px, 31%) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 29px !important;
        padding: 5px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        text-align: right !important;
        font-size: 0.78rem !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-menu-table tbody td:last-child {
        border-bottom: 0 !important;
        padding-top: 8px !important;
    }

    .admin-main .sr-menu-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        color: #64748b !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        text-align: left !important;
        text-transform: uppercase;
    }

    .admin-main .sr-menu-table .sr-menu-name {
        color: var(--text-primary) !important;
        font-size: 0.8rem !important;
    }

    .admin-main .sr-menu-table .sr-stock-badge,
    .admin-main .sr-menu-table .sr-btn-retur {
        justify-self: end !important;
        max-width: 100% !important;
    }

    .admin-main .sr-btn-retur {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 0.74rem !important;
    }

    .admin-main .sr-history-card {
        padding: 12px !important;
    }

    .admin-main .sr-history-heading {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        margin-bottom: 11px !important;
    }

    .admin-main .sr-history-heading h4 {
        font-size: 0.92rem !important;
    }

    .admin-main .sr-history-heading .small {
        width: 100% !important;
        padding-left: 28px !important;
        font-size: 0.68rem !important;
    }

    .admin-main .sr-history-wrap {
        width: 100% !important;
        overflow: visible !important;
    }

    .admin-main .sr-history-table,
    .admin-main .sr-history-table tbody,
    .admin-main .sr-history-table tr,
    .admin-main .sr-history-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-main .sr-history-table thead {
        display: none !important;
    }

    .admin-main .sr-history-table tbody tr {
        margin-bottom: 9px !important;
        padding: 9px !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
    }

    .admin-main .sr-history-table tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    .admin-main .sr-history-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(80px, 32%) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 29px !important;
        padding: 5px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        text-align: right !important;
        font-size: 0.76rem !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-history-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .admin-main .sr-history-table tbody td::before {
        content: attr(data-label) !important;
        color: #64748b !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        text-align: left !important;
        text-transform: uppercase;
    }

    .admin-main .sr-history-table tbody td strong,
    .admin-main .sr-history-table tbody td span,
    .admin-main .sr-history-table tbody td small {
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-history-table tbody td .sr-return-qty {
        justify-self: end !important;
        width: fit-content !important;
    }

    .admin-main .sr-modal-overlay {
        padding: 10px !important;
        align-items: flex-end !important;
    }

    .admin-main .sr-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .admin-main .sr-modal-header {
        padding: 14px 16px !important;
    }

    .admin-main .sr-modal-header h4 {
        font-size: 0.95rem !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .admin-main .sr-modal-body {
        padding: 15px 16px !important;
    }

    .admin-main .sr-modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .admin-main .sr-modal-actions button {
        width: 100% !important;
        min-height: 44px !important;
    }
}

@media (max-width: 430px) {
    .admin-main .sr-stats-ribbon,
    .admin-main .sr-filter-chips,
    .admin-main .sr-resto-badges {
        grid-template-columns: 1fr !important;
    }

    .admin-main .sr-filter-chips > span:first-child {
        grid-column: auto !important;
    }

    .admin-main .sr-stat-item {
        padding: 8px 10px !important;
    }
}