/* ==========================================================================
   NEOMORPHISM THEME — Archi POS
   Dimuat setelah style.css; hanya mengubah properti visual, bukan layout.

   Toggle tema: dark neomorphism (default) / light neomorphism (body.light-mode)
   Kembali ke tema lama: hapus <link> tag di index.html.
   ========================================================================== */

/* ==========================================================================
   1. VARIABEL — DARK NEOMORPHISM (DEFAULT)
   ========================================================================== */
:root {
    /* Latar belakang — SATU warna datar, elemen "tumbuh" dari sini */
    --bg-base:   #241a17;
    --bg-panel:  #241a17;
    --bg-glass:  #241a17;

    /* Shadow: sisi gelap + sisi terang dari warna dasar */
    --neo-dark:  #110b08;
    --neo-light: #3b2820;

    /* Raised — panel, card, sidebar, tombol normal */
    --neo-raised: 5px 5px 12px var(--neo-dark), -5px -5px 12px var(--neo-light);
    /* Raised kecil — elemen kompak */
    --neo-raised-sm: 3px 3px 8px var(--neo-dark), -3px -3px 8px var(--neo-light);
    /* Raised besar — modal, popup */
    --neo-raised-lg: 10px 10px 24px var(--neo-dark), -10px -10px 24px var(--neo-light);

    /* Inset — input, item aktif, "tertekan" */
    --neo-inset: inset 4px 4px 10px var(--neo-dark), inset -4px -4px 10px var(--neo-light);
    --neo-inset-sm: inset 3px 3px 7px var(--neo-dark), inset -3px -3px 7px var(--neo-light);

    /* Border: hanya pemisah sangat tipis */
    --border-color: rgba(255, 255, 255, 0.05);
    --border-hover:  rgba(255, 255, 255, 0.08);

    --shadow-glass: var(--neo-raised);
    --shadow-glow:  var(--neo-raised-sm);
}

/* ==========================================================================
   2. VARIABEL — LIGHT NEOMORPHISM
   ========================================================================== */
body.light-mode {
    --bg-base:   #e8e4de;
    --bg-panel:  #e8e4de;
    --bg-glass:  #e8e4de;

    --neo-dark:  #c4bfb9;
    --neo-light: #ffffff;

    --neo-raised:    5px 5px 12px var(--neo-dark), -5px -5px 12px var(--neo-light);
    --neo-raised-sm: 3px 3px 8px var(--neo-dark), -3px -3px 8px var(--neo-light);
    --neo-raised-lg: 10px 10px 24px var(--neo-dark), -10px -10px 24px var(--neo-light);

    --neo-inset:    inset 4px 4px 10px var(--neo-dark), inset -4px -4px 10px var(--neo-light);
    --neo-inset-sm: inset 3px 3px 7px var(--neo-dark), inset -3px -3px 7px var(--neo-light);

    --border-color: rgba(0, 0, 0, 0.04);
    --border-hover:  rgba(0, 0, 0, 0.07);

    --text-primary:   #37231A;
    --text-secondary: #85705F;
    --text-muted:     #9b897a;

    --shadow-glass: var(--neo-raised);
    --shadow-glow:  var(--neo-raised-sm);
}

/* ==========================================================================
   3. BODY & BACKGROUND
   ========================================================================== */
body {
    background: var(--bg-base) !important;
}

body.light-mode {
    background: var(--bg-base) !important;
}

/* Sembunyikan blob dekoratif — tidak relevan untuk neomorphism */
.bloop, .bloop-1, .bloop-2, .bloop-3 {
    display: none !important;
}

/* ==========================================================================
   4. GLASSMORPHISM UTILITY → NEOMORPHISM
   ========================================================================== */
.glass-panel {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* ==========================================================================
   5. LOGIN SCREEN
   ========================================================================== */
#login-screen {
    background: var(--bg-base) !important;
}

.login-container {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: var(--neo-raised-lg) !important;
}

/* ==========================================================================
   6. INPUT FIELDS — inset = permukaan cekung
   ========================================================================== */
.input-group input,
.input-group select,
.glass-input,
textarea,
.customer-name-field,
.date-input,
select.glass-input,
.filter-select {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
    color: var(--text-primary) !important;
    backdrop-filter: none !important;
}

.input-group input:focus,
.input-group select:focus,
.glass-input:focus,
textarea:focus,
.customer-name-field:focus,
.date-input:focus {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset), 0 0 0 2px var(--primary) !important;
    outline: none !important;
    transform: none !important;
}

/* Light mode — sama, karena bg-base sudah berubah via variabel */
body.light-mode .input-group input,
body.light-mode .input-group select,
body.light-mode .glass-input,
body.light-mode textarea,
body.light-mode .customer-name-field,
body.light-mode .date-input {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
    color: var(--text-primary) !important;
}

body.light-mode .input-group input:focus,
body.light-mode .glass-input:focus,
body.light-mode .customer-name-field:focus {
    box-shadow: var(--neo-inset), 0 0 0 2px var(--primary) !important;
}

/* ==========================================================================
   7. TOMBOL PRIMARY
   ========================================================================== */
.btn-primary {
    background: var(--primary) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: #ffffff !important;
    /* Hapus gradient */
    background-image: none !important;
}

.btn-primary:hover:not(:disabled) {
    transform: none !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
    filter: brightness(1.1);
}

.btn-primary:active:not(:disabled) {
    transform: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    filter: brightness(0.95);
}

/* ==========================================================================
   8. TOMBOL SECONDARY
   ========================================================================== */
.btn-secondary {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
}

.btn-secondary:active {
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   9. TOMBOL LAIN (danger, emergency, print)
   ========================================================================== */
.btn-danger,
[class*="btn-delete"],
.btn-emergency {
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.btn-danger:hover,
.btn-emergency:hover {
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
}

.btn-danger:active,
.btn-emergency:active {
    box-shadow: var(--neo-inset-sm) !important;
}

.print-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.print-btn:hover {
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
}

/* ==========================================================================
   10. SIDEBAR
   ========================================================================== */
.sidebar {
    background: var(--bg-panel) !important;
    border-right: none !important;
    box-shadow: 4px 0 12px var(--neo-dark), -2px 0 6px var(--neo-light) !important;
}

.sidebar-logo {
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
}

.sidebar-collapse-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.sidebar-collapse-btn:hover {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

/* Nav group separator */
.nav-group + .nav-group {
    border-top: 1px solid var(--border-color) !important;
}

/* Nav item — normal */
.nav-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: box-shadow var(--trans-fast), color var(--trans-fast) !important;
}

.nav-item:hover {
    background: transparent !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--text-primary) !important;
}

/* Nav item — aktif */
.nav-item.active {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

/* Avatar user info */
.user-info .avatar {
    box-shadow: var(--neo-raised-sm) !important;
}

/* Sidebar footer */
.sidebar-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   11. TOPBAR
   ========================================================================== */
.topbar {
    background: var(--bg-panel) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 10px var(--neo-dark), 0 -1px 4px var(--neo-light) !important;
}

.search-bar {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
}

.search-bar input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   12. POS — KATEGORI
   ========================================================================== */
.categories-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.category-item {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.category-item:hover {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
    border: none !important;
}

.category-item.active {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

/* ==========================================================================
   13. POS — MENU CARDS
   ========================================================================== */
.menu-card {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

.menu-card:hover {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: 7px 7px 16px var(--neo-dark), -7px -7px 16px var(--neo-light) !important;
    transform: translateY(-2px);
}

body.light-mode .menu-card {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

body.light-mode .menu-card:hover {
    box-shadow: 7px 7px 16px var(--neo-dark), -7px -7px 16px var(--neo-light) !important;
}

.menu-img-container,
.menu-img-actual,
.menu-img {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

body.light-mode .menu-img-container,
body.light-mode .menu-img-actual,
body.light-mode .menu-img {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

.menu-add-btn {
    background: var(--primary) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.menu-add-btn:hover {
    box-shadow: var(--neo-inset-sm) !important;
    filter: brightness(1.1);
}

body.light-mode .menu-add-btn {
    background: var(--primary) !important;
    box-shadow: var(--neo-raised-sm) !important;
}

/* ==========================================================================
   14. POS — CART PANEL
   ========================================================================== */
.cart-panel {
    background: var(--bg-panel) !important;
    border-left: none !important;
    box-shadow: -4px 0 12px var(--neo-dark), 2px 0 6px var(--neo-light) !important;
}

.cart-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.cart-item {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

body.light-mode .cart-item {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

/* Tombol qty */
.qty-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.qty-btn:hover {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

body.light-mode .qty-btn {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-raised-sm) !important;
}

/* Tombol hapus item */
.remove-item-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.remove-item-btn:hover {
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   15. POS — ORDER TYPE & PAYMENT BUTTONS
   ========================================================================== */
.type-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.type-btn.active {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

body.light-mode .type-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

body.light-mode .type-btn.active {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

.pay-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.payment-option input:checked + .pay-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

body.light-mode .pay-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

body.light-mode .payment-option input:checked + .pay-btn {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
    border: none !important;
}

/* ==========================================================================
   16. POS — CHECKOUT BUTTON
   ========================================================================== */
.btn-checkout {
    background: var(--primary) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: #ffffff !important;
}

.btn-checkout:hover:not(:disabled) {
    transform: none !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
    filter: brightness(1.1);
}

.btn-checkout:active:not(:disabled) {
    box-shadow: var(--neo-inset-sm) !important;
}

.btn-checkout:disabled {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    opacity: 0.5;
}

/* ==========================================================================
   17. POS — TOGGLE BAZAR / KURIR
   ========================================================================== */
.bazaar-toggle-container,
.courier-toggle-container {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

/* ==========================================================================
   18. POS — ADVANCED OPTIONS
   ========================================================================== */
.advanced-options-toggle {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
}

.advanced-options-toggle:hover {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   19. STAT CARDS — DASHBOARD
   ========================================================================== */
.stat-card {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

.stat-card:hover {
    transform: none !important;
    box-shadow: 7px 7px 16px var(--neo-dark), -7px -7px 16px var(--neo-light) !important;
}

.stat-icon {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

.stat-icon.primary,
.stat-icon.accent,
.stat-icon.secondary,
.stat-icon.warning,
.stat-icon.danger,
.stat-icon.success {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   20. DASHBOARD PANELS & TABS
   ========================================================================== */
.dashboard-panel {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

.dashboard-panel.glass-panel {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-raised) !important;
    border: none !important;
    backdrop-filter: none !important;
}

.dashboard-panel h3 {
    border-bottom: 1px solid var(--border-color) !important;
}

.best-seller-item,
.recent-order-item {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Tabs */
.dash-tab-nav,
.hpp-tab-nav {
    border-bottom: 1px solid var(--border-color) !important;
}

.dash-tab-btn,
.hpp-tab-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.dash-tab-btn:hover,
.hpp-tab-btn:hover {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--text-primary) !important;
}

.dash-tab-btn.active,
.hpp-tab-btn.active {
    background: var(--bg-base) !important;
    border: none !important;
    border-bottom-color: transparent !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
}

/* ==========================================================================
   21. FILTER / DATE FILTER
   ========================================================================== */
.date-filter-group {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
}

.date-input {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: none !important;
    color-scheme: dark;
}

.date-input:focus {
    border: none !important;
    box-shadow: 0 0 0 2px var(--primary) !important;
}

body.light-mode .date-input {
    color-scheme: light;
    background: var(--bg-base) !important;
}

/* ==========================================================================
   22. TABEL (ORDERS, REPORTS, dll)
   ========================================================================== */
.table-wrapper,
.orders-table-container,
[class*="-table-container"],
[class*="-table-wrapper"] {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
    border-radius: var(--radius-lg) !important;
}

table th {
    background: var(--bg-base) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

table tr:hover td {
    background: transparent !important;
}

/* ==========================================================================
   23. TOAST NOTIFICATIONS
   ========================================================================== */
.toast {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* ==========================================================================
   24. MODAL — #modal-container (modal umum via Modal.show)
   ========================================================================== */

/* Overlay gelap, tanpa blur */
#modal-overlay,
.modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

/* Modal container — tanpa shadow pinggiran (permintaan user) */
#modal-container {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-lg) !important;
}

/* Confirm modal */
#modal-container.confirm-modal-shell .confirm-modal-content {
    background: var(--bg-panel) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
}

/* Header & footer modal umum */
.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}

.modal-footer.sticky {
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* Tombol X tutup modal */
.modal-close-x {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.modal-close-x:hover {
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   25. FORM ENHANCEMENTS MODAL (.modal-enhanced dari FormManager)
       Mencakup: Pengeluaran, Pemasukan, Aset, Menu Management
   ========================================================================== */

/* FormManager overlay */
.modal-overlay-enhanced {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

/* FormManager modal container — tanpa shadow pinggiran */
.modal-enhanced {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-lg) !important;
}

/* Header — hapus gradient lama */
.modal-header-enhanced {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Footer — hapus latar gelap */
.modal-footer-enhanced {
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Input dalam modal (FormManager) — inset neomorphic */
.input-enhanced {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
    color: var(--text-primary) !important;
}

.input-enhanced:focus {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset), 0 0 0 2px var(--primary) !important;
    outline: none !important;
}

/* Tombol close FormManager */
.modal-close-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    border-radius: var(--radius-md) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.modal-close-btn:hover {
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--danger) !important;
    transform: none !important;
}

/* Table di dalam modal (misal: expense items) */
.table-enhanced-container {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
    border-radius: var(--radius-md) !important;
}

.table-enhanced-container thead th {
    background: var(--bg-base) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   26. WALLET MODAL (.wallet-modal dalam dashboard)
   ========================================================================== */

/* Wallet overlay */
.wallet-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

/* Wallet modal container — tanpa shadow pinggiran */
.wallet-modal {
    background: var(--bg-panel) !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-lg) !important;
}

.wallet-modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.wallet-modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Tombol X wallet modal */
.wallet-modal .icon-btn {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    border-radius: var(--radius-md) !important;
}

.wallet-modal .icon-btn:hover {
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   27. MISC: summary cart, promo, switch, badge
   ========================================================================== */
.cart-summary {
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
}

.summary-line.total {
    border-top: 1px solid var(--border-color) !important;
}

/* Promo code section */
.promo-code-container {
    background: transparent !important;
}

/* Switch / toggle — pertahankan gaya asli, hanya buang border */
.slider {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
}

input:checked + .slider {
    background: var(--primary) !important;
    box-shadow: none !important;
}

/* Mobile bottom nav */
.mobile-bottom-nav {
    background: var(--bg-panel) !important;
    border-top: none !important;
    box-shadow: 0 -4px 12px var(--neo-dark) !important;
}

.mobile-nav-item {
    background: transparent !important;
}

.mobile-fab {
    background: var(--primary) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* Order type selector area */
.order-type-selector {
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
}

/* ==========================================================================
   28. NAV SYNC STATUS
   ========================================================================== */
.nav-sync-status {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
}

/* ==========================================================================
   29. SHIFT & ATTENDANCE CARDS
   ========================================================================== */
.shift-info-card,
.shift-stat,
[class*="shift-card"],
[class*="attendance-card"] {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* ==========================================================================
   30. INVENTORY / HPP CARDS
   ========================================================================== */
[class*="ingredient-card"],
[class*="menu-management-card"],
.hpp-card {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* ==========================================================================
   31. REPORTS
   ========================================================================== */
.report-card,
.report-section,
[class*="report-panel"],
.balance-section {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* ==========================================================================
   32. DIVIDER / SECTION BORDERS
   ========================================================================== */
.form-section {
    border-bottom: 1px solid var(--border-color) !important;
}

hr {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   33. SCROLLBAR — sesuaikan dengan latar neomorphism
   ========================================================================== */
::-webkit-scrollbar-track {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--neo-dark), var(--neo-light)) !important;
    border-radius: 10px;
}

/* ==========================================================================
   34. TOMBOL ENHANCED (form-enhancements.css) — neomorphism
   ========================================================================== */
.btn-primary-enhanced {
    background: var(--primary) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: #ffffff !important;
}

.btn-primary-enhanced:hover:not(:disabled) {
    transform: none !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
    filter: brightness(1.1);
}

.btn-primary-enhanced:active:not(:disabled) {
    box-shadow: var(--neo-inset-sm) !important;
}

.btn-secondary-enhanced {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
    color: var(--text-secondary) !important;
}

.btn-secondary-enhanced:hover:not(:disabled) {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   35. SESI KASIR — SHIFT VIEW & LOCK SCREEN
   ========================================================================== */

/* --- Shift Lock Screen --- */
#shift-lock-screen {
    background: var(--bg-base) !important;
}

#shift-lock-screen .login-container {
    background: var(--bg-panel) !important;
    border: none !important;
    box-shadow: var(--neo-raised-lg) !important;
    backdrop-filter: none !important;
}

/* Ikon kunci — lingkaran neomorphic */
.lock-badge {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-raised) !important;
    border: none !important;
    /* Hapus glow warna warning */
}

.lock-badge::after {
    border-color: var(--warning) !important;
    opacity: 0.4 !important;
}

/* Judul shift lock: hapus gradient teks, pakai warna solid */
.shift-lock-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

/* Area info shift lock (inline style di index.html akan di-override) */
#shift-info-area {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
}

/* Tombol buka kasir di lock screen */
#open-shift-btn {
    box-shadow: var(--neo-raised-sm) !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: none !important;
}

#open-shift-btn:hover {
    box-shadow: 5px 5px 12px var(--neo-dark), -5px -5px 12px var(--neo-light) !important;
    filter: brightness(1.1);
}

#open-shift-btn:active {
    box-shadow: var(--neo-inset-sm) !important;
}

/* --- Shift View: kartu status operasional --- */
.shift-status-card {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

/* Ikon status (cash-register) */
.shift-status-icon {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
}

/* Badge "Realtime" */
.shift-realtime-badge {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Tombol "Tutup Kasir (End Shift)" */
.btn-close-shift {
    width: 100% !important;
    justify-content: center !important;
    background: var(--danger) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

.btn-close-shift:hover {
    filter: brightness(1.1) !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light) !important;
}

.btn-close-shift:active {
    box-shadow: var(--neo-inset-sm) !important;
}

/* --- Shift Warning Box --- */
/* Di shift view (notice di atas tombol tutup) dan modal peringatan */
.shift-warning-box {
    background: var(--bg-base) !important;
    border-left: none !important;
    border: none !important;
    /* Shadow inset + aksen warna warning di sisi kiri via outline */
    box-shadow: var(--neo-inset), inset 4px 0 0 var(--warning) !important;
}

.shift-warning-box i {
    color: var(--warning) !important;
}

/* Warning notice ringkas (di atas tombol tutup kasir dalam shift view) */
.shift-warning-notice {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset-sm), inset 3px 0 0 var(--warning) !important;
    padding: 12px 14px !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--text-primary) !important;
}

.shift-warning-notice span {
    color: var(--text-secondary);
}

/* --- Shift Summary (ringkasan shift aktif di kartu kanan) --- */
#shift-summary-panel {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
}

.summary-item {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

.summary-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* --- Shift Summary Item (di modal tutup kasir) --- */
.shift-summary-item {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised-sm) !important;
}

/* --- Shift Total Row (di modal tutup kasir) --- */
.shift-total-row {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-inset) !important;
}

.shift-total-row .row:last-child {
    border-top: 1px solid var(--border-color) !important;
}

/* --- Shift Modal Icon (lingkaran merah / hijau di modal) --- */
.shift-modal-icon {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-raised) !important;
}

.shift-success-modal .shift-modal-icon {
    background: var(--bg-base) !important;
    box-shadow: var(--neo-raised) !important;
}

/* --- Riwayat Shift (tabel) --- */
#shift-view .glass-panel {
    background: var(--bg-base) !important;
    border: none !important;
    box-shadow: var(--neo-raised) !important;
    backdrop-filter: none !important;
}