/* Shared idatal theme contract. This file must be loaded after page styles. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --app-bg: #f4f7fa;
  --sidebar-bg: #ffffff;
  --sidebar-active: #e4f7fa;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --surface-hover: #edf3f7;
  --border-color: #e3e9ef;
  --border-strong: #d5dee7;
  --control-border: #77869a;
  --text-primary: #172033;
  --text-secondary: #5f6b7a;
  --text-muted: #64748b;
  --text-disabled: #77869a;
  --theme-text-primary: #172033;
  --theme-text-secondary: #5f6b7a;
  --theme-text-muted: #64748b;
  --accent: #19b5cf;
  --theme-accent: var(--accent);
  --accent-bg: #e4f7fa;
  --accent-text: #075f70;
  --accent-button-text: #08111f;
  --accent-soft: rgba(25, 181, 207, 0.12);
  --success: #16a36a;
  --success-bg: #ecfdf5;
  --danger: #e0525a;
  --danger-bg: #fef2f2;
  --warning: #c88719;
  --warning-bg: #fff7ed;
  --theme-warning: #c88719;
  --warning-soft-theme: rgba(200, 135, 25, 0.1);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --overlay-bg: rgba(15, 23, 42, 0.38);
  --skeleton-start: #f8fafc;
  --skeleton-mid: #eef3f7;
  --chart-tooltip-bg: #ffffff;
}

html.store-card-route body #overviewView.active > #overviewFilterOpen {
  display: none !important;
}

@media (max-width: 768px) {
  html[data-theme="dark"] .mobile-account-trigger.mobile-user-entry {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: var(--surface-2) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  }

  html[data-theme="dark"] .mobile-account-trigger.mobile-user-entry:hover,
  html[data-theme="dark"] .mobile-account-trigger.mobile-user-entry:focus-visible,
  html[data-theme="dark"] .mobile-account-trigger.mobile-user-entry.active {
    border-color: var(--border-strong) !important;
    background: var(--surface-hover) !important;
  }

  html[data-theme="dark"] .mobile-user-entry .mobile-user-avatar {
    color: #ffffff !important;
    border: 0 !important;
    background: #2f3136 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .mobile-user-name {
    color: var(--text-primary) !important;
  }

  html[data-theme="dark"] .mobile-user-role,
  html[data-theme="dark"] .mobile-user-arrow {
    color: var(--text-muted) !important;
  }
}

/* Multi-row table headers must stack instead of occupying the same sticky top edge. */
thead th {
  top: var(--sticky-table-row-top, 0px) !important;
}

/* Shared loading states: page, section and action levels use one visual language. */
.page-result-region {
  position: relative;
  min-width: 0;
}

.page-result-region.is-data-loading,
.page-result-region.has-data-error,
.page-result-region.has-data-empty {
  min-height: var(--loading-region-height, 320px) !important;
}

.page-result-region[data-loading-kind="section"] {
  --loading-region-height: 260px;
  --loading-region-height-mobile: 180px;
}

.page-result-region[data-loading-kind="table"] {
  --loading-region-height: 320px;
  --loading-region-height-mobile: 220px;
}

.page-result-region[data-loading-kind="page"] {
  --loading-region-height: clamp(380px, calc(100vh - 300px), 620px);
  --loading-region-height-mobile: clamp(260px, calc(100vh - 230px), 520px);
}

.page-result-region:is(.is-data-loading, .has-data-error, .has-data-empty) > :not(.app-loading-state) {
  display: none !important;
}

.app-loading-state.data-loading-layer {
  position: static !important;
  inset: auto !important;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--loading-region-height, 320px) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.app-loading-state[hidden] {
  display: none !important;
}

.app-loading-spinner,
.data-loading-spinner {
  box-sizing: border-box;
  width: 26px !important;
  height: 26px !important;
  border: 3px solid var(--accent-soft) !important;
  border-top-color: var(--accent) !important;
  border-radius: 50%;
  animation: app-loading-spin 0.75s linear infinite !important;
}

.app-loading-state[data-state="error"] .app-loading-text {
  color: var(--danger);
}

.app-loading-text,
.data-loading-copy strong,
.app-loading-detail {
  max-width: min(360px, 100%);
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.app-loading-detail {
  font-size: 12px !important;
  white-space: normal;
}

.app-loading-retry {
  min-height: 32px;
  padding: 5px 12px;
  color: var(--accent-text);
  background: var(--accent-bg);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}

.is-action-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.button-spinner {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-loading-spin 0.75s linear infinite;
}

@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .page-result-region.is-data-loading,
  .page-result-region.has-data-error,
  .page-result-region.has-data-empty,
  .app-loading-state.data-loading-layer {
    min-height: var(--loading-region-height-mobile, 220px) !important;
    height: auto !important;
    max-height: none !important;
  }

  .app-loading-state.data-loading-layer {
    padding: 32px 12px !important;
  }

  .app-loading-spinner,
  .data-loading-spinner {
    width: 24px !important;
    height: 24px !important;
  }

  .app-loading-text,
  .data-loading-copy strong {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-spinner,
  .data-loading-spinner,
  .button-spinner {
    animation-duration: 1.5s !important;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #08111f;
  --sidebar-bg: #071521;
  --sidebar-active: #103246;
  --surface-1: #111d2c;
  --surface-2: #162335;
  --surface-3: #1b2a3d;
  --surface-hover: #203349;
  --border-color: #2a3c52;
  --border-strong: #3b5068;
  --control-border: #5b7590;
  --text-primary: #f3f7fb;
  --text-secondary: #b8c5d6;
  --text-muted: #8ea0b7;
  --text-disabled: #64758a;
  --theme-text-primary: #f3f7fb;
  --theme-text-secondary: #b8c5d6;
  --theme-text-muted: #8ea0b7;
  --accent: #35c7d9;
  --theme-accent: var(--accent);
  --accent-bg: #103544;
  --accent-text: #ddfbff;
  --accent-button-text: #08111f;
  --accent-soft: rgba(53, 199, 217, 0.14);
  --success: #6ee7b7;
  --success-bg: #123326;
  --warning: #f7c66a;
  --warning-bg: #3a2a12;
  --danger: #ff8a91;
  --danger-bg: #3a1b22;
  --theme-warning: var(--warning);
  --warning-soft-theme: var(--warning-bg);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.24);
  --overlay-bg: rgba(0, 0, 0, 0.58);
  --skeleton-start: #162335;
  --skeleton-mid: #203349;
  --chart-tooltip-bg: #172538;

  /* Legacy aliases keep older modules on the same semantic palette. */
  --bg-0: var(--app-bg);
  --bg-1: #0d1a29;
  --bg-page: var(--app-bg);
  --bg-panel: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-soft: var(--surface-2);
  --bg-control: var(--surface-2);
  --panel: var(--surface-1);
  --panel-strong: var(--surface-2);
  --panel-border: var(--border-color);
  --panel-border-strong: var(--border-strong);
  --border: var(--border-color);
  --border-soft: var(--border-color);
  --text: var(--text-primary);
  --text-main: var(--text-primary);
  --text-sub: var(--text-secondary);
  --muted: var(--text-muted);
  --primary: var(--theme-accent);
  --primary-hover: #56d5e3;
  --primary-soft: var(--accent-soft);
}

html,
body {
  background: var(--app-bg);
  color: var(--text-primary);
}

html[data-theme="dark"] body {
  background: var(--app-bg) !important;
}

html[data-theme="dark"] :where(
  .app-shell,
  .app-layout,
  .app-main,
  .main-content,
  .page-content,
  .content-wrapper,
  .dashboard-page,
  .view-page,
  .module-deck,
  .module-pane,
  .drawer-page,
  .drawer-subview,
  #overviewView,
  #outboundView,
  #knowledgeView,
  #agentView
) {
  color: var(--text-primary);
  background-color: var(--app-bg);
}

html[data-theme="dark"] :where(
  .panel,
  .card,
  .metric-card,
  .kpi-card,
  .trend-card,
  .chart-card,
  .data-card,
  .chart-panel,
  .table-panel,
  .detail-panel,
  .compare-panel,
  .map-panel,
  .filter-card,
  .filter-drawer-card,
  .drawer-chart-panel,
  .drawer-table-panel,
  .drawer-detail-panel,
  .drawer-map-panel,
  .store-card-panel,
  .store-card-hero,
  .store-card-result-item,
  .store-card-summary-item,
  .store-card-monthly-item,
  .store-card-stat-item,
  .store-card-metric-card,
  .health-chart-panel,
  .health-card,
  .health-rank-card,
  .ranking-card,
  .mobile-ranking-section,
  .refill-list-panel,
  .refill-detail-panel,
  .problem-refill-admin-panel,
  .meeting-task-input-card,
  .meeting-task-preview-card,
  .meeting-task-list-card,
  .meeting-task-summary-card,
  .meeting-task-card,
  .meeting-task-log-item,
  .problem-store-card,
  .knowledge-drive-panel,
  .knowledge-folder-card,
  .knowledge-file-card,
  .ai-mode-card,
  .agent-chat-panel,
  .agent-answer-panel
) {
  color: var(--text-primary) !important;
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] :where(
  h1, h2, h3, h4, h5,
  .panel-title,
  .dashboard-page-title,
  .metric-value,
  .rank-value,
  .province-name,
  .store-card-title-row strong,
  .store-card-title-row h4
) {
  color: var(--text-primary);
}

html[data-theme="dark"] :where(
  p,
  small,
  .subtitle,
  .metric-sub,
  .trend-card-sub,
  .dashboard-page-title p,
  .dashboard-page-title small,
  .map-note,
  .report-muted,
  .mobile-rank-subtitle,
  .mobile-rank-filter-row
) {
  color: var(--text-secondary);
}

html[data-theme="dark"] :where(
  .view-tabs,
  .module-tabs,
  .sub-tabs,
  .health-module-tabs,
  .text-module-nav,
  .agent-sub-tabs-card,
  .ai-config-page-tabs
) {
  color: var(--text-secondary);
  background: transparent !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(.tab-btn, .module-tab, .text-module-item, .text-nav-item) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] :where(.tab-btn.active, .module-tab.active, .text-module-item.active, .text-module-item.is-active, .text-nav-item.active) {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] :where(
  input,
  select,
  textarea,
  .refill-input,
  .problem-refill-input,
  .multi-picker-search,
  .admin-province-trigger
) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--control-border) !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

html[data-theme="dark"] :where(button, [role="button"]):not(.active):not(.danger) {
  border-color: var(--control-border);
}

html[data-theme="dark"] option {
  color: var(--text-primary);
  background: var(--surface-2);
}

html[data-theme="dark"] :where(
  .modal,
  .drawer,
  .popover,
  .dropdown-menu,
  .context-menu,
  .account-panel,
  .mobile-account-menu,
  .multi-picker-sheet,
  .multi-picker-options,
  .health-period-detail,
  .admin-province-panel,
  .upload-modal-sheet,
  .filter-drawer-card,
  .dialog-sheet
) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] :where(
  .filter-backdrop,
  .sidebar-backdrop,
  .modal-overlay,
  .upload-modal-overlay,
  .multi-picker-overlay,
  .admin-modal-backdrop
) {
  background: var(--overlay-bg) !important;
}

html[data-theme="dark"] :where(
  .table-wrap,
  .health-table-wrap,
  .refill-table-wrap,
  .problem-refill-preview-wrap,
  .store-risk-table-wrap,
  .ai-markdown-table-wrap
) {
  color: var(--text-primary) !important;
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] table {
  color: var(--text-primary);
  background: var(--surface-1);
}

html[data-theme="dark"] :where(thead th, .health-export-table th) {
  color: var(--text-primary) !important;
  background: var(--surface-3) !important;
  border-color: var(--border-color) !important;
  box-shadow: inset 0 -1px 0 var(--border-color) !important;
}

html[data-theme="dark"] tbody tr:nth-child(odd) td {
  color: var(--text-primary);
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) td {
  color: var(--text-primary);
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] tbody tr:hover td {
  background: var(--surface-hover) !important;
}

html[data-theme="dark"] :where(th, td, tfoot td) {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] tbody tr:nth-child(odd) :where(th, td)[style*="position: sticky"],
html[data-theme="dark"] tbody tr:nth-child(odd) :where(.sticky-col, .frozen-col) {
  background: var(--surface-1) !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) :where(th, td)[style*="position: sticky"],
html[data-theme="dark"] tbody tr:nth-child(even) :where(.sticky-col, .frozen-col) {
  background: var(--surface-2) !important;
}

html[data-theme="dark"] :where(
  .data-loading-layer,
  .ranking-loading,
  .loading-state,
  .empty-state,
  .error-state,
  .store-card-empty,
  .refill-empty,
  .knowledge-empty
) {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(.skeleton, [class*="skeleton-"]) {
  background: linear-gradient(90deg, var(--skeleton-start), var(--skeleton-mid), var(--skeleton-start)) !important;
}

html[data-theme="dark"] :where(.toast, .flash, .message-toast, .status-toast) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] :where(.trend-data-note, .meeting-task-warning, .warning-banner) {
  color: #e7b85f !important;
  background: var(--warning-soft-theme) !important;
  border-color: rgba(227, 168, 75, 0.24) !important;
}

html[data-theme="dark"] {
  scrollbar-color: var(--border-strong) var(--surface-1);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-1);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

/* Province ranking and trend pages define their own local palette. */
html[data-theme="dark"] :where(.page-province-ranking, .page-trend-analysis) {
  --page-bg: var(--app-bg);
  --card-bg: var(--surface-1);
  --card-border: var(--border-color);
  --text-primary: #e7eef7;
  --text-secondary: #9aabbf;
  --text-muted: #6f8197;
  --primary: var(--theme-accent);
  --primary-soft: var(--accent-soft);
  --positive: var(--success);
  --negative: var(--danger);
  --warning: #e3a84b;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .page-province-ranking .health-chart-panel,
html[data-theme="dark"] .page-province-ranking .mobile-rank-month-chip {
  color: var(--text-primary) !important;
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .page-province-ranking .mobile-ranking-item {
  border-color: var(--border-color);
  background: var(--surface-2);
}

html[data-theme="dark"] .page-province-ranking .mobile-rank-bar {
  background: var(--surface-3);
}

/* Standalone pages use the same persisted theme and control. */
.standalone-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text-primary);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.standalone-theme-toggle:hover {
  border-color: var(--theme-accent);
  background: var(--surface-hover);
}

.admin-floating-theme-toggle {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  box-shadow: var(--shadow-card);
}

.login-page > .standalone-theme-toggle {
  position: fixed;
  z-index: 10;
  top: 18px;
  right: 18px;
}

html[data-theme="dark"] .login-page {
  color: var(--text-primary);
  background: var(--app-bg) !important;
}

html[data-theme="dark"] :where(.login-card, .change-password-card) {
  color: var(--text-primary);
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] :where(.login-input-wrap, .login-input) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--control-border) !important;
}

html[data-theme="dark"] :where(.login-brand p, .login-field label, .login-footer, .change-password-head p) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .admin-page {
  --admin-bg-page: var(--app-bg);
  --admin-bg-panel: var(--surface-1);
  --admin-bg-soft: var(--surface-2);
  --admin-border: var(--border-color);
  --admin-border-soft: var(--border-color);
  --admin-text: var(--text-primary);
  --admin-sub: var(--text-secondary);
  --admin-primary: var(--theme-accent);
  --admin-primary-soft: var(--accent-soft);
  --admin-shadow: var(--shadow-card);
  color: var(--text-primary) !important;
  background: var(--app-bg) !important;
}

html[data-theme="light"] .admin-page {
  --bg: var(--app-bg);
  --panel: var(--surface-1);
  --panel-border: var(--border-color);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--theme-accent);
  --accent-2: #38bdf8;
  color: var(--text-primary) !important;
  background: var(--app-bg) !important;
}

html[data-theme="light"] .admin-page:not(.system-admin-page) :where(
  .auth-card,
  .admin-card,
  .user-card,
  .admin-head,
  .flash
) {
  color: var(--text-primary);
  background: var(--surface-1);
  border-color: var(--border-color);
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] .admin-page:not(.system-admin-page) :where(input, select, textarea) {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: var(--border-color);
}

html[data-theme="light"] .admin-page:not(.system-admin-page) :where(.ghost-btn, button.ghost-btn) {
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
}

html[data-theme="dark"] .system-admin-page {
  --admin-page-bg: var(--app-bg);
  --admin-sidebar-bg: var(--sidebar-bg);
  --admin-sidebar-border: var(--border-color);
  --admin-sidebar-hover: var(--surface-hover);
  --admin-sidebar-active: var(--sidebar-active);
  --admin-sidebar-active-text: var(--theme-accent);
  background: var(--app-bg) !important;
}

html[data-theme="dark"] .admin-page :where(
  .auth-card,
  .admin-card,
  .system-admin-card,
  .user-card,
  .system-admin-side,
  .system-admin-main,
  .system-admin-head,
  .admin-section,
  .admin-panel,
  .admin-stat-grid article,
  .admin-service-grid article,
  .admin-visual-grid article,
  .admin-raw-json,
  .admin-reference-card,
  .admin-users-panel,
  .admin-compact-stats,
  .admin-modal,
  .admin-drawer,
  .admin-modal-panel,
  .admin-drawer-panel,
  .admin-drawer-section,
  .admin-province-panel
) {
  color: var(--text-primary) !important;
  background: var(--surface-1) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] .admin-page :where(.ghost-btn, button.ghost-btn) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .admin-page :where(
  .admin-form-actions .secondary,
  .system-admin-form button.secondary,
  .admin-drawer-section button,
  .admin-multiselect-actions button,
  .admin-province-trigger,
  .admin-province-panel button
) {
  color: var(--text-primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] :where(
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "]
) {
  border-color: var(--border-color);
}

/* Dark-theme contrast contract for shared interaction states. */
html[data-theme="dark"] :where(
  .eyebrow,
  .filter-kicker,
  .sidebar-section-title,
  .data-date,
  .update-time,
  .metric-label,
  .table-secondary,
  .pagination-info,
  .empty-copy
) {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  [aria-disabled="true"],
  .store-inspection-card.disabled
) {
  color: var(--text-disabled) !important;
  border-color: var(--border-color) !important;
  background-color: var(--surface-2) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  .map-toolbar select:disabled,
  .store-inspection-card.disabled,
  .store-card-panel.is-loading .store-card-results,
  .store-card-panel.is-loading .store-card-empty,
  .store-card-panel.is-loading .store-card-detail
) {
  opacity: 1 !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(.lucide, [data-lucide], .knowledge-tool-btn svg, .knowledge-icon-btn svg) {
  color: inherit;
  stroke: currentColor;
  opacity: 1;
}

html[data-theme="dark"] :where(
  .sidebar-menu-item,
  .sidebar-user-summary,
  .sidebar-user-menu-item,
  .mobile-account-menu-item
) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] :where(
  .sidebar-menu-item:hover,
  .sidebar-user-summary:hover,
  .sidebar-user-menu-item:hover,
  .mobile-account-menu-item:hover
) {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

html[data-theme="dark"] :where(
  .sidebar-menu-item.active,
  .sidebar-nav-group.active > .sidebar-primary-nav,
  .sidebar-user-summary.active,
  .mobile-account-menu-item.active
) {
  color: var(--accent-text) !important;
  background: var(--accent-bg) !important;
}

html[data-theme="dark"] :where(
  .sidebar-menu-item svg,
  .sidebar-chevron,
  .sidebar-user-caret,
  .sidebar-status-text
) {
  color: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  .tab-btn.active,
  .module-tab.active,
  .text-nav-item.active,
  .text-nav-item.is-active,
  .text-nav-item[aria-selected="true"],
  .filter-chip.active,
  .status-chip.active
) {
  color: var(--accent-text) !important;
  border-color: var(--border-strong) !important;
  background-color: var(--accent-bg) !important;
}

html[data-theme="dark"] :where(
  .upload-area button,
  .map-toolbar button,
  .tab-btn.wide,
  .side-filter-trigger,
  .login-submit,
  .multi-picker-actions .active,
  .knowledge-primary-btn,
  .admin-page button[type="submit"]:not(.secondary):not(.danger)
) {
  color: var(--accent-button-text) !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] :where(
  .upload-area button:hover,
  .map-toolbar button:hover,
  .tab-btn.wide:hover,
  .side-filter-trigger:hover,
  .login-submit:hover,
  .knowledge-primary-btn:hover,
  .admin-page button[type="submit"]:not(.secondary):not(.danger):hover
) {
  color: var(--accent-button-text) !important;
  background: #56d5e3 !important;
}

html[data-theme="dark"] :where(.status-success, .metric-up, .badge-ok, .status-ok, .admin-badge.state-on) {
  color: var(--success) !important;
  background: var(--success-bg) !important;
  border-color: color-mix(in srgb, var(--success) 42%, transparent) !important;
}

html[data-theme="dark"] :where(.status-warning, .badge-warn, .warning-banner, .health-summary-card.warning) {
  color: var(--warning) !important;
  background: var(--warning-bg) !important;
  border-color: color-mix(in srgb, var(--warning) 42%, transparent) !important;
}

html[data-theme="dark"] :where(.status-error, .metric-down, .badge-off, .status-danger, .tab-btn.danger, .admin-badge.state-off) {
  color: var(--danger) !important;
  background: var(--danger-bg) !important;
  border-color: color-mix(in srgb, var(--danger) 42%, transparent) !important;
}

html[data-theme="dark"] :where(.field-help, .th-help-dot) {
  color: var(--accent) !important;
  border-color: var(--border-strong) !important;
  background: var(--accent-bg) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(.field-help-popover, .tooltip) {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-3) !important;
}

/* Knowledge Library has legacy ID-specific light rules, so its theme mapping is explicit. */
html[data-theme="dark"] #knowledgeView .knowledge-title-block h2,
html[data-theme="dark"] #knowledgeView .knowledge-folder-open strong,
html[data-theme="dark"] #knowledgeView .knowledge-file-main strong,
html[data-theme="dark"] #knowledgeView .knowledge-file-name strong,
html[data-theme="dark"] #knowledgeView .knowledge-empty strong {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-title-block p,
html[data-theme="dark"] #knowledgeView .knowledge-summary-meta,
html[data-theme="dark"] #knowledgeView .knowledge-folder-count,
html[data-theme="dark"] #knowledgeView .knowledge-folder-open small,
html[data-theme="dark"] #knowledgeView .knowledge-file-main span,
html[data-theme="dark"] #knowledgeView .knowledge-file-row,
html[data-theme="dark"] #knowledgeView .knowledge-sort-field,
html[data-theme="dark"] #knowledgeView .knowledge-breadcrumbs {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-search-field,
html[data-theme="dark"] #knowledgeView .knowledge-sort-field,
html[data-theme="dark"] #knowledgeView .knowledge-tool-btn,
html[data-theme="dark"] #knowledgeView .knowledge-icon-btn,
html[data-theme="dark"] #knowledgeView .knowledge-folder-card,
html[data-theme="dark"] #knowledgeView .knowledge-file-card,
html[data-theme="dark"] #knowledgeView .knowledge-file-table {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: var(--surface-1) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-search-field input,
html[data-theme="dark"] #knowledgeView .knowledge-sort-field select {
  color: var(--text-primary) !important;
  background: transparent !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-search-field input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-search-field svg,
html[data-theme="dark"] #knowledgeView .knowledge-more-btn {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-tool-btn:hover,
html[data-theme="dark"] #knowledgeView .knowledge-icon-btn:hover,
html[data-theme="dark"] #knowledgeView .knowledge-icon-btn.active,
html[data-theme="dark"] #knowledgeView .knowledge-more-btn:hover,
html[data-theme="dark"] #knowledgeView .knowledge-more-btn.active {
  color: var(--accent-text) !important;
  border-color: var(--border-strong) !important;
  background: var(--accent-bg) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-primary-btn,
html[data-theme="dark"] #knowledgeView .knowledge-primary-btn:hover {
  color: var(--accent-button-text) !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-secondary-btn,
html[data-theme="dark"] #knowledgeView .knowledge-upload-status,
html[data-theme="dark"] #knowledgeView .knowledge-folder-icon,
html[data-theme="dark"] #knowledgeView .knowledge-file-icon,
html[data-theme="dark"] #knowledgeView .knowledge-empty-icon {
  color: var(--accent-text) !important;
  border-color: var(--border-strong) !important;
  background: var(--accent-bg) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-crumb {
  color: var(--accent) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-crumb:disabled {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-more-menu {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: var(--surface-3) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-more-menu button {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-more-menu button:hover {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-more-menu button.danger {
  color: var(--danger) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-file-row {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-file-row-head {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: var(--surface-3) !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-empty {
  color: var(--text-muted) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-2) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #knowledgeView .knowledge-content-zone.is-dragging::before {
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent-bg) 92%, transparent) !important;
}

/* Bright primary actions use dark ink in both themes. */
html[data-theme="light"] body :where(
  .upload-area button,
  .map-toolbar button,
  .tab-btn.wide,
  .side-filter-trigger,
  .login-submit,
  .multi-picker-actions .active,
  .knowledge-primary-btn,
  .admin-page button[type="submit"]:not(.secondary):not(.danger)
) {
  color: var(--accent-button-text) !important;
  text-shadow: none !important;
}

html[data-theme="light"] body :where(input, select, textarea) {
  border-color: var(--control-border) !important;
}

html[data-theme="light"] body :where(.standalone-theme-toggle, .ghost-btn, button.ghost-btn) {
  border-color: var(--control-border) !important;
}

html[data-theme="light"] .login-page :where(.password-toggle, .login-footer) {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body :where(input, select, textarea):focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

html[data-theme="light"] body :where(
  .tab-btn.active,
  .module-tab.active,
  .toolbar-actions .tab-btn.active,
  .store-card-results-toggle.active
) {
  color: var(--accent-button-text) !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  .login-page > .standalone-theme-toggle {
    top: 10px;
    right: 10px;
  }
}

/* Mobile dark-theme contract. Loaded after the legacy mobile source-of-truth rules. */
@media (max-width: 1023px) {
  .app-sidebar .sidebar-brand-status-row {
    display: none !important;
  }

  html[data-theme="dark"] .app-sidebar {
    color: var(--text-primary) !important;
    border-right-color: var(--border-color) !important;
    background: var(--sidebar-bg) !important;
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.42) !important;
  }

  html[data-theme="dark"] .sidebar-backdrop {
    background: rgba(0, 0, 0, 0.64) !important;
    backdrop-filter: blur(3px);
  }

  html[data-theme="dark"] .sidebar-brand,
  html[data-theme="dark"] .sidebar-user-block {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: var(--sidebar-bg) !important;
  }

  html[data-theme="dark"] .sidebar-brand-name,
  html[data-theme="dark"] .sidebar-user-copy strong {
    color: var(--text-primary) !important;
  }

  html[data-theme="dark"] .sidebar-brand-subtitle,
  html[data-theme="dark"] .sidebar-user-copy small,
  html[data-theme="dark"] .sidebar-date-label,
  html[data-theme="dark"] .sidebar-date-value {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .sidebar-collapse-button,
  html[data-theme="dark"] .mobile-sidebar-toggle,
  html[data-theme="dark"] .sidebar-business-date {
    color: var(--text-secondary) !important;
    border-color: var(--control-border) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .sidebar-collapse-button:hover,
  html[data-theme="dark"] .mobile-sidebar-toggle:hover,
  html[data-theme="dark"] .mobile-sidebar-toggle.active {
    color: var(--accent-text) !important;
    border-color: var(--accent) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .sidebar-data-status {
    color: var(--accent-text) !important;
    border-color: var(--border-strong) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .sidebar-status-dot {
    background: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(53, 199, 217, 0.12) !important;
  }

  html[data-theme="dark"] .sidebar-nav-group.active > .sidebar-primary-nav,
  html[data-theme="dark"] .sidebar-secondary-nav button.active {
    color: var(--accent-text) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .sidebar-primary-nav,
  html[data-theme="dark"] .sidebar-secondary-nav button,
  html[data-theme="dark"] .sidebar-menu-item {
    color: var(--text-secondary) !important;
  }

  html[data-theme="dark"] .sidebar-primary-nav:hover,
  html[data-theme="dark"] .sidebar-secondary-nav button:hover,
  html[data-theme="dark"] .sidebar-menu-item:hover {
    color: var(--text-primary) !important;
    background: var(--surface-hover) !important;
  }

  html[data-theme="dark"] .sidebar-section-title {
    color: var(--text-muted) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="dark"],
  html[data-theme="dark"] body,
  html[data-theme="dark"] .screen-wrap.fixed-shell.app-main {
    background: var(--app-bg) !important;
  }

  html[data-theme="dark"] body,
  html[data-theme="dark"] .screen-wrap.fixed-shell.app-main,
  html[data-theme="dark"] .view-page,
  html[data-theme="dark"] .drawer-page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html[data-theme="dark"] .screen-wrap.fixed-shell.app-main > .top-head.panel.hero-panel {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
    background: rgba(8, 17, 31, 0.97) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(14px) saturate(130%);
  }

  html[data-theme="dark"] .mobile-header-brand-copy strong {
    color: var(--text-primary) !important;
  }

  html[data-theme="dark"] .mobile-header-brand-copy small {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .mobile-header-logo,
  html[data-theme="dark"] .mobile-brand-card-logo,
  html[data-theme="dark"] .sidebar-brand-logo {
    border-color: var(--border-color) !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }

  html[data-theme="dark"] .mobile-account-avatar {
    color: var(--accent-button-text) !important;
    border: 1px solid rgba(53, 199, 217, 0.7) !important;
    background: var(--accent) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
  }

  html[data-theme="dark"] .mobile-account-trigger {
    color: var(--text-primary) !important;
    border-color: transparent !important;
    background: transparent !important;
  }

  html[data-theme="dark"] .mobile-account-trigger.active {
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .mobile-account-menu {
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    background: var(--surface-2) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
  }

  html[data-theme="dark"] .mobile-account-menu-head {
    border-bottom-color: var(--border-color) !important;
  }

  html[data-theme="dark"] .mobile-account-menu-head strong {
    color: var(--text-primary) !important;
  }

  html[data-theme="dark"] .mobile-account-menu-head small,
  html[data-theme="dark"] .mobile-account-menu-item {
    color: var(--text-secondary) !important;
  }

  html[data-theme="dark"] .mobile-account-menu-item:hover,
  html[data-theme="dark"] .mobile-account-menu-item:active {
    color: var(--text-primary) !important;
    background: var(--surface-hover) !important;
  }

  html[data-theme="dark"] .mobile-account-menu-item.danger {
    color: var(--danger) !important;
  }

  html[data-theme="dark"] .mobile-brand-card {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: var(--surface-1) !important;
    box-shadow: var(--shadow-card) !important;
  }

  html[data-theme="dark"] .mobile-brand-status {
    color: var(--accent-text) !important;
    border-color: transparent !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .mobile-brand-status-dot {
    background: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(53, 199, 217, 0.12) !important;
  }

  html[data-theme="dark"] .mobile-brand-date {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .mobile-brand-status.is-error {
    color: var(--danger) !important;
  }

  html[data-theme="dark"] .mobile-brand-status.is-error .mobile-brand-status-dot {
    background: var(--danger) !important;
  }

  html[data-theme="dark"] .text-module-nav,
  html[data-theme="dark"] .health-module-tabs,
  html[data-theme="dark"] .module-text-nav,
  html[data-theme="dark"] .content-text-nav {
    border-bottom-color: var(--border-color) !important;
    background: transparent !important;
  }

  html[data-theme="dark"] #overviewView > [data-module-tabs="overviewModules"].module-text-nav .text-nav-item,
  html[data-theme="dark"] #outboundView > .module-text-nav.text-nav .text-nav-item,
  html[data-theme="dark"] .module-text-nav.text-nav .text-nav-item,
  html[data-theme="dark"] .health-module-tabs.content-text-nav.text-nav .text-nav-item,
  html[data-theme="dark"] .content-text-nav.text-nav .text-nav-item,
  html[data-theme="dark"] .text-module-nav .text-module-item {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] #overviewView > [data-module-tabs="overviewModules"].module-text-nav .text-nav-item.is-active,
  html[data-theme="dark"] #overviewView > [data-module-tabs="overviewModules"].module-text-nav .text-nav-item[aria-selected="true"],
  html[data-theme="dark"] #outboundView > .module-text-nav.text-nav .text-nav-item.is-active,
  html[data-theme="dark"] #outboundView > .module-text-nav.text-nav .text-nav-item[aria-selected="true"],
  html[data-theme="dark"] .module-text-nav.text-nav .text-nav-item.is-active,
  html[data-theme="dark"] .module-text-nav.text-nav .text-nav-item[aria-selected="true"],
  html[data-theme="dark"] .health-module-tabs.content-text-nav.text-nav .text-nav-item.is-active,
  html[data-theme="dark"] .health-module-tabs.content-text-nav.text-nav .text-nav-item[aria-selected="true"],
  html[data-theme="dark"] .content-text-nav.text-nav .text-nav-item.is-active,
  html[data-theme="dark"] .content-text-nav.text-nav .text-nav-item[aria-selected="true"] {
    color: var(--accent) !important;
    background: transparent !important;
  }

  html[data-theme="dark"] #overviewView > [data-module-tabs="overviewModules"].module-text-nav .text-nav-item.is-active::after,
  html[data-theme="dark"] #overviewView > [data-module-tabs="overviewModules"].module-text-nav .text-nav-item[aria-selected="true"]::after,
  html[data-theme="dark"] #outboundView > .module-text-nav.text-nav .text-nav-item.is-active::after,
  html[data-theme="dark"] #outboundView > .module-text-nav.text-nav .text-nav-item[aria-selected="true"]::after,
  html[data-theme="dark"] .module-text-nav.text-nav .text-nav-item.is-active::after,
  html[data-theme="dark"] .module-text-nav.text-nav .text-nav-item[aria-selected="true"]::after,
  html[data-theme="dark"] .content-text-nav.text-nav .text-nav-item.is-active::after,
  html[data-theme="dark"] .content-text-nav.text-nav .text-nav-item[aria-selected="true"]::after {
    background: var(--accent) !important;
  }

  html[data-theme="dark"] .page-province-ranking,
  html[data-theme="dark"] .page-trend-analysis {
    background: var(--app-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .dashboard-action-btn,
  html[data-theme="dark"] .page-province-ranking .health-period-trigger,
  html[data-theme="dark"] .page-trend-analysis .dashboard-action-btn,
  html[data-theme="dark"] .page-trend-analysis .dashboard-action-pill {
    color: var(--text-primary) !important;
    border-color: var(--control-border) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .page-province-ranking .dashboard-action-btn.primary,
  html[data-theme="dark"] .page-trend-analysis .dashboard-action-btn.primary {
    color: var(--accent-text) !important;
    border-color: var(--border-strong) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-ranking-section {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: var(--surface-1) !important;
    box-shadow: var(--shadow-card) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-rank-count {
    color: var(--accent-text) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-rank-chip,
  html[data-theme="dark"] .page-province-ranking .mobile-rank-month-chip {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
    background: var(--surface-2) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-rank-chip b {
    color: var(--text-muted) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-rank-month-chip.is-active,
  html[data-theme="dark"] .page-province-ranking .mobile-chart-toggle {
    color: var(--accent-text) !important;
    border-color: var(--border-strong) !important;
    background: var(--accent-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-ranking-item {
    border-bottom-color: var(--border-color) !important;
    background: transparent !important;
  }

  html[data-theme="dark"] .page-province-ranking .rank-no {
    color: var(--text-primary) !important;
    background: var(--surface-3) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-ranking-item.is-top-1 .rank-no {
    color: var(--warning) !important;
    background: var(--warning-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-ranking-item.is-top-2 .rank-no {
    color: var(--text-primary) !important;
    background: var(--surface-hover) !important;
  }

  html[data-theme="dark"] .page-province-ranking .mobile-ranking-item.is-top-3 .rank-no {
    color: var(--warning) !important;
    background: var(--warning-bg) !important;
  }

  html[data-theme="dark"] .page-province-ranking .rank-bar {
    background: var(--surface-3) !important;
  }

  html[data-theme="dark"] .page-province-ranking .rank-bar-fill {
    background: linear-gradient(90deg, var(--accent), var(--success)) !important;
  }

  html[data-theme="dark"] .side-filter-trigger {
    color: var(--accent-button-text) !important;
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
  }

  html[data-theme="dark"] .filter-drawer-card {
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    background: var(--surface-2) !important;
  }
}

@media (min-width: 769px) {
  .page-province-ranking .dashboard-action-btn.primary,
  .page-trend-analysis .dashboard-action-btn.primary,
  .store-card-head .dashboard-action-btn.primary,
  html[data-theme="light"] .page-province-ranking .dashboard-action-btn.primary,
  html[data-theme="light"] .page-trend-analysis .dashboard-action-btn.primary,
  html[data-theme="light"] .store-card-head .dashboard-action-btn.primary,
  html[data-theme="dark"] .page-province-ranking .dashboard-action-btn.primary,
  html[data-theme="dark"] .page-trend-analysis .dashboard-action-btn.primary,
  html[data-theme="dark"] .store-card-head .dashboard-action-btn.primary {
    min-height: 40px;
    padding: 0 16px;
    color: #ffffff !important;
    border: 1px solid rgba(34, 184, 207, 0.52) !important;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #38bdf8) !important;
    box-shadow: 0 8px 20px rgba(34, 184, 207, 0.2) !important;
  }

  .page-province-ranking .dashboard-action-btn.primary:hover,
  .page-trend-analysis .dashboard-action-btn.primary:hover,
  .store-card-head .dashboard-action-btn.primary:hover,
  .page-province-ranking .dashboard-action-btn.primary:focus-visible,
  .page-trend-analysis .dashboard-action-btn.primary:focus-visible,
  .store-card-head .dashboard-action-btn.primary:focus-visible {
    color: #ffffff !important;
    border-color: rgba(14, 165, 183, 0.62) !important;
    background: linear-gradient(135deg, #0ea5b7, var(--accent)) !important;
    box-shadow: 0 10px 24px rgba(34, 184, 207, 0.28) !important;
    transform: translateY(-1px);
  }

  .dashboard-filter-btn .dashboard-filter-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: none;
  }

  .dashboard-filter-btn .dashboard-filter-icon::before,
  .dashboard-filter-btn .dashboard-filter-icon::after {
    left: 7px;
    right: 7px;
    height: 2px;
    background: #0e7490 !important;
  }

  .dashboard-filter-btn .dashboard-filter-icon::before {
    top: 9px;
    box-shadow: 6px 5px 0 -0.5px #0e7490 !important;
  }

  .dashboard-filter-btn .dashboard-filter-icon::after {
    bottom: 9px;
    box-shadow: -6px -5px 0 -0.5px #0e7490 !important;
  }

  .dashboard-filter-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }
}

/* Keep business cards light enough to blend into the canvas while remaining legible. */
.screen-wrap.fixed-shell.app-main .view-page :where(
  [class*="-card"],
  [class*="-panel"],
  .panel
):not(.filter-card):not(.filter-drawer-card):not(.biz-filter-panel):not(.export-dropdown-panel):not(.report-month-panel):not(.province-rank-control-panel) {
  background: color-mix(in srgb, var(--surface-1) 64%, transparent) !important;
  background-color: color-mix(in srgb, var(--surface-1) 64%, transparent) !important;
  background-image: none !important;
}

.screen-wrap.fixed-shell.app-main #overviewView :where(
  [class*="-card"],
  [class*="-panel"],
  .panel
):not(.filter-card):not(.filter-drawer-card):not(.biz-filter-panel):not(.export-dropdown-panel):not(.province-rank-control-panel) {
  background: color-mix(in srgb, var(--surface-1) 64%, transparent) !important;
  background-color: color-mix(in srgb, var(--surface-1) 64%, transparent) !important;
  background-image: none !important;
}