/* =====================================================================
   CTR Suite 2.0.0 RC11 — Theme System V2
   Final-authority appearance layer: light/dark/system + sidebar modes.
   Semantic success/warning/error colors remain intentionally independent.
   ===================================================================== */

:root{
  --chat-primary:var(--blue,#2F6FEA);
  --chat-primary-strong:var(--blue-dark,#1E5FE0);
  --chat-primary-soft:var(--blue-soft,#EEF4FF);
  --bill-blue:var(--blue,#2F6FEA);
  --bill-blue-soft:var(--blue-soft,#EEF4FF);
  --theme-surface-0:var(--bg,#F3F5FB);
  --theme-surface-1:var(--card,#FFFFFF);
  --theme-surface-2:#F8FAFC;
  --theme-surface-3:#F1F5F9;
  --theme-input:#FFFFFF;
  --theme-overlay:rgba(255,255,255,.96);
  --theme-elevated-shadow:0 20px 52px -30px rgba(15,23,42,.34);
}

html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1120;
  --card:#111827;
  --border:#273244;
  --text:#F8FAFC;
  --mute:#A3AEC2;
  --mute-2:#718096;
  --theme-surface-0:#0B1120;
  --theme-surface-1:#111827;
  --theme-surface-2:#151E2F;
  --theme-surface-3:#1B2638;
  --theme-input:#0F172A;
  --theme-overlay:rgba(17,24,39,.97);
  --red-soft:rgba(225,29,72,.14);
  --teal-soft:rgba(20,199,180,.13);
  --purple-soft:rgba(124,92,252,.16);
  --amber-soft:rgba(251,146,60,.14);
  --ctr-surface-border:#273244;
  --ctr-surface-shadow:0 1px 2px rgba(0,0,0,.24);
  --ctr-surface-shadow-float:0 22px 58px -34px rgba(0,0,0,.82);
  --theme-elevated-shadow:0 22px 58px -34px rgba(0,0,0,.82);
}

/* Accent soft surfaces must remain usable in both modes. */
html[data-theme="dark"]{
  --blue-soft:color-mix(in srgb,var(--blue) 15%,#111827);
  --primary-soft:var(--blue-soft);
  --theme-primary-soft:var(--blue-soft);
}

/* Sidebar personality */
html[data-sidebar-theme="navy"]{
  --sidebar-1:#0A1230;
  --sidebar-2:#132352;
  --sidebar-line:rgba(255,255,255,.08);
  --sidebar-text:rgba(255,255,255,.66);
}
html[data-sidebar-theme="neutral"]{
  --sidebar-1:#111827;
  --sidebar-2:#1F2937;
  --sidebar-line:rgba(255,255,255,.075);
  --sidebar-text:rgba(255,255,255,.66);
}
html[data-theme="dark"][data-sidebar-theme="neutral"]{
  --sidebar-1:#070B12;
  --sidebar-2:#111827;
}
html[data-sidebar-theme="theme"]{
  --sidebar-1:color-mix(in srgb,var(--blue) 34%,#071022);
  --sidebar-2:color-mix(in srgb,var(--blue) 52%,#0B1731);
  --sidebar-line:rgba(255,255,255,.09);
  --sidebar-text:rgba(255,255,255,.72);
}

/* Canvas / shell */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .module-page,
html[data-theme="dark"] .customer-page,
html[data-theme="dark"] .profile-page,
html[data-theme="dark"] .opening-shift-page,
html[data-theme="dark"] .reports-detail-page,
html[data-theme="dark"] .sales-modern-page,
html[data-theme="dark"] .sales-detail-modern-page{
  background-color:var(--bg)!important;
  color:var(--text);
}
html[data-theme="dark"] .topbar{
  background:rgba(11,17,32,.94)!important;
  border-color:var(--border)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}
html[data-theme="dark"] #pageLoader{background:#080D18}

/* Common surfaces */
html[data-theme="dark"] :is(
  .m-card,.m-kpi,.m-modal,.m-drawer,.modal-content,.drawer-content,
  .customer-stat,.customer-table-wrap,.customer-toolbar,.profile-card,
  .tbl-stat-card,.tbl-card,.pb-card,.list-card,.filter-bar,.stat-card,.insight-card,
  .sales-modern-page .filter-card,.sales-modern-page .table-card,.sales-modern-page .summary-card,
  .reports-detail-page .panel,.reports-detail-page .detail-hero-card,.reports-detail-page .detail-mini-card,.reports-detail-page .method-card,
  .rh-card,.rh-methods,.rh-controlbar,.rh-insight,.rh-stat,
  .cs-card,.cs-kpi-card,.cr-card,.cr-kpi-card,.billing-card,.billing-plan-card,
  .invoice-document,.pmx-card,.pmx-stat-card,.catalog-card,.cart-card,
  .settings-nav,.settings-side-note,.setting-stat,.settings-link,.section-badge,
  .notification-card,.dropdown-menu,.user-menu,.help-menu
){
  background-color:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] :is(.m-card-head,.list-head,.sales-data-head,.billing-card-head,.cs-card-head,.cr-card-head){border-color:var(--border)!important}

/* Inputs and interactive neutral surfaces */
html[data-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea,
  .m-input,.m-select,.m-textarea,.search-box,.global-search,.customer-search,
  .chat-sidebar-search input
){
  background-color:var(--theme-input)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#69768C!important}
html[data-theme="dark"] option{background:#111827;color:#F8FAFC}

/* Tables: keep dense data readable without turning semantic badges monochrome. */
html[data-theme="dark"] :is(table,.m-table,.customer-table,.sales-table){color:var(--text)}
html[data-theme="dark"] :is(table thead,.m-table thead,.customer-table thead,.sales-table thead){background:#151E2F!important}
html[data-theme="dark"] :is(table th,.m-table th,.customer-table th,.sales-table th){color:#AAB5C8!important;border-color:var(--border)!important}
html[data-theme="dark"] :is(table td,.m-table td,.customer-table td,.sales-table td){color:var(--text);border-color:var(--border)!important}
html[data-theme="dark"] :is(table tbody tr,.m-table tbody tr,.customer-table tbody tr,.sales-table tbody tr){background:var(--card)}
html[data-theme="dark"] :is(table tbody tr:hover,.m-table tbody tr:hover,.customer-table tbody tr:hover,.sales-table tbody tr:hover){background:#151E2F!important}

/* Menus / neutral buttons */
html[data-theme="dark"] :is(.icon-btn,.topbar-btn,.chat-header-close,.chat-back-btn,.btn-outline,.btn-secondary,.m-btn:not(.primary),.pb-btn:not(.pb-btn-primary)){
  border-color:var(--border)!important;
}
html[data-theme="dark"] :is(.icon-btn,.topbar-btn,.chat-header-close,.chat-back-btn,.btn-outline,.btn-secondary,.m-btn:not(.primary),.pb-btn:not(.pb-btn-primary)){
  background-color:var(--card)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] :is(.dropdown-item,.help-item,.settings-nav a){color:var(--mute)}
html[data-theme="dark"] :is(.dropdown-item:hover,.help-item:hover,.settings-nav a:hover){background:var(--theme-surface-2)!important;color:var(--text)!important}

/* Shift pill and topbar account */
html[data-theme="dark"] .shift-indicator{
  background:linear-gradient(135deg,#111827,#151E2F)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .shift-info small{color:var(--mute)!important}
html[data-theme="dark"] :is(.user-dropdown,.topbar-user,.profile-trigger){background:var(--card);border-color:var(--border);color:var(--text)}

/* Settings V2 */
html[data-theme="dark"] .theme-save-toast{background:rgba(17,24,39,.98);color:#D1FAE5;box-shadow:var(--theme-elevated-shadow)}
html[data-theme="dark"] .theme-save-toast small{color:var(--mute)}
html[data-theme="dark"] .theme-v2-preview{background:#0D1423;border-color:var(--border)}
html[data-theme="dark"] .theme-v2-preview-main{background:#0B1120}
html[data-theme="dark"] .theme-v2-preview-card{background:#151E2F;border-color:#273244}

/* Message V2 gets the same appearance without changing status/reaction semantics. */
html[data-theme="dark"]{
  --chat-bg:#0B1120;
  --chat-surface:#111827;
  --chat-border:#273244;
  --chat-border-strong:#334155;
  --chat-ink:#F8FAFC;
  --chat-ink-soft:#A3AEC2;
  --chat-ink-faint:#718096;
  --chat-primary:var(--blue);
  --chat-primary-strong:var(--blue-dark);
  --chat-primary-soft:var(--blue-soft);
  --chat-shadow:0 28px 80px rgba(0,0,0,.46),0 8px 24px rgba(0,0,0,.28);
}
html[data-theme="dark"] :is(.chat-header,.chat-sidebar,.chat-user){background:var(--chat-surface)!important;border-color:var(--chat-border)!important}
html[data-theme="dark"] :is(.chat-content,.chat-messages-shell,.chat-messages){background-color:var(--chat-bg)!important}
html[data-theme="dark"] .chat-item:hover{background:#151E2F}
html[data-theme="dark"] .chat-item.active{background:var(--blue-soft)}
html[data-theme="dark"] :is(.chat-info strong,.chat-user-copy strong,.chat-empty h3){color:var(--chat-ink)}
html[data-theme="dark"] .chat-message-row.other .chat-message-card{background:#151E2F;border-color:#273244;color:#F8FAFC}
html[data-theme="dark"] .chat-message-row.me .chat-message-card{background:var(--blue);border-color:var(--blue);color:var(--theme-on-primary,#fff)}
html[data-theme="dark"] :is(.chat-reply-quote,.chat-file-link){background:#1B2638;color:#D8E0EC}
html[data-theme="dark"] .chat-date-separator{background:#1B2638;color:#A3AEC2}
html[data-theme="dark"] .chat-load-older{background:#151E2F;color:#A3AEC2;border-color:#273244}

/* Bespoke debt / closing / management surfaces that predate shared tokens. */
html[data-theme="dark"] :is(
  .fb-search,.month-filter,.chip,.modal,.drawer,.mini-btn,.btn-ghost,
  .rh-search,.rh-view-btn.active,.rh-drawer,.rh-filter,.rh-filter-control,
  .bon-mode-card,.bon-mode-card .mode-ic,.kasbon-form-modal .method-card,
  .field input,.field select,.field textarea
){background-color:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] :is(.fb-search input,.month-filter input,.month-filter select){background:transparent!important;color:var(--text)!important}

/* Accent-sensitive legacy components are normalized here rather than per-page. */
.chat-message-row.me .chat-message-card{background:var(--blue)!important;border-color:var(--blue)!important;color:var(--theme-on-primary,#fff)!important}
.chat-item.active::before,.chat-unread{background:var(--blue)!important}
.global-search-status[data-kind="loading"],.global-search-icon{color:var(--blue)!important}
.global-search-icon{background:var(--blue-soft)!important}

html[data-theme="dark"] :is(
  .billing-service,.billing-plan-card,.billing-plan-summary,.invoice-box,.upgrade-price,.plan-card,
  .mode-card,.setting-row,.compat-row,.printer-settings-card,.subscription-center-nav,
  .receipt-lock-note,.payment-option,.theme-v2-color-field,.theme-v2-segment
){background-color:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] :is(.billing-service-copy strong,.billing-plan-top strong,.plan-card h2,.price strong,.invoice-box strong){color:var(--text)!important}
html[data-theme="dark"] :is(.billing-service-copy span,.plan-card>p,.price span,.price small,.statusline,.invoice-box p){color:var(--mute)!important}
html[data-theme="dark"] .billing-plan input:checked + .billing-plan-card{background:var(--blue-soft)!important;border-color:var(--blue)!important}
html[data-theme="dark"] .billing-plan-badge{background:var(--blue-soft)!important;color:var(--blue)!important}
html[data-theme="dark"] .price{border-color:var(--border)!important}
html[data-theme="dark"] .subscription-center-nav a{color:var(--text)!important}
html[data-theme="dark"] .subscription-center-nav a.active{color:var(--theme-on-primary,#fff)!important}

/* Preserve paper/receipt realism even when UI is dark. */
html[data-theme="dark"] :is(.receipt-paper,.receipt-preview,.print-preview,.thermal-paper){color-scheme:light}

/* Avoid transitions while the system mode flips; individual interactive states remain smooth. */
@media (prefers-reduced-motion:reduce){html[data-theme] *{scroll-behavior:auto!important}}

/* =====================================================================
   CTR Suite 2.0.0 RC12 — Accent Completeness Audit
   Legacy modules must consume Theme V2 tokens instead of fixed CTR blue.
   Semantic success / warning / error and category colors stay independent.
   ===================================================================== */
:root{
  --rh-indigo:var(--blue,#2F6FEA);
  --rh-purple:var(--blue-light,#4C8CF5);
  --report-blue-600:var(--blue,#2F6FEA);
  --report-blue-500:var(--blue-light,#4C8CF5);
  --brand-1:var(--blue,#2F6FEA);
  --brand-2:var(--blue-light,#4C8CF5);
  --brand-100:var(--blue-soft,#EEF4FF);
}

/* Primary actions: one accent contract across legacy and modern pages. */
:is(
  .owner-primary-link,
  .date-filter-apply,
  .refresh-btn,
  .btn-primary,
  .m-btn.primary,
  .pb-btn-primary,
  .pay-mini.primary,
  .sal-save,
  .ctr-flow-nav a.active,
  .ctr-hr-quick-link.active,
  .reports-detail-page .section-tab.active,
  .subscription-center-nav a.active
){
  background-color:var(--blue)!important;
  border-color:var(--blue)!important;
  color:var(--theme-on-primary,#fff)!important;
}
:is(.owner-primary-link,.btn-primary,.m-btn.primary,.pb-btn-primary,.pay-mini.primary,.sal-save):focus-visible{
  outline:0!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)!important;
}

/* Dashboard command center / quick actions. */
.owner-command{
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 7.5%,transparent),rgba(20,199,180,.035) 55%,var(--card,#fff))!important;
}
.owner-command::after{background:color-mix(in srgb,var(--blue) 8%,transparent)!important}
.owner-command.warn{background:linear-gradient(135deg,rgba(245,158,11,.08),color-mix(in srgb,var(--blue) 3.5%,transparent),var(--card,#fff))!important}
.owner-kpi.primary{border-color:color-mix(in srgb,var(--blue) 22%,var(--border))!important;background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 5.5%,transparent),var(--card))!important}
.owner-kpi:not(.danger):not(.success) .owner-kpi-label i,
.owner-kpi-foot>a,.owner-action-side small,.owner-more-link{color:var(--blue)!important}
.owner-target-bar i{background:var(--blue)!important}
.owner-kpi.target.good .owner-target-bar i{background:#16a34a!important}
.owner-kpi.target.warn .owner-target-bar i{background:#f59e0b!important}
.owner-kpi.target.bad .owner-target-bar i{background:#dc2626!important}
.date-quick-btn.active{background:var(--blue-soft)!important;border-color:var(--blue)!important;color:var(--blue)!important}

/* Modern report / closing surfaces with their own historical palettes. */
.reports-detail-page .summary-icon.net{background:linear-gradient(135deg,var(--blue-light),var(--blue))!important}
.rh-btn-primary,.rh-avatar{background:linear-gradient(135deg,var(--blue),var(--blue-light))!important}
.rh-insight-ic{background:var(--blue-soft)!important;color:var(--blue)!important}
.rh-search:focus-within,.rh-filter:focus{border-color:color-mix(in srgb,var(--blue) 38%,var(--border))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 8%,transparent)!important}

/* HR / team / forms: accent-tinted neutral helpers follow the selected theme. */
.month-nav a:hover,.role-icon,.staff-avatar,.pay-avatar,.sal-avatar{
  background:color-mix(in srgb,var(--blue) 9%,transparent)!important;
  color:var(--blue)!important;
}
.att-tip,.pay-tip,.sal-tip,.direct-note{
  background:color-mix(in srgb,var(--blue) 4.5%,transparent)!important;
  border-color:color-mix(in srgb,var(--blue) 15%,var(--border))!important;
}
.day-head.today,.rate-pill,.sal-staff-count,.sal-period.current{
  background:color-mix(in srgb,var(--blue) 7%,transparent)!important;
}
.rate-pill,.sal-staff-count{color:var(--blue)!important}

/* Shared utility surfaces that previously retained pale blue after changing accent. */
.ctr-toast-icon,.ctr-dialog-icon{background:var(--blue-soft)!important;color:var(--blue)!important}
.global-search-shell:focus-within{border-color:color-mix(in srgb,var(--blue) 48%,var(--border))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 8%,transparent)!important}
.logout-confirm-avatar{background:linear-gradient(135deg,var(--blue),var(--blue-light))!important;color:var(--theme-on-primary,#fff)!important}

/* Sales primary cards/actions. Payment-method category colors are intentionally untouched. */
.content .summary-card.total,.sales-detail-modern-page .summary-card.total{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%)!important;
}
.refresh-btn:hover{box-shadow:0 12px 30px color-mix(in srgb,var(--blue) 25%,transparent)!important}

/* POS action feedback and cart context follow accent, while cash/QRIS method semantics remain distinct. */
.posx-order-chip{
  background:color-mix(in srgb,var(--blue) 14%,transparent)!important;
  border-color:color-mix(in srgb,var(--blue) 35%,transparent)!important;
  color:var(--blue-light)!important;
}

/* Theme-aware dark surfaces for legacy helper cards. */
html[data-theme="dark"] :is(.finance-mini div,.sal-metric){background:var(--theme-surface-2)!important}

/* =====================================================================
   RC14 — DARK MODE CONTRAST HARDENING
   Standalone setup uses historical fixed light colors. Without this final
   authority layer, Theme V2 turns inherited text white while the card stays
   white, making headings and labels appear missing.
   ===================================================================== */
html[data-theme="dark"] body.ctr-setup-page .main{
  background:var(--bg)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] body.ctr-setup-page :is(.card,.setup-saving-box){
  background:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--theme-elevated-shadow)!important;
}
html[data-theme="dark"] body.ctr-setup-page :is(.top,.actions){border-color:var(--border)!important}
html[data-theme="dark"] body.ctr-setup-page :is(.top h2,.head h3,.done h2,.setup-saving h3){color:var(--text)!important}
html[data-theme="dark"] body.ctr-setup-page :is(.head p,.hint,.done p,.setup-saving p,.setup-saving small,.field label){color:var(--mute)!important}
html[data-theme="dark"] body.ctr-setup-page :is(.file,.check span,.invite-link){
  background:var(--theme-surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] body.ctr-setup-page .check input:checked + span{
  background:var(--blue-soft)!important;
  border-color:var(--blue)!important;
  color:var(--blue-light)!important;
}
html[data-theme="dark"] body.ctr-setup-page :is(.progress,.btn.back){
  background:var(--theme-surface-3)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] body.ctr-setup-page .head .icon{background:var(--blue-soft)!important;color:var(--blue-light)!important}
html[data-theme="dark"] body.ctr-setup-page .alert{background:rgba(225,29,72,.14)!important;border-color:rgba(251,113,133,.28)!important;color:#FDA4AF!important}
html[data-theme="dark"] body.ctr-setup-page .warn{background:rgba(245,158,11,.13)!important;border-color:rgba(251,191,36,.25)!important;color:#FCD34D!important}

/* Generic module titles sometimes retained a fixed dark ink color from old
   page-local CSS. These high-level text roles are safe to normalize globally. */
html[data-theme="dark"] :is(.module-head,.m-card-head,.page-head,.panel-head,.modal-head,.drawer-head) :is(h1,h2,h3,h4){color:var(--text)!important}
html[data-theme="dark"] :is(.module-head,.m-card-head,.page-head,.panel-head,.modal-head,.drawer-head) p{color:var(--mute)!important}

/* =====================================================================
   RC15 — PAGE-SPECIFIC DARK MODE CONTRAST
   A handful of legacy modules still own fixed light-palette variables or
   white controls. Keep their foreground and surface tokens in the same
   dark palette so labels never disappear against their background.
   ===================================================================== */

/* POS catalogue: inactive category controls must not stay white. Product
   cards intentionally remain light, therefore their copy stays dark. */
html[data-theme="dark"] :is(.cat-pill,.cat-select,.barcode-btn,.btn-outline){
  background:var(--theme-surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .cat-pill.active{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
html[data-theme="dark"] .product-card{color:#172033!important}
html[data-theme="dark"] .product-card .product-info span{color:#64748b!important}

/* Tables: status tint used to remain pale green/red while inherited copy
   had already switched to white. Use a dark semantic tint instead. */
html[data-theme="dark"] .tbl-card{background:var(--card)!important;border-color:var(--border)!important}
html[data-theme="dark"] .tbl-card-inner{background:color-mix(in srgb,var(--dot) 10%,var(--card))!important}
html[data-theme="dark"] .tbl-card :is(.tbl-name,.tbl-order-name,.tbl-order-meta b,.tbl-occupant-info b){color:var(--text)!important}
html[data-theme="dark"] .tbl-card :is(.tbl-cap,.tbl-order-meta,.tbl-empty-hint,.tbl-occupant-info){color:var(--mute)!important}
html[data-theme="dark"] .tbl-card .tbl-icon{background:var(--theme-surface-3)!important;border-color:var(--border)!important}
html[data-theme="dark"] :is(.tbl-btn-secondary,.tbl-btn-danger){background:var(--theme-surface-2)!important}
html[data-theme="dark"] .tbl-btn-secondary{color:var(--text)!important;border-color:var(--border)!important}
html[data-theme="dark"] .tbl-btn-danger{color:#f87171!important;border-color:rgba(248,113,113,.38)!important}

/* Products and purchases define their own light-only token families. */
html[data-theme="dark"] .pmx-page{
  --pmx-bg:var(--bg);--pmx-bg-soft:var(--theme-surface-2);
  --pmx-panel:var(--card);--pmx-panel-2:var(--theme-surface-2);
  --pmx-glass:var(--card);--pmx-border:var(--border);
  --pmx-border-soft:var(--border);--pmx-text:var(--text);
  --pmx-text-dim:var(--mute);--pmx-text-faint:#aab6ca;
}
html[data-theme="dark"] .pmx-page :is(.pmx-stat-value,.pmx-stat-label){opacity:1!important}
html[data-theme="dark"] .pmx-page .pmx-stat-value{color:var(--text)!important}
html[data-theme="dark"] .pmx-page .pmx-stat-label{color:#aab6ca!important}
html[data-theme="dark"] .page:has(.pb-summary-grid){
  --pb-bg:var(--bg);--pb-card:var(--card);--pb-border:var(--border);
  --pb-text:var(--text);--pb-text-muted:#aab6ca;
}
html[data-theme="dark"] :is(.pb-stat-value,.pb-stat-label,.pb-stat-trend){opacity:1!important}
html[data-theme="dark"] .pb-stat-value{color:var(--text)!important}
html[data-theme="dark"] :is(.pb-stat-label,.pb-stat-trend){color:#aab6ca!important}
html[data-theme="dark"] :is(.pb-chip,.pb-month-filter,.pb-filter-select,.pb-date-range){background:var(--theme-surface-2)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-theme="dark"] .pb-chip.is-active{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}

/* Sales grand total sits on the accent gradient. Keep foreground contrast
   deterministic in BOTH light and dark mode; page-local Sales Experience CSS
   must never paint accent/muted ink on top of the accent gradient. */
.content .summary-card.total :is(.summary-title,.summary-total,.summary-count,.summary-icon){
  color:var(--theme-on-primary,#fff)!important;
  opacity:1!important;
}
.content .summary-card.total :is(.summary-title,.summary-count){
  color:color-mix(in srgb,var(--theme-on-primary,#fff) 84%,transparent)!important;
}
.content .summary-card.total .summary-title{
  font-size:9.5px!important;
  line-height:1.35!important;
  font-weight:850!important;
}
.content .summary-card.total .summary-total{
  color:var(--theme-on-primary,#fff)!important;
  font-size:24px!important;
  line-height:1.12!important;
  font-weight:900!important;
  text-shadow:0 1px 2px rgba(0,0,0,.10);
}
.content .summary-card.total .summary-count{
  font-size:9.5px!important;
  line-height:1.4!important;
}
.content .summary-card.total .summary-icon{
  background:color-mix(in srgb,var(--theme-on-primary,#fff) 16%,transparent)!important;
}
@supports not (color:color-mix(in srgb,#000,#fff)){
  .content .summary-card.total :is(.summary-title,.summary-count){color:var(--theme-on-primary,#fff)!important}
}
@media (max-width:760px){
  .content .summary-card.total .summary-title{font-size:9.5px!important}
  .content .summary-card.total .summary-total{font-size:22px!important}
  .content .summary-card.total .summary-count{font-size:9.5px!important}
}

/* Printer helper callout and compatibility rows are fixed light surfaces. */
html[data-theme="dark"] .note{background:color-mix(in srgb,var(--blue) 10%,var(--card))!important;border-color:color-mix(in srgb,var(--blue) 28%,var(--border))!important;color:#b8c3d6!important}
html[data-theme="dark"] .note strong{color:var(--text)!important}
html[data-theme="dark"] .compat-row{background:var(--theme-surface-2)!important;border-color:var(--border)!important}
html[data-theme="dark"] .compat-row strong{color:var(--text)!important}
html[data-theme="dark"] .compat-row span{color:#aab6ca!important}

/* Bon Customer owns --ink-* light-mode tokens and white filter surfaces. */
html[data-theme="dark"] .page:has(#modeTabs){
  --ink-900:var(--text);--ink-600:#aab6ca;--ink-400:#8f9bb0;
}
html[data-theme="dark"] :is(.mode-tabs,.fb-search,.month-filter,.filter-select,.filter-date,.filter-reset,.chip){background:var(--theme-surface-2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .mode-tab{color:#b8c3d6!important}
html[data-theme="dark"] .mode-tab.active{background:var(--blue)!important;color:#fff!important;box-shadow:none!important}
html[data-theme="dark"] .chip.active{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
html[data-theme="dark"] :is(.fb-search input,.month-filter input,.filter-date,.filter-select){color:var(--text)!important}
html[data-theme="dark"] :is(.fb-search input,.month-filter input)::placeholder{color:#8f9bb0!important;opacity:1!important}

/* =====================================================================
   RC15.1 — TOPBAR + POS LAST-MILE CONTRAST
   Topbar's actual account trigger is .user-chip. POS also owns several
   fixed white surfaces outside the legacy .btn-outline family.
   ===================================================================== */
html[data-theme="dark"] .user-chip{
  background:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .user-chip:hover,
html[data-theme="dark"] .user-chip[aria-expanded="true"]{
  background:var(--theme-surface-2)!important;
  border-color:var(--blue)!important;
}
html[data-theme="dark"] .user-chip strong{color:var(--text)!important;opacity:1!important}
html[data-theme="dark"] .user-chip small{color:#aab6ca!important;opacity:1!important}
html[data-theme="dark"] .user-chip .fa-chevron-down{color:#aab6ca!important}

html[data-theme="dark"] .posx-filter-btn{
  background:var(--theme-surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .posx-filter-btn :is(.label,.count,i){color:inherit!important;opacity:1!important}
html[data-theme="dark"] .posx-filter-btn .count{background:var(--theme-surface-3)!important}
html[data-theme="dark"] .posx-filter-btn.active{background:var(--blue-soft)!important;border-color:var(--blue)!important;color:var(--blue-light)!important}
html[data-theme="dark"] .cat-pill{background:var(--theme-surface-2)!important;color:var(--text)!important;opacity:1!important}
html[data-theme="dark"] .cat-pill.active{background:var(--blue)!important;color:#fff!important}
html[data-theme="dark"] .product-search input{background:transparent!important;color:var(--text)!important}
html[data-theme="dark"] .product-search input::placeholder{color:#8f9bb0!important;opacity:1!important}
html[data-theme="dark"] .cart-items{background:var(--card)!important;color:var(--text)!important}
html[data-theme="dark"] .split-btn{background:var(--theme-surface-2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .split-btn:hover{border-color:var(--blue)!important;color:var(--blue-light)!important}

/* =====================================================================
   RC16 — FULL WORKSPACE DARK COVERAGE
   Normalize legacy page-owned palettes while preserving printable paper,
   QR canvases, product photography and receipt previews as light surfaces.
   ===================================================================== */

/* Dashboard and shared legacy controls. */
html[data-theme="dark"] :is(.date-pill,.menu-btn:hover,.search-box,.tbl-actionsheet,.tbl-manage-modal,.tbl-manage-btn){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] :is(.tbl-actionsheet button:not(.primary),.tbl-field input){
  background:var(--theme-input)!important;border-color:var(--border)!important;color:var(--text)!important;
}

/* Kasbon and Bon Customer use a historical --ink palette. */
html[data-theme="dark"] body.ctr-kasbon-page,
html[data-theme="dark"] body:has(#modeTabs){
  --ink-900:var(--text);--ink-600:#b8c3d6;--ink-400:#8f9bb0;
}
html[data-theme="dark"] body.ctr-kasbon-page :is(.modal,.drawer,.btn-ghost,.mini-btn,.method-card .m-ic,.kasbon-board-head,.kasbon-form-modal .modal-head,.kasbon-form-modal .modal-foot),
html[data-theme="dark"] body:has(#modeTabs) :is(.modal,.drawer,.mini-btn,.bon-mode-card .mode-ic,.insight-card){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] body.ctr-kasbon-page :is(.field input,.field select,.field textarea),
html[data-theme="dark"] body:has(#modeTabs) :is(.field input,.field select,.field textarea){
  background:var(--theme-input)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] body.ctr-kasbon-page .kasbon-form-modal .method-card:hover,
html[data-theme="dark"] body.ctr-kasbon-page .kasbon-form-modal .method-card.active{
  background:var(--theme-surface-2)!important;color:var(--text)!important;
}

/* Closing History owns a complete fixed light palette. */
html[data-theme="dark"] .rh-page{
  --rh-bg:var(--bg);--rh-card:var(--card);--rh-text:var(--text);
  --rh-muted:#b8c3d6;--rh-soft:#8f9bb0;--rh-border:var(--border);
  --rh-dark:var(--text);
}
html[data-theme="dark"] :is(.rh-btn,.rh-stat,.rh-insight,.rh-methods,.rh-search,.rh-filter,.rh-card,.rh-drawer,.rh-row-action){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] .rh-view-btn.active{background:var(--theme-surface-3)!important;color:var(--text)!important}
html[data-theme="dark"] :is(.rh-search input,.rh-filter){background:transparent!important;color:var(--text)!important}

/* Closing Shift uses scoped --cs-* colors. Receipt paper remains untouched. */
html[data-theme="dark"] .cs-page{
  --cs-ink:var(--text);--cs-ink-soft:#b8c3d6;--cs-line:var(--border);
  --cs-card-bg:var(--card);--cs-page-bg:var(--bg);
}
html[data-theme="dark"] :is(.cs-shift-pill,.cs-denom-step,.cs-btn-ghost,.cs-modal-box){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] :is(.cs-denom-input,.cs-modal-box input,.cs-modal-box select,.cs-modal-box textarea){
  background:var(--theme-input)!important;border-color:var(--border)!important;color:var(--text)!important;
}

/* Closing Report controls and confirmation modal. Print-only rules and the
   reconciliation receipt intentionally keep their paper appearance. */
html[data-theme="dark"] :is(.cr-status-pill,.cr-btn-ghost,.cr-modal-box){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] .cr-modal-box :is(h2,h3,.cr-modal-title){color:var(--text)!important}

/* Billing page: cards were covered earlier; nested steps, proof metadata and
   confirmation UI still carried fixed white backgrounds and dark ink. */
html[data-theme="dark"] .billing-content{
  --bill-navy:var(--text);--bill-muted:#aab6ca;--bill-line:var(--border);
}
html[data-theme="dark"] :is(.billing-flow-step,.billing-file-preview,.current-proof,.billing-confirm-box,.billing-confirm-cancel){
  background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;
}
html[data-theme="dark"] .billing-field textarea{background:var(--theme-input)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .billing-history-table tr{background:var(--card)!important;border-color:var(--border)!important}
html[data-theme="dark"] :is(.billing-head h1,.billing-card h2,.billing-card h3,.billing-plan-card strong,.billing-summary-row strong,.billing-confirm-box h3){color:var(--text)!important}
html[data-theme="dark"] :is(.billing-head p,.billing-service-copy span,.billing-plan-normal,.billing-history-sub,.billing-file-copy span){color:#aab6ca!important}

/* Plan catalogue fixed copy colors. */
html[data-theme="dark"] :is(.plan-card,.invoice-box){background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .plan-card .features li{color:#c3ccda!important}
html[data-theme="dark"] :is(.plan-card .price span,.plan-card .price small,.plan-card .statusline,.invoice-box p){color:#aab6ca!important}
html[data-theme="dark"] .plan-card .upgrade-price{background:var(--theme-surface-2)!important;border-color:var(--border)!important}
html[data-theme="dark"] .plan-card .upgrade-price :is(span,small){color:#aab6ca!important}

/* Keep explicit paper-like artifacts light, even inside dark dialogs. */
html[data-theme="dark"] :is(.receipt-paper,.receipt-preview pre,.pay-slip-paper,.slip-brand img,.posx-real-receipt-paper,.cr-receipt,.cs-receipt,.billing-qr-box){color-scheme:light}

/* RC17 — targeted cleanup for legacy white surfaces. */
html[data-theme="dark"] :is(
  .dashboard-head .date-pill,.date-filter-panel,.date-quick-btn,.date-field input,.date-filter-reset,
  .shift-grid>div,.finance-status,.finance-actions a,.finance-kpi,
  .subscription-stat,.subscription-kpi,.billing-flow-step,.billing-upload,
  .billing-file-preview,.billing-action-panel,.current-proof,.billing-confirm-box,
  .billing-confirm-cancel,.billing-plan-card,.rh-method-card,.theme-mode-note
){background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important}

html[data-theme="dark"] :is(
  .subscription-stat.ok,.subscription-stat.warning,.subscription-stat.danger,
  .subscription-kpi.ok,.subscription-kpi.warning,.subscription-kpi.danger,
  .plan-card.included,.billing-plan input:checked+.billing-plan-card
){background:linear-gradient(180deg,var(--card),var(--theme-surface-2))!important}

html[data-theme="dark"] :is(.finance-status h2,.finance-actions b,.finance-kpi strong,
  .billing-flow-step strong,.billing-action-panel h3,.current-proof strong,
  .billing-confirm-box h3,.billing-plan-top strong,.shift-grid strong,
  .subscription-stat strong,.subscription-kpi strong,.theme-mode-note){color:var(--text)!important}

html[data-theme="dark"] :is(.finance-status p,.finance-actions small,.finance-kpi .label,.finance-kpi small,
  .billing-flow-step span,.billing-action-panel>p,.current-proof span,.billing-confirm-box p,
  .billing-plan-normal,.subscription-stat small,.subscription-kpi small){color:var(--mute)!important}

html[data-theme="dark"] .finance-status{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--blue) 9%,var(--card)))!important}
html[data-theme="dark"] .finance-mini div{background:var(--theme-surface-2)!important}
html[data-theme="dark"] .finance-actions a i{background:var(--blue-soft)!important}
html[data-theme="dark"] :is(.billing-alert.warning,.locked){background:rgba(245,158,11,.12)!important;border-color:rgba(245,158,11,.36)!important;color:#FCD38D!important}
html[data-theme="dark"] :is(.billing-secure,.subscription-owner-note){background:var(--blue-soft)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .billing-field textarea{background:var(--theme-input)!important;color:var(--text)!important;border-color:var(--border)!important}

/* Detail transaksi adalah layar aplikasi, bukan kertas cetak. */
html[data-theme="dark"] :is(
  .invoice-document,.invoice-meta-strip,.invoice-meta-cell,.invoice-performance-strip,
  .invoice-items-section,.invoice-section-head,.invoice-table-wrap,.invoice-settlement-section,
  .invoice-payment-side,.invoice-total-side,.invoice-document-foot,.invoice-foot-block,.invoice-btn-light
){background:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important}

html[data-theme="dark"] :is(.invoice-meta-cell strong,.invoice-performance-item strong,
  .invoice-section-head h2,.invoice-payment-line strong,.invoice-total-row strong,
  .invoice-foot-block strong){color:var(--text)!important}
html[data-theme="dark"] :is(.invoice-meta-cell span,.invoice-performance-item span,
  .invoice-section-kicker,.invoice-section-count,.invoice-payment-line span,
  .invoice-total-row span,.invoice-mini-title){color:var(--mute)!important}
html[data-theme="dark"] :is(.invoice-items-table thead,.rh-table thead,.billing-history-table thead){background:var(--theme-surface-2)!important}

/* QR dan media cetak tetap putih agar hasil scan/cetak akurat. */
html[data-theme="dark"] :is(.receipt-paper,.receipt-preview pre,.pay-slip-paper,
  .posx-real-receipt-paper,.cr-receipt,.cs-receipt,.billing-qr-box){background:#fff!important;color:#111!important}