/* Shared light/dark presentation for the app, public pages and native PHP screens. */
:root {
  --upos-theme-canvas:#f7f9fc; --upos-theme-surface:#fff; --upos-theme-raised:#f1f5f9;
  --upos-theme-field:#fff; --upos-theme-ink:#172033; --upos-theme-muted:#526178;
  --upos-theme-border:#d5deea; --upos-theme-link:#5146c4;
}
.upos-theme-control { display:inline-flex; flex:0 0 auto; align-items:center; margin-inline-start:6px; }
.upos-theme-control.is-floating { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); z-index:60; }
.upos-theme-toggle { display:inline-grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0; border:1px solid var(--upos-theme-border); border-radius:11px; color:var(--upos-theme-ink); background:var(--upos-theme-surface); cursor:pointer; }
.upos-theme-toggle svg { width:20px; height:20px; pointer-events:none; }
.upos-theme-toggle:hover,.upos-theme-toggle[aria-expanded="true"] { background:var(--upos-theme-raised); border-color:var(--upos-theme-link); }
.upos-theme-panel { position:fixed; z-index:12000; top:64px; right:12px; width:220px; max-width:calc(100vw - 24px); padding:12px; border:1px solid var(--upos-theme-border); border-radius:14px; color:var(--upos-theme-ink); background:var(--upos-theme-surface); box-shadow:0 16px 50px #0003; font:14px/1.6 "Noto Sans Lao",system-ui,sans-serif; }
.upos-theme-panel[hidden] { display:none!important; }
.upos-theme-panel p { margin:0 0 8px; font-weight:700; }
.upos-theme-choice { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; margin-top:4px; border:1px solid transparent; border-radius:9px; color:inherit; background:transparent; font:inherit; cursor:pointer; text-align:start; }
.upos-theme-choice:hover { background:var(--upos-theme-raised); }
.upos-theme-choice[aria-checked="true"] { color:var(--upos-theme-link); background:var(--upos-theme-raised); border-color:var(--upos-theme-link); font-weight:700; }
.upos-theme-choice[aria-checked="true"]::after { content:"✓"; margin-inline-start:auto; }
.upos-theme-choice svg { width:20px; height:20px; }
:is(.upos-theme-toggle,.upos-theme-choice):focus-visible { outline:3px solid #a5a0f5!important; outline-offset:3px!important; }
[data-upos-native-theme] { display:none!important; }
.upos-agent-report { margin-top:16px; }
.upos-transfer-modal { max-width:560px; }
.upos-quota-progress { display:block; appearance:none; width:115px; height:7px; margin-top:6px; border:0; border-radius:999px; overflow:hidden; color:#7566e9; background:var(--upos-theme-raised); }
.upos-quota-progress::-webkit-progress-bar { background:var(--upos-theme-raised); border-radius:999px; }
.upos-quota-progress::-webkit-progress-value { background:#7566e9; border-radius:999px; }
.upos-quota-progress::-moz-progress-bar { background:#7566e9; border-radius:999px; }

@media screen {
  html[data-upos-theme="light"] { color-scheme:light!important; }
  html[data-upos-theme="light"] header.app-print-shell .text-success { color:#08714f!important; }
  html.dark {
    color-scheme:dark!important;
    --upos-theme-canvas:#0b1220; --upos-theme-surface:#111c2f; --upos-theme-raised:#1b2a41;
    --upos-theme-field:#0e192b; --upos-theme-ink:#e6edf7; --upos-theme-muted:#b0bed2;
    --upos-theme-border:#33445e; --upos-theme-link:#b9b2ff;
    --upos-canvas:var(--upos-theme-canvas); --upos-surface:var(--upos-theme-surface);
    --upos-ink:var(--upos-theme-ink); --upos-muted:var(--upos-theme-muted);
    --upos-border:var(--upos-theme-border); --upos-border-strong:#526887;
    --upos-primary:#b9b2ff; --upos-primary-strong:#cbc6ff; --upos-primary-soft:#2b2855;
    --upos-success:#72e3b4; --upos-success-soft:#103b2d;
    --upos-warning:#ffd384; --upos-warning-soft:#493518;
    --upos-danger:#ffaaaa; --upos-danger-soft:#492229;
    --background:#0b1220; --foreground:#e6edf7; --card:#111c2f; --card-foreground:#e6edf7;
    --popover:#18263b; --popover-foreground:#e6edf7;
    --primary:#b1a6ff; --primary-foreground:#19152e; --primary-glow:#c3baff;
    --secondary:#1b2a41; --secondary-foreground:#e6edf7; --muted:#1b2a41; --muted-foreground:#b0bed2;
    --accent:#70dcb1; --accent-foreground:#10271f; --success:#70dcb1; --success-foreground:#10271f;
    --warning:#ffd384; --warning-foreground:#35250d; --destructive:#ffaaaa; --destructive-foreground:#351217;
    --border:#33445e; --input:#40546f; --ring:#b9b2ff;
    --chart-1:#b1a6ff; --chart-2:#70dcb1; --chart-3:#ffd384; --chart-4:#ffaaaa; --chart-5:#88cff5;
    --gradient-primary:linear-gradient(135deg,#6253d5,#6d60d5);
    --gradient-hero:linear-gradient(135deg,#282344,#133849);
    --shadow-card:0 4px 18px #0003; --upos-shadow-card:0 4px 18px #0003;
  }
  html.dark,html.dark body { background:var(--upos-theme-canvas); color:var(--upos-theme-ink); }
  html.dark main.app-print-main { background:var(--upos-theme-canvas); }
  html.dark .bg-gradient-primary { color:#fff!important; }
  html.dark .upos-alert-button__badge { color:#351217; border-color:var(--upos-theme-surface); }
  html.dark header.app-print-shell,
  html.dark nav.no-print.fixed,
  html.dark :is(.upos-alert-panel,.upos-alert-button,.upos-chart-empty__action,.upos-store-target-badge) {
    color:var(--upos-theme-ink); background:var(--upos-theme-surface); border-color:var(--upos-theme-border);
  }
  html.dark :is(.upos-alert-panel__title,.upos-alert-item__title,.upos-chart-empty__title,.upos-not-found__brand),
  html.dark body[data-upos-route^="/admin/"] main :is(h1,h2,h3,.text-2xl.font-bold) { color:var(--upos-theme-ink); }
  html.dark :is(.upos-alert-panel__footer,.upos-scroll-hint,.upos-chart-empty__icon,.upos-alert-item__icon) { color:var(--upos-theme-muted); background:var(--upos-theme-raised); border-color:var(--upos-theme-border); }
  html.dark :is(.upos-alert-item:hover,.upos-recent-store-row:hover,.upos-chart-empty__action:hover,.upos-alert-button:hover,.upos-alert-panel__icon-button:hover) { color:var(--upos-theme-ink); background:var(--upos-theme-raised); }
  html.dark .upos-store-targeted { background:#27264b!important; }
  html.dark body[data-upos-route="/admin/dashboard"] main .border-dashed { background:var(--upos-theme-raised); }
  html.dark :is(.upos-alert-panel__icon-button,.upos-alert-panel__acknowledge) { color:var(--upos-theme-link); }
  html.dark nav.no-print.fixed.inset-x-0.bottom-0 { background:var(--upos-theme-surface)!important; border-color:var(--upos-theme-border)!important; }

  /* Legacy utility colors and custom surfaces which bypass the application tokens. */
  html.dark :is(.bg-white,[class*="bg-white/"],.bg-slate-50,.bg-gray-50,.bg-zinc-50,.bg-neutral-50) { background-color:var(--upos-theme-surface)!important; }
  html.dark :is(.bg-slate-100,.bg-gray-100,.bg-zinc-100,.bg-neutral-100,.bg-slate-200,.bg-gray-200) { background-color:var(--upos-theme-raised)!important; }
  html.dark :is(.text-black,.text-slate-900,.text-slate-800,.text-gray-900,.text-gray-800,.text-zinc-900,.text-neutral-900) { color:var(--upos-theme-ink)!important; }
  html.dark :is(.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500,.text-zinc-500) { color:var(--upos-theme-muted)!important; }
  html.dark :is(.border-slate-100,.border-slate-200,.border-slate-300,.border-gray-100,.border-gray-200,.border-gray-300) { border-color:var(--upos-theme-border)!important; }
  html.dark :is(.bg-indigo-50,.bg-indigo-100,.bg-violet-50,.bg-violet-100,.bg-purple-50,.bg-purple-100) { background-color:#292647!important; }
  html.dark :is(.text-indigo-600,.text-indigo-700,.text-indigo-800,.text-purple-600,.text-purple-700,.text-violet-600,.text-violet-700) { color:#c4baff!important; }
  html.dark :is(.bg-blue-50,.bg-blue-100,.bg-sky-50,.bg-sky-100,.bg-cyan-50,.bg-cyan-100) { background-color:#16334f!important; }
  html.dark :is(.text-blue-600,.text-blue-700,.text-blue-800,.text-sky-600,.text-cyan-600) { color:#9dceff!important; }
  html.dark :is(.bg-green-50,.bg-green-100,.bg-emerald-50,.bg-emerald-100,.bg-teal-50,.bg-teal-100) { background-color:#103b2d!important; }
  html.dark :is(.text-green-600,.text-green-700,.text-green-800,.text-emerald-600,.text-emerald-700,.text-teal-600) { color:#72e3b4!important; }
  html.dark :is(.bg-yellow-50,.bg-yellow-100,.bg-amber-50,.bg-amber-100,.bg-orange-50,.bg-orange-100) { background-color:#493518!important; }
  html.dark :is(.text-yellow-600,.text-yellow-700,.text-yellow-800,.text-amber-600,.text-amber-700,.text-orange-600,.text-orange-700) { color:#ffd384!important; }
  html.dark :is(.bg-red-50,.bg-red-100,.bg-rose-50,.bg-rose-100,.bg-pink-50,.bg-pink-100) { background-color:#492229!important; }
  html.dark :is(.text-red-600,.text-red-700,.text-red-800,.text-rose-600,.text-rose-700,.text-pink-600) { color:#ffaaaa!important; }
  html.dark :is(input,select,textarea)::placeholder { color:#93a5be; opacity:1; }
  html.dark input:-webkit-autofill { -webkit-text-fill-color:#e6edf7!important; box-shadow:0 0 0 1000px #0e192b inset!important; caret-color:#e6edf7; }
  html.dark :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { color:var(--upos-theme-ink); background-color:var(--upos-theme-field); }
  html.dark :is(.recharts-cartesian-axis-tick-value,.recharts-text) { fill:var(--upos-theme-muted); }
  html.dark .recharts-cartesian-grid :is(line,path) { stroke:var(--upos-theme-border); }
  html.dark .recharts-default-tooltip { color:var(--upos-theme-ink)!important; background:var(--upos-theme-raised)!important; border-color:var(--upos-theme-border)!important; }
  html.dark [data-sonner-toaster] { --normal-bg:#18263b; --normal-border:#40546f; --normal-text:#e6edf7; --success-bg:#103b2d; --success-text:#72e3b4; --error-bg:#492229; --error-text:#ffaaaa; }

  /* Public authentication and recovery pages. */
  html.dark .upos-login-page,html.dark .upos-not-found,
  html.dark body[data-upos-route="/forgot-password"] .upos-forgot-page { color:var(--upos-theme-ink); background:var(--upos-theme-canvas)!important; }
  html.dark .upos-login-backdrop { opacity:.09; }
  html.dark .upos-login-page :is(.glass-card,.h-24.w-24),
  html.dark .upos-not-found > .max-w-md,
  html.dark body[data-upos-route="/forgot-password"] .upos-forgot-page .max-w-md { color:var(--upos-theme-ink); background:var(--upos-theme-surface)!important; border-color:var(--upos-theme-border)!important; }
  html.dark .upos-login-page :is(h1,.text-4xl.font-black,form label),html.dark .upos-not-found h1 { color:var(--upos-theme-ink)!important; }
  html.dark .upos-login-page :is(.text-center.mb-6 > p,.relative.z-10:last-child),
  html.dark body[data-upos-route="/forgot-password"] .upos-forgot-page > :last-child { color:var(--upos-theme-muted)!important; }
  html.dark .upos-login-page form input,
  html.dark body[data-upos-route="/forgot-password"] .upos-forgot-page input { background:var(--upos-theme-field)!important; color:var(--upos-theme-ink)!important; border-color:var(--upos-theme-border)!important; }
  html.dark .upos-login-page form button[type="submit"] { color:#fff!important; }

  /* PHP account/agent screens use their own variable names and inline styles. */
  html.dark body[data-upos-surface] {
    --ink:#e6edf7; --muted:#b0bed2; --line:#33445e; --card:#111c2f;
    --primary:#6556cf; --primary2:#7468e4; --danger:#ffaaaa; --success:#72e3b4; --warning:#ffd384;
    color:var(--ink); background:#0b1220;
  }
  html.dark body[data-upos-surface] :is(.topbar,.stat,.card,.modal,.modal-head,.loading,.back,.tab.active,.search input) { background:#111c2f; color:#e6edf7; border-color:#33445e; }
  html.dark body[data-upos-surface="account"] :is(.layout,.reset-layout) { border-color:#33445e; background:#111c2f; }
  html.dark body[data-upos-surface] :is(a,.tab.active,.avatar) { color:#c4baff; }
  html.dark body[data-upos-surface] :is(.brand,.back) { color:#e6edf7; }
  html.dark body[data-upos-surface] :is(input,select,textarea) { background:#0e192b; color:#e6edf7; border-color:#40546f; }
  html.dark body[data-upos-surface] :is(.field label,.badge.neutral) { color:#b0bed2; }
  html.dark body[data-upos-surface] :is(.tabs,.stat-icon,.event-icon,.avatar,.close,.progress,.badge.neutral) { background:#1b2a41; }
  html.dark body[data-upos-surface] :is(.btn:hover,.table tbody tr:hover) { background:#1b2a41; }
  html.dark body[data-upos-surface] .table td { border-color:#33445e; }
  html.dark body[data-upos-surface] :is(.notice.error,.badge.danger) { color:#ffaaaa; background:#492229; border-color:#81505a; }
  html.dark body[data-upos-surface] :is(.notice.success,.badge.success) { color:#72e3b4; background:#103b2d; border-color:#32664f; }
  html.dark body[data-upos-surface] :is(.badge.warning,.quota-alert) { color:#ffd384; background:#493518; border-color:#7b6135; }
  html.dark body[data-upos-surface] .notice.info { color:#c4baff; background:#292647; border-color:#69628c; }
  html.dark body[data-upos-surface] .btn.primary { color:#fff; }

  /* Customer displays follow the selected mode while scan/label paper stays white. */
  body[data-upos-route="/customer-display"] header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; }
  body[data-upos-route="/customer-display"] img[alt="QR"] { width:100%; max-width:320px!important; height:auto; }
  html[data-upos-theme="light"] body[data-upos-route="/customer-display"] .min-h-screen {
    background:var(--upos-theme-canvas)!important; color:var(--upos-theme-ink)!important;
  }
  html[data-upos-theme="light"] body[data-upos-route="/customer-display"] [class*="bg-white/"] { background:var(--upos-theme-surface)!important; }
  body[data-upos-route="/customer-display"] [class*="text-white/"] { color:var(--upos-theme-muted)!important; }
  body[data-upos-route="/customer-display"] [class*="border-white/"] { border-color:var(--upos-theme-border)!important; }
  html[data-upos-theme="light"] body[data-upos-route="/customer-display"] :is(.text-emerald-300,.text-emerald-400) { color:#08714f!important; }
  html[data-upos-theme="light"] body[data-upos-route="/customer-display"] .text-amber-300 { color:#96580c!important; }
  html.dark img.bg-white,html.dark img[alt="qr" i],
  html.dark body[data-upos-route="/customer-display"] .bg-white,
  html.dark body[data-upos-route="/barcode-print"] .bg-white.text-black { background:#fff!important; color:#111!important; }
  html.dark body[data-upos-route="/customer-display"] .bg-white .text-slate-900,
  html.dark body[data-upos-route="/barcode-print"] .bg-white.text-black * { color:#111!important; }
}
@media screen and (max-width:639px) {
  .upos-theme-control { margin-inline-start:2px; }
  header.app-print-shell > .flex { gap:4px; }
  body[data-upos-route="/customer-display"] header { grid-template-columns:minmax(0,1fr) auto; }
  body[data-upos-route="/customer-display"] header > .text-right { grid-area:2/1/3/3; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
  body[data-upos-route="/customer-display"] header > .upos-theme-control { grid-area:1/2; }
}
@media screen and (max-width:359px) {
  header.app-print-shell { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; height:auto!important; min-height:56px; gap:4px; padding-block:4px; }
  header.app-print-shell > .flex-1 { display:none; }
  header.app-print-shell > button:has(.lucide-menu) { grid-area:1/1; }
  header.app-print-shell > button:has(.lucide-building-2) { grid-area:1/2; justify-self:start; }
  header.app-print-shell > .upos-theme-control { grid-area:1/3; margin:0; }
  header.app-print-shell > .upos-alert-button { grid-area:1/4; }
  header.app-print-shell > button:has(.lucide-globe) { grid-area:2/2; justify-self:end; }
  header.app-print-shell > button:has(.lucide-bell) { grid-area:2/3; }
  header.app-print-shell > button:has(.rounded-full) { grid-area:2/4; width:44px; padding-inline:4px; }
}
@media print {
  .upos-theme-control,.upos-theme-panel { display:none!important; }
  html.dark { color-scheme:light!important; --background:#fff; --foreground:#111; --card:#fff; --card-foreground:#111; --muted:#eee; --muted-foreground:#444; --border:#ccc; }
  html.dark body { background:#fff!important; color:#111!important; }
}