/* =========================================================
   TRITIP LIGHT THEME FINAL LAYER
   Single source of truth for the light visual system.
   Loaded after legacy/page styles so old inline paint cannot leak through.
   ========================================================= */
:root {
    color-scheme: light;
    --bg-primary: #f6f8fc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef2f7;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.96);
    --text-primary: #172033;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-dark: #64748b;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --glass-border: 1px solid #e2e8f0;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
    --shadow-xl: 0 24px 64px rgba(15, 23, 42, .16);
    --font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html,
body {
    background: #f6f8fc !important;
    color: #172033 !important;
    color-scheme: light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
    min-height: 100vh;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.text-primary,
.text-white {
    color: #172033 !important;
}

p,
.text-secondary {
    color: #475569 !important;
}

.text-muted {
    color: #64748b !important;
}

input,
select,
textarea,
button {
    font-family: inherit;
}

input,
select,
textarea {
    color-scheme: light;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

/* Shared light surfaces */
.glass-card,
.glass-card-static,
.card,
.content-panel,
.chart-panel,
.premium-card,
.premium-stat-card,
.stat-card-premium,
.premium-driver-card,
.system-info-card,
.filter-card,
.filter-panel,
.filter-section,
.premium-toolbar,
.table-panel,
.report-panel {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

.form-control,
.glass-input,
.premium-form-control,
.filter-input,
.form-select-custom,
.date-inp,
.chart-filter-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #cbd5e1 !important;
}

.form-control:focus,
.glass-input:focus,
.premium-form-control:focus,
.filter-input:focus,
.form-select-custom:focus,
.date-inp:focus,
select:focus,
textarea:focus,
input:focus {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .13) !important;
    outline: none;
}

option {
    background: #ffffff !important;
    color: #172033 !important;
}

/* Premium controls */
.btn,
button,
a.btn {
    -webkit-tap-highlight-color: transparent;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning {
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .13) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #ea580c, #f97316) !important;
}

.btn-success { background: #059669 !important; }
.btn-danger { background: #dc2626 !important; }
.btn-warning { background: #d97706 !important; }

.btn-secondary {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}

.btn-secondary:hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

.btn-outline {
    background: #ffffff !important;
    color: #3730a3 !important;
    border-color: #a5b4fc !important;
}

.btn-outline:hover {
    background: #eef2ff !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, .3) !important;
    outline-offset: 2px;
}

/* Public and user navigation */
.navbar,
.nav-premium.scrolled {
    background: rgba(255, 255, 255, .96) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .07) !important;
}

.navbar-brand,
.navbar-brand span,
.nav-logo,
.nav-links a,
.nav-btn-ghost,
.menu-toggle span {
    color: #172033 !important;
}

.navbar-brand span,
.nav-logo,
.footer-brand {
    background: linear-gradient(135deg, #ea580c, #4f46e5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.nav-link,
.nav-links a {
    color: #475569 !important;
}

.nav-link:hover,
.nav-link.active,
.nav-links a:hover {
    color: #c2410c !important;
    background: #fff7ed !important;
}

.dropdown-toggle,
.dropdown-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #172033 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12) !important;
}

.dropdown-item {
    color: #172033 !important;
}

.dropdown-item:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
}

.bottom-nav {
    background: rgba(255, 255, 255, .98) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16), 0 0 22px rgba(79, 70, 229, .1) !important;
}

.bottom-nav-item {
    color: #64748b !important;
}

.bottom-nav-item.active {
    color: #4f46e5 !important;
}

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

.bottom-nav-item.active::after {
    background: #ea580c !important;
    box-shadow: 0 0 10px rgba(234, 88, 12, .45) !important;
}

.mobile-nav-overlay,
.user-mobile-nav-overlay {
    background: rgba(248, 250, 252, .98) !important;
    color: #172033 !important;
}

.mobile-nav-content,
.user-mobile-nav-content,
.mobile-menu-item,
.user-menu-item,
.mobile-user-card,
.user-mobile-profile-card {
    color: #172033 !important;
}

.mobile-menu-item,
.user-menu-item,
.mobile-user-card,
.user-mobile-profile-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}

/* Admin shell: bright workspace and readable navigation */
.admin-layout,
.admin-main,
.main-content {
    background: #f6f8fc !important;
    color: #172033 !important;
}

.admin-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, .06) !important;
}

.sidebar-header,
.sidebar-footer,
.sidebar-submenu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

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

.sidebar-link:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, #fff7ed, #eef2ff) !important;
    color: #c2410c !important;
    box-shadow: inset 0 0 0 1px #fed7aa !important;
}

.sidebar-link.active::before {
    background: linear-gradient(180deg, #ea580c, #4f46e5) !important;
}

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

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

.admin-topbar,
.topbar-utility-group,
.user-info,
.btn-mobile-toggle {
    background: rgba(255, 255, 255, .97) !important;
    border-color: #e2e8f0 !important;
    color: #172033 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06) !important;
}

.page-title h2,
.admin-topbar .page-title h2,
.user-name-text {
    color: #172033 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

.page-title p,
.admin-topbar .page-title p {
    color: #64748b !important;
}

.topbar-icon-btn {
    color: #64748b !important;
}

.topbar-icon-btn:hover,
.topbar-icon-btn.active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.btn-website-link {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #c2410c !important;
}

/* =====================================================================
   PREMIUM ADMIN TOPBAR
   Header bersama di semua halaman admin — kartu glass premium dengan
   aksen gradien, glow dekoratif, teks judul gradien, titik status hidup,
   CTA gradien & pill profil. Ditempatkan paling akhir agar menang atas
   aturan sebelumnya (same-specificity + !important + source order).
   ===================================================================== */

/* Kartu header: glass terang dengan gradien samar & glow */
.admin-topbar {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 24px 28px;
    background:
        radial-gradient(1100px 320px at 6% -60%, rgba(99, 102, 241, 0.16), transparent 62%),
        radial-gradient(820px 280px at 98% -40%, rgba(236, 72, 153, 0.12), transparent 58%),
        radial-gradient(700px 240px at 60% 140%, rgba(16, 185, 129, 0.08), transparent 55%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.98)) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow:
        0 22px 46px -20px rgba(15, 23, 42, 0.18),
        0 4px 14px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Garis aksen gradien berjalan di tepi atas kartu */
.admin-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 26px; right: 26px;
    height: 3px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #3b82f6);
    background-size: 200% 100%;
    opacity: .9;
    animation: topbarAccentSlide 8s linear infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes topbarAccentSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Glow dekoratif pojok kanan bawah */
.admin-topbar::after {
    content: '';
    position: absolute;
    right: -70px; bottom: -90px;
    width: 260px; height: 200px;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), transparent 72%);
    pointer-events: none;
    z-index: 1;
}

.admin-topbar > * { position: relative; z-index: 3; }

/* Judul halaman: teks gradien + ikon berlian mengambang */
.admin-topbar .page-title h2 {
    color: #4338ca !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 11px;
}
/* Teks gradien hanya jika background-clip:text didukung; jika tidak, fallback warna solid #4338ca */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .admin-topbar .page-title h2 {
        background: linear-gradient(120deg, #1e3a8a 0%, #4338ca 45%, #7c3aed 80%, #db2777 115%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}
.admin-topbar .page-title h2::before {
    content: '';
    flex-shrink: 0;
    width: 13px; height: 13px;
    border-radius: 4px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12), 0 3px 10px rgba(139, 92, 246, 0.4);
    transform: rotate(45deg);
    animation: topbarGemFloat 3.2s ease-in-out infinite;
}
@keyframes topbarGemFloat {
    0%, 100% { transform: rotate(45deg) translateY(-2px); box-shadow: 0 0 0 5px rgba(139,92,246,.12), 0 3px 10px rgba(139,92,246,.4); }
    50% { transform: rotate(45deg) translateY(1px) scale(1.08); box-shadow: 0 0 0 8px rgba(139,92,246,.08), 0 4px 16px rgba(139,92,246,.55); }
}

/* Subjudul: titik status hijau "hidup" berdenyut */
.admin-topbar .page-title p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b !important;
    font-size: 0.86rem !important;
    margin-top: 4px !important;
}
.admin-topbar .page-title p::before {
    content: '';
    width: 8px; height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    animation: topbarOnlinePulse 2.2s ease-in-out infinite;
}
@keyframes topbarOnlinePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18), 0 0 6px rgba(16,185,129,.4); }
    50% { box-shadow: 0 0 0 7px rgba(16,185,129,.08), 0 0 14px rgba(16,185,129,.6); }
}

/* Grup ikon utilitas: glass pill terang */
.topbar-utility-group {
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.95), rgba(241, 245, 255, 0.9)) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    gap: 2px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.topbar-icon-btn {
    border-radius: 10px !important;
    color: #64748b !important;
    transition: all 0.22s ease !important;
}
.topbar-icon-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.16)) !important;
    color: #4f46e5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.16);
}
.topbar-icon-btn.active {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}
.admin-pending-badge {
    border-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5) !important;
}

/* Tombol "Lihat Website": CTA gradien */
.btn-website-link {
    height: 44px;
    padding: 0 18px;
    border-radius: 13px;
    background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6) !important;
    background-size: 160% 160% !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    transition: all 0.25s ease !important;
}
.btn-website-link:hover {
    transform: translateY(-2px);
    background-position: 90% 50% !important;
    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.btn-website-link i { transition: transform 0.25s ease; }
.btn-website-link:hover i { transform: translate(2px, -2px); }

/* Profil pengguna: pill putih dengan avatar gradien */
.user-info {
    height: 46px !important;
    padding: 5px 18px 5px 5px !important;
    border-radius: 25px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transition: all 0.25s ease !important;
}
.user-info:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 10px 24px rgba(139, 92, 246, 0.22) !important;
}
.user-name-text { color: #172033 !important; font-weight: 700 !important; font-size: 0.87rem !important; }
/* Hanya avatar di header yang di-scope agar tidak mengubah avatar pelanggan (orders.php/users.php) */
.user-info .user-avatar {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899) !important;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.4) !important;
    font-weight: 800 !important;
}

/* Tombol menu mobile */
.btn-mobile-toggle {
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.22s ease !important;
}
.btn-mobile-toggle:hover {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

/* Responsive: kartu header tetap nyaman di layar kecil */
@media (max-width: 768px) {
    .admin-topbar { padding: 18px 16px; border-radius: 18px; }
    .admin-topbar::before { left: 16px; right: 16px; }
    .admin-topbar .page-title h2 { font-size: 1.22rem !important; }
    .admin-topbar .page-title p { font-size: 0.78rem !important; }
    .btn-website-link { height: 40px; padding: 0 13px; }
}
/* Mobile sangat kecil: profil menyusut jadi lingkaran avatar (seperti desain lama) */
@media (max-width: 576px) {
    .user-info {
        height: 38px !important;
        width: 38px;
        min-width: 38px;
        padding: 3px !important;
        border-radius: 50% !important;
        justify-content: center;
    }
    .user-info .user-name-text { display: none; }
}

/* Tables and data surfaces */
.table,
.table-container,
.premium-table-wrap,
.premium-table {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

table thead th,
.table thead th,
.premium-table thead th {
    background: #f1f5f9 !important;
    color: #172033 !important;
    border-color: #e2e8f0 !important;
}

table tbody td,
.table tbody td,
.premium-table tbody td {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

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

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

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

/* Modal and overlay system: translucent light scrim, white readable dialog */
.modal-backdrop,
.modal-backdrop-custom,
.premium-modal-backdrop,
.admin-main [id$="Backdrop"],
.admin-main [id$="backdrop"] {
    background: rgba(15, 23, 42, .28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal,
.modal-content,
.premium-modal,
.premium-modal-content,
.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 {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .2) !important;
}

.modal-header,
.modal-footer,
.premium-modal-header,
.premium-modal-footer {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #172033 !important;
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal label,
.premium-modal h1,
.premium-modal h2,
.premium-modal h3,
.premium-modal h4,
.premium-modal h5,
.premium-modal h6,
.premium-modal label {
    color: #172033 !important;
}

.modal-close,
.premium-modal-close,
.mobile-nav-close,
.user-mobile-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

.modal-close:hover,
.premium-modal-close:hover,
.mobile-nav-close:hover,
.user-mobile-close:hover {
    background: #fff1f2 !important;
    color: #b91c1c !important;
}

/* Replace legacy inline dark paint while preserving real media/camera surfaces. */
.admin-main [style*="background: #090d16"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background:#090d16"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background: rgba(10, 15, 30"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(10,15,30"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background: rgba(15, 23, 42"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background:rgba(15,23,42"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background: rgba(30, 41, 59"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background:rgba(30,41,59"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background: #0f172a"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background:#0f172a"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background: #1e293b"]:not(video):not(canvas):not(.btn):not([class*="btn"]),
.admin-main [style*="background:#1e293b"]:not(video):not(canvas):not(.btn):not([class*="btn"]),    .admin-main [style*="background: rgba(0, 0, 0"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background:rgba(0, 0, 0"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background: rgba(0, 0, 0"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background:rgba(0, 0, 0"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background: #000"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background:#000"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background: #000000"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background-color: #000"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder),
.admin-main [style*="background-color:#000"]:not(video):not(canvas):not(.btn):not([class*="btn"]):not(.ft-camera-wrapper):not(#camera-placeholder) {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #e2e8f0 !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([class*="btn"]) {
    color: #172033 !important;
}

/* Loading never paints a black screen. */
.loading-overlay {
    background: rgba(248, 250, 252, .94) !important;
    color: #172033 !important;
    backdrop-filter: blur(8px);
}

.loading-spinner {
    border-color: #cbd5e1 !important;
    border-top-color: #ea580c !important;
}

.skeleton,
.skeleton-card {
    background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 37%, #e2e8f0 63%) !important;
    background-size: 400% 100%;
    border-color: #e2e8f0 !important;
}

/* Landing/auth workspaces */
.landing-page,
.auth-premium-bg {
    background-color: #f6f8fc !important;
    color: #172033 !important;
}

.landing-page .feature-card,
.landing-page .step-card,
.landing-page .resto-card,
.landing-page .hero-metrics,
.landing-page .signup-cta,
.auth-card,
.auth-demo-card {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .09) !important;
}

.landing-page .feature-card h4,
.landing-page .step-card h4,
.landing-page .resto-card-body h5,
.auth-title,
.auth-form-label {
    color: #172033 !important;
}

.landing-page .feature-card p,
.landing-page .step-card p,
.landing-page .resto-desc,
.landing-page .resto-meta,
.auth-subtitle,
.auth-terms,
.auth-divider,
.back-link {
    color: #475569 !important;
}

.footer-premium {
    background: #172033 !important;
}

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

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

@media (max-width: 767px) {
    .admin-main,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .admin-main .admin-header-flex,
    .admin-main .admin-btn-group,
    .admin-main .input-group,
    .hero-cta,
    .checkout-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-main .admin-btn-group > *,
    .hero-cta > *,
    .checkout-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    /* =============================================================
       MOBILE MODAL FIX: smaller popup + hide sticky footer when open
       ============================================================= */
    
    /* Sembunyikan bottom nav saat modal / backdrop aktif (CSS :has) */
    body:has(.modal-backdrop.active) .bottom-nav,
    body:has(.modal.active) .bottom-nav,
    body:has(.premium-modal-backdrop.active) .bottom-nav,
    body:has(.modal-backdrop-custom.active) .bottom-nav,
    body:has(.modal-inline.active) .bottom-nav {
        display: none !important;
    }

    /* Perkecil & rapikan SEMUA admin modal di mobile */
    .admin-main .modal,
    .admin-main .premium-modal,
    .admin-main .modal-backdrop-custom > div,
    .admin-main [id$="Backdrop"] + .modal,
    .admin-main [id$="backdrop"] + .modal,
    .admin-main #editOrderModal,
    .admin-main #branchModal > div,
    .admin-main #userModal > div,
    .admin-main #purchase-modal,
    .admin-main #pay-debt-modal,
    .admin-main #bulk-pay-modal,
    .admin-main #edit-purchase-modal,
    .admin-main #recap-modal,
    .admin-main #promo-modal,
    .admin-main #shareholderModal > div,
    .admin-main #executeModal > div,
    .admin-main #account-modal,
    .admin-main #transaction-modal,
    .admin-main #expense-modal,
    .admin-main #instruction-modal,
    .admin-main #receiptModal,
    .admin-main #printerModal,
    .admin-main #expenseModal,
    .admin-main [class*="modal"][style*="position: fixed"] {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 78vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
        padding-bottom: 20px !important;
        border-radius: 16px !important;
    }

    .admin-main .btn:not(.btn-icon),
    .admin-main button:not(.btn-icon),
    .auth-card .btn,
    .auth-card button {
        min-height: 44px;
    }

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

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

@media (max-width: 420px) {
    html { font-size: 15px; }
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    .admin-main { padding-left: 10px !important; padding-right: 10px !important; }
    .btn { white-space: normal; }
}

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