/* Base font size - increase for better readability */
html {
    font-size: 18px;
}

/* 3D Background Canvas - behind everything */
#bg3d-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    /* Display is controlled by JS - don't use !important here */
    display: none;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Show canvas when default theme is active - but let JS control visibility */
/* The canvas should be visible behind the gradient background */
/* We'll make the background slightly transparent to see the 3D model through it */
body:not([class*="theme-"]) {
    background-blend-mode: overlay !important;
}

/* Ensure app content is above 3D background */
#app {
    position: relative;
    z-index: 1;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: #f9fafb;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Hide scrollbars across all themes while maintaining scroll functionality */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* Firefox */
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* Ensure scrolling still works */
* {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#app {
    height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.screen {
    display: none;
    width: 100%;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

h1 {
    text-align: center;
    margin-top: 32px;
    color: #1a1a2e;
    font-weight: 700;
}

/* Login screen h1 should be white */
#login-screen h1 {
    color: #1a1a1a !important;
}

h2, h3, h4, h5, h6 {
    color: #1a1a2e;
    font-weight: 600;
}

.card {
    max-width: 360px;
    margin: 24px auto;
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Login screen card - light background for black text on all themes */
#login-screen .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Login screen - white text */
#login-screen h1,
#login-screen label,
#login-screen .card label,
#login-screen #login-button,
#login-screen .card button {
    color: #1a1a1a !important;
}

/* Login inputs - transparent with white text */
#login-screen input,
#login-screen .card input {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#login-screen input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

#login-screen input:focus {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Login button */
#login-screen #login-button,
#login-screen .card button {
    background: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    color: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#login-screen #login-button:hover,
#login-screen .card button:hover {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* Hide empty login error box so it doesn't show space below the button */
#login-screen #login-error:empty {
    display: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

label {
    display: block;
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 4px;
    text-align: center;
    color: #1a1a2e;
    font-weight: 500;
}

/* Reduce spacing for grid layouts */
.grid-2 label {
    margin-top: 4px;
    margin-bottom: 2px;
}

.grid-2 input {
    margin-bottom: 4px;
}

input {
    width: calc(100% - 32px);
    max-width: 300px;
    padding: 10px 12px;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: #1a1a2e;
    font-size: 18px;
    transition: all 0.3s ease;
}

input:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Add breathing room between stacked inputs */
.card input {
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
}

input:focus {
    outline: none;
    border-color: #667eea;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

input::placeholder {
    color: #9ca3af;
}

select, textarea {
    width: calc(100% - 32px);
    max-width: 300px;
    padding: 10px 12px;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: #1a1a2e;
    font-size: 18px;
    transition: all 0.3s ease;
    font-family: inherit;
}

select:hover, textarea:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
}

select:focus, textarea:focus {
    outline: none;
    border-color: #667eea;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.grid-2 select, .grid-2 textarea {
    width: 100%;
    max-width: none;
}

button {
    padding: 10px 16px;
    margin-top: 16px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    background: transparent !important;
    color: #1a1a2e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

button:hover {
    background: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

button.primary {
    background: transparent !important;
    border: 1px solid #667eea;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    color: #667eea;
}

button.primary:hover {
    background: transparent !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

button.danger {
    background: transparent !important;
    border: 1px solid #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

button.danger:hover {
    background: transparent !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

button.small {
    padding: 6px 12px;
    font-size: 18px;
    box-shadow: none;
}

button.big {
    padding: 14px 24px;
    font-size: 18px;
    width: 100%;
}

.error {
    color: #dc2626;
    margin-top: 8px;
    min-height: 20px;
    background: rgba(255, 179, 167, 0.2);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 167, 0.4);
}

.info {
    margin-top: 8px;
    min-height: 20px;
    font-size: 18px;
    color: #4b5563;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: none;
    overflow: visible !important;
}

html body.theme-light .top-bar {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.top-bar > span {
    flex: 0 0 auto;
    font-weight: 600;
    color: #1a1a2e;
}

.shop-name {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    text-shadow: none;
    flex: 1;
    text-align: center;
    margin: 0 auto;
}

.top-bar-right {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    position: relative !important;
    align-items: center !important;
    overflow: visible !important;
}

.pos-layout {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

h2 {
    margin: 12px 8px 8px 8px;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
}

/* Enlarge Products title by 30% */
.pos-layout .left > div > h2:contains("Products"),
.pos-layout .left h2[style*="Products"] {
    font-size: 26px !important;
}

/* Target the Products heading in admin page */
.pos-layout .left > div[style*="position:relative"] > h2 {
    font-size: 26px !important;
}

/* Products page: Make all text white that is NOT under white backgrounds - applies to all themes */
.pos-layout .left > h2,
.pos-layout .left > div:not(.card):not(.floating-panel) > h2,
.pos-layout .left > div:not(.card):not(.floating-panel) > h3,
#products-table,
#products-table table,
#products-table thead,
#products-table tbody,
#products-table tbody td,
#products-table td {
    color: #1a1a1a !important;
}

/* Products table headers should be black across all themes and sticky when scrolling */
#products-table {
    position: relative;
}

#products-table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.25) !important; /* Transparent background for glassmorphism */
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html body.theme-light #products-table thead {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

#products-table thead th,
#products-table th {
    color: #1a1a2e !important;
    background: rgba(255, 255, 255, 0.2) !important; /* Transparent background for glassmorphism */
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 11;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Exception: Text inside cards/floating panels should remain dark (inherit from card styles) */
.card,
.card *,
.card h2,
.card h3,
.card label,
.card input,
.card select,
.card textarea,
.card td,
.card th,
.floating-panel,
.floating-panel *,
.floating-panel h2,
.floating-panel h3,
.floating-panel label,
.floating-panel input,
.floating-panel select,
.floating-panel textarea,
.floating-panel td,
.floating-panel th {
    color: inherit !important;
}

/* Product form card: Explicitly set black text for all elements EXCEPT buttons */
.product-form-card,
.product-form-card h2,
.product-form-card h3,
.product-form-card label,
.product-form-card input,
.product-form-card select,
.product-form-card textarea,
.product-form-card td,
.product-form-card th,
.product-form-card div,
.product-form-card span,
.product-form-card #prod-message {
    color: #1a1a2e !important;
}

/* Buttons in product-form-card should keep their original colors (save button = white text) */
.product-form-card button,
.product-form-card button.primary,
.product-form-card button.danger,
.product-form-card button.small {
    color: inherit !important;
}

.pos-layout .left,
.pos-layout .right {
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
}

.pos-layout .left {
    flex: 1;
    width: 100%;
}

/* Fullscreen mode - hide top bar and buttons */
#app.fullscreen-mode .top-bar,
#app.fullscreen-mode .pos-layout .left > div[style*="position:relative"],
#app.fullscreen-mode .top-bar-right .floating-icons {
    display: none !important;
}

/* Keep fullscreen button visible in fullscreen mode */
/* In fullscreen mode, position at top-right corner */
#app.fullscreen-mode #btn-toggle-fullscreen {
    display: flex !important;
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override fullscreen mode positioning for non-classic themes when NOT in fullscreen */
/* This ensures the button aligns with Add Product button when not in fullscreen mode */
/* Must come after fullscreen mode rule and have equal/higher specificity */
/* Using html prefix and multiple selectors to ensure highest specificity */
/* Updated calculation: 60px (top bar) + 8px (section padding) + 26px (button height) = 94px */
html body:not(.theme-classic) #app:not(.fullscreen-mode) #btn-toggle-fullscreen,
html body:not(.theme-classic) #app #btn-toggle-fullscreen:not(.fullscreen-mode) {
    top: calc(94px - clamp(40px, 5vw, 56px)) !important;
    right: calc(clamp(8px, 1.5vw, 24px) + clamp(40px, 5vw, 56px) + 8px) !important;
}

#app.fullscreen-mode .pos-layout {
    height: 100vh !important;
}

#app.fullscreen-mode .pos-layout .left {
    height: 100vh !important;
}

#app.fullscreen-mode #products-table {
    margin-top: 0 !important;
    height: 100vh !important;
}

/* Fullscreen toggle button */
.fullscreen-toggle {
    transition: all 0.3s ease !important;
}

.fullscreen-toggle:hover {
    background: rgba(59, 130, 246, 1) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.pos-layout .right {
    display: none; /* Hide right section - products take full width */
}

/* Show right section on layby page */
#app.screen.active .pos-layout .right {
    display: block !important;
}

/* POS Floating Payment Icon */
.pos-floating-icons {
    position: fixed !important;
    top: 60px !important;
    right: auto !important;
    left: calc(100% - clamp(8px, 1.5vw, 24px) - clamp(40px, 5vw, 56px)) !important;
    bottom: auto !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(4px, 0.8vh, 8px) !important;
    max-height: calc(100vh - 60px - clamp(4px, 1vw, 16px)) !important;
    padding-right: clamp(2px, 0.5vw, 4px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1) !important;
}

/* Position floating icons horizontally to the right of Back to POS button */
/* Base positioning - ONLY for classic theme */
body.theme-classic .top-bar-right .floating-icons,
body.theme-classic .top-bar-right .pos-floating-icons {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 3000 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Align fullscreen icon vertically with more icon for all themes */
/* Default alignment - overridden by theme-specific CSS below for non-classic themes */
/* This is the base rule - will be overridden by more specific rules below */
/* Updated calculation: 60px (top bar) + 8px (section padding) + 26px (button height) = 94px */
#btn-toggle-fullscreen {
    position: fixed !important;
    top: calc(94px - clamp(40px, 5vw, 56px)) !important;
    right: calc(clamp(8px, 1.5vw, 24px) + clamp(40px, 5vw, 56px) + 8px) !important;
}

/* IMPORTANT: Override for non-fullscreen mode must come AFTER fullscreen mode rule */
/* This ensures proper positioning when app is NOT in fullscreen mode */
/* Updated calculation: 60px (top bar) + 8px (section padding) + 26px (button height) = 94px */
html body:not(.theme-classic) #app:not(.fullscreen-mode) #btn-toggle-fullscreen {
    top: calc(94px - clamp(40px, 5vw, 56px)) !important;
    right: calc(clamp(8px, 1.5vw, 24px) + clamp(40px, 5vw, 56px) + 8px) !important;
}

/* Align fullscreen and more icons - bottom circumferences aligned with Add Product button bottom */
/* Apply to all themes EXCEPT classic - MUST come after base rule */
/* Add Product button: small button with 6px padding top/bottom + 14px font ≈ 26px total */
/* Top bar: 60px, section padding: 8px, button starts at 68px, button bottom ≈ 68px + 26px = 94px */
/* Icon bottom should align with button bottom at 94px */
/* Icon height max 56px, so icon top = 94px - 56px = 38px */
/* Calculation: top = 60px (top bar) + 8px (section padding) + 26px (button height) - 56px (max icon height) = 38px */
/* Using calc: top = calc(60px + 8px + 26px - clamp(40px, 5vw, 56px)) = calc(94px - clamp(40px, 5vw, 56px)) */
body:not(.theme-classic) .top-bar-right .floating-icons,
body:not(.theme-classic) .top-bar-right .pos-floating-icons,
body:not(.theme-classic) header .top-bar-right .floating-icons,
body:not(.theme-classic) header .top-bar-right .pos-floating-icons,
body:not(.theme-classic) #app .top-bar-right .floating-icons,
body:not(.theme-classic) #app .top-bar-right .pos-floating-icons,
html body:not(.theme-classic) .top-bar-right .floating-icons,
html body:not(.theme-classic) .top-bar-right .pos-floating-icons {
    position: fixed !important;
    top: calc(94px - clamp(32px, 4vw, 48px)) !important;
    right: clamp(4px, 1vw, 16px) !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(4px, 0.8vh, 8px) !important;
    z-index: 3000 !important;
    white-space: nowrap !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    max-height: calc(100vh - 94px) !important;
    padding-right: clamp(2px, 0.5vw, 4px) !important;
    padding-bottom: clamp(4px, 1vh, 8px) !important;
    /* Scrollbars hidden globally */
}

/* Remove transforms from more button that might affect alignment */
body:not(.theme-classic) .top-bar-right .floating-icons .more-button,
body:not(.theme-classic) .top-bar-right .pos-floating-icons .more-button {
    transform: none !important;
}

/* Align fullscreen icon with more icon for all themes except classic */
/* Position so bottom aligns with Add Product button bottom */
/* Must override fullscreen mode rule when NOT in fullscreen mode */
/* Using html prefix for higher specificity */
/* Updated calculation: 60px (top bar) + 8px (section padding) + 26px (button height) = 94px */
html body:not(.theme-classic) #app:not(.fullscreen-mode) #btn-toggle-fullscreen,
html body:not(.theme-classic) #btn-toggle-fullscreen {
    top: calc(94px - clamp(32px, 4vw, 48px)) !important;
    right: calc(clamp(4px, 1vw, 16px) + clamp(32px, 4vw, 48px) + clamp(4px, 0.8vw, 8px)) !important;
    transform: none !important;
    position: fixed !important;
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: clamp(18px, 2vw, 24px) !important;
}

/* Ensure settings icon is visible when hovering over pos-floating-icons */
.top-bar-right .pos-floating-icons:hover .floating-icon.settings-icon,
.top-bar-right .pos-floating-icons:hover .floating-icon:not(.more-button) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Vertical layout for top-bar-right - icons slide vertically */
.top-bar-right .pos-floating-icons .floating-icon:not(.more-button) {
    transform: translateY(-20px) !important;
    margin-top: 0 !important;
}

/* Hide floating icons by default, show on hover of container or more button */
.pos-floating-icons .floating-icon:not(.more-button) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(20px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
}

.pos-floating-icons:hover .floating-icon:not(.more-button) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* More button styling */
.pos-floating-icons .more-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    background: rgba(59, 130, 246, 0.9) !important;
    font-weight: bold !important;
    pointer-events: auto !important;
    color: #1a1a1a !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    line-height: 1 !important;
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* Scrollbars are hidden globally - removed specific styling */

.settings-icon {
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    flex-shrink: 0 !important;
    color: #1a1a2e !important;
}

.payment-icon {
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    background: rgba(158, 240, 210, 0.9) !important;
    box-shadow: 0 4px 20px rgba(158, 240, 210, 0.3) !important;
    flex-shrink: 0 !important;
    color: #1a1a2e !important;
}

.payment-icon:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 30px rgba(158, 240, 210, 0.4) !important;
    background: rgba(158, 240, 210, 1) !important;
}

.payment-panel .totals {
    margin-bottom: 16px;
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.payment-panel .totals > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.payment-panel .totals .grand {
    font-size: 1.3em;
    font-weight: bold;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    padding-top: 12px;
    color: #1a1a2e;
}

.payment-panel .payments {
    margin-bottom: 16px;
}

.payment-panel .payments label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 17px;
}

.payment-panel .payments input,
.payment-panel .payments select,
.payment-panel input,
.payment-panel select,
.payment-panel #collection-status,
.payment-panel input[type="text"],
.payment-panel input[type="number"],
.payment-panel input[type="email"] {
    width: 85% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

.payment-panel .primary.big {
    width: 70% !important;
    max-width: 400px !important;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    margin: 8px auto 0 auto !important;
    display: block !important;
}

/* Reduce horizontal size of all buttons in payment/checkout panel */
.payment-panel button.primary,
#payment-panel button.primary,
.payment-panel #btn-complete-sale,
.payment-panel #btn-toggle-layby,
.payment-panel #btn-add-new-layby-customer,
.payment-panel #btn-record-layby-payment {
    width: 70% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Layby sections container with smooth transition */
#layby-sections-container {
    transition: all 0.3s ease;
    overflow: hidden;
}

#layby-toggle-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Floating Icons */
/* Base floating-icons rule - applies to floating icons NOT inside .top-bar-right */
/* This is for floating icons that are direct children of body or other containers */
body > .floating-icons,
#app > .floating-icons {
    position: fixed;
    top: 60px;
    right: auto;
    left: calc(100% - clamp(4px, 1vw, 16px) - clamp(32px, 4vw, 48px));
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vh, 8px);
    z-index: 3000;
    max-height: calc(100vh - 60px - clamp(4px, 1vw, 16px));
    padding-right: clamp(2px, 0.5vw, 4px);
    overflow-y: auto;
    overflow-x: visible;
    /* Scrollbars hidden globally */
}


/* Hide floating icons by default, show on hover of container or more button */
.floating-icons .floating-icon:not(.more-button) {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.floating-icons:hover .floating-icon:not(.more-button) {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Horizontal layout for top-bar-right - icons slide horizontally */
/* Only apply to classic theme - other themes use fixed positioning */
body.theme-classic .top-bar-right .floating-icons .floating-icon:not(.more-button) {
    transform: translateX(-20px) translateY(-50%) !important;
    margin-top: 0 !important;
}

body.theme-classic .top-bar-right .floating-icons:hover .floating-icon:not(.more-button) {
    transform: translateX(0) translateY(-50%) !important;
}

/* More button should not have translateY in transform - only for classic */
body.theme-classic .top-bar-right .floating-icons .more-button {
    transform: translateY(-50%) !important;
}

/* More button styling */
.floating-icons .more-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    background: rgba(59, 130, 246, 0.9) !important;
    font-weight: bold !important;
    pointer-events: auto !important;
    color: #1a1a1a !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    line-height: 1 !important;
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* Scrollbars are hidden globally - removed specific styling */

.floating-icon {
    /* Use smaller, more zoom-responsive sizes */
    width: clamp(32px, 4vw, 48px) !important;
    height: clamp(32px, 4vw, 48px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
    font-size: clamp(18px, 2vw, 24px) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.floating-icon:hover {
    background: #f3f4f6;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-icon:active {
    transform: scale(0.98);
}

/* Notification Icon Styles */
.notification-icon {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #1a1a1a;
    border-radius: 50%;
    width: clamp(14px, 1.5vw, 18px);
    height: clamp(14px, 1.5vw, 18px);
    min-width: 14px;
    min-height: 14px;
    max-width: 18px;
    max-height: 20px;
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.notification-icon.has-unread {
    animation: pulse-notification 2s infinite;
}

@keyframes pulse-notification {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 24px rgba(239, 68, 68, 0.6);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes seaCurrent {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, center center, 0 0;
    }
    25% {
        background-position: 0 0, 0 0, 0 50px, 0 40px, center center, 0 0;
    }
    50% {
        background-position: 0 0, 0 0, 0 100px, 0 80px, center center, 0 0;
    }
    75% {
        background-position: 0 0, 0 0, 0 50px, 0 40px, center center, 0 0;
    }
    100% {
        background-position: 0 0, 0 0, 0 0, 0 0, center center, 0 0;
    }
}

.notification-item {
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border-left: 4px solid rgba(158, 240, 210, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1a1a2e;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.8);
}

.notification-item.unread {
    background: rgba(158, 240, 210, 0.3);
    border-left-color: rgba(158, 240, 210, 1);
    font-weight: 500;
}

.notification-item.read {
    opacity: 0.7;
}

.notification-message {
    color: #1a1a2e;
    font-size: 18px;
    margin-bottom: 4px;
}

.notification-time {
    color: #6b7280;
    font-size: 14px;
}

.notification-product {
    color: #1a1a2e;
    font-weight: 500;
}

/* Floating Panels */
.floating-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(90vw, 600px) !important;
    max-width: 600px !important;
    /* Responsive max-height: ensures panel always fits on screen with safe margins for all zoom levels */
    /* Account for top bar (60px) + safe margins (40px top + 40px bottom) = 140px minimum */
    max-height: min(85vh, calc(100vh - 140px), calc(100vh - clamp(80px, 8vh, 120px))) !important;
    /* Additional safety: ensure panel never exceeds viewport */
    max-height: min(85vh, calc(100vh - 140px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important;
    padding: clamp(12px, 1.5vh, 24px) !important;
    display: none; /* Default hidden, will be overridden by inline style */
    color: #1a1a2e !important;
    /* Ensure panel stays within viewport */
    box-sizing: border-box !important;
    /* Prevent panel from going off-screen at any zoom */
    margin: clamp(20px, 2vh, 40px) !important;
}

/* AI Insights Panel - Very wide and tall, leaving just a few mm from screen edges */
#ai-insights-panel.floating-panel,
#ai-insights-panel {
    width: calc(100vw - 16px) !important; /* 8px (4mm) margin on each side */
    max-width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important; /* 8px (4mm) margin on top and bottom */
    max-height: calc(100vh - 16px) !important;
    /* Leave about 8px (4mm) margin on all sides - override default floating-panel dimensions */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important; /* No margin, height/width handle spacing */
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Payment Panel Specific Styles - Override floating-panel positioning */
/* Enlarged to leave just a few mm from screen edges */
.floating-panel.payment-panel,
#payment-panel.payment-panel,
#payment-panel.floating-panel.payment-panel {
    width: calc(100vw - 16px) !important; /* 8px (4mm) margin on each side */
    max-width: calc(100vw - 16px) !important;
    /* Leave 8px margin below top bar (60px) and 8px margin at bottom */
    top: 68px !important; /* 60px (top bar) + 8px margin */
    left: 50% !important;
    height: calc(100vh - 76px) !important; /* 68px top + 8px bottom margin */
    max-height: calc(100vh - 76px) !important;
    transform: translate(-50%, 0) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important; /* Small border radius for modern look */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.floating-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.floating-panel-header h2 {
    margin: 0;
    font-size: 24px;
    color: #1a1a2e;
}

.close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid #ef4444;
    color: #1a1a1a;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: rgba(255, 179, 167, 0.5);
}

/* Fullscreen History Panel */
.history-panel-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 10000 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.history-panel-fullscreen .floating-panel-header {
    padding: 24px 24px 16px 24px !important;
    margin: 0 !important;
}

.history-content-fullscreen {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 16px 24px 24px 24px;
    margin: 0;
}

.history-content-fullscreen table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: auto !important;
}

.history-content-fullscreen tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease;
    height: auto !important;
}

.history-content-fullscreen tbody tr:hover {
    background-color: rgba(158, 240, 210, 0.2);
}

.history-content-fullscreen tbody td {
    padding: 30px 24px !important;
    font-size: 19px !important;
    color: #1a1a2e !important;
    line-height: 2.2 !important;
    vertical-align: middle !important;
    letter-spacing: 0.4px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.history-content-fullscreen tbody td:first-child {
    font-weight: 500;
    color: #1a1a2e;
    min-width: 220px;
    width: 25%;
}

.history-content-fullscreen tbody td:nth-child(2) {
    text-align: right;
    font-weight: 600;
    color: #1a1a2e;
    font-size: 20px !important;
    min-width: 120px;
    width: 15%;
}

.history-content-fullscreen tbody td:nth-child(3) {
    min-width: 150px;
    width: 18%;
}

.history-content-fullscreen tbody td:nth-child(4) {
    min-width: 150px;
    width: 18%;
}

.history-content-fullscreen tbody td:nth-child(5) {
    min-width: 150px;
    width: 24%;
}

.history-content-fullscreen tbody tr {
    min-height: 80px !important;
}

.history-content-fullscreen thead th {
    padding: 28px 24px !important;
    text-align: left;
    border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important;
    font-weight: bold !important;
    font-size: 21px !important;
    color: #1a1a2e !important;
    line-height: 2 !important;
    letter-spacing: 0.6px !important;
    white-space: normal !important;
}

.history-content-fullscreen thead th:nth-child(2) {
    text-align: right;
}


/* Backdrop Overlay */
.panel-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.input-row {
    margin-bottom: 8px;
}

#search-results {
    margin-top: 4px;
    background: rgba(17, 24, 39, 0.05);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 160px;
    overflow-y: auto;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
    position: relative;
    z-index: 1000;
}

#search-results div {
    padding: 6px 8px;
    cursor: pointer;
    color: #1a1a1a;
}

#search-results div:hover {
    background: rgba(59, 130, 246, 0.3);
}

#cart {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
    table-layout: fixed; /* keeps columns consistent when zooming */
}

thead {
    background: #ffffff;
}

/* Cart table header - transparent background with white text */
#cart thead,
#cart thead th {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1a1a1a !important;
}

th, td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #1a1a2e;
}

/* Ensure headers and data cells align properly */
th {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: #1a1a2e;
}

td {
    text-align: left;
    vertical-align: middle;
    color: #1a1a2e;
}

/* Specific column width adjustments for layby customers table */
#customers-table table {
    table-layout: auto;
    width: 100%;
}

#customers-table th,
#customers-table td {
    color: #1a1a2e !important;
}

/* Layby light theme: table containers and table match app-wide light table style */
body.theme-light #customers-table,
body.theme-light #transactions-table {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

body.theme-light #customers-table thead,
body.theme-light #transactions-table thead {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
}

body.theme-light #customers-table thead th,
body.theme-light #transactions-table thead th {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

body.theme-light #customers-table td,
body.theme-light #transactions-table td {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #1a1a2e !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #customers-table tbody tr:hover td,
body.theme-light #transactions-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

#customers-table th:nth-child(1),
#customers-table td:nth-child(1) {
    width: 60px;
    min-width: 60px;
    text-align: center;
}

#customers-table th:nth-child(2),
#customers-table td:nth-child(2) {
    width: 150px;
    min-width: 120px;
}

#customers-table th:nth-child(3),
#customers-table td:nth-child(3) {
    width: 130px;
    min-width: 100px;
}

#customers-table th:nth-child(4),
#customers-table td:nth-child(4) {
    width: 250px;
    min-width: 200px;
}

#customers-table th:nth-child(5),
#customers-table td:nth-child(5) {
    width: 180px;
    min-width: 150px;
    text-align: center;
}

/* Right-align numeric columns (Price, Disc, Total) and prevent wrapping */
th:nth-child(3),
td:nth-child(3),
th:nth-child(4),
td:nth-child(4),
th:nth-child(5),
td:nth-child(5) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* POS cart specific: center QTY & Disc inputs and headers */
#cart th:nth-child(2),
#cart td:nth-child(2),
#cart th:nth-child(4),
#cart td:nth-child(4) {
    text-align: center;
}

#cart td:nth-child(2) input,
#cart td:nth-child(4) input {
    text-align: center;
}

.totals {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
}

.totals div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.totals div span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.totals .grand {
    font-size: 20px;
    font-weight: 700;
}

.payments {
    flex: 1;
    overflow-y: auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px; /* ensure clear separation between side-by-side fields when zoomed */
}

/* Compact product form grid - 6 columns for single row layout */
.product-form-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: end;
}

.product-form-grid label {
    font-size: 18px;
    margin-bottom: 2px;
}

.product-form-grid input {
    padding: 6px 8px;
    font-size: 20px;
}

.product-form-card {
    background: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 1200px) {
    .product-form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .product-form-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 8px;
        margin-top: 8px;
    }
}

.grid-2 > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 800px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .pos-layout {
        flex-direction: column;
    }
    .pos-layout .left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Mobile / WebView: prevent panels and content from being cut off on the right */
@media (max-width: 768px) {
    body {
        overflow-x: auto !important;
    }
    #app {
        min-width: min(100%, 100vw);
        overflow-x: auto !important;
    }
    .pos-layout .left {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .floating-panel {
        overflow-x: auto !important;
        width: min(calc(100vw - 16px), calc(100% - 16px)) !important;
        max-width: min(calc(100vw - 16px), calc(100% - 16px)) !important;
    }
}

/* Admin page on Android / narrow: reduce zoom, smaller fonts and buttons, fit on screen */
@media (max-width: 768px) {
    body.page-admin {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    body.page-admin #app {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    body.page-admin .top-bar {
        padding: 4px 6px !important;
        flex-wrap: wrap !important;
    }
    body.page-admin .shop-name {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    body.page-admin .top-bar > span {
        font-size: 10px !important;
    }
    body.page-admin .top-bar-right .small,
    body.page-admin #btn-admin-pos {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
    }
    body.page-admin .top-bar-right {
        gap: 4px !important;
    }
    body.page-admin .floating-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 14px !important;
    }
    body.page-admin #btn-toggle-fullscreen {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 14px !important;
    }
    body.page-admin .pos-layout .left {
        padding: 4px 6px !important;
    }
    body.page-admin .pos-layout .left > div[style*="position:relative"] > h2,
    body.page-admin .pos-layout .left h2[style*="Products"] {
        font-size: 14px !important;
    }
    body.page-admin .pos-layout .left > div[style*="position:relative"] {
        margin-bottom: 4px !important;
        gap: 4px !important;
    }
    body.page-admin button.small,
    body.page-admin .primary.small,
    body.page-admin .small {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-height: 26px !important;
    }
    body.page-admin #btn-show-product-form,
    body.page-admin #btn-import-inventory {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    body.page-admin .product-form-card {
        padding: 6px 8px !important;
        margin: 2px 0 !important;
    }
    body.page-admin .product-form-card h3 {
        font-size: 12px !important;
    }
    body.page-admin .product-form-card label {
        font-size: 11px !important;
    }
    body.page-admin .product-form-card input,
    body.page-admin .product-form-card select {
        font-size: 12px !important;
        padding: 4px 6px !important;
        min-height: 28px !important;
    }
    body.page-admin .product-form-card button {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    body.page-admin #products-table {
        margin-top: 4px !important;
        font-size: 11px !important;
    }
    body.page-admin #products-table table {
        font-size: 11px !important;
    }
    body.page-admin #products-table thead th,
    body.page-admin #products-table th {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    body.page-admin #products-table td {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
    body.page-admin #products-table thead {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.page-admin .info {
        font-size: 11px !important;
        margin-top: 4px !important;
    }
}

/* Settings Panel */
.settings-panel {
    max-width: min(90vw, 500px) !important;
    /* Ensure settings panel is always visible and scrollable for all screen sizes and zoom levels */
    /* Account for top bar (60px) + safe margins (40px top + 40px bottom) = 140px minimum */
    max-height: min(85vh, calc(100vh - 140px), calc(100vh - clamp(80px, 8vh, 120px))) !important;
    max-height: min(85vh, calc(100vh - 140px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Prevent panel from going off-screen */
    margin: clamp(20px, 2vh, 40px) !important;
    box-sizing: border-box !important;
}

/* All floating panels - ensure responsive sizing across all pages */
.floating-panel,
#shifts-panel,
#shift-report-panel,
#summary-report-panel,
#report-panel,
#quotation-modal,
#notification-panel,
#withdrawal-modal {
    /* Almost fit the whole screen for all themes; avoid right-side clip on mobile/WebView */
    width: min(calc(100vw - 16px), calc(100% - 16px)) !important;
    max-width: min(calc(100vw - 16px), calc(100% - 16px)) !important;
    max-height: calc(100vh - 8px) !important;
    height: calc(100vh - 8px) !important;
    min-height: calc(100vh - 8px) !important;
    margin: 0 !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: fixed !important;
    -webkit-overflow-scrolling: touch;
}

/* Specific panel sizes */
#shifts-panel {
    --panel-max-width: 900px;
    /* Increase height for shifts panel */
    max-height: min(90vh, calc(100vh - 80px)) !important;
    height: min(90vh, calc(100vh - 80px)) !important;
}

/* Active Shift section - make it almost full width with small margins */
#shifts-panel .card {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
}

#shifts-panel #active-shift-section,
#shifts-panel #active-shift-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#shift-report-panel {
    --panel-max-width: 98vw;
    width: min(98vw, 1400px) !important;
    max-width: min(98vw, 1400px) !important;
    /* Increase height for shift report panel to show all information */
    max-height: min(95vh, calc(100vh - 60px)) !important;
    height: min(95vh, calc(100vh - 60px)) !important;
}

/* Shift report panel content - make it almost full width with small margins */
#shift-report-panel .card {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
}

#shift-report-panel #shift-report-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Shift password modal styling */
#shift-password-modal {
    max-width: 450px !important;
    width: min(90vw, 450px) !important;
    z-index: 10001 !important;
}

/* Shift report panel content - extend to edges with small margins */
#shift-report-panel .card {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
}

#shift-report-panel #shift-report-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#summary-report-panel,
#report-panel {
    --panel-max-width: 800px;
}

#quotation-modal {
    --panel-max-width: 700px;
}

.settings-content h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #1a1a2e;
    font-weight: 600;
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.theme-btn.active {
    border-color: rgba(158, 240, 210, 0.8);
    background: rgba(158, 240, 210, 0.3);
    box-shadow: 0 0 12px rgba(158, 240, 210, 0.4);
}

.theme-preview {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.default-theme {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
}

.dark-theme {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.light-theme {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 50%, #e0eafc 100%);
}

.theme-preview.classic-theme {
    background: #e8e8e8;
    border: 1px solid #999;
}

.blue-theme {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e40af 100%);
}

.green-theme {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 50%, #2d8659 100%);
}

.purple-theme {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.morrison-theme {
    background: linear-gradient(135deg, #2596be 0%, #1e7a9e 50%, #155d7a 100%);
}

/* Theme Styles */
body.theme-default {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%) !important;
    background-size: 400% 400% !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    animation: gradientShift 15s ease infinite !important;
    color: #f9fafb !important;
}

body.theme-default .card,
body.theme-default .floating-panel {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Payment panel frosted glass for default theme */
body.theme-default .payment-panel {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Payment panel totals section - also frosted glass */
body.theme-default .payment-panel .totals {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

body.theme-default .top-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.theme-default input,
body.theme-default select,
body.theme-default textarea {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-default button {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-default button.primary {
    background: transparent !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

body.theme-default button.danger {
    background: transparent !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

body.theme-default .floating-icon,
body.theme-default #search-results,
body.theme-default .totals {
    background: rgba(17, 24, 39, 0.05) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #1a1a1a !important;
}

body.theme-light {
    background: transparent !important;
    background-size: auto !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    animation: none !important;
    color: #1a1a1a !important;
    position: relative !important;
}

/* Show video background for light theme */
body.theme-light #light-theme-video {
    display: block !important;
    z-index: -1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
}

/* Ensure app content is above video */
body.theme-light #app {
    position: relative !important;
    z-index: 1 !important;
}

/* Hide video for all other themes */
body:not(.theme-light) #light-theme-video {
    display: none !important;
}

/* Glassmorphism for cards and panels in light theme */
body.theme-light .card,
body.theme-light .floating-panel {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #1a1a2e !important;
}

/* Regular cards (not floating panels) in light theme */
body.theme-light .card:not(.floating-panel) {
    position: static !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Floating panels in light theme */
body.theme-light .floating-panel {
    position: fixed !important;
    /* Ensure panel content is scrollable and doesn't overflow */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Responsive sizing for all screen sizes and zoom levels */
    max-height: min(85vh, calc(100vh - 140px)) !important;
    width: min(90vw, 600px) !important;
    max-width: min(90vw, 600px) !important;
    margin: clamp(20px, 2vh, 40px) !important;
    box-sizing: border-box !important;
}

/* Override light theme restrictions for AI insights panel - must come after the general floating-panel rule */
/* Using maximum specificity to ensure this overrides the general floating-panel rule */
html body.theme-light #ai-insights-panel,
html body.theme-light #ai-insights-panel.floating-panel,
html body.theme-light #app #ai-insights-panel,
html body.theme-light #app #ai-insights-panel.floating-panel {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    min-width: calc(100vw - 40px) !important;
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    min-height: calc(100vh - 40px) !important;
    margin: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix header and button positioning in light theme */
html body.theme-light #ai-insights-panel .floating-panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

html body.theme-light #ai-insights-panel .floating-panel-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

html body.theme-light #ai-insights-panel .floating-panel-header > div {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

html body.theme-light #ai-insights-panel .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    /* Remove card styling - make it transparent so content shows directly on panel */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Override any position fixed from general card rule */
    position: static !important;
}

/* Additional override with even higher specificity */
html body.theme-light #ai-insights-panel.floating-panel .card,
html body.theme-light #app #ai-insights-panel .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
}

/* Summary Report Panel - Remove nested card background in light theme */
html body.theme-light #summary-report-panel.floating-panel .card,
html body.theme-light #app #summary-report-panel .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure summary report content displays properly */
html body.theme-light #summary-report-panel #summary-report-content {
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Summary Report Panel - Full screen with proper spacing in light theme */
/* Only apply flex display when panel is actually shown (not hidden via inline style) */
html body.theme-light #summary-report-panel:not([style*="display: none"]):not([style*="display:none"]),
html body.theme-light #summary-report-panel.floating-panel:not([style*="display: none"]):not([style*="display:none"]) {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    min-width: calc(100vw - 40px) !important;
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    min-height: calc(100vh - 40px) !important;
    margin: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure panel stays hidden when inline style says display: none */
html body.theme-light #summary-report-panel[style*="display: none"],
html body.theme-light #summary-report-panel[style*="display:none"],
html body.theme-light #summary-report-panel.floating-panel[style*="display: none"],
html body.theme-light #summary-report-panel.floating-panel[style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure header and content are properly spaced */
html body.theme-light #summary-report-panel .floating-panel-header {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

/* Store Settings Panel - Full screen with minimal margins for all themes - Responsive */
#store-settings-panel,
#store-settings-panel.floating-panel {
    width: calc(100vw - 0.5rem) !important;
    max-width: calc(100vw - 0.5rem) !important;
    min-width: calc(100vw - 0.5rem) !important;
    height: calc(100vh - 0.5rem) !important;
    max-height: calc(100vh - 0.5rem) !important;
    min-height: calc(100vh - 0.5rem) !important;
    margin: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: clamp(0.75rem, 1.5vw, 1.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    /* Ensure scrolling works properly */
    -webkit-overflow-scrolling: touch !important;
    font-size: clamp(16px, 1.2vw, 20px) !important;
}

/* Create a scrollable content area inside the panel */
#store-settings-panel > *:not(.floating-panel-header) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ensure panel content area centers all children */
#store-settings-panel {
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Store Settings Panel - Remove nested card background for all themes - Responsive */
#store-settings-panel.floating-panel .card,
#app #store-settings-panel .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
    padding: 0 !important;
    margin: clamp(0.4rem, 0.8vw, 0.625rem) auto !important;
    max-width: clamp(500px, 85vw, 600px) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: visible !important;
}

/* User Management card - allow wider table */
#store-settings-panel .card[style*="max-width:none"],
#store-settings-panel .card[style*="max-width: none"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Light theme - User Management card can be wider */
html body.theme-light #store-settings-panel .card[style*="max-width:none"],
html body.theme-light #store-settings-panel .card[style*="max-width: none"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Ensure table with cashiers-body is fully visible */
#store-settings-panel #cashiers-body {
    display: table-row-group !important;
}

/* Target the div containing the users table - ensure it can expand */
#store-settings-panel .card > div[style*="overflow-x"] {
    max-width: none !important;
    width: 100% !important;
    min-width: 900px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Light theme - wider table container */
html body.theme-light #store-settings-panel .card > div[style*="overflow-x"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 1000px !important;
}

/* Override inline styles on cards */
#store-settings-panel .card[style*="max-width"] {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* More Settings section - appears directly on panel */
#store-settings-panel #more-settings-content:not(.more-settings-visible) {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: none !important; /* Default hidden */
}

/* Show when visible class is added or when display is set to block */
#store-settings-panel #more-settings-content.more-settings-visible,
#store-settings-panel #more-settings-content[style*="display: block"],
#store-settings-panel #more-settings-content[style*="display:block"] {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* More Settings section when visible - using class for reliability */
#store-settings-panel #more-settings-content.more-settings-visible,
#store-settings-panel #more-settings-content[style*="display: block"],
#store-settings-panel #more-settings-content[style*="display:block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Light theme - More Settings uses 800px max-width */
html body.theme-light #store-settings-panel #more-settings-content {
    max-width: 800px !important;
}

html body.theme-light #store-settings-panel #more-settings-content.more-settings-visible,
html body.theme-light #store-settings-panel #more-settings-content[style*="display: block"],
html body.theme-light #store-settings-panel #more-settings-content[style*="display:block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* More Settings button styling */
#store-settings-panel #btn-more-settings {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Ensure header and content are properly spaced in store settings panel - Responsive */
/* Store Settings Panel Header - Position exit button top right, center title */
#store-settings-panel .floating-panel-header {
    flex-shrink: 0 !important;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 clamp(2rem, 4vw, 3.5rem) clamp(0.6rem, 1.2vw, 1rem) clamp(2rem, 4vw, 3.5rem) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Center the title - Responsive */
#store-settings-panel .floating-panel-header h2 {
    margin: 0 !important;
    text-align: center !important;
    flex: 1 !important;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
    font-weight: 700 !important;
}

/* Position exit button in top right corner - Responsive */
#store-settings-panel .floating-panel-header .close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
    width: clamp(2rem, 4.5vw, 3rem) !important;
    height: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: clamp(2rem, 4.5vw, 3rem) !important;
    box-sizing: border-box !important;
}

/* Light theme - Increase text size and horizontal length - Responsive */
html body.theme-light #store-settings-panel .floating-panel-header h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: clamp(0.5px, 0.1vw, 1px) !important;
}

html body.theme-light #store-settings-panel .floating-panel-header {
    padding: 0 clamp(2rem, 5vw, 4rem) clamp(0.75rem, 1.5vw, 1.25rem) clamp(2rem, 5vw, 4rem) !important;
}

/* Increase text size for all content in light theme - Responsive */
html body.theme-light #store-settings-panel .card h3,
html body.theme-light #store-settings-panel .card h4 {
    font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
    font-weight: 600 !important;
}

html body.theme-light #store-settings-panel label {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    font-weight: 500 !important;
}

html body.theme-light #store-settings-panel input,
html body.theme-light #store-settings-panel textarea,
html body.theme-light #store-settings-panel select {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem) !important;
    min-height: clamp(2.25rem, 4.5vw, 3rem) !important;
    box-sizing: border-box !important;
}

html body.theme-light #store-settings-panel button {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(1rem, 2vw, 1.75rem) !important;
    min-height: clamp(2.25rem, 4.5vw, 3rem) !important;
    box-sizing: border-box !important;
}

html body.theme-light #store-settings-panel .card {
    max-width: clamp(600px, 90vw, 800px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Override inline styles on cards in light theme */
html body.theme-light #store-settings-panel .card[style*="max-width"] {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.theme-light #store-settings-panel .card > *,
html body.theme-light #store-settings-panel .card > div,
html body.theme-light #store-settings-panel .card > h3,
html body.theme-light #store-settings-panel .card > h4 {
    max-width: 800px !important;
}

/* Light theme - Ensure Store Information nested divs use 800px */
html body.theme-light #store-settings-panel .card > div {
    max-width: 800px !important;
}

html body.theme-light #store-settings-panel .card > div > div {
    max-width: 800px !important;
}

html body.theme-light #store-settings-panel .card > div[style*="margin-top"] {
    max-width: 800px !important;
}

html body.theme-light #store-settings-panel .grid-2 {
    max-width: 800px !important;
}

/* Center all content in store settings panel */
#store-settings-panel .card > *,
#store-settings-panel .card > div,
#store-settings-panel .card > h3,
#store-settings-panel .card > h4 {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Ensure Store Information section and all nested divs are centered */
#store-settings-panel .card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

#store-settings-panel .card > div > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Center divs that contain buttons */
#store-settings-panel .card > div[style*="margin-top"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center inputs, textareas, and selects in store settings panel - Responsive */
#store-settings-panel input:not([type="checkbox"]):not([type="radio"]),
#store-settings-panel textarea,
#store-settings-panel select {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    display: block !important;
    text-align: left !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 1.75vw, 1.25rem) !important;
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
    color: #1a1a2e !important;
    border-radius: clamp(0.5rem, 1vw, 0.75rem) !important;
}

html body.theme-light #store-settings-panel input:not([type="checkbox"]):not([type="radio"]),
html body.theme-light #store-settings-panel textarea,
html body.theme-light #store-settings-panel select {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    background: #ffffff !important;
    color: #111827 !important;
}

/* Center checkbox and radio inputs */
#store-settings-panel input[type="checkbox"],
#store-settings-panel input[type="radio"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Center labels in store settings panel - Responsive */
#store-settings-panel label {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Center buttons in store settings panel - Responsive */
#store-settings-panel button,
#store-settings-panel .primary,
#store-settings-panel .small,
#store-settings-panel .danger {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.875rem, 1.75vw, 1.5rem) !important;
    min-height: clamp(2rem, 4vw, 2.75rem) !important;
    box-sizing: border-box !important;
}

/* Center button groups in store settings panel */
#store-settings-panel .card > div[style*="display:flex"],
#store-settings-panel .card > div[style*="display: flex"] {
    justify-content: center !important;
}

/* Center tables in store settings panel */
#store-settings-panel table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* Table container in store settings */
#store-settings-panel .card > div[style*="overflow-x"],
#store-settings-panel .card > div[style*="overflow"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Ensure the card allows table to be fully visible */
#store-settings-panel .card {
    overflow: visible !important;
    min-width: 0 !important;
}

/* Table container - allow horizontal scrolling if table is wide */
#store-settings-panel .card > div[style*="overflow-x"],
#store-settings-panel .card > div[style*="overflow"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    position: relative !important;
}

/* Ensure table is fully visible - Responsive */
#store-settings-panel .card table {
    width: 100% !important;
    min-width: clamp(600px, 90vw, 900px) !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    display: table !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
}

/* Ensure table cells are visible and not cut off - larger size - Responsive */
#store-settings-panel .card table td,
#store-settings-panel .card table th {
    white-space: nowrap !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem) !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
}

/* Table headers - larger and bolder - Responsive */
#store-settings-panel .card table th {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    font-weight: bold !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Table rows - larger - Responsive */
#store-settings-panel .card table td {
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem) !important;
}

/* Light theme - even larger table - Responsive */
html body.theme-light #store-settings-panel .card table {
    min-width: clamp(700px, 95vw, 1000px) !important;
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
}

html body.theme-light #store-settings-panel .card table th {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    padding: clamp(0.7rem, 1.3vw, 0.95rem) clamp(0.8rem, 1.6vw, 1.2rem) !important;
}

html body.theme-light #store-settings-panel .card table td {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    padding: clamp(0.7rem, 1.3vw, 0.95rem) clamp(0.8rem, 1.6vw, 1.2rem) !important;
}

/* Light theme - table container */
html body.theme-light #store-settings-panel .card > div[style*="overflow-x"],
html body.theme-light #store-settings-panel .card > div[style*="overflow"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure table is fully visible and scrollable */
#store-settings-panel .card table {
    min-width: 100% !important;
    display: table !important;
}

/* Light theme - table uses 800px max-width */
html body.theme-light #store-settings-panel .card > div[style*="overflow-x"] {
    max-width: 800px !important;
}

/* Ensure grid layouts are centered - Responsive */
#store-settings-panel .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    max-width: clamp(500px, 85vw, 600px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

html body.theme-light #store-settings-panel .grid-2 {
    max-width: clamp(600px, 90vw, 800px) !important;
}

/* Center grid items */
#store-settings-panel .grid-2 > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Center divs with inline flex styles */
#store-settings-panel div[style*="display:flex"],
#store-settings-panel div[style*="display: flex"] {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Center info messages */
#store-settings-panel .info {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center small text and other elements */
#store-settings-panel small,
#store-settings-panel p {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================
   Store Settings Accordion
   ========================= */
#store-settings-panel .settings-accordion {
    width: 100% !important;
    max-width: clamp(600px, 90vw, 1100px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* Page Navigation */
#store-settings-panel .settings-page-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) 0 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    flex-shrink: 0 !important;
}

html body.theme-light #store-settings-panel .settings-page-nav {
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

#store-settings-panel .settings-page-btn {
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #1a1a1a !important;
    border-radius: clamp(0.5rem, 1vw, 0.75rem) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

html body.theme-light #store-settings-panel .settings-page-btn {
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #111827 !important;
}

#store-settings-panel .settings-page-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html body.theme-light #store-settings-panel .settings-page-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}

#store-settings-panel .settings-page-btn.active {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
}

html body.theme-light #store-settings-panel .settings-page-btn.active {
    background: rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.7) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Settings Pages */
#store-settings-panel .settings-page {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    animation: fadeIn 0.3s ease-in-out !important;
    min-height: 0 !important;
    overflow: visible !important;
}

#store-settings-panel .settings-page[style*="display: none"],
#store-settings-panel .settings-page[style*="display:none"] {
    display: none !important;
}

/* Ensure settings content area is scrollable */
#store-settings-panel .store-settings-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    height: auto !important;
}

/* Store Settings Page (full page, not panel) - prevent any right-side cutoff on Android/narrow viewports */
body.page-store-settings #app,
#app:has(.store-settings-page-content) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.page-store-settings {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
.store-settings-page-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: clamp(1rem, 2vw, 2rem) !important;
    width: 100% !important;
    max-width: min(100%, 100vw) !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

.store-settings-page-content .settings-page-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    pointer-events: none !important;
}

.store-settings-page-content .settings-page-nav .settings-page-arrow {
    pointer-events: auto !important;
    position: absolute !important;
    bottom: clamp(0.5rem, 1.5vw, 1rem) !important;
}

.store-settings-page-content .settings-page-nav .settings-page-arrow:first-child {
    left: clamp(0.5rem, 1.5vw, 1rem) !important;
}

.store-settings-page-content .settings-page-nav .settings-page-arrow:last-child {
    right: clamp(0.5rem, 1.5vw, 1rem) !important;
}

html body.theme-light .store-settings-page-content .settings-page-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Arrow-only page nav buttons (left/right) */
.store-settings-page-content .settings-page-nav .settings-page-arrow {
    min-width: clamp(2.5rem, 5vw, 3.5rem) !important;
    width: clamp(2.5rem, 5vw, 3.5rem) !important;
    height: clamp(2.5rem, 5vw, 3.5rem) !important;
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    padding: 0 !important;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.store-settings-page-content .store-settings-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: min(clamp(600px, 90vw, 1100px), calc(100vw - 2rem)) !important;
    margin: 0 auto !important;
    padding-bottom: clamp(4.5rem, 10vw, 6rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

html body.theme-light .store-settings-page-content .store-settings-content {
    background: transparent !important;
}

/* Ensure all settings sections are visible on the page and centered; never overflow */
.store-settings-page-content .settings-section {
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Glass morphism for settings sections on store settings page */
.store-settings-page-content details.settings-section {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: clamp(1rem, 2vw, 1.5rem) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
}

html body.theme-light .store-settings-page-content details.settings-section {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.store-settings-page-content .settings-section-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: clamp(0.875rem, 1.75vw, 1.25rem) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    padding: clamp(1.5rem, 3vw, 2rem) !important;
    margin: clamp(1rem, 2vw, 1.5rem) 0 !important;
}

html body.theme-light .store-settings-page-content .settings-section-card {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Center align all content within settings page */
.store-settings-page-content .settings-accordion {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.store-settings-page-content .settings-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Ensure page 2 is hidden by default */
.store-settings-page-content #settings-page-2 {
    display: none !important;
}

/* Ensure page 1 is visible by default */
.store-settings-page-content #settings-page-1 {
    display: flex !important;
}

/* Center all cards and content with glass morphism - Reduced by 50%; never overflow viewport */
.store-settings-page-content .card,
.store-settings-page-content .settings-section-card {
    width: 100% !important;
    max-width: min(clamp(250px, 42.5vw, 450px), 100%) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(0.25rem, 0.5vw, 0.375rem) !important;
    margin-bottom: clamp(0.25rem, 0.5vw, 0.375rem) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: clamp(0.4375rem, 0.875vw, 0.625rem) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) !important;
    box-sizing: border-box !important;
}

html body.theme-light .store-settings-page-content .card,
html body.theme-light .store-settings-page-content .settings-section-card {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Light theme styles for content directly inside details */
html body.theme-light .store-settings-page-content .settings-section > div:not(.settings-section-summary) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Center all divs inside cards with proper spacing - Reduced by 50% */
/* Style content directly inside details elements (not in nested cards) */
.store-settings-page-content .settings-section > div:not(.settings-section-summary) {
    width: 100% !important;
    max-width: min(clamp(250px, 42.5vw, 450px), 100%) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) !important;
    box-sizing: border-box !important;
}

/* Widen More Settings panel (Low Stock Threshold, Test Email Configuration, etc.) */
.store-settings-page-content #more-settings-content {
    max-width: min(clamp(640px, 92vw, 1100px), 100%) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Allow settings-wide to expand beyond normal constraints for tables - but never overflow viewport */
.store-settings-page-content .settings-section > div.settings-wide {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(0.75rem, 1.5vw, 1rem) !important;
    padding-right: clamp(0.75rem, 1.5vw, 1rem) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.store-settings-page-content .card > div,
.store-settings-page-content .settings-section-card > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    padding: clamp(0.25rem, 0.5vw, 0.375rem) !important;
}

/* Center all inputs, labels, buttons, and text */
.store-settings-page-content label,
.store-settings-page-content input,
.store-settings-page-content textarea,
.store-settings-page-content select,
.store-settings-page-content button,
.store-settings-page-content .help-text,
.store-settings-page-content small {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.store-settings-page-content label {
    margin-bottom: clamp(0.25rem, 0.5vw, 0.375rem) !important;
    margin-top: clamp(0.375rem, 0.75vw, 0.5rem) !important;
    font-size: clamp(0.65rem, 1.2vw, 0.8rem) !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
}

html body.theme-light .store-settings-page-content label {
    color: #1a1a2e !important;
    font-weight: 500 !important;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem) !important;
}

.store-settings-page-content .help-text,
.store-settings-page-content small {
    font-size: clamp(0.55rem, 1vw, 0.7rem) !important;
    line-height: 1.4 !important;
    margin-top: clamp(0.15rem, 0.3vw, 0.25rem) !important;
    margin-bottom: clamp(0.15rem, 0.3vw, 0.25rem) !important;
    display: block !important;
    width: 100% !important;
}

html body.theme-light .store-settings-page-content .help-text,
html body.theme-light .store-settings-page-content small {
    color: #4b5563 !important;
    opacity: 0.9 !important;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem) !important;
}

/* Larger font for "Email address to receive low-stock alerts" in light theme */
html body.theme-light .store-settings-page-content #notification-email + .help-text {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
}

.store-settings-page-content input,
.store-settings-page-content textarea,
.store-settings-page-content select {
    display: block !important;
    width: clamp(240px, 50vw, 420px) !important;
    max-width: clamp(240px, 50vw, 420px) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.75rem) !important;
    margin: clamp(0.25rem, 0.5vw, 0.375rem) auto !important;
    border-radius: clamp(0.375rem, 0.75vw, 0.5rem) !important;
    min-height: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-size: clamp(0.875rem, 1.5vw, 1.05rem) !important;
    box-sizing: border-box !important;
}

html body.theme-light .store-settings-page-content input,
html body.theme-light .store-settings-page-content textarea,
html body.theme-light .store-settings-page-content select {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.75rem) !important;
    margin: clamp(0.25rem, 0.5vw, 0.375rem) auto !important;
    border-radius: clamp(0.375rem, 0.75vw, 0.5rem) !important;
    min-height: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-size: clamp(0.95rem, 1.65vw, 1.15rem) !important;
    color: #111827 !important;
    width: clamp(240px, 50vw, 420px) !important;
    max-width: clamp(240px, 50vw, 420px) !important;
    box-sizing: border-box !important;
}

html body.theme-light .store-settings-page-content textarea {
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    width: clamp(240px, 50vw, 420px) !important;
    max-width: clamp(240px, 50vw, 420px) !important;
}

.store-settings-page-content textarea {
    width: clamp(240px, 50vw, 420px) !important;
    max-width: clamp(240px, 50vw, 420px) !important;
}

.store-settings-page-content input[type="checkbox"],
.store-settings-page-content input[type="radio"] {
    width: 0.875rem !important;
    min-width: 0.875rem !important;
    height: 0.875rem !important;
    min-height: 0.875rem !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* Light theme: keep checkboxes and radios square (override wide input styles) */
html body.theme-light .store-settings-page-content input[type="checkbox"],
html body.theme-light .store-settings-page-content input[type="radio"] {
    width: 0.875rem !important;
    min-width: 0.875rem !important;
    max-width: 0.875rem !important;
    height: 0.875rem !important;
    min-height: 0.875rem !important;
    padding: 0 !important;
}

html body.theme-light .store-settings-page-content input:focus,
html body.theme-light .store-settings-page-content textarea:focus,
html body.theme-light .store-settings-page-content select:focus {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: #111827 !important;
}

.store-settings-page-content input:focus,
.store-settings-page-content textarea:focus,
.store-settings-page-content select:focus {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-color: rgba(59, 130, 246, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    outline: none !important;
    transform: translateY(-0.5px) !important;
    transition: all 0.2s ease !important;
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.75rem) !important;
    font-size: clamp(0.875rem, 1.5vw, 1.05rem) !important;
}

.store-settings-page-content button {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(59, 130, 246, 0.3) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(1rem, 2vw, 1.5rem) !important;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    min-height: clamp(2.25rem, 4.5vw, 3rem) !important;
    border-radius: clamp(0.5rem, 1vw, 0.75rem) !important;
}

.store-settings-page-content button:hover {
    background: rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
}

.store-settings-page-content button.primary {
    background: rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

.store-settings-page-content button.primary:hover {
    background: rgba(59, 130, 246, 0.5) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
}

html body.theme-light .store-settings-page-content button {
    background: rgba(59, 130, 246, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #111827 !important;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(1rem, 2vw, 1.5rem) !important;
    min-height: clamp(2.25rem, 4.5vw, 3rem) !important;
}

html body.theme-light .store-settings-page-content button:hover {
    background: rgba(59, 130, 246, 0.35) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Center grid layouts */
.store-settings-page-content .grid-2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(0.75rem, 1.5vw, 1rem) !important;
    justify-items: center !important;
    align-items: start !important;
}

/* Center settings actions */
.store-settings-page-content .settings-actions,
.store-settings-page-content .settings-actions-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    flex-wrap: wrap !important;
}

/* Center tables - table scrolls inside this box so the page is never cut off */
.store-settings-page-content .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    contain: layout !important;
}

/* Ensure table-scroll inside settings-wide has no padding constraints */
.store-settings-page-content .settings-wide .table-scroll {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.store-settings-page-content table {
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: clamp(0.875rem, 1.75vw, 1.25rem) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    overflow: hidden !important;
}

/* Users table - wide; scrolls horizontally inside .table-scroll on narrow viewports so page is never cut off */
.store-settings-page-content .users-table {
    width: 100% !important;
    min-width: 800px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

html body.theme-light .store-settings-page-content .users-table {
    min-width: 800px !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.store-settings-page-content .users-table th,
.store-settings-page-content .users-table td {
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.6rem, 1.2vw, 0.9rem) !important;
}

.store-settings-page-content .users-table thead th {
    font-weight: 800 !important;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem) !important;
    padding: clamp(0.45rem, 0.9vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.9rem) !important;
}

/* Reduce button sizes in users table */
.store-settings-page-content .users-table button.small {
    padding: clamp(0.25rem, 0.5vw, 0.4rem) clamp(0.5rem, 1vw, 0.75rem) !important;
    font-size: clamp(0.65rem, 1.2vw, 0.8rem) !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Reduce font size for table cell content */
.store-settings-page-content .users-table td {
    font-size: clamp(0.75rem, 1.4vw, 0.95rem) !important;
}

/* Store-settings tables: same layby-style in light theme (inherits body.theme-light table) */
html body.theme-light .store-settings-page-content table {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

html body.theme-light .store-settings-page-content .users-table thead th {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

html body.theme-light .store-settings-page-content .users-table td {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html body.theme-light .store-settings-page-content .users-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Table header and cell font sizes in light theme (buttons unchanged) */
html body.theme-light .store-settings-page-content .users-table thead th {
    font-size: clamp(1rem, 1.75vw, 1.2rem) !important;
    padding: clamp(0.45rem, 0.9vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.9rem) !important;
}

html body.theme-light .store-settings-page-content .users-table td {
    font-size: clamp(0.9rem, 1.55vw, 1.05rem) !important;
}

/* Reduce button sizes in users table for light theme */
html body.theme-light .store-settings-page-content .users-table button.small {
    padding: clamp(0.25rem, 0.5vw, 0.4rem) clamp(0.5rem, 1vw, 0.75rem) !important;
    font-size: clamp(0.65rem, 1.2vw, 0.8rem) !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
    color: #1a1a1a !important;
}

/* Actions column: arrange Edit, Activate/Deactivate, Delete horizontally in light theme */
html body.theme-light .store-settings-page-content .users-table tbody tr td:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

html body.theme-light .store-settings-page-content .users-table tbody tr:last-child td {
    border-bottom: none !important;
}

.store-settings-page-content table thead {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
}

html body.theme-light .store-settings-page-content table thead {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
}

html body.theme-light .store-settings-page-content table thead th {
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

html body.theme-light .store-settings-page-content table td {
    color: #1a1a2e !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

html body.theme-light .store-settings-page-content table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

.store-settings-page-content table tbody tr {
    transition: background 0.2s ease !important;
}

/* Center info messages */
.store-settings-page-content .info {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(59, 130, 246, 0.15) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: clamp(0.5rem, 1vw, 0.75rem) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) !important;
}

html body.theme-light .store-settings-page-content .info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
}

/* Factory reset: larger warning text */
.store-settings-page-content .settings-danger .help-text {
    font-size: clamp(0.95rem, 1.65vw, 1.15rem) !important;
}

html body.theme-light .store-settings-page-content .settings-danger .help-text {
    font-size: clamp(1rem, 1.75vw, 1.2rem) !important;
}

/* Hide empty bluish message box below Reset to Factory Settings */
.store-settings-page-content #reset-message.info:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hide empty bluish message box below Process Pending Changes button */
.store-settings-page-content #backup-message.info:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hide empty bluish message box below Add User button */
.store-settings-page-content #cashier-message.info:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Center details sections - glass morphism already applied above */
.store-settings-page-content details.settings-section > summary {
    text-align: center !important;
    justify-content: center !important;
}

/* Center subcards with glass morphism */
.store-settings-page-content .settings-subcard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: clamp(0.75rem, 1.5vw, 1rem) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin: clamp(0.75rem, 1.5vw, 1rem) 0 !important;
}

html body.theme-light .store-settings-page-content .settings-subcard {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
}

/* Center subtitles and headings */
.store-settings-page-content .settings-subtitle,
.store-settings-page-content .settings-subheading,
.store-settings-page-content h4 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
}

html body.theme-light .store-settings-page-content .settings-subtitle,
html body.theme-light .store-settings-page-content .settings-subheading,
html body.theme-light .store-settings-page-content h4 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
}

html body.theme-light .store-settings-page-content details.settings-section > summary {
    font-size: clamp(1.1rem, 1.9vw, 1.35rem) !important;
}

/* Checkbox label: text on top, tickbox below; center the block */
.store-settings-page-content .checkbox-label {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.35rem, 0.7vw, 0.5rem) !important;
}

.store-settings-page-content .settings-inline {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Ensure even spacing between all elements */
.store-settings-page-content .settings-section + .settings-section {
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}

.store-settings-page-content .card > div + div {
    margin-top: clamp(0.75rem, 1.5vw, 1rem) !important;
}

/* Ensure the accordion inside store-settings-content can expand fully */
#store-settings-panel .store-settings-content .settings-accordion {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure all sections are visible on their respective pages */
#store-settings-panel .settings-page details.settings-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Make sure page navigation stays visible */
#store-settings-panel .settings-page-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding-top: clamp(0.75rem, 1.5vw, 1rem) !important;
    padding-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
}

html body.theme-light #store-settings-panel .settings-page-nav {
    background: rgba(255, 255, 255, 0.95) !important;
}

#store-settings-panel details.settings-section {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* Store Settings page: simple flat UI for Android / mobile – no glassmorphism, max visibility */
@media (max-width: 768px) {
    .store-settings-page-content {
        padding: 12px 16px 12px 16px !important;
        box-sizing: border-box !important;
        background: #f5f5f5 !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content {
        background: rgba(30, 35, 50, 0.97) !important;
    }
    .store-settings-page-content .store-settings-content {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 4rem !important;
        background: transparent !important;
    }
    /* Simple flat panels – no blur, no glass */
    .store-settings-page-content .card,
    .store-settings-page-content .settings-section-card {
        max-width: 100% !important;
        padding: 0.65rem 0.85rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .card,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .settings-section-card {
        background: #374151 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .store-settings-page-content .settings-section > div:not(.settings-section-summary) {
        padding: 0.5rem 0.75rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
    }
    .store-settings-page-content details.settings-section {
        padding: 0 !important;
        margin-bottom: 0.75rem !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content details.settings-section {
        background: #374151 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .store-settings-page-content details.settings-section > summary {
        padding: 0.6rem 0.85rem !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        font-size: 0.95rem !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content details.settings-section > summary {
        background: rgba(0, 0, 0, 0.2) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
        color: #f3f4f6 !important;
    }
    .store-settings-page-content .settings-section-card {
        padding: 0.6rem 0.85rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 6px !important;
        background: #fafafa !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .settings-section-card {
        background: #4b5563 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    .store-settings-page-content .card > div,
    .store-settings-page-content .settings-section-card > div {
        padding: 0.3rem 0.4rem !important;
        gap: 0.4rem !important;
    }
    .store-settings-page-content .settings-subcard {
        padding: 0.55rem 0.75rem !important;
        margin: 0.4rem 0 !important;
        border-radius: 6px !important;
        background: #f0f0f0 !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .settings-subcard {
        background: #4b5563 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .store-settings-page-content label {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
        margin-top: 0.35rem !important;
        color: #1f2937 !important;
        font-weight: 600 !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content label {
        color: #e5e7eb !important;
    }
    html body.theme-light .store-settings-page-content label {
        font-size: 0.85rem !important;
        color: #1f2937 !important;
    }
    .store-settings-page-content .help-text,
    .store-settings-page-content small {
        font-size: 0.75rem !important;
        margin-top: 0.15rem !important;
        margin-bottom: 0.15rem !important;
        color: #4b5563 !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .help-text,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content small {
        color: #d1d5db !important;
    }
    html body.theme-light .store-settings-page-content .help-text,
    html body.theme-light .store-settings-page-content small {
        font-size: 0.75rem !important;
        color: #4b5563 !important;
    }
    .store-settings-page-content input,
    .store-settings-page-content textarea,
    .store-settings-page-content select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem 0.6rem !important;
        min-height: 2.25rem !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        color: #111827 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content input,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content textarea,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content select {
        background: #1f2937 !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #f9fafb !important;
    }
    html body.theme-light .store-settings-page-content input,
    html body.theme-light .store-settings-page-content textarea,
    html body.theme-light .store-settings-page-content select {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.6rem !important;
        min-height: 2.25rem !important;
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        color: #111827 !important;
    }
    .store-settings-page-content textarea {
        min-height: 2.5rem !important;
    }
    .store-settings-page-content button,
    .store-settings-page-content .primary,
    .store-settings-page-content .small,
    .store-settings-page-content .danger {
        font-size: 0.88rem !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 2.25rem !important;
        border-radius: 6px !important;
        background: #3b82f6 !important;
        border: 1px solid #2563eb !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    .store-settings-page-content button.small,
    .store-settings-page-content .small {
        background: #6b7280 !important;
        border-color: #4b5563 !important;
    }
    .store-settings-page-content button.primary {
        background: #3b82f6 !important;
        border-color: #2563eb !important;
    }
    .store-settings-page-content button.danger,
    .store-settings-page-content .danger {
        background: #dc2626 !important;
        border-color: #b91c1c !important;
    }
    html body.theme-light .store-settings-page-content button {
        font-size: 0.88rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .store-settings-page-content .settings-subtitle,
    .store-settings-page-content .settings-subheading,
    .store-settings-page-content h4 {
        font-size: 0.92rem !important;
        color: #1f2937 !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .settings-subtitle,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .settings-subheading,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content h4 {
        color: #e5e7eb !important;
    }
    html body.theme-light .store-settings-page-content .settings-subtitle,
    html body.theme-light .store-settings-page-content .settings-subheading,
    html body.theme-light .store-settings-page-content h4 {
        font-size: 0.92rem !important;
        color: #1f2937 !important;
    }
    html body.theme-light .store-settings-page-content details.settings-section > summary {
        font-size: 0.95rem !important;
        color: #1f2937 !important;
    }
    .store-settings-page-content .settings-accordion {
        gap: 0.5rem !important;
    }
    .store-settings-page-content .settings-page {
        gap: 0.5rem !important;
    }
    .store-settings-page-content .settings-section + .settings-section {
        margin-top: 0.6rem !important;
    }
    .store-settings-page-content .card > div + div {
        margin-top: 0.4rem !important;
    }
    .store-settings-page-content #more-settings-content {
        max-width: 100% !important;
    }
    .store-settings-page-content .settings-section > div.settings-wide {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .store-settings-page-content .table-scroll {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .store-settings-page-content table,
    .store-settings-page-content .users-table {
        font-size: 0.8rem !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content table,
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .users-table {
        background: #374151 !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    .store-settings-page-content .users-table thead th {
        background: #f3f4f6 !important;
        color: #1f2937 !important;
        font-size: 0.82rem !important;
        padding: 0.45rem 0.55rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .users-table thead th {
        background: #4b5563 !important;
        color: #f9fafb !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
    .store-settings-page-content .users-table th,
    .store-settings-page-content .users-table td {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.8rem !important;
    }
    .store-settings-page-content .users-table td {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    body:not(.theme-light):not(.theme-classic) .store-settings-page-content .users-table td {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
    .store-settings-page-content .users-table button.small {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.45rem !important;
    }
    html body.theme-light .store-settings-page-content .users-table thead th {
        font-size: 0.82rem !important;
        background: #f3f4f6 !important;
        color: #1f2937 !important;
    }
    html body.theme-light .store-settings-page-content .users-table td {
        font-size: 0.8rem !important;
    }
    html body.theme-light .store-settings-page-content .users-table button.small {
        font-size: 0.75rem !important;
    }
    .store-settings-page-content .info {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0.85rem !important;
    }
    .store-settings-page-content .settings-page-nav .settings-page-arrow {
        min-width: 2.5rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        font-size: 1.25rem !important;
    }
    .store-settings-page-content .settings-page-nav .settings-page-arrow:first-child {
        left: 16px !important;
    }
    .store-settings-page-content .settings-page-nav .settings-page-arrow:last-child {
        right: 16px !important;
    }
    .store-settings-page-content .settings-page-nav .settings-page-arrow {
        background: #374151 !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: none !important;
    }
    .store-settings-page-content .settings-page-nav .settings-page-arrow.active {
        background: #3b82f6 !important;
        border-color: #2563eb !important;
    }
}

html body.theme-light #store-settings-panel details.settings-section {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

#store-settings-panel details.settings-section > summary {
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.8rem, 1.6vw, 1.125rem) !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    text-align: left !important;
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    box-sizing: border-box !important;
}

#store-settings-panel details.settings-section > summary::-webkit-details-marker {
    display: none !important;
}

#store-settings-panel details.settings-section > summary::after {
    content: "▾";
    opacity: 0.8;
    font-weight: 800;
}

#store-settings-panel details.settings-section[open] > summary::after {
    content: "▴";
}

#store-settings-panel details.settings-section[open] > summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body.theme-light #store-settings-panel details.settings-section[open] > summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Ensure content inside open details is fully visible */
#store-settings-panel details.settings-section[open] {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
}

#store-settings-panel details.settings-section[open] > .card,
#store-settings-panel details.settings-section[open] > div {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) !important;
    margin: 0 !important;
}

/* Ensure the content area of details elements can expand fully */
#store-settings-panel details.settings-section > .card.settings-section-card,
#store-settings-panel details.settings-section > div > .card.settings-section-card {
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Re-enable padding inside the new section cards (override earlier "#store-settings-panel.floating-panel .card { padding:0 }") - Responsive */
#store-settings-panel.floating-panel .card.settings-section-card,
#store-settings-panel .card.settings-section-card,
#app #store-settings-panel .card.settings-section-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

/* Settings inline - for inline elements like checkboxes */
#store-settings-panel .settings-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* Ensure all divs inside settings-section-card are visible */
#store-settings-panel .card.settings-section-card > div {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    margin-top: clamp(0.75rem, 1.5vw, 1rem) !important;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) !important;
    box-sizing: border-box !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure the div containing the email input is fully visible */
#store-settings-panel .card.settings-section-card > div:has(#notification-email),
#store-settings-panel .card.settings-section-card > div:has(input[type="email"]),
#store-settings-panel .card.settings-section-card > div > #notification-email,
#store-settings-panel .card.settings-section-card > div > input[type="email"] {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: clamp(0.5rem, 1vw, 0.75rem) 0 !important;
}

/* Direct targeting for email input container */
#store-settings-panel .card.settings-section-card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

/* Ensure input appears between label and help text */
#store-settings-panel .card.settings-section-card > div > label {
    order: 1 !important;
}

#store-settings-panel .card.settings-section-card > div > input,
#store-settings-panel .card.settings-section-card > div > textarea,
#store-settings-panel .card.settings-section-card > div > select {
    order: 2 !important;
    flex-shrink: 0 !important;
}

#store-settings-panel .card.settings-section-card > div > small,
#store-settings-panel .card.settings-section-card > div > .help-text {
    order: 3 !important;
}

#store-settings-panel .card.settings-section-card > div:last-child {
    margin-bottom: 0 !important;
}

/* Ensure labels, inputs, and help text are fully visible */
#store-settings-panel .card.settings-section-card label,
#store-settings-panel .card.settings-section-card input,
#store-settings-panel .card.settings-section-card textarea,
#store-settings-panel .card.settings-section-card select,
#store-settings-panel .card.settings-section-card small,
#store-settings-panel .card.settings-section-card .help-text {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Specifically ensure email input is visible and properly sized */
#store-settings-panel #notification-email,
#store-settings-panel input[type="email"],
#store-settings-panel input[name="notification-email"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: clamp(2.5rem, 5vw, 3.5rem) !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 1.75vw, 1.25rem) !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    background: #ffffff !important;
    color: #1a1a2e !important;
    border-radius: clamp(0.5rem, 1vw, 0.75rem) !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    line-height: 1.5 !important;
}

html body.theme-light #store-settings-panel #notification-email,
html body.theme-light #store-settings-panel input[type="email"],
html body.theme-light #store-settings-panel input[name="notification-email"] {
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    background: #ffffff !important;
    color: #111827 !important;
}

/* Sub-cards inside sections - Responsive */
#store-settings-panel .settings-subcard {
    margin-top: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    border-radius: clamp(0.6rem, 1.2vw, 0.875rem) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
}

html body.theme-light #store-settings-panel .settings-subcard {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#store-settings-panel .settings-subtitle {
    display: block !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

#store-settings-panel .help-text,
#store-settings-panel small.help-text,
#store-settings-panel small {
    font-size: clamp(0.75rem, 1.4vw, 0.95rem) !important;
    line-height: 1.5 !important;
    opacity: 0.9 !important;
    display: block !important;
    visibility: visible !important;
    margin-top: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-align: center !important;
    padding: 0 !important;
}

html body.theme-light #store-settings-panel .help-text,
html body.theme-light #store-settings-panel small.help-text,
html body.theme-light #store-settings-panel small {
    opacity: 0.95 !important;
}

/* Checkbox label should be properly centered + inline */
#store-settings-panel .checkbox-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) !important;
    margin: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
    box-sizing: border-box !important;
}

#store-settings-panel .checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Action button rows - Responsive */
#store-settings-panel .settings-actions {
    margin-top: clamp(0.6rem, 1.2vw, 0.875rem) !important;
}

#store-settings-panel .settings-actions-row {
    display: flex !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

#store-settings-panel .settings-actions-row > button {
    margin: 0 !important;
}

/* Wide sections (tables / backup) */
#store-settings-panel.floating-panel .card.settings-wide,
#store-settings-panel .card.settings-wide,
#app #store-settings-panel .card.settings-wide {
    max-width: 100% !important;
    width: 100% !important;
}

html body.theme-light #store-settings-panel.floating-panel .card.settings-wide,
html body.theme-light #store-settings-panel .card.settings-wide,
html body.theme-light #app #store-settings-panel .card.settings-wide {
    max-width: 1100px !important;
}

/* Table scroll container */
#store-settings-panel .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 10px !important;
    display: block !important;
}

#store-settings-panel .users-table {
    width: 100% !important;
    min-width: clamp(600px, 90vw, 900px) !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
}

html body.theme-light #store-settings-panel .users-table {
    min-width: clamp(700px, 95vw, 1000px) !important;
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
}

#store-settings-panel .users-table th,
#store-settings-panel .users-table td {
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    padding: clamp(0.6rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem) !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem) !important;
}

#store-settings-panel .users-table thead th {
    font-weight: 800 !important;
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
}

html body.theme-light #store-settings-panel .users-table th,
html body.theme-light #store-settings-panel .users-table td {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    padding: clamp(0.7rem, 1.3vw, 0.95rem) clamp(0.8rem, 1.6vw, 1.2rem) !important;
}

html body.theme-light #store-settings-panel .users-table thead th {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
}

#store-settings-panel .table-loading {
    text-align: center !important;
    padding: 16px !important;
    opacity: 0.7 !important;
}

#store-settings-panel .settings-subheading {
    margin: 18px 0 8px 0 !important;
}

/* Danger block */
#store-settings-panel .settings-danger {
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border-radius: 14px !important;
}

html body.theme-light #store-settings-panel .settings-danger {
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Light theme: force dark text even if some inline styles still use white */
html body.theme-light #store-settings-panel [style*="color:rgba(255"],
html body.theme-light #store-settings-panel [style*="color: rgba(255"],
html body.theme-light #store-settings-panel [style*="color:#fff"],
html body.theme-light #store-settings-panel [style*="color: #fff"],
html body.theme-light #store-settings-panel [style*="color:#ffffff"],
html body.theme-light #store-settings-panel [style*="color: #ffffff"],
html body.theme-light #store-settings-panel [style*="color:white"],
html body.theme-light #store-settings-panel [style*="color: white"] {
    color: #111827 !important;
}

html body.theme-light #store-settings-panel code {
    background: rgba(17, 24, 39, 0.08) !important;
    color: #111827 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
}

/* Accordion controls More Settings visibility; don't force-hide the content */
#store-settings-panel details.settings-section #more-settings-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Center strong elements that are direct children */
#store-settings-panel .card > strong,
#store-settings-panel .card > div > strong {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center h3 and h4 headings - Responsive */
#store-settings-panel h3,
#store-settings-panel h4 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: clamp(500px, 85vw, 600px) !important;
    font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
}

/* Override inline styles on h3 */
#store-settings-panel h3[style*="margin-top"] {
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Light theme - h3 and h4 use responsive max-width */
html body.theme-light #store-settings-panel h3,
html body.theme-light #store-settings-panel h4 {
    max-width: clamp(600px, 90vw, 800px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.25rem, 2.5vw, 1.875rem) !important;
}

/* Ensure all divs inside cards are centered - Responsive */
#store-settings-panel .card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: clamp(500px, 85vw, 600px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.theme-light #store-settings-panel .card > div {
    max-width: clamp(600px, 90vw, 800px) !important;
}

html body.theme-light #summary-report-panel #summary-report-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

html body.theme-light #ai-insights-panel button {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Make all text white in AI insights panel for light theme */
html body.theme-light #ai-insights-panel,
html body.theme-light #ai-insights-panel *,
html body.theme-light #ai-insights-panel h2,
html body.theme-light #ai-insights-panel h3,
html body.theme-light #ai-insights-panel p,
html body.theme-light #ai-insights-panel div,
html body.theme-light #ai-insights-panel span,
html body.theme-light #ai-insights-panel label,
html body.theme-light #ai-insights-panel .floating-panel-header h2,
html body.theme-light #ai-insights-panel #ai-insights-content,
html body.theme-light #ai-insights-panel #ai-insights-content *,
html body.theme-light #ai-insights-panel #ai-summary-stats,
html body.theme-light #ai-insights-panel #ai-summary-stats *,
html body.theme-light #ai-insights-panel #ai-insights-text,
html body.theme-light #ai-insights-panel #ai-top-products,
html body.theme-light #ai-insights-panel #ai-top-products *,
html body.theme-light #ai-insights-panel #ai-chat-panel,
html body.theme-light #ai-insights-panel #ai-chat-panel *,
html body.theme-light #ai-insights-panel #ai-chat-messages,
html body.theme-light #ai-insights-panel #ai-chat-messages * {
    color: #1a1a1a !important;
}

/* Override any black text colors */
html body.theme-light #ai-insights-panel [style*="color:#1a1a2e"],
html body.theme-light #ai-insights-panel [style*="color: #1a1a2e"],
html body.theme-light #ai-insights-panel [style*="color:rgba(26, 26, 46"],
html body.theme-light #ai-insights-panel [style*="color: rgba(26, 26, 46"] {
    color: #1a1a1a !important;
}

html body.theme-light #ai-insights-panel #ai-chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
}

html body.theme-light #ai-insights-panel #ai-chat-panel * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Restore login card to its original position in light theme */
body.theme-light #login-screen .card {
    position: static !important;
    margin: 24px auto !important;
    max-width: 360px !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Withdrawal Modal - Light Theme - Almost fit the whole screen */
body.theme-light #withdrawal-modal {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100vh - 8px) !important;
    height: calc(100vh - 8px) !important;
    min-height: calc(100vh - 8px) !important;
    margin: 0 !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* Override general floating panel constraints */
    position: fixed !important;
}

/* Ensure card inside withdrawal modal doesn't get constrained in all themes */
#withdrawal-modal .card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 8px 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Withdrawal Modal - content should fill nicely when rendered directly on the panel (no nested card) */
#withdrawal-modal #withdrawal-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Water droplets on cards and panels in light theme */
body.theme-light .card::before,
body.theme-light .card::after,
body.theme-light .floating-panel::before,
body.theme-light .floating-panel::after {
    content: '' !important;
    position: absolute !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.7) 100%) !important;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    box-shadow: 0 3px 12px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.9) !important;
    animation: dripDown 3s ease-in-out infinite !important;
    opacity: 0.9 !important;
}

/* First droplet - top left */
body.theme-light .card::before,
body.theme-light .floating-panel::before {
    width: 12px !important;
    height: 18px !important;
    top: 15px !important;
    left: 15% !important;
    animation-delay: 0s !important;
}

/* Second droplet - top center-right */
body.theme-light .card::after,
body.theme-light .floating-panel::after {
    width: 14px !important;
    height: 20px !important;
    top: 20px !important;
    right: 20% !important;
    left: auto !important;
    animation-delay: 1.2s !important;
}

/* Additional droplets using child elements - will be added via JavaScript */
body.theme-light .card .water-droplet,
body.theme-light .floating-panel .water-droplet {
    position: absolute !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.7) 100%) !important;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    box-shadow: 0 3px 12px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.9) !important;
    animation: dripDown 3s ease-in-out infinite !important;
    opacity: 0.9 !important;
    visibility: visible !important;
    display: block !important;
}

/* Water droplet animation - dripping down the card */
@keyframes dripDown {
    0% {
        opacity: 0.3 !important;
        transform: translateY(-3px) scale(0.8) !important;
    }
    2% {
        opacity: 0.8 !important;
        transform: translateY(0) scale(0.95) !important;
    }
    10% {
        opacity: 1 !important;
        transform: translateY(8px) scale(1) !important;
    }
    20% {
        opacity: 1 !important;
        transform: translateY(20px) scale(1) !important;
    }
    40% {
        opacity: 1 !important;
        transform: translateY(60px) scale(0.95) !important;
    }
    70% {
        opacity: 0.95 !important;
        transform: translateY(120px) scale(0.85) !important;
    }
    90% {
        opacity: 0.6 !important;
        transform: translateY(180px) scale(0.6) !important;
    }
    98% {
        opacity: 0.2 !important;
        transform: translateY(210px) scale(0.3) !important;
    }
    100% {
        opacity: 0 !important;
        transform: translateY(220px) scale(0.1) !important;
    }
}

/* Top bar with glassmorphism */
body.theme-light .top-bar {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Inputs with glassmorphism */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    color: #1a1a2e !important;
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
}

/* Buttons with glassmorphism */
body.theme-light button {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #1a1a2e !important;
    transition: all 0.3s ease !important;
}

body.theme-light button:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

body.theme-light button.primary {
    background: rgba(59, 130, 246, 0.3) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #1a1a2e !important;
}

body.theme-light button.primary:hover {
    background: rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.7) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Withdraw Money - make the action button compact and readable */
#btn-process-withdrawal {
    font-size: 16px !important;
    padding: 16px 20px !important;
    line-height: 1.2 !important;
    width: 50% !important;
    margin-left: 60px !important;
    margin-right: auto !important;
    margin-top: 12px !important;
    display: block !important;
}

/* ========== Classic theme: neutral POS, no fancy colors ========== */
body.theme-classic {
    background: #e8e8e8 !important;
    color: #1a1a1a !important;
    animation: none !important;
    font-size: 19px !important;
    line-height: 1.45 !important;
    -webkit-font-smoothing: antialiased !important;
    font-smoothing: antialiased !important;
}

body.theme-classic .card,
body.theme-classic .floating-panel {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

body.theme-classic .top-bar {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-classic input,
body.theme-classic select,
body.theme-classic textarea {
    background: #fff !important;
    border: 1px solid #aaa !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 19px !important;
}

body.theme-classic button {
    background: #f5f5f5 !important;
    border: 1px solid #aaa !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 19px !important;
}

body.theme-classic button.primary {
    background: #4a7dc7 !important;
    border-color: #4a7dc7 !important;
    color: #fff !important;
}

body.theme-classic button.danger {
    background: #c75050 !important;
    border-color: #c75050 !important;
    color: #fff !important;
}

body.theme-classic .floating-icon,
body.theme-classic #search-results,
body.theme-classic .totals {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-classic .shop-name,
body.theme-classic .top-bar * {
    color: #1a1a1a !important;
}

body.theme-classic .floating-panel-header {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
    color: #1a1a1a !important;
}

body.theme-classic .floating-panel-header h2 {
    color: #1a1a1a !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* Classic: ensure labels, headings and list text are readable */
body.theme-classic label,
body.theme-classic h1,
body.theme-classic h2,
body.theme-classic h3,
body.theme-classic p,
body.theme-classic span,
body.theme-classic td,
body.theme-classic th {
    color: #1a1a1a !important;
}

body.theme-classic h1 { font-size: 1.75rem !important; font-weight: 600 !important; }
body.theme-classic h2 { font-size: 1.4rem !important; font-weight: 600 !important; }
body.theme-classic h3 { font-size: 1.25rem !important; font-weight: 600 !important; }
body.theme-classic label { font-weight: 500 !important; }
body.theme-classic .totals,
body.theme-classic .totals * {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* Light theme - white text */
body.theme-light #btn-process-withdrawal {
    color: #1a1a1a !important;
    text-shadow: none !important;
    margin-left: 255px !important;
}

body.theme-light #btn-process-withdrawal:hover {
    color: #1a1a1a !important;
}

/* More vibrant text colors for specific buttons in light theme */
body.theme-light #btn-complete-sale,
body.theme-light #btn-toggle-layby,
body.theme-light #btn-add-new-layby-customer,
body.theme-light #btn-record-layby-payment {
    color: #2563eb !important; /* More vibrant blue */
    text-shadow: 0 2px 4px rgba(37, 99, 235, 0.4) !important;
    font-weight: 700 !important;
}

body.theme-light #btn-complete-sale:hover,
body.theme-light #btn-toggle-layby:hover,
body.theme-light #btn-add-new-layby-customer:hover,
body.theme-light #btn-record-layby-payment:hover {
    color: #1d4ed8 !important; /* Even more vibrant on hover */
    text-shadow: 0 3px 6px rgba(29, 78, 216, 0.5) !important;
}

/* Ensure the dropdown arrow in Layby button is also vibrant */
body.theme-light #btn-toggle-layby #layby-toggle-icon {
    color: #2563eb !important;
    text-shadow: 0 2px 4px rgba(37, 99, 235, 0.4) !important;
}

body.theme-light button.danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

body.theme-light button.danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Floating icons with glassmorphism */
body.theme-light .floating-icon,
body.theme-light #search-results,
body.theme-light .totals {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

/* Labels with better contrast */
body.theme-light label {
    color: #1a1a2e !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Light theme: all tables use same layby-style appearance (glass, dark text) */
body.theme-light table {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

body.theme-light table thead {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
}

body.theme-light table th {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light table td {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Transaction Payment History page - Light theme styling */
body.theme-light #transaction-info,
body.theme-light main > div > div[style*="rgba(59, 130, 246"],
body.theme-light main > div > div[style*="rgba(17, 24, 39"],
body.theme-light main > div > div[style*="background: rgba"] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Payment history table container */
body.theme-light main > div > div[style*="rgba(17, 24, 39, 0.4)"] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* All text white in light theme for transaction payment history page */
body.theme-light #app.screen.active h1,
body.theme-light #app.screen.active h2,
body.theme-light #app.screen.active h3,
body.theme-light #app.screen.active h4,
body.theme-light #app.screen.active h5,
body.theme-light #app.screen.active h6,
body.theme-light #app.screen.active p,
body.theme-light #app.screen.active div,
body.theme-light #app.screen.active span,
body.theme-light #app.screen.active strong,
body.theme-light #app.screen.active label,
body.theme-light #transaction-info,
body.theme-light #transaction-info *,
body.theme-light #transaction-id,
body.theme-light #customer-name,
body.theme-light #product-name,
body.theme-light #total-amount,
body.theme-light #paid-amount,
body.theme-light #balance,
body.theme-light #payment-history-body,
body.theme-light #payment-history-body *,
body.theme-light main h1,
body.theme-light main h2,
body.theme-light main div[style*="background"] * {
    color: #1a1a1a !important;
}

/* Payment history table: same layby-style in light theme */
body.theme-light #payment-history-table thead,
body.theme-light #payment-history-table thead th {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a2e !important;
}

body.theme-light #payment-history-table tbody td {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #payment-history-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Outstanding Debts page - all text white in light theme */
body.theme-light #app.screen.active section h2,
body.theme-light #app.screen.active section h3,
body.theme-light #app.screen.active section h4,
body.theme-light #app.screen.active section h5,
body.theme-light #app.screen.active section h6,
body.theme-light #app.screen.active section p,
body.theme-light #app.screen.active section div,
body.theme-light #app.screen.active section span,
body.theme-light #app.screen.active section label,
body.theme-light #app.screen.active section th,
body.theme-light #app.screen.active section td,
body.theme-light #app.screen.active section button:not(.primary):not(.danger),
body.theme-light #grand-total,
body.theme-light #debts-count {
    color: #1a1a1a !important;
}

/* Debts table: same layby-style in light theme */
body.theme-light #debts-table-container table th,
body.theme-light #debts-table-container table td {
    color: #1a1a2e !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #debts-table-container table thead th {
    color: #1a1a2e !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

body.theme-light #debts-table-container table tbody td {
    color: #1a1a2e !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #debts-table-container table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Outstanding Debts Page - Light Theme - Glassmorphism and styling */
body.theme-light #app.screen.active main section {
    background: transparent !important;
}

/* Grand Total Outstanding panel - glassmorphism in light theme */
body.theme-light #app.screen.active main section > div[style*="background: rgba(239, 68, 68"] {
    background: rgba(239, 68, 68, 0.2) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 2px solid rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Table container - glassmorphism in light theme */
body.theme-light #debts-table-container {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light #debts-table-container table thead {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
}

/* Buttons in outstanding debts page - light theme */
body.theme-light #btn-back-to-layby,
body.theme-light #btn-debts-logout {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1a1a1a !important;
}

body.theme-light #btn-back-to-layby:hover,
body.theme-light #btn-debts-logout:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body.theme-light #btn-debts-logout.danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #1a1a1a !important;
}

body.theme-light #btn-debts-logout.danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Top bar in outstanding debts page - light theme */
body.theme-light #app.screen.active .top-bar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.theme-light #app.screen.active .top-bar > span,
body.theme-light #app.screen.active .shop-name {
    color: #1a1a1a !important;
}

body.theme-light #app.screen.active .top-bar-right {
    color: #1a1a1a !important;
}

/* Outstanding Debts page - all text white in default theme (when no theme class is present) */
/* Default theme = no theme-* class on body */
body:not([class*="theme-"]) #app.screen.active section h2,
body:not([class*="theme-"]) #app.screen.active section h3,
body:not([class*="theme-"]) #app.screen.active section h4,
body:not([class*="theme-"]) #app.screen.active section h5,
body:not([class*="theme-"]) #app.screen.active section h6,
body:not([class*="theme-"]) #app.screen.active section p,
body:not([class*="theme-"]) #app.screen.active section div,
body:not([class*="theme-"]) #app.screen.active section span,
body:not([class*="theme-"]) #app.screen.active section label,
body:not([class*="theme-"]) #app.screen.active section th,
body:not([class*="theme-"]) #app.screen.active section td,
body:not([class*="theme-"]) #app.screen.active section button:not(.primary):not(.danger),
body:not([class*="theme-"]) #debts-table-container,
body:not([class*="theme-"]) #debts-table-container *,
body:not([class*="theme-"]) #debts-body,
body:not([class*="theme-"]) #debts-body *,
body:not([class*="theme-"]) #debts-count {
    color: #1a1a1a !important;
}

/* Grand total should stay red (not black), so keep it red */
body:not([class*="theme-"]) #grand-total {
    color: #ef4444 !important;
}

/* Ensure table headers and cells are white in default theme for outstanding debts */
body:not([class*="theme-"]) #debts-table-container table th,
body:not([class*="theme-"]) #debts-table-container table td {
    color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body:not([class*="theme-"]) #debts-table-container table thead th {
    color: #1a1a1a !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

body:not([class*="theme-"]) #debts-table-container table tbody td {
    color: #1a1a1a !important;
}

/* Also handle explicit theme-default class if it exists */
body.theme-default #app.screen.active section h2,
body.theme-default #app.screen.active section h3,
body.theme-default #app.screen.active section h4,
body.theme-default #app.screen.active section h5,
body.theme-default #app.screen.active section h6,
body.theme-default #app.screen.active section p,
body.theme-default #app.screen.active section div,
body.theme-default #app.screen.active section span,
body.theme-default #app.screen.active section label,
body.theme-default #app.screen.active section th,
body.theme-default #app.screen.active section td,
body.theme-default #app.screen.active section button:not(.primary):not(.danger),
body.theme-default #debts-table-container,
body.theme-default #debts-table-container *,
body.theme-default #debts-body,
body.theme-default #debts-body *,
body.theme-default #debts-count {
    color: #1a1a1a !important;
}

body.theme-default #grand-total {
    color: #ef4444 !important;
}

body.theme-default #debts-table-container table th,
body.theme-default #debts-table-container table td {
    color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.theme-default #debts-table-container table thead th {
    color: #1a1a1a !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

body.theme-default #debts-table-container table tbody td {
    color: #1a1a1a !important;
}

/* Layby Customer Form - Theme Adaptation */
/* Increase font sizes for customer form */
#customer-form-container {
    font-size: 16px !important;
}

#customer-form-container h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
}

#customer-form-container label {
    font-size: 16px !important;
    font-weight: 500 !important;
}

#customer-form-container input,
#customer-form-container select,
#customer-form-container textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
}

#customer-form-container button {
    font-size: 16px !important;
    padding: 10px 16px !important;
}

#customer-form-container .info {
    font-size: 17px !important;
}

/* Default Theme - Customer Form */
body:not([class*="theme-"]) #customer-form-container,
body.theme-default #customer-form-container {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

body:not([class*="theme-"]) #customer-form-container h3,
body:not([class*="theme-"]) #customer-form-container label,
body:not([class*="theme-"]) #customer-form-container .info,
body.theme-default #customer-form-container h3,
body.theme-default #customer-form-container label,
body.theme-default #customer-form-container .info {
    color: #1a1a1a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not([class*="theme-"]) #customer-form-container input,
body:not([class*="theme-"]) #customer-form-container select,
body:not([class*="theme-"]) #customer-form-container textarea,
body.theme-default #customer-form-container input,
body.theme-default #customer-form-container select,
body.theme-default #customer-form-container textarea {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

body:not([class*="theme-"]) #customer-form-container input::placeholder,
body:not([class*="theme-"]) #customer-form-container textarea::placeholder,
body.theme-default #customer-form-container input::placeholder,
body.theme-default #customer-form-container textarea::placeholder {
    color: #1a1a1a !important;
}

body:not([class*="theme-"]) #customer-form-container input:focus,
body:not([class*="theme-"]) #customer-form-container select:focus,
body:not([class*="theme-"]) #customer-form-container textarea:focus,
body.theme-default #customer-form-container input:focus,
body.theme-default #customer-form-container select:focus,
body.theme-default #customer-form-container textarea:focus {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
}

body:not([class*="theme-"]) #customer-form-container button.primary,
body.theme-default #customer-form-container button.primary {
    background: rgba(102, 126, 234, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(102, 126, 234, 0.4) !important;
    color: #667eea !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body:not([class*="theme-"]) #customer-form-container button.primary:hover,
body.theme-default #customer-form-container button.primary:hover {
    background: rgba(102, 126, 234, 0.3) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
}

body:not([class*="theme-"]) #customer-form-container button:not(.primary):not(.danger),
body.theme-default #customer-form-container button:not(.primary):not(.danger) {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #1a1a1a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not([class*="theme-"]) #customer-form-container button:not(.primary):not(.danger):hover,
body.theme-default #customer-form-container button:not(.primary):not(.danger):hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Light Theme - Customer Form - Frosted Glass Effect */
body.theme-light #customer-form-container,
body.theme-light #customer-form-container.card,
body.theme-light .layby-page #customer-form-container,
body.theme-light .layby-page #customer-form-container.card,
html body.theme-light #customer-form-container,
html body.theme-light #customer-form-container.card {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: visible !important;
    /* Override any black/dark backgrounds - ensure no dark colors */
    background-image: none !important;
    /* Override card fixed positioning and sizing for inline form */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 8px 0 !important;
}

body.theme-light #customer-form-container h3,
body.theme-light #customer-form-container label,
body.theme-light #customer-form-container .info {
    color: #1a1a1a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.theme-light #customer-form-container input,
body.theme-light #customer-form-container select,
body.theme-light #customer-form-container textarea {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light #customer-form-container input::placeholder,
body.theme-light #customer-form-container textarea::placeholder {
    color: #1a1a1a !important;
}

body.theme-light #customer-form-container input:focus,
body.theme-light #customer-form-container select:focus,
body.theme-light #customer-form-container textarea:focus {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2) !important;
    color: #1a1a1a !important;
}

body.theme-light #customer-form-container button.primary {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    color: #667eea !important;
}

body.theme-light #customer-form-container button.primary:hover {
    background: rgba(102, 126, 234, 0.3) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
}

body.theme-light #customer-form-container button:not(.primary):not(.danger) {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #1a1a1a !important;
}

body.theme-light #customer-form-container button:not(.primary):not(.danger):hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Classic Theme - Customer Form */
body.theme-classic #customer-form-container {
    background: #fff !important;
    border: 1px solid #ccc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1a1a1a !important;
}

body.theme-classic #customer-form-container h3,
body.theme-classic #customer-form-container label,
body.theme-classic #customer-form-container .info {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

body.theme-classic #customer-form-container h3 {
    font-size: 1.3rem !important;
}

body.theme-classic #customer-form-container input,
body.theme-classic #customer-form-container select,
body.theme-classic #customer-form-container textarea {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #aaa !important;
    font-size: 19px !important;
}

/* Pending Collection Page - Classic Theme */
body.theme-classic #app.screen.active header.top-bar,
body.theme-classic #app.screen.active header.top-bar > div,
body.theme-classic #app.screen.active header.top-bar .shop-name,
body.theme-classic #app.screen.active header.top-bar .top-bar-right,
body.theme-classic #app.screen.active header.top-bar button {
    color: #1a1a1a !important;
    font-size: 19px !important;
}

body.theme-classic #app.screen.active main h1,
body.theme-classic #app.screen.active main p {
    color: #1a1a1a !important;
}

body.theme-classic #app.screen.active main h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}

body.theme-classic #pending-collection-list > div,
body.theme-classic #pending-collection-list > div[style*="background"],
body.theme-classic #pending-collection-list .card,
body.theme-classic #pending-collection-list div.card {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    color: #1a1a1a !important;
}

body.theme-classic #pending-collection-list h3,
body.theme-classic #pending-collection-list p,
body.theme-classic #pending-collection-list span,
body.theme-classic #pending-collection-list strong,
body.theme-classic #pending-collection-list td,
body.theme-classic #pending-collection-list th {
    color: #1a1a1a !important;
}

body.theme-classic #pending-collection-list h3 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

body.theme-classic #pending-collection-list td,
body.theme-classic #pending-collection-list th {
    font-size: 16px !important;
}

body.theme-classic #pending-collection-list table,
body.theme-classic #pending-collection-list table thead,
body.theme-classic #pending-collection-list table thead th,
body.theme-classic #pending-collection-list table th,
body.theme-classic #pending-collection-list table td {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-classic #pending-collection-list table thead th {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

body.theme-classic #pending-collection-list table td {
    color: #1a1a1a !important;
}

body.theme-classic #pending-collection-list button.primary {
    background: rgba(37, 150, 190, 0.8) !important;
    border-color: rgba(37, 150, 190, 0.6) !important;
    color: #fff !important;
}

body.theme-classic #pending-collection-list button.primary:hover {
    background: rgba(37, 150, 190, 1) !important;
    border-color: rgba(37, 150, 190, 0.8) !important;
}

body.theme-classic #pending-collection-list button.small {
    color: #1a1a1a !important;
    font-size: 16px !important;
}

/* Override inline style colors in JavaScript-generated content */
body.theme-classic #pending-collection-list [style*="color: #3b82f6"],
body.theme-classic #pending-collection-list [style*="color:#3b82f6"],
body.theme-classic #pending-collection-list [style*="color: #2563eb"],
body.theme-classic #pending-collection-list [style*="color:#2563eb"] {
    color: #2596be !important;
}

body.theme-classic #pending-collection-list [style*="color: #10b981"],
body.theme-classic #pending-collection-list [style*="color:#10b981"],
body.theme-classic #pending-collection-list [style*="color: #059669"],
body.theme-classic #pending-collection-list [style*="color:#059669"] {
    color: #48bb78 !important;
}

body.theme-classic #pending-collection-list [style*="color: rgba(255,255,255"],
body.theme-classic #pending-collection-list [style*="color:rgba(255,255,255"] {
    color: #1a1a1a !important;
}

/* Pending Collection Page - Center and enlarge content panel */
/* Target the main element on pending collection page to center content */
body #app.screen.active main {
    padding: 8px !important; /* 8px (4mm) margin on all sides */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Center and enlarge the container div inside main */
body #app.screen.active main > div {
    width: calc(100vw - 16px) !important; /* 8px margin on each side */
    max-width: calc(100vw - 16px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Center and enlarge the pending collection list container */
#pending-collection-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Items table: no whitish background (default/dark) */
#pending-collection-list table,
#pending-collection-list table thead,
#pending-collection-list table thead th,
#pending-collection-list table th,
#pending-collection-list table tbody,
#pending-collection-list table td {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Pending collection table: same layby-style in light theme */
body.theme-light #pending-collection-list table {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

body.theme-light #pending-collection-list table thead th {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

body.theme-light #pending-collection-list table td {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #pending-collection-list table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Items table: larger font and bold text */
#pending-collection-list table th {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: bold !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem) !important;
}
#pending-collection-list table td {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem) !important;
    font-weight: bold !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem) !important;
}

/* Pending Collection Cards - Light Theme - Enlarge width to leave few mm from screen edges */
/* Override general light theme card rules with higher specificity */
body.theme-light #pending-collection-list .card,
body.theme-light #pending-collection-list > div.card,
body.theme-light #pending-collection-list div[class*="card"],
body.theme-light #app.screen.active main #pending-collection-list .card,
body.theme-light #app.screen.active main #pending-collection-list > div.card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important; /* Only bottom margin for spacing between cards */
    padding: 24px !important;
    box-sizing: border-box !important;
    /* Override fixed positioning from general light theme card rules */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* Override width constraints from general card rules */
    min-width: auto !important;
    /* Override overflow if needed */
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    /* Override max-height constraints */
    max-height: none !important;
    height: auto !important;
}

/* Ensure all divs in pending collection list take full available width in light theme */
body.theme-light #pending-collection-list > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Analytics Page - Classic Theme: dark text on light backgrounds for visibility */
body.theme-classic .analytics-container,
body.theme-classic .analytics-container *,
body.theme-classic .analytics-header,
body.theme-classic .analytics-header *,
body.theme-classic .analytics-header h1 {
    color: #1a1a1a !important;
}

body.theme-classic .analytics-header h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}

body.theme-classic .period-selector,
body.theme-classic .period-selector label,
body.theme-classic .period-selector select {
    color: #1a1a1a !important;
    font-size: 19px !important;
}

body.theme-classic .period-selector select {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #aaa !important;
    color: #1a1a1a !important;
}

body.theme-classic .period-selector select option {
    background: #fff !important;
    color: #1a1a1a !important;
}

body.theme-classic .stats-grid,
body.theme-classic .stats-grid *,
body.theme-classic .stat-card,
body.theme-classic .stat-card *,
body.theme-classic .stat-card h3,
body.theme-classic .stat-card .value,
body.theme-classic .stat-card .label {
    color: #1a1a1a !important;
}

body.theme-classic .stat-card h3,
body.theme-classic .stat-card .value {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}

body.theme-classic .stat-card {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

body.theme-classic .products-section,
body.theme-classic .products-section *,
body.theme-classic .products-section h2,
body.theme-classic .products-table,
body.theme-classic .products-table *,
body.theme-classic .products-table th,
body.theme-classic .products-table td,
body.theme-classic .products-table tr {
    color: #1a1a1a !important;
}

body.theme-classic .products-section h2 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
}

body.theme-classic .products-section {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

body.theme-classic .products-table table {
    background: #fff !important;
}

body.theme-classic .products-table th {
    background: #f0f0f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 2px solid #ccc !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

body.theme-classic .products-table td {
    background: #fff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    font-size: 16px !important;
}

body.theme-classic .products-table tr:hover td {
    background: #f8f8f8 !important;
}

body.theme-classic .badge,
body.theme-classic .badge.success,
body.theme-classic .badge.warning,
body.theme-classic .badge.danger {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

body.theme-classic .badge.success {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #0d9668 !important;
}

body.theme-classic .badge.warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #b45309 !important;
}

body.theme-classic .badge.danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #b91c1c !important;
}

body.theme-classic .loading {
    color: #1a1a1a !important;
}

body.theme-classic .error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #b91c1c !important;
}

/* Override inline styles for dynamically generated content - keep dark */
body.theme-classic [style*="color: #1a1a2e"],
body.theme-classic [style*="color:#1a1a2e"],
body.theme-classic [style*="color: rgba(26, 26, 46"],
body.theme-classic [style*="color:rgba(26, 26, 46"] {
    color: #1a1a1a !important;
}

/* Top bar text in analytics page - dark for visibility on light gray */
body.theme-classic #app.screen.active header.top-bar,
body.theme-classic #app.screen.active header.top-bar > span,
body.theme-classic #app.screen.active header.top-bar .shop-name,
body.theme-classic #app.screen.active header.top-bar button {
    color: #1a1a1a !important;
}

/* AI Insights Panel in analytics page - White/light background with black text */
body.theme-classic #ai-insights-panel.floating-panel,
body.theme-classic #ai-insights-panel {
    width: calc(100vw - 16px) !important; /* 8px (4mm) margin on each side */
    max-width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important; /* 8px (4mm) margin on top and bottom */
    max-height: calc(100vh - 16px) !important;
    margin: 0 !important; /* No margin, height/width handle spacing */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.theme-classic #ai-insights-panel .floating-panel-header {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel .floating-panel-header h2,
body.theme-classic #ai-insights-panel .floating-panel-header button {
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel .close-btn {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

body.theme-classic #ai-insights-panel .close-btn:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #dc2626 !important;
}

body.theme-classic #ai-insights-panel .card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel *,
body.theme-classic #ai-insights-panel h2,
body.theme-classic #ai-insights-panel h3,
body.theme-classic #ai-insights-panel div,
body.theme-classic #ai-insights-panel span,
body.theme-classic #ai-insights-panel p,
body.theme-classic #ai-insights-panel label,
body.theme-classic #ai-insights-content,
body.theme-classic #ai-insights-content *,
body.theme-classic #ai-summary-stats,
body.theme-classic #ai-summary-stats *,
body.theme-classic #ai-insights-text,
body.theme-classic #ai-top-products,
body.theme-classic #ai-top-products *,
body.theme-classic #ai-chat-panel,
body.theme-classic #ai-chat-panel *,
body.theme-classic #ai-chat-messages,
body.theme-classic #ai-chat-messages * {
    color: #1a1a2e !important;
}

body.theme-classic #ai-status,
body.theme-classic #ai-status *,
body.theme-classic #ai-loading,
body.theme-classic #ai-loading *,
body.theme-classic #ai-error,
body.theme-classic #ai-error *,
body.theme-classic #ai-chat-input,
body.theme-classic #ai-chat-loading,
body.theme-classic #ai-chat-loading *,
body.theme-classic #ai-chat-error,
body.theme-classic #ai-chat-error * {
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel select,
body.theme-classic #ai-period-select {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel select option {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-panel button.primary {
    background: rgba(37, 150, 190, 0.2) !important;
    border-color: rgba(37, 150, 190, 0.4) !important;
    color: #2596be !important;
}

body.theme-classic #ai-insights-panel button.primary:hover {
    background: rgba(37, 150, 190, 0.3) !important;
    border-color: rgba(37, 150, 190, 0.6) !important;
    color: #1e7a9e !important;
}

body.theme-classic #ai-insights-panel #ai-status {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

/* Content sections with frosted glass - lighter background for black text */
body.theme-classic #ai-insights-content > div[style*="background"],
body.theme-classic #ai-insights-content > div {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid rgba(37, 150, 190, 0.6) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-chat-input {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-chat-input::placeholder {
    color: rgba(26, 26, 46, 0.5) !important;
}

body.theme-classic #ai-chat-messages {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.theme-classic #ai-chat-messages > div {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
    border-left: 3px solid rgba(37, 150, 190, 0.4) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #dc2626 !important;
}

/* Override inline styles for AI insights content sections */
body.theme-classic #ai-insights-content div[style*="background:rgba(168, 85, 247"],
body.theme-classic #ai-insights-content div[style*="background: rgba(168, 85, 247"] {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-left: 4px solid rgba(168, 85, 247, 0.6) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-content div[style*="background:rgba(34, 197, 94"],
body.theme-classic #ai-insights-content div[style*="background: rgba(34, 197, 94"] {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-left: 4px solid rgba(34, 197, 94, 0.6) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-insights-content div[style*="background:rgba(59, 130, 246"],
body.theme-classic #ai-insights-content div[style*="background: rgba(59, 130, 246"] {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-left: 4px solid rgba(59, 130, 246, 0.6) !important;
    color: #1a1a2e !important;
}

/* Override inline style backgrounds for dynamically generated content */
body.theme-classic #ai-summary-stats > div[style*="background"],
body.theme-classic #ai-summary-stats > div {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-top-products > div[style*="background"],
body.theme-classic #ai-top-products > div {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

/* Chat message styles - dark text for classic theme */
body.theme-classic #ai-chat-messages > div[style*="background:rgba(168, 85, 247"],
body.theme-classic #ai-chat-messages > div[style*="background: rgba(168, 85, 247"] {
    background: rgba(168, 85, 247, 0.15) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
    border-left: 3px solid rgba(168, 85, 247, 0.6) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-chat-messages > div[style*="background:rgba(59, 130, 246"],
body.theme-classic #ai-chat-messages > div[style*="background: rgba(59, 130, 246"] {
    background: rgba(59, 130, 246, 0.15) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
    border-left: 3px solid rgba(59, 130, 246, 0.6) !important;
    color: #1a1a2e !important;
}

/* Override ALL inline style colors in AI panel to black (not white) */
body.theme-classic #ai-insights-panel [style*="color:rgba(255,255,255"],
body.theme-classic #ai-insights-panel [style*="color: rgba(255,255,255"],
body.theme-classic #ai-insights-panel [style*="color:#ffffff"],
body.theme-classic #ai-insights-panel [style*="color: #ffffff"],
body.theme-classic #ai-insights-panel [style*="color:rgba(255, 255, 255"],
body.theme-classic #ai-insights-panel [style*="color: rgba(255, 255, 255"] {
    color: #1a1a2e !important;
}

/* Ensure summary stats divs get proper styling with black text */
body.theme-classic #ai-summary-stats div[style*="background:rgba(255,255,255,0.05)"],
body.theme-classic #ai-summary-stats div[style*="background: rgba(255,255,255,0.05)"],
body.theme-classic #ai-summary-stats div[style*="background"],
body.theme-classic #ai-summary-stats div {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-summary-stats div div {
    color: #1a1a2e !important;
}

body.theme-classic #ai-summary-stats div[style*="color:rgba(255,255,255"],
body.theme-classic #ai-summary-stats div[style*="color: rgba(255,255,255"],
body.theme-classic #ai-summary-stats div[style*="color:#ffffff"],
body.theme-classic #ai-summary-stats div[style*="color: #ffffff"] {
    color: #1a1a2e !important;
}

/* Ensure top products divs get proper styling with black text */
body.theme-classic #ai-top-products div[style*="background"],
body.theme-classic #ai-top-products div {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

body.theme-classic #ai-top-products div strong,
body.theme-classic #ai-top-products div span {
    color: #1a1a2e !important;
}

/* Override all white text colors in AI panel - catch any remaining inline styles */
body.theme-classic #ai-loading,
body.theme-classic #ai-loading *,
body.theme-classic #ai-loading div,
body.theme-classic #ai-insights-content h3,
body.theme-classic #ai-insights-content h3[style*="color"],
body.theme-classic #ai-chat-panel h3,
body.theme-classic #ai-chat-panel h3[style*="color"],
body.theme-classic #ai-chat-panel p,
body.theme-classic #ai-chat-panel p[style*="color"],
body.theme-classic #ai-chat-messages > div > div[style*="color:rgba(255"],
body.theme-classic #ai-chat-messages > div > div[style*="color: rgba(255"],
body.theme-classic #ai-chat-loading[style*="color"],
body.theme-classic #ai-chat-error[style*="color"],
body.theme-classic #ai-insights-text,
body.theme-classic #ai-insights-text[style*="color"],
body.theme-classic #ai-top-products,
body.theme-classic #ai-top-products[style*="color"] {
    color: #1a1a2e !important;
}

/* Direct element selectors for elements that have inline white colors */
body.theme-classic #ai-loading div:nth-child(1),
body.theme-classic #ai-loading div:nth-child(2),
body.theme-classic #ai-loading div:nth-child(3),
body.theme-classic #ai-insights-text {
    color: #1a1a2e !important;
}

/* Override all inline style colors that might be white */
body.theme-classic #ai-insights-panel [style*="color:rgba(255, 255, 255"],
body.theme-classic #ai-insights-panel [style*="color: rgba(255, 255, 255"],
body.theme-classic #ai-insights-panel [style*="color:rgba(255,255,255"],
body.theme-classic #ai-insights-panel [style*="color: rgba(255,255,255"],
body.theme-classic #ai-insights-panel [style*="color:#ffffff"],
body.theme-classic #ai-insights-panel [style*="color: #ffffff"],
body.theme-classic #ai-insights-panel [style*="color:white"],
body.theme-classic #ai-insights-panel [style*="color: white"] {
    color: #1a1a2e !important;
}

/* Override white colors in nested elements and dynamically created content */
body.theme-classic #ai-insights-content [style*="color:rgba(255"],
body.theme-classic #ai-insights-content [style*="color: rgba(255"],
body.theme-classic #ai-insights-content [style*="color:#ffffff"],
body.theme-classic #ai-insights-content [style*="color: #ffffff"],
body.theme-classic #ai-summary-stats [style*="color:rgba(255"],
body.theme-classic #ai-summary-stats [style*="color: rgba(255"],
body.theme-classic #ai-top-products [style*="color:rgba(255"],
body.theme-classic #ai-top-products [style*="color: rgba(255"],
body.theme-classic #ai-chat-messages [style*="color:rgba(255"],
body.theme-classic #ai-chat-messages [style*="color: rgba(255"] {
    color: #1a1a2e !important;
}

/* Maximum specificity - override all possible white text variations in AI panel */
body.theme-classic #ai-insights-panel div[style*="color"],
body.theme-classic #ai-insights-panel span[style*="color"],
body.theme-classic #ai-insights-panel p[style*="color"],
body.theme-classic #ai-insights-panel h3[style*="color"],
body.theme-classic #ai-insights-panel strong[style*="color"] {
    color: #1a1a2e !important;
}

/* Catch-all for any element with white color in AI panel */
body.theme-classic #ai-insights-panel *[style*="255,255,255"],
body.theme-classic #ai-insights-panel *[style*="#ffffff"],
body.theme-classic #ai-insights-panel *[style*="ffffff"],
body.theme-classic #ai-insights-panel *[style*="white"] {
    color: #1a1a2e !important;
}

/* WhatsApp Page - Ensure layout stays side by side and all text is black for all themes */
/* Override general rules - WhatsApp page template already has high specificity inline styles */

/* WhatsApp Page - All text black for all themes */
/* Target WhatsApp page elements directly - layout is already preserved in template inline styles */
/* Using high specificity to override theme-specific styles for all themes */

/* WhatsApp status and related elements */
#app.screen.active .whatsapp-status,
#app.screen.active .whatsapp-status strong,
#app.screen.active .whatsapp-status div {
    color: #1a1a2e !important;
}

/* Chat list elements - Recent Chats (left column) - white text on black background */
#app.screen.active .pos-layout .left .chat-phone,
#app.screen.active .pos-layout .left .chat-timestamp,
#app.screen.active .pos-layout .left .chat-preview,
#app.screen.active .pos-layout .left .chat-preview span,
#app.screen.active .pos-layout .left .chat-item,
#app.screen.active .pos-layout .left .chat-item span,
#app.screen.active .pos-layout .left .chat-item div,
#app.screen.active .pos-layout .left #chats-list,
#app.screen.active .pos-layout .left #chats-list div,
#app.screen.active .pos-layout .left #chats-container {
    color: #1a1a1a !important;
}

/* Message elements - Recent Chats section (left column) */
#app.screen.active .pos-layout .left .message-time,
#app.screen.active .pos-layout .left .message-bubble.sent .message-bubble-content,
#app.screen.active .pos-layout .left .message-bubble.received .message-bubble-content,
#app.screen.active .pos-layout .left .message-bubble.sent .message-time,
#app.screen.active .pos-layout .left .message-bubble.received .message-time {
    color: #1a1a1a !important;
}

/* Ensure sent message bubbles have black background */
#app.screen.active .pos-layout .left .message-bubble.sent .message-bubble-content {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: #1a1a1a !important;
}

/* Ensure received message bubbles have lighter background for contrast */
#app.screen.active .pos-layout .left .message-bubble.received .message-bubble-content {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #1a1a1a !important;
}

/* Ensure WhatsApp page cards have proper background and text color for all themes */
/* Recent Chats card (left column) - black background */
#app.screen.active .pos-layout .left .card,
#app.screen.active .pos-layout .left #chats-view {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #1a1a1a !important;
}
/* Configuration panel cards (right column) - white background */
#app.screen.active .pos-layout .right .card {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a2e !important;
}

/* Ensure WhatsApp page headings and text - white for left column (Recent Chats on black), black for right column */
#app.screen.active .pos-layout .left h2,
#app.screen.active .pos-layout .left h3,
#app.screen.active .pos-layout .left h4,
#app.screen.active .pos-layout .left p,
#app.screen.active .pos-layout .left label,
#app.screen.active .pos-layout .left strong {
    color: #1a1a1a !important;
}
/* Right column (Configuration Panel) - All text black */
#app.screen.active .pos-layout .right h2,
#app.screen.active .pos-layout .right h3,
#app.screen.active .pos-layout .right h4,
#app.screen.active .pos-layout .right p,
#app.screen.active .pos-layout .right label,
#app.screen.active .pos-layout .right span,
#app.screen.active .pos-layout .right div,
#app.screen.active .pos-layout .right strong,
#app.screen.active .pos-layout .right small,
#app.screen.active .pos-layout .right input,
#app.screen.active .pos-layout .right textarea,
#app.screen.active .pos-layout .right select {
    color: #1a1a2e !important;
}

/* Recent Chats section - ensure all text including dynamically generated content is white on black background */
#app.screen.active .pos-layout .left #chats-list,
#app.screen.active .pos-layout .left #chats-list div,
#app.screen.active .pos-layout .left #chats-list span,
#app.screen.active .pos-layout .left #chats-container,
#app.screen.active .pos-layout .left #chats-container div,
#app.screen.active .pos-layout .left #chats-container span {
    color: #1a1a1a !important;
}

/* Conversation header - freeze back button when scrolling */
#app.screen.active .pos-layout .left #conversation-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Conversation header text - white on black background */
#app.screen.active .pos-layout .left #conversation-header button,
#app.screen.active .pos-layout .left #conversation-header #conversation-phone,
#app.screen.active .pos-layout .left #conversation-header .chat-avatar {
    color: #1a1a1a !important;
}

/* Price Input Formatter - RTL direction for all price inputs */
input[type="number"][step="0.01"],
input[data-price-formatted="true"],
input#prod-price,
input#prod-cost,
input#pay-cash,
input#pay-mobile,
input#pay-card,
input#pay-credit,
input#withdrawal-amount,
input#new-layby-initial-payment,
input#layby-amount-paid,
input#pay-amount,
input#ending-cash,
input#starting-cash,
input#asset-cost,
input.price-input,
input.amount-input,
input.money-input {
    direction: rtl !important;
    text-align: right !important;
}

/* Message bubbles - ensure received messages have appropriate styling */
/* For Recent Chats (left column) - handled by rules above */
/* For other contexts (right column message history), keep light background */
#app.screen.active .pos-layout .right .message-bubble.received .message-bubble-content {
    background-color: #1a1a1a !important;
    color: #1a1a2e !important;
}

#app.screen.active .pos-layout .right .message-bubble.received .message-time {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Theme styles moved to theme file - removed to prevent conflicts */

/* Final override for customer form container in light theme - highest priority */
html body.theme-light #customer-form-container.card,
html body.theme-light #app #customer-form-container,
html body.theme-light #app #customer-form-container.card,
html body.theme-light .layby-page #customer-form-container,
html body.theme-light .layby-page #customer-form-container.card {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: visible !important;
    background-image: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 8px 0 !important;
}