/* ─────────────────────────────────────────────────────────────────
   24-dashboard.css — Dashboard "Heute"
   Layout · Sidebar · Topbar · KPIs · Schedule + Route-Gaps ·
   Map · Detail-Panel · Responsive
   
   Tokens from 01-base.css: --bg --s1..s4 --b1..b3 --t1..t4
   --np (accent) --r --r2 --r3 --sh --sh2 --font --mono --tr
   
   Namespace: .mb-dash__*, .mb-kpi, .mb-schedule, .mb-appt, .mb-gap,
   .mb-map-card, .mb-map-pin, .mb-requests, .mb-request, .mb-detail.
   Shared primitives (.mb-btn, .mb-icon-btn, .mb-pill, .mb-seg, .mb-mono)
   live in 25-shared.css — do NOT redefine here.
   ───────────────────────────────────────────────────────────────── */


/* ===== from 21-dashboard.css ===== */
/* ─────────────────────────────────────────────────────────────────
   21-dashboard.css — Layout, Sidebar, Topbar, KPIs, shared primitives
   Uses tokens from 01-base.css: --bg, --s1..s4, --b1..b3, --t1..t4,
   --np (accent), --r/--r2/--r3, --sh/--sh2, --font, --mono.
   ───────────────────────────────────────────────────────────────── */

/* ── Category accents (appointment dots, map pins) ──────────────── */
:root {
  --cat-beauty:   #d4943a;
  --cat-wellness: #0bbdd6;
  --cat-auto:     #3b9eff;
  --cat-craft:    #c8955a;
  --cat-pet:      #1dd97a;
  --cat-fitness:  #9b6fd4;

  /* Status tokens — semantic, themed via alpha on surface */
  --status-ok:      var(--ng);
  --status-active:  var(--na);
  --status-pending: var(--t3);
  --status-done:    var(--t3);
}

/* ── Shell ──────────────────────────────────────────────────────── */
.mb-dash {
  display: grid;
  grid-template-columns: 232px 1fr 360px;
  height: 100vh;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.mb-dash__sidebar {
  display: flex; flex-direction: column;
  padding: 20px 14px;
  background: var(--s1);
  border-right: 1px solid var(--b1);
  overflow-y: auto;
}

.mb-dash__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 20px;
}
.mb-dash__brand-mark {
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--t1); color: var(--s1);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: -0.4px;
}
.mb-dash__brand-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.3px; color: var(--t1);
}

.mb-dash__provider {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px; margin: 0 0 18px;
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: var(--r2); cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  transition: var(--tr);
}
.mb-dash__provider:hover { background: var(--s3); }
.mb-dash__provider-avatar {
  width: 30px; height: 30px; border-radius: var(--r);
  background: linear-gradient(135deg, var(--ngold), var(--ngold2));
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.mb-dash__provider-meta { flex: 1; min-width: 0; }
.mb-dash__provider-name { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.mb-dash__provider-role { font-size: 11px; color: var(--t3); margin-top: 1px; }
.mb-dash__chev { color: var(--t3); flex-shrink: 0; }

.mb-dash__nav {
  display: flex; flex-direction: column; gap: 1px;
}
.mb-dash__nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--r); color: var(--t3);
  font: inherit; font-size: 13px; text-align: left;
  transition: var(--tr);
}
.mb-dash__nav-item:hover { background: var(--s2); color: var(--t2); }
.mb-dash__nav-item.is-active {
  background: var(--s2); color: var(--t1); font-weight: 500;
}
.mb-dash__nav-item > span:nth-child(2) { flex: 1; }
.mb-dash__nav-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--s3); color: var(--t3);
  font-size: 10.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.mb-dash__nav-item.is-active .mb-dash__nav-count {
  background: var(--t1); color: var(--s1);
}

.mb-dash__sidebar-spacer { flex: 1; }

.mb-dash__availability {
  padding: 12px; margin-bottom: 6px;
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: var(--r2);
}
.mb-dash__availability-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--t1); margin-bottom: 6px;
}
.mb-dash__availability-sub {
  font-size: 11px; color: var(--t3); line-height: 1.45;
}
.mb-dash__dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--t3);
}
.mb-dash__dot--online { background: var(--ng); box-shadow: 0 0 0 3px rgba(29,217,122,.18); }

/* ── Main column ────────────────────────────────────────────────── */
.mb-dash__main {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.mb-dash__topbar {
  display: flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 24px;
  border-bottom: 1px solid var(--b1);
  background: var(--s1);
}
.mb-dash__menu-btn {
  display: none;
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--s2); border: 1px solid var(--b1); color: var(--t1);
  cursor: pointer; place-items: center;
}
.mb-dash__title-group { display: flex; align-items: baseline; gap: 12px; }
.mb-dash__title {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: var(--t1);
}
.mb-dash__subtitle { font-size: 13px; color: var(--t3); }
.mb-dash__spacer { flex: 1; }

.mb-dash__search {
  display: flex; align-items: center; gap: 8px;
  width: 280px; padding: 7px 12px;
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: var(--r); color: var(--t3);
}
.mb-dash__search:focus-within { border-color: var(--b3); background: var(--s3); }
.mb-dash__search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: var(--t1);
}
.mb-dash__search input::placeholder { color: var(--t3); }
.mb-dash__kbd {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--s3); color: var(--t3);
  border: 1px solid var(--b1);
}

.mb-dash__icon-btn {
  position: relative;
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--s2); border: 1px solid var(--b1);
  color: var(--t1); cursor: pointer;
  display: inline-grid; place-items: center;
}
.mb-dash__icon-btn:hover { background: var(--s3); }
.mb-dash__icon-dot {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--na);
}
.mb-dash__icon-dot:empty { display: none; }
.mb-dash__icon-btn[data-has-unread="true"] .mb-dash__icon-dot { display: block; }

/* ── Scroll area + scroll-suppression for inner rails ───────────── */
.mb-dash__scroll { flex: 1; overflow: auto; background: var(--bg); }

/* ── KPI row ────────────────────────────────────────────────────── */
.mb-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 18px 24px 8px;
}
.mb-kpi {
  padding: 14px 16px; border-radius: var(--r2);
  background: var(--s1); border: 1px solid var(--b1);
}
.mb-kpi__label {
  font-size: 11.5px; color: var(--t3); margin-bottom: 6px; letter-spacing: 0.1px;
}
.mb-kpi__value {
  font-size: 22px; font-weight: 600; color: var(--t1);
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.mb-kpi__delta { font-size: 11px; color: var(--t3); margin-top: 4px; }

/* ── Grid: schedule + right column ──────────────────────────────── */
.mb-dash__grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px;
  padding: 4px 24px 24px;
}
.mb-dash__rightcol { display: flex; flex-direction: column; gap: 12px; }

/* Shared primitives (.mb-btn, .mb-icon-btn, .mb-pill, .mb-seg, .mb-mono)
   moved to 25-shared.css */

/* ===== from 22-dashboard-schedule.css ===== */
/* ─────────────────────────────────────────────────────────────────
   22-dashboard-schedule.css — Tages-Kalender mit Route-Gaps (USP)
   ───────────────────────────────────────────────────────────────── */

.mb-schedule {
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r2); overflow: hidden;
}
.mb-schedule__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--b1);
}
.mb-schedule__hd-left { display: flex; align-items: center; gap: 10px; }
.mb-schedule__hd-title { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.mb-schedule__hd-meta  { font-size: 12px; color: var(--t3); }

.mb-schedule__body {
  display: flex; position: relative;
  /* JS sets --px-per-hour; gutter + rails share it */
  --px-per-hour: 64px;
  --start-hour: 7;
  --end-hour: 20;
  height: calc((var(--end-hour) - var(--start-hour)) * var(--px-per-hour));
  overflow: hidden;
}

.mb-schedule__gutter {
  width: 56px; flex-shrink: 0; position: relative;
  border-right: 1px solid var(--b1);
}
.mb-schedule__hour-label {
  position: absolute; left: 0; right: 0;
  padding-left: 12px;
  font-size: 10.5px; color: var(--t3);
  font-variant-numeric: tabular-nums;
}

.mb-schedule__rails { flex: 1; position: relative; }

.mb-schedule__hourline {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--b1);
}
.mb-schedule__halfline {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--b1); opacity: 0.55;
}

/* "Jetzt" line */
.mb-schedule__now {
  position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  border-top: 1.5px solid var(--na);
}
.mb-schedule__now::before {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 9px; height: 9px; border-radius: 999px; background: var(--na);
}
.mb-schedule__now-label {
  position: absolute; right: 8px; top: -9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--na);
  padding: 1px 5px; background: var(--s1); border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── Appointment blocks ─────────────────────────────────────────── */
.mb-appt {
  position: absolute; left: 12px; right: 14px;
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid var(--b1);
  background: var(--s1); color: var(--t1);
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
  font: inherit;
  transition: var(--tr);
}
.mb-appt:hover { border-color: var(--b3); }
.mb-appt.is-selected {
  background: var(--t1); color: var(--bg);
  border-color: var(--t1);
  box-shadow: var(--sh2);
}
.mb-appt__head { display: flex; align-items: center; gap: 8px; }
.mb-appt__dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--t3);
  flex-shrink: 0;
}
.mb-appt[data-category="beauty"]   .mb-appt__dot { background: var(--cat-beauty); }
.mb-appt[data-category="wellness"] .mb-appt__dot { background: var(--cat-wellness); }
.mb-appt[data-category="auto"]     .mb-appt__dot { background: var(--cat-auto); }
.mb-appt[data-category="craft"]    .mb-appt__dot { background: var(--cat-craft); }
.mb-appt[data-category="pet"]      .mb-appt__dot { background: var(--cat-pet); }
.mb-appt[data-category="fitness"]  .mb-appt__dot { background: var(--cat-fitness); }

.mb-appt__time {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.mb-appt__price {
  margin-left: auto; font-size: 11.5px; opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.mb-appt.is-selected .mb-appt__price { opacity: 0.75; }
.mb-appt__service { font-size: 13px; font-weight: 500; letter-spacing: -0.1px; }
.mb-appt__sub     { font-size: 11.5px; opacity: 0.6; }
.mb-appt.is-selected .mb-appt__sub { opacity: 0.75; }

/* ── Travel gaps between bookings — USP ─────────────────────────── */
.mb-gap {
  position: absolute; left: 16px; right: 14px;
  display: flex; align-items: center; gap: 8px;
  padding-left: 10px;
  font-size: 10.5px; color: var(--t3);
  border-left: 1.5px dashed var(--np);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.mb-gap__icon { color: var(--np); display: flex; }
.mb-gap__info { color: var(--np); font-weight: 500; }


/* ===== from 23-dashboard-detail.css ===== */
/* ─────────────────────────────────────────────────────────────────
   23-dashboard-detail.css — Termin-Detail-Panel (rechts)
   ───────────────────────────────────────────────────────────────── */

.mb-detail {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--b1);
  background: var(--s1);
  overflow-y: auto;
}
.mb-detail[hidden] { display: none; }

.mb-detail__hd {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--b1);
}
.mb-detail__hd-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.mb-detail__id {
  font-size: 11px; color: var(--t3); letter-spacing: 0.3px;
}
.mb-detail__service {
  font-size: 18px; font-weight: 600; letter-spacing: -0.4px; color: var(--t1);
}
.mb-detail__when { font-size: 13px; color: var(--t3); margin-top: 4px; }

.mb-detail__customer {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--b1);
}
.mb-detail__avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--s3); color: var(--t1);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
}
.mb-detail__customer-meta { flex: 1; min-width: 0; }
.mb-detail__customer-name { font-size: 14px; font-weight: 500; color: var(--t1); }
.mb-detail__customer-sub  { font-size: 12px; color: var(--t3); margin-top: 2px; }

.mb-detail__rows {
  padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--b1);
}
.mb-detail__row { display: flex; gap: 12px; align-items: flex-start; }
.mb-detail__row-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--s2); color: var(--t3);
  display: grid; place-items: center;
}
.mb-detail__row-body { flex: 1; min-width: 0; }
.mb-detail__row-label { font-size: 11px; color: var(--t3); margin-bottom: 2px; letter-spacing: 0.2px; }
.mb-detail__row-value { font-size: 13px; color: var(--t1); line-height: 1.4; word-break: break-word; }
.mb-detail__row-sub   { font-size: 11.5px; color: var(--t3); margin-top: 2px; }

.mb-detail__section {
  padding: 16px 20px; border-bottom: 1px solid var(--b1);
}
.mb-detail__section-label {
  font-size: 11.5px; color: var(--t3); margin-bottom: 10px;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.mb-detail__notes { font-size: 13px; line-height: 1.55; color: var(--t1); }

.mb-detail__bill { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mb-detail__bill-row {
  display: flex; justify-content: space-between; margin: 0;
}
.mb-detail__bill-row dt { color: var(--t3); margin: 0; }
.mb-detail__bill-row dd { color: var(--t1); margin: 0; }
.mb-detail__bill-row--total {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px dashed var(--b1); font-weight: 600;
}

.mb-detail__actions {
  padding: 20px; margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.mb-detail__actions-row { display: flex; gap: 8px; }
.mb-detail__actions-row .mb-btn { flex: 1; }


/* ===== from 24-dashboard-map.css ===== */
/* ─────────────────────────────────────────────────────────────────
   24-dashboard-map.css — Leaflet-Map + Requests-Card
   ───────────────────────────────────────────────────────────────── */

.mb-map-card {
  position: relative;
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r2); overflow: hidden;
  height: 240px;
}
.mb-map-card__canvas { position: absolute; inset: 0; z-index: 1; background: var(--s2); }
.mb-map-card__chip {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 10px; border-radius: 6px;
  background: var(--s1); border: 1px solid var(--b1);
  font-size: 11.5px; font-weight: 500; color: var(--t1);
  box-shadow: var(--sh2);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Leaflet overrides — blend with dark/light token system */
.mb-map-card .leaflet-control-attribution {
  background: var(--s1); color: var(--t3);
  font-size: 9px;
}
.mb-map-card .leaflet-control-attribution a { color: var(--np); }
.mb-map-card .leaflet-bar {
  box-shadow: var(--sh2); border: 1px solid var(--b1);
}
.mb-map-card .leaflet-bar a {
  background: var(--s1); color: var(--t1); border-bottom-color: var(--b1);
}
.mb-map-card .leaflet-bar a:hover { background: var(--s2); }

/* Custom marker — pin shape built with a DivIcon */
.mb-map-pin {
  width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
  background: var(--np);
  transform: rotate(-45deg);
  border: 2px solid var(--s1);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.mb-map-pin > span { transform: rotate(45deg); }
.mb-map-pin[data-category="beauty"]   { background: var(--cat-beauty); }
.mb-map-pin[data-category="wellness"] { background: var(--cat-wellness); }
.mb-map-pin[data-category="auto"]     { background: var(--cat-auto); }
.mb-map-pin[data-category="craft"]    { background: var(--cat-craft); }
.mb-map-pin[data-category="pet"]      { background: var(--cat-pet); }
.mb-map-pin[data-category="fitness"]  { background: var(--cat-fitness); }
.mb-map-pin.is-selected {
  background: var(--t1) !important;
  transform: rotate(-45deg) scale(1.18);
}

/* ── Requests card ──────────────────────────────────────────────── */
.mb-requests {
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r2); overflow: hidden;
}
.mb-requests__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--b1);
}
.mb-requests__hd-left { display: flex; align-items: center; gap: 8px; }
.mb-requests__hd-title { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.mb-requests__hd-link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--t3);
}
.mb-requests__hd-link:hover { color: var(--np); }

.mb-requests__list { list-style: none; margin: 0; padding: 0; }
.mb-request {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--b1);
}
.mb-request:first-child { border-top: 0; }
.mb-request__body { flex: 1; min-width: 0; }
.mb-request__title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--t1);
}
.mb-request__sep { color: var(--t3); }
.mb-request__customer { font-size: 11.5px; color: var(--t3); font-weight: 400; }
.mb-request__meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; }


/* ===== from 25-dashboard-mobile.css ===== */
/* ─────────────────────────────────────────────────────────────────
   25-dashboard-mobile.css — Responsive breakpoints
   Uses existing 11-mobile-drawer.css for the sidebar drawer behavior;
   this file only handles the dashboard-specific grid collapse.
   ───────────────────────────────────────────────────────────────── */

/* ≤1280px — drop detail panel to bottom sheet on demand */
@media (max-width: 1280px) {
  .mb-dash { grid-template-columns: 232px 1fr; }
  .mb-detail {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 80vh; height: auto;
    border-left: 0; border-top: 1px solid var(--b1);
    border-radius: var(--r3) var(--r3) 0 0;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh);
    z-index: 50;
  }
  .mb-dash[data-detail-open="true"] .mb-detail { transform: translateY(0); }
}

/* ≤1024px — stack schedule above map/requests */
@media (max-width: 1024px) {
  .mb-dash__grid { grid-template-columns: 1fr; }
  .mb-kpi-row    { grid-template-columns: repeat(2, 1fr); }
  .mb-dash__search { width: 220px; }
}

/* ≤768px — sidebar becomes drawer, mobile layout */
@media (max-width: 768px) {
  .mb-dash { grid-template-columns: 1fr; }
  .mb-dash__sidebar {
    /* Hook into existing drawer system — 11-mobile-drawer.css handles
       the slide-in/overlay. These rules just set position context. */
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh);
  }
  .mb-dash[data-sidebar-open="true"] .mb-dash__sidebar { transform: translateX(0); }
  .mb-dash__menu-btn { display: inline-grid; }

  .mb-dash__topbar { padding: 0 16px; gap: 10px; }
  .mb-dash__search { display: none; } /* shown in separate mobile search sheet */
  .mb-dash__new-btn span { display: none; }
  .mb-dash__new-btn { padding: 0 10px; }

  .mb-kpi-row { padding: 14px 16px 6px; gap: 8px; }
  .mb-kpi { padding: 12px; }
  .mb-kpi__value { font-size: 19px; }

  .mb-dash__grid { padding: 4px 16px 24px; }
  .mb-schedule__body { --px-per-hour: 56px; }
}

/* Safe-area insets for PWA full-screen mode */
@supports (padding: max(0px)) {
  .mb-dash__sidebar   { padding-top: max(20px, env(safe-area-inset-top)); }
  .mb-dash__topbar    { padding-right: max(24px, env(safe-area-inset-right)); }
  .mb-detail          { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}