/* ============================================================
   ATLAS — Dragon Design System (Dark Mode)
   ============================================================ */

/* --- Anti-FOUC --- */
calcite-shell:not([calcite-hydrated]) { visibility: hidden; }

/* --- CSS Custom Properties --- */
:root {
  /* Brand */
  --arc-red: #ED1B2E;
  --arc-red-hover: #C41225;

  /* Dragon Warm Dark */
  --dragon-warm-dark:   #1a1816;
  --dragon-warm-dark-2: #242220;
  --dragon-warm-dark-3: #2e2b28;
  --dragon-cream: #f7f5f2;

  /* Functional */
  --arc-alert: #c41e3a;
  --arc-success: #2d8a4e;
  --arc-caution: #b8860b;
  --arc-info: #3a7abd;

  /* Typography */
  --dragon-headline: 'Libre Baskerville', Georgia, serif;
  --dragon-body: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  --dragon-data: 'IBM Plex Mono', Consolas, monospace;

  /* Calcite brand override */
  --calcite-color-brand: #ED1B2E;
  --calcite-color-brand-hover: #C41225;
  --calcite-color-brand-press: #A00E1E;
}

/* --- Warm Dark Overrides --- */
.calcite-mode-dark {
  --calcite-color-background: var(--dragon-warm-dark);
  --calcite-color-foreground-1: var(--dragon-warm-dark-2);
  --calcite-color-foreground-2: var(--dragon-warm-dark-3);
  --calcite-color-foreground-3: #383432;
}

/* --- Layout --- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--dragon-body);
  background: var(--dragon-warm-dark);
}

#viewDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Semi-transparent nav over map */
calcite-navigation {
  --calcite-navigation-background: rgba(26, 24, 22, 0.9);
  backdrop-filter: blur(8px);
}

calcite-navigation-logo {
  --calcite-color-brand: #ED1B2E;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

/* --- Status Bar (clickable hot buttons) --- */
.status-bar {
  display: flex;
  gap: 4px;
  align-items: center;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 3px;
  background: transparent;
  color: var(--calcite-color-text-2);
  font-family: var(--dragon-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.status-chip calcite-icon {
  color: var(--calcite-color-text-3);
}

.status-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--calcite-color-text-1);
}

.status-chip.active {
  background: rgba(237, 27, 46, 0.15);
  border-color: rgba(237, 27, 46, 0.4);
  color: #fff;
}

.status-chip.active calcite-icon {
  color: var(--arc-red);
}

/* --- Threat Level Badge --- */
.threat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--dragon-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.threat-badge .threat-label {
  opacity: 0.7;
}

.threat-badge .threat-value {
  font-weight: 700;
}

.threat-badge[data-level="critical"] {
  background: rgba(237, 27, 46, 0.25);
  color: #ff6b7a;
  border: 1px solid rgba(237, 27, 46, 0.4);
  animation: threatPulse 2s ease-in-out infinite;
}

.threat-badge[data-level="high"] {
  background: rgba(249, 115, 22, 0.2);
  color: #fba558;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.threat-badge[data-level="elevated"] {
  background: rgba(234, 179, 8, 0.2);
  color: #ebc95a;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.threat-badge[data-level="guarded"] {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

@keyframes threatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* --- Briefing Banner --- */
.briefing-banner {
  background: rgba(58, 122, 189, 0.12);
  border: 1px solid rgba(58, 122, 189, 0.3);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dragon-data);
  font-size: 11px;
  color: var(--arc-info);
  letter-spacing: 0.3px;
}

.briefing-banner .banner-icon {
  flex-shrink: 0;
}

.briefing-banner .banner-text {
  flex: 1;
}

.briefing-banner .banner-live {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Intelligence Panel --- */
#intel-panel {
  --calcite-shell-panel-width: 420px;
}

.header-end-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Mode Toggle Pills --- */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 3px;
  overflow: hidden;
}

.mode-toggle button {
  padding: 4px 14px;
  border: none;
  background: transparent;
  color: var(--calcite-color-text-3);
  font-family: var(--dragon-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.mode-toggle button:first-child {
  border-right: 1px solid var(--calcite-color-border-3);
}

.mode-toggle button:hover {
  color: var(--calcite-color-text-1);
  background: rgba(255, 255, 255, 0.04);
}

.mode-toggle button.active {
  background: rgba(237, 27, 46, 0.15);
  color: #fff;
}

/* --- Dragon Buttons (generic) --- */
.dragon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 3px;
  background: transparent;
  color: var(--calcite-color-text-2);
  font-family: var(--dragon-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  height: 32px;
  box-sizing: border-box;
}

.dragon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--calcite-color-text-1);
}

.dragon-btn.brand {
  background: var(--arc-red);
  border-color: var(--arc-red);
  color: #fff;
}

.dragon-btn.brand:hover {
  background: var(--arc-red-hover);
  border-color: var(--arc-red-hover);
}

.dragon-btn.icon-only {
  padding: 5px 8px;
}

#intel-output {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}

/* --- Dragon Typography --- */
.dragon-headline {
  font-family: var(--dragon-headline);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--calcite-color-text-1);
}

.dragon-body {
  font-family: var(--dragon-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--calcite-color-text-2);
  margin: 0 0 12px 0;
}

.dragon-body.muted {
  color: var(--calcite-color-text-3);
  font-size: 13px;
}

.dragon-data {
  font-family: var(--dragon-data);
}

/* --- Red Rule --- */
.red-rule {
  width: 40px;
  height: 3px;
  background: var(--arc-red);
  margin-bottom: 10px;
}

/* --- Intel Sections --- */
.intel-section {
  margin-bottom: 20px;
}

.intel-section + .intel-section {
  padding-top: 16px;
  border-top: 1px solid var(--calcite-color-border-3);
}

/* --- Section Headers (inside AI output) --- */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.section-header .red-rule {
  margin-bottom: 0;
}

.section-header h4 {
  font-family: var(--dragon-headline);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--calcite-color-text-1);
}

/* --- Stagger Reveal Animation --- */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-in {
  opacity: 0;
  animation: fadeSlideIn 0.35s ease-out forwards;
}

/* --- Stat Cards (Metric Grid) --- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--dragon-warm-dark-3);
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 4px;
  padding: 14px 12px;
  text-align: center;
}

.stat-value {
  font-family: var(--dragon-data);
  font-size: 28px;
  font-weight: 500;
  color: var(--calcite-color-text-1);
  line-height: 1.2;
}

.stat-value.highlight {
  color: var(--arc-red);
}

.stat-label {
  font-family: var(--dragon-body);
  font-size: 11px;
  color: var(--calcite-color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.stat-trend {
  font-family: var(--dragon-data);
  font-size: 11px;
  margin-top: 2px;
}

.stat-trend.up { color: var(--arc-alert); }
.stat-trend.down { color: var(--arc-success); }
.stat-trend.stable { color: var(--calcite-color-text-3); }

/* --- Risk Rankings --- */
.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.ranking-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--calcite-color-border-3);
  cursor: pointer;
  transition: background 0.15s;
}

.ranking-item:hover {
  background: rgba(255, 255, 255, 0.03);
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 4px;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank-number {
  font-family: var(--dragon-data);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-red);
  min-width: 20px;
  flex-shrink: 0;
}

.rank-content {
  flex: 1;
  min-width: 0;
}

.rank-location {
  font-family: var(--dragon-body);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.rank-factors {
  font-family: var(--dragon-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

.rank-score {
  flex-shrink: 1;
  min-width: 0;
  max-width: 40%;
}

/* Severity chips */
.severity-chip {
  display: inline-block;
  max-width: 100%;
  font-family: var(--dragon-data);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.severity-critical { background: rgba(237, 27, 46, 0.2); color: #ff6b7a; }
.severity-high     { background: rgba(249, 115, 22, 0.2); color: #fba558; }
.severity-moderate { background: rgba(180, 140, 20, 0.35); color: #fff; }
.severity-low      { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* --- Action Items --- */
.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.action-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--calcite-color-border-3);
}

.action-item:last-child {
  border-bottom: none;
}

.action-priority {
  font-family: var(--dragon-data);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  height: fit-content;
  margin-top: 2px;
}

.priority-immediate { background: rgba(237, 27, 46, 0.2); color: #ff6b7a; }
.priority-high      { background: rgba(249, 115, 22, 0.2); color: #fba558; }
.priority-medium    { background: rgba(180, 140, 20, 0.35); color: #fff; }
.priority-low       { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

.action-text {
  font-family: var(--dragon-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

.action-rationale {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  font-style: italic;
}

/* --- Narrative --- */
.narrative-text {
  font-family: var(--dragon-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
}

.narrative-text strong {
  color: #fff;
}

/* --- Narrative Bullets --- */
.narrative-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.narrative-bullet {
  font-family: var(--dragon-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.narrative-bullet:last-child {
  border-bottom: none;
}

.narrative-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--arc-red);
}

.narrative-bullet strong {
  color: #fff;
}

/* Clickable location mentions */
.location-link {
  color: var(--arc-info);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.location-link:hover {
  color: #5a9fd4;
  text-decoration-style: solid;
}

/* --- Loading State --- */
#loading-state {
  text-align: center;
  padding: 40px 20px;
}

.loading-text {
  font-family: var(--dragon-body);
  font-size: 14px;
  color: var(--calcite-color-text-3);
  margin-top: 16px;
  font-style: italic;
}

/* --- Footer / Input Area --- */
#intel-footer {
  padding: 12px;
  border-top: 1px solid var(--calcite-color-border-3);
}

.scenario-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.scenario-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 3px;
  background: transparent;
  color: var(--calcite-color-text-2);
  font-family: var(--dragon-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.scenario-btn calcite-icon {
  color: var(--calcite-color-text-3);
}

.scenario-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--calcite-color-text-1);
  border-color: rgba(255, 255, 255, 0.15);
}

.scenario-btn:hover calcite-icon {
  color: var(--arc-red);
}

.input-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dragon-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--calcite-color-border-3);
  border-radius: 3px;
  background: var(--dragon-warm-dark);
  color: var(--calcite-color-text-1);
  font-family: var(--dragon-body);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.dragon-input::placeholder {
  color: var(--calcite-color-text-3);
}

.dragon-input:focus {
  border-color: var(--arc-red);
}

/* --- Voice Button --- */
#btn-voice.listening {
  background: rgba(237, 27, 46, 0.15);
  border-color: rgba(237, 27, 46, 0.4);
  color: var(--arc-red);
  animation: voicePulse 1s ease-in-out infinite;
}

/* --- Intel Toggle (vertical tab on right edge) --- */
/* intel-toggle-fixed is now .sidebar.sidebar-right — no extra styles needed */

/* --- Error Banner --- */
.error-banner {
  background: rgba(196, 30, 58, 0.12);
  border: 1px solid rgba(196, 30, 58, 0.3);
  border-left: 3px solid var(--arc-red);
  border-radius: 3px;
  padding: 12px 14px;
}

.error-banner .error-title {
  font-family: var(--dragon-data);
  font-size: 12px;
  font-weight: 600;
  color: #ff6b7a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.error-banner .error-message {
  font-family: var(--dragon-body);
  font-size: 14px;
  color: var(--calcite-color-text-2);
  line-height: 1.5;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Sidebar (Supabase-style) --- */
.sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--dragon-warm-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 8px;
}

.sidebar.collapsed {
  width: 44px;
  padding: 6px 4px;
}

/* Hover-to-expand (Supabase behavior) */
.sidebar.collapsed:hover {
  width: 220px;
  padding: 6px 8px;
}

.sidebar.collapsed:hover .sidebar-label {
  opacity: 1;
  width: auto;
}

.sidebar.collapsed:hover .sidebar-item {
  justify-content: flex-start;
  padding: 7px 10px;
}

.sidebar.collapsed:hover .legend-items {
  display: flex;
}

/* Pinned = expanded permanently (hamburger click) */
.sidebar.pinned {
  width: 220px;
  padding: 6px 8px;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
}

.sidebar-group + .sidebar-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-bottom {
  margin-top: auto;
  padding-bottom: 8px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-family: var(--dragon-body);
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-item calcite-icon {
  flex-shrink: 0;
  --calcite-icon-color: currentColor;
}

.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 8px 0;
}

.sidebar-label {
  overflow: hidden;
  transition: opacity 0.15s ease, width 0.15s ease;
}

.sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
}

/* --- Right sidebar (Intel toggle) --- */
.sidebar-right {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  justify-content: flex-start;
  padding-top: 8px;
}

.sidebar-right.collapsed:hover {
  width: 180px;
}

/* --- Legend (inside sidebar bottom) --- */
.legend-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px 8px;
}

.sidebar.collapsed .legend-items {
  display: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dragon-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  padding: 2px 0;
  transition: opacity 0.2s;
}

.legend-item.hidden {
  opacity: 0.25;
}

.legend-item svg {
  flex-shrink: 0;
}

/* --- Map Graphics Popup Override --- */
.esri-popup__main-container {
  font-family: var(--dragon-body) !important;
  border-radius: 4px !important;
}

/* --- Pulse Animation for Active Threats --- */
@keyframes threat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(237, 27, 46, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(237, 27, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(237, 27, 46, 0); }
}

.pulse-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--arc-red);
  animation: threat-pulse 2s ease-out infinite;
  pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #intel-panel {
    --calcite-shell-panel-width: 100%;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .stat-value {
    font-size: 22px;
  }

  .threat-badge {
    display: none;
  }

  #layer-bar {
    top: auto;
    bottom: 12px;
    min-width: auto;
  }
}