/* AWS dev night appearance. Additive colors only; no layout, routing or state rules.
   All rules are opt-in through the document appearance attribute. */
html[data-appearance=night] {
  color-scheme: dark;
  --night-ink: #f1f3fa;
  --night-muted: #aab2c2;
  --night-border: #ffffff20;
  background: #0d111b;
}
html[data-appearance=night] body:has(#root) {
  --ref-ink: #f1f3fa;
  --ref-muted: #aab2c2;
  --ref-blue: #9fb3ff;
  --ref-teal: #62b3c7;
  --ref-glass: #ffffff09;
  --ref-field: #242c39;
  --ref-border: #ffffff20;
  --ref-popover: #252c38;
  --ref-soft: #ffffff08;
  --ref-outline: #ffffff1c;
  background: linear-gradient(140deg,#0e1320,#192128 72%,#232920) !important;
  color: var(--night-ink);
}
html[data-appearance=night] #root div:has(> .main-content) {
  background: linear-gradient(140deg,#0e1320,#192128 72%,#232920) !important;
  color: var(--night-ink);
}
html[data-appearance=night] #root .main-content {
  --operations-ink: #f1f3fa;
  --operations-muted: #aab2c2;
  --operations-line: #ffffff20;
  --operations-glass: #ffffff09;
  --operations-soft: #ffffff08;
  --operations-menu: #252c38;
  color: var(--night-ink);
}
/* Existing frosted sidebar owns expansion, hover timing and navigation. */
html[data-appearance=night] #root #sidenav-main.sidenav {
  --sb-bg: rgba(34,41,54,.48);
  --sb-open: #222936;
  --sb-ink: #e7ebf4;
  --sb-open-ink: #f1f3fa;
  --sb-item: #ffffff04;
  --sb-hover: #ffffff12;
  --sb-active: #eeeb4e;
  --sb-active-ink: #141810;
  --sb-border: #ffffff21;
  --sb-accent: #eeeb4e;
}
html[data-appearance=night] #root #sidenav-main.sidenav .sidenav-header { background: #eef3e9 !important; }
html[data-appearance=night] #root .main-content .navbar-main {
  background: rgba(29,36,48,.88) !important;
  border-color: #ffffff1a !important;
  color: #e7ebf4 !important;
  box-shadow: 0 8px 28px #00000012 !important;
}
html[data-appearance=night] #root .main-content .navbar-main :is(.nav-item,.nav-link,.text-dark) { color: #e7ebf4 !important; }
/* Shared controls inherit existing validity, disabled and semantic status styles. */
html[data-appearance=night] #root .main-content :is(.inner-page-title,.inner-page-title2) { color: var(--night-ink) !important; }
html[data-appearance=night] :is(.main-content,.modal-content,.offcanvas) :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit])) {
  background-color: #242c39 !important;
  color: #f1f3fa !important;
}
html[data-appearance=night] :is(.main-content,.modal-content,.offcanvas) :is(select,textarea,input):not(.is-invalid):not(.is-valid):not([aria-invalid=true]):not([type=checkbox]):not([type=radio]):not([type=range]) { border-color: #ffffff26; }
html[data-appearance=night] :is(.main-content,.modal-content,.offcanvas) :is(input,textarea)::placeholder { color: #aab2c2 !important; }
html[data-appearance=night] :is(.main-content,.modal-content,.offcanvas) option { background: #252c38; color: #f1f3fa; }
html[data-appearance=night] #root .main-content :is(.table,.dataTable-table) {
  --bs-table-bg: transparent;
  --bs-table-color: #f1f3fa;
  --bs-table-striped-bg: #ffffff04;
  --bs-table-hover-bg: #ffffff0c;
}
html[data-appearance=night] #root .main-content :is(.table,.dataTable-table) thead th { background-color: #28313f !important; color: #b8c1d1; }
html[data-appearance=night] :is(.modal-content,.offcanvas,.swal2-popup,.dropdown-menu,.rs-picker-popup,.rs-picker-menu) { background-color: #252c38 !important; color: #f1f3fa; border-color: #ffffff20 !important; }
html[data-appearance=night] :is(.modal-content,.offcanvas) .btn-close:empty { filter: invert(1); }
html[data-appearance=night] .dropdown-item { color: #f1f3fa; }
html[data-appearance=night] .dropdown-item.disabled { color: #aab2c2; }
html[data-appearance=night] .dropdown-item:is(:hover,:focus):not(.disabled) { background-color: #ffffff0c; }
html[data-appearance=night] :is(.main-content,.modal-content,.offcanvas) :is(button,a,input,select,textarea,[role=tab]):focus-visible { outline-color: #eeeb4e !important; }
/* Original dashboard components, with the reference's cobalt/lemon/teal accents. */
html[data-appearance=night] #root .sales-dashboard {
  --sales-text: #f1f3fa !important;
  --sales-muted: #aab2c2 !important;
  --sales-surface: #252c38 !important;
  --sales-border: #ffffff18 !important;
  --sales-track: #343d4b !important;
  --sales-brand: #62b3c7 !important;
  --sales-brand-deep: #a6b7ff !important;
  color: var(--sales-text);
}
html[data-appearance=night] #root :is(.sales-dashboard-data-filters,.sales-panel,.dashboard-layout-module) {
  background: #ffffff05 !important;
  border-color: var(--night-border) !important;
  color: var(--night-ink) !important;
  box-shadow: none !important;
}
html[data-appearance=night] #root :is(.sales-dashboard-hero h1,.sales-panel h2,.sales-panel strong,.sales-panel b,.sales-hierarchy-copy strong,.sales-goal-summary strong) { color: var(--night-ink) !important; }
html[data-appearance=night] #root :is(.sales-dashboard-context,.sales-panel-description,.sales-panel-heading p,.sales-panel small,.sales-panel label,.sales-po-legend,.dashboard-layout-tools p,.sales-dashboard-hero p,.sales-dashboard-context>span,.sales-dashboard-data-filters label) { color: var(--night-muted) !important; }
html[data-appearance=night] #root .main-content .sales-dashboard .sales-section-kicker { color: #9fb3ff !important; }
html[data-appearance=night] #root :is(.dashboard-module-controls,.sales-mode-toggle,.sales-period-toggle) { background: #ffffff06 !important; border-color: var(--night-border) !important; }
html[data-appearance=night] #root :is(.dashboard-module-controls button,.dashboard-layout-tools button,.sales-mode-toggle button,.sales-period-toggle button,.sales-panel-action,.sales-kpi-action,.sales-scope-pill) { background: #ffffff09 !important; color: #e7ebf4 !important; border-color: #ffffff26 !important; }
html[data-appearance=night] #root :is(.sales-mode-toggle button.active,.sales-period-toggle button.active) { background: #eeeb4e !important; color: #171a13 !important; }
html[data-appearance=night] #root .sales-kpi-card { background: #242c36 !important; border-color: #ffffff12 !important; color: #f4f5fb !important; }
html[data-appearance=night] #root .sales-kpi-card:nth-child(1) { background: #2854eb !important; }
html[data-appearance=night] #root .sales-kpi-card:nth-child(2) { background: #eeeb4e !important; color: #151810 !important; }
html[data-appearance=night] #root .sales-kpi-card:nth-child(3) { background: #407f91 !important; }
html[data-appearance=night] #root .sales-kpi-card :is(.sales-kpi-value,.sales-kpi-eyebrow,.sales-kpi-detail) { color: inherit !important; }
html[data-appearance=night] #root .sales-kpi-card:nth-child(2) .sales-mini-progress { background: #15181020 !important; }
html[data-appearance=night] #root .sales-kpi-card:nth-child(2) .sales-mini-progress__fill { background: #151810 !important; }
html[data-appearance=night] #root :is(.sales-open-po-row,.sales-team-result,.sales-hierarchy-distributorship,.sales-team-unit-result,.sales-custom-goals article) { background: #ffffff06 !important; border-color: var(--night-border) !important; color: var(--night-ink) !important; }
html[data-appearance=night] #root :is(.sales-open-po-row,.sales-hierarchy-distributorship) :is(strong,span) { color: inherit; }
/* Manufacturer urgency colors retain their meanings; only neutral tokens change. */
html[data-appearance=night] #root .mfr-dashboard {
  --mfr-text: #f1f3fa !important;
  --mfr-muted: #aab2c2 !important;
  --mfr-surface: #ffffff05 !important;
  --mfr-soft: #ffffff08 !important;
  --mfr-border: #ffffff20 !important;
  --mfr-track: #343d4b !important;
  --mfr-brand: #62b3c7 !important;
  --mfr-brand-deep: #9fb3ff !important;
  --mfr-purple: #b3a1ed !important;
  --mfr-orange: #e2b354 !important;
  --mfr-red: #f18a98 !important;
}
html[data-appearance=night] #root :is(.mfr-dashboard-state,.mfr-dashboard-loading) { background: #ffffff05; color: #f1f3fa; }
html[data-appearance=night] #root .mfr-apply-button { background: #2854eb !important; border-color: #2854eb !important; }
html[data-appearance=night] #root .mfr-kpi--warning .mfr-kpi-icon { color: #e2b354 !important; }
/* Charts and calendars keep series, status and event colors. */
html[data-appearance=night] #root .recharts-text { fill: #aab2c2 !important; }
html[data-appearance=night] #root .recharts-default-tooltip { background: #252c38 !important; border-color: #566174 !important; color: #fff !important; }
html[data-appearance=night] :is(.react-datepicker,.react-datepicker__header) { background: #202734 !important; border-color: #ffffff20 !important; color: #edf0f7 !important; }
html[data-appearance=night] :is(.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__current-month) { color: #dce2f0 !important; }
html[data-appearance=night] :is(.react-datepicker__day--selected,.react-datepicker__day--keyboard-selected) { background: #2854eb !important; color: white !important; }
html[data-appearance=night] .react-datepicker__day:hover:not(.react-datepicker__day--disabled) { background: #ffffff20 !important; }
html[data-appearance=night] :is(.react-datepicker__day--disabled,.react-datepicker__day--outside-month) { color: #707c90 !important; }
html[data-appearance=night] #root .main-content :is(.rbc-today,.rbc-off-range-bg) { background: #ffffff08; }
html[data-appearance=night] body:has(#root .main-content) .case-workspace {
  --cw-text: #f1f3fa;
  --cw-muted: #aab2c2;
  --cw-line: #ffffff20;
  --cw-accent: #9fb3ff;
  --cw-tint: #62b3c71a;
  --cw-menu: #252c38;
  --cw-surface: #ffffff09;
}
/* Match the deployed dashboard shell's specificity, including its legacy dark rule. */
html[data-appearance=night] #root div:has(> .main-content .sales-dashboard, > .main-content .mfr-dashboard, > .main-content .mfr-dashboard-state, > .main-content .mfr-dashboard-loading, > .main-content .dashboardBoxOpeningBar.min-height-200) .main-content .navbar-main {
  background: rgba(29,36,48,.88) !important;
  border-color: #ffffff1a !important;
  box-shadow: 0 8px 28px #00000012 !important;
}
html[data-appearance=night] #root div:has(> .main-content) .main-content .navbar-main .dropdown-menu {
  background: #252c38 !important;
  color: #f1f3fa;
}
html[data-appearance=night] #root #sidenav-main :is(.menu__link,.sidenav-link):hover { background: var(--sb-hover) !important; }
html[data-appearance=night] #root #sidenav-main .sidebar-close { background: #222936 !important; color: #f1f3fa !important; }
html[data-appearance=night] #root .main-content .sidebar-tab-open { color: #f1f3fa !important; }
html[data-appearance=night] #root :is(.mfr-panel,.mfr-filter-panel,.mfr-hero,.mfr-kpi) { box-shadow: none !important; }
html[data-appearance=night] #root .sales-kpi-card {
  --sales-text: #f4f5fb !important;
  --sales-muted: #f4f5fb !important;
  --sales-brand-deep: #f4f5fb !important;
}
html[data-appearance=night] #root .sales-kpi-card:nth-child(2) {
  --sales-text: #151810 !important;
  --sales-muted: #394129 !important;
  --sales-brand-deep: #151810 !important;
}
/* Deployed expiry widget has its own neutral palette, separate from dashboard tokens. */
html[data-appearance=night] #root .main-content .expiring-products-widget {
  color: #f1f3fa;
  background: #ffffff05;
  border-color: #ffffff20;
  box-shadow: none;
}
html[data-appearance=night] #root .expiring-products-widget :is(.epw-description,.epw-summary,.epw-product-meta,.epw-pagination,label) { color: #aab2c2; }
html[data-appearance=night] #root .expiring-products-widget :is(.epw-title,.epw-summary strong,.epw-product) { color: #f1f3fa; }
html[data-appearance=night] #root .expiring-products-widget :is(.epw-table-scroll,td) { border-color: #ffffff20; }
html[data-appearance=night] #root .expiring-products-widget th { background: #28313f; color: #b8c1d1; }
html[data-appearance=night] #root .expiring-products-widget .epw-state { background: #ffffff06; color: #aab2c2; }
html[data-appearance=night] #root .expiring-products-widget .epw-error { color: #f18a98; }
html[data-appearance=night] #root .expiring-products-widget button { background: #242c39; color: #f1f3fa; border-color: #ffffff26; }
html[data-appearance=night] #root .expiring-products-widget button:hover:not(:disabled) { background: #343d4b; }
html[data-appearance=night] #root .expiring-products-widget .epw-table-scroll:focus-visible { outline-color: #eeeb4e; }
/* Keep urgent/soon expiry badges' existing red/amber meanings. */
html[data-appearance=night] #root .main-content .navbar-main .case-create-trigger { color: #e7ebf4 !important; }
html[data-appearance=night] #root .main-content .case-create-options { background: #252c38; border-color: #ffffff20; }
html[data-appearance=night] #root .main-content .case-create-option { color: #f1f3fa; }
html[data-appearance=night] #root .main-content .case-create-option:is(:hover,:focus-visible) { background: #ffffff0c; outline-color: #eeeb4e; }

#nosis-appearance-toggle{position:fixed;right:18px;bottom:18px;z-index:1040;border:1px solid #b7c7bd;border-radius:999px;background:#eff5eb;color:#273b33;padding:10px 16px;min-height:44px;font:600 12px/1.4 system-ui,sans-serif;box-shadow:0 4px 20px #0002;cursor:pointer}
#nosis-appearance-toggle:focus-visible{outline:3px solid #2854eb;outline-offset:3px}
html[data-appearance=night] #nosis-appearance-toggle{background:#222936;color:#f1f3fa;border-color:#ffffff30}
html[data-appearance=night] #nosis-appearance-toggle:focus-visible{outline-color:#eeeb4e}
body:has(:is(.modal.show,.offcanvas.show,[role=dialog][aria-modal=true])) #nosis-appearance-toggle{visibility:hidden}
@media print{#nosis-appearance-toggle{display:none}}
body:not(:has(#root .main-content)) #nosis-appearance-toggle,body.modal-open #nosis-appearance-toggle{display:none}
#nosis-appearance-toggle{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}