/* ==========================================================================
   MATERIAL 3 / GOOGLE MAPS DESIGN TOKENS (MIA THREAT MAP)
   Seed Primary: Floor & Decor Red (#DC2626) -> M3 Tonal Palette
   Neutral Surfaces: Google Maps Neutral Greys
   Default Theme: Light (with Dark / System user toggle)
   ========================================================================== */

:root,
:root[data-theme="light"] {
  /* MANDATORY (modern-web-guidance: dark-mode): Apply color-scheme to :root for viewport-wide theming */
  color-scheme: light;

  /* App Shell Layout */
  --nav-height: 56px;

  /* Typography Families */
  --md-sys-typescale-font-plain: 'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-font-brand: 'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-font-code: 'Google Sans Code', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Primary (Floor & Decor Red Tonal Palette - Light) */
  --md-sys-color-primary: #BF0715;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDAD6;
  --md-sys-color-on-primary-container: #410002;

  /* Secondary (Warm Neutral-Red Tonal Accent for Selected Chips / Nav) */
  --md-sys-color-secondary: #775652;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F6E2E0;
  --md-sys-color-on-secondary-container: #2C1513;

  /* Neutral Surfaces (Google Maps Greys - Light) */
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-dim: #E8EAED;
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F8F9FA;
  --md-sys-color-surface-container: #F1F3F4;
  --md-sys-color-surface-container-high: #E8EAED;
  --md-sys-color-surface-container-highest: #DADCE0;

  /* On-Surface & Outlines */
  --md-sys-color-on-surface: #1F1F1F;
  --md-sys-color-on-surface-variant: #444746;
  --md-sys-color-outline: #747775;
  --md-sys-color-outline-variant: #C4C7C5;

  /* Inverse (Snackbars, Tooltips) */
  --md-sys-color-inverse-surface: #303030;
  --md-sys-color-inverse-on-surface: #F2F2F2;
  --md-sys-color-inverse-primary: #FFB4AB;

  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Scrim */
  --md-sys-color-scrim: rgba(0, 0, 0, 0.4);

  /* Semantic Status Extensions (Light) */
  --md-ext-color-success: #146C2E;
  --md-ext-color-on-success: #FFFFFF;
  --md-ext-color-success-container: #C4EED0;
  --md-ext-color-on-success-container: #072711;

  --md-ext-color-warning: #8C4A00;
  --md-ext-color-on-warning: #FFFFFF;
  --md-ext-color-warning-container: #FFDDB3;
  --md-ext-color-on-warning-container: #2D1600;

  --md-ext-color-info: #0B57D0;
  --md-ext-color-on-info: #FFFFFF;
  --md-ext-color-info-container: #D3E3FD;
  --md-ext-color-on-info-container: #041E49;

  --md-ext-color-star: #FBBC04;

  /* Shape Corner Tokens */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation Levels (Google Maps / Material 3) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(60, 64, 67, 0.3), 0 8px 12px 6px rgba(60, 64, 67, 0.15);

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 400ms;

  /* Scrollbar Tokens (modern-web-guidance: customize-scrollbar-color-and-thickness) */
  --scrollbar-thumb: #C4C7C5;
  --scrollbar-thumb-hover: #747775;
  --scrollbar-track: transparent;
}

/* Dark Theme Overrides (Explicit Dark Mode) */
:root[data-theme="dark"],
:root:has(> head > meta[name="color-scheme"][content="dark"]) {
  color-scheme: dark;

  --md-sys-color-primary: #FFB4AB;
  --md-sys-color-on-primary: #690005;
  --md-sys-color-primary-container: #93000B;
  --md-sys-color-on-primary-container: #FFDAD6;

  --md-sys-color-secondary: #E7BDB8;
  --md-sys-color-on-secondary: #442926;
  --md-sys-color-secondary-container: #5D3F3C;
  --md-sys-color-on-secondary-container: #FFDAD6;

  --md-sys-color-surface: #131314;
  --md-sys-color-surface-dim: #131314;
  --md-sys-color-surface-bright: #37393B;
  --md-sys-color-surface-container-lowest: #0E0E0E;
  --md-sys-color-surface-container-low: #1B1B1B;
  --md-sys-color-surface-container: #1E1F20;
  --md-sys-color-surface-container-high: #282A2C;
  --md-sys-color-surface-container-highest: #333537;

  --md-sys-color-on-surface: #E3E3E3;
  --md-sys-color-on-surface-variant: #C4C7C5;
  --md-sys-color-outline: #8E918F;
  --md-sys-color-outline-variant: #444746;

  --md-sys-color-inverse-surface: #E3E3E3;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #BF0715;

  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  --md-sys-color-scrim: rgba(0, 0, 0, 0.65);

  --md-ext-color-success: #6DD58C;
  --md-ext-color-on-success: #0A3818;
  --md-ext-color-success-container: #0F5223;
  --md-ext-color-on-success-container: #C4EED0;

  --md-ext-color-warning: #FFB95C;
  --md-ext-color-on-warning: #4A2800;
  --md-ext-color-warning-container: #5C3B00;
  --md-ext-color-on-warning-container: #FFDDB3;

  --md-ext-color-info: #A8C7FA;
  --md-ext-color-on-info: #062E6F;
  --md-ext-color-info-container: #0842A0;
  --md-ext-color-on-info-container: #D3E3FD;

  --md-ext-color-star: #FDD663;

  --md-sys-elevation-level1: 0 1px 3px 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --md-sys-elevation-level2: 0 2px 6px 2px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, 0.55), 0 1px 3px 0 rgba(0, 0, 0, 0.65);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, 0.6), 0 2px 3px 0 rgba(0, 0, 0, 0.7);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, 0.65), 0 4px 4px 0 rgba(0, 0, 0, 0.75);

  --scrollbar-thumb: #444746;
  --scrollbar-thumb-hover: #8E918F;
  --scrollbar-track: transparent;
}

/* System Preference Dark Mode when data-theme="system" */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --md-sys-color-primary: #FFB4AB;
    --md-sys-color-on-primary: #690005;
    --md-sys-color-primary-container: #93000B;
    --md-sys-color-on-primary-container: #FFDAD6;

    --md-sys-color-secondary: #E7BDB8;
    --md-sys-color-on-secondary: #442926;
    --md-sys-color-secondary-container: #5D3F3C;
    --md-sys-color-on-secondary-container: #FFDAD6;

    --md-sys-color-surface: #131314;
    --md-sys-color-surface-dim: #131314;
    --md-sys-color-surface-bright: #37393B;
    --md-sys-color-surface-container-lowest: #0E0E0E;
    --md-sys-color-surface-container-low: #1B1B1B;
    --md-sys-color-surface-container: #1E1F20;
    --md-sys-color-surface-container-high: #282A2C;
    --md-sys-color-surface-container-highest: #333537;

    --md-sys-color-on-surface: #E3E3E3;
    --md-sys-color-on-surface-variant: #C4C7C5;
    --md-sys-color-outline: #8E918F;
    --md-sys-color-outline-variant: #444746;

    --md-sys-color-inverse-surface: #E3E3E3;
    --md-sys-color-inverse-on-surface: #303030;
    --md-sys-color-inverse-primary: #BF0715;

    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;

    --md-sys-color-scrim: rgba(0, 0, 0, 0.65);

    --md-ext-color-success: #6DD58C;
    --md-ext-color-on-success: #0A3818;
    --md-ext-color-success-container: #0F5223;
    --md-ext-color-on-success-container: #C4EED0;

    --md-ext-color-warning: #FFB95C;
    --md-ext-color-on-warning: #4A2800;
    --md-ext-color-warning-container: #5C3B00;
    --md-ext-color-on-warning-container: #FFDDB3;

    --md-ext-color-info: #A8C7FA;
    --md-ext-color-on-info: #062E6F;
    --md-ext-color-info-container: #0842A0;
    --md-ext-color-on-info-container: #D3E3FD;

    --md-ext-color-star: #FDD663;

    --md-sys-elevation-level1: 0 1px 3px 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6);
    --md-sys-elevation-level2: 0 2px 6px 2px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6);
    --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, 0.55), 0 1px 3px 0 rgba(0, 0, 0, 0.65);
    --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, 0.6), 0 2px 3px 0 rgba(0, 0, 0, 0.7);
    --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, 0.65), 0 4px 4px 0 rgba(0, 0, 0, 0.75);

    --scrollbar-thumb: #444746;
    --scrollbar-thumb-hover: #8E918F;
    --scrollbar-track: transparent;
  }
}

/* Keep <meta name="color-scheme"> synchronized with :root (modern-web-guidance: dark-mode-toggle) */
:root:has(> head > meta[name="color-scheme"][content="light"]) {
  color-scheme: light;
}

/* ==========================================================================
   GLOBAL BASE APPLICATION (SCOPED AWAY FROM FROZEN POSTER)
   ========================================================================== */

body:not(.poster-preview-active) {
  font-family: var(--md-sys-typescale-font-plain);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  line-height: 20px;
}

/* FROZEN ZONE A PIN (modern-web-guidance: component-specific-light-dark-theme):
   Force the Print Map Preview & 24x36 Poster subtree to retain its exact legacy
   font inheritance, color-scheme, and colors regardless of global M3 theme. */
#print-map-preview-container {
  color-scheme: only dark;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #f8fafc;
  background-color: #060608;
}

body.print-theme-light #print-map-preview-container {
  color-scheme: only light;
}

/* ==========================================================================
   MATERIAL 3 TYPE SCALE CLASSES (.md-typescale-*)
   ========================================================================== */

.md-typescale-display-small {
  font-family: var(--md-sys-typescale-font-brand);
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.md-typescale-headline-small {
  font-family: var(--md-sys-typescale-font-brand);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}

.md-typescale-title-large {
  font-family: var(--md-sys-typescale-font-brand);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}

.md-typescale-title-medium {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.md-typescale-title-small {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.md-typescale-body-large {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.md-typescale-body-medium {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

.md-typescale-body-small {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.md-typescale-label-large {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.md-typescale-label-medium {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.md-typescale-label-small {
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.md-code {
  font-family: var(--md-sys-typescale-font-code);
  font-variant-numeric: tabular-nums;
}

.md-tabular {
  font-variant-numeric: tabular-nums;
}

/* Material Symbols Rounded Icon Helper */
.material-symbols-rounded,
.md-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
  flex-shrink: 0;
}

.md-icon--filled {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.md-icon--sm {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.md-icon--lg {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   SCROLLBAR CUSTOMIZATION (modern-web-guidance: customize-scrollbar-color-and-thickness)
   Do NOT animate scrollbar-color (prevents WebKit scrollbar flicker bug).
   ========================================================================== */

:where(body:not(.poster-preview-active)),
:where(body:not(.poster-preview-active)) *:not(#print-map-preview-container):not(#print-map-preview-container *) {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

@supports not (scrollbar-color: auto) {
  body:not(.poster-preview-active) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  body:not(.poster-preview-active) ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
  body:not(.poster-preview-active) ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9999px;
  }
  body:not(.poster-preview-active) ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}