/* Unified Theme Across POS Pages */
:root {
    --theme-bg-1: #f5f8ff;
    --theme-bg-2: #edfdf8;
    --theme-ink: #10223c;
    --theme-muted: #5f6f87;
    --theme-accent-1: #1d4ed8;
    --theme-accent-2: #0f766e;
    --theme-danger: #b91c1c;
    --theme-card: #ffffff;
    --theme-border: #dbe4f1;
    --theme-shadow: 0 14px 30px rgba(18, 38, 63, 0.12);
    --theme-filter-bg: linear-gradient(135deg, #eaf2ff, #e6fffa);
    --theme-filter-border: #bfd7ff;
    --theme-table-bg: #ffffff;
    --theme-th-bg: #eaf2ff;
    --theme-input-bg: #ffffff;
    --theme-link: #0f4ca8;
}

html[data-theme="dark"] {
    --theme-bg-1: #0b1220;
    --theme-bg-2: #121d31;
    --theme-ink: #e7eefc;
    --theme-muted: #b7c3db;
    --theme-accent-1: #3b82f6;
    --theme-accent-2: #14b8a6;
    --theme-danger: #fca5a5;
    --theme-card: #111b2e;
    --theme-border: #2a3956;
    --theme-shadow: 0 14px 30px rgba(2, 6, 23, 0.55);
    --theme-filter-bg: linear-gradient(135deg, #17243c, #132f36);
    --theme-filter-border: #2a4f69;
    --theme-table-bg: #101a2c;
    --theme-th-bg: #1b2a45;
    --theme-input-bg: #0f1a2e;
    --theme-link: #8ab4ff;
}

html[data-theme="ocean"] { --theme-bg-1:#e6f6ff; --theme-bg-2:#dff7f2; --theme-ink:#082f49; --theme-muted:#41677c; --theme-accent-1:#0369a1; --theme-accent-2:#0f766e; --theme-danger:#b91c1c; --theme-card:#fafdff; --theme-border:#b9ddec; --theme-shadow:0 14px 30px rgba(3,105,161,.16); --theme-filter-bg:linear-gradient(135deg,#dcefff,#d9faf4); --theme-filter-border:#9dcee6; --theme-table-bg:#fff; --theme-th-bg:#dff3ff; --theme-input-bg:#fff; --theme-link:#075985; }
html[data-theme="forest"] { --theme-bg-1:#edf8ee; --theme-bg-2:#f5f1dd; --theme-ink:#153a24; --theme-muted:#55705a; --theme-accent-1:#166534; --theme-accent-2:#4d7c0f; --theme-danger:#b91c1c; --theme-card:#fffef9; --theme-border:#cce4cc; --theme-shadow:0 14px 30px rgba(22,101,52,.14); --theme-filter-bg:linear-gradient(135deg,#e2f5e5,#f6f0d4); --theme-filter-border:#b5d8b9; --theme-table-bg:#fff; --theme-th-bg:#e6f5e6; --theme-input-bg:#fff; --theme-link:#166534; }
html[data-theme="sunset"] { --theme-bg-1:#fff3e8; --theme-bg-2:#fff0ef; --theme-ink:#4a1d16; --theme-muted:#83534a; --theme-accent-1:#c2410c; --theme-accent-2:#db2777; --theme-danger:#b91c1c; --theme-card:#fffdfb; --theme-border:#f1cfc1; --theme-shadow:0 14px 30px rgba(194,65,12,.15); --theme-filter-bg:linear-gradient(135deg,#ffead7,#ffe0eb); --theme-filter-border:#efbba9; --theme-table-bg:#fff; --theme-th-bg:#fff0e7; --theme-input-bg:#fff; --theme-link:#9a3412; }
html[data-theme="rose"] { --theme-bg-1:#fff1f5; --theme-bg-2:#f7edff; --theme-ink:#4a1830; --theme-muted:#83556b; --theme-accent-1:#be185d; --theme-accent-2:#7e22ce; --theme-danger:#be123c; --theme-card:#fffaff; --theme-border:#ecc8dc; --theme-shadow:0 14px 30px rgba(190,24,93,.14); --theme-filter-bg:linear-gradient(135deg,#ffe4ef,#f3e4ff); --theme-filter-border:#e5bbd2; --theme-table-bg:#fff; --theme-th-bg:#ffedf5; --theme-input-bg:#fff; --theme-link:#9d174d; }
html[data-theme="lavender"] { --theme-bg-1:#f5f3ff; --theme-bg-2:#eff6ff; --theme-ink:#2e245c; --theme-muted:#625d81; --theme-accent-1:#6d28d9; --theme-accent-2:#2563eb; --theme-danger:#be123c; --theme-card:#fff; --theme-border:#d8d2f2; --theme-shadow:0 14px 30px rgba(109,40,217,.14); --theme-filter-bg:linear-gradient(135deg,#eee9ff,#e4efff); --theme-filter-border:#c9bff0; --theme-table-bg:#fff; --theme-th-bg:#f0edff; --theme-input-bg:#fff; --theme-link:#5b21b6; }
html[data-theme="midnight"] { --theme-bg-1:#071329; --theme-bg-2:#101c3d; --theme-ink:#e7efff; --theme-muted:#afc0e3; --theme-accent-1:#4f46e5; --theme-accent-2:#0891b2; --theme-danger:#fda4af; --theme-card:#101d38; --theme-border:#293b60; --theme-shadow:0 14px 30px rgba(0,0,0,.48); --theme-filter-bg:linear-gradient(135deg,#172854,#102e43); --theme-filter-border:#34538a; --theme-table-bg:#0e1a34; --theme-th-bg:#1a2b50; --theme-input-bg:#0c1830; --theme-link:#a9c8ff; }
html[data-theme="coffee"] { --theme-bg-1:#271914; --theme-bg-2:#453027; --theme-ink:#fff3e5; --theme-muted:#dcc3ac; --theme-accent-1:#a16207; --theme-accent-2:#b45309; --theme-danger:#fca5a5; --theme-card:#38251f; --theme-border:#68463b; --theme-shadow:0 14px 30px rgba(0,0,0,.45); --theme-filter-bg:linear-gradient(135deg,#4a3026,#473719); --theme-filter-border:#815d44; --theme-table-bg:#33221d; --theme-th-bg:#51372d; --theme-input-bg:#2e1e19; --theme-link:#fcd34d; }
html[data-theme="slate"] { --theme-bg-1:#e9eef3; --theme-bg-2:#e5ebea; --theme-ink:#1e293b; --theme-muted:#5d6b7e; --theme-accent-1:#334155; --theme-accent-2:#0f766e; --theme-danger:#b91c1c; --theme-card:#fbfcfd; --theme-border:#cbd5df; --theme-shadow:0 14px 30px rgba(30,41,59,.14); --theme-filter-bg:linear-gradient(135deg,#e6edf5,#e5f2ef); --theme-filter-border:#bdcbd8; --theme-table-bg:#fff; --theme-th-bg:#edf2f7; --theme-input-bg:#fff; --theme-link:#334155; }

html,
body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Hind", Arial, sans-serif !important;
}

body {
    background: linear-gradient(145deg, var(--theme-bg-1), var(--theme-bg-2)) !important;
    color: var(--theme-ink) !important;
}

header,
.top,
.top-shell {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 50%, #eff6ff 100%) !important;
    color: #0f172a !important;
    border-bottom: 1px solid #bfdbfe !important;
    box-shadow: var(--theme-shadow) !important;
}

header h1,
header h2,
header h3,
.top h1,
.top h2,
.top h3,
.top-shell h1,
.top-shell h2,
.top-shell h3 {
    color: #0f172a !important;
    margin: 0 !important;
}

.top-shell {
    padding: 16px 20px !important;
}

.top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.top-actions {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-left: auto !important;
}

.top-row .title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: 0.2px !important;
}

.top-row .subtitle {
    margin-top: 4px !important;
    color: #334155 !important;
    font-size: 13px !important;
}

.top-actions select,
.top-actions button {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

.top-logout {
    text-decoration: none !important;
    color: #1e40af !important;
    font-weight: 800 !important;
    border: 1px solid #93c5fd !important;
    border-radius: 9px !important;
    padding: 7px 14px !important;
    background: #bfdbfe !important;
}

.nav {
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 12px !important;
}

.top-shell .nav {
    margin-top: 12px !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

.nav a {
    color: #0f172a !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    transition: background 0.15s ease;
}

.nav a:hover {
    background: #bfdbfe !important;
}

.nav a.nav-link-active {
    background: #bfdbfe !important;
    color: #1e3a8a !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12) !important;
}

/* =========================================================
   DARK THEME STYLES
   ========================================================= */
html[data-theme="dark"] header,
html[data-theme="dark"] .top,
html[data-theme="dark"] .top-shell {
    background: #0f172a !important;
    color: #ffffff !important;
    border-bottom: 1px solid #1e293b !important;
}

html[data-theme="dark"] header h1,
html[data-theme="dark"] header h2,
html[data-theme="dark"] header h3,
html[data-theme="dark"] .top-shell h1,
html[data-theme="dark"] .top-shell h2,
html[data-theme="dark"] .top-shell h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .top-row .title {
    color: #ffffff !important;
}

html[data-theme="dark"] .top-row .subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .top-actions select,
html[data-theme="dark"] .top-actions button,
html[data-theme="dark"] .top-actions .top-logout {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}

html[data-theme="dark"] .nav {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

html[data-theme="dark"] .nav a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a.nav-link-active {
    background: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .card {
    background: #111b2e !important;
    color: #f1f5f9 !important;
    border-color: #2a3956 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #0f1a2e !important;
    color: #ffffff !important;
    border-color: #2a3956 !important;
}

html[data-theme="dark"] .plan-card {
    background: #111b2e !important;
    border-color: #2a3956 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .plan-card .plan-btn {
    background: #1e293b !important;
    color: #93c5fd !important;
    border: 1px solid #334155 !important;
}

html[data-theme="dark"] .plan-card.selected .plan-btn {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

.container,
.wrap,
.panel,
.card,
.metric,
.bill,
.products-panel {
    border-radius: 14px !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow) !important;
    background: var(--theme-card) !important;
}

.layout > .products-panel,
.layout > .bill-panel,
.layout > .panel {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch;
}

#productList,
.category-section,
.products {
    width: 100%;
}

.filter-box,
.filter,
.filter-panel,
.filters,
.filter-strip,
.tab-section .filter-box,
.tab-section .filter {
    background: var(--theme-filter-bg) !important;
    border: 1px solid var(--theme-filter-border) !important;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.1) !important;
    border-radius: 12px !important;
}

.filter-row,
.filter-grid,
.filter-actions {
    background: transparent !important;
}

.top .nav,
.top-shell .nav,
header .nav,
body > .nav {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.9), rgba(29, 78, 216, 0.82), rgba(15, 118, 110, 0.78)) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-ink) !important;
}

a {
    color: var(--theme-link);
}

a:hover {
    color: var(--theme-link);
}

input,
select,
textarea,
button {
    border-radius: 9px !important;
    border: 1px solid #c8d4e7 !important;
    font-family: inherit !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-ink) !important;
}

button,
.print-btn,
.action-btn,
.download-btn {
    background: linear-gradient(90deg, var(--theme-accent-1), var(--theme-accent-2)) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cancel-btn,
button.cancel-btn {
    background: #fee2e2 !important;
    color: var(--theme-danger) !important;
    border: 1px solid #fecaca !important;
}

.tab-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.tab-btn.active {
    background: linear-gradient(90deg, var(--theme-accent-1), var(--theme-accent-2)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--theme-table-bg);
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px;
    overflow: hidden;
}

table th {
    background: var(--theme-th-bg) !important;
    color: var(--theme-ink) !important;
    font-weight: 800 !important;
}

table td,
table th {
    border-color: #dbe4f1 !important;
    padding: 9px !important;
    color: var(--theme-ink) !important;
}

.total-box {
    border-radius: 12px !important;
    border: 1px solid #cfe0ff !important;
    background: #eff6ff !important;
}

.stock-warning,
.item-warning,
.alert,
.notice {
    border-radius: 10px !important;
}

.theme-toggle-btn {
    min-width: 112px;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: var(--theme-accent-1) !important;
    color: #ffffff !important;
    appearance: auto;
}

.theme-toggle-btn option {
    background: var(--theme-accent-1) !important;
    color: #ffffff !important;
}

.product-price {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-theme="dark"] .total-box {
    background: #16253f !important;
    border-color: #2a4f69 !important;
}

html[data-theme="dark"] .tab-btn {
    background: #0f1a2e !important;
    border-color: #2a3956 !important;
    color: #d9e6ff !important;
}

html[data-theme="dark"] .tab-btn.active {
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-link {
    background: #3a1a1a !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
}

@media (max-width: 980px) {
    .nav {
        border-radius: 10px !important;
    }
}

.nav-break {
    flex-basis: 100%;
    height: 10px;
}

.page-tabs {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid #bfdbfe;
    background: rgba(191, 219, 254, 0.5);
}

.page-tab-link,
.page-tabs a,
.page-tabs .page-tab-link,
.main-ledger-tabs a,
.main-ledger-tabs .page-tab-link {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    padding: 6px 12px;
    border-radius: 8px;
}

.page-tab-link:hover,
.page-tabs a:hover,
.page-tabs .page-tab-link:hover,
.main-ledger-tabs a:hover,
.main-ledger-tabs .page-tab-link:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #000000 !important;
}

.page-tab-link.page-tab-active,
.page-tabs a.page-tab-active,
.page-tabs .page-tab-active,
.main-ledger-tabs a.page-tab-active,
.main-ledger-tabs .page-tab-active {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #bfdbfe !important;
}

input[type="date"]:disabled,
input[type="month"]:disabled {
    opacity: 0.62 !important;
    background: #dbe4f1 !important;
    color: #5f6f87 !important;
    cursor: not-allowed !important;
}

html[data-theme="dark"] input[type="date"]:disabled,
html[data-theme="dark"] input[type="month"]:disabled {
    background: #1f2b42 !important;
    color: #8aa0c8 !important;
}




/* Compact Main Ledger secondary navigation */
.main-ledger-tabs {
    gap: 6px !important;
    padding: 6px 12px !important;
    margin: 6px 9px 8px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    align-items: center !important;
}

.main-ledger-tabs .page-tab-link,
.main-ledger-tabs .main-ledger-tab-button {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 6px 11px !important;
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.main-ledger-tabs .main-ledger-tab-button {
    margin: 0 !important;
    cursor: pointer;
}

@media (max-width: 800px) {
    .main-ledger-tabs {
        gap: 5px !important;
        padding: 6px 8px !important;
        margin: 5px 6px 7px !important;
    }

    .main-ledger-tabs .page-tab-link,
    .main-ledger-tabs .main-ledger-tab-button {
        font-size: 13px !important;
        padding: 5px 8px !important;
        min-height: 30px !important;
        height: 30px !important;
    }
}

/* Clear filter button */
.clear-filter-btn {
    margin-left: 6px !important;
    padding: 9px 15px !important;
    min-height: 38px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 9px !important;
    background: var(--theme-table-bg) !important;
    color: var(--theme-ink) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.clear-filter-btn:hover {
    background: var(--theme-filter-bg) !important;
}

/* =========================================================
   Compact contextual / secondary navigation
   Applies to Products, Ledger, Reports and Stock sections.
   ========================================================= */

.page-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    padding: 5px 10px !important;
    margin: 5px 9px 7px !important;
    min-height: 0 !important;
    border-radius: 9px !important;
}

.page-tabs .page-tab-link,
.page-tabs .tab-btn,
.page-tabs .main-ledger-tab-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

.page-tabs .page-tab-link {
    text-decoration: none !important;
}

.page-tabs .page-tab-link:hover {
    text-decoration: none !important;
}

.page-tabs .page-tab-active {
    font-weight: 700 !important;
}

/* Keep the main navigation visually dominant */
.nav {
    min-height: 0 !important;
}

@media (max-width: 800px) {
    .page-tabs {
        gap: 4px !important;
        padding: 5px 7px !important;
        margin: 4px 6px 6px !important;
    }

    .page-tabs .page-tab-link,
    .page-tabs .tab-btn,
    .page-tabs .main-ledger-tab-button {
        min-height: 29px !important;
        height: 29px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   POS View Mode
   Desktop = normal responsive desktop layout
   Mobile  = phone-style compact layout
   ========================================================= */

.view-mode-toggle-btn {
    min-width: 145px !important;
    width: auto !important;
}

.language-toggle-btn {
    width: auto !important;
}

/* Quick Billing page: keep all top-actions selects compact */
html[data-quick-billing="true"] .top-actions select,
html[data-quick-billing="true"] .view-mode-toggle-btn,
html[data-quick-billing="true"] .language-toggle-btn {
    width: auto !important;
    min-width: 0 !important;
}


/* Mobile View forced from desktop/laptop */
html[data-view-mode="mobile"] body {
    width: 390px;
    max-width: 390px;
    min-width: 390px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}

/* Keep the POS shell inside the simulated mobile width */
html[data-view-mode="mobile"] .top-shell,
html[data-view-mode="mobile"] .top,
html[data-view-mode="mobile"] main,
html[data-view-mode="mobile"] .page {
    max-width: 390px !important;
}

/* Header */
html[data-view-mode="mobile"] .top-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

html[data-view-mode="mobile"] .top-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

html[data-view-mode="mobile"] .top-user-name {
    font-size: 13px !important;
}

html[data-view-mode="mobile"] .title {
    font-size: 22px !important;
}

/* Main navigation */
html[data-view-mode="mobile"] .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    overflow: hidden !important;
}

html[data-view-mode="mobile"] .nav a {
    font-size: 12px !important;
    padding: 7px 9px !important;
}

/* Secondary navigation */
html[data-view-mode="mobile"] .page-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: hidden !important;
}

html[data-view-mode="mobile"] .page-tabs .page-tab-link,
html[data-view-mode="mobile"] .page-tabs .tab-btn,
html[data-view-mode="mobile"] .page-tabs .main-ledger-tab-button {
    font-size: 12px !important;
    padding: 5px 8px !important;
    min-height: 29px !important;
    height: 29px !important;
}

/* Common responsive grids */
html[data-view-mode="mobile"] .grid,
html[data-view-mode="mobile"] .employee-grid,
html[data-view-mode="mobile"] .two,
html[data-view-mode="mobile"] .cards,
html[data-view-mode="mobile"] .gst-grid,
html[data-view-mode="mobile"] .gst-file-grid,
html[data-view-mode="mobile"] .hardware-install-card {
    grid-template-columns: 1fr !important;
}

/* GST Hub Mobile View */
html[data-view-mode="mobile"] .gst-page {
    padding: 0 10px 30px !important;
    margin: 12px auto !important;
    max-width: 100% !important;
}

html[data-view-mode="mobile"] .gst-hero {
    padding: 16px !important;
    border-radius: 14px !important;
}

html[data-view-mode="mobile"] .gst-hero h1 {
    font-size: 22px !important;
}

html[data-view-mode="mobile"] .gst-hero p {
    font-size: 13px !important;
}

html[data-view-mode="mobile"] .gst-month {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .gst-month input {
    width: 100% !important;
    min-width: 0 !important;
}

html[data-view-mode="mobile"] .gst-card {
    padding: 16px !important;
    border-radius: 14px !important;
}

html[data-view-mode="mobile"] .gst-value {
    font-size: 24px !important;
    margin-top: 10px !important;
}

html[data-view-mode="mobile"] .gst-stat-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
}

/* Tables remain usable */
html[data-view-mode="mobile"] table {
    font-size: 12px !important;
}

html[data-view-mode="mobile"] th,
html[data-view-mode="mobile"] td {
    padding: 8px 7px !important;
}

/* Forms and controls */
html[data-view-mode="mobile"] input,
html[data-view-mode="mobile"] select,
html[data-view-mode="mobile"] textarea,
html[data-view-mode="mobile"] button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Product/category grids */
html[data-view-mode="mobile"] .product-grid,
html[data-view-mode="mobile"] .category-bar {
    grid-template-columns: 1fr !important;
    display: grid !important;
}

/* Don't let wide content create horizontal page scrolling */
html[data-view-mode="mobile"] img,
html[data-view-mode="mobile"] video,
html[data-view-mode="mobile"] canvas {
    max-width: 100% !important;
}

html[data-view-mode="mobile"] .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* On an actual small device, don't force a 390px desktop canvas */
@media (max-width: 500px) {
    html[data-view-mode="mobile"] body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    html[data-view-mode="mobile"] .top-shell,
    html[data-view-mode="mobile"] .top,
    html[data-view-mode="mobile"] main,
    html[data-view-mode="mobile"] .page {
        max-width: 100% !important;
    }
}

/* Desktop View explicitly restores the normal canvas */
html[data-view-mode="desktop"] body {
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================
   Products - Mobile View
   ========================================================= */

html[data-view-mode="mobile"] .wrap {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 10px !important;
}

html[data-view-mode="mobile"] .wrap .metrics {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .wrap .card {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
}

/* Add Product form */
html[data-view-mode="mobile"] .wrap .card form[method="POST"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .wrap .card form[method="POST"] select,
html[data-view-mode="mobile"] .wrap .card form[method="POST"] input,
html[data-view-mode="mobile"] .wrap .card form[method="POST"] button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    box-sizing: border-box !important;
}

/* Product filter/actions */
html[data-view-mode="mobile"] .wrap .card > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .wrap .card > div:first-child form {
    width: 100% !important;
}

html[data-view-mode="mobile"] .wrap .card > div:first-child form select {
    width: 100% !important;
}

html[data-view-mode="mobile"] .wrap .card > div:first-child > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .wrap .card > div:first-child > div a {
    flex: 1 1 auto !important;
    text-align: center !important;
}

/* Product table: keep the table intact and scroll inside its card */
html[data-view-mode="mobile"] .wrap .card:last-child {
    overflow: hidden !important;
}

html[data-view-mode="mobile"] .wrap .card:last-child table {
    display: block !important;
    width: max-content !important;
    min-width: 650px !important;
    max-width: none !important;
    overflow-x: auto !important;
}

html[data-view-mode="mobile"] .wrap .card:last-child {
    overflow-x: auto !important;
}

html[data-view-mode="mobile"] .wrap .card:last-child th,
html[data-view-mode="mobile"] .wrap .card:last-child td {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

/* Don't break the Actions column */
html[data-view-mode="mobile"] .wrap .card:last-child td:last-child {
    white-space: nowrap !important;
    min-width: 105px !important;
}

/* =========================================================
   MOBILE VIEW — COMPACT HORIZONTAL NAVIGATION
   ========================================================= */

html[data-view-mode="mobile"] .top-shell .nav,
html[data-view-mode="mobile"] .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-mode="mobile"] .top-shell .nav::-webkit-scrollbar,
html[data-view-mode="mobile"] .nav::-webkit-scrollbar {
    display: none !important;
}

html[data-view-mode="mobile"] .top-shell .nav > *,
html[data-view-mode="mobile"] .nav > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

html[data-view-mode="mobile"] .page-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 7px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-mode="mobile"] .page-tabs::-webkit-scrollbar {
    display: none !important;
}

html[data-view-mode="mobile"] .page-tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Make mobile navigation visually smaller than the desktop row */
html[data-view-mode="mobile"] .top-shell .nav a,
html[data-view-mode="mobile"] .nav a,
html[data-view-mode="mobile"] .page-tabs a,
html[data-view-mode="mobile"] .page-tabs button {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Keep the contextual/second navigation compact */
html[data-view-mode="mobile"] .main-ledger-tabs {
    gap: 6px !important;
}

/* =========================================================
   BILLING — FORCED MOBILE VIEW
   Reproduce Billing's existing <=900px / <=560px layout
   when Mobile View is selected on a desktop browser.
   ========================================================= */

html[data-view-mode="mobile"] body:has(#quickName) .page {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box !important;
    margin: 12px auto !important;
    padding: 0 10px 30px !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

/* Shop details */
html[data-view-mode="mobile"] body:has(#quickName) .shop-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .field.full {
    grid-column: auto !important;
}

/* Quick item entry */
html[data-view-mode="mobile"] body:has(#quickName) .item-form {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .item-form .add-item-wrap {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .item-form .add-item-wrap .btn {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* GST toggles */
html[data-view-mode="mobile"] body:has(#quickName) .toggle {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Bill item rows */
html[data-view-mode="mobile"] body:has(#quickName) .line {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .line-actions {
    flex-wrap: wrap !important;
}

/* Discounts */
html[data-view-mode="mobile"] body:has(#quickName) .discount-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

/* Totals */
html[data-view-mode="mobile"] body:has(#quickName) .totals {
    overflow: hidden !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .grand {
    font-size: 19px !important;
}

/* Save / PDF / Clear */
html[data-view-mode="mobile"] body:has(#quickName) .actions {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] body:has(#quickName) .actions .btn {
    width: 100% !important;
}

/* Devices moves underneath Billing */
html[data-view-mode="mobile"] body:has(#quickName) .device-list {
    grid-template-columns: 1fr !important;
}

/* Camera */
html[data-view-mode="mobile"] body:has(#quickName) .camera-panel video {
    max-height: 220px !important;
}

/* Prevent Billing content from creating horizontal overflow */
html[data-view-mode="mobile"] body:has(#quickName) input,
html[data-view-mode="mobile"] body:has(#quickName) select,
html[data-view-mode="mobile"] body:has(#quickName) button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   DIRECT BILLING + TABLE BILLING
   Forced Mobile View
   ========================================================= */

html[data-view-mode="mobile"] .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

html[data-view-mode="mobile"] .products-panel,
html[data-view-mode="mobile"] .bill-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Product/category area */
html[data-view-mode="mobile"] .category-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

html[data-view-mode="mobile"] .category-bar::-webkit-scrollbar {
    display: none !important;
}

html[data-view-mode="mobile"] .category-bar .cat-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Product cards */
html[data-view-mode="mobile"] .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

html[data-view-mode="mobile"] .product-btn {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 8px !important;
}

/* Quick Add */
html[data-view-mode="mobile"] .quick-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
}

html[data-view-mode="mobile"] .quick-row > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-mode="mobile"] .quick-row input,
html[data-view-mode="mobile"] .quick-row button {
    padding: 10px !important;
}

/* Barcode controls */
html[data-view-mode="mobile"] #retailBarcode {
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-mode="mobile"] .bill-panel > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bill item rows */
html[data-view-mode="mobile"] .bill-panel .line {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}

html[data-view-mode="mobile"] .bill-panel .line-actions {
    flex-wrap: wrap !important;
}

/* Discount */
html[data-view-mode="mobile"] #discountSelect {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bottom action buttons */
html[data-view-mode="mobile"] .bill-panel .actions,
html[data-view-mode="mobile"] .bill-panel .action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
}

html[data-view-mode="mobile"] .bill-panel .actions > *,
html[data-view-mode="mobile"] .bill-panel .action-row > * {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent the billing page itself from overflowing */
html[data-view-mode="mobile"] .layout,
html[data-view-mode="mobile"] .layout * {
    max-width: 100%;
}

html[data-view-mode="mobile"] .layout input,
html[data-view-mode="mobile"] .layout select,
html[data-view-mode="mobile"] .layout button {
    box-sizing: border-box !important;
}

/* Actual phone: use the full viewport */
@media (max-width: 500px) {
    html[data-view-mode="mobile"] .layout {
        max-width: 100% !important;
        padding: 8px !important;
    }
}

/* =========================================================
   PURCHASE ENTRY — FORCED MOBILE VIEW
   ========================================================= */

html[data-view-mode="mobile"] .spend-card,
html[data-view-mode="mobile"] .spend-card * {
    box-sizing: border-box;
}

/* Purchase page main cards */
html[data-view-mode="mobile"] .wrap {
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Add Stock + Recent Purchases */
html[data-view-mode="mobile"] .wrap > .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 10px !important;
}

/* Tables stay inside their cards and can scroll */
html[data-view-mode="mobile"] .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html[data-view-mode="mobile"] .table-wrap table {
    min-width: 620px !important;
    width: max-content !important;
}

/* Add Stock form */
html[data-view-mode="mobile"] .wrap > .card form {
    width: 100% !important;
}

html[data-view-mode="mobile"] .wrap > .card form input,
html[data-view-mode="mobile"] .wrap > .card form select,
html[data-view-mode="mobile"] .wrap > .card form button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Spends category tabs */
html[data-view-mode="mobile"] .spend-card .spend-tabs,
html[data-view-mode="mobile"] .spend-card .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    width: 100% !important;
    scrollbar-width: none !important;
}

html[data-view-mode="mobile"] .spend-card .spend-tabs::-webkit-scrollbar,
html[data-view-mode="mobile"] .spend-card .tabs::-webkit-scrollbar {
    display: none !important;
}

html[data-view-mode="mobile"] .spend-card .spend-tabs > *,
html[data-view-mode="mobile"] .spend-card .tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Spend filter */
html[data-view-mode="mobile"] #spendFilterForm .filter-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] #spendFilterForm .filter-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-view-mode="mobile"] #spendFilterForm input,
html[data-view-mode="mobile"] #spendFilterForm select {
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-view-mode="mobile"] #spendFilterForm .filter-actions {
    grid-column: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

html[data-view-mode="mobile"] #spendFilterForm .filter-actions button,
html[data-view-mode="mobile"] #spendFilterForm .filter-actions a {
    flex: 1 1 130px !important;
}

/* Spend add form */
html[data-view-mode="mobile"] .spend-card form:not(#spendFilterForm) {
    width: 100% !important;
}

html[data-view-mode="mobile"] .spend-card form:not(#spendFilterForm) input,
html[data-view-mode="mobile"] .spend-card form:not(#spendFilterForm) select,
html[data-view-mode="mobile"] .spend-card form:not(#spendFilterForm) button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Spend history/table */
html[data-view-mode="mobile"] .spend-card table {
    min-width: 620px !important;
    width: max-content !important;
}

/* Prevent accidental page-wide horizontal overflow */
html[data-view-mode="mobile"] .spend-card,
html[data-view-mode="mobile"] .spend-card .card,
html[data-view-mode="mobile"] .spend-card .filter-strip {
    max-width: 100% !important;
    overflow-x: hidden;
}

/* =========================================================
   STANDARD POS HEADER — MOBILE VIEW
   ========================================================= */

html[data-view-mode="mobile"] .top-shell {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
}

html[data-view-mode="mobile"] .top-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

html[data-view-mode="mobile"] .top-row .title {
    font-size: 22px !important;
}

html[data-view-mode="mobile"] .top-row .subtitle {
    font-size: 13px !important;
}

html[data-view-mode="mobile"] .top-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
}

html[data-view-mode="mobile"] .top-actions > * {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* Theme + View + Language stay compact */
html[data-view-mode="mobile"] .theme-toggle-btn,
html[data-view-mode="mobile"] .view-mode-toggle-btn,
html[data-view-mode="mobile"] .language-toggle-btn {
    width: auto !important;
    min-width: 105px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

/* User + Logout */
html[data-view-mode="mobile"] .top-user-name {
    width: auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
}

html[data-view-mode="mobile"] .top-logout {
    width: auto !important;
    min-width: 90px !important;
}

/* Header navigation remains one compact horizontal strip */
html[data-view-mode="mobile"] .top-shell .nav {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 7px !important;
    padding: 6px !important;
}

/* =========================================================
   DESKTOP VIEW — DO NOT SQUEEZE THE PAGE
   ========================================================= */

html[data-view-mode="desktop"] {
    min-width: 0 !important;
}

html[data-view-mode="desktop"] body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html[data-view-mode="desktop"] .top-shell {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html[data-view-mode="desktop"] .layout {
    width: 100% !important;
    box-sizing: border-box !important;
}



/* =========================================================
   GLOBAL THEME FONT CONTRAST
   Dark themes  -> white text
   Light themes -> black text
/* ---------- DARK THEMES TYPOGRAPHY & CONTRAST ---------- */

html[data-theme="dark"],
html[data-theme="midnight"],
html[data-theme="coffee"] {
    --theme-ink: #e7eefc;
    --theme-muted: #94a3b8;
}

html[data-theme="dark"] body,
html[data-theme="midnight"] body,
html[data-theme="coffee"] body {
    color: var(--theme-ink);
}

/* ---------- LIGHT THEMES TYPOGRAPHY & CONTRAST ---------- */

html[data-theme="light"],
html[data-theme="ocean"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="rose"],
html[data-theme="lavender"],
html[data-theme="slate"] {
    --theme-ink: #0f172a;
    --theme-muted: #64748b;
}

html[data-theme="light"] body,
html[data-theme="ocean"] body,
html[data-theme="forest"] body,
html[data-theme="sunset"] body,
html[data-theme="rose"] body,
html[data-theme="lavender"] body,
html[data-theme="slate"] body {
    color: var(--theme-ink);
}

/* ---------- LIVE RECEIPT LAYOUT PREVIEW (ALWAYS CRISP WHITE PAPER WITH BLACK TEXT) ---------- */
#receipt-paper-preview-sheet,
#receipt-paper-preview-sheet *,
.print-page,
.print-page * {
    background-color: transparent !important;
    background: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}

#receipt-paper-preview-sheet {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

#receipt-paper-preview-sheet table,
#receipt-paper-preview-sheet table tr,
#receipt-paper-preview-sheet table th,
#receipt-paper-preview-sheet table td,
.print-page table,
.print-page table tr,
.print-page table th,
.print-page table td {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border: 0 !important;
    border-bottom: 0 !important;
}

#receipt-paper-preview-sheet .line-border,
#receipt-paper-preview-sheet .dashed-line,
.print-page .line-border,
.print-page .dashed-line {
    border-top: 1px dashed #000000 !important;
}

/* ---------- PLAN FEATURE BADGES & CONTRAST PILLS ---------- */
.plan-badge-blue,
html[data-theme="light"] span[style*="#eff6ff"],
html[data-theme="light"] span[style*="#e0f2fe"] {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}
html[data-theme="dark"] .plan-badge-blue,
html[data-theme="dark"] span[style*="#eff6ff"],
html[data-theme="dark"] span[style*="#e0f2fe"] {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

.plan-badge-teal,
html[data-theme="light"] span[style*="#ccfbf1"],
html[data-theme="light"] span[style*="#ecfeff"] {
    background: #ccfbf1 !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}
html[data-theme="dark"] .plan-badge-teal,
html[data-theme="dark"] span[style*="#ccfbf1"],
html[data-theme="dark"] span[style*="#ecfeff"] {
    background: rgba(13, 148, 136, 0.22) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
}

.plan-badge-indigo,
html[data-theme="light"] span[style*="#e0e7ff"] {
    background: #e0e7ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
}
html[data-theme="dark"] .plan-badge-indigo,
html[data-theme="dark"] span[style*="#e0e7ff"] {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #c7d2fe !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

/* Universal Contrast: White/Light background = Black/Dark text */
html[data-theme="dark"] span[style*="background:#ffffff"],
html[data-theme="dark"] span[style*="background: #ffffff"],
html[data-theme="dark"] span[style*="background:#fff"],
html[data-theme="dark"] span[style*="background: #fff"],
html[data-theme="dark"] span[style*="background:white"],
html[data-theme="dark"] span[style*="background: white"],
html[data-theme="dark"] button[style*="background:#ffffff"],
html[data-theme="dark"] button[style*="background: #ffffff"],
html[data-theme="dark"] button[style*="background:#fff"],
html[data-theme="dark"] button[style*="background: #fff"],
html[data-theme="dark"] button[style*="background:white"],
html[data-theme="dark"] button[style*="background: white"],
html[data-theme="dark"] div[style*="background:#ffffff"],
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] div[style*="background:white"],
html[data-theme="dark"] div[style*="background: white"] {
    color: #000000 !important;
}

/* Universal Contrast: Dark background = White text */
html[data-theme="light"] span[style*="background:#000"],
html[data-theme="light"] span[style*="background: #000"],
html[data-theme="light"] span[style*="background:#0f172a"],
html[data-theme="light"] span[style*="background: #0f172a"],
html[data-theme="light"] span[style*="background:black"],
html[data-theme="light"] span[style*="background: black"],
html[data-theme="light"] button[style*="background:#000"],
html[data-theme="light"] button[style*="background: #000"],
html[data-theme="light"] button[style*="background:#0f172a"],
html[data-theme="light"] button[style*="background: #0f172a"],
html[data-theme="light"] button[style*="background:black"],
html[data-theme="light"] button[style*="background: black"] {
    color: #ffffff !important;
}


/* ---------- FORM CONTROLS ---------- */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option,
html[data-theme="midnight"] input,
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] option,
html[data-theme="coffee"] input,
html[data-theme="coffee"] select,
html[data-theme="coffee"] textarea,
html[data-theme="coffee"] option {
    color: #ffffff !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] option,
html[data-theme="ocean"] input,
html[data-theme="ocean"] select,
html[data-theme="ocean"] textarea,
html[data-theme="ocean"] option,
html[data-theme="forest"] input,
html[data-theme="forest"] select,
html[data-theme="forest"] textarea,
html[data-theme="forest"] option,
html[data-theme="sunset"] input,
html[data-theme="sunset"] select,
html[data-theme="sunset"] textarea,
html[data-theme="sunset"] option,
html[data-theme="rose"] input,
html[data-theme="rose"] select,
html[data-theme="rose"] textarea,
html[data-theme="rose"] option,
html[data-theme="lavender"] input,
html[data-theme="lavender"] select,
html[data-theme="lavender"] textarea,
html[data-theme="lavender"] option,
html[data-theme="slate"] input,
html[data-theme="slate"] select,
html[data-theme="slate"] textarea,
html[data-theme="slate"] option {
    color: #000000 !important;
}


/* ---------- BUTTONS ---------- */

html[data-theme="dark"] button,
html[data-theme="midnight"] button,
html[data-theme="coffee"] button {
    color: #ffffff !important;
}

html[data-theme="light"] button,
html[data-theme="ocean"] button,
html[data-theme="forest"] button,
html[data-theme="sunset"] button,
html[data-theme="rose"] button,
html[data-theme="lavender"] button,
html[data-theme="slate"] button {
    color: #000000 !important;
}

/* Header text contrast handled by light pastel theme */


/* =========================================================
   SMART GLOBAL THEME CONTRAST
   ========================================================= */

/* ---------------- LIGHT THEMES ---------------- */

html[data-theme="light"],
html[data-theme="ocean"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="rose"],
html[data-theme="lavender"],
html[data-theme="slate"] {
    --theme-ink: #000000 !important;
    --theme-muted: #333333 !important;
}

/* Normal content */
html[data-theme="light"] body,
html[data-theme="ocean"] body,
html[data-theme="forest"] body,
html[data-theme="sunset"] body,
html[data-theme="rose"] body,
html[data-theme="lavender"] body,
html[data-theme="slate"] body {
    color: #000000 !important;
}

/* Cards / panels / product areas */
html[data-theme="light"] .container,
html[data-theme="light"] .wrap,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .metric,
html[data-theme="light"] .bill,
html[data-theme="light"] .products-panel,
html[data-theme="ocean"] .container,
html[data-theme="ocean"] .wrap,
html[data-theme="ocean"] .panel,
html[data-theme="ocean"] .card,
html[data-theme="ocean"] .metric,
html[data-theme="ocean"] .bill,
html[data-theme="ocean"] .products-panel,
html[data-theme="forest"] .container,
html[data-theme="forest"] .wrap,
html[data-theme="forest"] .panel,
html[data-theme="forest"] .card,
html[data-theme="forest"] .metric,
html[data-theme="forest"] .bill,
html[data-theme="forest"] .products-panel,
html[data-theme="sunset"] .container,
html[data-theme="sunset"] .wrap,
html[data-theme="sunset"] .panel,
html[data-theme="sunset"] .card,
html[data-theme="sunset"] .metric,
html[data-theme="sunset"] .bill,
html[data-theme="sunset"] .products-panel,
html[data-theme="rose"] .container,
html[data-theme="rose"] .wrap,
html[data-theme="rose"] .panel,
html[data-theme="rose"] .card,
html[data-theme="rose"] .metric,
html[data-theme="rose"] .bill,
html[data-theme="rose"] .products-panel,
html[data-theme="lavender"] .container,
html[data-theme="lavender"] .wrap,
html[data-theme="lavender"] .panel,
html[data-theme="lavender"] .card,
html[data-theme="lavender"] .metric,
html[data-theme="lavender"] .bill,
html[data-theme="lavender"] .products-panel,
html[data-theme="slate"] .container,
html[data-theme="slate"] .wrap,
html[data-theme="slate"] .panel,
html[data-theme="slate"] .card,
html[data-theme="slate"] .metric,
html[data-theme="slate"] .bill,
html[data-theme="slate"] .products-panel {
    color: #000000 !important;
}

/* Form controls on light backgrounds */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="ocean"] input,
html[data-theme="ocean"] select,
html[data-theme="ocean"] textarea,
html[data-theme="forest"] input,
html[data-theme="forest"] select,
html[data-theme="forest"] textarea,
html[data-theme="sunset"] input,
html[data-theme="sunset"] select,
html[data-theme="sunset"] textarea,
html[data-theme="rose"] input,
html[data-theme="rose"] select,
html[data-theme="rose"] textarea,
html[data-theme="lavender"] input,
html[data-theme="lavender"] select,
html[data-theme="lavender"] textarea,
html[data-theme="slate"] input,
html[data-theme="slate"] select,
html[data-theme="slate"] textarea {
    color: #000000 !important;
}

/* Dropdown options */
html[data-theme="light"] option,
html[data-theme="ocean"] option,
html[data-theme="forest"] option,
html[data-theme="sunset"] option,
html[data-theme="rose"] option,
html[data-theme="lavender"] option,
html[data-theme="slate"] option {
    color: #000000 !important;
    background: #ffffff !important;
}


/* ---------------- DARK THEMES ---------------- */

html[data-theme="dark"],
html[data-theme="midnight"],
html[data-theme="coffee"] {
    --theme-ink: #ffffff !important;
    --theme-muted: #d0d7e2 !important;
}

html[data-theme="dark"] body,
html[data-theme="midnight"] body,
html[data-theme="coffee"] body {
    color: #ffffff !important;
}

/* Dark cards / panels */
html[data-theme="dark"] .container,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .bill,
html[data-theme="dark"] .products-panel,
html[data-theme="midnight"] .container,
html[data-theme="midnight"] .wrap,
html[data-theme="midnight"] .panel,
html[data-theme="midnight"] .card,
html[data-theme="midnight"] .metric,
html[data-theme="midnight"] .bill,
html[data-theme="midnight"] .products-panel,
html[data-theme="coffee"] .container,
html[data-theme="coffee"] .wrap,
html[data-theme="coffee"] .panel,
html[data-theme="coffee"] .card,
html[data-theme="coffee"] .metric,
html[data-theme="coffee"] .bill,
html[data-theme="coffee"] .products-panel {
    color: #ffffff !important;
}

/* Dark form controls */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option,
html[data-theme="midnight"] input,
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] option,
html[data-theme="coffee"] input,
html[data-theme="coffee"] select,
html[data-theme="coffee"] textarea,
html[data-theme="coffee"] option {
    color: #ffffff !important;
}


/* ---------------- HEADER CONTROLS ---------------- */

/* Header text styles handled at theme definitions */

/*
   Theme selector:
   always uses the theme accent, therefore white text.
*/
.top-shell .theme-toggle-btn {
    background: var(--theme-accent-1) !important;
    color: #ffffff !important;
}

.top-shell .theme-toggle-btn option {
    background: var(--theme-accent-1) !important;
    color: #ffffff !important;
}

/*
   View + Language selectors:
   They use light backgrounds in light themes,
   dark backgrounds in dark themes.
*/

/* LIGHT */
html[data-theme="light"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="ocean"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="forest"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="sunset"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="rose"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="lavender"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="slate"] .top-shell .top-actions select:not(.theme-toggle-btn) {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="ocean"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="forest"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="sunset"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="rose"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="lavender"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="slate"] .top-shell .top-actions select:not(.theme-toggle-btn) option {
    background: #ffffff !important;
    color: #000000 !important;
}


/* DARK */
html[data-theme="dark"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="midnight"] .top-shell .top-actions select:not(.theme-toggle-btn),
html[data-theme="coffee"] .top-shell .top-actions select:not(.theme-toggle-btn) {
    background: #1b1b1b !important;
    color: #ffffff !important;
    border: 1px solid #666 !important;
}

html[data-theme="dark"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="midnight"] .top-shell .top-actions select:not(.theme-toggle-btn) option,
html[data-theme="coffee"] .top-shell .top-actions select:not(.theme-toggle-btn) option {
    background: #1b1b1b !important;
    color: #ffffff !important;
}


/* ---------------- NAVIGATION ---------------- */

/* Navigation is always a dark/coloured gradient,
   therefore navigation text stays white. */

.top-shell .nav,
.top-shell .nav a,
.top-shell .nav a.nav-link-active {
    color: #ffffff !important;
}


/* ---------------- BUTTONS ---------------- */

/* Gradient/action buttons have white text */
button,
.print-btn,
.action-btn,
.download-btn,
.primary {
    color: #ffffff !important;
}

/* Light neutral buttons */
.secondary,
.tab-btn:not(.active) {
    color: #000000 !important;
}

/* Active tabs remain white */
.tab-btn.active {
    color: #ffffff !important;
}


/* ---------------- LINKS ---------------- */

html[data-theme="light"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="ocean"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="forest"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="sunset"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="rose"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="lavender"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn),
html[data-theme="slate"] a:not(.nav a):not(.top-shell a):not(.top-logout):not(.top-auth):not(.hardware-install-button):not(.btn-connector-download):not(.action-btn):not(.download-btn):not(.btn) {
    color: var(--theme-link) !important;
}


/* =========================================================
   PORTFACTORY - LIGHT THEME ONLY
   ========================================================= */

html,
html[data-theme],
html[data-theme="dark"],
html[data-theme="ocean"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="rose"],
html[data-theme="lavender"],
html[data-theme="midnight"],
html[data-theme="coffee"],
html[data-theme="slate"] {
    --theme-bg-1: #f5f8ff !important;
    --theme-bg-2: #edfdf8 !important;
    --theme-ink: #000000 !important;
    --theme-muted: #333333 !important;
    --theme-accent-1: #1d4ed8 !important;
    --theme-accent-2: #0f766e !important;
    --theme-danger: #b91c1c !important;
    --theme-card: #ffffff !important;
    --theme-border: #dbe4f1 !important;
    --theme-filter-bg: linear-gradient(135deg, #eaf2ff, #e6fffa) !important;
    --theme-filter-border: #bfd7ff !important;
    --theme-table-bg: #ffffff !important;
    --theme-th-bg: #eaf2ff !important;
    --theme-input-bg: #ffffff !important;
    --theme-link: #0f4ca8 !important;
}

/* Light page text */
html,
html body {
    color: #000000 !important;
}

/* Light content */
.container,
.wrap,
.panel,
.card,
.metric,
.bill,
.products-panel {
    color: #000000 !important;
}

/* Inputs */
input,
select,
textarea {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Normal action buttons */
button,
.print-btn,
.action-btn,
.download-btn {
    color: #ffffff !important;
}

/* Neutral tabs */
.tab-btn:not(.active) {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Active tabs */
.tab-btn.active {
    color: #ffffff !important;
}

/* =========================================================
   LIGHT PASTEL BLUE POS THEME (Light Mode Only)
   ========================================================= */

html[data-theme="light"] header,
html[data-theme="light"] .top,
html[data-theme="light"] .top-shell {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 50%, #eff6ff 100%) !important;
    color: #0f172a !important;
    border-bottom: 1px solid #bfdbfe !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .top-shell h1,
html[data-theme="light"] .top-shell h2,
html[data-theme="light"] .top-shell h3,
html[data-theme="light"] .top-shell .title {
    color: #000000 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

html[data-theme="light"] .top-shell .subtitle {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
}

html[data-theme="light"] .top-shell .top-actions,
html[data-theme="light"] .top-shell .top-user-name,
html[data-theme="light"] .top-shell #pos-live-clock {
    color: #000000 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .top-shell .top-actions select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    padding: 7px 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .top-shell .top-actions select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] .top-shell .top-logout,
html[data-theme="light"] .top-shell .top-auth,
html[data-theme="light"] .top-shell a.top-logout,
html[data-theme="light"] .top-shell a.top-auth,
html[data-theme="light"] .top-shell .theme-toggle-btn {
    background: #bfdbfe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd !important;
    border-radius: 9px !important;
    padding: 7px 14px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
}

html[data-theme="light"] .top-shell .top-logout:hover,
html[data-theme="light"] .top-shell .top-auth:hover,
html[data-theme="light"] .top-shell .theme-toggle-btn:hover {
    background: #ffffff !important;
    color: #1e3a8a !important;
    border-color: #93c5fd !important;
}

html[data-theme="light"] .top-shell .nav {
    background: rgba(191, 219, 254, 0.7) !important;
    border: 1px solid #93c5fd !important;
    border-radius: 12px !important;
    padding: 5px 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
}

html[data-theme="light"] .top-shell .nav a {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    padding: 6px 11px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-theme="light"] .top-shell .nav a.nav-link-active {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #bfdbfe !important;
}

html[data-theme="light"] .top-shell .nav a:hover:not(.nav-link-active) {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000000 !important;
}

/* Light Theme Sub-Navigation / Page Tabs (2nd row under Main Ledger, Products, Reports, Stock) */
html[data-theme="light"] .page-tabs,
html[data-theme="light"] .main-ledger-tabs,
html[data-theme="light"] .report-page-tabs {
    background: rgba(191, 219, 254, 0.45) !important;
    border: 1px solid #bfdbfe !important;
}

html[data-theme="light"] .page-tabs .page-tab-link,
html[data-theme="light"] .main-ledger-tabs .page-tab-link,
html[data-theme="light"] .main-ledger-tabs .main-ledger-tab-button,
html[data-theme="light"] .report-page-tabs .page-tab-link,
html[data-theme="light"] .page-tabs .tab-btn {
    color: #000000 !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
}

html[data-theme="light"] .page-tabs .page-tab-link:hover,
html[data-theme="light"] .main-ledger-tabs .page-tab-link:hover,
html[data-theme="light"] .main-ledger-tabs .main-ledger-tab-button:hover,
html[data-theme="light"] .report-page-tabs .page-tab-link:hover,
html[data-theme="light"] .page-tabs .tab-btn:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #000000 !important;
    border-color: #bfdbfe !important;
}

html[data-theme="light"] .page-tabs .page-tab-active,
html[data-theme="light"] .main-ledger-tabs .page-tab-active,
html[data-theme="light"] .main-ledger-tabs .main-ledger-tab-button.active,
html[data-theme="light"] .page-tabs .tab-btn.active,
html[data-theme="light"] .report-page-tabs .page-tab-active {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #bfdbfe !important;
}

html[data-theme="light"] button:not(.danger):not(.delete-btn):not(.btn-danger):not(.primary-btn):not(.google-btn):not(.add-table-btn):not(.remove-table-btn),
html[data-theme="light"] .action-btn:not(.danger):not(.delete-btn):not(.btn-danger),
html[data-theme="light"] .primary,
html[data-theme="light"] .print-btn,
html[data-theme="light"] .download-btn,
html[data-theme="light"] .category-btn,
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .tab-btn:not(.active) {
    background: #dbeafe !important;
    color: #000000 !important;
    border: 1px solid #93c5fd !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* Common Table Banner & Badges (Base / Light Fallbacks) */
.table-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid #dbeafe;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.table-banner-title { font-size: 17px; color: #0f172a; font-weight: 800; }
.table-banner-desc { margin-top: 4px; font-size: 12.5px; color: #64748b; }
.table-badge { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; display: inline-block; }
.table-badge.count-badge { background: #e0f2fe; color: #0369a1; }
.table-badge.free-badge { background: #dcfce7; color: #15803d; }
.table-badge.paid-badge { background: #fef3c7; color: #92400e; }
.add-table-btn { border: 0; border-radius: 10px; padding: 9px 16px; background: #dbeafe; color: #000000; border: 1px solid #93c5fd; font-weight: 800; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.remove-table-btn { border: 1px solid #fca5a5; border-radius: 10px; padding: 9px 14px; background: #fee2e2; color: #991b1b; font-weight: 800; font-size: 13px; cursor: pointer; }
.table-limit-badge { padding: 8px 14px; border-radius: 10px; background: #f1f5f9; color: #64748b; font-weight: 700; font-size: 13px; border: 1px solid #cbd5e1; }


/* ==========================================================================
   LUXURY COSMIC DARK THEME (Inspired by Trikal Jyotish)
   ========================================================================== */
html[data-theme="dark"] {
    --theme-bg-1: #070a12 !important;
    --theme-bg-2: #05080f !important;
    --theme-ink: #ffffff !important;
    --theme-muted: #94a3b8 !important;
    --theme-accent-1: #2563eb !important;
    --theme-accent-2: #0d9488 !important;
    --theme-danger: #f87171 !important;
    --theme-card: #0d1527 !important;
    --theme-border: #1a2744 !important;
    --theme-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    --theme-filter-bg: linear-gradient(135deg, #111d38, #0b1325) !important;
    --theme-filter-border: #23375c !important;
    --theme-table-bg: #0d1527 !important;
    --theme-th-bg: #121e38 !important;
    --theme-input-bg: #101b33 !important;
    --theme-link: #38bdf8 !important;
}

html[data-theme="dark"] body {
    background: radial-gradient(ellipse 120% 50% at 50% -10%, rgba(30, 58, 138, 0.22) 0%, rgba(15, 23, 42, 0) 70%), #070a12 fixed !important;
    color: #ffffff !important;
    min-height: 100vh;
}

/* Dark Mode Top Shell Header */
html[data-theme="dark"] .top-shell,
html[data-theme="dark"] .top,
html[data-theme="dark"] header {
    background: linear-gradient(135deg, #090e1a 0%, #111a2e 50%, #0a0f1d 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

.top-shell .title,
.top-shell a.title,
html[data-theme] .top-shell .title,
html[data-theme] .top-shell a.title {
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-block !important;
}

html[data-theme="dark"] .top-shell .title,
html[data-theme="dark"] .top-shell a.title,
html[data-theme="dark"] .top-shell .top-row h1,
html[data-theme="dark"] .top-shell .top-row h2,
html[data-theme="dark"] .top-shell .top-row h3,
html[data-theme="dark"] .top-shell .top-user-name,
html[data-theme="dark"] .top-shell .top-user-name *,
html[data-theme="dark"] .top-shell #pos-live-clock,
html[data-theme="dark"] .top-shell #pos-live-clock * {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html[data-theme="dark"] .top-shell a.title:hover {
    opacity: 0.88 !important;
}

html[data-theme="dark"] .top-shell .subtitle {
    color: #94a3b8 !important;
}

/* Header Dropdowns, Theme Toggle & Logout */
html[data-theme="dark"] .top-shell .top-actions select,
html[data-theme="dark"] .top-shell .theme-toggle-btn,
html[data-theme="dark"] .top-shell button.theme-toggle-btn {
    background: #121e38 !important;
    color: #ffffff !important;
    border: 1px solid #23375c !important;
    border-radius: 9px !important;
    padding: 7px 13px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

html[data-theme="dark"] .top-shell .theme-toggle-btn:hover,
html[data-theme="dark"] .top-shell button.theme-toggle-btn:hover {
    background: #1a2a4e !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .top-shell .top-actions select option {
    background: #090e1a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .top-shell .top-logout,
html[data-theme="dark"] .top-shell .top-auth,
html[data-theme="dark"] .top-shell a.top-logout,
html[data-theme="dark"] .top-shell a.top-auth {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 9px !important;
    padding: 7px 14px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

html[data-theme="dark"] .top-shell .top-logout:hover,
html[data-theme="dark"] .top-shell .top-auth:hover {
    background: #2563eb !important;
    border-color: #60a5fa !important;
}

/* Dark Mode Navigation Bar */
html[data-theme="dark"] .top-shell .nav,
html[data-theme="dark"] .nav {
    background: rgba(11, 18, 36, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 5px 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    backdrop-filter: blur(8px) !important;
}

html[data-theme="dark"] .top-shell .nav a,
html[data-theme="dark"] .nav a {
    background: transparent !important;
    color: #94a3b8 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    padding: 6px 11px !important;
    border-radius: 9px !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

html[data-theme="dark"] .top-shell .nav a *,
html[data-theme="dark"] .nav a * {
    color: #94a3b8 !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .top-shell .nav a:hover:not(.nav-link-active),
html[data-theme="dark"] .nav a:hover:not(.nav-link-active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .top-shell .nav a.nav-link-active,
html[data-theme="dark"] .nav a.nav-link-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid #60a5fa !important;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.45) !important;
}

html[data-theme="dark"] .top-shell .nav a.nav-link-active *,
html[data-theme="dark"] .nav a.nav-link-active * {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Dark Mode Surfaces, Containers, Panels & Cards */
html[data-theme="dark"] .container,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metrics .metric,
html[data-theme="dark"] .summary .metric,
html[data-theme="dark"] .bill,
html[data-theme="dark"] .products-panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .bill-panel,
html[data-theme="dark"] .filter-box,
html[data-theme="dark"] .filter {
    background: #0d1527 !important;
    color: #ffffff !important;
    border: 1px solid #1a2744 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Table Billing & Dining Tables Banner */
html[data-theme="dark"] .table-banner {
    background: #0d1527 !important;
    border: 1px solid #1e2d4a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .table-banner-title {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html[data-theme="dark"] .table-banner-desc {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .table-badge.count-badge {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

html[data-theme="dark"] .table-badge.free-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="dark"] .table-badge.paid-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html[data-theme="dark"] .add-table-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

html[data-theme="dark"] .add-table-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    border-color: #60a5fa !important;
}

html[data-theme="dark"] .remove-table-btn {
    background: rgba(185, 28, 28, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid #ef4444 !important;
}

html[data-theme="dark"] .table-limit-badge {
    background: #121e38 !important;
    color: #94a3b8 !important;
    border: 1px solid #1e2d4a !important;
}

/* Table Cards */
html[data-theme="dark"] .table-card {
    background: #0d1527 !important;
    border: 1px solid #1e2d4a !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .table-card:hover {
    background: #131e38 !important;
    border-color: #3b82f6 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25) !important;
}

html[data-theme="dark"] .table-card.active {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.5) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="dark"] .table-card .table-name {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .table-card .table-state {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .table-card.active .table-state {
    color: #34d399 !important;
}

html[data-theme="dark"] .table-card .table-customer {
    color: #34d399 !important;
    font-weight: 700 !important;
}

/* Tables, Grid & Ledgers */
html[data-theme="dark"] table,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td {
    background: #0d1527 !important;
    color: #ffffff !important;
    border-color: #1a2744 !important;
}

html[data-theme="dark"] th {
    background: #121e38 !important;
    color: #ffffff !important;
    border-color: #1a2744 !important;
}

html[data-theme="dark"] tr:hover td {
    background: #131e38 !important;
}

/* Sub-containers & Inner Wrappers */
html[data-theme="dark"] .quick-wrap,
html[data-theme="dark"] .camera-panel,
html[data-theme="dark"] .totals,
html[data-theme="dark"] .total-box,
html[data-theme="dark"] .items,
html[data-theme="dark"] .device,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .notice {
    background: #101b33 !important;
    border: 1px solid #1e2d4a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .items li,
html[data-theme="dark"] .bill-items li {
    background: #121e38 !important;
    border: 1px solid #1e2d4a !important;
    color: #ffffff !important;
}

/* Form Inputs, Selects, Textareas & Search */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] #search,
html[data-theme="dark"] #searchInput,
html[data-theme="dark"] #discountSelect,
html[data-theme="dark"] #quickName,
html[data-theme="dark"] #quickPrice,
html[data-theme="dark"] #quickTax,
html[data-theme="dark"] #retailBarcode,
html[data-theme="dark"] .quick-row input,
html[data-theme="dark"] .filter-row input,
html[data-theme="dark"] .filter-row select {
    background: #101b33 !important;
    color: #ffffff !important;
    border: 1px solid #23375c !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] #search:focus,
html[data-theme="dark"] #discountSelect:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] #search::placeholder {
    color: #64748b !important;
}

/* Product Cards & Buttons */
html[data-theme="dark"] .product-btn {
    background: #101b33 !important;
    border: 1px solid #1e2d4a !important;
    color: #ffffff !important;
    transition: all 0.15s ease !important;
}

html[data-theme="dark"] .product-btn:hover:not(:disabled) {
    background: #162444 !important;
    border-color: #3b82f6 !important;
    transform: translateY(-1px) !important;
}

html[data-theme="dark"] .product-name {
    color: #ffffff !important;
}

html[data-theme="dark"] .product-price {
    color: #60a5fa !important;
}

/* Stock Chips */
html[data-theme="dark"] .stock-chip.ok {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .stock-chip.low {
    background: #78350f !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .stock-chip.out {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .stock-chip.neutral {
    background: #1e293b !important;
    color: #94a3b8 !important;
}

/* General Buttons */
html[data-theme="dark"] button:not(.danger):not(.delete-btn):not(.btn-danger):not(.google-btn):not(.primary):not(.primary-btn):not(.add-table-btn):not(.remove-table-btn),
html[data-theme="dark"] .action-btn:not(.danger):not(.delete-btn):not(.btn-danger),
html[data-theme="dark"] .print-btn,
html[data-theme="dark"] .download-btn,
html[data-theme="dark"] .category-btn,
html[data-theme="dark"] .category-pill,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .tab-btn:not(.active) {
    background: #121e38 !important;
    color: #e2e8f0 !important;
    border: 1px solid #23375c !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
}

html[data-theme="dark"] button:not(.danger):not(.delete-btn):not(.btn-danger):not(.google-btn):not(.primary):not(.primary-btn):not(.add-table-btn):not(.remove-table-btn):hover,
html[data-theme="dark"] .action-btn:not(.danger):not(.delete-btn):not(.btn-danger):hover,
html[data-theme="dark"] .print-btn:hover,
html[data-theme="dark"] .download-btn:hover,
html[data-theme="dark"] .category-btn:hover,
html[data-theme="dark"] .category-pill:hover,
html[data-theme="dark"] .filter-btn:hover {
    background: #182848 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .quick-row button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .primary-btn:hover,
html[data-theme="dark"] .quick-row button:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    border-color: #60a5fa !important;
}

html[data-theme="dark"] .category-btn.active,
html[data-theme="dark"] .category-pill.active,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4) !important;
}

/* Secondary Sub-Tabs in Dark Mode (e.g. Products sub-navigation, Reports sub-navigation) */
html[data-theme="dark"] .page-tabs {
    background: rgba(11, 18, 36, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .page-tabs .page-tab-link,
html[data-theme="dark"] .page-tabs .tab-btn {
    background: #101b33 !important;
    color: #94a3b8 !important;
    border: 1px solid #1e2d4a !important;
}

html[data-theme="dark"] .page-tabs .page-tab-link:hover,
html[data-theme="dark"] .page-tabs .tab-btn:hover {
    background: #162444 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .page-tabs .page-tab-active,
html[data-theme="dark"] .page-tabs .tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.4) !important;
    font-weight: 800 !important;
}

/* Danger Buttons */
html[data-theme="dark"] .danger,
html[data-theme="dark"] .delete-btn,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-link {
    background: rgba(185, 28, 28, 0.25) !important;
    color: #fca5a5 !important;
    border: 1px solid #ef4444 !important;
}

/* E-Bill Button */
html[data-theme="dark"] .ebill-btn {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border: 1px solid #047857 !important;
}

/* Text Hierarchy in Dark Mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] b,
html[data-theme="dark"] strong,
html[data-theme="dark"] label {
    color: #ffffff;
}

html[data-theme="dark"] p,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] li {
    color: #f1f5f9;
}

html[data-theme="dark"] span:not([class*="badge"]):not([class*="pill"]):not([class*="tag"]):not([class*="status"]):not([class*="count"]):not([class*="role"]):not([style*="color"]),
html[data-theme="dark"] div:not(#receipt-paper-preview-sheet):not([class*="badge"]):not([class*="pill"]):not([class*="toast"]):not([style*="color"]) {
    color: #f1f5f9;
}

html[data-theme="dark"] a:not(.btn-action):not(.btn):not(.nav-link):not(.top-auth):not(.top-logout):not(.table-card) {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-hero-card p,
html[data-theme="dark"] .help-card-title p,
html[data-theme="dark"] .step-body p,
html[data-theme="dark"] .metric .k {
    color: #94a3b8 !important;
}

/* High Contrast Badges, Tags, Pills, and Chips (Universal) */
.badge-coming-soon,
.coming-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}

.badge-warning,
.pill.waiting,
.table-badge.paid-badge,
span[style*="#fef3c7"],
span[style*="#fde68a"],
span[style*="#fef08a"],
span[style*="#fef9c3"],
span[style*="#fff7ed"],
span[style*="#fffbeb"],
span[style*="#fefce8"],
div[style*="#fef3c7"],
div[style*="#fde68a"],
div[style*="#fffbeb"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    font-weight: 800 !important;
}

.badge-opt,
.badge-optional,
.badge-info,
.badge-paid,
.plan-badge-blue,
.plan-badge-indigo,
.platform-tag.info,
span[style*="#eef2ff"],
span[style*="#e0e7ff"],
span[style*="#eff6ff"],
span[style*="#e0f2fe"],
span[style*="#bae6fd"],
span[style*="#dbeafe"],
span[style*="rgba(29,78,216"],
div[style*="rgba(29,78,216"] {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
    font-weight: 800 !important;
}

.badge-success,
.badge-free,
.plan-badge-teal,
.pill.online,
.active-status,
.table-badge.free-badge,
.platform-tag.recommended,
span[style*="#dcfce7"],
span[style*="#ecfdf5"],
span[style*="#d1fae5"],
span[style*="#bbf7d0"],
span[style*="#ccfbf1"],
span[style*="#ecfeff"] {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 800 !important;
}

.badge-req,
.badge-required,
.badge-danger,
.pill.offline,
.off-status,
span[style*="#fee2e2"],
span[style*="#fff1f2"],
span[style*="#fecaca"],
span[style*="#fef2f2"],
span[style*="#ffe4e6"],
div[style*="#fef2f2"],
div[style*="#fff1f2"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #f87171 !important;
    font-weight: 800 !important;
}

.count {
    font-size: 12px !important;
    color: #0369a1 !important;
    background: #e0f2fe !important;
    border: 1px solid #7dd3fc !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-weight: 800 !important;
}

/* Dark Mode High Contrast Badges, Tags & Pills */
html[data-theme="dark"] .badge-coming-soon,
html[data-theme="dark"] .coming-badge,
html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .status-warning,
html[data-theme="dark"] .pill.waiting,
html[data-theme="dark"] .table-badge.paid-badge,
html[data-theme="dark"] span[style*="#fef3c7"],
html[data-theme="dark"] span[style*="#fde68a"],
html[data-theme="dark"] span[style*="#fef08a"],
html[data-theme="dark"] span[style*="#fef9c3"],
html[data-theme="dark"] span[style*="#fff7ed"],
html[data-theme="dark"] span[style*="#fffbeb"],
html[data-theme="dark"] span[style*="#fefce8"],
html[data-theme="dark"] div[style*="#fef3c7"],
html[data-theme="dark"] div[style*="#fde68a"],
html[data-theme="dark"] div[style*="#fffbeb"] {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .badge-opt,
html[data-theme="dark"] .badge-optional,
html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-info,
html[data-theme="dark"] .badge-paid,
html[data-theme="dark"] .plan-badge-blue,
html[data-theme="dark"] .plan-badge-indigo,
html[data-theme="dark"] .platform-tag.info,
html[data-theme="dark"] span[style*="#eef2ff"],
html[data-theme="dark"] span[style*="#e0e7ff"],
html[data-theme="dark"] span[style*="#eff6ff"],
html[data-theme="dark"] span[style*="#e0f2fe"],
html[data-theme="dark"] span[style*="#bae6fd"],
html[data-theme="dark"] span[style*="#dbeafe"],
html[data-theme="dark"] span[style*="rgba(29,78,216"],
html[data-theme="dark"] div[style*="rgba(29,78,216"] {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #c7d2fe !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-success,
html[data-theme="dark"] .pill.online,
html[data-theme="dark"] .table-badge.free-badge,
html[data-theme="dark"] .badge-free,
html[data-theme="dark"] .active-status,
html[data-theme="dark"] .plan-badge-teal,
html[data-theme="dark"] .platform-tag.recommended,
html[data-theme="dark"] span[style*="#dcfce7"],
html[data-theme="dark"] span[style*="#ecfdf5"],
html[data-theme="dark"] span[style*="#d1fae5"],
html[data-theme="dark"] span[style*="#bbf7d0"],
html[data-theme="dark"] span[style*="#ccfbf1"],
html[data-theme="dark"] span[style*="#ecfeff"] {
    background: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .badge-req,
html[data-theme="dark"] .badge-required,
html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .status-danger,
html[data-theme="dark"] .pill.offline,
html[data-theme="dark"] .off-status,
html[data-theme="dark"] span[style*="#fee2e2"],
html[data-theme="dark"] span[style*="#fff1f2"],
html[data-theme="dark"] span[style*="#fecaca"],
html[data-theme="dark"] span[style*="#fef2f2"],
html[data-theme="dark"] span[style*="#ffe4e6"],
html[data-theme="dark"] div[style*="#fef2f2"],
html[data-theme="dark"] div[style*="#fff1f2"] {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .count {
    color: #38bdf8 !important;
    background: #14213d !important;
    border: 1px solid #23375c !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .role {
    color: #cbd5e1 !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] kbd {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

/* Ensure body is always visible */
html body {
    visibility: visible !important;
}

/* Global Strict Thermal Receipt Print Isolation */
@media print {
    @page {
        margin: 0 !important;
        size: auto;
    }
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body > *:not(#printReceipt) {
        display: none !important;
    }
    .top, .top-shell, header, nav, .nav, .layout, .portfactory-footer, .ebill-modal, .camera-panel, .panel, .bill-actions, .wrap > *:not(#printReceipt) {
        display: none !important;
    }
    #printReceipt {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-page {
        width: 78mm !important;
        max-width: 78mm !important;
        min-width: 78mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: #000000 !important;
        box-sizing: border-box !important;
    }
    .print-page.paper-58 {
        width: 52mm !important;
        max-width: 52mm !important;
        min-width: 52mm !important;
        font-size: 10px !important;
    }
    .print-page.paper-80 {
        width: 78mm !important;
        max-width: 78mm !important;
        min-width: 78mm !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
    .print-page.paper-110 {
        width: 104mm !important;
        max-width: 104mm !important;
        min-width: 104mm !important;
        font-size: 11px !important;
    }
    .print-page.paper-A4 {
        width: 100% !important;
        max-width: 180mm !important;
        font-size: 12px !important;
    }
    .print-page .shop-title {
        font-size: 14px !important;
        font-weight: 900 !important;
        margin: 0 0 2px 0 !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }
    .print-page .center { text-align: center !important; }
    .print-page .left { text-align: left !important; }
    .print-page .right { text-align: right !important; }
    .print-page .bold { font-weight: 800 !important; }
    .print-page .sub-text { font-size: 10px !important; line-height: 1.18 !important; margin: 1px 0 !important; }
    .print-page .dashed-line, .print-page .line-border {
        border-top: 1px dashed #000 !important;
        margin: 3px 0 !important;
        width: 100% !important;
        display: block !important;
        height: 0 !important;
    }
    .print-page .meta-row, .print-page .meta {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        margin: 1px 0 !important;
    }
    .print-page table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-page th {
        font-weight: 800 !important;
        padding: 2px 2px !important;
        border: 0 !important;
        font-size: 11px !important;
    }
    .print-page td {
        padding: 1px 2px !important;
        border: 0 !important;
        vertical-align: top !important;
        font-size: 11px !important;
    }
    .print-page .total-label {
        font-size: 13px;
        font-weight: 900;
    }
    .print-page .total-value {
        font-size: 13px;
        font-weight: 900;
    }
    .print-page.paper-80 .total-label,
    .print-page.paper-80 .total-value {
        font-size: 15px;
    }
    .print-page .footer-text {
        margin-top: 4px;
        font-size: 10px;
        font-weight: 700;
    }
}

/* ================= Modern PortFactory Toast System ================= */
#pf-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100vw - 32px);
}

.pf-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    cursor: pointer;
}

.pf-toast.pf-toast-show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pf-toast.pf-toast-hide {
    transform: translateY(12px) scale(0.94);
    opacity: 0;
}

.pf-toast-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.pf-toast-success .pf-toast-icon {
    background: #16a34a;
    color: #ffffff;
}

.pf-toast-error .pf-toast-icon {
    background: #dc2626;
    color: #ffffff;
}

.pf-toast-warning .pf-toast-icon {
    background: #f59e0b;
    color: #0f172a;
}

.pf-toast-info .pf-toast-icon {
    background: #2563eb;
    color: #ffffff;
}

.pf-toast-content {
    flex: 1;
    word-break: break-word;
}

.pf-toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.pf-toast-close:hover {
    color: #ffffff;
}

@media (max-width: 600px) {
    #pf-toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ================= Universal 100% Full-Width & Anti-Shrink Across All POS Pages ================= */
.page,
.ai-container,
.gst-page,
.wrap,
.profile-page,
.table-page,
.products-page,
.report-page,
.ledger-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 40px 0 !important;
    padding-left: clamp(14px, 2vw, 24px) !important;
    padding-right: clamp(14px, 2vw, 24px) !important;
    box-sizing: border-box !important;
}

.ai-card,
.gst-hero,
.help-hero-card,
.card,
.business-profile,
.account-security {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ================= Full Width Responsive Ledger Shell & Layout ================= */
.ledger-shell,
.ledger-container,
.discount-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px 40px !important;
    box-sizing: border-box !important;
}

.ledger-shell .tabs,

.ledger-container .tabs {
    display: flex !important;
    gap: 10px !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}

.ledger-shell .tab-btn,
.ledger-container .tab-btn {
    border-radius: 9px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
}

.ledger-shell .tab-section,
.ledger-container .tab-section {
    padding: 0 !important;
}

.ledger-shell .filter-box,
.ledger-container .filter-box {
    margin-bottom: 20px !important;
    padding: 18px 22px !important;
    border-radius: 14px !important;
}

.ledger-shell .table-wrap,
.ledger-container .table-wrap {
    background: var(--theme-card, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ledger-shell table,
.ledger-container table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.ledger-shell table th,
.ledger-shell table td,
.ledger-container table th,
.ledger-container table td {
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-align: left !important;
    border-bottom: 1px solid var(--theme-border, #e2e8f0) !important;
}

.ledger-shell table th,
.ledger-container table th {
    font-weight: 750 !important;
    background: var(--theme-th-bg, #eff6ff) !important;
    color: #1e3a8a !important;
    border-bottom: 2px solid #dbeafe !important;
    white-space: nowrap !important;
}

html[data-theme="light"] .ledger-shell table tr:nth-child(even) td,
html[data-theme="light"] .ledger-container table tr:nth-child(even) td {
    background-color: rgba(248, 250, 252, 0.7) !important;
}

html[data-theme="light"] .ledger-shell table tr:hover td,
html[data-theme="light"] .ledger-container table tr:hover td {
    background-color: rgba(239, 246, 255, 0.8) !important;
}

/* Bills Tab: 5 Columns (Bill No., Date, Total, Status, Actions) */
#tab-bills table th:nth-child(1), #tab-bills table td:nth-child(1) { width: 14% !important; }
#tab-bills table th:nth-child(2), #tab-bills table td:nth-child(2) { width: 24% !important; }
#tab-bills table th:nth-child(3), #tab-bills table td:nth-child(3) { width: 18% !important; font-weight: 700 !important; }
#tab-bills table th:nth-child(4), #tab-bills table td:nth-child(4) { width: 16% !important; }
#tab-bills table th:nth-child(5), #tab-bills table td:nth-child(5) { width: 28% !important; }

/* 6-Column Summary Tables (Date/Month, Taxable, CGST, SGST, Total GST, Gross) */
#tab-daily table:first-of-type th:nth-child(1), #tab-daily table:first-of-type td:nth-child(1),
#tab-monthly table th:nth-child(1), #tab-monthly table td:nth-child(1),
#tab-gst table th:nth-child(1), #tab-gst table td:nth-child(1) { width: 20% !important; }

#tab-daily table:first-of-type th:not(:first-child), #tab-daily table:first-of-type td:not(:first-child),
#tab-monthly table th:not(:first-child), #tab-monthly table td:not(:first-child),
#tab-gst table th:not(:first-child), #tab-gst table td:not(:first-child) { width: 16% !important; }

/* Daily Bill Entries (Bill ID, Time, Taxable, Total GST, Gross, Action) */
#tab-daily table:nth-of-type(2) th:nth-child(1), #tab-daily table:nth-of-type(2) td:nth-child(1) { width: 14% !important; }
#tab-daily table:nth-of-type(2) th:nth-child(2), #tab-daily table:nth-of-type(2) td:nth-child(2) { width: 22% !important; }
#tab-daily table:nth-of-type(2) th:nth-child(3), #tab-daily table:nth-of-type(2) td:nth-child(3) { width: 16% !important; }
#tab-daily table:nth-of-type(2) th:nth-child(4), #tab-daily table:nth-of-type(2) td:nth-child(4) { width: 16% !important; }
#tab-daily table:nth-of-type(2) th:nth-child(5), #tab-daily table:nth-of-type(2) td:nth-child(5) { width: 16% !important; }
#tab-daily table:nth-of-type(2) th:nth-child(6), #tab-daily table:nth-of-type(2) td:nth-child(6) { width: 16% !important; }

.ledger-shell .btn-link {
    border: 1px solid #fca5a5 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.ledger-shell .btn-link:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}

/* Dark Mode Overrides for Ledger, Profile, Help, and Global Components */
html[data-theme="dark"] .ledger-shell .filter-box,
html[data-theme="dark"] .ledger-container .filter-box {
    background: var(--theme-card, #0f172a) !important;
    border: 1px solid var(--theme-border, #1e293b) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .ledger-shell .filter-row label,
html[data-theme="dark"] .ledger-container .filter-row label {
    color: #cbd5e1 !important;
    font-weight: 750 !important;
}

html[data-theme="dark"] .ledger-shell .filter-row input,
html[data-theme="dark"] .ledger-container .filter-row input {
    background: var(--theme-input-bg, #020617) !important;
    color: #ffffff !important;
    border: 1px solid var(--theme-border, #334155) !important;
}

html[data-theme="dark"] .ledger-shell .filter-row button[type="submit"],
html[data-theme="dark"] .ledger-container .filter-row button[type="submit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

html[data-theme="dark"] .ledger-shell .filter-row .clear-filter-btn,
html[data-theme="dark"] .ledger-container .filter-row .clear-filter-btn {
    background: var(--theme-filter-bg, #1e293b) !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--theme-border, #334155) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

html[data-theme="dark"] .ledger-shell .table-wrap,
html[data-theme="dark"] .ledger-container .table-wrap {
    background: var(--theme-card, #0f172a) !important;
    border: 1px solid var(--theme-border, #1e293b) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .ledger-shell table,
html[data-theme="dark"] .ledger-container table {
    background: transparent !important;
}

html[data-theme="dark"] .ledger-shell table th,
html[data-theme="dark"] .ledger-container table th {
    background: var(--theme-th-bg, #14213d) !important;
    color: #93c5fd !important;
    border-bottom: 2px solid #1e3a8a !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .ledger-shell table td,
html[data-theme="dark"] .ledger-container table td {
    color: #f1f5f9 !important;
    border-bottom: 1px solid var(--theme-border, #1e293b) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .ledger-shell table tr:nth-child(even) td,
html[data-theme="dark"] .ledger-container table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

html[data-theme="dark"] .ledger-shell table tr:hover td,
html[data-theme="dark"] .ledger-container table tr:hover td {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="dark"] .ledger-shell table td a,
html[data-theme="dark"] .ledger-container table td a {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

html[data-theme="dark"] .ledger-shell table td a:hover,
html[data-theme="dark"] .ledger-container table td a:hover {
    text-decoration: underline;
}

html[data-theme="dark"] .ledger-shell .btn-link,
html[data-theme="dark"] .ledger-container .btn-link {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .ledger-shell .btn-link:hover,
html[data-theme="dark"] .ledger-container .btn-link:hover {
    background: rgba(239, 68, 68, 0.35) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
}

html[data-theme="dark"] .ledger-shell .sub-heading,
html[data-theme="dark"] .ledger-container .sub-heading {
    color: #ffffff !important;
}

html[data-theme="dark"] .download-btn {
    background: #15803d !important;
    color: #ffffff !important;
    border: 1px solid #16a34a !important;
}

html[data-theme="dark"] .ledger-shell .tabs .tab-btn {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-ink) !important;
}

html[data-theme="dark"] .ledger-shell .tabs .tab-btn.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .tut-recommendation-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(30, 58, 138, 0.3)) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .tut-recommendation-banner strong {
    color: #93c5fd !important;
}

html[data-theme="dark"] .tut-recommendation-banner span.tut-rec-desc {
    color: #dbeafe !important;
}


.card-whatsapp-marketing {
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.card-whatsapp-marketing h4 {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #166534 !important;
}

.card-whatsapp-marketing .desc,
.card-whatsapp-marketing div {
    font-size: 13px !important;
    color: #15803d !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
}

.card-whatsapp-marketing .badge,
.card-whatsapp-marketing span {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
}

html[data-theme="dark"] .card-whatsapp-marketing {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .card-whatsapp-marketing h4 {
    color: #86efac !important;
}

html[data-theme="dark"] .card-whatsapp-marketing .desc,
html[data-theme="dark"] .card-whatsapp-marketing div {
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .card-whatsapp-marketing .badge,
html[data-theme="dark"] .card-whatsapp-marketing span {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
}

/* Universal PortFactory Footer across all pages */
body {
    padding-bottom: 38px !important;
}

.portfactory-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.95) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    letter-spacing: 0.04em !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
}

[data-theme="dark"] .portfactory-footer {
    background: rgba(6, 13, 29, 0.96) !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media print {
    .portfactory-footer {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   Silent Google Translate: hide banner frame, popup tooltip, prevent jump
   ========================================================================== */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}
body {
    top: 0px !important;
    position: static !important;
}
html {
    top: 0px !important;
}
.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0px !important;
}





/* Guarantee Google Translate elements & stray selects are completely hidden */
.pf-translate,
#pf_translate,
.pf-google-source,
.goog-te-gadget,
.goog-te-combo,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
body > .skiptranslate,
body > .goog-te-gadget,
body > #pf_translate,
body > .pf-translate {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -99999 !important;
}
body {
    top: 0 !important;
    position: static !important;
}
html {
    top: 0 !important;
}