/* Ordnung Planung & Auftragsdetail (16.10.2026) – nur Darstellung, ruhiger und einheitlich.
   Gleiche Bausteine überall: Outline-Knöpfe, ein Primärknopf je Bereich, Menü «Mehr ▾», Karten mit gleicher Kopfzeile.
   Farben für Typen/Status (Reparatur, Neumontage, fix/provisorisch, Warnungen) bleiben erhalten. */
@media screen {

/* ── Menü «Mehr ▾» (gemeinsam für Kopf, Kalender, Auftragsdetail) ───────────── */
.po-mehr { position: relative; display: inline-flex; }
.po-mehr-liste {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 9000;
  flex-direction: column; gap: 2px; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  padding: 6px; background: #fff; border: 1px solid #dfe5ec; border-radius: 10px;
  box-shadow: 0 12px 32px #0f2a4a2e;
}
.po-mehr.offen > .po-mehr-liste { display: flex; }
.po-mehr.po-rechts > .po-mehr-liste { left: auto; right: 0; }
.po-mehr.od-mehr-oben > .po-mehr-liste { top: auto; bottom: calc(100% + 4px); }
.po-mehr .po-mehr-liste > :is(button, a) {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; height: auto; min-height: 34px; margin: 0; padding: 7px 12px;
  border: 0; border-radius: 7px; background: transparent; color: #1d2b3a; box-shadow: none;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.po-mehr .po-mehr-liste > :is(button, a):hover,
.po-mehr .po-mehr-liste > :is(button, a):focus-visible { background: #eef4fb; color: #003878; }

/* ── Kopf: Zeile 1 Logo/Suche · Navigation · Ansicht · Benutzer; Zeile 2 Modus links, Aktionen rechts ── */
.topbar-user { display: flex; align-items: center; gap: 8px; }
.topbar-user .btn { padding: 5px 12px; font-size: 12px; min-height: 30px; border-radius: 8px; }
.topbar-actions { align-items: center; gap: 8px; }
.topbar-actions > .btn { padding: 6px 14px; font-size: 12.5px; min-height: 32px; border-radius: 8px; font-weight: 600; }
.topbar-actions > .btn.po-haupt { background: #fff; color: #003878; border: 1px solid #fff; }
.topbar-actions > .btn.po-haupt:hover { background: #eef4fb; }
.topbar-actions > .btn.po-akzent { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.topbar-actions > .btn.po-notfall { background: rgba(220,38,38,.22); color: #fff; border: 1px solid #fca5a5; }
.topbar-actions > .btn.po-notfall:hover { background: #dc2626; border-color: #dc2626; }
.topbar .po-mehr-btn {
  min-height: 32px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.topbar .po-mehr-btn:hover, .topbar .po-mehr.offen > .po-mehr-btn { background: rgba(255,255,255,.15); }
/* «◷ Meine Zeit» gibt es schon als Reiter «TimeTac / Meine Zeit» – doppelten Knopf ausblenden (gleiche Funktion) */
.topbar-actions > .tec-my-time-entry { display: none; }

@media (min-width: 769px) {
  .topbar { column-gap: 12px; }
  .topbar > .main-nav { order: 2; }
  .topbar > .view-tabs { order: 3; }
  .topbar > .topbar-user { order: 4; margin-left: auto; }
  .topbar::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .topbar > #modePills { order: 6; }
  .topbar > .topbar-actions { order: 7; margin-left: auto; }
}
@media (max-width: 768px) {
  .topbar-user { display: none; }
  .topbar.menu-open .topbar-user { display: flex; order: 99; flex-direction: column; align-items: stretch; margin-top: 6px; }
  .topbar.menu-open .topbar-user .btn { padding: 12px 16px; font-size: 14px; justify-content: center; border-radius: 10px; }
  /* Im Handy-Menü: «Mehr»-Einträge direkt untereinander wie bisher, ohne Aufklappen */
  .topbar .po-mehr-btn { display: none !important; }
  .topbar .po-mehr, .topbar .po-mehr > .po-mehr-liste { display: contents !important; }
  .topbar .po-mehr-liste > .btn { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); justify-content: center; }
}

/* ── Kalender-Werkzeugleiste: einheitliche Outline-Knöpfe statt Regenbogen ── */
.calendar-nav .po-werkzeug {
  display: inline-flex; align-items: center; gap: 5px; width: auto; height: 32px; padding: 0 11px;
  font-size: 12px; font-weight: 600; color: #003878; background: #fff;
  border: 1px solid #cfd9e5; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.calendar-nav .po-werkzeug:hover, .calendar-nav .po-mehr.offen > .po-werkzeug { background: #eef4fb; border-color: #9fb8d6; }
.po-trenner { display: inline-block; width: 1px; height: 20px; background: #dfe5ec; margin: 0 2px; flex: none; }
.po-zaehler { margin-left: 2px; background: #b45309; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 800; line-height: 16px; }

/* Legende/Filter: kleine Punkte statt bunter Chips; aus = hohler Punkt, blasser Text */
.type-filters { gap: 2px 8px; align-items: center; }
.type-filters :is(.type-filter, .exchange-toggle) {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 6px;
  border: 0; border-radius: 6px; background: transparent !important; color: #1d2b3a;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.type-filters .type-filter::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #94a3b8; box-sizing: border-box; }
.type-filters .type-filter[data-type="all"]::before { background: var(--blue-800, #003878); }
.type-filters .type-filter[data-type="repair"]::before { background: var(--repair-color, #ef4444); }
.type-filters .type-filter[data-type="neumontage"]::before { background: var(--neumontage-color, #10b981); }
.type-filters .type-filter[data-type="servicetm"]::before { background: var(--servicetm-color, #8b5cf6); }
.type-filters .type-filter[data-type="wartung"]::before { background: var(--wartung-color, #f59e0b); }
.type-filters .type-filter[data-type="service"]::before { background: var(--service-color, #3b82f6); }
.type-filters .type-filter[data-type="task"]::before { background: var(--task-color, #6366f1); }
.type-filters .type-filter:not(.active)::before { background: transparent !important; border: 1.5px solid #94a3b8; }
.type-filters :is(.type-filter, .exchange-toggle):not(.active) { color: #94a3b8; }
.type-filters :is(.type-filter, .exchange-toggle):hover { background: #f1f5f9 !important; }
.type-filters .exchange-toggle { margin-left: 4px; }
.type-filters .exchange-toggle.active { color: #334155; }

/* Terminliste / Zeitraster als Umschalter */
.week-layout { display: inline-flex; border: 1px solid #cfd9e5; border-radius: 7px; overflow: hidden; font-size: 0; }
.week-layout [data-week-layout] { border: 0; border-radius: 0; padding: 5px 10px; font-size: 12px; }
.week-layout [data-week-layout] + [data-week-layout] { border-left: 1px solid #cfd9e5; }

/* Ansicht-Umschalter (routes.js) kompakter */
#routeViewBar { padding: 5px 16px; gap: 6px; font-size: 12px; }
#routeViewBar button { padding: 4px 10px; font-size: 12px; }

/* Teamwoche: helle Outline-Knöpfe (global ist .btn.secondary für den blauen Kopf gedacht) */
.team-week-header .btn.secondary { background: #fff; color: #003878; border: 1px solid #cfd9e5; }

/* ── Linke Auftragsliste: kompakte Suche + Filter, ruhige Karten ── */
.order-panel .search-box { display: flex; gap: 6px; align-items: center; }
.order-panel .search-box input { flex: 1 1 auto; min-width: 0; }
#workflowOverviewButton {
  flex: none; width: auto; margin-top: 0; min-height: 34px; padding: 0 10px; font-size: 12px;
  background: #fff; color: #003878; border: 1px solid #cfd9e5; border-radius: 8px; white-space: nowrap;
}
@media (min-width: 769px) {
  .order-panel .panel-header { padding: 8px 10px; }
  .order-panel .search-box input { padding: 7px 12px; font-size: 13px; }
  .order-panel .po-filterzeile { padding: 6px 0 0 !important; gap: 5px !important; }
  .order-panel .panel-header select {
    height: 30px; padding: 3px 8px !important; font-size: 12px !important; font-weight: 500 !important;
    color: #1d2b3a !important; background-color: #fff !important; border: 1px solid #cfd9e5 !important;
    border-radius: 7px !important; flex: 1 1 100px; min-width: 0; max-width: 100%;
  }
}
/* Badges auf den Karten: gleiche, kleine Form (Farben = Bedeutung, bleiben) */
.order-card .order-id { gap: 3px 4px; }
.order-card .order-id > span {
  margin-left: 0 !important; padding: 0 6px !important; border-radius: 4px !important;
  font-size: 10px !important; font-weight: 600 !important; line-height: 16px;
}

/* ── Auftragsdetail ─────────────────────────────────────────────────────── */
/* Kopf und Fuss bleiben beim Scrollen stehen */
.od-modal .modal-header.od-kopf { align-items: flex-start; gap: 12px; position: sticky; top: 0; z-index: 6; background: #fff; }
.od-modal .modal-footer.od-fuss { position: sticky; bottom: 0; z-index: 6; background: #f8fafc; }
.od-kopf-text { flex: 1; min-width: 0; }
#odTitel { font-size: 17px; line-height: 1.3; color: #1d2b3a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-kennung { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.od-chip { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; }
.od-chip-auftrag { display: none; }   /* Nummer steht im Titel */
.od-typ { padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.od-typ:empty { display: none; }
.od-link-btn { padding: 2px 6px; font-size: 11.5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #1d4ed8; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Normalfall als Link; Warnfall («Typ stimmt nicht?», rötlich gesetzt von loadOrderTypeInfo) bleibt sichtbar markiert */
#orderTypeFixBtn:not([style*="254, 242, 242"]):not([style*="fef2f2"]) { background: transparent !important; border-color: transparent !important; }

/* EINE Aktionsleiste */
.od-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.od-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.od-gruppe + .od-gruppe { padding-left: 14px; border-left: 1px solid #dfe5ec; }
.od-gruppe-label { order: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; margin-right: 2px; }
.od-aktionen > .od-mehr { margin-left: auto; }
.od-aktionen :is(.od-btn, #pfgSchnellFotos, #pfgSchnellZeichnungen) {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-height: 30px;
  margin: 0 !important; padding: 5px 11px !important; border: 1px solid #cfd9e5 !important; border-radius: 7px !important;
  background: #fff !important; color: #003878 !important; font-size: 12px !important; font-weight: 600 !important;
  line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.od-aktionen :is(.od-btn, #pfgSchnellFotos, #pfgSchnellZeichnungen):hover { background: #eef4fb !important; border-color: #9fb8d6 !important; }
.od-aktionen .od-btn.od-primaer { background: #003878 !important; border-color: #003878 !important; color: #fff !important; }
.od-aktionen .od-btn.od-primaer:hover { background: #002c60 !important; }
/* Reihenfolge «Ansehen»: Fotos · Zeichnungen · Unterlagen · Objekt-Akte · Detailauftrag */
#pfgSchnellFotos { order: 1; }
#pfgSchnellZeichnungen { order: 2; }
#orderDetailSharePoint { order: 3; }
#orderDetailSharePoint::before { content: "\1F4C2"; }
.od-objektakte { order: 4; }
.od-pipeline { order: 5; }
.od-mehr .po-mehr-liste { min-width: 240px; }

/* Verknüpfte Angebote: neutral statt türkis */
#orderDetailAngebote > div { background: #f8fafc !important; border-color: #e2e8f0 !important; }

/* Einheitliche Karten: gleiche Kopfzeile, Abstand, Rahmen */
#orderDetailModal :is(.od-karte, #orderPreparation, #repairWorkflow) {
  display: block; margin: 0 0 12px; padding: 12px 14px; background: #fff;
  border: 1px solid #dfe5ec; border-radius: 10px; font-size: 13px; scroll-margin-top: 130px;
}
#orderDetailModal #orderPreparation:empty, #orderDetailModal #repairWorkflow:empty { display: none; }
#orderDetailModal :is(#auftragTermine, #slotVorschlaege, #orderPreparation, #repairWorkflow, #planAblauf) { scroll-margin-top: 130px; }
#orderDetailModal .od-karte-kopf,
#orderDetailModal :is(#orderPreparation, #repairWorkflow) > .prep-title:first-child {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin: -12px -14px 10px; padding: 9px 14px; background: #f8fafc;
  border-bottom: 1px solid #edf1f5; border-radius: 10px 10px 0 0;
  font-size: 13px; font-weight: 700; color: #1d3a5c;
}
#orderDetailModal :is(#orderPreparation, #repairWorkflow) > .prep-title:first-child strong { font-size: 13px; color: #1d3a5c; }
#orderDetailModal .od-karte-kopf small { font-weight: 400; font-size: 11.5px; color: #64748b; }
#orderDetailModal details.od-karte > summary.od-karte-kopf { cursor: pointer; list-style: none; user-select: none; }
#orderDetailModal details.od-karte > summary::-webkit-details-marker { display: none; }
#orderDetailModal details.od-karte > summary::before { content: "\25B8"; color: #64748b; display: inline-block; transition: transform .15s; }
#orderDetailModal details.od-karte[open] > summary::before { transform: rotate(90deg); }
#orderDetailModal details.od-karte:not([open]) > summary { margin-bottom: -12px; border-bottom: 0; border-radius: 10px; }
.od-unterkopf { margin: 4px 0 6px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
#orderDetailModal .od-karte .form-group:last-child { margin-bottom: 0; }

/* Termine: Rahmen der Terminliste übernimmt die Karte; Farbtext (eingeplant/zurück) bleibt als Status */
#auftragTermine > div { padding: 0 !important; background: transparent !important; border: 0 !important; }

/* Kalendereintrag «Dispo Neumontagen» (dispo-calendar.js): nur die Kalender-Zeile, nicht die zweite Belegkette */
#orderDetailModal .dk-planung-row .dk-lz { display: none !important; }
#orderDetailModal .dk-planung-row { margin: 0 0 10px; padding: 7px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
#orderDetailModal .dk-planung-row:not(:has(.dispo-cal-slot:not(:empty))) { display: none !important; }
#orderDetailModal .od-aktionen > .dk-planung-row { display: none !important; }

/* Fuss: Outline statt bunter Knöpfe, Speichern bleibt Primär, «Fix» behält seine Statusfarbe */
.od-fuss .od-fuss-btn { background: #fff; color: #003878; border: 1px solid #cfd9e5; }
.od-fuss .od-fuss-btn:hover { background: #eef4fb; }

@media (max-width: 640px) {
  .od-gruppe + .od-gruppe { padding-left: 0; border-left: 0; }
  .od-aktionen > .od-mehr { margin-left: 0; }
  #odTitel { white-space: normal; font-size: 15px; }
}
}

/* 19.10.2026: «Mehr» im Auftragsdialog steht ganz rechts – Liste rechtsbündig öffnen (lief aus dem Dialog, abgeschnitten + Querscrollen) */
.od-mehr > .po-mehr-liste { left: auto; right: 0; }