/*
 * POS theme overrides.
 * Applies a system-aware dark theme across the POS shell and storefront.
 */

:root {
    --pos-theme-surface: #ffffff;
    --pos-theme-surface-2: #f8fafc;
    --pos-theme-surface-3: #f1f5f9;
    --pos-theme-border: #e5e7eb;
    --pos-theme-border-strong: #cbd5e1;
    --pos-theme-text: #1f2937;
    --pos-theme-text-muted: #64748b;
    --pos-theme-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    --pos-theme-overlay: rgba(15, 23, 42, 0.56);
    --pos-theme-input-bg: #ffffff;
}

html[data-pos-theme="light"] {
    color-scheme: light;
}

html[data-pos-theme="dark"] {
    color-scheme: dark;
    --pos-theme-surface: #0f172a;
    --pos-theme-surface-2: #111827;
    --pos-theme-surface-3: #1e293b;
    --pos-theme-border: #334155;
    --pos-theme-border-strong: #475569;
    --pos-theme-text: #e2e8f0;
    --pos-theme-text-muted: #94a3b8;
    --pos-theme-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
    --pos-theme-overlay: rgba(2, 6, 23, 0.82);
    --pos-theme-input-bg: #111827;

    --pos-gray-50: #020617;
    --pos-gray-100: #0f172a;
    --pos-gray-200: #1e293b;
    --pos-gray-300: #334155;
    --pos-gray-400: #64748b;
    --pos-gray-500: #94a3b8;
    --pos-gray-600: #cbd5e1;
    --pos-gray-700: #e2e8f0;
    --pos-gray-800: #f8fafc;
    --pos-gray-900: #ffffff;
    --pos-primary-light: rgba(59, 130, 246, 0.2);
    --pos-success-light: rgba(16, 185, 129, 0.18);
    --pos-danger-light: rgba(239, 68, 68, 0.18);
    --pos-warning-light: rgba(245, 158, 11, 0.18);
    --pos-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --pos-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28);
    --pos-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.38);

    /* Storefront variables */
    --pos-text: #e2e8f0;
    --pos-text-secondary: #cbd5e1;
    --pos-text-muted: #94a3b8;
    --pos-text-light: #64748b;
    --pos-bg: #020617;
    --pos-bg-secondary: #0f172a;
    --pos-bg-tertiary: #111827;
    --pos-card-bg: #0f172a;
    --pos-border: #334155;
    --pos-border-light: #1e293b;
    --pos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --pos-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    --pos-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.3);
    --pos-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-pos-theme="dark"] body,
html[data-pos-theme="dark"] .wc-pos-wrap,
html[data-pos-theme="dark"] .pos-home-wrap,
html[data-pos-theme="dark"] .pos-shop-wrap,
html[data-pos-theme="dark"] .pos-login-wrap {
    background: var(--pos-gray-50) !important;
    color: var(--pos-theme-text);
}

html[data-pos-theme="dark"] .wc-pos-wrap,
html[data-pos-theme="dark"] .pos-home-main,
html[data-pos-theme="dark"] .pos-main,
html[data-pos-theme="dark"] .pos-main-content,
html[data-pos-theme="dark"] .pos-content-card,
html[data-pos-theme="dark"] .pos-settings-split-view,
html[data-pos-theme="dark"] .pos-products-split-view,
html[data-pos-theme="dark"] .pos-customers-split-view,
html[data-pos-theme="dark"] .pos-sidebar,
html[data-pos-theme="dark"] .pos-sidebar-header,
html[data-pos-theme="dark"] .pos-sidebar-footer,
html[data-pos-theme="dark"] .pos-card-white,
html[data-pos-theme="dark"] .pos-tabs-container,
html[data-pos-theme="dark"] .pos-modal-content,
html[data-pos-theme="dark"] .pos-order-info,
html[data-pos-theme="dark"] .pos-shop-header,
html[data-pos-theme="dark"] .pos-shop-categories,
html[data-pos-theme="dark"] .pos-shop-mobile-search,
html[data-pos-theme="dark"] .pos-shop-mobile-search-inner,
html[data-pos-theme="dark"] .pos-brand-card,
html[data-pos-theme="dark"] .pos-brand-logo-area .pos-logo-preview,
html[data-pos-theme="dark"] .pos-color-swatch-group,
html[data-pos-theme="dark"] .pos-store-modal,
html[data-pos-theme="dark"] .pos-store-url,
html[data-pos-theme="dark"] .pos-login-form-column,
html[data-pos-theme="dark"] .pos-shop-btn,
html[data-pos-theme="dark"] .pos-shop-category-btn,
html[data-pos-theme="dark"] .pos-btn-export {
    background: var(--pos-theme-surface) !important;
    border-color: var(--pos-theme-border) !important;
    color: var(--pos-theme-text) !important;
    box-shadow: var(--pos-theme-shadow);
}

html[data-pos-theme="dark"] .pos-header,
html[data-pos-theme="dark"] .pos-home-wrap .pos-header,
html[data-pos-theme="dark"] .pos-login-form-column .pos-header,
html[data-pos-theme="dark"] .pos-products-split-view .pos-sidebar-header,
html[data-pos-theme="dark"] .pos-products-split-view .pos-sidebar-footer,
html[data-pos-theme="dark"] .pos-sidebar-header,
html[data-pos-theme="dark"] .pos-sidebar-footer {
    background: var(--pos-theme-surface) !important;
    border-color: var(--pos-theme-border) !important;
    box-shadow: var(--pos-theme-shadow) !important;
}

html[data-pos-theme="dark"] .pos-home-wrap .pos-user-info,
html[data-pos-theme="dark"] .pos-home-wrap .pos-icon-btn,
html[data-pos-theme="dark"] .pos-user-info,
html[data-pos-theme="dark"] .pos-icon-btn,
html[data-pos-theme="dark"] .pos-btn-secondary,
html[data-pos-theme="dark"] .pos-menu-item,
html[data-pos-theme="dark"] .pos-store-copy-btn,
html[data-pos-theme="dark"] .pos-store-action-btn.secondary,
html[data-pos-theme="dark"] .pos-store-close {
    background: var(--pos-theme-surface-2) !important;
    border-color: var(--pos-theme-border) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-icon-btn:hover,
html[data-pos-theme="dark"] .pos-home-wrap .pos-icon-btn:hover,
html[data-pos-theme="dark"] .pos-btn-secondary:hover:not(:disabled),
html[data-pos-theme="dark"] .pos-menu-item:hover,
html[data-pos-theme="dark"] .pos-store-copy-btn:hover,
html[data-pos-theme="dark"] .pos-store-action-btn.secondary:hover,
html[data-pos-theme="dark"] .pos-shop-btn:hover,
html[data-pos-theme="dark"] .pos-shop-category-btn:hover,
html[data-pos-theme="dark"] .pos-btn-export:hover {
    background: var(--pos-theme-surface-3) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-menu-item.active,
html[data-pos-theme="dark"] .pos-shop-category-btn.active,
html[data-pos-theme="dark"] .pos-btn-export:focus-visible {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-logo h1,
html[data-pos-theme="dark"] .pos-sidebar-title,
html[data-pos-theme="dark"] .pos-section-header-bar h2,
html[data-pos-theme="dark"] .pos-home-welcome h2,
html[data-pos-theme="dark"] .pos-login-form-title,
html[data-pos-theme="dark"] .pos-store-modal h3,
html[data-pos-theme="dark"] .pos-table th,
html[data-pos-theme="dark"] .pos-table td strong {
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-home-welcome p,
html[data-pos-theme="dark"] .pos-login-form-subtitle,
html[data-pos-theme="dark"] .pos-form-label,
html[data-pos-theme="dark"] .pos-remember-label,
html[data-pos-theme="dark"] .pos-form-note,
html[data-pos-theme="dark"] .pos-store-subtitle,
html[data-pos-theme="dark"] .pos-store-footnote,
html[data-pos-theme="dark"] .pos-home-wrap .pos-user-info,
html[data-pos-theme="dark"] .pos-home-wrap .pos-user-info .dashicons,
html[data-pos-theme="dark"] .pos-icon-btn .dashicons,
html[data-pos-theme="dark"] .pos-username,
html[data-pos-theme="dark"] .pos-empty-state,
html[data-pos-theme="dark"] .pos-empty-text,
html[data-pos-theme="dark"] .pos-empty-state p {
    color: var(--pos-theme-text-muted) !important;
}

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

html[data-pos-theme="dark"] .pos-table th {
    background: var(--pos-theme-surface-2) !important;
    border-color: var(--pos-theme-border) !important;
}

html[data-pos-theme="dark"] .pos-table td {
    border-color: var(--pos-theme-border) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-table tbody tr:hover td,
html[data-pos-theme="dark"] .pos-row-debt,
html[data-pos-theme="dark"] .pos-row-expense,
html[data-pos-theme="dark"] .pos-ledger-totals {
    background: rgba(30, 41, 59, 0.78) !important;
}

html[data-pos-theme="dark"] .pos-modal-overlay,
html[data-pos-theme="dark"] .pos-store-modal-overlay {
    background: var(--pos-theme-overlay) !important;
}

html[data-pos-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-pos-theme="dark"] select,
html[data-pos-theme="dark"] textarea,
html[data-pos-theme="dark"] #modal-product-variation {
    background: var(--pos-theme-input-bg) !important;
    border-color: var(--pos-theme-border) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] input::placeholder,
html[data-pos-theme="dark"] textarea::placeholder {
    color: var(--pos-theme-text-muted) !important;
}

html[data-pos-theme="dark"] input:focus,
html[data-pos-theme="dark"] select:focus,
html[data-pos-theme="dark"] textarea:focus,
html[data-pos-theme="dark"] #modal-product-variation:focus {
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

html[data-pos-theme="dark"] .pos-search-wrap,
html[data-pos-theme="dark"] .pos-search-box input,
html[data-pos-theme="dark"] .pos-date-input,
html[data-pos-theme="dark"] .pos-shop-search-wrap,
html[data-pos-theme="dark"] .pos-store-url input {
    background: var(--pos-theme-surface-2) !important;
    border-color: var(--pos-theme-border) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-search-wrap:focus-within,
html[data-pos-theme="dark"] .pos-shop-search-wrap:focus-within {
    background: var(--pos-theme-input-bg) !important;
}

html[data-pos-theme="dark"] .pos-login-form-column,
html[data-pos-theme="dark"] .pos-home-main,
html[data-pos-theme="dark"] .pos-main {
    background: transparent !important;
}

html[data-pos-theme="dark"] .pos-login-error {
    background: rgba(127, 29, 29, 0.24) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
    color: #fda4af !important;
}

html[data-pos-theme="dark"] .pos-push-panel,
html[data-pos-theme="dark"] .pos-push-info-card,
html[data-pos-theme="dark"] .pos-push-key-panel,
html[data-pos-theme="dark"] .pos-push-ios-note,
html[data-pos-theme="dark"] .pos-theme-intro,
html[data-pos-theme="dark"] .pos-theme-option,
html[data-pos-theme="dark"] .pos-theme-current-badge {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.96) 100%) !important;
    border-color: rgba(71, 85, 105, 0.7) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-brand-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(17, 24, 39, 0.96) 100%) !important;
}

html[data-pos-theme="dark"] .pos-theme-option[data-selected="true"] {
    background: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
}

html[data-pos-theme="dark"] .pos-brand-logo-area .pos-logo-preview,
html[data-pos-theme="dark"] .pos-color-swatch-group,
html[data-pos-theme="dark"] .pos-store-select {
    background: var(--pos-theme-surface-2) !important;
}

html[data-pos-theme="dark"] .pos-brand-logo-overlay .pos-logo-remove-btn {
    background: var(--pos-theme-surface-2) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

html[data-pos-theme="dark"] .pos-brand-logo-overlay .pos-logo-remove-btn:hover {
    background: rgba(127, 29, 29, 0.2) !important;
}

html[data-pos-theme="dark"] .pos-store-modal {
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48) !important;
}

html[data-pos-theme="dark"] .pos-store-url,
html[data-pos-theme="dark"] .pos-store-url input {
    background: var(--pos-theme-surface-2) !important;
}

html[data-pos-theme="dark"] .pos-home-wrap .pos-header,
html[data-pos-theme="dark"] .pos-login-form-column .pos-header {
    background: var(--pos-theme-surface) !important;
}

html[data-pos-theme="dark"] .pos-pwa-btn.installed,
html[data-pos-theme="dark"] .pos-section-card:not(.cashier):not(.products):not(.reports):not(.invoices):not(.settings):not(.sync):not(.store) {
    background: var(--pos-theme-surface) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-section-card:not(.cashier):not(.products):not(.reports):not(.invoices):not(.settings):not(.sync):not(.store) .pos-section-icon {
    background: rgba(148, 163, 184, 0.12) !important;
}

html[data-pos-theme="dark"] .pos-section-card.store .pos-store-card-share-btn {
    background: rgba(15, 23, 42, 0.45) !important;
}

html[data-pos-theme="dark"] .pos-tabs-container,
html[data-pos-theme="dark"] .pos-card-white {
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(51, 65, 85, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-pos-theme="dark"] .pos-tab-btn {
    color: var(--pos-theme-text-muted) !important;
}

html[data-pos-theme="dark"] .pos-tab-btn:hover,
html[data-pos-theme="dark"] .pos-tab-btn.active {
    background: rgba(30, 41, 59, 0.88) !important;
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-net-cash-card {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.38) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
}

html[data-pos-theme="dark"] .pos-login-form-column,
html[data-pos-theme="dark"] .pos-login-form-container,
html[data-pos-theme="dark"] .pos-login-form {
    color: var(--pos-theme-text) !important;
}

html[data-pos-theme="dark"] .pos-shop-header,
html[data-pos-theme="dark"] .pos-shop-main,
html[data-pos-theme="dark"] .pos-shop-categories,
html[data-pos-theme="dark"] .pos-product-card,
html[data-pos-theme="dark"] .pos-cart-modal,
html[data-pos-theme="dark"] .pos-product-modal,
html[data-pos-theme="dark"] .pos-empty-cart,
html[data-pos-theme="dark"] .pos-checkout-panel,
html[data-pos-theme="dark"] .pos-product-quick-view {
    color: var(--pos-text) !important;
}

html[data-pos-theme="dark"] .pos-shop-btn .dashicons,
html[data-pos-theme="dark"] .pos-shop-logo .dashicons,
html[data-pos-theme="dark"] .pos-shop-category-btn,
html[data-pos-theme="dark"] .pos-product-card .dashicons {
    color: inherit !important;
}

html[data-pos-theme="dark"] .pos-home-wrap ::selection,
html[data-pos-theme="dark"] .wc-pos-wrap ::selection,
html[data-pos-theme="dark"] .pos-shop-wrap ::selection {
    background: rgba(59, 130, 246, 0.32);
    color: #ffffff;
}