/* Unified Careyosity POS brand/theme overrides for the safe public concept preview. */
:root {
  --ink: var(--brand-text);
  --ink-2: color-mix(in srgb, var(--brand-text) 88%, var(--brand-plum));
  --muted: var(--brand-muted);
  --paper: var(--brand-surface);
  --white: var(--brand-surface-raised);
  --line: var(--brand-border);
  --soft: color-mix(in srgb, var(--brand-surface-raised) 88%, var(--brand-teal) 7%);
  --peach: var(--brand-gold);
  --peach-2: #ffe2a0;
  --lilac: #82d7cf;
  --purple: var(--brand-plum);
  --purple-2: #67306d;
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--danger);
  --shadow: var(--brand-shadow);
}

html, body { background: var(--brand-surface); color: var(--brand-text); }
body { background-image: radial-gradient(circle at 94% 7%, rgb(8 127 122 / 9%), transparent 27%), linear-gradient(135deg, var(--brand-surface), color-mix(in srgb, var(--brand-surface) 94%, var(--brand-plum))); }
.app-header { background: var(--brand-shell-gradient); border-color: var(--brand-shell-border); color: var(--brand-shell-text); }
.brand-mark-image { width: 42px; height: 42px; object-fit: contain; flex: none; }
.brand { color: var(--brand-shell-text); }
.brand b, .mobile-nav-toggle > span:first-child, .sidebar-intro span { color: var(--brand-amber); }
.header-context { color: var(--brand-shell-muted); }
.exit-link { color: var(--brand-teal); }
.mobile-nav-toggle { border-color: var(--brand-shell-border); background: var(--brand-shell-raised); color: var(--brand-shell-text); }
.concept-alert { background: color-mix(in srgb, var(--brand-surface-raised) 83%, var(--brand-gold) 17%); border-color: color-mix(in srgb, var(--brand-border), var(--brand-gold) 34%); color: var(--brand-text); }
.concept-alert strong { color: var(--brand-plum); }
.concept-alert span { color: var(--brand-muted); }
.sidebar { background: var(--brand-nav-gradient); color: var(--brand-nav-text); }
.sidebar-top, .sidebar-foot { border-color: var(--brand-nav-border); }
.sidebar-intro strong { color: var(--brand-nav-text); }
.sidebar-collapse, .mobile-nav-close { border-color: var(--brand-nav-border); background: var(--brand-shell-raised); color: var(--brand-nav-text); }
.sidebar-collapse:hover, .sidebar-collapse:focus-visible, .mobile-nav-close:hover, .mobile-nav-close:focus-visible { background: var(--brand-nav-hover); }
.nav-button { color: var(--brand-nav-muted); }
.nav-button:hover { background: var(--brand-nav-hover); color: var(--brand-nav-text); }
.nav-button.active { border-color: var(--brand-nav-border); background: var(--brand-nav-active); color: var(--brand-nav-text); box-shadow: inset 3px 0 var(--brand-gold); }
.nav-icon { color: var(--brand-teal); }
.sidebar-foot { color: var(--brand-nav-muted); }
.sidebar-foot small { color: var(--brand-nav-muted); }
.workspace, .screen { color: var(--brand-text); }
.catalog-panel, .cart-panel, .data-card, .metric-card, .product-card,
.integration-card, .customer-card, .check-payment-card, .split-payment-row, .split-balance > span,
.detail-stat, .detail-list, .market-hero, dialog, .dialog-card, .receipt-paper,
.option-buttons button, .variant-choice, .adjust-grid button, .tender-grid button,
.check-tenders button, .category-row button, .segmented button, .quick-add button,
.tip-options button, .secondary-button, .tool-button, .search, .field input, .field select, .field textarea,
.split-payment-row select, .split-payment-row input, .custom-check-grid input,
.split-count select, .item-assignment select { background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border); }
.skip { background: var(--brand-surface-raised); color: var(--brand-text); }
.product-card:hover { border-color: var(--brand-teal); }
.product-price span:first-child { color: var(--brand-gold); }
.primary-button { background: linear-gradient(135deg, var(--brand-gold), #f09b20); color: var(--brand-plum-deep); }
.primary-button:hover { background: linear-gradient(135deg, #ffdb79, var(--brand-gold)); }
.eyebrow, .quiet-button, .text-button, .secondary-button, .tool-button,
.integration-card .integration-icon, .workflow-back { color: var(--brand-teal); }
.category-row button.active, .segmented button.active, .option-buttons button.active,
.tip-options button.active { background: var(--brand-plum); color: var(--brand-text-dark); border-color: var(--brand-plum); }
.feedback-dock { background: color-mix(in srgb, var(--brand-surface-raised) 86%, var(--brand-gold) 14%); border-color: color-mix(in srgb, var(--brand-border), var(--brand-gold) 35%); }
.provider-card { background: var(--brand-shell-gradient); color: var(--brand-shell-text); border-color: var(--brand-shell-border); }
.provider-card .eyebrow { color: var(--brand-teal); }
.provider-card p:not(.eyebrow) { color: var(--brand-shell-muted); }
.provider-diagram span { border-color: var(--brand-shell-border); background: var(--brand-shell-raised); color: var(--brand-shell-text); }
.provider-diagram i { color: var(--brand-amber); }
.donut::after { background: var(--brand-surface-raised); color: var(--brand-muted); }
.toast { background: var(--brand-plum-deep); color: var(--brand-text-dark); border: 1px solid rgb(246 191 60 / 30%); }

.preview-theme-control { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--brand-shell-border); border-radius: 999px; background: color-mix(in srgb, var(--brand-shell-raised) 78%, transparent); }
.preview-theme-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.preview-theme-control button { min-width: 44px; min-height: 36px; padding: 6px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--brand-shell-text); font-size: 10px; font-weight: 800; cursor: pointer; }
.preview-theme-control button.active { background: var(--brand-gold); color: var(--brand-plum-deep); }

:root[data-theme="dark"] { --purple: #82d7cf; --purple-2: #c38dca; }
:root[data-theme="dark"] .concept-alert strong { color: var(--brand-text); }
:root[data-theme="dark"] .concept-alert span { color: var(--brand-muted); }
:root[data-theme="dark"] .status-pill { background: #19352f; color: #9be8bd; border-color: #376452; }
:root[data-theme="dark"] .concept-chip { background: #33203b; color: #a8ebe4; border-color: #67466f; }
:root[data-theme="dark"] .customer-card, :root[data-theme="dark"] .tip-options button,
:root[data-theme="dark"] .food-scope, :root[data-theme="dark"] .receipt-paper,
:root[data-theme="dark"] .split-mode-grid button, :root[data-theme="dark"] .check-preview span,
:root[data-theme="dark"] .item-assignment label, :root[data-theme="dark"] .remove-split,
:root[data-theme="dark"] .promo-button { background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border); }
:root[data-theme="dark"] .promotion-row, :root[data-theme="dark"] .integration-card span,
:root[data-theme="dark"] .source-pill, :root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .tender-grid button > span, :root[data-theme="dark"] .empty-cart > span {
  background: #34213c; color: #a8ebe4; border-color: #67466f;
}
:root[data-theme="dark"] .source-pill.online { background: #183547; color: #bfe6ff; }
:root[data-theme="dark"] .source-pill.in-person { background: #46311f; color: #ffd7ac; }
:root[data-theme="dark"] .product-visual { color: var(--brand-plum-deep); }
:root[data-theme="dark"] .receipt-result, :root[data-theme="dark"] .check-payment-card.paid {
  background: #19352f; color: var(--brand-text); border-color: #376452;
}
:root[data-theme="dark"] .receipt-result p { color: #c8e8d9; }
:root[data-theme="dark"] .receipt-mark { background: #234b3e; color: #9be8bd; }
:root[data-theme="dark"] .search input, :root[data-theme="dark"] .profile-switcher select,
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }
:root[data-theme="dark"] .checkout-review, :root[data-theme="dark"] .order-type,
:root[data-theme="dark"] .adjustments, :root[data-theme="dark"] .quote-state,
:root[data-theme="dark"] .check-payment-card.paid, :root[data-theme="dark"] .receipt-result { background: #2b1932; }
:root[data-theme="dark"] dialog::backdrop { background: rgb(7 2 10 / 82%); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --purple: #82d7cf; --purple-2: #c38dca; }
  :root:not([data-theme="light"]) .concept-alert strong { color: var(--brand-text); }
  :root:not([data-theme="light"]) .concept-alert span { color: var(--brand-muted); }
  :root:not([data-theme="light"]) .status-pill { background: #19352f; color: #9be8bd; border-color: #376452; }
  :root:not([data-theme="light"]) .concept-chip { background: #33203b; color: #a8ebe4; border-color: #67466f; }
  :root:not([data-theme="light"]) .customer-card, :root:not([data-theme="light"]) .tip-options button,
  :root:not([data-theme="light"]) .food-scope, :root:not([data-theme="light"]) .receipt-paper,
  :root:not([data-theme="light"]) .split-mode-grid button, :root:not([data-theme="light"]) .check-preview span,
  :root:not([data-theme="light"]) .item-assignment label, :root:not([data-theme="light"]) .remove-split,
  :root:not([data-theme="light"]) .promo-button { background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border); }
  :root:not([data-theme="light"]) .promotion-row, :root:not([data-theme="light"]) .integration-card span,
  :root:not([data-theme="light"]) .source-pill, :root:not([data-theme="light"]) .avatar,
  :root:not([data-theme="light"]) .tender-grid button > span, :root:not([data-theme="light"]) .empty-cart > span {
    background: #34213c; color: #a8ebe4; border-color: #67466f;
  }
  :root:not([data-theme="light"]) .source-pill.online { background: #183547; color: #bfe6ff; }
  :root:not([data-theme="light"]) .source-pill.in-person { background: #46311f; color: #ffd7ac; }
  :root:not([data-theme="light"]) .product-visual { color: var(--brand-plum-deep); }
  :root:not([data-theme="light"]) .receipt-result, :root:not([data-theme="light"]) .check-payment-card.paid { background: #19352f; color: var(--brand-text); border-color: #376452; }
  :root:not([data-theme="light"]) .receipt-result p { color: #c8e8d9; }
  :root:not([data-theme="light"]) .receipt-mark { background: #234b3e; color: #9be8bd; }
  :root:not([data-theme="light"]) .search input, :root:not([data-theme="light"]) .profile-switcher select,
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea { color-scheme: dark; }
  :root:not([data-theme="light"]) .checkout-review, :root:not([data-theme="light"]) .order-type,
  :root:not([data-theme="light"]) .check-payment-card.paid, :root:not([data-theme="light"]) .receipt-result { background: #2b1932; }
}

@media (max-width: 980px) {
  .app-header { flex-wrap: wrap; max-width: 100vw; gap: 8px 14px; }
  .header-context { order: 3; width: calc(100% - 200px); margin-left: 48px; }
  .preview-theme-control { order: 4; margin-left: auto; }
  .preview-theme-control button { min-width: 40px; padding-inline: 7px; }
}
@media (max-width: 600px) {
  .preview-theme-control { order: 4; width: 100%; justify-content: center; }
  .brand-mark-image { width: 36px; height: 36px; }
}