/* theme.css — gemeinsame Design-Tokens für die Assist-App
   Hub-konforme Designsprache (analog /opt/apps/hub/apps/pwa/src/styles/tokens.css):
   Coal-Hintergründe, strukturierte Graustufen, Inter, Radien, Glow.
   ABER: Akzent ist FIRMENGEBRANDET (Monn=orange / Kipfer=hellblau) statt Hub-Cyan.
   Eine Quelle für alle Seiten (index/freigaben/mahnungen) — Marc: Modulbauweise.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Hintergründe / Flächen (Hub) ── */
  --bg: #0d1117;          /* Coal — Seite */
  --coal-light: #161b22;
  --coal-mid: #1a2028;
  --card: #161b22;        /* Karten */
  --steel: #21262d;       /* Inputs */
  --border: #30363d;

  /* ── Text (Hub) ── */
  --fg: #fafafa;
  --muted: #999eaf;
  --smoke: #64748b;

  /* ── Akzent: FIRMENGEBRANDET (Default = Monn-orange, app.js setzt data-company) ── */
  /* Monn-Orange bewusst gedämpft (weniger grell, Marc 2026-06-04). */
  --accent: #D17B43;
  --accent-active: #B5642F;
  --accent-tint: rgba(209,123,67,0.15);

  /* ── Status (Hub-Palette) ── */
  --success: #22c55e;
  --warn: #eab308;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ── Radien (Hub) ── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 9999px;

  /* ── Schatten / Glow (Hub) ── */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px var(--accent-tint);

  /* ── Typografie (Hub) ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --safe-top: env(safe-area-inset-top, 0);
  --safe-bot: env(safe-area-inset-bottom, 0);
}

/* Firma-Branding: Kipfer = hellblau, Monn = orange (Akzent überschreibt Hub-Cyan) */
html[data-company="kipfer"] {
  --accent: #4a9eff; --accent-active: #2178e0; --accent-tint: rgba(74,158,255,0.14);
}
html[data-company="monn"] {
  --accent: #D17B43; --accent-active: #B5642F; --accent-tint: rgba(209,123,67,0.15);
}

/* Umgebung Staging: ROT überschreibt die Firmenfarbe (unmissverständliche Warnung,
   man arbeitet auf der Sandbox). MUSS NACH den Firmen-Regeln stehen (gleiche
   Spezifität → Quellreihenfolge gewinnt). Live = Firmenfarbe (keine Regel nötig). */
html[data-env="staging"] {
  --accent: #ef4444 !important; --accent-active: #dc2626 !important; --accent-tint: rgba(239,68,68,0.18) !important;
}

/* ── Termin-Assistent-Karte (Chat) ─────────────────────────────────────
   Vorschlags-Karte, die das Brain über einen ```termin-Block auslöst. */
.termin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #39a0ff);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 8px 0;
  max-width: 92%;
}
.termin-card .tc-title { font-weight: 700; margin-bottom: 8px; }
.termin-card .tc-row { color: var(--fg); font-size: 14px; padding: 2px 0; }
.termin-card .tc-note { color: var(--muted); font-size: 14px; margin: 8px 0 4px; }
.termin-card .tc-sub { color: var(--smoke); font-size: 12px; margin-top: 4px; }
.termin-card .tc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.tc-btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; background: var(--steel); color: var(--fg);
}
.tc-btn.tc-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.tc-btn.tc-warn { background: #d97706; border-color: #d97706; color: #fff; }
.tc-btn.tc-cancel { background: transparent; color: var(--muted); }
.tc-btn.tc-pick { background: var(--coal-mid); }
.tc-invite { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font-size: 13px; }
.tc-mail-prev { background: #fff; border-radius: 8px; padding: 10px; margin: 8px 0; }

/* ── Filter-Chips (Bewirtschaftung/Listen) ─────────────────────────── */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chip {
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; background: var(--steel); color: var(--muted);
}
.chip.active { background: var(--accent, #39a0ff); border-color: var(--accent, #39a0ff); color: #06121f; }

/* ── Bearbeiten-Knöpfe + Inline-Edit (Termine/Aufgaben) ─────────────── */
.edit-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.edit-btn {
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--coal-mid); color: var(--fg);
}
.edit-btn.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.edit-btn.danger { background: transparent; border-color: #dc2626; color: #f87171; }
.inline-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; margin-top: 6px; }
.inline-edit input {
  background: var(--steel); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 8px; color: var(--fg); font-size: 13px;
}
.item.done { opacity: 0.72; }

/* Inline-Edit: Select + Spalten-Variante (Termin voll bearbeiten) */
.inline-edit select {
  background: var(--steel); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 8px; color: var(--fg); font-size: 13px;
}
.inline-edit.col { flex-direction: column; align-items: stretch; }
.inline-edit.col input, .inline-edit.col select { width: 100%; }