/* Terra Explorer theme overrides for Map Geometry Lab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-2.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-1.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-3.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-0.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #9ca3af;
  --color-background: #111827;
  --color-surface: #1f2937;
  --color-surface-hover: #374151;
  --color-border: #374151;
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-bg: #111827;
  --font-family-base: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--color-background);
}

#app-header {
  background: rgba(17, 24, 39, 0.94);
  border-color: rgba(55, 65, 81, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}

#app-header h1 {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1.25;
}

.terra-brand-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.terra-brand-link:hover .terra-brand-name {
  color: #60a5fa;
}

.terra-brand-name {
  transition: color 150ms ease;
}

.terra-brand-divider,
.terra-tool-name {
  color: var(--color-text-muted);
  font-weight: 500;
}

#toolbar-left,
#sidebar-right,
#app-footer,
#pwa-update-notification {
  background: var(--color-surface);
  border-color: var(--color-border);
}

#sidebar-right {
  scrollbar-color: #4b5563 var(--color-surface);
}

button,
input,
select {
  color: var(--color-text);
  background: var(--color-background);
  border-color: #4b5563;
}

button {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

button:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: #6b7280;
}

.tool-button:hover {
  background: var(--color-surface-hover);
}

.tool-button.active,
.sidebar-tabs button.active,
.btn-small {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.tool-button.active:hover,
.sidebar-tabs button.active:hover,
.btn-small:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-icon {
  color: var(--color-text-muted);
}

.btn-icon:hover {
  color: #fff;
  opacity: 1;
}

.project-item.active {
  background: rgba(59, 130, 246, 0.18);
}

.project-item:hover {
  background: rgba(55, 65, 81, 0.72);
}

.inspector-card,
.elevation-chart-container {
  background: var(--color-background);
  border-color: var(--color-border);
}

.error-message,
#status-warning,
.elevation-status.error {
  color: #f87171;
}

.export-confirmation {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: #4b5563;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.export-confirmation::backdrop {
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(3px);
}

.ol-control button {
  color: var(--color-text);
  background: rgba(31, 41, 55, 0.92);
  border-color: #4b5563;
}

.ol-control button:hover,
.ol-control button:focus {
  color: #fff;
  background: rgba(55, 65, 81, 0.98);
}

.ol-attribution {
  color: var(--color-text-muted);
  background: rgba(17, 24, 39, 0.82) !important;
}

.ol-attribution a {
  color: #60a5fa;
}

*:focus-visible {
  outline-color: #60a5fa;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.38);
}

@media (max-width: 992px) {
  .terra-brand-name,
  .terra-brand-divider {
    display: none;
  }

  #sidebar-right {
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
  }
}