/* ============================================
   hennerbruenjes.de – Shared Design Tokens
   Eingebunden von allen Unterseiten (Dashboard,
   Einkaufsliste, etc.) für ein einheitliches Design.
   PWA-Hinweis: Diese Datei wird NICHT vom SW gecacht –
   sie wird network-first geladen. Offline-Fallback
   greift auf den Browser-Cache zurück.
   ============================================ */

:root {
  /* Hintergrund & Oberflächen */
  --dk-bg:           #0f1117;
  --dk-surface:      #1a1d27;
  --dk-surface-2:    #21263a;   /* etwas heller, für Cards/Inputs */
  --dk-border:       #2a2d3a;
  --dk-border-focus: #3a4055;

  /* Primary – Grün */
  --dk-primary:      #2e7d32;
  --dk-primary-h:    #1b5e20;   /* Hover / pressed */
  --dk-primary-light:#4caf50;   /* Akzent-Highlights */
  --dk-primary-bg:   rgba(46, 125, 50, 0.12);   /* subtiler Hintergrund */
  --dk-primary-glow: rgba(46, 125, 50, 0.22);   /* Box-Shadow-Glow */

  /* Text */
  --dk-text:         #e2e8f0;
  --dk-text-muted:   #8892a4;
  --dk-text-dim:     #5a6378;

  /* Status */
  --dk-success:      #34d399;
  --dk-error:        #f87171;
  --dk-warning:      #fbbf24;

  /* Chip-Farben */
  --dk-chip-blue-bg: rgba(21, 101, 192, 0.20);
  --dk-chip-blue-fg: #90caf9;
  --dk-chip-amber-bg:rgba(245, 127, 23, 0.18);
  --dk-chip-amber-fg:#ffcc80;

  /* Sonstiges */
  --dk-radius:       12px;
  --dk-radius-sm:    8px;
  --dk-shadow:       0 4px 24px rgba(0,0,0,0.45);
  --dk-transition:   0.18s ease;
}

/* ============================================
   Gemeinsame Tool-Header-Komponente
   Wird von allen Tool-Seiten genutzt.
   ============================================ */

/* Äußere Leiste */
.tool-header {
  background: var(--dk-surface);
  border-bottom: 1px solid var(--dk-border);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--dk-shadow);
}

/* Innerer Flex-Container */
.tool-header-inner {
  max-width: var(--tool-content-width, 1300px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Tool-Icon (SVG, grün auf transparent) links */
.tool-header-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  max-width: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tool-header-icon svg,
.tool-header-icon img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  max-width: 26px;
  min-height: 26px;
  max-height: 26px;
  display: block;
  flex-shrink: 0;
}

/* Tool-Name neben dem Icon */
.tool-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flexible Mitte (z. B. Tab-Bar) */
.tool-header-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

/* Aktions-Bereich rechts (vor dem Home-Link) */
.tool-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
}

/* Home-Link ganz rechts: H-Favicon in Grün auf transparent */
.tool-header-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  border-radius: var(--dk-radius-sm);
  text-decoration: none;
  transition: background var(--dk-transition);
  color: var(--dk-primary-light);
  margin-left: 4px;
  overflow: hidden;
}
.tool-header-home:hover {
  background: var(--dk-primary-bg);
  text-decoration: none;
}
.tool-header-home svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  display: block;
  flex-shrink: 0;
}

/* ── Local-Entwicklungsumgebung ─────────────────────────── */
body.is-local {
  background: #0f1a10;
  box-shadow: inset 0 0 0 3px #16a34a;
}
body.is-local::after {
  content: 'LOCAL';
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
  font-family: monospace;
}