/* ═══════════════════════════════════════════════════════════════
   ALMAS Tourenplanung — Webdesign-System v2 (2026-06-22)
   Additive Override-Schicht — lädt NACH almas-design.css,
   almas-design-v2.css (alt/anthrazit) UND tourenplanung.css.
   Ändert NUR Optik: hell/premium statt dunkel-Industrie, roter Bär-Look,
   Rot #FF2325 (Flächen) / #D81020 (Text/Buttons, AA), weiche Schatten,
   gerundet, Helvetica Neue. HTML/JS/SSO/Backend bleiben unverändert.
   Vorbild: deploy/rechnungstool/rechnungstool-theme.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Marke */
  --almas-red:#FF2325;
  --almas-red-hover:#D81020;
  --almas-red-light:rgba(255,35,37,.10);
  --almas-red-border:rgba(255,35,37,.22);

  /* Flächen — hell */
  --bg-primary:#F6F6F8; --bg-secondary:#FFFFFF; --bg-tertiary:#F1F1F4;
  --bg-sidebar:#FFFFFF; --bg-sidebar-active:rgba(255,35,37,.10);
  --bottom-bar-bg:#FFFFFF;
  --almas-anthracite:#FFFFFF; --almas-anthracite-2:#F6F6F8; --almas-anthracite-3:#ECECEF;

  /* Text */
  --text-primary:#15161A; --text-secondary:#5C5F66; --text-tertiary:#8A8D94;

  /* Linien */
  --border-primary:#E2E3E8; --border-secondary:#ECECEF;

  /* Schatten — weich, mehrschichtig */
  --shadow-sm:0 1px 2px rgba(16,17,22,.04),0 2px 6px rgba(16,17,22,.05);
  --shadow-md:0 6px 16px rgba(16,17,22,.06),0 12px 30px rgba(16,17,22,.08);
  --shadow-lg:0 12px 30px rgba(16,17,22,.10),0 26px 60px rgba(16,17,22,.12);
  --shadow-xl:0 18px 40px rgba(16,17,22,.14),0 40px 90px rgba(16,17,22,.16);

  /* Radien — gerundet statt kantig */
  --radius-sm:10px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;

  /* Schrift — Helvetica Neue statt Inter/Mono */
  --font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --accent-bar-width:3px;
}

body{ background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-family); }

/* ─── SIDEBAR: anthrazit → hell/premium ─── */
.almas-sidebar{ background:var(--bg-sidebar); border-right:1px solid var(--border-secondary); }
.almas-sidebar-logo,.almas-sidebar-header{ background:transparent; border-bottom:1px solid var(--border-secondary); }
.almas-sidebar-logo img{ filter:none; }
.almas-sidebar-logo .app-name{ color:var(--text-tertiary); }
.almas-sidebar a,aside.almas-sidebar a{
  color:var(--text-secondary); border-radius:12px; margin:2px 8px;
  border-left:0; padding:10px 14px; font-weight:600;
}
.almas-sidebar a .nav-icon{ color:var(--text-tertiary); }
.almas-sidebar a:hover,aside.almas-sidebar a:hover{ background:var(--bg-tertiary); color:var(--text-primary); border-left:0; }
.almas-sidebar a.active,aside.almas-sidebar a.active{
  background:var(--bg-sidebar-active); color:var(--almas-red-hover); font-weight:700;
  border-left:0; position:relative;
}
.almas-sidebar a.active .nav-icon{ color:var(--almas-red-hover); }
.almas-sidebar a.active::before{
  content:""; position:absolute; left:2px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--almas-red);
}
.almas-sidebar-footer{ border-top:1px solid var(--border-secondary); }
.almas-sidebar-user{ color:var(--text-tertiary); }
.almas-sidebar-user .name{ color:var(--text-primary); }
.almas-sidebar-user .logout{ color:var(--almas-red-hover); }
.nav-badge{ background:var(--bg-tertiary); color:var(--text-secondary); border-radius:999px; }

/* Version-Badge: dunkel → hell */
.version-badge{
  background:var(--bg-tertiary); color:var(--text-secondary);
  border:1px solid var(--border-secondary); border-radius:999px; font-family:var(--font-family);
}
.version-badge:hover{ color:var(--text-primary); }

/* ─── HEADER: Glas ─── */
.almas-header{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border-secondary);
}
.almas-header h1{ letter-spacing:-.02em; color:var(--text-primary); }
.almas-burger{ background:var(--bg-secondary); border:1px solid var(--border-secondary); border-radius:12px; color:var(--text-primary); box-shadow:var(--shadow-sm); }
.almas-burger:hover{ background:var(--bg-tertiary); }

/* ─── BUTTONS ─── */
.almas-btn{ border-radius:10px; font-weight:600; }
.almas-btn-primary{ background:var(--almas-red-hover); border-color:var(--almas-red-hover); box-shadow:0 8px 20px rgba(255,35,37,.26); }
.almas-btn-primary:hover{ background:var(--almas-red); border-color:var(--almas-red); transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,35,37,.34); }
.almas-btn-secondary{ background:var(--bg-secondary); border:1px solid var(--border-primary); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.almas-btn-secondary:hover{ background:var(--bg-tertiary); }
.almas-btn-ghost{ background:var(--bg-secondary); border:1px solid var(--border-primary); color:var(--text-primary); }
.almas-btn-ghost:hover{ background:var(--bg-tertiary); }

/* ─── KARTEN / STAT-CARDS ─── */
.almas-card,.dash-stat-card,.tech-route-card{ border-radius:var(--radius-lg); border-color:var(--border-secondary); box-shadow:var(--shadow-sm); background:var(--bg-secondary); }
.dash-stat-card{ transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s; }
.dash-stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dash-stat-card::before{ background:var(--almas-red); }
.dash-stat-card .v{ font-family:var(--font-family); letter-spacing:-.03em; color:var(--text-primary); }

/* ─── TABS ─── */
.tab-btn.active{ border-bottom-color:var(--almas-red); color:var(--almas-red-hover); }
.week-detail-tabs,.skills-tabs{ border-bottom:1px solid var(--border-secondary); }

/* ─── PILLS / BADGES (AA) ─── */
.pill,.almas-badge{ border-radius:999px; }
.pill.success{ background:rgba(20,122,61,.12); color:#147A3D; }
.pill.warning{ background:rgba(253,196,0,.18); color:#8A5A00; }
.pill.danger { background:var(--almas-red-light); color:var(--almas-red-hover); }
.pill.info   { background:rgba(0,87,184,.10); color:#0057B8; }
.pool-badge{ background:var(--bg-tertiary); color:var(--text-primary); border-radius:999px; font-family:var(--font-family); }

/* ─── TABELLEN ─── */
.almas-table-container{ border-radius:var(--radius-lg); border:1px solid var(--border-secondary); box-shadow:var(--shadow-sm); overflow:hidden; background:var(--bg-secondary); }
.almas-table{ font-family:var(--font-family); }
.almas-table th{ background:var(--bg-secondary); color:var(--text-tertiary); border-bottom:1px solid var(--border-secondary); }
.almas-table td{ border-bottom:1px solid var(--border-secondary); }
.almas-table tr:hover td{ background:var(--bg-primary); }

/* ─── INPUTS ─── */
input[type="text"],input[type="email"],input[type="password"],input[type="search"],
input[type="week"],input[type="date"],input[type="time"],input[type="number"],select,textarea{
  border-radius:10px; border:1px solid var(--border-primary); background:var(--bg-secondary); color:var(--text-primary);
}
input:focus,select:focus,textarea:focus{ border-color:var(--almas-red); box-shadow:0 0 0 3px var(--almas-red-light); }

/* ─── MODAL ─── */
.almas-modal{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); background:var(--bg-secondary); color:var(--text-primary); }
.almas-modal-header{ border-bottom:1px solid var(--border-secondary); }

/* ─── BOTTOM-BAR (Mobile): anthrazit → hell ─── */
.almas-bottom-bar{ background:var(--bottom-bar-bg); border-top:1px solid var(--border-secondary); box-shadow:0 -2px 16px rgba(16,17,22,.08); }
.almas-bottom-bar button,.almas-bottom-bar a{ color:var(--text-tertiary); }
.almas-bottom-bar button:hover,.almas-bottom-bar a:hover{ background:var(--bg-tertiary); color:var(--text-primary); }
.almas-bottom-bar button.active,.almas-bottom-bar a.active{ background:var(--almas-red-light); color:var(--almas-red-hover); }
.almas-bottom-bar .primary{ background:var(--almas-red-hover); color:#fff; }
.almas-bottom-bar .primary:hover{ background:var(--almas-red); }

/* ─── DAY-SWITCHER (Mobile) aktiv = neues Rot ─── */
.rcal-day-switcher button.active,.almas-day-switcher button.active{ background:var(--almas-red-hover); border-color:var(--almas-red-hover); }
.rcal-day-switcher button .dsw-date,.almas-day-switcher button .day-num{ font-family:var(--font-family); }

/* ─── TOUR-SPEZIFISCH: Dunkel-/Alt-Farben angleichen ─── */
.tech-route .plan-btn.plan-btn-ai{ background:var(--almas-red-hover); }   /* war #1d1d1f */
.week-chat-sidebar{ border-radius:var(--radius-lg); border:1px solid var(--border-secondary); box-shadow:var(--shadow-sm); overflow:hidden; }
.week-chat-header{ background:var(--bg-tertiary); border-bottom:1px solid var(--border-secondary); font-weight:700; }
.chat-msg.user{ background:var(--almas-red-hover); }  /* war Apple-Blau — Marke */

/* ─── LOGIN-SCREEN ─── */
.almas-login-box{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }

/* ─── FOKUS (A11y) ─── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--almas-red-hover); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){ .dash-stat-card{ transition:none; } .dash-stat-card:hover{ transform:none; } }

/* ─── D365-Status-Pille im Header ─── */
.d365-pill{ display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  border:1px solid var(--border-primary); background:var(--bg-secondary); border-radius:999px;
  padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--text-secondary);
  box-shadow:var(--shadow-sm); cursor:pointer; white-space:nowrap; }
.d365-pill:hover{ background:var(--bg-tertiary); color:var(--text-primary); }
.d365-dot{ width:8px; height:8px; border-radius:50%; background:#9C9E9F; flex:0 0 auto; }
.d365-dot.on{ background:#1FA85A; } .d365-dot.warn{ background:#E0A100; } .d365-dot.off{ background:#E0241A; }
.almas-header .header-actions{ margin-left:12px; }

/* ═══ Farbige KPI-Karten (Dashboard + Wochen-Detail) ═══
   Dezente Akzente je Kachel: farbiger Balken links + farbige Zahl.
   Akzent-Token --c; Default neutral-grau. */
.dash-stat-card .v,.week-meta-item .val{ color:var(--c,var(--text-primary)); }
.dash-stat-card::before{ background:var(--c,var(--almas-red)); }

/* Dashboard-Kacheln: semantische Akzent-Klassen (in JS gesetzt) */
.dash-stat-card.accent-amber{ --c:#B26A00; }
.dash-stat-card.accent-blue { --c:#0057B8; }
.dash-stat-card.accent-green{ --c:#147A3D; }
.dash-stat-card.accent-teal { --c:#0E8C82; }
.dash-stat-card.accent-violet{ --c:#7A2E73; }
.dash-stat-card.urgent{ --c:#C20F1C; }
.dash-stat-card.flaw  { --c:#C20F1C; }
/* zarte Tönung der Kachel-Fläche passend zum Akzent */
.dash-stat-card.accent-amber{ background:linear-gradient(180deg,#FFFDF7,#fff); }
.dash-stat-card.accent-blue { background:linear-gradient(180deg,#F7FAFF,#fff); }
.dash-stat-card.accent-green{ background:linear-gradient(180deg,#F6FCF8,#fff); }
.dash-stat-card.accent-teal { background:linear-gradient(180deg,#F4FCFB,#fff); }
.dash-stat-card.urgent,.dash-stat-card.flaw{ background:linear-gradient(180deg,#FFF7F7,#fff); }

/* Wochen-Detail-Kacheln: Balken links + farbige Zahl */
.week-meta-item{ position:relative; overflow:hidden; }
.week-meta-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; background:var(--c,#C9CCD2); }
.week-meta-item.accent-blue { --c:#0057B8; }
.week-meta-item.accent-green{ --c:#147A3D; }
.week-meta-item.accent-amber{ --c:#B26A00; }
.week-meta-item.accent-red  { --c:#C20F1C; }

/* Status-Pill (Wochen-Status) kräftig semantisch */
.status-pill{ border-radius:999px; font-weight:700; padding:3px 11px; }
.status-pill.draft,.status-pill.review{ background:rgba(253,196,0,.20); color:#8A5A00; }
.status-pill.published,.status-pill.confirmed,.status-pill.done{ background:rgba(20,122,61,.14); color:#147A3D; }
.status-pill.sent,.status-pill.planned{ background:rgba(0,87,184,.12); color:#0057B8; }
.status-pill.cancelled,.status-pill.declined{ background:var(--almas-red-light); color:var(--almas-red-hover); }

/* ─── Mobil: Pille kompakt (nur Punkt) + kein Seiten-Overflow ─── */
@media (max-width:768px){
  .d365-pill{ padding:7px 9px; }
  .d365-pill #d365PillText{ display:none; }
  html,body{ overflow-x:hidden; }
  .almas-main,.almas-content{ min-width:0; max-width:100%; }
  .almas-table-container{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}