/* SmartSell royal-blue glass theme. Loaded after the preserved component styles. */
:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --green: #60a5fa;
  --green-dark: #2563eb;
  --mint: #dbeafe;
  --line: rgb(255 255 255 / 22%);
  --paper: rgb(255 255 255 / 12%);
  --bg: #07152f;
  --royal-primary: #2563eb;
  --royal-blue: #4169e1;
  --deep-blue: #0b1f4d;
  --midnight-blue: #07152f;
  --sky-blue: #60a5fa;
  --ice-blue: #dbeafe;
  --glass-surface: rgb(255 255 255 / 12%);
  --glass-border: rgb(255 255 255 / 22%);
  --glass-shadow: 0 16px 42px rgb(3 11 32 / 24%);
}

* { scrollbar-color: #60a5fa66 #07152f; }

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 12% 0%, rgb(37 99 235 / 35%), transparent 34rem),
    radial-gradient(ellipse at 92% 28%, rgb(65 105 225 / 24%), transparent 32rem),
    linear-gradient(140deg, #07152f 0%, #0b1f4d 54%, #102c67 100%);
  background-attachment: fixed;
}

.app-shell { background: transparent; }

.sidebar {
  color: #f8fafc;
  background: linear-gradient(165deg, rgb(7 21 47 / 92%), rgb(11 31 77 / 82%));
  border-right: 1px solid var(--glass-border);
  box-shadow: 10px 0 40px rgb(3 11 32 / 24%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.brand, .sidebar-bottom strong { color: #f8fafc; }
.brand-light, .sidebar-bottom small { color: #cbd5e1; }
.brand-mark, .footer-mark {
  color: #fff;
  background: linear-gradient(145deg, #60a5fa, #2563eb 68%, #4169e1);
  box-shadow: 0 6px 20px rgb(37 99 235 / 34%);
}
.workspace-label { color: #bfdbfe; }
.sidebar nav { gap: 6px; }
.nav-item {
  min-height: 44px;
  color: #dbeafe;
  border-radius: 11px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-item:hover { color: #fff; background: rgb(255 255 255 / 10%); transform: translateX(2px); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(105deg, #2563eb, #4169e1);
  box-shadow: 0 7px 22px rgb(37 99 235 / 38%);
}
.nav-item.active .nav-icon { color: #fff; }
.nav-icon { color: #bfdbfe; }
.nav-item:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.sidebar-bottom { border-color: var(--glass-border); }
.avatar { color: #0b1f4d; background: #dbeafe; }

.main-content { max-width: 1480px; }
.topbar {
  border-color: var(--glass-border);
  background: rgb(7 21 47 / 48%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.breadcrumbs { color: #cbd5e1; }
.breadcrumbs strong { color: #f8fafc; }
.breadcrumbs span { color: #93c5fd; }
.top-actions { color: #f8fafc; }
.currency-badge {
  color: #eff6ff;
  background: rgb(255 255 255 / 10%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}
.icon-button { color: #dbeafe; border-color: var(--glass-border); background: rgb(255 255 255 / 8%); }
.page-heading { color: #f8fafc; }
.eyebrow, h1 span { color: #93c5fd; }
h1 { color: #f8fafc; }
.page-heading p, .panel-heading p { color: #cbd5e1; }
.heading-art { opacity: .78; }
.art-orbit { border-color: rgb(147 197 253 / 45%); }
.art-coin { color: #eff6ff; background: rgb(96 165 250 / 22%); border-color: rgb(191 219 254 / 38%); box-shadow: 0 8px 24px rgb(3 11 32 / 28%); }
.art-star { color: #bfdbfe; }

.panel, .metric-card, .report-metric, .dashboard-panel,
.dashboard-chart-panel, .input-panel, .result-card, .purchase-total-row,
.local-currency-panel, .cloud-account-row, .cloud-shop-summary,
.cloud-sync-panel, .cloud-staff-panel, .cloud-subscription-panel,
.cloud-auth-form, .cloud-shop-form, .import-preview-panel,
.report-filter-panel, .report-table-panel {
  color: #f8fafc;
  background: linear-gradient(145deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 7%));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow), inset 0 1px rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.panel h2, .panel h3, .panel-heading h2, .metric-card strong,
.report-metric strong, .dashboard-positive strong, .dashboard-net strong,
.dashboard-recent-row strong, .dashboard-purchase-stats strong { color: #f8fafc; }
.checkout-panel-heading h2, .checkout-payment > .payment-title,
.checkout-total strong, .payment-progress strong, .change-row strong { color: #f8fafc; }
.checkout-panel-heading p, .checkout-empty, .checkout-payment-field,
.payment-progress, .change-row, .payment-disclaimer,
.checkout-total span { color: #cbd5e1; }
.panel-heading p, .metric-label, .local-currency-warning,
.account-form-caption, .dashboard-footnote, .dashboard-chart-empty,
.field-hint, .optional, .estimate-note, .dashboard-recent-row small { color: #cbd5e1; }
.dashboard-period-controls > label, .dashboard-period-label,
.report-controls label, .report-controls .field-label { color: #dbeafe; }
.dashboard-chart-panel, .dashboard-panel, .input-panel { background: linear-gradient(145deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 7%)); }
.result-hero {
  background: radial-gradient(circle at 88% 8%, rgb(96 165 250 / 48%), transparent 40%), linear-gradient(135deg, #0b1f4d, #1749a7 62%, #2563eb);
  box-shadow: 0 18px 42px rgb(3 11 32 / 34%);
}
.result-hero.empty { background: linear-gradient(135deg, #0b1f4d, #1749a7); }
.result-kicker { color: #dbeafe; }
.estimate-note span { color: #93c5fd; }
.dashboard-purchase-stats > div { color: #dbeafe; border-color: var(--glass-border); background: rgb(7 21 47 / 22%); }
.dashboard-chart { color: #dbeafe; }

.field-label { color: #eff6ff; }
.input-wrap, .cloud-auth-form input, .cloud-business-register-form input,
.cloud-shop-form input, .cloud-shop-form select, .cloud-staff-form input,
.cloud-staff-form select, .local-currency-controls select, .dialog-input,
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  color: #f8fafc;
  background: rgb(7 21 47 / 46%);
  border-color: rgb(191 219 254 / 30%);
}
input::placeholder, textarea::placeholder { color: #a9bddc; opacity: 1; }
select option { color: #f8fafc; background: #0b1f4d; }
.dashboard-period-controls select, .dashboard-custom-dates input,
.report-controls select, .report-controls input, .local-currency-controls select {
  color: #f8fafc !important;
  background-color: rgb(7 21 47 / 72%) !important;
  border-color: rgb(191 219 254 / 34%);
}
.checkout-payment-field input, .checkout-payment-field select,
.checkout-payment-field select option {
  color: #f8fafc !important;
  background-color: #0b1f4d !important;
  border-color: rgb(191 219 254 / 34%);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}
.input-wrap:focus-within, .dialog-input:focus, .cloud-auth-form input:focus,
.cloud-shop-form input:focus, .cloud-shop-form select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgb(96 165 250 / 24%);
}

button, .primary-button, .secondary-button, .danger-button { touch-action: manipulation; }
.primary-button, .cloud-auth-form button[type="submit"] {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4169e1);
  border-color: rgb(191 219 254 / 34%);
  box-shadow: 0 7px 20px rgb(37 99 235 / 30%);
}
.primary-button:hover:not(:disabled), .cloud-auth-form button[type="submit"]:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #365bd0);
  box-shadow: 0 10px 24px rgb(37 99 235 / 42%);
  transform: translateY(-1px);
}
.secondary-button, .password-visibility, .text-action, .dashboard-cogs-open {
  color: #eff6ff;
  background: rgb(255 255 255 / 9%);
  border-color: var(--glass-border);
}
.secondary-button:hover:not(:disabled), .password-visibility:hover {
  color: #fff;
  background: rgb(96 165 250 / 20%);
  border-color: rgb(191 219 254 / 52%);
}
.danger-button { color: #fee2e2; background: rgb(127 29 29 / 32%); border-color: rgb(252 165 165 / 40%); }
.danger-button:hover:not(:disabled) { color: #fff; background: rgb(153 27 27 / 54%); }
.button:disabled, button:disabled { filter: saturate(.7); }

.table-scroll { border: 1px solid var(--glass-border); border-radius: 12px; background: rgb(7 21 47 / 18%); }
.product-table { color: #f8fafc; }
.product-table th { color: #dbeafe; background: rgb(7 21 47 / 74%); border-color: var(--glass-border); }
.product-table td { color: #f1f5f9; border-color: rgb(255 255 255 / 12%); }
.product-table tbody tr { background: rgb(255 255 255 / 3%); }
.product-table tbody tr:nth-child(even) { background: rgb(255 255 255 / 7%); }
.product-table tbody tr:hover { background: rgb(96 165 250 / 14%); }
.product-table tfoot th, .product-table tfoot td { color: #f8fafc; background: rgb(7 21 47 / 52%); }
.empty-state, .empty-state p { color: #cbd5e1; }
.status-pill { border: 1px solid rgb(255 255 255 / 18%); }
.metric-icon, .revenue-icon { color: #bfdbfe; background: rgb(96 165 250 / 18%); }
.text-action, .dashboard-cogs-open { color: #bfdbfe; }

.mobile-view-nav {
  background: rgb(7 21 47 / 86%);
  color: #eff6ff;
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 30px rgb(3 11 32 / 34%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.mobile-view-nav button { color: #dbeafe; }
.mobile-view-nav button.active { color: #fff; background: linear-gradient(105deg, #2563eb, #4169e1); border-color: #93c5fd; }
.topbar { z-index: 18; }
.local-currency-panel { margin-top: 14px; }
.local-currency-controls select { min-height: 42px; }
.cloud-staff-panel, .cloud-subscription-panel { background: rgb(255 255 255 / 8%); border-color: var(--glass-border); }
.cloud-staff-list li { color: #f8fafc; background: rgb(7 21 47 / 34%); border-color: var(--glass-border); }
.cloud-business-account-details { color: #dbeafe; background: rgb(7 21 47 / 34%); }
.cloud-setup-error, .account-form-error, .form-error { color: #fee2e2; background: rgb(127 29 29 / 30%); border-color: rgb(252 165 165 / 45%); }
.reset-options, .reset-options article { border-color: var(--glass-border); }
.reset-options article { background: rgb(255 255 255 / 6%); }
.reset-all-option, .reset-dialog-warning { color: #fee2e2; background: rgb(127 29 29 / 24%); border-color: rgb(252 165 165 / 38%); }
.footer { color: #cbd5e1; }
.product-photo-field, .product-photo-preview-wrap { background: rgb(7 21 47 / 32%); border-color: var(--glass-border); }
.product-photo-placeholder, .product-photo-thumb-placeholder { color: #cbd5e1; }
.break-even-card, .formula-card, .checkout-product, .checkout-cart-line,
.checkout-payment-row, .supplier-purchase-history, .supplier-purchase-item,
.dashboard-cogs-row, .dashboard-cogs-message, .dashboard-category-track,
.import-preview-result, .checkout-cart-panel, .checkout-payment-panel {
  color: #f8fafc;
  background: rgb(255 255 255 / 8%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}
.break-even-card > strong, .formula-card strong, .checkout-product strong,
.checkout-cart-line strong, .supplier-purchase-item strong { color: #f8fafc; }
.be-copy, .be-copy > span, .formula-card p, .checkout-product small,
.checkout-cart-line small { color: #cbd5e1; }
.local-notice, .dashboard-notice, .dashboard-warning, .dashboard-error,
.storage-message, .product-toast, .error-toast {
  color: #10234a;
  background: #dbeafe;
  border-color: rgb(147 197 253 / 75%);
}
.notice-icon { color: #1d4ed8; background: #fff; }
.error-toast, .dashboard-error, .error-toast p, .dashboard-error p {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}
.payment-status { color: #dbeafe; background: rgb(96 165 250 / 20%); }
.payment-status.paid { color: #dcfce7; background: rgb(22 101 52 / 48%); }
.payment-status.invalid { color: #fee2e2; background: rgb(127 29 29 / 40%); }
.count-pill { color: #eff6ff; background: rgb(96 165 250 / 22%); border-color: var(--glass-border); }

dialog.product-dialog, dialog.receipt-dialog {
  color: #f8fafc;
  background: linear-gradient(150deg, #102b62, #0b1f4d 70%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 44%);
}
.product-dialog::backdrop, .receipt-dialog::backdrop, .reset-confirm-dialog::backdrop {
  background: rgb(3 11 32 / 72%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.sale-detail-sheet, .receipt-paper, .receipt-paper-thermal, .receipt-paper-a4 { color: #172554; background: #fff; }
.sale-detail-sheet .product-table, .sale-detail-sheet .product-table td,
.sale-detail-sheet .product-table th { color: #172554; }
.sale-detail-sheet .product-table th { background: #dbeafe; }
.sale-detail-note { color: #475569; }

@media (max-width: 800px) {
  .sidebar { background: rgb(7 21 47 / 94%); }
}
@media (max-width: 650px) {
  .main-content { padding-left: 14px; padding-right: 14px; }
  .topbar { background: rgb(7 21 47 / 88%); }
  .mobile-view-nav { margin-left: -14px; margin-right: -14px; }
  .mobile-view-nav button { min-height: 44px; }
  .panel, .metric-card, .report-metric { border-radius: 13px; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-payment-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-payment-row .payment-confirm-label { grid-column: 1 / -1; }
  .local-currency-controls { align-items: stretch; flex-direction: column; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .panel, .metric-card, .report-metric,
  .dashboard-panel, .dashboard-chart-panel, .input-panel,
  .result-card, .local-currency-panel, .cloud-auth-form,
  .cloud-shop-form, .import-preview-panel, .mobile-view-nav {
    background-color: #102653;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}