/* ─────────────────────────────────────────────────────────────
   theme-overrides.css — wird ZUSÄTZLICH zu styles.css geladen.
   Nutzt die CSS-Variablen die theme.js dynamisch setzt.
   ─────────────────────────────────────────────────────────────

   Diese Datei sollte NACH styles.css geladen werden in index.html:
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/theme-overrides.css">
*/

/* TUI-Theme: Übersteuert die ATLAS-Standard-Farben mit TUI-Farben */
body.theme-tui {
  /* Primäres TUI-Dunkelblau für Header, Buttons, Akzent */
  --abyss: var(--theme-bg-dark, #003580);
  --deep:  var(--theme-primary, #003580);

  /* Sekundär: TUI Himmelblau */
  --accent: var(--theme-secondary, #5DBCD2);

  /* Schrift global auf Source Sans Pro */
}

body.theme-tui,
body.theme-tui input,
body.theme-tui button,
body.theme-tui select,
body.theme-tui textarea {
  font-family: var(--theme-font, 'Source Sans Pro', 'Source Sans 3', sans-serif);
}

/* TUI: Header wird tiefer blau */
body.theme-tui .app-header {
  background: linear-gradient(135deg, #003580 0%, #002a66 100%);
}

/* TUI: Login-Hintergrund */
body.theme-tui .login-overlay {
  background: linear-gradient(135deg, #003580 0%, #002a66 50%, #001f4d 100%);
}

/* TUI: Login-Card mit blauem Akzent oben */
body.theme-tui .login-card {
  border-top: 4px solid #5DBCD2;
}

body.theme-tui .login-brand h1 {
  color: #003580;
}

body.theme-tui .login-btn {
  background: #003580;
}
body.theme-tui .login-btn:hover {
  background: #002a66;
}

/* TUI: Buttons */
body.theme-tui .btn,
body.theme-tui button.primary {
  background: #003580;
  color: white;
}
body.theme-tui .btn:hover,
body.theme-tui button.primary:hover {
  background: #002a66;
}

body.theme-tui .nav-btn.active {
  background: rgba(93, 188, 210, 0.25);  /* Himmelblau-tinted */
}

/* TUI: KPI-Cards bekommen blauen Akzent */
body.theme-tui .kpi-num {
  color: #003580;
}

/* TUI: Tabellenheader */
body.theme-tui .list-table th {
  color: #003580;
  border-bottom-color: rgba(0, 53, 128, 0.15);
}

/* TUI: Highlight-Pills */
body.theme-tui .pill.guest,
body.theme-tui .pill.in_progress {
  background: rgba(93, 188, 210, 0.2);
  color: #003580;
}

/* Brand-Suffix neben "ATLAS" im Header */
.brand-suffix-dynamic {
  display: none;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.5px;
  margin-left: 8px;
}
body.theme-tui .brand-suffix-dynamic {
  display: inline;
  color: #85CEE4;
}

/* Schiffspikto-Marker auf der Karte */
.ship-pikto-marker {
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: transform 0.15s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.ship-pikto-marker:hover,
.ship-pikto-marker.highlighted {
  transform: scale(1.15);
  z-index: 1000;
}