/* 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 {
    background: linear-gradient(145deg, var(--theme-bg-1), var(--theme-bg-2)) !important;
    color: var(--theme-ink) !important;
    font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
}

header,
.top,
.top-shell {
    background: linear-gradient(120deg, #0f172a, var(--theme-accent-1), var(--theme-accent-2)) !important;
    color: #ffffff !important;
    border: 0 !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: #ffffff !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-row .title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
}

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

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

.top-logout {
    text-decoration: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9px !important;
    padding: 7px 12px !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.nav {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.86), rgba(29, 78, 216, 0.76), rgba(15, 118, 110, 0.72)) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(4px);
}

.top-shell .nav {
    margin-top: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.nav a {
    color: #eef6ff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.nav a.nav-link-active {
    background: rgba(255, 255, 255, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !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: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.page-tab-link {
    color: #eef6ff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 6px 10px;
    border-radius: 8px;
}

.page-tab-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.page-tab-link.page-tab-active {
    background: rgba(255, 255, 255, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !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;
}