/* ==========================================================================
   MATERIAL 3 / GOOGLE MAPS COMPONENT & SURFACE SYSTEM
   Strictly scoped away from #print-map-preview-container (Frozen Poster)
   and MapLibre canvas markers (.fnd-ml-marker, .central-store-pin, .ring-map-badge).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FOCUS RING & INTERACTIVE STATE LAYER UTILITIES
   -------------------------------------------------------------------------- */
:where(body:not(.poster-preview-active)) :where(
  .md-btn,
  .md-icon-btn,
  .md-chip,
  .md-tab,
  .md-segmented__btn,
  .md-menu-item,
  .md-list-item--interactive,
  button:not(#print-map-preview-container *),
  select:not(#print-map-preview-container *),
  input:not(#print-map-preview-container *),
  textarea:not(#print-map-preview-container *)
):focus-visible {
  outline: 3px solid var(--md-sys-color-primary) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   2. BUTTONS (.md-btn)
   -------------------------------------------------------------------------- */
.md-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition:
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  overflow: hidden;
}

.md-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-btn:hover::before {
  opacity: 0.08;
}

.md-btn:active::before {
  opacity: 0.12;
}

.md-btn:disabled,
.md-btn[aria-disabled="true"] {
  opacity: 0.38;
  pointer-events: none;
  box-shadow: none !important;
}

.md-btn--sm {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
  line-height: 16px;
  gap: 6px;
}

.md-btn--filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level0);
}

.md-btn--filled:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-btn--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-btn--tonal[aria-pressed="true"],
.md-btn--tonal[data-state="active"],
.md-btn--tonal.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.md-btn--outlined {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline-variant);
}

.md-btn--outlined:hover {
  border-color: var(--md-sys-color-outline);
}

.md-btn--outlined[aria-pressed="true"],
.md-btn--outlined[data-state="active"],
.md-btn--outlined.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: var(--md-sys-color-primary);
}

.md-btn--text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 12px;
}

.md-btn--elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

.md-btn--elevated:hover {
  box-shadow: var(--md-sys-elevation-level2);
}

/* --------------------------------------------------------------------------
   3. ICON BUTTONS & GOOGLE MAPS ACTION CIRCLES (.md-icon-btn, .md-place-action)
   -------------------------------------------------------------------------- */
.md-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  overflow: hidden;
}

.md-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-icon-btn:hover::before {
  opacity: 0.08;
}

.md-icon-btn:active::before {
  opacity: 0.12;
}

.md-icon-btn--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-icon-btn--outlined {
  background-color: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.md-icon-btn--filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-icon-btn--surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level2);
}

.md-icon-btn--sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

/* Google Maps Place Panel Action Button (Circular tonal button + label underneath) */
.md-place-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  min-width: 56px;
}

.md-place-action__circle {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-place-action:hover .md-place-action__circle {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.md-place-action[aria-pressed="true"] .md-place-action__circle,
.md-place-action.active .md-place-action__circle {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* --------------------------------------------------------------------------
   4. CHIPS (.md-chip & .md-status-chip)
   -------------------------------------------------------------------------- */
.md-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-chip:hover {
  background-color: var(--md-sys-color-surface-container-low);
}

.md-chip--filter,
.md-chip--assist,
.md-chip--suggestion,
.md-chip--input {
  border-radius: var(--md-sys-shape-corner-full);
}

.md-chip[aria-pressed="true"],
.md-chip[aria-selected="true"],
.md-chip[data-active="true"],
.md-chip.active {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: transparent !important;
  font-weight: 600;
}

/* Google Maps Floating Layer Chip (Level 2 shadow on white, pill shape, no border) */
.md-chip--map,
.floating-layer-chip {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: none !important;
  box-shadow: var(--md-sys-elevation-level2) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
}

.md-chip--map:hover,
.floating-layer-chip:hover {
  background-color: var(--md-sys-color-surface-container-low) !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
}

.md-chip--map[aria-pressed="true"],
.md-chip--map[data-active="true"],
.floating-layer-chip[aria-pressed="true"],
.floating-layer-chip[data-active="true"] {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  font-weight: 600 !important;
}

/* Semantic Status Chips (MIE Verbatim Labels & Statuses) */
.md-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.md-status-chip--success {
  background-color: var(--md-ext-color-success-container);
  color: var(--md-ext-color-on-success-container);
}

.md-status-chip--warning {
  background-color: var(--md-ext-color-warning-container);
  color: var(--md-ext-color-on-warning-container);
}

.md-status-chip--error {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.md-status-chip--info {
  background-color: var(--md-ext-color-info-container);
  color: var(--md-ext-color-on-info-container);
}

.md-status-chip--neutral {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

/* --------------------------------------------------------------------------
   5. CARDS (.md-card)
   -------------------------------------------------------------------------- */
.md-card {
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px;
  font-family: var(--md-sys-typescale-font-plain);
  color: var(--md-sys-color-on-surface);
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-card--filled {
  background-color: var(--md-sys-color-surface-container-low);
  border: none;
}

.md-card--outlined {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.md-card--elevated {
  background-color: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
  border: none;
}

/* --------------------------------------------------------------------------
   6. TEXT FIELDS, SELECTS & SEARCH PILLS (.md-text-field, .md-select, .md-search)
   -------------------------------------------------------------------------- */
.md-text-field,
.md-select {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-sm);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-text-field:hover,
.md-select:hover {
  border-color: var(--md-sys-color-on-surface);
}

.md-text-field:focus,
.md-select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
  outline: none;
}

.md-text-field::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

.md-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border: 1px solid transparent;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-search:focus-within {
  background-color: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

.md-search input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. TABS (.md-tabs & .md-tab) & SEGMENTED BUTTONS (.md-segmented)
   -------------------------------------------------------------------------- */
.md-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.md-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-tab:hover {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-low);
}

.md-tab[aria-selected="true"],
.md-tab[data-active="true"],
.md-tab.active {
  color: var(--md-sys-color-primary) !important;
  font-weight: 600;
}

.md-tab[aria-selected="true"]::after,
.md-tab[data-active="true"]::after,
.md-tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--md-sys-color-primary);
}

.md-segmented {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
}

.md-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
  border-right: 1px solid var(--md-sys-color-outline);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-segmented__btn:last-child {
  border-right: none;
}

.md-segmented__btn:hover {
  background-color: var(--md-sys-color-surface-container-low);
}

.md-segmented__btn[aria-pressed="true"],
.md-segmented__btn[aria-selected="true"],
.md-segmented__btn[data-active="true"],
.md-segmented__btn.active {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. SWITCHES, LISTS, MENUS, BADGES, SNACKBARS, PROGRESS, DATA TABLES
   -------------------------------------------------------------------------- */
.md-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.md-badge--primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-badge--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-menu {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-sm);
  box-shadow: var(--md-sys-elevation-level2);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 4px 0;
}

.md-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.md-menu-item:hover {
  background-color: var(--md-sys-color-surface-container);
}

.md-menu-item[aria-selected="true"],
.md-menu-item.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
}

.md-list {
  display: flex;
  flex-direction: column;
}

.md-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font-plain);
}

.md-list-item--interactive {
  cursor: pointer;
  border-radius: var(--md-sys-shape-corner-sm);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-list-item--interactive:hover {
  background-color: var(--md-sys-color-surface-container);
}

.md-divider {
  height: 1px;
  width: 100%;
  background-color: var(--md-sys-color-outline-variant);
  border: none;
  margin: 0;
}

.md-progress-linear {
  width: 100%;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}

.md-progress-linear__bar {
  height: 100%;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary);
  transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.md-snackbar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--md-sys-shape-corner-xs);
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
}

.md-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

.md-empty-state__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* M3 Data Table */
.md-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 13px;
  line-height: 18px;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}

.md-data-table thead th {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 12px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  text-align: left;
}

.md-data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  vertical-align: middle;
}

.md-data-table tbody tr {
  transition: background-color 120ms ease;
}

.md-data-table tbody tr:hover {
  background-color: var(--md-sys-color-surface-container-low);
}

/* M3 Dialogs */
.md-dialog-backdrop {
  background-color: var(--md-sys-color-scrim) !important;
  backdrop-filter: blur(2px);
}

.md-dialog {
  background-color: var(--md-sys-color-surface-container-lowest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: var(--md-sys-shape-corner-xl) !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  font-family: var(--md-sys-typescale-font-plain);
}

/* ==========================================================================
   9. SURFACE-SPECIFIC OVERRIDES (W1–W8)
   Ensures all application menus, sheets, tables, and modals render in clean
   Material 3 Light / Dark tokens while keeping the poster 100% frozen.
   ========================================================================== */

/* Surface 1: Login Gateway */
#login-gateway {
  background-color: var(--md-sys-color-surface-container-low) !important;
  backdrop-filter: none !important;
}

#login-card {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-xl) !important;
  box-shadow: var(--md-sys-elevation-level2) !important;
}

/* Surface 2: Top Operating App Bar (#mie-operating-nav) */
#mie-operating-nav {
  height: var(--nav-height, 56px) !important;
  min-height: var(--nav-height, 56px) !important;
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: var(--md-sys-elevation-level0) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

#mie-operating-nav .mie-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, color 150ms ease;
}

#mie-operating-nav .mie-nav-btn:hover {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface) !important;
}

#mie-operating-nav .mie-nav-btn[aria-selected="true"],
#mie-operating-nav .mie-nav-btn[data-active="true"],
#mie-operating-nav .mie-nav-btn.bg-red-900\/80 {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* Surface 3: Store Selector Pill & Dropdown Menu (#store-dropdown-menu) */
#store-selector-container {
  background-color: var(--md-sys-color-surface-container) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  height: 40px !important;
  padding: 0 12px !important;
  transition: background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

#store-selector-container:focus-within,
#store-selector-container:hover {
  background-color: var(--md-sys-color-surface) !important;
  border-color: var(--md-sys-color-primary) !important;
  box-shadow: var(--md-sys-elevation-level1) !important;
}

#store-search-input {
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#store-search-input::placeholder {
  color: var(--md-sys-color-on-surface-variant) !important;
}

#store-dropdown-menu {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
}

/* Surface 5: Floating Map Controls & Attribution */
#map-floating-zoom-controls .md-map-control-btn,
#btn-recenter-store,
#btn-zoom-in,
#btn-zoom-out {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: none !important;
  box-shadow: var(--md-sys-elevation-level2) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

#btn-recenter-store:hover,
#btn-zoom-in:hover,
#btn-zoom-out:hover {
  background-color: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-primary) !important;
}

#map-attribution {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  box-shadow: var(--md-sys-elevation-level1) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
}

#map-attribution a {
  color: var(--md-sys-color-primary) !important;
}

/* Surface 6: MapLibre Popup Card Chrome */
.maplibregl-popup-content {
  background: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

/* Surface 7: Command Hub Navigation Drawer (#sidebar-command-hub-drawer) */
#sidebar-command-hub-drawer {
  top: var(--nav-height, 56px) !important;
  background-color: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-right: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: 0 var(--md-sys-shape-corner-lg) var(--md-sys-shape-corner-lg) 0 !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

#sidebar-command-hub {
  background-color: transparent !important;
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

#sidebar-command-hub .hub-btn,
#hub-map-controls .hub-btn {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#sidebar-command-hub .hub-btn:hover,
#hub-map-controls .hub-btn:hover {
  background-color: var(--md-sys-color-surface-container) !important;
  border-color: var(--md-sys-color-outline) !important;
}

#sidebar-command-hub .hub-btn.active,
#sidebar-command-hub .hub-btn[aria-pressed="true"],
#sidebar-command-hub .hub-btn.border-red-600 {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
  font-weight: 600 !important;
}

.layer-toggle-chip {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-sm) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.layer-toggle-chip span {
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.layer-toggle-chip:has(input:checked) {
  background-color: var(--md-sys-color-secondary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
}

.layer-toggle-chip:has(input:checked) span {
  color: var(--md-sys-color-on-secondary-container) !important;
  font-weight: 600 !important;
}

/* Surface 8: Place Panel / Record Details Side Sheet & Mobile Bottom Sheet */
#mobile-bottom-sheet {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  box-shadow: var(--md-sys-elevation-level2) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

@media (max-width: 1023px) {
  #mobile-bottom-sheet {
    border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) 0 0 !important;
  }
}

@media (min-width: 1024px) {
  #mobile-bottom-sheet {
    top: var(--nav-height, 56px) !important;
    height: calc(100vh - var(--nav-height, 56px)) !important;
    height: calc(100dvh - var(--nav-height, 56px)) !important;
    border-right: 1px solid var(--md-sys-color-outline-variant) !important;
  }
  body.intel-expanded #mobile-bottom-sheet {
    border-right: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
  }
}

#sheet-header-bar {
  background-color: var(--md-sys-color-surface) !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
  padding: 8px 16px !important;
}

#sheet-drag-handle {
  width: 32px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background-color: var(--md-sys-color-outline-variant) !important;
}

#sidebar-dossier {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

#intel-metadata-tags-strip {
  background: var(--md-sys-color-surface-container-low) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: none !important;
}

/* Surface 9: Route Planner & Shared Record Panels */
#mia-shared-record-panel,
#mia-route-planner-panel {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-right: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: var(--md-sys-elevation-level3) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

/* Surfaces 10–17: Reports Hub, Pricing Command Center, Executive Tab */
#tab-view-reports,
#tab-view-pricing,
#tab-view-executive {
  background-color: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

/* Data Tables in Reports, Pricing, Executive, and Benchmark Modals */
.mia-permit-table,
.mia-comp-table,
.mia-radar-table,
.mia-exec-store-table,
.mia-exec-permit-table,
.mia-pricing-matrix-table,
.benchmark-table {
  font-family: var(--md-sys-typescale-font-plain) !important;
  color: var(--md-sys-color-on-surface) !important;
  background-color: var(--md-sys-color-surface) !important;
}

.mia-permit-table thead th,
.mia-comp-table thead th,
.mia-radar-table thead th,
.mia-exec-store-table thead th,
.mia-exec-permit-table thead th,
.mia-pricing-matrix-table thead th,
.benchmark-table th {
  background-color: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
}

.mia-permit-table tbody tr,
.mia-comp-table tbody tr,
.mia-radar-table tbody tr,
.mia-exec-store-table tbody tr,
.mia-exec-permit-table tbody tr,
.mia-pricing-matrix-table tbody tr,
.benchmark-table tr {
  background-color: var(--md-sys-color-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.mia-permit-table tbody tr:hover,
.mia-comp-table tbody tr:hover,
.mia-radar-table tbody tr:hover,
.mia-exec-store-table tbody tr:hover,
.mia-exec-permit-table tbody tr:hover,
.mia-pricing-matrix-table tbody tr:hover,
.benchmark-table tr:hover td {
  background-color: var(--md-sys-color-surface-container-low) !important;
}

.benchmark-table th.col-fnd,
.benchmark-table td.col-fnd {
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
}

.benchmark-table-wrapper {
  background-color: var(--md-sys-color-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
}

/* Card Mode overrides for Permit Browser on Mobile / Cards View */
.mia-permit-table.pb-view-cards tr.pb-permit-row,
.mia-permit-table.pb-view-auto tr.pb-permit-row {
  background-color: var(--md-sys-color-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.mia-permit-table.pb-view-cards td.pb-col-num,
.mia-permit-table.pb-view-auto td.pb-col-num,
.mia-permit-table.pb-view-cards td.pb-col-desc,
.mia-permit-table.pb-view-auto td.pb-col-desc {
  background-color: var(--md-sys-color-surface-container-low) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.mia-permit-desc-box.is-expanded {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface) !important;
}

/* Design Trends Playbook Cards */
.trend-playbook-card,
.trend-regional-style-card,
.trend-news-pulse-card,
.product-price-card {
  background: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
  box-shadow: var(--md-sys-elevation-level0) !important;
}

.trend-playbook-card:hover,
.trend-regional-style-card:hover,
.trend-news-pulse-card:hover,
.product-price-card:hover {
  border-color: var(--md-sys-color-outline) !important;
  box-shadow: var(--md-sys-elevation-level1) !important;
}

.trend-product-link {
  background: var(--md-sys-color-surface-container-low) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-sm) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.trend-product-link:hover {
  background: var(--md-sys-color-secondary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
}

.trend-product-name {
  color: var(--md-sys-color-on-surface) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.trend-product-sku {
  color: var(--md-sys-color-on-surface-variant) !important;
  font-family: var(--md-sys-typescale-font-code) !important;
}

/* Strategic Badges */
.strat-tag-advantage {
  background-color: var(--md-ext-color-success-container) !important;
  color: var(--md-ext-color-on-success-container) !important;
  border-color: transparent !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.strat-tag-vulnerability {
  background-color: var(--md-sys-color-error-container) !important;
  color: var(--md-sys-color-on-error-container) !important;
  border-color: transparent !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.strat-tag-neutral {
  background-color: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border-color: transparent !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-family: var(--md-sys-typescale-font-plain) !important;
}

.comp-tab-btn {
  font-family: var(--md-sys-typescale-font-plain) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  background-color: var(--md-sys-color-surface-container) !important;
  border: 1px solid transparent !important;
}

.comp-tab-btn:hover {
  background-color: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.comp-tab-btn.active {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   10. AUTOMATIC LIGHT/DARK ADAPTATION FOR DYNAMIC TEMPLATE SURFACES
   Adapts any remaining legacy slate/dark utility classes inside non-frozen
   surfaces (#tab-view-reports, #tab-view-pricing, #tab-view-executive,
   #mobile-bottom-sheet, #sidebar-command-hub-drawer, and modals) so light and
   dark themes have crisp WCAG AA contrast everywhere while keeping the poster
   (#print-map-preview-container) and off-screen PDF pages untouched.
   ========================================================================== */
:where(
  #login-gateway,
  #mie-operating-nav,
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) {
  font-family: var(--md-sys-typescale-font-plain);
}

:where(
  #login-gateway,
  #mie-operating-nav,
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.font-oswald, .font-chakra) {
  font-family: var(--md-sys-typescale-font-brand) !important;
  letter-spacing: 0 !important;
}

:where(
  #login-gateway,
  #mie-operating-nav,
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.font-mono:not(.md-code)) {
  font-family: var(--md-sys-typescale-font-plain) !important;
}

/* Light-mode surface & text harmonization for dynamic sub-templates inside non-frozen surfaces */
:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(
  [class*="bg-[#0"],
  [class*="bg-[#1"],
  [class*="bg-[#2"],
  .bg-slate-900,
  .bg-slate-950,
  .bg-zinc-900,
  .bg-zinc-950
):not(.md-btn--filled):not(.md-badge):not([class*="bg-red-6"]):not([class*="bg-red-7"]):not([class*="bg-emerald-6"]):not([class*="bg-amber-6"]):not([class*="bg-blue-6"]) {
  background-color: var(--md-sys-color-surface) !important;
  background-image: none !important;
  color: var(--md-sys-color-on-surface);
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(
  [class*="border-[#1"],
  [class*="border-[#2"],
  [class*="border-[#3"],
  .border-slate-700,
  .border-slate-800,
  .border-zinc-700,
  .border-zinc-800
) {
  border-color: var(--md-sys-color-outline-variant) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-white, .text-slate-100, .text-slate-200):not(
  .md-btn--filled,
  .md-btn--filled *,
  .md-badge,
  .md-badge *,
  [class*="bg-red-6"],
  [class*="bg-red-6"] *,
  [class*="bg-red-7"],
  [class*="bg-red-7"] *,
  [class*="bg-emerald-6"],
  [class*="bg-emerald-6"] *,
  [class*="bg-amber-6"],
  [class*="bg-amber-6"] *,
  [class*="bg-blue-6"],
  [class*="bg-blue-6"] *,
  [class*="bg-indigo-6"],
  [class*="bg-indigo-6"] *
) {
  color: var(--md-sys-color-on-surface) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-slate-300, .text-slate-400, .text-slate-500, .text-zinc-400) {
  color: var(--md-sys-color-on-surface-variant) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-red-200, .text-red-300, .text-red-400) {
  color: var(--md-sys-color-primary) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-emerald-200, .text-emerald-300, .text-emerald-400) {
  color: var(--md-ext-color-success) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-amber-200, .text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400) {
  color: var(--md-ext-color-warning) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where(.text-blue-200, .text-blue-300, .text-blue-400, .text-cyan-300, .text-cyan-400, .text-indigo-300, .text-indigo-400) {
  color: var(--md-ext-color-info) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where([class*="bg-red-950"], [class*="bg-red-900"]) {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: var(--md-sys-color-primary) !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where([class*="bg-emerald-950"], [class*="bg-emerald-900"]) {
  background-color: var(--md-ext-color-success-container) !important;
  color: var(--md-ext-color-on-success-container) !important;
  border-color: transparent !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where([class*="bg-amber-950"], [class*="bg-amber-900"]) {
  background-color: var(--md-ext-color-warning-container) !important;
  color: var(--md-ext-color-on-warning-container) !important;
  border-color: transparent !important;
}

:root:not([data-theme="dark"]) :where(
  #store-dropdown-menu,
  #sidebar-command-hub-drawer,
  #mobile-bottom-sheet,
  #mia-route-planner-panel,
  #mia-shared-record-panel,
  #tab-view-reports,
  #tab-view-pricing,
  #tab-view-executive,
  #config-modal,
  #print-modal,
  #competitive-analysis-modal,
  #installation-materials-modal,
  #evidence-receipt-modal,
  #field-visit-brief-modal,
  #feedback-reporter-modal
) :where([class*="bg-blue-950"], [class*="bg-blue-900"], [class*="bg-indigo-950"], [class*="bg-indigo-900"], [class*="bg-cyan-950"], [class*="bg-cyan-900"]) {
  background-color: var(--md-ext-color-info-container) !important;
  color: var(--md-ext-color-on-info-container) !important;
  border-color: transparent !important;
}

:root:not([data-theme="dark"]) #user-session-container {
  background: var(--md-sys-color-surface-container) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #user-session-container #hud-user-store {
  color: var(--md-sys-color-on-surface) !important;
}

:root:not([data-theme="dark"]) #hub-toggles-two-col-grid span.bg-white {
  border: 1.5px solid #64748b !important;
}

:root:not([data-theme="dark"]) #store-search-input {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

/* Preserve bright text on dark image scrim inside Competitor Dossier Hero Card */
:root:not([data-theme="dark"]) #intel-hero-card #intel-store-name,
:root:not([data-theme="dark"]) #intel-hero-card #intel-rating-score {
  color: #ffffff !important;
}
:root:not([data-theme="dark"]) #intel-hero-card #intel-hero-caption,
:root:not([data-theme="dark"]) #intel-hero-card #intel-reviews-count {
  color: #e2e8f0 !important;
}
:root:not([data-theme="dark"]) #intel-hero-card #intel-rating-stars {
  color: #fbbf24 !important;
}
:root:not([data-theme="dark"]) #intel-hero-card #intel-price-tier {
  color: #34d399 !important;
}
:root:not([data-theme="dark"]) #intel-hero-card #intel-dist-badge {
  color: #f87171 !important;
}