@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  --bg-dark: #0a0a0a;
  --bg-card: #121214;
  --bg-subtle: #18181b;
  --panel-border: #27272a;
  --fd-red: #dc2626;
  --fd-red-dark: #b91c1c;
  --fd-red-light: #fee2e2;
  --accent-gold: #f59e0b;
  --accent-blue: #2563eb;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

* {
  box-sizing: border-box;
}

/* Fix html2canvas FontMetrics baseline calculation conflict with Tailwind CSS preflight while preserving map marker geometry */
img:not(#google-map-canvas img):not(.gm-style img):not(.central-store-pin img) {
  display: inline-block !important;
}

.central-store-pin img {
  display: block !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #060608; /* Deep black bars on sides */
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* 3:2 Architectural D Poster Frame (36" x 24" Landscape) */
#poster-canvas-3x2 {
  aspect-ratio: 3 / 2;
  width: min(100vw, calc(100vh * 3 / 2));
  height: min(100vh, calc(100vw * 2 / 3));
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  background-color: #0a0a0a;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  border-left: 1px solid #27272a;
  border-right: 1px solid #27272a;
  margin-left: var(--intel-pane-width);
}

/* External Business Profile Dossier (Left: 75% of black bar) & Command Hub (Right: 25% of black bar) */
:root {
  --intel-pane-width: calc((100vw - min(100vw, calc(100vh * 3 / 2))) * 0.75);
  --command-hub-width: calc((100vw - min(100vw, calc(100vh * 3 / 2))) * 0.25);
  --intel-expanded-width: clamp(480px, 45vw, calc(100vw - var(--command-hub-width) - 580px));
  --command-expanded-width: clamp(380px, 32vw, 460px);
}

#external-intel-pane {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  height: 100vh;
  width: var(--intel-pane-width);
  max-width: var(--intel-pane-width);
  z-index: 40;
  box-sizing: border-box;
  background-color: #08080b;
  border-right: 1px solid #27272a;
  border-left: none;
  container-type: inline-size;
  container-name: intel-pane;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #27272a #08080b;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, visibility 0.15s ease, box-shadow 0.25s ease;
}

/* Expanded Business Profile State (Overlaps map, strictly stops before Competitor Directory) */
body.intel-expanded #external-intel-pane {
  width: var(--intel-expanded-width) !important;
  max-width: var(--intel-expanded-width) !important;
  z-index: 45 !important;
  box-shadow: 15px 0 50px rgba(0, 0, 0, 0.85) !important;
  border-right: 2px solid #dc2626 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Fluid responsive adjustments inside the intel pane via Container Queries */
@container intel-pane (max-width: 160px) {
  #intel-standby-view {
    padding: 12px !important;
  }
  .intel-standby-desc {
    display: none !important;
  }
  .intel-standby-title {
    font-size: 13px !important;
  }
  .intel-hdr-title {
    font-size: 12px !important;
  }
  #intel-store-name {
    font-size: 15px !important;
  }
  #intel-gallery-container,
  #intel-reviews-container {
    display: none !important;
  }
}

@container intel-pane (min-width: 161px) and (max-width: 240px) {
  .intel-standby-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  #intel-store-name {
    font-size: 17px !important;
  }
}

@container intel-pane (min-width: 241px) {
  .intel-standby-title {
    font-size: clamp(1.25rem, 5cqi, 1.75rem) !important;
  }
  .intel-standby-desc {
    font-size: clamp(0.75rem, 3cqi, 0.95rem) !important;
    line-height: 1.5 !important;
  }
  #intel-store-name {
    font-size: clamp(1.2rem, 4.5cqi, 1.75rem) !important;
  }
  #intel-analysis-notes {
    font-size: clamp(0.8rem, 2.8cqi, 0.95rem) !important;
    line-height: 1.6 !important;
  }
  #intel-counter-action-text {
    font-size: clamp(0.8rem, 2.8cqi, 0.95rem) !important;
    line-height: 1.55 !important;
  }
}

@container intel-pane (min-width: 580px) {
  .intel-threat-strategy-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  #intel-reviews-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* Tactical Threat & Review Intelligence Focus */
#intel-category-bar > div {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#external-intel-pane #intel-analysis-notes {
  letter-spacing: 0.01em;
}

#external-intel-pane #intel-counter-action-text {
  letter-spacing: 0.01em;
}

.category-pct-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: #16161d;
  border: 1px solid #27272a;
}

#external-command-dock {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  height: 100vh;
  width: var(--command-hub-width);
  max-width: var(--command-hub-width);
  z-index: 40;
  box-sizing: border-box;
  background-color: #08080b;
  border-left: 1px solid #27272a;
  border-right: none;
  container-type: inline-size;
  container-name: command-dock;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scrollbar-width: thin;
  scrollbar-color: #27272a #08080b;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, visibility 0.15s ease, box-shadow 0.25s ease;
}

/* Expanded Command Hub State (Slide-out Overlay Drawer) */
body.command-expanded #external-command-dock {
  width: var(--command-expanded-width) !important;
  max-width: 90vw !important;
  z-index: 45 !important;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.85) !important;
  border-left: 2px solid #dc2626 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure expanded command dock has readable sizing regardless of container queries */
body.command-expanded #external-command-dock .hub-content-padding {
  padding: 16px !important;
  gap: 14px !important;
}
body.command-expanded #external-command-dock .hub-title {
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
}
body.command-expanded #external-command-dock .hub-subtitle {
  display: block !important;
  font-size: 10px !important;
}
body.command-expanded #external-command-dock .hub-label {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}
body.command-expanded #external-command-dock .hub-label span:last-child {
  display: inline !important;
}
body.command-expanded #external-command-dock .hub-input {
  font-size: 12px !important;
  padding: 8px 10px !important;
}
body.command-expanded #external-command-dock .hub-btn {
  font-size: 12px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
body.command-expanded #external-command-dock .hub-btn span:first-child {
  font-size: 14px !important;
}
body.command-expanded #external-command-dock .hub-telemetry {
  display: block !important;
}
body.command-expanded #external-command-dock .hub-status-bar {
  display: flex !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
}
body.command-expanded #store-dropdown-items {
  max-height: 340px !important;
}
body.command-expanded #map-layers-dropdown-menu {
  max-height: 520px !important;
}
body.command-expanded .store-select-item {
  padding: 10px 14px !important;
  gap: 12px !important;
}
body.command-expanded .store-select-item .store-num-badge {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
}
body.command-expanded .store-select-item .store-title {
  font-size: 14px !important;
}
body.command-expanded .store-select-item .store-address {
  font-size: 11.5px !important;
}
body.command-expanded .store-select-item .store-status {
  font-size: 10.5px !important;
}

/* Inlaid Expand/Collapse Button for Command Hub */
#btn-command-dock-expand {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#btn-command-dock-expand:hover {
  background-color: #241116;
  border-color: #dc2626;
  color: #ffffff;
}

body.command-expanded #btn-command-dock-expand {
  background-color: #241116;
  border-color: #dc2626;
  color: #fca5a5;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
}

@container command-dock (max-width: 140px) {
  #btn-command-dock-expand {
    font-size: 8.5px !important;
    padding: 4px 4px !important;
    gap: 3px !important;
    letter-spacing: 0 !important;
  }
}

/* Fluid responsive adjustments inside the command hub via Container Queries */
@container command-dock (max-width: 90px) {
  .hub-content-padding {
    padding: 4px !important;
    gap: 5px !important;
  }
  .hub-header {
    padding-bottom: 3px !important;
    gap: 2px !important;
  }
  .hub-title {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  .hub-subtitle {
    display: none !important;
  }
  #btn-config {
    padding: 2px !important;
  }
  #btn-config svg {
    width: 11px !important;
    height: 11px !important;
  }
  .hub-label {
    font-size: 6.5px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0 !important;
  }
  .hub-label span:last-child {
    display: none !important;
  }
  .hub-input {
    font-size: 7.5px !important;
    padding: 3px 3px !important;
  }
  .hub-btn {
    font-size: 6.8px !important;
    padding: 4px 2px !important;
    gap: 2px !important;
    letter-spacing: 0 !important;
  }
  .hub-btn span:first-child {
    font-size: 8.5px !important;
  }
  .hub-telemetry {
    display: none !important;
  }
  .hub-status-bar {
    padding: 3px 4px !important;
    font-size: 6.5px !important;
  }
}

@container command-dock (min-width: 91px) and (max-width: 140px) {
  .hub-content-padding {
    padding: 8px !important;
    gap: 8px !important;
  }
  .hub-title {
    font-size: 11px !important;
  }
  .hub-subtitle {
    font-size: 7.5px !important;
  }
  .hub-label {
    font-size: 8px !important;
    margin-bottom: 4px !important;
  }
  .hub-input {
    font-size: 9px !important;
    padding: 5px 6px !important;
  }
  .hub-btn {
    font-size: 8.5px !important;
    padding: 6px 6px !important;
    gap: 4px !important;
  }
  .hub-telemetry {
    display: none !important;
  }
  .hub-status-bar {
    padding: 6px 8px !important;
    font-size: 7.5px !important;
  }
}

@container command-dock (min-width: 141px) and (max-width: 199px) {
  .hub-content-padding {
    padding: 12px;
    gap: 12px;
  }
  .hub-title {
    font-size: 13px;
  }
  .hub-input {
    font-size: 10px;
    padding: 7px 8px;
  }
  .hub-btn {
    font-size: 10px;
    padding: 8px 10px;
  }
}

@container command-dock (min-width: 200px) and (max-width: 279px) {
  .hub-content-padding {
    padding: 16px;
    gap: 16px;
  }
  .hub-title {
    font-size: 15px;
  }
  .hub-subtitle {
    font-size: 9.5px;
  }
  .hub-input {
    font-size: 11px;
    padding: 8px 10px;
  }
  .hub-btn {
    font-size: 11.5px;
    padding: 10px 12px;
  }
}

@container command-dock (min-width: 280px) {
  .hub-content-padding {
    padding: 20px;
    gap: 20px;
  }
  .hub-title {
    font-size: 18px;
  }
  .hub-subtitle {
    font-size: 11px;
  }
  .hub-label {
    font-size: 11px;
  }
  .hub-input {
    font-size: 13px;
    padding: 10px 14px;
  }
  .hub-btn {
    font-size: 13px;
    padding: 12px 16px;
  }
  .hub-telemetry {
    font-size: 11px !important;
  }
}

/* Store Selector Dropdown Styling */
#store-dropdown-menu {
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.7);
}

#store-dropdown-items {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #121216;
}

#store-dropdown-items::-webkit-scrollbar {
  width: 5px;
}

#store-dropdown-items::-webkit-scrollbar-track {
  background: #121216;
}

#store-dropdown-items::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

#store-dropdown-items::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Layer Dropdown Menu & Toggles */
#map-layers-dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #121216;
}

#map-layers-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}

#map-layers-dropdown-menu::-webkit-scrollbar-track {
  background: #121216;
}

#map-layers-dropdown-menu::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

#map-layers-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

.layer-toggle-chip:has(input:checked) {
  border-color: #dc2626 !important;
  background-color: #241116 !important;
}

.layer-toggle-chip:has(input:checked) span {
  color: #fca5a5 !important;
  font-weight: 700 !important;
}

#hub-map-controls .hub-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#hub-map-controls .hub-btn:hover {
  border-color: #dc2626;
  background-color: #1e1e24;
}

.font-oswald { font-family: 'Oswald', sans-serif; }
.font-mono { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-variant-numeric: tabular-nums !important; }
.font-chakra { font-family: 'Chakra Petch', sans-serif; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Custom dark scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* Square Map Canvas Wrapper */
#map-square-wrapper {
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  position: relative;
  background-color: #121214;
  overflow: hidden !important;
}

#google-map-canvas {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  overflow: hidden !important;
}

/* Tactical Legend Panel (Dedicated Left Column Outside Map) */
#tactical-legend-panel {
  background: #0c0c0e;
  border-right: 1px solid #27272a;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #0c0c0e;
}

/* Concentric Distance Rings (Floor & Decor Tactical Style) */
.map-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(220, 38, 38, 0.7);
  border-radius: 50%;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  z-index: 12;
}

.map-ring.ring-5mi  { width: 25%; height: 25%; }
.map-ring.ring-10mi { width: 50%; height: 50%; }
.map-ring.ring-15mi { width: 75%; height: 75%; }
.map-ring.ring-20mi { width: 95%; height: 95%; }

.map-ring-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 14, 0.94);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 15;
}

/* Google Maps Custom Overlay Badges (Tactical Black Badges) */
.ring-map-badge {
  background: rgba(10, 10, 14, 0.94) !important;
  backdrop-filter: blur(4px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  color: #ffffff !important;
  padding: 4px 9px 2px 9px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

.sister-store-map-label {
  background: #dc2626 !important;
  border: 1.5px solid #ffffff !important;
  color: #ffffff !important;
  padding: 4px 9px 2px 9px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.central-store-map-label {
  background: #ffffff !important;
  border: 2px solid #dc2626 !important;
  color: #dc2626 !important;
  padding: 3.5px 10px 2px 10px !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   OPTICAL VERTICAL CENTERING FOR BADGES & PILLS ACROSS BROWSER & EXPORT
   Compensates for font cap-height vs descender box metrics in condensed / mono fonts
   ========================================================================== */
.regional-threat-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3px !important;
  padding-bottom: 0px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

#hdr-store-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3.5px !important;
  padding-bottom: 1.5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

#legend-store-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3.5px !important;
  padding-bottom: 1.5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

#directory-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3.5px !important;
  padding-bottom: 1.5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.directory-id-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 2px !important;
  padding-bottom: 0.5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.directory-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 2px !important;
  padding-bottom: 0.5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.category-stat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 2.5px !important;
  padding-bottom: 0px !important;
  line-height: 1 !important;
}

.legend-cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3px !important;
  padding-bottom: 1px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.radius-count-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 3px !important;
  padding-bottom: 1px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Central Store Callout Banner */
.central-store-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}

.central-store-badge {
  background: #ffffff;
  color: #0f172a;
  border: 2px solid #dc2626;
  padding: 5px 12px;
  border-radius: 6px;
  margin-top: 5px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* Competitor Pins */
.competitor-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
  z-index: 20;
}

.competitor-marker:hover, .competitor-marker.active {
  transform: translate(-50%, -50%) scale(1.4);
  z-index: 60;
  border-color: #fca5a5;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.7);
}

/* Top 10 Expanded Callout (White Card with Floor & Decor Red Border) */
.marker-callout-expanded {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #dc2626;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  z-index: 35;
}

.marker-callout-expanded.callout-top {
  left: 50%;
  top: auto;
  bottom: 28px;
  transform: translateX(-50%);
}

.marker-callout-expanded.callout-bottom {
  left: 50%;
  top: 28px;
  bottom: auto;
  transform: translateX(-50%);
}

.marker-callout-expanded.callout-left {
  left: auto;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
}

/* Directory Header and 2-Row Competitor Cards (Modernized & Highly Legible) */
.directory-header-row {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  background-color: #141418;
  border-bottom: 1px solid #27272a;
}

.directory-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 2.5px 6.5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: linear-gradient(180deg, #131317 0%, #0f0f13 100%);
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 33px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

.directory-row-subtext {
  font-weight: 700;
}

.tactical-compass-card {
  background: linear-gradient(180deg, #141418 0%, #0d0d10 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid #27272a;
}

.directory-row:nth-child(even) {
  background: linear-gradient(180deg, #16161b 0%, #111116 100%);
}

.directory-row:hover {
  background: linear-gradient(180deg, #1f1f27 0%, #16161d 100%);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.directory-row.selected {
  border-color: #ef4444 !important;
  border-left: 4px solid #ef4444 !important;
  background: linear-gradient(180deg, #321417 0%, #200d0f 100%) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Discrete Segmented Scrolling */
#directory-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
}

.directory-row-segment {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  flex-shrink: 0;
}

.directory-stepper-btn {
  background: #18181f;
  border: 1px solid #2e2e38;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 2.5px 6px;
  font-size: 10px;
  font-family: monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.directory-stepper-btn:hover:not(:disabled) {
  background: #272732;
  border-color: #dc2626;
  color: #ffffff;
}

.directory-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #27272a;
}

/* Poster Preview & Neutral Selection */
body.poster-preview-active .directory-row.selected {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, #131317 0%, #0f0f13 100%) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.poster-preview-active.print-theme-light .directory-row.selected,
body.print-theme-light .directory-row.selected {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

/* Category Stat Cards & Regional Threat Cards */
.category-stat-card {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.5);
}

.category-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.65);
}

.regional-threat-card {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 48px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.regional-threat-card:hover {
  transform: translateY(-1px);
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, #22222a 0%, #17171e 100%) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(239, 68, 68, 0.25);
}

/* Interactive Threat Star Picker */
.threat-star-picker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.star-btn {
  display: inline-block;
  font-size: 13.5px;
  line-height: 1;
  padding: 1px 0.5px;
  cursor: pointer;
  color: #64748b;
  transition: transform 0.12s ease, color 0.12s ease, text-shadow 0.12s ease;
  user-select: none;
}

.star-btn.filled {
  color: #f59e0b;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.star-btn:hover {
  transform: scale(1.35);
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

/* Highway Badges */
.shield-i10 {
  background: #1e40af;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.shield-ca111 {
  background: #dc2626;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* ==========================================================================
   SECTION FOCUS & ZOOM MODES (Temporary small-screen viewing enhancements)
   ========================================================================== */

/* Universal Backdrop overlay for overlay drawers and focus modes */
#drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.intel-expanded #drawer-backdrop,
body.command-expanded #drawer-backdrop,
body.focus-directory #drawer-backdrop,
body.focus-map #drawer-backdrop,
body.focus-hud #drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* 1. Directory Focus Mode */
#competitor-directory-panel {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

body.focus-directory #competitor-directory-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: clamp(620px, 78%, 940px) !important;
  max-width: 95% !important;
  z-index: 38 !important;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.9) !important;
  border-left: 2px solid #dc2626 !important;
}

body.focus-directory #competitor-directory-panel .directory-row {
  min-height: 48px !important;
  padding: 6px 10px !important;
  gap: 2.5px !important;
}

body.focus-directory #competitor-directory-panel .directory-row .font-bold {
  font-size: 14px !important;
}

body.focus-directory #competitor-directory-panel .directory-row .directory-row-subtext {
  font-size: 13px !important;
}

/* 2. Map Focus Mode */
body.focus-map main,
body.focus-map #map-square-wrapper,
body.focus-map #map-panel-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 37 !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
  justify-content: center !important;
}

/* 3. Bottom HUD Focus Mode */
footer#bottom-hud-footer {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

body.focus-hud footer#bottom-hud-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 80% !important;
  overflow-y: auto !important;
  z-index: 38 !important;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.9) !important;
  border-top: 3px solid #dc2626 !important;
}

/* Tactical Section Focus Toggle Buttons */
.section-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #18181f;
  border: 1px solid #3f3f46;
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.section-focus-btn:hover {
  background: #24242d;
  border-color: #dc2626;
  color: #ffffff;
}

.section-focus-btn.active {
  background: #2b1216;
  border-color: #dc2626;
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

/* ==========================================================================
   24x36 POSTER PRINT & HIGH-RESOLUTION EXPORT ENGINE (300 DPI)
   Format: Architectural D (36" Wide x 24" High Landscape)
   Resolution Target: 300 DPI (10,800px x 7,200px)
   ========================================================================== */

@page {
  size: 36in 24in;
  margin: 0;
}

@media print {
  /* Force exact color reproduction */
  *, *:before, *:after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }

  body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #poster-canvas-3x2 {
    width: 36in !important;
    height: 24in !important;
    min-width: 36in !important;
    min-height: 24in !important;
    max-width: 36in !important;
    max-height: 24in !important;
    aspect-ratio: 3 / 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Unconditionally hide all interactive controls, buttons, toolbars, and banners */
  #external-command-dock,
  #external-intel-pane,
  #drawer-backdrop,
  .section-focus-btn,
  .command-toolbar,
  .header-action-controls,
  #store-search-input,
  #btn-generate,
  #btn-hdr-snap-5mi,
  #btn-hdr-snap-10mi,
  #btn-hdr-snap-15mi,
  #btn-hdr-snap-20mi,
  #btn-print-poster,
  #btn-config,
  .directory-controls,
  #directory-filter,
  #directory-sort-select,
  #btn-renumber-threat,
  #btn-reset-threats,
  #api-activation-banner,
  #api-error-banner,
  #config-modal,
  #print-modal,
  #poster-preview-exit-bar,
  #export-status-banner {
    display: none !important;
    visibility: hidden !important;
  }

  /* Hide all scrollbars */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Preserve directory rows without scroll clipping */
  #directory-rows {
    overflow: visible !important;
  }

  .directory-row {
    cursor: default !important;
  }

  .directory-row.selected {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, #131317 0%, #0f0f13 100%) !important;
    box-shadow: none !important;
  }

  .directory-row:hover {
    background-color: inherit !important;
  }

  .star-btn {
    cursor: default !important;
  }

  .star-btn:hover {
    transform: none !important;
  }

  /* Ensure map marker icons maintain exact position and display during browser print */
  #google-map-canvas img,
  .gm-style img {
    display: block !important;
    position: absolute !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   INK-SAVER / HIGH-CONTRAST LIGHT THEME FOR 24x36 POSTER PRINTING
   ========================================================================== */
body.print-theme-light {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body.print-theme-light header {
  background-color: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.print-theme-light header h1,
body.print-theme-light header #hdr-store-badge,
body.print-theme-light header h2,
body.print-theme-light header h2 span:first-child {
  color: #0f172a !important;
}

body.print-theme-light header .bg-\[\#121214\],
body.print-theme-light header #threat-key-container {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

body.print-theme-light header .text-slate-200,
body.print-theme-light header .text-slate-300,
body.print-theme-light header .text-slate-400,
body.print-theme-light header .text-slate-500 {
  color: #1e293b !important;
}

body.print-theme-light aside {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.print-theme-light aside .font-oswald,
body.print-theme-light aside #legend-store-title {
  color: #0f172a !important;
}

body.print-theme-light aside .bg-\[\#18181b\],
body.print-theme-light aside .bg-\[\#141416\] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.print-theme-light .directory-row {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom-color: #e2e8f0 !important;
}

body.print-theme-light .directory-row:nth-child(even) {
  background-color: #f8fafc !important;
}

body.print-theme-light .directory-header-row {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom-color: #cbd5e1 !important;
}

body.print-theme-light .regional-threat-card {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

body.print-theme-light .regional-threat-card .text-white {
  color: #0f172a !important;
}

body.print-theme-light footer {
  background-color: #ffffff !important;
  border-top-color: #dc2626 !important;
  color: #0f172a !important;
}

body.print-theme-light footer .bg-\[\#121214\],
body.print-theme-light footer .bg-\[\#101012\] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

body.print-theme-light footer .text-white,
body.print-theme-light footer .text-slate-200 {
  color: #0f172a !important;
}

body.print-theme-light footer .border-\[\#27272a\] {
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   24x36 POSTER SCREEN PREVIEW MODE
   Allows the user to inspect the exact clean poster layout on screen
   ========================================================================== */
body.poster-preview-active #external-command-dock,
body.poster-preview-active #external-intel-pane,
body.poster-preview-active #drawer-backdrop,
body.poster-preview-active .section-focus-btn,
body.poster-preview-active .command-toolbar,
body.poster-preview-active .header-action-controls,
body.poster-preview-active .directory-controls,
body.poster-preview-active #api-activation-banner,
body.poster-preview-active #api-error-banner,
body.poster-preview-active #map-floating-zoom-controls {
  display: none !important;
}

body.poster-preview-active #poster-preview-exit-bar {
  display: block !important;
}

body.poster-preview-active {
  justify-content: center !important;
}

body.poster-preview-active #poster-canvas-3x2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   COMPETITIVE MARKET RESEARCH & STRATEGIC BENCHMARK MODAL STYLES
   ========================================================================== */

.comp-tab-btn {
  font-family: 'Roboto Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.comp-tab-btn:hover {
  background-color: #20202a;
}

.comp-tab-btn.active {
  background-color: #450a0a !important;
  color: #fecaca !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 10px rgba(185, 28, 28, 0.4);
}

/* Benchmark Matrix Table */
.benchmark-table-wrapper {
  overflow-x: auto;
  border: 1px solid #27272a;
  border-radius: 8px;
  background: #0d0d12;
}

.benchmark-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
}

.benchmark-table th {
  background: #14141d;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 2px solid #27272a;
  text-align: left;
  white-space: nowrap;
}

.benchmark-table th.col-fnd {
  background: #2b0b0e;
  color: #fca5a5;
  border-top: 2px solid #ef4444;
  border-left: 2px solid #ef4444;
  border-right: 2px solid #ef4444;
  border-bottom: 2px solid #ef4444;
}

.benchmark-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #1e1e26;
  vertical-align: middle;
  color: #cbd5e1;
}

.benchmark-table tr:hover td {
  background-color: #161622;
}

.benchmark-table td.col-fnd {
  background: rgba(153, 27, 27, 0.15);
  border-left: 2px solid #ef4444;
  border-right: 2px solid #ef4444;
  font-weight: 700;
  color: #ffffff;
}

.benchmark-table tr:last-child td.col-fnd {
  border-bottom: 2px solid #ef4444;
}

/* Strategic Badges */
.strat-tag-advantage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background-color: rgba(6, 78, 59, 0.7);
  color: #6ee7b7;
  border: 1px solid #059669;
}

.strat-tag-vulnerability {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background-color: rgba(127, 29, 29, 0.7);
  color: #fca5a5;
  border: 1px solid #dc2626;
}

.strat-tag-neutral {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  background-color: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}

/* Price Benchmark Comparison Cards */
.product-price-card {
  background: #121218;
  border: 1px solid #27272a;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.product-price-card:hover {
  border-color: #dc2626;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.sentiment-quote-box {
  background: #0f0f15;
  border-left: 3px solid;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  line-height: 1.5;
}