/* ============================================
   Victorian Tactical Themes
   ============================================ */

:root {
  /* Spacing Scale (Unified) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Semantic Spacing Aliases */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-12);
  --spacing-3xl: var(--spacing-16);

  /* Typography */
  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'IBM Plex Sans Hebrew', 'IBM Plex Sans JP', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-tactical: 'Space Grotesk', 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'IBM Plex Sans JP', 'Noto Sans SC', sans-serif;

  --font-2xs: 0.625rem;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  --font-4xl: 2.25rem;
  --font-5xl: 3rem;
  --font-6xl: 3.5rem;

  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shared Logic */
  --plant-marker-panel-width: 22rem;

  /* Genetic Vault / Bio Mapping */
  --font-header: var(--font-tactical);
}

/* ============================================
   Theme: Victorian (Default)
   ============================================ */
[data-theme="victorian"],
:root {
  --deep-green: #145214;
  --green: #4a7c44;
  --pale-green: #a3d9a5;
  --red: #a93226;
  --dark-navy: #154360;
  --dark-blue: #1b4f72;
  --blue: #2980b9;
  --yellow: #f1c40f;
  --orange: #d35400;
  --purple: #8e44ad;
  --pink: #e84393;
  --teal: #16a085;
  --cyan: #00bcd4;
  --magenta: #e91e63;
  --amber: #ffc107;
  --sunglass: #6b4c1e;
  --lime: #cddc39;
  --copper: #b87333;
  --brown: #8b4513;
  --lightest-green: #e6f2e6;

  --ink: #1a1a1a;
  --light-ink: #4a4940;
  --muted-ink: #8c8980;

  --paper: #f4f1ea;
  --dark-paper: #ebe8df;
  --darkest-paper: #dcd9cf;

  /* Base Paper & Backgrounds */
  --color-base-100: var(--paper);
  --color-base-200: var(--dark-paper);
  --color-base-300: var(--darkest-paper);

  /* Ink & Content */
  --color-base-content: var(--ink);
  --color-base-content-light: var(--light-ink);
  --color-base-content-muted: var(--muted-ink);

  /* Core Brand Colors */
  --color-primary: var(--deep-green);
  --color-primary-light: var(--green);
  --color-secondary: var(--dark-navy);
  --color-accent: var(--copper);
  --color-accent-victorian: var(--purple);

  /* Semantic Aliases */
  --color-brand: var(--color-base-content);
  --color-copper: var(--color-accent);
  --color-copper-light: #d29154;

  /* Status Colors */
  --color-success: #2d5a27;
  --color-warning: #d4ac0d;
  --color-info: #2980b9;
  --color-error: var(--red);

  /* Camera / HUD Colors */
  --color-camera-bg: #111827;
  --color-camera-border: #374151;
  --color-camera-accent: #1f2937;
  --color-camera-accent-border: #4b5563;

  /* Genetic Vault Victorian */
  --color-bg-panel: var(--color-base-100);
  --color-bg-darker: var(--color-base-200);
  --color-bg-darkest: var(--color-base-300);
  --color-bg-hover: rgba(0, 0, 0, 0.05);
  --color-text-main: var(--color-base-content);
  --color-text-dim: var(--color-base-content-light);
  --color-border-main: var(--color-base-300);
  --color-border-dim: rgba(0, 0, 0, 0.1);
  --color-accent-dim: rgba(184, 115, 51, 0.3);
  --color-highlight: var(--sunglass);

  /* Shadows */
  --shadow-tactical: 10px 10px 0px rgba(0, 0, 0, 0.1);
  --shadow-tactical-small: 4px 4px 0px rgba(0, 0, 0, 0.1);

  --color-modal-overlay: rgba(235, 232, 223, 0.95); /* Semi-transparent --color-base-200 */

  /* Utility Transparencies */
  --bg-overlay-dark: rgba(0, 0, 0, 0.6);
  --bg-overlay-darker: rgba(0, 0, 0, 0.8);
  --border-dim: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.03);
  --white-dim: rgba(255, 255, 255, 0.2);

  /* Status Effects */
  --color-success-dim: rgba(45, 90, 39, 0.3);
  --shadow-success-glow: 0 0 8px rgba(34, 197, 94, 0.6);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
/* ============================================
   Garden CSS - Polished & Refined
   ============================================ */

/* ============================================
   CSS Custom Properties (Theme)
   ============================================ */

@keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)}
10% {filter: hue-rotate(36deg)}
20% {filter: hue-rotate(72deg)}
30% {filter: hue-rotate(180deg)}
40% {filter: hue-rotate(144deg)}
50% {filter: hue-rotate(180deg)}
60% {filter: hue-rotate(216deg)}
70% {filter: hue-rotate(252deg)}
80% {filter: hue-rotate(288deg)}
90% {filter: hue-rotate(384deg)}
100% {filter: hue-rotate(360deg)}}


.area-heading:hover, .logo-link:hover {
  animation-name:rainbowlogo;
  animation-duration:3.14159265359s;
  animation-iteration-count:infinite;
}
/* ============================================
   Reset & Base Styles
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none !important;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Tactical & Header overrides */
h1, h2, h3, h4, h5, h6, 
.area-heading, .logo-text, .page-title, .header__title,
.plant-palette__mode, .plant-panel__header {
  font-family: var(--font-tactical);
  letter-spacing: -0.01em;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ============================================
   Login & Registration Components
   ============================================ */
.login-container {
  width: 94%;
  max-width: 1100px;
  background-color: var(--color-base-100);
  border: 4px double var(--color-secondary);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-tactical);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .login-container {
    flex-direction: row;
    min-height: 500px;
  }
}

/* Technical corner accents for login */
.login-container::before, .login-container::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-primary);
  pointer-events: none;
  z-index: 10;
}
.login-container::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.login-container::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }

.login-image {
  background-color: white;
  background-size: calc(100% - 40px) calc(100% - 40px);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .login-image {
    flex: 1.5;
    min-height: 450px;
  }
}

.login-form-content {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .login-form-content {
    flex: 1;
    padding: var(--spacing-2xl);
    max-width: 380px;
  }
}

.login-link-alt {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  font-family: var(--font-mono);
}

.login-footer-links {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.login-forgot-link {
  font-size: var(--font-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-base-content-light);
}

.login-forgot-link:hover {
  color: var(--color-primary);
}
.split-view {
  display: flex;
  height: 100vh;
}

.split-view-main {
  flex: 1;
}

.split-view-sidebar {
  width: 20rem;
  background-color: var(--color-base-200);
  border-left: 1px solid var(--color-base-300);
  display: flex;
  flex-direction: column;
}

.split-view-sidebar-header {
  padding: var(--spacing-md);
  font-weight: bold;
  font-size: var(--font-lg);
  background-color: var(--color-base-100);
  flex-shrink: 0;
}

.split-view-sidebar-content {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
  max-height: calc(100vh - 12rem);
}



   Page Layout Components
   ============================================ */
.page-container {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-lg); /* Consistent 24px gutter */
}

.page-container.is-iframe {
  padding: var(--spacing-sm) var(--spacing-md);
}

.page-container.is-iframe .page-section {
  padding: 0;
  margin-bottom: var(--spacing-sm);
  background: none;
  box-shadow: none;
  border: none;
}

.page-container.is-iframe .page-header {
  margin-bottom: var(--spacing-sm);
}

.page-container.is-iframe .page-title {
  font-size: var(--font-xl);
  margin-bottom: var(--spacing-xs);
}

.page-container.is-iframe .page-subtitle {
  font-size: var(--font-sm);
  margin-top: 0;
}

.page-container.is-iframe section {
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-xs);
}

.page-container.is-iframe section h2:first-child {
  font-size: var(--font-lg);
  margin-bottom: var(--spacing-xs);
}

@media (max-width: 640px) {
  .page-container {
    padding: var(--spacing-md); /* 16px on mobile */
  }
}



.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.page-header__content {
  flex: 1;
}

.page-title {
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: var(--color-base-content);
}

.page-subtitle {
  font-size: var(--font-xl);
  color: var(--color-base-content-light);
  margin-top: var(--spacing-sm);
}

.page-actions {
  flex-shrink: 0;
}

.page-section {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background-color: var(--color-base-100);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-base-300);
}

.page-section > .table-wrapper {
  margin: calc(var(--spacing-lg) * -1); /* Bleed horizontal padding */
  margin-top: var(--spacing-md); /* Keep some top margin */
  width: calc(100% + (var(--spacing-lg) * 2));
}

.page-section > .table-wrapper .table {
  margin-top: 0;
}

.page-section > .table-wrapper .table th:first-child,
.page-section > .table-wrapper .table td:first-child > div {
  padding-left: var(--spacing-lg);
}

.page-section > .table-wrapper .table th:last-child,
.page-section > .table-wrapper .table td:last-child > div {
  padding-right: var(--spacing-lg);
}


.page-section__header {
  margin-bottom: var(--spacing-lg);
}

.page-section__content {
  margin-top: var(--spacing-lg);
}

.chart-container {
  max-width: 100%;
  margin: 0 auto;
  height: 100vh;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.content-grid.is-full-width {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .content-grid.is-full-width {
    grid-template-columns: 1fr;
  }

  .content-grid.is-full-width .content-grid__main {
    grid-column: 1 / span 3;
  }

  .content-grid__main {
    grid-column: 1 / span 2;
    /* Ensure it stays in the first row if sidebar is moved */
    grid-row: 1; 
  }

  .content-grid__main.is-full-width {
    grid-column: 1 / span 3;
  }

  .content-grid__sidebar {
    grid-column: 3 / span 1;
    grid-row: 1;
  }
}

/* Specific overrides for larger screens if needed, but the above covers the general 2/3 + 1/3 layout */
@media (min-width: 1024px) {
  /* No changes needed here if 768px rules cover it */
}

.content-grid__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.content-grid__sidebar {
  grid-column: span 1;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.timeline-item {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-md);
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.timeline-item__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.timeline-item__date {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.timeline-item__description {
  font-size: var(--font-sm);
  margin-top: var(--spacing-xs);
}


/* ============================================
   Typography Components
   ============================================ */
.heading-1 {
  font-size: var(--font-4xl);
  font-weight: bold;
  color: var(--color-base-content);
}

.heading-2 {
  font-size: var(--font-3xl);
  font-weight: bold;
  color: var(--color-base-content);
}

.heading-3 {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--color-base-content);
}

.text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-muted {
  color: var(--color-base-content-light);
}

.text-secondary {
  font-size: var(--font-sm);
  color: var(--color-base-content-light);
}

/* ============================================
   Mobile: page-section padding
   ============================================ */
@media (max-width: 640px) {
  .page-section {
    padding: var(--spacing-md);
  }
}

/* ============================================
   Mobile: split-view sidebar stacking
   ============================================ */
@media (max-width: 768px) {
  .split-view {
    flex-direction: column;
  }
  .split-view-sidebar {
    width: 100%;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid var(--color-base-300);
  }
}

/* ============================================
   Section Image
   ============================================ */
section img {
  width: 100%;
  max-width: 32rem;
  object-fit: contain;
}

/* Fade-in images on load to avoid pop-in */
img[data-fade] {
  opacity: 0;
  transition: opacity 0.15s ease;
}

img[data-fade].is-loaded {
  opacity: 1;
}
/* ============================================
   Tactical Ticker (GTA 2 / Pager Vibe)
   ============================================ */
.header-ticker-container {
  position: absolute;
  top: var(--spacing-md);
  left: 180px; /* Offset for logo-container */
  right: 0;
  height: 3.3rem; /* Match logo height */
  background: transparent;
  z-index: 50;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tactical-ticker {
  color: white;
  font-family: var(--font-tactical);
  height: 100%;
  line-height: 3.3rem;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-lg);
  width: 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tactical-ticker__inner {
  display: flex;
  white-space: nowrap;
  position: absolute;
  left: 0;
  will-change: transform;
}

.ticker-item {
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.ticker-item__text {
  letter-spacing: 0.5px;
}

.ticker-item__separator {
  margin: 0 15px;
  opacity: 0.5;
}

/* Notice Terminal (NoticeLive) */
.notice-terminal {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-camera-bg);
  color: var(--color-primary-light);
  font-family: var(--font-mono);
  overflow: hidden;
}

.notice-terminal__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-camera-accent);
  border-bottom: 1px solid var(--color-camera-accent-border);
}

.notice-terminal__dot {
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: 50%;
  animation: terminal-blink 1s steps(2) infinite;
}

@keyframes terminal-blink {
  to { opacity: 0; }
}

.notice-terminal__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-base-300);
}

.notice-terminal__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.notice-terminal__item {
  border-left: 2px solid var(--color-camera-accent-border);
  padding-left: var(--spacing-3);
  padding-bottom: var(--spacing-2);
}

.notice-terminal__item--error { border-color: var(--color-error); }
.notice-terminal__item--success { border-color: var(--color-success); }
.notice-terminal__item--process { border-color: var(--color-info); }

.notice-terminal__item-header {
  margin-bottom: 4px;
}

.notice-terminal__item-meta {
  display: flex;
  gap: 8px;
  font-size: var(--font-2xs);
  color: var(--color-base-content-muted);
  margin-bottom: 2px;
}

.notice-terminal__item-title {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-base-300);
}

.notice-terminal__item-message {
  margin: 4px 0 0 0;
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.notice-terminal__progress {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.notice-terminal__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-camera-bg);
}

.notice-terminal__progress-fill {
  height: 100%;
  background: var(--color-primary-light);
  box-shadow: 0 0 8px var(--color-success-dim);
  transition: width 0.3s ease;
}

.notice-terminal__progress-text {
  font-size: var(--font-2xs);
  min-width: 30px;
}

.notice-terminal__empty {
  text-align: center;
  padding: var(--spacing-10);
  color: var(--color-camera-accent-border);
}

.ticker-item--critical {
  color: #ff3e3e;
  text-shadow: 0 0 8px rgba(255, 62, 62, 0.7);
}

@keyframes ticker-scroll {
  from { transform: translateX(var(--start-x, 100vw)); }
  to { transform: translateX(-100%); }
}

/* ============================================
   Button Component
   ============================================ */
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.button:hover {
  background-color: var(--color-base-200);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
  z-index: 1;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button variants (New BEM Style) */
.button--primary,
.button-primary {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.button--primary:hover,
.button-primary:hover {
  background-color: var(--deep-green);
  filter: contrast(1.1);
  color: white !important;
}

.button--secondary,
.button-secondary {
  background-color: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
}

.button--secondary:hover,
.button-secondary:hover {
  background-color: var(--color-secondary);
  filter: contrast(1.1);
  color: white !important;
}

.button--accent,
.button-accent {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.button--accent:hover,
.button-accent:hover {
  background-color: var(--color-accent);
  filter: contrast(1.1);
  color: white !important;
}

.button--error,
.button-error {
  background-color: var(--red);
  color: white;
  border-color: var(--red);
}

.button--error:hover,
.button-error:hover {
  background-color: var(--red);
  filter: contrast(1.1);
  color: white !important;
}

.button--success,
.button-success {
  background-color: var(--color-success);
  color: white !important;
  border-color: var(--color-success);
}

.button--success:hover,
.button-success:hover {
  background-color: var(--color-success);
  filter: brightness(1.2);
  color: white !important;
}

.button--outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

/* Specialized contexts */
.button--hq {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.button--admin {
  padding: 1rem 2rem;
  font-weight: bold;
}

.button--mission {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.button--mini,
.mini-btn {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-xs);
}

.button--full {
  width: 100%;
}

.button-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-base-content);
}

.button-ghost:hover {
  background-color: var(--color-base-200);
  border-color: transparent;
  color: var(--color-primary);
}

.button-outline {
  background-color: transparent;
  border: 1px solid currentColor;
  color: var(--color-primary);
}

.button-outline:hover {
  background-color: var(--color-primary);
  color: white;
}

.button-link {
  background-color: transparent;
  border-color: transparent;
  padding: 0.25rem 0.75rem;
  font-weight: 600;
}

.button-link:hover {
  transform: none;
  box-shadow: none;
}

.button-link.button-primary {
  color: var(--color-primary);
}

.button-link.button-primary:hover {
  background-color: var(--color-primary);
  color: white;
}

.button-link.button-error {
  color: var(--red);
}

.button-link.button-error:hover {
  background-color: var(--red);
  color: white;
}

.button-link.button-secondary {
  color: var(--color-secondary);
}

.button-link.button-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/* Button sizes */
.button-xs {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-2xs);
  line-height: 1;
}

.button-sm {
  padding: 0.4rem 0.75rem;
  font-size: var(--font-xs);
}

.button-lg {
  padding: 0.75rem 1.5rem;
  font-size: var(--font-lg);
}

/* Button shapes */
.button-circle {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* ============================================
   Section Component
   ============================================ */
section {
  background-color: var(--color-base-100);
  overflow: hidden;
  position: relative;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

section h2:first-child {
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-base-content);
  margin-bottom: var(--spacing-md);
}

.section-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--spacing-md);
}

/* ============================================
   Form Components
   ============================================ */
.form-control {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ============================================
   Form Components
   ============================================ */
.label {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-base-content-muted);
  margin-bottom: var(--spacing-1);
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: var(--leading-normal);
  color: var(--color-base-content);
  background-color: var(--color-base-100);
  border: 1px solid var(--color-secondary);
  border-radius: 0;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.select option {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  font-family: inherit;
  font-size: var(--font-sm);
  padding: 0.375rem 0.5rem;
  border-radius: 0;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-primary);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background-color: var(--color-base-100);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background-color: var(--color-base-200);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Modifiers */
.input--error,
.textarea--error,
.select--error {
  border-color: var(--red) !important;
}

.input--error:focus,
.textarea--error:focus,
.select--error:focus {
  box-shadow: 0 0 0 1px var(--red) !important;
}

.input--lg,
.select--lg {
  padding: 0.875rem 1rem;
  font-size: var(--font-base);
}

.input--mono,
.textarea--mono {
  font-family: var(--font-mono);
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.plant-details__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-base-300);
}

.plant-details__label {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
  text-transform: none;
  font-weight: 600;
}

.plant-details__value {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-base-content);
}

.plant-details__value--sector {
  color: var(--color-primary);
}

.plant-panel__item-title {
  font-weight: 700;
  color: var(--color-base-content);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.plant-panel__item-meta,
.plant-panel__item-subtitle,
.plant-panel__analysis-time {
  font-size: var(--font-2xs);
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}

.plant-panel__item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-base-content);
}

.plant-panel__analysis-summary {
  font-size: var(--font-sm);
  color: var(--color-base-content);
  margin-top: var(--spacing-xs);
}

.plant-panel__analysis-question {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  font-style: italic;
}

.plant-panel__item-status {
  color: var(--color-primary);
  font-weight: 600;
  font-family: var(--font-mono);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-base-content-light);
  opacity: 1;
}


.error-message {
  margin-top: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--red);
}

/* Checkbox */
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 90, 39, 0.2);
}

/* File Input */
input[type="file"] {
  padding: 0.5rem;
  cursor: pointer;
  background-color: var(--color-base-200);
  border: 1px dashed var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

input[type="file"]::file-selector-button {
  background-color: var(--color-secondary);
  color: var(--white);
  border: none;
  padding: 0.25rem 0.75rem;
  margin-right: 1rem;
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
  font-size: var(--font-2xs);
  transition: background-color var(--transition-base);
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--color-primary);
}

/* ============================================
   Badge Component
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-sm);
  font-weight: 500;
  background-color: var(--color-base-200);
  color: var(--color-primary);
}

.badge-primary {
  background-color: var(--color-primary);
  color: white !important;
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: white !important;
}

.badge-success {
  background-color: var(--color-success);
  color: white !important;
}

.badge-accent {
  background-color: var(--color-accent);
  color: white !important;
}

/* AI Research Magic Sparkles */
.sparkles-btn {
  color: var(--color-accent);
  border: 1px solid var(--color-accent-muted) !important;
  font-weight: bold;
  font-size: 10px;
  padding: 0 6px;
  height: 20px;
  min-height: 20px;
  line-height: 1;
  transition: all 0.2s ease;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sparkles-btn:hover {
  background: var(--color-accent) !important;
  color: var(--color-accent-content) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--color-accent-muted);
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--ink) !important;
}

.badge-error {
  background-color: var(--color-error);
  color: white !important;
}

.badge-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.badge-sm {
  padding: 0.125rem 0.5rem;
  font-size: var(--font-xs);
}

/* ============================================
   Modal Component
   ============================================ */
.modal-container {
  position: relative;
  z-index: 50;
}

.modal-container.hidden {
  display: none;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Adjusted backdrop */
  backdrop-filter: blur(4px); /* Added blur */
  position: fixed;
  inset: 0;
  transition: opacity var(--transition-base);
}

.modal-wrapper {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3010;
}

.modal-content-wrapper {
  width: 100%;
  max-width: 48rem;
  padding: var(--spacing-md);
  z-index: 3011;
}

.modal-content {
  background-color: var(--color-base-100);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-xl);
  position: relative;
  transition: all var(--transition-base);
  z-index: 3012;
}

.modal-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  padding: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition-base);
}

.modal-close:hover {
  opacity: 0.8;
}

@media (min-width: 640px) {
  .modal-content-wrapper {
    padding: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .modal-content-wrapper {
    padding: var(--spacing-xl) 0;
  }
}

/* ============================================
   Table Component
   ============================================ */
.table-wrapper {
  overflow-y: auto;
  padding: 0 var(--spacing-md);
}

@media (min-width: 640px) {
  .table-wrapper {
    overflow: visible;
    padding: 0;
  }
}

.table {
  width: 100%;
  min-width: 40rem;
  margin-top: var(--spacing-lg);
}

@media (min-width: 640px) {
  .table {
    width: 100%;
  }
}

.table thead {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  line-height: var(--leading-normal);
  color: var(--color-base-content-muted);
}

.table th {
  padding: 0 var(--spacing-lg) var(--spacing-md) 0;
  font-weight: var(--weight-semibold);
}

.table th:last-child {
  padding-right: 0;
  padding-bottom: var(--spacing-md);
}

.table tbody {
  position: relative;
  border-top: 1px solid var(--color-base-200);
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
  color: var(--color-base-content-light);
}

.table tbody tr {
  position: relative;
  border-bottom: 1px solid var(--color-base-200);
}

.table tbody tr:hover {
  background-color: var(--color-base-100);
}

.table tbody tr.clickable {
  cursor: pointer;
}

.table td {
  position: relative;
  padding: 0;
}

.table td > div {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) 0;
}

.table td span.cell-bg {
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: 0;
  left: -1rem;
}

@media (min-width: 640px) {
  .table tbody tr:hover td span.cell-bg {
    background-color: var(--color-base-100);
  }
}

.table td span.cell-content {
  position: relative;
}

.table td:first-child span.cell-content {
  font-weight: 600;
  color: var(--color-base-content);
}

.table td.actions {
  position: relative;
  width: 3.5rem;
  padding: 0;
}

.table td.actions > div {
  position: relative;
  white-space: nowrap;
  padding: var(--spacing-md) 0;
  text-align: right;
  font-weight: 600;
}

.table td.actions span.cell-bg {
  left: 0;
  right: -1rem;
}

.table td.actions a {
  position: relative;
  margin-left: var(--spacing-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-base-content);
  text-decoration: none;
}

.table td.actions a:hover {
  color: var(--color-base-content-light);
}

/* ============================================
   Alert Component
   ============================================ */
.alert {
  padding: var(--spacing-md);
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.alert-info {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
}

.alert-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--ink) !important;
}

.alert-error {
  background-color: var(--red);
  border-color: var(--red);
  color: white !important;
}

/* ============================================
   Flash Component
   ============================================ */
.flash {
  position: fixed;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: fit-content;
  min-width: 16rem;
  max-width: 28rem;
  z-index: 50;
  padding: var(--spacing-md);
  box-shadow: var(--shadow-tactical);
  cursor: pointer;
  border: 2px solid var(--color-base-content);
}

@media (min-width: 640px) {
  .flash {
    max-width: 32rem;
  }
}

.flash-info {
  background-color: var(--paper);
  border: 1px solid var(--deep-green);
  color: var(--deep-green);
}

.flash-error {
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--paper) !important;
}

.flash-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.5;
}

.flash-message {
  margin-top: var(--spacing-sm);
  font-size: var(--font-sm);
  line-height: 1.25;
}

/* Tactical Notice HUD */
.notice-hud {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
}

.notice-hud__toggle {
  pointer-events: auto;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  width: 32px;
  height: 64px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border-right: none;
}

.notice-hud__toggle:hover {
  background: var(--color-base-200);
}

.notice-hud__toggle.has-notices {
  border-left: 2px solid var(--color-primary);
}

.notice-hud__count {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: bold;
  color: var(--color-primary);
}

.notice-hud__icon {
  font-size: var(--font-lg);
  color: var(--color-base-content-light);
}

.notice-hud__sidebar {
  pointer-events: auto;
  width: 320px;
  height: 100%;
  background: var(--color-base-100);
  border-left: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notice-hud__header {
  padding: var(--spacing-md);
  background: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
}

.notice-hud__header h3 {
  margin: 0;
  font-family: var(--font-tactical);
  font-size: var(--font-base);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.notice-hud__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.notice-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.notice-section__title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-base-content-muted);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: 2px;
  margin: 0;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.notice-item {
  padding: var(--spacing-sm);
  background: var(--color-base-200);
  border-left: 3px solid var(--color-base-content-light);
  box-shadow: var(--shadow-sm);
}

.notice-item--error { border-left-color: var(--red); }
.notice-item--process { border-left-color: var(--color-primary); }
.notice-item--info { border-left-color: var(--color-secondary); }

.notice-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.notice-item__title {
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-base-content);
}

.notice-item__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-base-content-muted);
  font-size: 14px;
}

.notice-item__close:hover {
  color: var(--red);
}

.notice-item__message {
  margin: 0;
  font-size: var(--font-xs);
  line-height: 1.4;
  color: var(--color-base-content-light);
}

.notice-item__progress-bar {
  height: 4px;
  background: var(--color-base-300);
  margin-top: var(--spacing-sm);
}

.notice-item__progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.notice-item__status-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-base-300);
  border-top-color: var(--color-primary);
  border-radius: 0; /* Square spinner for tactical feel */
  animation: notice-spin 1s linear infinite;
  margin-right: var(--spacing-sm);
}

@keyframes notice-spin {
  to { transform: rotate(360deg); }
}

.notice-hud__empty {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-base-content-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

.sparkles-btn {
  transition: all var(--transition-base);
}

.sparkles-btn:hover:not(:disabled) {
  color: var(--color-primary);
  text-shadow: 0 0 5px var(--color-primary-light);
}

.sparkles-btn--loading {
  opacity: 0.6;
  cursor: wait !important;
  animation: sparkles-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sparkles-pulse {
  0% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.95); }
}

.flash-close {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.flash-close:hover {
  opacity: 0.7;
}

/* ============================================
   Header Component
   ============================================ */
.header {
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .header__actions {
    width: 100%;
    margin-top: var(--spacing-sm);
  }

  .header__actions .button {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
  }
}

.header-title {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 2;
  color: var(--color-base-content);
}

.header-subtitle {
  margin-top: var(--spacing-sm);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-base-content-light);
}

.header-actions {
  flex-shrink: 0;
}

/* ============================================
   Hero Component
   ============================================ */
.hero {
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
  min-height: 24rem;
  background-color: var(--color-base-200);
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.hero-content {
  text-align: center;
  padding: var(--spacing-xl);
}

/* ============================================
   List Component
   ============================================ */
.list {
  margin-top: var(--spacing-2xl);
}

.list dl {
  border-top: 1px solid var(--color-base-200);
}

.list-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  font-size: var(--font-sm);
  line-height: 1.5;
  border-bottom: 1px solid var(--color-base-200);
}

@media (min-width: 640px) {
  .list-item {
    gap: var(--spacing-xl);
  }
}

.list-item dt {
  width: 25%;
  flex-shrink: 0;
  color: var(--color-base-content-muted);
}

.list-item dd {
  color: var(--color-base-content-light);
}

/* ============================================
   Icon Component
   ============================================ */
.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  vertical-align: middle;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon-sm {
  width: 1rem;
  height: 1rem;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================
   Logo Component
   ============================================ */
.logo-container {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 50;
  pointer-events: none;
}

.logo-link {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.logo {
  width: 3.3rem;
  height: 3.3rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-link:hover .logo {
  transform: rotateY(180deg);
}

.logo-text {
  display: flex;
  font-family: var(--font-mono);
  flex-direction: column;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
  text-align: left;
}

.logo-text-top {
  font-weight: 500;
  line-height: 1;
  font-weight: bold;
  font-size: 1.1rem;
  transition: color var(--transition-base);
}

.logo-link:hover .logo-text-top {
  color: var(--color-primary);
}

.logo-text-bottom {
  font-size: 1rem;
  line-height: 1;
  transition: color var(--transition-base);
}

.logo-link:hover .logo-text-bottom {
  font-family: var(--font-mono);
  color: var(--color-secondary);
}

/* ============================================

/* ============================================
   Form Field Component
   ============================================ */
.form-field {
  width: 100%;
}

.form-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.form-field__label-text {
  font-size: var(--font-lg);
  font-weight: 500;
}

.form-field__badge {
  font-size: var(--font-xs);
}

/* ============================================
   Simple Form Component
   ============================================ */
.simple-form {
  margin-top: var(--spacing-xl);
}

.simple-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.simple-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

/* ============================================
   Header Actions Component
   ============================================ */
.header--with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.header__content {
  flex: 1;
}

.header__title {
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-base-content);
}

.header__subtitle {
  margin-top: var(--spacing-sm);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-base-content-light);
}

.header__actions {
  flex-shrink: 0;
}

/* ============================================
   Back Link Component
   ============================================ */
.back-link {
  margin-top: var(--spacing-3xl);
  display: inline-block;
}

.back-link__inner {
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-base-content);
  text-decoration: none;
}

.back-link__inner:hover {
  color: var(--color-base-content-light);
}

.back-link__icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
}

/* ============================================
   Error Message Component
   ============================================ */
.error-field {
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--red);
}

.error-field__icon {
  margin-top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ============================================
   Input Base Styles
   ============================================ */
/* ============================================
   Checkbox Input Component
   ============================================ */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-base-content-light);
}

.checkbox-field__input {
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
}

.checkbox-field__input:focus {
  outline: none;
}

/* ============================================
   Select Input Component
   ============================================ */
.select-field__select {
  margin-top: var(--spacing-xs);
  display: block;
  width: 100%;
  border: 1px solid var(--color-base-content-light);
  box-shadow: var(--shadow-sm);
}

.select-field__select:focus {
  border-color: var(--color-base-300);
  outline: none;
}

@media (min-width: 640px) {
  .select-field__select {
    font-size: var(--font-sm);
  }
}

/* ============================================
   Textarea Component
   ============================================ */
.textarea-field__textarea {
  min-height: 6rem;
  margin-top: var(--spacing-sm);
  display: block;
  width: 100%;
  color: var(--color-base-content);
  font-size: var(--font-sm);
  line-height: 1.5;
  border: 1px solid var(--color-base-300);
}

.textarea-field__textarea:focus {
  border-color: var(--color-base-300);
  outline: none;
}

@media (min-width: 640px) {
  .textarea-field__textarea {
    font-size: var(--font-sm);
    line-height: 1.5;
  }
}

.textarea-field__textarea--error {
  border-color: var(--red);
}

.textarea-field__textarea--error:focus {
  border-color: var(--red);
}

/* ============================================
   Image Preview Info
   ============================================ */
.image-preview-info {
  cursor: pointer;
  padding: var(--spacing-md);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-base-200);
}

::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border: 2px solid var(--color-base-200);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-copper-light);
}


/* ============================================
   Video Component
   ============================================ */
video {
  max-width: 100%;
  height: auto;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-base-300);
}

.video-full {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.video-list-item__current {
  font-size: var(--font-xs);
  color: var(--color-primary);
  font-weight: 500;
}

/* ============================================
   Image element
   ============================================ */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   Links
   ============================================ */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary);
}

/* ============================================
   Phoenix LiveView specific
   ============================================ */
[data-phx-root-id] {
  display: contents;
}

/* Loading states */
.phx-submit-loading\:opacity-75 {
  opacity: 1;
}

.phx-submit-loading .phx-submit-loading\:opacity-75 {
  opacity: 0.75;
}

.phx-click-loading\:opacity-75 {
  opacity: 1;
}

.phx-click-loading .phx-click-loading\:opacity-75 {
  opacity: 0.75;
}

/* Focus states */
.clickable:focus {
  outline: none;
}

/* ============================================
   Responsive utilities
   ============================================ */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:w-full { width: 100%; }
  .sm\:text-sm { font-size: var(--font-sm); }
  .sm\:p-6 { padding: var(--spacing-lg); }
  .sm\:translate-y-0 { transform: translateY(0); }
  .sm\:scale-95 { transform: scale(0.95); }
  .sm\:scale-100 { transform: scale(1); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:py-8 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
  .lg\:p-8 { padding: var(--spacing-xl); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   Landscape Enforcement - REMOVED
   ============================================ */


/* ============================================
   Area Card - MOVED TO MISSION CONTROL
   ============================================ */



/* ============================================
   Plant Image Preview
   ============================================ */
.image-preview-box {
  position: relative;
  background-color: var(--color-base-200);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  transition: box-shadow var(--transition-base);
}

.image-preview-box:hover {
  box-shadow: var(--shadow-tactical);
}

.image-preview-box__image {
  cursor: pointer;
  width: 100%;
  height: 200px;
  object-fit: contain;
  background-color: var(--color-base-300);
  border-radius: 0;
}

/* Selection Mode */
.image-preview-box.is-selectable {
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.image-preview-box.is-selected {
  outline-color: var(--color-primary);
}

.selection-checkbox {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  color: white;
}

.image-preview-box.is-selected .selection-checkbox {
  background-color: var(--color-primary);
}

.selection-checkbox__icon {
  font-weight: bold;
  font-size: var(--font-sm);
}


.image-preview-box__delete-button {
  position: absolute;
  z-index: 100;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 1;
  transition: opacity var(--transition-base);
  min-width: 44px; /* Touch target */
  min-height: 44px;
}

/* Processing Feedback */
.processing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-overlay-dark);
  color: white;
  gap: var(--spacing-md);
  z-index: 10;
}

.processing-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base-200);
  height: 16rem;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--color-base-content);
}

.processing-text {
  font-weight: var(--weight-bold);
  font-size: var(--font-lg);
  font-family: var(--font-tactical);
}

.image-preview-box:hover .image-preview-box__delete-button {
  opacity: 1;
}

/* ============================================
   Camera Active Status (AreaCamera.svelte)
   ============================================ */
.camera-active-status {
  padding: var(--spacing-md); /* p-3 ~ 12px -> 16px */
  background-color: var(--color-base-200);
  border-radius: 0;
  border: 1px solid var(--color-success-dim); /* border-success/30 */
  box-shadow: var(--shadow-sm);
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

.camera-active-status__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md); /* gap-3 */
  margin-bottom: var(--spacing-sm);
}

.camera-active-status__indicator {
  width: 12px;
  height: 12px;
  background-color: var(--color-success);
  border-radius: 9999px;
  box-shadow: var(--shadow-success-glow);
}

.camera-active-status__info {
  flex: 1;
}

.camera-active-status__title {
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--color-base-content);
}

.camera-active-status__model {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  line-height: 1;
}

.camera-active-status__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* base-content/10 */
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.camera-active-status__label {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

/* ============================================
   Upload Progress Overlay (PlantMarkerLive)
   ============================================ */
.upload-progress-overlay {
  position: fixed;
  bottom: var(--spacing-md); /* bottom-4 */
  right: var(--spacing-md); /* right-4 */
  z-index: 2000;
  background-color: var(--bg-overlay-darker); /* bg-black/80 */
  padding: var(--spacing-md); /* p-4 */
  border-radius: 0;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--white-dim); /* border-white/20 */
  min-width: 300px;
}

.upload-progress-overlay__title {
  color: white;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.upload-progress-overlay__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 200px;
  overflow-y: auto;
}

.upload-progress-overlay__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-xs);
  color: white;
}

.upload-progress-overlay__filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.upload-progress-overlay__bar-bg {
  width: 6rem; /* w-24 */
  height: 4px;
  background-color: var(--white-dim);
  border-radius: 0;
  overflow: hidden;
}

.upload-progress-overlay__bar-fill {
  background-color: var(--color-success);
  height: 100%;
  transition: width 0.3s ease;
}

/* ============================================
   Plant Marker Canvas (Svelte)
   ============================================ */
.marker-canvas {
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative; /* For absolute positioning of children */
  overflow: hidden;
}

@media (max-width: 768px) {
  .marker-canvas {
    height: calc(100dvh - 60px); /* Account for mobile header */
  }
}

.picture-timestamp {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  opacity: 0.8;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.clickable {
  cursor: pointer;
}

.marker-canvas__clickable-area {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-base-200);
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: default;
}

.marker-canvas__image {
  height: 100%;
  width: 100%;
  object-fit: contain;
  z-index: 0;
  cursor: crosshair;
}

.marker-canvas__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.marker-canvas__svg > g.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.tactical-grid {
  font-family: var(--font-mono);
  user-select: none;
  -webkit-user-select: none;
}

.tactical-grid line {
  stroke: var(--grid-color, var(--color-copper));
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 1;
}

.tactical-grid text {
  fill: var(--grid-color, var(--color-copper));
  font-size: var(--font-2xs);
  opacity: 1;
  paint-order: stroke;
  stroke: var(--color-base-100);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marker-label {
  fill: white;
  font-size: var(--font-lg);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  font-family: var(--font-tactical);
}

.marker-time {
  fill: var(--color-base-100);
  font-size: var(--font-sm);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.loading-text {
  font-size: var(--font-2xl);
  text-anchor: middle;
  font-family: var(--font-tactical);
  fill: var(--color-base-content);
}

.plant-panel__item-title {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-base-content);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1.2;
}

.plant-panel__item-meta,
.plant-panel__item-subtitle,
.plant-panel__analysis-time {
  color: var(--color-base-content);
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: none;
}

.plant-panel__item-sector {
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
}

.plant-details__label {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
  text-transform: none;
  font-weight: 600;
}

.plant-details__value {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-base-content);
}


/* ============================================
   Plant Marker Form (Svelte)
   ============================================ */
.marker-form {
  position: absolute;
  z-index: 1001;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-base-content-light);
  box-shadow: var(--shadow-tactical);
  padding: var(--spacing-md);
  width: 18rem; /* Slightly wider for better touch */
  pointer-events: auto;
}

@media (max-width: 768px) {
  .marker-form {
    position: fixed; /* Fixed center on mobile */
    top: 50% !important; /* Override calculated top */
    left: 50% !important; /* Override calculated left */
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 320px;
    max-height: 85dvh; /* Dynamic viewport height for mobile */
    overflow-y: auto; /* Enable scrolling within the form */
    display: flex;
    flex-direction: column;
  }
  
  .marker-form__input {
    font-size: var(--font-base); /* Prevent zoom on iOS */
  }
}

.marker-form__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.marker-form__title {
  font-weight: 600;
  font-size: var(--font-sm);
}

.marker-form__close {
  color: white;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-form__input {
  border: 1px solid var(--color-base-content-light);
  width: 100%;
  min-height: 44px; /* Touch target */
}

input.marker-form__input::file-selector-button {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}

input.marker-form__input::file-selector-button:hover {
  background-color: var(--color-base-300);
}

.marker-form__input::placeholder {
  color: var(--color-base-content-muted);
}

.marker-form__label {
  font-size: var(--font-xs);
}

.marker-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.marker-form__actions button {
  min-height: 44px; /* Touch target */
}

.plant-palette {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-md);
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  pointer-events: none;
}

.plant-palette__bar {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
  pointer-events: auto;
}

.plant-palette__mode {
  flex: 1;
  border: 1px solid var(--color-base-content-light);
  background-color: var(--color-base-100);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-xs);
  backdrop-filter: blur(10px);
}

.plant-palette__mode.is-active {
  background-color: rgba(30, 41, 59, 0.85);
}

.plant-palette__drawer {
  pointer-events: auto;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-content-light);
  box-shadow: var(--shadow-tactical);
  padding: var(--spacing-md);
  max-height: 70dvh;
  overflow-y: auto;
  backdrop-filter: blur(14px);
}

.plant-panel {
  position: absolute;
  top: var(--spacing-md);
  right: auto;
  left: auto;
  bottom: auto;
  padding: var(--spacing-md);
  background-color: var(--color-base-100);
  border: 4px double var(--color-secondary);
  box-shadow: var(--shadow-tactical);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow: hidden;
  min-width: 240px;
  min-height: 220px;
  opacity: var(--panel-opacity, 0);
  transition: opacity 0.2s ease;
}

.plant-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.plant-panel__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.plant-panel__item:hover {
  background-color: var(--color-base-300);
  transform: translateX(4px);
}

.plant-panel__item.is-active {
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-base-100);
}

.marker-modal {
  background-color: var(--color-base-100);
  border: 4px double var(--color-secondary);
  box-shadow: var(--shadow-tactical);
  position: relative;
}

/* Technical corner accents for Victorian Tactical look */
.plant-panel::before, .plant-panel::after,
.marker-modal::before, .marker-modal::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-primary);
  pointer-events: none;
  z-index: 10;
}

.plant-panel::before, .marker-modal::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.plant-panel::after, .marker-modal::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

/* Enforce sharp corners everywhere */
/* ============================================
   Card Component
   ============================================ */
.card {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-secondary);
  box-shadow: var(--shadow-tactical);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card--hover:hover {
  border-color: var(--color-primary);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1);
  transform: translate(-2px, -2px);
  transition: all var(--transition-base);
}

.card__header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-secondary);
  background-color: var(--color-base-200);
}

.card__body {
  padding: var(--spacing-4);
  flex: 1;
}

.card__footer {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-secondary);
  background-color: var(--color-base-200);
}

.button, .input, .textarea, .select, .badge, .modal-content, .area-card, .plant-panel, .marker-modal, .marker-form, .flash {
  border-radius: 0 !important;
}

.plant-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  cursor: move;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.plant-panel__title {
  font-family: var(--font-tactical);
  font-size: var(--font-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  margin: 0;
}

.plant-panel__close {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  font-family: var(--font-mono);
  cursor: pointer;
}

.plant-panel__close:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.plant-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  overflow-y: auto;
  padding-right: var(--spacing-xs);
  min-height: 0;
  flex: 1;
}

.plant-panel__all-link {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-bottom: var(--spacing-sm);
  background-color: var(--color-primary);
  color: white;
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.plant-panel__all-link:hover {
  filter: brightness(1.1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.plant-panel__all-link:active {
  transform: translateY(0);
}

.plant-panel__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--color-base-content-light);
  background: transparent;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  --plant-accent: rgba(148, 163, 184, 0.6);
  --plant-accent-glow: rgba(148, 163, 184, 0.18);
}

.plant-panel__item-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.plant-panel__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
  flex: 1;
}

.plant-panel__item--advisor {
  flex-direction: column;
  gap: var(--spacing-xxs, var(--spacing-xs));
  padding: var(--spacing-xxs, var(--spacing-xs)) var(--spacing-xs);
}

.plant-panel__item.is-active {
  border-color: var(--color-primary);
}

.plant-panel__item--plant {
  border-left: 3px solid var(--plant-accent);
  background-color: var(--color-base-100);
}

.plant-panel__item--plant:hover {
  border-color: var(--plant-accent);
  background-color: var(--color-base-100);
  box-shadow: 0 0 0 1px var(--plant-accent), 0 6px 14px var(--plant-accent-glow);
}

.plant-panel__item--age-1 {
  --plant-accent: rgb(34, 197, 94);
  --plant-accent-glow: rgba(34, 197, 94, 0.2);
}

.plant-panel__item--age-2 {
  --plant-accent: rgb(132, 204, 22);
  --plant-accent-glow: rgba(132, 204, 22, 0.2);
}

.plant-panel__item--age-3 {
  --plant-accent: rgb(250, 204, 21);
  --plant-accent-glow: rgba(250, 204, 21, 0.2);
}

.plant-panel__item--age-4 {
  --plant-accent: rgb(249, 115, 22);
  --plant-accent-glow: rgba(249, 115, 22, 0.2);
}

.plant-panel__item--age-5 {
  --plant-accent: rgb(239, 68, 68);
  --plant-accent-glow: rgba(239, 68, 68, 0.2);
}

.plant-panel__item--age-6 {
  --plant-accent: rgb(185, 28, 28);
  --plant-accent-glow: rgba(185, 28, 28, 0.25);
}

.plant-panel__item-title {
  font-size: var(--font-xs);
  font-weight: 600;
}

.plant-panel__analysis-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.plant-panel__analysis-time {
  font-size: var(--font-md);
  font-weight: 600;
}

.plant-panel__analysis-question,
.plant-panel__analysis-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plant-panel__analysis-question {
  -webkit-line-clamp: 1;
  font-size: var(--font-xs);
}

.plant-panel__analysis-summary {
  -webkit-line-clamp: 2;
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.plant-panel__item-status {
  margin-left: var(--spacing-xs);
  padding: 0 var(--spacing-xs);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: rgba(226, 232, 240, 0.9);
  font-size: var(--font-xxs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plant-panel__item-subtitle {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.plant-panel__item-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-panel__item-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-left: 3px solid var(--color-base-content-light);
  background-color: var(--color-base-100);
}

.plant-panel__item-suggestion.urgency-high {
  border-left-color: var(--red);
}

.plant-panel__item-suggestion.urgency-medium {
  border-left-color: var(--color-warning);
}

.plant-panel__item-suggestion.urgency-low {
  border-left-color: var(--color-success);
}

.plant-panel__item-suggestion-kind {
  font-size: var(--font-xxs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-base-content-light);
}

.plant-panel__item-suggestion-text {
  font-size: var(--font-xs);
}

.plant-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-base-300);
}

.plant-panel__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: var(--font-xs);
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--color-secondary);
}

.plant-panel__section-title {
  font-family: var(--font-tactical);
}

.plant-panel__section-count {
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-xxs) var(--spacing-xs);
  background-color: var(--color-base-100);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

.plant-panel__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-panel__suggestion-item {
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-xs);
  background-color: var(--color-base-100);
}

.plant-panel__suggestion-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
  font-size: var(--font-xs);
}

.plant-panel__suggestion-label {
  text-transform: capitalize;
}

.plant-panel__suggestion-details {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  margin-top: var(--spacing-xxs);
}

.plant-panel__suggestion-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.plant-panel__empty,
.plant-panel__loading {
  color: var(--color-base-content-light);
  font-size: var(--font-xs);
}

.marker-modal__wrapper {
  pointer-events: auto;
}

.marker-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--color-base-100);
  border: 4px double var(--color-secondary);
  padding: var(--spacing-md);
  max-height: none;
  overflow: auto;
  color: var(--color-base-content);
  box-shadow: var(--shadow-tactical);
  opacity: var(--modal-opacity, 1);
}

.marker-modal--advisor {
  width: min(480px, 92vw);
  height: min(50vh, 520px);
  min-width: 300px;
  min-height: 260px;
  max-width: min(640px, 92vw);
  max-height: min(70vh, 620px);
}

.marker-modal--floating {
  overflow: auto;
  min-width: 280px;
  min-height: 220px;
}

.window-resize-handle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  border-right: 2px solid var(--color-copper);
  border-bottom: 2px solid var(--color-copper);
  pointer-events: auto;
}

.window-glass-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent;
  cursor: inherit;
}

.analysis-modal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  grid-template-areas:
    "media content"
    "suggestions suggestions";
  gap: var(--spacing-sm);
}

.analysis-modal__media {
  grid-area: media;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.analysis-modal__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.analysis-modal__timestamp {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-base-content-light);
}

.analysis-modal__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.analysis-modal__summary {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-base-content);
  margin: 0;
}

.analysis-modal__question {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  margin: 0;
}

.analysis-modal__suggestions {
  grid-area: suggestions;
}

@media (max-width: 560px) {
  .analysis-modal {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content"
      "suggestions";
  }
}

.marker-modal--floating {
  position: absolute;
  width: auto;
  max-height: none;
  right: auto;
  left: auto;
  bottom: auto;
}

.marker-modal--advisor.marker-modal--floating {
  width: min(520px, 90vw);
  max-height: none;
}

.marker-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  cursor: move;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-base-200);
  border-bottom: 2px solid var(--color-primary);
}

.marker-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0;
  padding: var(--spacing-md);
}

.marker-modal__title {
  font-family: var(--font-tactical);
  font-size: var(--font-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.marker-modal__close {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  font-family: var(--font-mono);
  cursor: pointer;
}

.marker-modal__close:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.marker-modal__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.marker-modal__section-title {
  font-family: var(--font-tactical);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-base-content-light);
  border-bottom: 1px solid var(--color-base-300);
  margin-bottom: var(--spacing-xs);
}

.marker-modal__detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.marker-modal__detail-label {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
}

.marker-modal__detail-value {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-base-content);
}

.marker-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}

.window {
  background-color: var(--color-base-100);
  border: 4px double var(--color-secondary);
  box-shadow: var(--shadow-tactical);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.window-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-base-200);
  border-bottom: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.window-content {
  background-color: var(--color-base-100);
  flex: 1;
  overflow: auto;
  color: var(--color-base-content);
}

.window-title {
  font-family: var(--font-tactical);
  font-size: var(--font-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.window-close {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  font-family: var(--font-mono);
  cursor: pointer;
}

.window-close:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.plant-palette {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
}

.plant-palette__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-base-100);
    padding: 12px 20px;
    border: 4px double var(--color-secondary);
    box-shadow: var(--shadow-tactical);
}

.plant-palette__group {
    display: flex;
    gap: 8px;
}

.plant-palette__separator {
    width: 1px;
    height: 24px;
    background-color: var(--color-base-300);
}

.plant-palette__mode {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-base-300);
    background: var(--color-base-100);
    color: var(--color-base-content);
    font-size: var(--font-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 0;
}

.plant-palette__mode img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.plant-palette__mode:hover {
    box-shadow: var(--shadow-tactical-small);
    color: white;
    transform: translateY(-4px);
    background-color: var(--color-base-200);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-tactical-small);
}

.plant-palette__mode.is-active {
    color: white;
    background-color: var(--color-base-100);
    box-shadow: var(--shadow-tactical-small);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.plant-palette__mode::after {
    transform: translateY(4px);
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-secondary);
    background: var(--color-base-100);
    padding: 4px 10px;
    font-family: var(--font-tactical);
    font-size: var(--font-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: 0;
}

.plant-palette__mode:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.plant-tag-input {
  position: relative;
}

.plant-tag-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  border: 1px solid var(--color-base-content-light);
  padding: var(--spacing-xs);
  background-color: var(--color-base-100);
}

.plant-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: rgba(148, 163, 184, 0.2);
  padding: var(--spacing-xs) var(--spacing-xs);
  font-size: var(--font-xs);
}

.plant-tag-input__remove {
  background: none;
  border: none;
  padding: 0;
}

.plant-tag-input__input {
  flex: 1;
  min-width: 8rem;
  background: transparent;
  border: none;
  font-size: var(--font-xs);
}

.plant-tag-input__input:focus {
  outline: none;
}

.plant-tag-input__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--spacing-xs));
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-content-light);
  box-shadow: var(--shadow-md);
  max-height: 12rem;
  overflow-y: auto;
  z-index: 100;
}

.plant-tag-input__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: none;
}

.plant-tag-input__option:hover {
  background-color: rgba(148, 163, 184, 0.12);
}

.plant-details {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--color-base-content-light);
}

.plant-details__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--font-xs);
}

.plant-details-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.plant-details-form__image {
  overflow: hidden;
}

.plant-details-form__image-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
}

.plant-details-form__image-preview {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  border: 2px solid var(--color-base-content-light);
}

.plant-details-form__upload {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  color: white;
}

.plant-details-form__preview {
  margin-top: var(--spacing-xs);
}

.plant-details-form__preview-text {
  font-size: var(--font-xs);
  color: var(--color-success);
  margin-bottom: var(--spacing-xs);
}

.plant-details-form__preview-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border: 2px solid var(--color-success);
}

.plant-details-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.plant-form-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

/* Mother Plant Search */
.mother-plant-search {
  position: relative;
}

.mother-plant-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-content-light);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mother-plant-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-base-content);
  font-size: var(--font-xs);
}

.mother-plant-option:hover {
  background: var(--color-base-300);
}

.mother-plant-option__name {
  flex: 1;
  font-weight: 500;
}

.mother-plant-option__area {
  color: var(--color-base-content-muted);
}

.mother-plant-option__status {
  font-size: var(--font-xxs);
  color: var(--color-base-content-light);
  text-transform: capitalize;
}

.mother-plant-no-results {
  padding: var(--spacing-sm);
  text-align: center;
  color: var(--color-base-content-muted);
  font-size: var(--font-xs);
}

.mother-plant-selected {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-base-300);
  border-radius: var(--radius-sm);
}

.mother-plant-badge {
  flex: 1;
  font-size: var(--font-xs);
  color: var(--color-base-content);
}

.mother-plant-badge--clickable {
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
}

.mother-plant-badge--clickable:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.mother-plant-badge__area {
  color: var(--color-base-content-muted);
  margin-left: var(--spacing-xs);
}

.traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.cultivar-card__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.mother-plant-clear {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--color-base-400);
  color: var(--color-base-content);
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-sm);
  line-height: 1;
}

.mother-plant-clear:hover {
  background: var(--color-error);
  color: white;
}

.plant-palette__actions {
  display: flex;
  justify-content: flex-end;
}

.plant-palette__action-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-palette__action {
  padding: var(--spacing-xs);
  border: 1px solid var(--color-base-content-light);
  color: white;
}

.plant-palette__action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
}

.plant-palette__action-date {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.plant-palette__action-plant {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.plant-palette__action-description {
  margin-top: var(--spacing-xs);
  font-size: var(--font-xs);
}

.plant-palette__advisor-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.plant-palette__crop-preview {
  overflow: hidden;
  position: relative;
}

.plant-palette__crop-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: 10px;
  line-height: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plant-palette__crop-clear:hover {
  background: var(--color-primary);
  color: var(--color-base-100);
}

.plant-palette__crop-image {
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}

.plant-palette__analysis-preview {
  margin-bottom: var(--spacing-xs);
  background-color: var(--color-base-100);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: var(--spacing-xs);
}

.plant-palette__analysis-image {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}

.plant-palette__analysis-link {
  color: white;
  font-size: var(--font-xs);
  text-decoration: underline;
  align-self: flex-start;
}

.plant-palette__analysis-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-palette__analysis-entry {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--color-base-content-light);
  background: transparent;
  color: white;
  text-align: left;
}

.plant-palette__analysis-entry.is-active {
  border-color: var(--color-primary);
}

.plant-palette__analysis-date {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.plant-palette__analysis-summary {
  font-size: var(--font-xs);
}

.selection-overlay {
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(59, 130, 246, 0.9);
  background-color: rgba(59, 130, 246, 0.15);
  box-sizing: border-box;
  z-index: 2;
}


.analysis-feed {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.analysis-feed__entry {
  padding: var(--spacing-md);
  border: 1px solid var(--color-base-200);
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.analysis-feed__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.analysis-feed__date {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.analysis-feed__image {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
}

.analysis-feed__summary {
  margin: 0;
}

.analysis-feed__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.analysis-feed__actions-title {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.analysis-feed__actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.analysis-feed__action {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.analysis-feed__action-date {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.analysis-feed__action-description {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

@media (max-width: 768px) {
  .plant-palette {
    width: 94vw;
    bottom: var(--spacing-sm);
  }

  .plant-palette__drawer {
    max-height: 62dvh;
  }

  .plant-palette__advisor-actions {
    flex-direction: column;
  }

  .marker-modal--floating {
    position: absolute;
    width: min(90vw, 360px);
    max-width: none;
    max-height: none;
  }
}
.marker-form__tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.marker-form__tab {
  flex: 1;
  border: 1px solid var(--color-base-content-light);
  background-color: transparent;
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-xs);
}

.marker-form__tab.is-active {
  background-color: var(--color-base-content);
}

.marker-form__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.marker-form__advisor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.marker-form__advisor-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.marker-form__advisor-input,
.marker-form__advisor-button {
  width: 100%;
}

.marker-form__advisor-history {
  max-height: 18rem;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}




/* ============================================
   Plant Marker Modals (Harvest/Move)
   ============================================ */
.plant-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--color-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plant-modal__content {
  background-color: var(--color-base-100); /* Paper */
  border: 4px double var(--color-base-300); /* Signature double border */
  box-shadow: var(--shadow-tactical);
  padding: var(--spacing-md);
  max-width: 32rem;
  width: 90%;
  position: relative;
  z-index: 2001;
}

.plant-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: var(--spacing-2);
}

.plant-modal__title {
  font-family: var(--font-tactical);
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--font-lg);
  color: var(--color-base-content);
  margin: 0;
}

.plant-modal__close {
  color: var(--color-base-content-light);
}

.plant-modal__names {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-2);
  background-color: var(--color-base-200);
  border-left: 3px solid var(--color-primary);
}

.plant-modal__text {
  padding: var(--spacing-md) 0;
  color: var(--color-base-content);
}

.plant-modal__input,
.plant-modal__select,
.plant-modal__textarea {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  font-family: var(--font-mono);
}

.plant-modal__textarea {
  min-height: 6rem;
}

.plant-modal__input::placeholder,
.plant-modal__textarea::placeholder {
  color: var(--color-base-content-muted);
}

.plant-modal__label {
  color: var(--color-base-content);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plant-modal__actions {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--color-base-300);
  padding-top: var(--spacing-4);
}

/* ============================================
   Message Reader
   ============================================ */
.message-reader {
  display: grid;
  grid-template-columns: minmax(240px, 35%) 1fr;
  height: 100%;
  overflow: hidden;
}

.message-reader__list {
  border-right: 1px solid var(--color-base-300);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.message-reader__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-base-300);
  flex-shrink: 0;
}

.message-reader__list-title {
  font-family: var(--font-tactical);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.message-reader__list-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.message-reader__unread-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--color-primary);
  margin-left: 4px;
}

.message-reader__filter-toggle {
  background: none;
  border: 1px solid var(--color-base-300);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
}

.message-reader__filter-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.message-reader__filter-toggle--active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-base-200);
}

.message-reader__mark-read {
  background: none;
  border: none;
  font-size: var(--font-2xs);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
}

.message-reader__mark-read:hover {
  text-decoration: underline;
}

.message-reader__new-thread {
  background: none;
  border: 1px solid var(--color-primary);
  font-size: var(--font-2xs);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
}

.message-reader__new-thread:hover {
  background: var(--color-primary);
  color: var(--color-base-100);
}

.message-detail__pending {
  padding: 12px;
  color: var(--color-secondary);
  font-family: var(--font-tactical);
  font-size: var(--font-xs);
}

.message-detail__pending p {
  margin-top: 8px;
  opacity: 0.8;
}

.message-reader__detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.message-reader__detail > .message-detail,
.message-reader__detail > .message-reader__loading,
.message-reader__detail > .message-reader__placeholder {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

.message-reader__loading,
.message-reader__empty,
.message-reader__placeholder {
  padding: var(--spacing-md);
  color: var(--color-base-content-muted, var(--color-secondary));
  font-size: var(--font-sm);
  text-align: center;
}

.message-reader__item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--spacing-xs);
  align-items: start;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  border-bottom: 1px solid var(--color-base-300);
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  opacity: 0.6;
  transition: background 0.15s ease;
  font-family: inherit;
}

.message-reader__item:hover {
  background: var(--color-base-200);
}

.message-reader__item--unread {
  opacity: 1;
  font-weight: 600;
}

.message-reader__item--global {
  border-left: 3px solid var(--color-accent, var(--color-primary));
}

.message-reader__item--pending {
  opacity: 0.7;
  cursor: default;
  animation: message-pending-pulse 2s ease-in-out infinite;
}

@keyframes message-pending-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.message-reader__item-pending-badge {
  display: inline-block;
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warning, #c59a3a);
  margin-top: 2px;
}

.message-reader__item.is-active {
  background: var(--color-base-200);
  border-left: 3px solid var(--color-primary);
}

.message-reader__item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  border: 1px solid var(--color-base-300);
  flex-shrink: 0;
}

.message-reader__item-type--advisor { color: var(--color-primary); border-color: var(--color-primary); }
.message-reader__item-type--mission { color: var(--color-warning, #c59a3a); border-color: var(--color-warning, #c59a3a); }
.message-reader__item-type--campaign { color: var(--color-success, #3a8c5a); border-color: var(--color-success, #3a8c5a); }
.message-reader__item-type--feedback { color: var(--color-secondary); border-color: var(--color-secondary); }
.message-reader__item-type--system { color: var(--color-info, #5a7ac5); border-color: var(--color-info, #5a7ac5); }

.message-reader__item-body {
  min-width: 0;
  overflow: hidden;
}

.message-reader__item-subject {
  font-size: var(--font-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-reader__item-preview {
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.message-reader__item-meta {
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  white-space: nowrap;
  text-align: right;
}

.message-reader__item-time {
  display: block;
}

.message-reader__item-global-badge {
  display: inline-block;
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, var(--color-primary));
  margin-top: 2px;
}

.message-reader__item-row {
  display: flex;
  align-items: stretch;
}

.message-reader__item-row .message-reader__item {
  flex: 1;
  min-width: 0;
}

.message-reader__item-archive-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-base-300);
  color: var(--color-secondary);
  cursor: pointer;
  font-size: var(--font-2xs);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.message-reader__item-row:hover .message-reader__item-archive-btn {
  opacity: 0.6;
}

.message-reader__item-archive-btn:hover {
  opacity: 1;
  color: var(--color-primary);
}

.message-detail__header-actions {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.message-detail__archive-btn {
  background: none;
  border: 1px solid var(--color-base-300);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
}

.message-detail__archive-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Message Detail */
.message-detail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: var(--spacing-xs);
}

.message-detail__subject {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0;
}

.message-detail__time {
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.message-detail__section {
  margin-top: var(--spacing-sm);
}

.message-detail__section-title {
  font-family: var(--font-tactical);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-xs) 0;
}

.message-detail__image {
  margin-bottom: var(--spacing-sm);
}

.message-detail__image img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border: 1px solid var(--color-base-300);
}

.message-detail__question {
  font-style: italic;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-sm);
}

.message-detail__summary {
  font-size: var(--font-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.message-detail__observation {
  display: flex;
  gap: var(--spacing-xs);
  padding: 2px 0;
  font-size: var(--font-sm);
}

.message-detail__obs-label {
  font-weight: 600;
  flex-shrink: 0;
}

.message-detail__obs-details {
  color: var(--color-secondary);
}

.message-detail__suggestion {
  display: flex;
  gap: var(--spacing-xs);
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--color-base-200);
}

.message-detail__urgency {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border: 1px solid;
  flex-shrink: 0;
}

.message-detail__urgency--high { color: var(--color-error, #c53a3a); border-color: var(--color-error, #c53a3a); }
.message-detail__urgency--medium { color: var(--color-warning, #c59a3a); border-color: var(--color-warning, #c59a3a); }
.message-detail__urgency--low { color: var(--color-secondary); border-color: var(--color-secondary); }

.message-detail__action-kind {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.message-detail__sug-text {
  flex: 1;
}

/* Mission detail */
.message-detail__source-context {
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-base-300);
}

.message-detail__mission-intel {
  font-size: var(--font-sm);
  line-height: 1.5;
  border-left: 2px solid var(--color-base-300);
  padding-left: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-style: italic;
  color: var(--color-secondary);
}

.message-detail__mission-intel p {
  margin: 0;
}

.message-detail__mission-header {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.message-detail__priority {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border: 1px solid;
}

.message-detail__priority--high {
  color: var(--color-error, #c53a3a);
  border-color: var(--color-error, #c53a3a);
}

.message-detail__mission-type {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.message-detail__mission-description {
  font-size: var(--font-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.message-detail__tasks {
  margin-top: var(--spacing-xs);
}

.message-detail__task {
  display: flex;
  gap: var(--spacing-xs);
  align-items: baseline;
  padding: var(--spacing-xs);
  font-size: var(--font-sm);
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: default;
}

.message-detail__task.is-clickable {
  cursor: pointer;
  border-color: var(--color-base-200);
}

.message-detail__task.is-clickable:hover {
  background: var(--color-base-100);
  border-color: var(--color-base-300);
}

.message-detail__task.is-clickable:active {
  background: var(--color-base-200);
}

.message-detail__task.is-completed {
  opacity: 0.5;
  text-decoration: line-through;
}

.message-detail__task.is-active {
  font-weight: 600;
}

.message-detail__task-status {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  flex-shrink: 0;
  color: var(--color-secondary);
}

.message-detail__task-desc {
  flex: 1;
}

.message-detail__task-skip {
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  font-style: italic;
}

.message-detail__mission-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-base-300);
}

.message-detail__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-sm);
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
}

.message-detail__btn--accept {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.message-detail__btn--accept:hover {
  background: var(--color-primary);
  color: var(--color-base-100);
}

.message-detail__btn--decline {
  color: var(--color-secondary);
  border-color: var(--color-base-300);
}

.message-detail__btn--decline:hover {
  border-color: var(--color-error, #c53a3a);
  color: var(--color-error, #c53a3a);
}

/* Campaign detail */
.message-detail__campaign-type {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.message-detail__campaign-description {
  font-size: var(--font-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.message-detail__progress {
  margin-top: var(--spacing-xs);
}

.message-detail__progress-label {
  font-size: var(--font-xs);
  color: var(--color-secondary);
  margin-bottom: 4px;
}

.message-detail__progress-bar {
  height: 8px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  overflow: hidden;
}

.message-detail__progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.message-detail__campaign-complete {
  margin-top: var(--spacing-sm);
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  color: var(--color-success, #3a8c5a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Feedback detail */
.message-detail__feedback-category {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.message-detail__feedback-subject {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.message-detail__feedback-body {
  font-size: var(--font-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* System detail */
.message-detail__system-body {
  font-size: var(--font-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Message filter bar */
.message-reader__filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px var(--spacing-sm);
  background: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
  flex-shrink: 0;
}

.message-reader__filter-bar-label {
  font-size: var(--font-2xs);
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.message-reader__filter-bar-clear {
  background: none;
  border: 1px solid var(--color-base-300);
  font-size: var(--font-2xs);
  font-family: var(--font-mono);
  color: var(--color-secondary);
  cursor: pointer;
  padding: 1px 6px;
  line-height: 1;
}

.message-reader__filter-bar-clear:hover {
  border-color: var(--color-error, #c53a3a);
  color: var(--color-error, #c53a3a);
}

/* Message compose bar */
.message-reader__compose {
  flex-shrink: 0;
  border-top: 1px solid var(--color-base-300);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-base-200);
}

.message-reader__compose--active {
  background: var(--color-base-100);
  border-top: 2px solid var(--color-primary);
}

.message-reader__compose-plants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--spacing-xs);
}

.message-reader__compose-plant-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-2xs);
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.message-reader__compose-plant-remove {
  background: none;
  border: none;
  font-size: var(--font-2xs);
  font-family: var(--font-mono);
  color: var(--color-secondary);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.message-reader__compose-plant-remove:hover {
  color: var(--color-error, #c53a3a);
}

.message-reader__compose-crop {
  margin-bottom: var(--spacing-xs);
  position: relative;
  display: inline-block;
}

.message-reader__compose-crop-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: 10px;
  line-height: 1;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-reader__compose-crop-clear:hover {
  background: var(--color-primary);
  color: var(--color-base-100);
}

.message-reader__compose-crop-img {
  max-width: 120px;
  max-height: 60px;
  object-fit: contain;
  border: 1px solid var(--color-base-300);
}

.message-reader__compose-row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.message-reader__compose-input {
  flex: 1;
  padding: 4px var(--spacing-xs);
  font-size: var(--font-sm);
  font-family: inherit;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  color: inherit;
}

.message-reader__compose-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.message-reader__compose-btn {
  padding: 4px var(--spacing-sm);
  font-size: var(--font-xs);
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

.message-reader__compose-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-base-100);
}

.message-reader__compose-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.message-reader__compose-clear {
  padding: 4px var(--spacing-xs);
  font-size: var(--font-2xs);
  font-family: var(--font-tactical);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid var(--color-base-300);
  background: transparent;
  color: var(--color-secondary);
}

.message-reader__compose-clear:hover {
  border-color: var(--color-error, #c53a3a);
  color: var(--color-error, #c53a3a);
}

/* Palette badge */
.plant-palette__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-base-100);
  background: var(--color-primary);
  border: 1px solid var(--color-base-100);
  pointer-events: none;
  line-height: 1;
}

/* Messages window body override */
.marker-modal__body--messages {
  padding: 0;
  overflow: hidden;
}

/* Lineage Editor & Genetic Search */
.cultivar-form-wrapper .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.lineage-editor {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.lineage-search-container {
  position: relative;
}

.parent-selected-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-base-100);
  font-family: var(--font-tactical);
  font-weight: bold;
}

.parent-selected-badge .clear-parent {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 var(--spacing-xs);
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-tactical);
  max-height: 200px;
  overflow-y: auto;
}

.search-result-item {
  width: 100%;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-bottom: 1px solid var(--color-base-300);
}

.search-result-item:hover {
  background: var(--color-base-200);
}

.search-result-item .result-name {
  font-weight: bold;
  color: var(--color-base-content);
}

.search-result-item .result-meta {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
}

/* Genetic Vault Discovery UI */
.genetic-vault__discovery {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  align-items: flex-start;
}

.genetic-vault__discovery .search-box {
  flex: 1;
  position: relative;
}

.genetic-vault__discovery .search-box .input {
  background: var(--color-base-200);
  border-color: var(--color-primary);
  font-family: var(--font-mono);
}

.genetic-vault__discovery .search-box .input:focus {
  background: var(--color-base-100);
  box-shadow: var(--shadow-tactical);
}

/* Library & Bestiary Discovery */
.field-with-action {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
}

.ai-fill-btn {
  margin-bottom: 2px;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-fill-btn:hover {
  background: var(--color-primary);
  color: var(--color-base-100) !important;
}

.threat-card {
  border-left: 4px solid var(--red);
}

.threat-card__danger {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  margin: var(--spacing-xs) 0;
  color: var(--color-base-content-light);
}

.danger-dots {
  color: var(--red);
  letter-spacing: 2px;
}

.threat-card__description {
  font-size: var(--font-sm);
  margin-top: var(--spacing-sm);
  line-height: 1.4;
}

.threat-card__mitigation {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px dashed var(--color-base-300);
}

.mitigation-title {
  font-family: var(--font-tactical);
  font-size: var(--font-xs);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.mitigation-title::before {
  content: ">> ";
}

.status-pest { background: var(--red); color: white; }
.status-disease { background: #d35400; color: white; }
.status-deficiency { background: #f1c40f; color: black; }
.status-environmental { background: #3498db; color: white; }

/* ============================================
   Mobile Responsive Improvements
   ============================================ */

/* Minimum touch targets on mobile */
@media (max-width: 768px) {
  .button, .button-sm, .button-xs {
    min-height: 44px;
    min-width: 44px;
  }
  .input, .textarea, .select {
    min-height: 44px;
  }
}

/* Reduce tactical shadow on mobile */
@media (max-width: 640px) {
  .page-section {
    box-shadow: var(--shadow-tactical-small);
  }
}

/* Shrink logo container on small screens */
@media (max-width: 560px) {
  .logo-container {
    transform: scale(0.85);
    transform-origin: top left;
  }
}

/* Table overflow hint */
@media (max-width: 640px) {
  .table-wrapper {
    position: relative;
  }
  .table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-base-100));
    pointer-events: none;
  }
}
/* ============================================
   Companion Studio Components
   ============================================ */
.add-images-page {
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.add-images-back-link {
  margin-bottom: var(--spacing-md);
  display: inline-flex;
}

.add-images-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .add-images-header {
    flex-direction: row;
    align-items: center;
  }
}

.add-images-header__info {
  display: flex;
  flex-direction: column;
}

.add-images-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.add-images-status__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.add-images-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .add-images-main {
    grid-template-columns: 2fr 1fr;
  }
}

.add-images-card {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.add-images-card--highlight {
  background-color: var(--color-base-200);
  border-color: var(--color-primary-light);
}

.add-images-sidebar__card {
  padding: var(--spacing-md);
}

.add-images-card__header {
  padding: var(--spacing-md);
  background-color: var(--color-base-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-images-card__body {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}

.add-images-session-active {
  animation: pulse-slow 3s infinite ease-in-out;
}

.add-images-session-active__icon {
  font-size: var(--font-6xl);
  margin-bottom: var(--spacing-md);
}

.add-images-session-active__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.add-images-empty-state__icon {
  font-size: var(--font-5xl);
  margin-bottom: var(--spacing-md);
  opacity: 0.2;
}

.add-images-empty-state__button {
  margin-top: var(--spacing-lg);
}

.add-images-queue {
  margin-top: var(--spacing-xl);
}

.add-images-queue__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.add-images-queue__empty-container {
  padding: var(--spacing-2xl);
  color: var(--color-base-content-light);
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-base-200);
}

.add-images-queue__empty-text {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-style: italic;
  z-index: 10;
}

.add-images-ghost-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.add-images-ghost-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.5);
}

.add-images-ghost-overlay-text {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: var(--color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 10;
}

.add-images-queue__tips-container {
  border-top: 1px solid var(--color-base-300);
  padding-top: var(--spacing-md);
}

.add-images-queue__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

/* ============================================
   Companion Camera UI (Mobile)
   ============================================ */
.page--camera-companion {
  padding: 0;
  background: var(--color-base-content);
  min-height: 100vh;
  color: var(--color-base-300);
  overflow: hidden;
}

#companion-camera {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  background: var(--color-base-content);
  overflow: hidden;
}

.companion-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: black;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.companion-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.companion-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 100;
}

.companion-overlay.mode-normal {
  opacity: 0.5;
}

.companion-overlay.mode-difference {
  mix-blend-mode: difference;
  filter: contrast(2) invert(1);
}

.companion-hud {
  position: absolute;
  top: env(safe-area-inset-top, 20px);
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  color: white;
}

.companion-blend-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  cursor: pointer;
}

.companion-capture-btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid white;
  background: rgba(140, 20, 30, 0.7);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  padding: 0;
}

@media (orientation: portrait) {
  .companion-capture-btn {
    top: auto;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 20px) + 20px);
    left: 50%;
    transform: translateX(-50%);
  }
}

.companion-capture-btn:active {
  background: rgba(140, 20, 30, 0.95);
}

@media (orientation: landscape) {
  .companion-capture-btn:active {
    transform: translateY(-50%) scale(0.95);
  }
}

@media (orientation: portrait) {
  .companion-capture-btn:active {
    transform: translateX(-50%) scale(0.95);
  }
}

.companion-capture-btn:disabled {
  opacity: 0.3;
}

.capturing .companion-video {
  filter: brightness(2) contrast(1.2);
  transition: none;
}

.capturing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0.5;
  z-index: 100;
  pointer-events: none;
}

.companion-sent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(140, 20, 30, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: none;
  animation: companion-sent-fade 0.3s ease-out;
}

.companion-sent-overlay__text {
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes companion-sent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 640px) {
  .add-images-queue__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.add-images-capture-card {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.add-images-capture-card__image-container {
  aspect-ratio: 1 / 1;
  position: relative;
}

.add-images-capture-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add-images-capture-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  opacity: 0;
  transition: opacity 0.2s;
}

.add-images-capture-card:hover .add-images-capture-card__overlay {
  opacity: 1;
}

.add-images-capture-card__footer {
  padding: var(--spacing-xs);
  background-color: var(--color-base-200);
  font-size: var(--font-2xs);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-images-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.add-images-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.add-images-tips {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  list-style: disc;
  padding-left: var(--spacing-md);
}

.add-images-tips li {
  margin-bottom: var(--spacing-xs);
}

.add-images-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.add-images-plan-title {
  text-xs font-bold uppercase text-subtle;
  color: var(--color-base-content-light);
  font-size: var(--font-xs);
  font-weight: bold;
  text-transform: uppercase;
}

.add-images-plan-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.add-images-plan-button {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.add-images-plan-link {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
}

.add-images-plan-list {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.add-images-plan-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.add-images-plan-item:hover {
  background-color: var(--color-base-200);
}

.add-images-plan-label {
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}


/* Gallery plant filter overrides */
.gallery-page .plant-tag-input {
  min-width: 250px;
  z-index: 50;
}

.gallery-page .plant-tag-input__list {
  background-color: var(--color-base-100);
  border-color: var(--color-base-300);
}

.gallery-page .plant-tag-input__input {
  color: var(--color-base-content);
}

.gallery-page .plant-tag-input__tag {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
}

.gallery-page .plant-tag-input__remove {
  color: var(--color-base-content);
  opacity: 0.6;
}

.gallery-page .plant-tag-input__dropdown {
  background-color: var(--color-base-100);
  border-color: var(--color-base-300);
  box-shadow: var(--shadow-tactical);
  z-index: 100;
}

.gallery-page .plant-tag-input__option {
  color: var(--color-base-content);
}

.gallery-page .plant-tag-input__option:hover {
  background-color: var(--color-base-200);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-tactical);
  margin-left: var(--spacing-xs);
}

.status-badge.status-completed {
  background: var(--color-success);
  color: var(--color-base-100);
}

.status-badge.status-pending {
  background: var(--color-warning);
  color: var(--color-base-content);
}

.status-badge.status-failed {
  background: var(--red);
  color: var(--color-base-100);
}

.status-badge.status-error {
  background: var(--red);
  color: var(--color-base-100);
}

/* Tactical Missions */
.mission-return-banner {
  background: var(--color-base-content);
  color: var(--color-base-100);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
}

.mission-return-banner p {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
}

.mission-return-banner__icon {
  font-size: 1.2rem;
}

/* Ghost Markers (AI Suggestions) */
.ghost-label {
  font-size: var(--font-xs);
  font-weight: 800;
  fill: var(--color-base-100);
  pointer-events: none;
}

.ghost-marker path {
  transition: all 0.2s ease;
}

.ghost-marker:hover path {
  fill: rgba(200, 200, 200, 0.8);
}
.admin-prompts {
  padding: 2rem;
  background: var(--color-base-100);
  color: var(--color-brand);
  min-height: 100vh;
  font-family: var(--font-mono);
}

.admin-prompts__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}

.admin-prompts__nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.admin-prompts__nav-item {
  background: transparent;
  border: 1px solid var(--color-base-300);
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.admin-prompts__nav-item:hover {
  background: var(--color-base-200);
}

.admin-prompts__nav-item.is-active {
  color: var(--color-base-content);
  border-color: var(--color-primary);
  background: var(--color-base-100);
}

.admin-prompts__nav-item .type-label {
  font-weight: bold;
  font-size: 0.9rem;
}

.admin-prompts__nav-item .type-id {
  font-size: 0.7rem;
  opacity: 0.7;
}

.admin-prompts__history h3 {
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: 0.5rem;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-item {
  padding: 0.75rem;
  border: 1px solid var(--color-base-300);
  font-size: 0.75rem;
  position: relative;
}

.history-item.is-active {
  border-color: var(--color-primary);
  background: var(--color-base-100);
}

.history-item__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  opacity: 0.7;
}

.active-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 4px;
  font-size: 0.6rem;
  font-weight: bold;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.editor-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.editor-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-form__field label {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.editor-form__field input,
.editor-form__field textarea {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  padding: 1rem;
  font-family: inherit;
}

.editor-form__field textarea {
  line-height: 1.6;
}

.editor-form__field input:focus,
.editor-form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-dashboard {
  padding: 4rem 2rem;
  min-height: 100vh;
  font-family: var(--font-mono);
}

.admin-dashboard__header {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
}

.admin-dashboard__header h1 {
  font-size: 2.5rem;
  letter-spacing: 0.5rem;
  margin-bottom: 0.5rem;
}

.admin-dashboard__header p {
  font-size: 1rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.admin-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-card {
  border: 1px solid var(--color-brand);
  box-shadow: var(--shadow-tactical);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.admin-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-5px);
}

.admin-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.admin-card:hover::before {
  transform: scaleX(1);
}

.admin-card__title {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.admin-card__description {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
}

.admin-card__action {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-card__action::after {
  content: ">>";
  transition: transform 0.3s ease;
}

.admin-card:hover .admin-card__action::after {
  transform: translateX(5px);
}

/* Campaign Templates Admin */
.admin-campaign-templates {
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.campaign-templates__list {
  margin-top: var(--spacing-lg);
}

.campaign-templates__empty {
  opacity: 0.6;
  font-style: italic;
}

.campaign-templates__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.campaign-templates__table th,
.campaign-templates__table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-terminal-border);
}

.campaign-templates__table th {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.campaign-templates__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  border: 1px solid var(--color-terminal-border);
  cursor: pointer;
  background: transparent;
  color: var(--color-terminal-text);
}

.campaign-templates__badge--active {
  border-color: var(--color-success, #0f0);
  color: var(--color-success, #0f0);
}

.campaign-templates__badge--draft {
  opacity: 0.5;
}

.campaign-templates__badge--required {
  border-color: var(--color-warning, #ff0);
  color: var(--color-warning, #ff0);
  cursor: default;
  font-size: 0.7rem;
}

.campaign-templates__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.campaign-templates__form {
  margin-top: var(--spacing-lg);
}

.campaign-templates__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.campaign-templates__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.campaign-templates__field--full {
  grid-column: 1 / -1;
}

.campaign-templates__field label {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-templates__recipe-editor {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--color-terminal-bg);
  color: var(--color-terminal-text);
  border: 1px solid var(--color-terminal-border);
  padding: var(--spacing-sm);
  resize: vertical;
  tab-size: 2;
}

.campaign-templates__preview {
  border: 1px solid var(--color-terminal-border);
  padding: var(--spacing-md);
  background: var(--color-terminal-bg);
}

.campaign-templates__preview h3 {
  margin-bottom: var(--spacing-sm);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-templates__preview-mission {
  margin-bottom: var(--spacing-md);
}

.campaign-templates__preview-key {
  opacity: 0.5;
  font-size: 0.8rem;
}

.campaign-templates__preview ul {
  margin: var(--spacing-xs, 4px) 0 0 var(--spacing-md);
  list-style: none;
}

.campaign-templates__preview li {
  padding: 2px 0;
  font-size: 0.85rem;
}

.campaign-templates__preview li code {
  color: var(--color-primary, #0af);
  font-size: 0.8rem;
}

.campaign-templates__preview--error {
  color: var(--color-danger, #f00);
  font-style: italic;
}

.campaign-templates__form-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.is-hovered {
  border-bottom: 2px solid var(--color-primary);
  transform: scale(1.1);
}

.user-settings {
  max-width: 40rem;
  margin: 2rem auto;
}

/* ============================================
   Tactical Zone Styles (BEM)
   ============================================ */
.marker-form__grid-segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.marker-form__grid-input-wrapper {
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
  align-items: center;
}

.marker-form__input-help {
  font-size: var(--font-2xs);
  opacity: 0.5;
  font-family: var(--font-mono);
}

.badge__remove {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  font-weight: bold;
  color: inherit;
}

.badge__remove:hover {
  color: var(--red);
}

.plant-details__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: flex-end;
}

/* Tactical Grid Debug & Indicators */
.grid-sector-button {
  cursor: crosshair;
  pointer-events: auto;
  outline: none;
}

.grid-sector-button:hover {
  fill: var(--color-primary);
  fill-opacity: 0.1;
}

.grid-label {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  font-weight: bold;
  fill: var(--grid-color, var(--color-primary));
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.sector-indicator {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  font-weight: bold;
  fill: var(--color-accent);
  filter: drop-shadow(0px 0px 2px black);
  pointer-events: none;
  user-select: none;
}

.pulsating-sector {
  fill: var(--color-highlight);
  fill-opacity: 0.3;
  pointer-events: none;
  animation: grid-pulse 2s infinite ease-in-out;
}

/* ============================================
   Configuration Page Styles
   ============================================ */
.config-page {
  max-width: 64rem;
  margin: 0 auto;
}

.config-header {
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: var(--spacing-md);
}

.config-header__title {
  margin-bottom: var(--spacing-xs);
}

.config-header__subtitle {
  color: var(--color-base-content-light);
  font-size: var(--font-sm);
}

.config-section {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  margin-bottom: var(--spacing-md);
  padding: 0;
}

.config-section__header {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
}

.config-section__icon {
  font-size: var(--font-lg);
}

.config-section__title {
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  margin-bottom: 0;
}

.config-section__subtitle {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
}

.config-section__body {
  padding: var(--spacing-md);
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .config-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.config-grid__span-2 {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .config-grid__span-2 {
    grid-column: span 2;
  }
}

.config-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.config-info-box {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

.config-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.config-footer {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-base-300);
  display: flex;
  justify-content: flex-end;
}

.config-section--danger {
  border-color: var(--red);
}

.config-section--danger .config-section__header {
  background-color: rgba(169, 50, 38, 0.05);
  border-bottom-color: var(--red);
}

.config-back-link {
  display: inline-block;
  margin-top: var(--spacing-xl);
}

.config-color-preview {
  height: 3rem;
  padding: 2px;
}

.config-api-endpoint {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  background-color: var(--color-base-200);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-base-300);
}

@keyframes pulse-sector {
  0% { fill-opacity: 0.05; stroke-opacity: 0.3; }
  50% { fill-opacity: 0.2; stroke-opacity: 0.8; }
  100% { fill-opacity: 0.05; stroke-opacity: 0.3; }
}

/* Breadcrumbs in Window Header */
.window-header__title-container {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-tactical);
  font-size: var(--font-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-dimmed, var(--color-base-content-muted));
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumb-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--color-accent-victorian);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.breadcrumb-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.breadcrumb-separator {
  opacity: 0.5;
  user-select: none;
}

.breadcrumbs .window-title {
  color: var(--color-text-bright);
  margin: 0;
}

/* Advisor Prompts View */
.prompts-container {
  padding: 2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  min-height: 100vh;
  font-family: var(--font-mono, var(--font-mono));
}

.prompts-container.is-iframe {
  padding: 1rem;
  min-height: auto;
}

.prompts-header {
  border-bottom: 2px solid var(--color-base-300);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.prompts-header__title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.prompts-header__title h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  font-weight: 800;
  color: var(--color-base-content);
}

.prompts-header__area {
  color: var(--color-base-content-muted);
  font-size: 0.9rem;
}

.prompts-header__subtitle {
  margin-top: 0.5rem;
  color: var(--color-base-content-light);
  font-size: 0.9rem;
}

.prompts-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.prompt-card {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  padding: 1.5rem;
}

.prompt-card__header {
  margin-bottom: 1rem;
}

.prompt-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.prompt-card__title-row h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-base-content);
}

.prompt-card__badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}

.prompt-card__badge.is-custom {
  background: var(--color-success);
  color: var(--color-base-100);
}

.prompt-card__badge.is-default {
  background: var(--color-base-content-muted);
  color: var(--color-base-100);
}

.prompt-card__description {
  font-size: 0.85rem;
  color: var(--color-base-content-light);
  margin: 0;
}

.prompt-card__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prompt-card__textarea {
  width: 100%;
  padding: 1rem;
  font-family: var(--font-mono, var(--font-mono));
  font-size: 0.85rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  resize: vertical;
  min-height: 200px;
  line-height: 1.5;
}

.prompt-card__textarea:focus {
  outline: none;
  border-color: var(--color-base-content-light);
}

.prompt-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.prompts-btn {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.prompts-btn--primary {
  background: var(--color-base-content);
  color: var(--color-base-100);
}

.prompts-btn--primary:hover {
  background: var(--color-base-content-light);
}

.prompts-btn--outline {
  background: transparent;
  border-color: var(--color-base-300);
  color: var(--color-base-content-light);
}

.prompts-btn--outline:hover {
  border-color: var(--color-base-content-muted);
  color: var(--color-base-content);
}

/* Mission Control (HQ) View */
.hq-container {
  padding: var(--spacing-xl);
  background: var(--color-base-100);
  color: var(--color-base-content);
  min-height: 100vh;
  font-family: var(--font-sans);
}

.hq-container.is-iframe {
  padding: var(--spacing-md);
  min-height: auto;
}

.hq-header {
  border-bottom: 2px solid var(--color-base-300);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
}

.hq-header__title {
  margin: 0;
  font-family: var(--font-tactical);
  font-size: var(--font-2xl);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-base-content);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
}

.hq-header__area {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--color-base-content-muted);
  letter-spacing: 0.05em;
}

/* Stats Strip */
.hq-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.hq-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-mono);
  width: 100%;
  text-align: left;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.hq-stat-card:hover {
  border-color: var(--color-primary);
  background: var(--color-base-300);
  color: inherit;
}

.hq-stat-card--tasks {
  border-left: 4px solid var(--color-primary);
}

.hq-stat-card--tasks.is-due {
  border-left-color: var(--color-error);
}

.hq-stat-card--log {
  border-left: 4px solid var(--color-secondary);
}

.hq-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.hq-stat-card__label {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-base-content-muted);
}

.hq-stat-card__value {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hq-stat-card--tasks.is-due .hq-stat-card__value {
  color: var(--color-error);
}

.hq-stat-card__arrow {
  font-size: var(--font-xl);
  color: var(--color-base-content-muted);
  flex-shrink: 0;
}

/* Grid */
.hq-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

@media (max-width: 900px) {
  .hq-stats {
    grid-template-columns: 1fr;
  }

  .hq-grid {
    grid-template-columns: 1fr;
  }
}

.hq-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.hq-section__title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-base-content-muted);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: var(--spacing-xs);
  margin-bottom: 0;
}

.hq-section__title--secondary {
  margin-top: var(--spacing-lg);
}

.hq-section__title--alert {
  color: var(--color-error);
  border-color: var(--color-error);
}

.hq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hq-card {
  --card-pad: var(--spacing-md);
  --card-pad-y-sm: var(--spacing-3);
}

.hq-card__link-overlay {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: var(--card-pad);
}

.hq-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
}

.hq-card h3,
.hq-card__campaign-title {
  margin: 0;
  font-size: var(--font-md);
  font-family: var(--font-tactical);
  font-weight: 700;
  line-height: 1.3;
  padding: 0 var(--card-pad) var(--spacing-xs);
}

.hq-card__description {
  font-size: var(--font-sm);
  color: var(--color-base-content-muted);
  line-height: 1.5;
  padding: 0 var(--card-pad);
  margin-bottom: var(--card-pad);
}

.hq-intel {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--card-pad);
  margin: 0 var(--card-pad) var(--spacing-md);
  font-style: italic;
}

.hq-intel__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.hq-active-task {
  background: var(--color-base-content);
  color: var(--color-base-100);
  padding: var(--card-pad);
  margin-bottom: var(--spacing-md);
}

.hq-active-task__label {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-base-300);
  display: block;
  margin-bottom: var(--spacing-sm);
}

.hq-active-task__body {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  font-size: var(--font-sm);
  line-height: 1.5;
}

.hq-active-task__body.clickable:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hq-card__priority,
.hq-card__type,
.hq-card__meta {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px var(--spacing-xs);
  background: var(--color-base-300);
  color: var(--color-base-content-light);
}

.hq-card__priority.priority-high {
  background: var(--color-error);
  color: white;
}

.hq-card__priority.priority-normal {
  background: var(--color-info);
  color: white;
}

.priority-high  { border-left: 4px solid var(--color-error); }
.priority-normal { border-left: 4px solid var(--color-info); }
.priority-low   { border-left: 4px solid var(--color-base-content-muted); }

.hq-card.is-proposed {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}

.hq-card.is-failed {
  border-color: var(--color-error);
  background: rgba(169, 50, 38, 0.04);
}

.hq-card.is-pending {
  border-color: var(--color-info);
  background: rgba(41, 128, 185, 0.04);
}

.hq-loading-intel,
.hq-failed-intel {
  padding: 0 var(--card-pad) var(--card-pad);
}

.hq-loading-intel p,
.hq-failed-intel p {
  font-size: var(--font-sm);
  margin: var(--spacing-sm) 0;
}

.error-text {
  color: var(--color-error);
  font-weight: 700;
}

.error-debug {
  display: block;
  background: var(--color-base-200);
  padding: var(--spacing-sm);
  font-size: var(--font-2xs);
  font-family: var(--font-mono);
  margin-bottom: var(--card-pad);
  overflow-x: auto;
}

.hq-progress-bar {
  height: 3px;
  background: var(--color-base-300);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.hq-progress-bar__fill {
  height: 100%;
  background: var(--color-success);
}

.hq-progress-bar__fill.is-indefinite {
  animation: progress-indefinite 2s infinite linear;
  width: 30% !important;
}

@keyframes progress-indefinite {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.hq-card__actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--card-pad);
  padding-top: 0;
}

.hq-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--card-pad-y-sm) var(--card-pad);
  border-top: 1px solid var(--color-base-300);
  margin-top: auto;
}

.hq-card__meta {
  background: none;
  padding: 0;
  color: var(--color-base-content-muted);
}

.hq-tasks {
  background: var(--color-base-200);
  padding: var(--card-pad);
  margin: 0 0 var(--spacing-md);
}

.hq-tasks h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-base-content-muted);
  font-weight: 700;
}

.hq-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.hq-task-item {
  display: flex;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--color-base-content-light);
}

.hq-task-item.clickable {
  cursor: pointer;
  padding: var(--spacing-xs);
  margin: calc(-1 * var(--spacing-xs));
  transition: background var(--transition-base);
}

.hq-task-item.clickable:hover {
  background: var(--color-base-300);
}

.hq-task-item.is-completed {
  color: var(--color-base-content-muted);
  text-decoration: line-through;
}

.hq-task-icon {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.hq-empty-state {
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px dashed var(--color-base-300);
  color: var(--color-base-content-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

/* Tasks Page */
.tasks-page {
  padding: 2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  min-height: 100vh;
}

.tasks-page.is-iframe {
  padding: 1rem;
  min-height: auto;
}

.tasks-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  font-size: var(--font-sm);
}

.tasks-section {
  margin-bottom: var(--spacing-lg);
}

.tasks-section__title {
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border-left: 4px solid var(--color-base-300);
  padding-left: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.tasks-card {
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-base-200);
}

.tasks-card.is-overdue {
  border-left: 4px solid var(--color-error);
}

.tasks-card.is-done {
  opacity: 0.5;
}

.tasks-card.is-skipped {
  opacity: 0.5;
}

.tasks-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.tasks-card__category {
  font-family: var(--font-tactical);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--color-base-300);
  color: var(--color-secondary);
}

.tasks-card__category.is-maintenance {
  color: var(--color-info);
  border-color: var(--color-info);
}

.tasks-card__category.is-plant_care {
  color: var(--color-success);
  border-color: var(--color-success);
}

.tasks-card__title {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0;
}

.tasks-card__description {
  font-size: var(--font-sm);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-xs) 0;
}

.tasks-card__meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-xs);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

.tasks-card__actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.tasks-empty {
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px dashed var(--color-base-300);
  color: var(--color-secondary);
  font-size: var(--font-sm);
}

@media (max-width: 768px) {
  .tasks-page {
    padding: 1rem;
  }
}

/* Mission Details View */
.mission-page {
  padding: 2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  min-height: 100vh;
  font-family: var(--font-mono, var(--font-mono));
}

.mission-page.is-iframe {
  padding: 1rem;
  min-height: auto;
}

.mission-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-base-200);
  padding-bottom: 1rem;
}

.mission-header__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mission-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.05rem;
}

.mission-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  background: var(--color-base-content);
  color: var(--color-base-100);
  font-weight: bold;
}

.mission-badge.priority-high { background: var(--color-error); }
.mission-badge.priority-critical { background: var(--color-base-content); color: var(--color-error); }

.mission-header__status {
  color: var(--color-base-content-muted);
  font-size: 0.9rem;
  font-weight: bold;
}

.mission-section {
  margin-bottom: 3rem;
}

.mission-section__title {
  font-size: 0.8rem;
  color: var(--color-base-content-muted);
  letter-spacing: 0.2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-base-200);
  padding-bottom: 0.5rem;
}

.mission-intel {
  background: var(--color-base-200);
  padding: 1.5rem;
  border-left: 4px solid var(--color-base-300);
  line-height: 1.6;
}

.mission-intel__meta {
  margin-top: 1rem;
  font-size: 0.7rem;
  color: var(--color-base-content-muted);
}

.logistics-checklist {
  background: var(--color-background-darker, #000);
  border: 1px solid var(--color-primary);
  padding: 1.5rem;
  margin-top: 1rem;
  text-transform: uppercase;
  font-family: 'Courier New', Courier, monospace;
}

.logistics-checklist__intro {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.logistics-checklist__list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.logistics-checklist__list li {
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
}

.logistics-checklist__icon {
  font-style: normal;
  opacity: 0.8;
}

.mission-trail {
  display: flex;
  flex-direction: column;
  position: relative;
}

.mission-trail::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-base-200);
}

.trail-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.trail-item__marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-base-100);
  border: 2px solid var(--color-base-200);
  z-index: 1;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.trail-item.is-completed .trail-item__marker {
  background: var(--color-success);
  border-color: var(--color-success);
}

.trail-item.is-active .trail-item__marker {
  background: var(--color-base-content);
  border-color: var(--color-base-content);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
}

.trail-item__content {
  flex: 1;
}

.trail-item__header {
  margin-bottom: 1rem;
}

.trail-item__type {
  font-size: 0.6rem;
  color: var(--color-base-content-muted);
  font-weight: bold;
  display: block;
  margin-bottom: 0.2rem;
}

.trail-item h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-base-content);
}

.trail-item__actions {
  margin-top: 1rem;
}

.trail-item__result {
  margin-top: 1rem;
  background: var(--color-base-200);
  padding: 1rem;
}

.trail-item__comment {
  margin-top: 1rem;
  font-size: 0.85rem;
  background: var(--color-base-content);
  color: var(--color-base-100);
  padding: 1rem;
  position: relative;
}

.trail-item__comment::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-base-content);
}

.comment-label {
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--color-base-content-muted);
  margin-right: 0.5rem;
}

.result-card {
  font-size: 0.9rem;
}

.result-card__meta {
  font-size: 0.7rem;
  color: var(--color-base-content-muted);
  margin-bottom: 0.5rem;
}

.result-card__values {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.value-tag {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
}
 /* ============================================   Upload Page Component
   ============================================ */
.upload-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Warning alert */
.upload-page__warning {
  background-color: var(--color-warning);
  border: 1px solid var(--color-warning);
  padding: var(--spacing-md);
}

.upload-page__warning-content {
  display: flex;
  gap: var(--spacing-md);
}

.upload-page__warning-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-warning);
}

.upload-page__warning-icon svg {
  width: 100%;
  height: 100%;
}

.upload-page__warning-body {
  flex: 1;
}

.upload-page__warning-title {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-warning);
  margin-bottom: var(--spacing-sm);
}

.upload-page__warning-text {
  font-size: var(--font-sm);
  color: var(--color-warning);
  margin-bottom: var(--spacing-md);
}

.upload-page__warning-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.upload-page__warning-button {
  background-color: var(--color-warning);
  color: var(--color-warning);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  border: 1px solid var(--color-warning);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.upload-page__warning-button:hover {
  background-color: var(--color-warning);
}

/* Section */
.upload-page__section {
  background-color: var(--color-base-100);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
}

.upload-page__section-title {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--color-base-content);
  margin-bottom: var(--spacing-md);
}

/* Dropzone */
.upload-page__dropzone {
  border: 2px dashed var(--color-base-content-light);
  padding: var(--spacing-md);
  text-align: center;
  min-height: 100px;
  transition: border-color var(--transition-base);
}

.upload-page__dropzone:hover {
  border-color: var(--color-base-content-muted);
}

.upload-page__dropzone-label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.upload-page__dropzone-icon {
  font-size: var(--font-4xl);
  margin-bottom: var(--spacing-sm);
}

.upload-page__dropzone-text {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-base-content);
  display: block;
}

.upload-page__dropzone-hint {
  margin-top: var(--spacing-xs);
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.upload-page__dropzone-input {
  display: none;
}

/* Progress */
.upload-page__progress {
  margin-top: var(--spacing-md);
  background-color: var(--color-base-100);
  padding: var(--spacing-md);
}

.upload-page__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.upload-page__progress-filename {
  font-size: var(--font-sm);
  color: var(--color-base-content-light);
}

.upload-page__progress-cancel {
  background: none;
  border: none;
  color: var(--red);
  font-size: var(--font-sm);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: color var(--transition-base);
}

.upload-page__progress-cancel:hover {
  color: var(--red);
  background-color: var(--red);
}

.upload-page__progress-bar-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.upload-page__progress-bar {
  flex: 1;
  width: 100%;
  background-color: var(--color-base-200);
  height: 0.5rem;
  overflow: hidden;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

.upload-page__progress-bar-fill {
  background-color: var(--color-secondary);
  height: 100%;
  transition: width var(--transition-base);
}

.upload-page__progress-bar::-webkit-progress-bar {
  background-color: var(--color-base-200);
}

.upload-page__progress-bar::-webkit-progress-value {
  background-color: var(--color-secondary);
}

.upload-page__progress-bar::-moz-progress-bar {
  background-color: var(--color-secondary);
}

.upload-page__progress-percent {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
  min-width: 3rem;
  text-align: right;
}

.upload-page__progress-error {
  color: var(--red);
  font-size: var(--font-sm);
  margin-top: var(--spacing-xs);
}

/* Gallery */
.upload-page__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 640px) {
  .upload-page__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .upload-page__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.upload-page__gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.upload-page__gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-page__gallery-filename {
  margin-top: var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--color-base-content-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-page__gallery-actions {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.upload-page__gallery-success {
  font-size: var(--font-sm);
  color: var(--color-success);
}

.upload-page__gallery-save-button {
  margin-top: var(--spacing-sm);
}

/* ============================================
   Area Images Page
   ============================================ */
.area-images-page {
  padding: var(--spacing-md);
}

.area-images-page .header {
  margin-bottom: var(--spacing-lg);
}

.area-images__layout {
  gap: var(--spacing-lg);
}

.area-images__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.area-images__camera {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.area-images__upload {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.area-images__dropzone {
  cursor: pointer;
}

.area-images__dropzone-icon {
  color: var(--color-base-content-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.area-images__dropzone-icon svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.5;
}

.area-images__progress {
  border: 1px solid var(--color-base-200);
}

.area-images__pending {
  border-top: 1px solid var(--color-base-300);
  padding-top: var(--spacing-md);
}

.area-images__pending-title {
  font-size: var(--font-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--color-base-content);
}

.area-images__pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.area-images__pending-card {
  background-color: var(--color-base-200);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.area-images__pending-preview {
  width: 100%;
  height: 10rem;
  background-color: var(--color-base-300);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
}

.area-images__pending-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.area-images__pending-field {
  margin-bottom: var(--spacing-sm);
}

.area-images__pending-label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.area-images__pending-label-text {
  font-weight: 600;
  color: var(--color-base-content-light);
}

.area-images__pending-input {
  width: 100%;
}

.area-images__pending-filename {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-images__pending-save {
  width: 100%;
}

.area-images__section-header {
  margin-bottom: var(--spacing-lg);
}

.area-images__month-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-base-300);
}

.area-images__empty {
  color: var(--color-base-content-light);
}

.area-images__image-meta {
  font-size: var(--font-sm);
  color: var(--color-base-content-light);
}

.area-images__delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.area-images__delete-icon {
  width: 0.9rem;
  height: 0.9rem;
  position: relative;
  display: inline-block;
}

.area-images__delete-icon::before,
.area-images__delete-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: currentColor;
}

.area-images__delete-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.area-images__delete-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* ============================================
   Photo Carousel Component
   ============================================ */
.carousel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.carousel__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.carousel__container {
  position: relative;
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.carousel__close-button {
  position: absolute;
  top: -48px;
  right: 0;
  z-index: 2010;
  width: 40px;
  height: 40px;
  background-color: white;
  color: black;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  font-size: var(--font-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-base);
}

.carousel__close-button:hover {
  opacity: 0.8;
}

.carousel__counter {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 2010;
  padding: 4px 12px;
  background-color: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.carousel__counter-text {
  font-size: var(--font-sm);
  font-weight: bold;
  color: black;
}

.carousel__nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2010;
  width: 56px;
  height: 56px;
  background-color: white;
  color: black;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  font-size: var(--font-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-base);
}

.carousel__nav-button:hover {
  opacity: 0.8;
}

.carousel__nav-button--prev {
  left: 8px;
}

.carousel__nav-button--next {
  right: 8px;
}
 /* ============================================   Section Header (Added for button alignment)
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.section-header h2,
.section-header h3 {
  margin-bottom: 0 !important; /* Override default margin */
}

/* ============================================
   HTML Plant Markers (Restored & Sharpened)
   ============================================ */
.markers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.marker-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  transition: transform var(--transition-fast), z-index 0s;
  z-index: 1;
}

.marker-item:hover,
.marker-item.highlighted {
  z-index: 100;
  transform: translate(-50%, -50%) scale(1.05);
}

.marker-dot {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.marker-item.highlighted .marker-dot {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.marker-label {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.marker-item:hover .marker-label,
.marker-item.highlighted .marker-label {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.85);
}

.marker-name {
  font-weight: 600;
}

.marker-time {
  font-size: var(--font-2xs);
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   Plant Index Styles
   ============================================ */
.plant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--spacing-md);
}

.plant-card {
  height: 100%;
}

.plant-card__image-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--color-base-200);
  border-bottom: 1px solid var(--color-secondary);
}

.plant-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.plant-card:hover .plant-card__image {
  transform: scale(1.05);
}

.plant-card__content {
  padding: var(--spacing-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-card__title {
  font-size: var(--font-base);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-base-content);
  margin-bottom: 0;
}

.plant-card__variety {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.plant-card__footer {
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

/* Filter Panel */
.filter-panel {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.filter-group {
  margin-bottom: var(--spacing-md);
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group__title {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-base-content-light);
  margin-bottom: var(--spacing-sm);
}

.filter-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

@media (min-width: 640px) {
  .filter-checkbox-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .filter-checkbox-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.filter-group__controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-group__controls > * {
  flex: 1;
}

@media (min-width: 768px) {
  .filter-group__controls {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-date-input label {
  margin-bottom: 4px;
}

.filter-date-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (min-width: 640px) {
  .filter-date-row {
    flex-direction: row;
    align-items: center;
  }
  
  .filter-date-row > * {
    flex: 1;
  }
}


.library-hub {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Genetic/Library Grid */
.genetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* Breeders */
.breeder-card {
  padding: 0;
}

.breeder-card__link {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.breeder-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.breeder-card__name {
  font-size: var(--font-md);
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.breeder-card__verified {
  color: var(--color-primary);
  font-size: var(--font-sm);
}

.breeder-card__country {
  font-size: 10px;
  background: var(--color-base-300);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-base-content);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.breeder-card__description {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
  flex: 1;
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.breeder-card__meta {
  font-size: 10px;
  color: var(--color-base-content-light);
  display: flex;
  gap: var(--spacing-sm);
}

/* Bestiary / Threats */
.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.threat-card {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border-left: 4px solid var(--red);
}

.threat-card.status-disease {
  border-left-color: var(--orange);
}

.threat-card.status-deficiency {
  border-left-color: var(--blue);
}

.threat-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.threat-card__title {
  font-family: var(--font-tactical);
  font-size: var(--font-md);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.threat-card__title small {
  font-size: 10px;
  font-style: italic;
  color: var(--color-base-content-muted);
  font-family: var(--font-base);
}

.threat-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.threat-info {
  font-size: var(--font-xs);
  line-height: 1.4;
}

.threat-info strong {
  text-transform: uppercase;
  font-size: 9px;
  color: var(--color-base-content-light);
  display: block;
  margin-bottom: 2px;
}

.threat-card__history {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--color-base-300);
  font-size: 10px;
  color: var(--color-base-content-muted);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md) 0;
  border-top: 1px dashed var(--color-base-300);
}

.pagination__info {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}

.dossier-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-base-200);
  padding-bottom: var(--spacing-sm);
}

.dossier-card__name {
  font-family: var(--font-tactical);
  font-size: var(--font-md);
  color: var(--color-base-content);
  margin: 0;
}

.dossier-card__scientific {
  font-size: 10px;
  font-style: italic;
  color: var(--color-base-content-muted);
  display: block;
}

.dossier-label {
  font-family: var(--font-tactical);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--color-base-content-light);
  margin-bottom: 4px;
}

.dossier-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dossier-card__body p {
  font-size: var(--font-xs);
  line-height: 1.4;
  margin: 0;
}

.dossier-card__tactics {
  background: var(--color-base-200);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-primary);
}

.dossier-card__footer {
  border-top: 1px solid var(--color-base-200);
  padding-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.history-badge {
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 9px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.history-meta {
  font-size: 10px;
  color: var(--color-base-content-muted);
  margin-left: 8px;
}

.dossier-card__status--locked {
  font-size: 10px;
  color: var(--color-base-content-muted);
  font-style: italic;
  text-align: center;
  opacity: 0.6;
}


/* ============================================
   Catalog Ingestion (Admin)
   ============================================ */
.catalog-ingestion__form-card {
  max-width: 600px;
  margin-top: var(--spacing-lg);
}

.admin-form__input-row {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.admin-form__input {
  flex: 1;
}

.catalog-ingestion__logs {
  margin-top: var(--spacing-xl);
}

.catalog-ingestion__logs-title {
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  color: var(--color-base-content-light);
  margin-bottom: var(--spacing-sm);
}

.catalog-ingestion__logs-container {
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  max-height: 300px;
  overflow-y: auto;
}

.catalog-ingestion__log-entry {
  padding: 4px 0;
  border-bottom: 1px solid var(--color-base-300);
}

.catalog-ingestion__log-entry:last-child {
  border-bottom: none;
}


/* ============================================
   Advisor HUD (Svelte)
   ============================================ */
.status-badge.status-failed {
  background: var(--red);
  color: var(--red-content);
}

.retry-item-btn {
  background: var(--color-accent);
  color: var(--color-accent-content);
  border: none;
  font-size: var(--font-2xs);
  padding: 2px 6px;
  margin-left: var(--spacing-xs);
  cursor: pointer;
  font-family: var(--font-tactical);
  text-transform: uppercase;
}

.retry-item-btn:hover {
  filter: brightness(1.2);
}

.retry-item-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.discard-item-btn {
  background: transparent;
  color: var(--color-base-content-muted);
  border: none;
  font-size: var(--font-2xs);
  padding: 2px 4px;
  margin-left: var(--spacing-xs);
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.discard-item-btn:hover {
  opacity: 1;
  color: var(--red);
  background: rgba(255, 0, 0, 0.1);
}

.error-message {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid var(--red);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.error-message p {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--red);
  color: var(--color-base-100);
  font-size: var(--font-sm);
}

.error-debug {
  font-family: monospace;
  font-size: var(--font-xs);
  background: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-xs);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-base-content-muted);
}

.advisor-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through unless on interactive elements */
  z-index: 20;
  overflow: hidden;
}

.panel-toggle-btn {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
  font-weight: 600;
  font-family: var(--font-tactical);
  box-shadow: var(--shadow-sm);
  z-index: 30;
  transition: all var(--transition-base);
  color: var(--color-base-content);
  font-size: var(--font-xl);
}

.panel-toggle-btn:hover {
  background: var(--color-base-200);
  border-color: var(--color-primary);
}

.panel-toggle-btn.open {
  right: 370px; /* 350px panel + 20px gap */
  background: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
}

.advisor-icon {
  width: 20px;
  height: 20px;
  display: block;
  filter: grayscale(0.2); /* Subtle thematic blend */
}

.advisor-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background: rgba(244, 241, 234, 0.98); /* var(--color-base-100) with opacity */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid var(--color-base-300);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: var(--shadow-xl);
}

.advisor-panel__header {
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-base-200);
}

.advisor-panel__header h3 {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-base-content);
}

.advisor-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0; /* flex scroll fix */
}

.advisor-trigger-mini {
  background: var(--color-base-200);
  padding: var(--spacing-md);
  border-radius: 0;
  border: 1px solid var(--color-base-300);
}

.trigger-label {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.trigger-row {
  display: flex;
  gap: var(--spacing-sm);
}

.mini-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--color-base-300);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-radius: 0;
  font-size: var(--font-sm);
  font-family: var(--font-sans);
}

.mini-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mini-btn {
  padding: 6px 12px;
  background: var(--color-secondary);
  color: white;
  border: none;
  border-radius: 0;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: var(--font-tactical);
  flex: 1;
}

.mini-btn--primary {
  background: var(--color-primary);
}

.mini-btn--secondary {
  background: var(--color-secondary);
}

.mini-btn:hover {
  filter: brightness(1.2);
}

.mini-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

.mini-btn-group {
  display: flex;
  gap: 2px;
  flex: 1;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.history-item {
  text-align: left;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-sm);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-base);
}

.history-item:hover {
  border-color: var(--color-primary);
  background: var(--color-base-200);
}

.history-item.active {
  border-color: var(--color-primary);
  background: var(--color-base-200);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.history-summary {
  font-size: var(--font-sm);
  font-weight: 500;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-base-content);
}

.history-meta {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
}

.analysis-details {
  padding: var(--spacing-md);
  background: var(--color-base-100);
  height: 40%; /* Fixed height for details */
  display: flex;
  flex-direction: column;
}

.analysis-details__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.analysis-details h4 {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-base-content);
  text-transform: uppercase;
  font-family: var(--font-tactical);
}

.close-details-btn {
  background: none;
  border: none;
  color: var(--color-base-content-light);
  cursor: pointer;
  padding: 4px;
  font-size: var(--font-lg);
  line-height: 1;
  transition: color var(--transition-base);
}

.close-details-btn:hover {
  color: var(--color-primary);
}

.details-scroll {
  flex: 1;
  overflow-y: auto;
}

.detail-summary {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-base-content);
  margin-bottom: var(--spacing-md);
}

.suggestion-card {
  background: var(--color-base-200);
  border-left: 3px solid var(--color-base-300);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-radius: 0;
}

.suggestion-card p {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--color-base-content);
}

.suggestion-card.urgency-high { border-left-color: var(--red); }
.suggestion-card.urgency-medium { border-left-color: var(--color-warning); }
.suggestion-card.urgency-low { border-left-color: var(--color-success); }

.sug-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sug-kind {
  font-size: var(--font-2xs);
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.type-badge {
  background: var(--color-base-300);
  color: var(--color-base-content);
  padding: 1px 4px;
  border-radius: 0;
  font-size: var(--font-2xs);
  font-weight: 600;
}

/* Overlay Box Styles */
.advisor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.advisor-box {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: help;
}

.advisor-box.active {
  border-color: var(--color-success);
  background-color: rgba(45, 90, 39, 0.1); /* success with opacity */
  z-index: 10;
}

.advisor-label {
  position: absolute;
  top: -24px;
  left: -2px;
  background: var(--color-base-content); /* Dark background */
  color: var(--color-base-100);
  padding: 2px 6px;
  font-size: var(--font-2xs);
  border-radius: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.crop-box {
  position: absolute;
  border: 2px dashed var(--color-warning);
  box-shadow: 0 0 10px rgba(212, 172, 13, 0.3);
  pointer-events: auto;
}

.crop-label {
  position: absolute;
  top: -24px;
  right: 0;
  background: var(--color-warning);
  color: white;
  padding: 2px 6px;
  font-size: var(--font-2xs);
  border-radius: 0;
  font-weight: bold;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.empty-state, .loading-state {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-base-content-light);
  font-size: var(--font-sm);
  font-style: italic;
}


.advisor-sublist {
  margin-top: var(--spacing-sm);
  font-size: var(--font-xs);
}

.advisor-sublist strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-base-content-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.advisor-sublist ul {
  list-style: none;
  padding: 0;
}

.advisor-sublist li {
  margin-bottom: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-left: 2px solid var(--color-base-300);
}

.advisor-sublist li.urgency-high { border-left-color: var(--red); }
.advisor-sublist li.urgency-medium { border-left-color: var(--color-warning); }
.advisor-sublist li.urgency-low { border-left-color: var(--color-success); }

.badge-urgency {
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .advisor-panel {
    width: 85%;
    max-width: 20rem;
  }
}

@keyframes grid-pulse {
  0% { fill-opacity: 0.25; }
  50% { fill-opacity: 0; }
  100% { fill-opacity: 0.25; }
}

.pulsating-sector {
  fill: var(--color-highlight);
  fill-opacity: 0.3;
  pointer-events: none;
  animation: grid-pulse 2s infinite ease-in-out;
}
/* Component Styles Extracted from Svelte */

/* Window Component */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  border-radius: 0; /* NO ROUNDED CORNERS */
  box-shadow: var(--shadow-tactical);
  overflow: hidden;
  z-index: 1000;
}

.window--active {
  border-color: var(--color-primary);
}

.window.marker-modal {
  background-color: var(--color-base-100);
  border-color: var(--color-base-content-light);
  color: white;
}

.window.plant-panel {
  background-color: var(--color-base-100);
  border-color: var(--color-base-content-light);
  color: white;
}

.window-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-content-light);
  padding: var(--spacing-md);
  z-index: 3010;
  min-width: 320px;
  max-width: 480px;
  box-shadow: var(--shadow-tactical);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.modal__title {
  font-size: var(--font-md);
  font-weight: 600;
  color: white;
}

.modal__close {
  background: none;
  border: none;
  color: white;
  font-size: var(--font-lg);
  cursor: pointer;
}

.modal__body {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.device-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.device-picker__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: white;
  cursor: pointer;
}

.device-picker__item:hover {
  border-color: rgba(148, 163, 184, 0.6);
}

/* MarkerModal specific additions not in garden.css */
.marker-modal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.marker-modal__body--iframe {
  height: 100%;
  overflow: hidden !important;
  padding: 0 !important;
}

.marker-modal--iframe {
  padding: 0;
  gap: 0;
}

/* MarkerModal Iframe Content */
.marker-modal__iframe-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100% !important;
  background-color: var(--color-base-100);
  width: 100%;
}

.marker-modal__iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.marker-modal__iframe.is-loading {
  opacity: 0;
  position: absolute;
}

/* Page Loading Overlay */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base-100);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.page-loading-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

.page-loading-overlay__spinner {
  width: 32px;
  height: 32px;
  color: var(--color-base-content-muted, var(--color-gray-400));
  animation: preloader-spin 0.8s linear infinite;
  z-index: 1;
}

.page-loading-overlay__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
  opacity: 0.3;
}

/* Iframe Preloader */
.iframe-preloader {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--color-base-100);
}

.iframe-preloader__spinner {
  width: 32px;
  height: 32px;
  color: var(--color-base-content-muted, var(--color-gray-400));
  animation: preloader-spin 0.8s linear infinite;
  z-index: 1;
}

.iframe-preloader__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
  opacity: 0.3;
}

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}

/* Canvas page preloader */
.canvas-preloader {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base-100);
}

/* Ensure the modal content fills the window-content */
.marker-modal .window-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.marker-modal--iframe .window-content {
  height: 100%;
  flex: 1;
  overflow: hidden;
}

/* Fix page-container height when it contains the canvas/modal */
.page-container:has(.marker-canvas) {
  height: calc(100vh - 0px); /* Adjust if there's a header outside */
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden;
}

/* Camera modal */
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-modal__content {
  background-color: var(--color-camera-accent);
  border: 1px solid var(--color-camera-accent-border);
  padding: 1rem;
  max-width: 80rem;
  width: 95%;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  height: 95%;
  overflow-y: auto;
}

.camera-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.camera-modal__title {
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
}

.camera-modal__controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.camera-modal__companion {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.camera-modal__companion select {
  background: var(--color-camera-bg);
  color: white;
  border: 1px solid var(--color-camera-border);
  padding: 0.2rem 0.4rem;
}

.camera-modal__viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
  border: none;
}

.camera-modal__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.3s ease;
}

.camera-modal__viewport.good::after { box-shadow: inset 0 0 0 4px var(--color-success); }
.camera-modal__viewport.fair::after { box-shadow: inset 0 0 0 4px var(--color-warning); }
.camera-modal__viewport.bad::after { box-shadow: inset 0 0 0 4px var(--color-error); }

.camera-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.camera-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  pointer-events: none;
  z-index: 10;
}

.camera-modal__overlay.mode-difference {
  mix-blend-mode: difference;
  opacity: 1;
}

.camera-modal__overlay.mode-normal {
  opacity: 0.5;
}

.camera-modal__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.camera-modal__choice {
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  max-width: 320px;
}

.camera-modal__choice-select {
  width: 100%;
  background: var(--color-camera-bg);
  color: white;
  border: 1px solid var(--color-camera-border);
  padding: 0.35rem 0.5rem;
}

.camera-modal__choice-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.camera-modal__mobile-hint {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  z-index: 20;
  pointer-events: none;
  text-align: center;
  width: fit-content;
  max-width: 90%;
}

.camera-modal__floating-close,
.camera-modal__floating-blend {
  position: absolute;
  top: 1rem;
  z-index: 50;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.camera-modal__floating-close { right: 1rem; }
.camera-modal__floating-blend { left: 1rem; }
.camera-modal__floating-blend.active { background: rgba(255, 69, 0, 0.7); }

.camera-modal__guidance {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.guidance-arrow {
  width: 0;
  height: 0;
  border-style: solid;
}

.guidance-text {
  color: white;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  font-weight: bold;
  margin-top: 8px;
  font-size: 1.2rem;
  white-space: nowrap;
}

.camera-modal__guidance.right .guidance-arrow {
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent var(--color-warning);
  margin-left: 20px;
  animation: pulse-right 1s infinite;
}

.camera-modal__guidance.left .guidance-arrow {
  border-width: 20px 30px 20px 0;
  border-color: transparent var(--color-warning) transparent transparent;
  margin-right: 20px;
  animation: pulse-left 1s infinite;
}

.camera-modal__guidance.up .guidance-arrow {
  border-width: 0 20px 30px 20px;
  border-color: transparent transparent var(--color-warning) transparent;
  margin-bottom: 20px;
  animation: pulse-up 1s infinite;
}

.camera-modal__guidance.down .guidance-arrow {
  border-width: 30px 20px 0 20px;
  border-color: var(--color-warning) transparent transparent transparent;
  margin-top: 20px;
  animation: pulse-down 1s infinite;
}

@keyframes pulse-right { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } }
@keyframes pulse-left { 0% { transform: translateX(0); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0); } }
@keyframes pulse-up { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes pulse-down { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } }

.camera-modal__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.camera-modal__canvas {
  display: none;
}

@media (max-width: 768px) {
  .camera-modal__content {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: black;
  }

  .camera-modal__viewport {
    height: 100%;
    min-height: 100%;
    border-radius: 0;
  }

  .camera-modal__viewport::after {
    border-radius: 0;
  }

.camera-modal__viewport.good::after { box-shadow: inset 0 0 0 8px var(--color-success); }
.camera-modal__viewport.fair::after { box-shadow: inset 0 0 0 8px var(--color-warning); }
.camera-modal__viewport.bad::after { box-shadow: inset 0 0 0 8px var(--color-error); }
}

.area-camera-control {
  margin-bottom: 1rem;
  display: inline-block;
}

.area-camera-control .text-error {
  color: var(--red);
}

.area-camera-control .text-sm {
  font-size: var(--font-sm);
}

.area-camera-control .mt-2 {
  margin-top: 0.5rem;
}

.area-camera-control .button-secondary {
  min-width: 220px;
}

/* Area Switcher (Mission Control) */
/* Area Switcher (Mission Control) */
.area-switcher {
  position: fixed;
  inset: 0;
  background: var(--color-base-100);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.area-switcher__modal {
  width: 100%;
  max-width: 80rem;
  padding: var(--spacing-xl);
}

.area-switcher__container {
  position: relative;
  min-height: 400px;
}

.area-switcher__header {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-base-content);
  margin-bottom: var(--spacing-xl);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
}

.area-switcher__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .area-switcher__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .area-switcher__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.area-card {
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.area-card.is-selected {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-tactical);
  z-index: 10;
}

.area-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.area-card:hover .area-card__image,
.area-card.is-selected .area-card__image {
  opacity: 0.9;
  filter: grayscale(0%);
}

.area-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-base-100), transparent);
  opacity: 0.8;
}

.area-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  z-index: 2;
}

.area-card__title {
  color: var(--color-base-content-light);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  transition: color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.area-card:hover .area-card__title,
.area-card.is-selected .area-card__title {
  color: var(--color-base-content);
}

.area-card__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  z-index: 5;
  opacity: 0.4;
}

.area-card--new {
  background: var(--color-base-200);
}

.area-card__plus {
  font-size: 4rem;
  line-height: 1;
  color: var(--color-base-300);
  font-weight: 200;
  margin-bottom: 2rem;
}

.area-card--new:hover .area-card__plus,
.area-card--new.is-selected .area-card__plus {
  color: var(--color-primary);
}

/* Form View */
.area-switcher__form-view {
  max-width: 32rem;
  margin: 0 auto;
  background: var(--color-base-100);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-tactical);
}

.area-switcher__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.area-switcher__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.area-switcher__form .label {
  color: var(--color-base-content-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.area-switcher__form .input, 
.area-switcher__form .textarea {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  font-family: var(--font-mono);
  padding: 0.75rem;
  border-radius: 0;
}

.area-switcher__form .input:focus, 
.area-switcher__form .textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}


/* Gallery Filters */
.gallery__filters-row { background-color: var(--color-base-200); padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-base-300); }
.gallery__filter-group { display: flex; align-items: center; }
.button-group { display: inline-flex; border: 1px solid var(--color-base-300); overflow: hidden; }
.button-group .button { border-radius: 0; border: none; border-right: 1px solid var(--color-base-300); }
.gallery__image-meta { display: flex; flex-direction: column; gap: var(--spacing-1); }
.gallery__image-type { font-weight: bold; }
.gallery__image-date { opacity: 0.8; font-size: 0.8em; }

.image-preview-box__delete {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-preview-box:hover .image-preview-box__delete {
  opacity: 1;
}

/* Full-width layout when in iframe (no sidebar) */
.gallery-page.is-iframe .content-grid {
  grid-template-columns: 1fr;
}

.gallery-page.is-iframe {
  overflow: visible;
}

.gallery-page.is-iframe .content-grid__main {
  grid-column: 1 / -1;
}


/* ==========================================================================
   Config Page Styles
   ========================================================================== */

.config-header {
  margin-bottom: var(--spacing-8);
}

.config-header__title {
  margin-bottom: var(--spacing-2);
}

.config-header__subtitle {
  color: var(--color-base-content-light);
  font-size: var(--font-lg);
}

.config-section {
  background: var(--color-base-100);
  border: 4px double var(--color-base-300);
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
}

.config-section--danger {
  border-color: var(--color-error);
}

.config-section__header {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
  margin-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-base-200);
  padding-bottom: var(--spacing-4);
}

.config-section__icon {
  font-size: var(--font-2xl);
}

.config-section__title-group {
  flex: 1;
}

.config-section__title {
  margin: 0;
  font-size: var(--font-xl);
}

.config-section__subtitle {
  margin: 4px 0 0 0;
  color: var(--color-base-content-light);
  font-size: var(--font-sm);
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-4);
}

.config-grid__span-2 {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .config-grid__span-2 {
    grid-column: span 1;
  }
}

.config-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.config-info-box {
  background: var(--color-base-200);
  padding: var(--spacing-2);
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  border-left: 3px solid var(--color-base-300);
}

.config-info-box--shifted {
  margin-left: var(--spacing-8);
}

.config-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.config-source-details {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px dashed var(--color-base-300);
}

.config-alert {
  border-radius: 0;
  margin-bottom: var(--spacing-4);
}

.config-alert--info {
  background: rgba(41, 128, 185, 0.05);
  border: 1px solid var(--color-info);
  padding: var(--spacing-4);
}

.config-alert--warning {
  background: rgba(212, 172, 13, 0.05);
  border: 1px solid var(--color-warning);
  padding: var(--spacing-4);
}

.config-alert--mb-lg {
  margin-bottom: var(--spacing-6);
}

.config-blink-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.config-blink-actions {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.config-blink-connecting {
  border-left: 4px solid var(--color-primary);
}

.config-verification-box {
  margin-bottom: var(--spacing-6);
  border: 1px solid var(--color-success);
  padding: var(--spacing-2);
  background: rgba(0, 255, 0, 0.05);
}

.config-verification-title {
  font-size: var(--font-2xs);
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--color-success);
  text-transform: uppercase;
}

.config-verification-img {
  width: 100%;
  border: 1px solid var(--color-base-300);
}

.config-verification-caption {
  margin-top: 4px;
  color: var(--color-base-content-muted);
  font-size: var(--font-xs);
}

.config-api-endpoint {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-2);
  width: 100%;
}

.config-api-token-group {
  display: flex;
  gap: var(--spacing-2);
}

.config-api-token-input {
  flex: 1;
}

.config-section--2fa {
  border: 2px solid var(--color-warning);
  background: rgba(255, 191, 0, 0.05);
}

.config-2fa-form {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.config-2fa-input-wrapper {
  flex: 1;
  max-width: 200px;
}

.config-footer {
  margin-top: var(--spacing-8);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Area Listing Styles
   ========================================================================== */

.area-grid-card {
  height: 32rem;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 4px double var(--color-base-300);
  transition: all var(--transition-base);
}

.area-grid-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-tactical);
}

.area-grid-card__content {
  position: relative;
  z-index: 1;
  padding: var(--spacing-6);
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  height: 100%;
}

.area-grid-card__title {
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.area-grid-card__description {
  color: rgba(255,255,255,0.9);
  font-size: var(--font-lg);
  margin-top: var(--spacing-2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.area-grid-card__actions {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--spacing-4);
  position: absolute;
  bottom: var(--spacing-6);
  right: var(--spacing-6);
}

.area-grid-card__config-link {
  color: white;
  font-size: 2rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.area-grid-card__config-link:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ==========================================================================
   Gallery & Filter Styles
   ========================================================================== */

.gallery__filters-row {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
}

.gallery__filter-group {
  display: flex;
  align-items: center;
}

.gallery__filter-label {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  margin-right: var(--spacing-2);
}

.gallery__filter-group--plants {
  min-width: 250px;
  gap: var(--spacing-2);
}

.gallery__month-filter {
  display: flex;
  gap: var(--spacing-2);
  overflow-x: auto;
  padding-bottom: var(--spacing-2);
  margin-bottom: var(--spacing-4);
  scrollbar-width: thin;
  scrollbar-color: var(--color-base-300) transparent;
}

.gallery__month-filter::-webkit-scrollbar {
  height: 4px;
}

.gallery__month-filter::-webkit-scrollbar-thumb {
  background: var(--color-base-300);
}

.gallery__image-meta {
  display: flex;
  flex-direction: column;
}

.gallery__image-type {
  font-weight: var(--weight-semibold);
}

.gallery__image-date {
  font-size: var(--font-xs);
  color: var(--color-base-content-muted);
}


/* ==========================================================================
   Admin & Settings Layout Primitives
   ========================================================================== */

.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.button-row {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  flex-wrap: wrap;
}

.section-footer-note {
  padding: var(--spacing-12) 0;
  text-align: center;
}

.settings-grid-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.settings-section-title {
  font-family: var(--font-tactical);
  text-transform: uppercase;
  font-size: var(--font-xl);
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  color: var(--color-base-content);
}

.settings-column {
  flex: 1;
  min-width: 300px;
}

.form-field-flex {
  flex: 1;
  min-width: 250px;
}

/* ============================================
   Field Dossier
   ============================================ */
.dossier {
  padding: 2rem;
  background: var(--color-base-100);
  color: var(--color-brand);
  min-height: 100vh;
  font-family: var(--font-mono);
}

.dossier__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-base-300);
}

.dossier__title {
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
  margin: 0;
}

.dossier__search-form {
  flex-shrink: 0;
}

.dossier__search {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  width: 280px;
}

.dossier__search:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dossier__search::placeholder {
  color: var(--color-base-content-muted);
}

.dossier__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

/* Sidebar */
.dossier__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}

.dossier__sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dossier__sidebar-heading {
  font-size: 0.7rem;
  letter-spacing: 0.15rem;
  opacity: 0.6;
  margin: 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-base-300);
}

.dossier__dir-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dossier__dir-item {
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.dossier__dir-item:hover {
  background: var(--color-base-200);
}

.dossier__dir-item.is-active {
  color: var(--color-primary);
  background: var(--color-base-200);
}

.dossier__dir-icon {
  font-size: 0.7rem;
  opacity: 0.6;
  width: 1em;
}

.dossier__dir-count {
  opacity: 0.5;
  font-size: 0.7rem;
  margin-left: auto;
}

/* Tag chips */
.dossier__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dossier__tag {
  background: transparent;
  border: 1px solid var(--color-base-300);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dossier__tag:hover {
  border-color: var(--color-primary);
}

.dossier__tag.is-active {
  background: var(--color-base-200);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.dossier__tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  opacity: 0.6;
}

.dossier__tag-remove:hover {
  opacity: 1;
}

.dossier__clear-filters {
  background: transparent;
  border: 1px solid var(--color-base-300);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  letter-spacing: 0.05rem;
}

.dossier__clear-filters:hover {
  border-color: var(--color-primary);
}

/* File list */
.dossier__file-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dossier__file-item {
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.dossier__file-item:hover {
  background: var(--color-base-200);
}

.dossier__file-item.is-active {
  background: var(--color-base-200);
  color: var(--color-primary);
  border-left: 2px solid var(--color-primary);
}

.dossier__file-icon {
  font-size: 0.7rem;
  opacity: 0.5;
  width: 1em;
  flex-shrink: 0;
}

.dossier__file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dossier__file-dir {
  font-size: 0.6rem;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Content area */
.dossier__content {
  border: 2px solid var(--color-base-300);
  padding: 2rem;
  min-height: 60vh;
  overflow-y: auto;
  max-height: calc(100vh - 10rem);
}

.dossier__doc-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-base-300);
}

.dossier__doc-title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.dossier__doc-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Prose: rendered markdown/org */
.dossier__prose {
  line-height: 1.7;
  font-size: 0.85rem;
}

.dossier__prose h1 {
  font-size: 1.4rem;
  margin: 2rem 0 1rem 0;
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: 0.5rem;
}

.dossier__prose h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.75rem 0;
}

.dossier__prose h3 {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem 0;
}

.dossier__prose h4,
.dossier__prose h5 {
  font-size: 0.9rem;
  margin: 1rem 0 0.5rem 0;
}

.dossier__prose p {
  margin: 0.75rem 0;
}

.dossier__prose ul,
.dossier__prose ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.dossier__prose li {
  margin: 0.25rem 0;
}

.dossier__prose code {
  background: var(--color-base-200);
  color: var(--color-primary);
  padding: 2px 4px;
  font-size: 0.8rem;
}

.dossier__prose pre {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.dossier__prose pre code {
  background: none;
  color: var(--color-base-content);
  padding: 0;
}

.dossier__prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.8rem;
}

.dossier__prose th,
.dossier__prose td {
  border: 1px solid var(--color-base-300);
  padding: 0.5rem;
  text-align: left;
}

.dossier__prose th {
  background: var(--color-base-200);
  color: var(--color-primary);
  font-weight: bold;
}

.dossier__prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  margin: 1rem 0;
  opacity: 0.8;
}

.dossier__prose a {
  color: var(--color-primary);
  text-decoration: underline;
}

.dossier__prose img {
  max-width: 100%;
}

.dossier__prose input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Footer: tags + tag editor */
.dossier__doc-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-base-300);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dossier__doc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.dossier__tag-toggle {
  background: transparent;
  border: 1px dashed var(--color-base-300);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  cursor: pointer;
}

.dossier__tag-toggle:hover {
  border-color: var(--color-primary);
}

.dossier__tag-form {
  display: flex;
  gap: 0.5rem;
}

.dossier__tag-input {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  flex: 1;
}

.dossier__tag-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dossier__tag-submit {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  color: var(--color-primary);
  padding: 0.3rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
  letter-spacing: 0.05rem;
}

.dossier__tag-submit:hover {
  border-color: var(--color-primary);
}

/* Empty state */
.dossier__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  opacity: 0.5;
  text-align: center;
}

.dossier__empty-count {
  font-size: 0.75rem;
  margin-top: 1rem;
}

/* ============================================
   History View (Historical Overlay)
   ============================================ */
.history-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  overflow: hidden;
}

.history-view--iframe {
  height: 100vh;
}

.history-view__header {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 2px solid var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-base-200);
  flex-shrink: 0;
}

.history-view__header h1 {
  font-family: var(--font-tactical);
  font-size: var(--font-lg);
  margin: 0;
}

.history-view__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--spacing-md);
  overflow: hidden;
}

.history-view__viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--spacing-md);
  min-height: 0;
}

.history-view__media-container {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
  background-color: var(--color-camera-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 4px double var(--color-secondary);
}

.history-view__no-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-base-content-muted);
  font-family: var(--font-tactical);
  background: repeating-linear-gradient(
    45deg,
    var(--color-camera-bg),
    var(--color-camera-bg) 10px,
    var(--bg-overlay-darker) 10px,
    var(--bg-overlay-darker) 20px
  );
}

.no-media-placeholder {
  text-align: center;
  background: var(--bg-overlay-darker);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-base-300);
}

.no-media-placeholder__icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.history-view__time-active {
  margin-left: 8px;
  color: var(--color-accent-victorian);
  font-family: var(--font-mono);
}

.history-view__media-info {
  opacity: 0.6;
  font-size: 10px;
}

.history-view__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-view__event-overlays {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 300px;
  max-height: calc(100% - var(--spacing-xl));
  z-index: 10;
  pointer-events: auto;
}

.event-panel {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-primary);
  padding: var(--spacing-md);
  color: #fff;
}

.event-panel__title {
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: var(--spacing-xs);
  text-transform: uppercase;
}

.event-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-y: auto;
  max-height: 400px;
}

.event-panel__empty {
  font-size: var(--font-xs);
  font-style: italic;
  opacity: 0.7;
}

.event-item {
  padding: var(--spacing-xs);
  border-left: 2px solid var(--color-secondary);
  background-color: rgba(255, 255, 255, 0.05);
}

.event-item__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.event-item__type {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1px 4px;
}

.event-item__type--area_action { background-color: var(--color-secondary); }
.event-item__type--plant_action { background-color: var(--color-primary); }
.event-item__type--ai_advice { background-color: var(--color-accent-victorian); }

.event-item__time {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
}

.event-item__title {
  font-weight: bold;
  font-size: var(--font-xs);
}

.event-item__description {
  font-size: 11px;
  margin: 4px 0 0;
  opacity: 0.8;
  line-height: 1.3;
}

.history-view__controls {
  background-color: var(--color-base-200);
  padding: var(--spacing-md);
  border: 1px solid var(--color-base-300);
}

.history-view__metadata {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

.history-view__date {
  font-weight: bold;
  color: var(--color-primary);
}

/* ============================================
   History Timeline Component
   ============================================ */
.history-timeline {
  width: 100%;
}

.history-timeline__track {
  position: relative;
  height: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-base-300);
  cursor: pointer;
  margin-bottom: var(--spacing-xs);
}

.history-timeline__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-primary);
  opacity: 0.2;
}

.history-timeline__marker {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 16px;
  background: var(--color-base-content-muted);
  border: 1px solid var(--color-base-100);
  transform: translate(-50%, -50%);
  padding: 0;
  cursor: pointer;
  transition: height 0.2s, background 0.2s;
  z-index: 1;
}

.history-timeline__marker:hover {
  height: 20px;
  background: var(--color-secondary);
}

.history-timeline__marker.is-active {
  background: var(--color-primary);
  height: 24px;
  width: 4px;
  z-index: 2;
}

.history-timeline__labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-base-content-muted);
}

/* ==========================================================================
   Measurements Batch Form
   ========================================================================== */

.measurements-batch-form {
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  background: var(--color-base-100);
}

.measurements-batch-form__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.measurements-batch-form__row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  flex-wrap: wrap;
}

.measurements-batch-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.measurements-batch-form__field label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--color-base-content-light);
}

.measurements-batch-form__field select,
.measurements-batch-form__field input {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.measurements-batch-form__field select:focus,
.measurements-batch-form__field input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.measurements-batch-form__field--metric {
  flex: 2;
  min-width: 180px;
}

.measurements-batch-form__field--value {
  flex: 1;
  min-width: 100px;
}

.measurements-batch-form__field--time {
  flex: 2;
  min-width: 180px;
}

.measurements-batch-form__field--plant {
  flex: 1.5;
  min-width: 150px;
}

.measurements-batch-form__field--actions {
  flex: 0 0 auto;
}

.measurements-batch-form__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-base-300);
}

.measurements-batch-form__submit-group {
  display: flex;
  gap: var(--spacing-sm);
}

@media (max-width: 768px) {
  .measurements-batch-form__row {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-base-300);
  }

  .measurements-batch-form__field {
    min-width: 0;
  }

  .measurements-batch-form__field--actions {
    align-self: flex-end;
  }
}

/* ==========================================================================
   Support Hub / Feedback
   ========================================================================== */

.feedback-hub {
  max-width: 900px;
  margin: 0 auto;
}

.feedback-hub__tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-base-300);
  margin-bottom: var(--spacing-lg);
}

.feedback-hub__tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-tactical);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--color-base-content-light);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.feedback-hub__tab:hover {
  color: var(--color-primary);
}

.feedback-hub__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.feedback-hub__content {
  min-height: 400px;
}

.feedback-hub__guide {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.feedback-hub__form-panel {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.feedback-hub__history {
  padding: var(--spacing-lg);
}

.feedback-hub__empty {
  color: var(--color-base-content-light);
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.feedback-hub__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feedback-hub__entry {
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-md);
  background: var(--color-base-100);
}

.feedback-hub__entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.feedback-hub__category {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: bold;
  letter-spacing: 0.05rem;
  padding: 2px 6px;
  border: 1px solid currentColor;
}

.feedback-hub__category--bug_report {
  color: var(--red, #e53935);
}

.feedback-hub__category--feedback {
  color: var(--color-primary);
}

.feedback-hub__category--feature_request {
  color: var(--color-secondary, #8bc34a);
}

.feedback-hub__date {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.feedback-hub__entry-subject {
  font-family: var(--font-tactical);
  font-size: var(--font-base);
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

.feedback-hub__entry-body {
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
  color: var(--color-base-content-light);
  white-space: pre-wrap;
}


/* Measurements Page */
.measurements-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.measurements-table th {
  text-align: left;
  padding: var(--spacing-sm);
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.measurements-table td {
  padding: var(--spacing-sm);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
}

.measurements-table tr:hover {
  background-color: var(--color-base-200);
}

.measurements-table .unit {
  color: var(--color-base-content-muted);
  font-size: 0.8em;
  margin-left: 2px;
}

.measurements-table__row--pending {
  background-color: rgba(255, 193, 7, 0.08);
  border-left: 3px solid #f59e0b;
}

.measurements-badge {
  display: inline-block;
  font-size: 0.65em;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.measurements-badge--pending {
  background-color: #f59e0b;
  color: #000;
}

.measurements-badge--ai {
  background-color: var(--color-base-300);
  color: var(--color-base-content-muted);
}

.table-container {
  overflow-x: auto;
  margin-top: var(--spacing-lg);
  border: 1px solid var(--color-base-300);
}

/* ==========================================================================
   User Settings Page
   ========================================================================== */

.user-settings-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.settings-section-title {
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-tactical);
  font-size: var(--font-2xl);
}

.settings-section-description {
  color: var(--color-base-content-light);
  font-size: var(--font-sm);
  margin-bottom: var(--spacing-lg);
}

.settings-field-group {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-base-300);
}

.advisor-config-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .advisor-config-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.advisor-card {
  padding: var(--spacing-md);
  border: 1px solid var(--color-base-300);
  background-color: var(--color-base-100);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative;
}

.advisor-card.is-editing {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  grid-column: 1 / -1;
}

.advisor-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.advisor-card__adapter {
  font-family: var(--font-mono);
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  display: block;
}

.advisor-card__name {
  margin: var(--spacing-xs) 0;
  font-size: var(--font-lg);
  font-weight: bold;
}

.advisor-card__model {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
}

.advisor-card__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.advisor-card__edit-form {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-base-300);
}

.advisor-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .advisor-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.advisor-add-section {
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-base-300);
  margin-top: var(--spacing-xl);
}

.advisor-add-section h3 {
  margin-bottom: var(--spacing-lg);
}

.automation-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-base-300);
}

.settings-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.settings-field-help {
  font-size: var(--font-xs);
  color: var(--color-base-content-light);
  margin-left: var(--spacing-xl);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.button-row {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ============================================
   Plant Show - Tabbed Layout
   ============================================ */
.plant-show {
  max-width: 900px;
}

.plant-show.is-iframe {
  max-width: none;
}

.plant-show section {
  padding: 0;
  margin-bottom: var(--spacing-xs);
  background: none;
  box-shadow: none;
  border: none;
  overflow: visible;
}

.plant-show section h2:first-child {
  font-size: var(--font-base);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.plant-show .heading-2 {
  font-size: var(--font-xl);
  margin: 0;
}

.plant-show .heading-3 {
  font-size: var(--font-base);
  font-weight: 600;
}

.plant-show .details-grid {
  margin-bottom: var(--spacing-xs);
}

.plant-show .text-secondary {
  font-size: var(--font-sm);
}

.plant-show__tabs {
  display: flex;
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--spacing-sm);
  gap: 0;
}

.plant-show__tab {
  padding: var(--spacing-xs) var(--spacing-md);
  font-weight: 600;
  font-size: 0.875rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: var(--color-gray-500);
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
}

.plant-show__tab:hover {
  color: var(--color-gray-700);
}

.plant-show__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Compact form inside journal input */
.plant-show .journal-input .simple-form {
  margin-top: var(--spacing-xs);
}

.plant-show .journal-input .simple-form__fields {
  gap: var(--spacing-sm);
}

.plant-show .journal-input .simple-form__fields textarea {
  min-height: 0;
}

/* Journal Timeline */
.journal-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.journal-timeline__item {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 3px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-gray-50);
}

.journal-timeline__item--action {
  border-left-color: var(--color-info, #3b82f6);
  background: color-mix(in srgb, var(--color-info, #3b82f6) 5%, white);
}

.journal-timeline__item--observation {
  border-left-color: var(--color-success, #22c55e);
  background: color-mix(in srgb, var(--color-success, #22c55e) 5%, white);
}

.journal-timeline__item--analysis {
  border-left-color: var(--color-secondary, #a855f7);
  background: color-mix(in srgb, var(--color-secondary, #a855f7) 5%, white);
}

.journal-timeline__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  line-height: 1.3;
}

.journal-timeline__date {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.journal-timeline__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.05em 0.4em;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.journal-timeline__badge--action {
  background: color-mix(in srgb, var(--color-info, #3b82f6) 15%, white);
  color: var(--color-info, #3b82f6);
}

.journal-timeline__badge--observation {
  background: color-mix(in srgb, var(--color-success, #22c55e) 15%, white);
  color: var(--color-success, #22c55e);
}

.journal-timeline__badge--analysis {
  background: color-mix(in srgb, var(--color-secondary, #a855f7) 15%, white);
  color: var(--color-secondary, #a855f7);
}

.journal-timeline__body {
  font-size: 0.85rem;
  line-height: 1.4;
}

.journal-timeline__body p {
  margin: 0;
}

.journal-timeline__delete {
  margin-left: auto;
}

.journal-timeline__images {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.journal-timeline__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s;
  border: 1px solid var(--color-gray-200);
}

.journal-timeline__thumb:hover {
  transform: scale(1.1);
}

/* Admin spending table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  text-align: left;
}

.admin-table thead th {
  font-weight: 600;
  opacity: 0.65;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-table tfoot td {
  border-top: 2px solid var(--color-border, rgba(255, 255, 255, 0.2));
  border-bottom: none;
}

.admin-table tbody tr:hover td {
  background: var(--color-surface-raised, rgba(255, 255, 255, 0.03));
}

.text-right {
  text-align: right !important;
}

.text-mono {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
}

/* Genetic Vault / Biologish Styles */

.genetic-vault {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-panel);
  color: var(--color-text-main);
}

.genetic-vault__header {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-bg-darker);
  border-bottom: 1px solid var(--color-border-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
}

.genetic-vault__title {
  font-family: var(--font-header);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.genetic-vault__nav {
  display: flex;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-dim);
  overflow: hidden;
}

.genetic-vault__nav-item {
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  border-right: 1px solid var(--color-border-dim);
  transition: all 0.2s ease;
}

.genetic-vault__nav-item:last-child {
  border-right: none;
}

.genetic-vault__nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-main);
}

.genetic-vault__nav-item--active {
  background: var(--color-accent);
  color: var(--color-bg-panel) !important;
}

.genetic-vault__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

.genetic-vault__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.genetic-vault__section-title {
  font-family: var(--font-header);
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-text-main);
}

/* Grid Layout for Cultivars */
.genetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.cultivar-card {
  padding: var(--spacing-md);
}

.cultivar-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.cultivar-card__name {
  font-family: var(--font-header);
  font-size: 1.1rem;
  margin: 0;
  color: var(--color-accent);
}

.cultivar-card__type-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  text-transform: uppercase;
}

.cultivar-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin-bottom: var(--spacing-md);
}

.cultivar-card__lineage {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-sm);
  font-size: 0.8rem;
  border-left: 2px solid var(--color-accent-dim);
}

.cultivar-card__lineage-title {
  font-weight: bold;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.cultivar-card__parents {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Table Styles */
.bio-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-darker);
  font-size: 0.9rem;
}

.bio-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-darkest);
  border-bottom: 2px solid var(--color-border-main);
  color: var(--color-text-dim);
  text-transform: uppercase;
  font-size: 0.75rem;
}

.bio-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-dim);
}

.bio-table tr:hover {
  background: var(--color-bg-hover);
}
/* ============================================
   Custom app-specific styles
   ============================================ */
#link-logo {
  border: 1px solid black;
}