/**
 * Layout CSS - Header, Controls, Breadcrumb, Search, Container
 * Handles page structure and navigation elements
 * Part of SENTRY Treemap modular refactoring
 */

/* Header */
#header {
  background-color: var(--color-brand-primary);
  color: white;
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

#header .logo {
  height: 50px;
  width: auto;
}

#header h1 {
  font-size: var(--font-size-h1);
  margin-bottom: var(--spacing-md);
}

/* Controls Section */
#controls {
  background-color: var(--color-neutral-light-bg);
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
  border-bottom: 1px solid var(--color-brand-primary);
}

#controls label {
  font-size: var(--font-size-base);
  color: var(--color-neutral-dark-text);
}

#controls select {
  padding: var(--spacing-sm) var(--spacing-base);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-dark-text);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
}

/* Breadcrumb Navigation */
#breadcrumb {
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-neutral-light-bg);
  border-bottom: 1px solid var(--color-brand-primary);
  font-size: var(--font-size-base);
}

#breadcrumb span {
  cursor: pointer;
  color: var(--color-brand-primary);
}

#breadcrumb span:hover {
  text-decoration: underline;
}

#breadcrumb .separator {
  color: var(--color-neutral-gray);
  margin: 0 var(--spacing-sm);
}

/* Search Container */
#search-container {
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-neutral-light-bg);
  border-bottom: 1px solid var(--color-brand-primary);
}

#search-input {
  width: 100%;
  padding: var(--spacing-md);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-dark-text);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
}

#search-input::placeholder {
  color: var(--color-neutral-light-gray);
}

.search-match {
  stroke: var(--color-accent-gold) !important;
  stroke-width: 3px !important;
}

/* Treemap Container */
#treemap-container {
  width: 100%;
  height: calc(100vh - 160px);
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
}

/* Loading Indicator */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-loading);
}