/* ============================================================
   bauplan-fensterlex-theme.css
   FensterLex Theme-Override für BauPlan Pro.
   Nach bauplan.css einbinden — überschreibt nur was nötig ist.
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700&family=DM+Mono:wght@300;400;500&family=Crimson+Pro:wght@400;600&display=swap');

/* ── FONT TOKENS (überschreiben style.css) ── */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-mono:    'DM Mono', monospace;
}

/* ══════════════════════════════════════════════
   LAYOUT-FIX: Sidebar wird von Topbar verdeckt
   Ursache: padding-top + height:100vh ergibt ohne
   box-sizing:border-box eine Gesamthöhe > 100vh,
   die Sidebar hat keine explizite Höhe.
   ══════════════════════════════════════════════ */
.bp-shell {
  box-sizing: border-box;    /* height:100vh inkl. padding-top — kein Überlauf */
}
.bp-sidebar {
  height: calc(100vh - var(--topbar-h));      /* exakt der Platz unter der Topbar */
  max-height: calc(100vh - var(--topbar-h));
}
html.topbar-hidden .bp-sidebar {
  height: 100vh;
  max-height: 100vh;
}

/* ══════════════════════════════════════════════
   FARBTOKEN — DARK
   ══════════════════════════════════════════════ */
[data-theme="dark"] {
  --bp-accent:    #c8963b;
  --bp-accent-bg: rgba(200, 150, 59, .09);

  /* Gleiche Dark-Basis wie FensterLex */
  --bp-bg:        #0d0f11;
  --bp-surface:   #141618;
  --bp-surface2:  #1a1d20;
  --bp-surface3:  #1e2226;
  --bp-border:    #2a2e33;
  --bp-border2:   rgba(255, 255, 255, .13);
  --bp-label-bg:  #111315;
  --bp-input-bg:  #0d0f11;
  --bp-modal-bg:  #141618;
  --bp-nav-bg:    rgba(13, 15, 17, .95);
  --bp-scrollbar: #2a2e33;
}

/* ══════════════════════════════════════════════
   FARBTOKEN — LIGHT
   ══════════════════════════════════════════════ */
[data-theme="light"] {
  --bp-accent:    #b8832d;
  --bp-accent-bg: rgba(184, 131, 45, .08);

  /* style.css globale Token für Light-Mode */
  --clr-accent:     #b8832d;
  --clr-cta:        #b8832d;
  --clr-cta-hover:  #96681f;
}

/* ══════════════════════════════════════════════
   TOPBAR
   Accent-Linie wird automatisch amber durch var()
   ══════════════════════════════════════════════ */
.bp-topbar {
  /* Amber-Linie statt Lime */
  box-shadow: 0 2px 0 0 var(--bp-accent);
}

/* Logo-Fallback: FensterLex Fenster-Icon statt "BP" */
.bp-logo-fallback {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  color: var(--bp-accent);
  letter-spacing: -.02em;
}

/* Topbar Projektname: Playfair statt Syne */
.bp-topbar-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Buttons: DM Mono statt Inter */
.bp-icon-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════
   PRIMARY BUTTON
   Auf Amber ist weißer Text besser lesbar als #111
   ══════════════════════════════════════════════ */
.btn-primary {
  color: #fff !important;
}
.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(200, 150, 59, .35) !important;
}
[data-theme="light"] .btn-primary {
  color: #fff !important;
  background: #b8832d !important;
}
[data-theme="light"] .btn-primary:hover {
  background: #96681f !important;
  box-shadow: 0 4px 16px rgba(184, 131, 45, .3) !important;
}

/* ══════════════════════════════════════════════
   INPUTS — Fokus-Glühen amber
   ══════════════════════════════════════════════ */
.bp-input:focus {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px rgba(200, 150, 59, .14);
}
[data-theme="light"] .bp-input:focus {
  box-shadow: 0 0 0 3px rgba(184, 131, 45, .16);
}

/* ══════════════════════════════════════════════
   GANTT — Monatsbalken & Trennlinie
   ══════════════════════════════════════════════ */
.bp-gantt-month-spacer {
  border-right-color: var(--bp-accent);
}
.bp-gantt-month {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-right-color: var(--bp-accent);
  color: var(--bp-accent);
}

/* View-Titel: Playfair kursiv */
.bp-view-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Card-Titel: DM Mono für FensterLex-Konsistenz */
.bp-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bp-accent);
}

/* ══════════════════════════════════════════════
   TASK COUNT BADGE (Gewerke-Liste)
   ══════════════════════════════════════════════ */
.bp-task-count {
  color: var(--bp-accent);
  background: var(--bp-accent-bg);
  border-color: rgba(200, 150, 59, .22);
}

/* ══════════════════════════════════════════════
   TOOLTIP
   ══════════════════════════════════════════════ */
.bp-tooltip {
  border-top-color: var(--bp-accent);
  border-radius: 4px;
}
.bp-tooltip-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
}

/* ══════════════════════════════════════════════
   EMAIL COMPOSE — Header-Leiste
   ══════════════════════════════════════════════ */
.bp-email-header-bar {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--bp-accent);
  color: #fff;          /* Weiß statt #111 auf Amber */
}

/* ══════════════════════════════════════════════
   NAV ITEMS (Sidebar + Mobile)
   ══════════════════════════════════════════════ */
.bp-nav-item.active {
  color: var(--bp-accent);
  background: var(--bp-accent-bg);
  border-left-color: var(--bp-accent);
}
.bp-mobile-nav-item.active {
  color: var(--bp-accent);
}

/* ══════════════════════════════════════════════
   SIDEBAR — Labels DM Mono
   ══════════════════════════════════════════════ */
.bp-sidenav-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
}

/* ══════════════════════════════════════════════
   GEWERK-NAME Playfair
   ══════════════════════════════════════════════ */
.bp-gewerk-name {
  font-family: var(--font-display);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════ */
.bp-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.bp-modal-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bp-accent);
}
.bp-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .07em;
}

/* ══════════════════════════════════════════════
   TAGESREGISTER — Tagesname Playfair
   ══════════════════════════════════════════════ */
.bp-tages-dayname {
  font-family: var(--font-display);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   KOLLISION
   ══════════════════════════════════════════════ */
.bp-collision-nr {
  font-family: var(--font-display);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   FOOTER / SIDEBAR-FOOTER
   ══════════════════════════════════════════════ */
.bp-sidebar-footer {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.bp-footer {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════
   PROGRESS BAR & WARN BADGE
   ══════════════════════════════════════════════ */
.bp-progress-fill {
  background: var(--bp-accent);
}
.bp-warn-topbadge {
  background: #c25a5a;   /* FensterLex --danger */
}

/* ══════════════════════════════════════════════
   SCROLLBAR (FensterLex Stil)
   ══════════════════════════════════════════════ */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--bp-bg); }
::-webkit-scrollbar-thumb   { background: var(--bp-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bp-accent); }

/* ══════════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════════ */
::selection {
  background: rgba(200, 150, 59, .22);
  color: var(--bp-text);
}

/* ══════════════════════════════════════════════
   PRINT — Amber statt Lime
   ══════════════════════════════════════════════ */
@media print {
  :root {
    --bp-accent: #a07030;
  }
  .bp-gantt-month  { color: #a07030 !important; }
  .bp-card-title   { color: #a07030 !important; }
  .bp-view-title   { color: #111 !important; }
  .bp-email-header-bar { background: #a07030 !important; color: #fff !important; }
}