/* Mobile Ausbilder-Ansicht */
.mobile-trainer{display:none}
.mobile-operations{display:none}
.mobile-trainer-header{position:sticky;top:0;z-index:40;background:#17324d;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.mobile-trainer-header strong{font-size:16px}
.mobile-trainer-tabs{position:sticky;top:52px;z-index:39;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;background:#eef2f7;border-bottom:1px solid var(--line)}
.mobile-trainer-tabs button{border:0;box-shadow:none;background:transparent;font-weight:700;position:relative;font-size:11px;padding:8px 3px}
.mobile-trainer-tabs button.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px #0002}
.mobile-trainer-body{padding:12px;display:grid;gap:12px}
.mobile-section-title{font-size:13px;font-weight:850;color:#334155;margin:8px 0 2px}
.mobile-day-group{display:grid;gap:8px}
.mobile-day-head{font-size:13px;font-weight:850;color:#475569;padding:4px 2px}
.mobile-assignment-card{border:1px solid var(--line);border-left:6px solid var(--status-accent,#64748b);border-radius:12px;background:var(--status-bg,#fff);padding:12px;box-shadow:var(--shadow);cursor:pointer}
.mobile-assignment-card .date{font-size:12px;font-weight:800;color:#475569}
.mobile-assignment-card .title{font-size:16px;font-weight:850;margin-top:3px}
.mobile-assignment-card .meta{font-size:13px;margin-top:5px;line-height:1.45}
.mobile-assignment-card .badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mobile-assignment-card .actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.mobile-assignment-card .actions a,.mobile-assignment-card .actions button{font-size:12px;padding:7px 9px}
.mobile-onsite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.mobile-onsite button{font-size:12px;padding:7px 9px}
.mobile-team-row{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line)}
.mobile-team-row .emp{font-weight:800;font-size:12px}
.mobile-team-row .assignments{display:grid;gap:5px}
.mobile-team-item{padding:8px;border:1px solid var(--line);border-left:5px solid var(--status-accent,#64748b);border-radius:8px;background:var(--status-bg,#fff);font-size:12px;cursor:pointer}
.mobile-empty{padding:18px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:12px}
.mobile-profile-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.mobile-profile-card .field{margin-bottom:10px}
.mobile-profile-card .field:last-child{margin-bottom:0}
@media(max-width:760px){
  body.trainer-mobile-mode header.app-header,
  body.trainer-mobile-mode .app-shell,
  body.trainer-mobile-mode .sidebar,
  body.trainer-mobile-mode .planning-nav{display:none!important}
  body.trainer-mobile-mode .mobile-trainer{display:block}
  body.trainer-mobile-mode{background:#f5f7fa}
}


@media(max-width:760px){
  body.trainer-mobile-mode{min-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.trainer-mobile-mode .mobile-trainer{min-height:100dvh}
  body.trainer-mobile-mode .mobile-trainer-body{padding-bottom:32px}
}


/* 11.1.5 – DRK-nahe Oberfläche
   Corporate-Chrome בלבד: Statusfarben der Einsatzplanung bleiben unverändert. */
:root{
  --drk-red:#e60005;
  --drk-blue:#002d55;
  --drk-lightblue:#ebf5ff;
  --drk-black:#000000;
  --drk-white:#ffffff;
}

/* Kopfzeile */
header.app-header{
  background:#fff;
  color:#000;
  border-bottom:3px solid var(--drk-red);
  box-shadow:0 1px 5px rgba(0,0,0,.08);
}
header.app-header h1{
  color:var(--drk-red);
  font-weight:850;
}
header.app-header .status{color:#4b5563}
header.app-header button{
  border-color:#d7d7d7;
  background:#fff;
  color:#111;
}
header.app-header button:hover{
  border-color:var(--drk-red);
  color:var(--drk-red);
}

/* Business Sidebar: DRK-Dunkelblau + roter Aktiv-Akzent */
.business-sidebar{
  background:var(--drk-blue);
  color:#fff;
}
.business-sidebar .sidebar-brand{
  border-bottom-color:rgba(255,255,255,.22);
}
.business-sidebar .sidebar-brand-icon{
  color:#fff;
}
.business-sidebar .sidebar-toggle{
  background:rgba(255,255,255,.10)!important;
}
.business-sidebar button:hover{
  background:rgba(255,255,255,.09);
}
/* !important auf color: der Active-State muss unabhaengig von Verschachtelungstiefe (Haupt-
   punkte vs. .sidebar-submenu button, gleiche Selektor-Spezifitaet, spaetere Regel gewinnt sonst)
   immer die dunkle Schrift auf dem weissen Hintergrund erzwingen - siehe Sidebar-UX-Fix. */
.business-sidebar button.nav-active{
  background:#fff;
  color:var(--drk-blue)!important;
  box-shadow:inset 4px 0 0 var(--drk-red);
}
.business-sidebar button.nav-active .nav-icon{
  color:var(--drk-red)!important;
}
.business-sidebar .sidebar-section-toggle{
  color:#fff!important;
}
.business-sidebar .sidebar-submenu button{
  color:#eaf2f8;
}
.business-sidebar .sidebar-submenu button:hover{
  background:rgba(255,255,255,.09);
}
.business-sidebar .sidebar-footer{
  border-top-color:rgba(255,255,255,.22);
}
.business-sidebar .sidebar-user-copy small{
  color:#c9dae8;
}

/* Einsatzplanungs-Navigation */
.planning-nav{
  background:#fff;
  border-bottom:1px solid #dedede;
}
.view-switch{
  background:#f1f1f1;
}
.view-switch button{
  color:#222;
}
.view-switch button.view-active{
  background:var(--drk-red)!important;
  color:#fff!important;
  border-color:var(--drk-red)!important;
}
#todayBtn{
  border-color:var(--drk-red);
  color:var(--drk-red);
  font-weight:800;
}
#todayBtn:hover{
  background:#fff5f5;
}

/* Allgemeine primäre Aktionen – ohne Kalender-/Statusfarben anzutasten */
button.primary,
.modal-foot button.primary{
  background:var(--drk-red);
  border-color:var(--drk-red);
  color:#fff;
}
button.primary:hover,
.modal-foot button.primary:hover{
  background:#c90004;
  border-color:#c90004;
}

/* Dialoge und Stammdaten */
.modal-head{
  border-bottom:3px solid var(--drk-red);
  background:#fff;
}
.modal-head strong{
  color:#111;
}
.section-title{
  color:var(--drk-red);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(230,0,5,.18);
  border-color:var(--drk-red);
}

/* Dashboard: rote Überschriften, ruhige weiße Flächen */
.dash-panel-head h2{
  color:#111;
}
.dashboard-controls button:hover{
  border-color:var(--drk-red);
  color:var(--drk-red);
}
.kpi .num{
  color:var(--drk-red);
}

/* Mobile Ausbilder */
.mobile-trainer-header{
  background:var(--drk-blue);
  border-bottom:4px solid var(--drk-red);
}
.mobile-trainer-tabs{
  background:#f3f3f3;
}
.mobile-trainer-tabs button.active{
  color:var(--drk-red);
  box-shadow:inset 0 -3px 0 var(--drk-red);
}
.mobile-profile-card button.primary{
  background:var(--drk-red);
}

/* Dezente DRK-Infofläche – nur für generische Hinweise */
.readonly-note{
  background:var(--drk-lightblue);
  border-color:#b4c3d7;
  color:var(--drk-blue);
}


/* 11.1.6 – dunkle Desktop-Kopfzeile analog zur mobilen Ausbilderansicht */
header.app-header{
  background:var(--drk-blue);
  color:#fff;
  border-bottom:4px solid var(--drk-red);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
header.app-header h1{
  color:#fff;
}
header.app-header .status{
  color:#d8e5ef;
}
header.app-header .user-chip{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
header.app-header .role-chip{
  color:#fff;
}
header.app-header button{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
header.app-header button:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.30);
  color:#fff;
}

.qualification-validity-list{display:grid;gap:7px}.qualification-validity-row{display:grid;grid-template-columns:minmax(140px,1fr) 180px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px}.qualification-validity-row label,.checkbox-field label{display:flex;align-items:center;gap:8px;margin:0}.qualification-validity-row input[type="checkbox"],.checkbox-field input{width:auto}.account-status{padding:9px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;margin-bottom:9px;font-size:12px}.password-link-box{margin-top:10px;padding:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;display:grid;gap:7px}.expiry-warning{padding:10px 12px;border:1px solid #f5c76e;border-left:6px solid #d97706;border-radius:10px;background:#fffbeb;color:#78350f}@media(max-width:650px){.qualification-validity-row{grid-template-columns:1fr}}
/* 12.1 – Dialog-Scroll bleibt im Dialog, Hintergrund bleibt stehen */
dialog{
  max-height:min(90vh,calc(100dvh - 24px));
  overflow:hidden;
  overscroll-behavior:contain;
}
dialog[open]{
  display:flex;
  flex-direction:column;
}
dialog[open] > form{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  overflow:hidden;
}
dialog .modal-head,
dialog .modal-foot{
  flex:0 0 auto;
}
dialog .modal-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.modal-open{
  overflow:hidden;
}


/* 12.2 – größere Stammdaten-Popups:
   Das Fenster selbst nutzt mehr Bildschirmhöhe; nur lange Listen scrollen intern. */
#orderDialog,
#customerDialog,
#employeeDialog{
  width:min(1050px,94vw);
  max-width:94vw;
  height:min(860px,90vh);
  max-height:90vh;
  overflow:hidden;
}

#orderDialog .modal-body,
#customerDialog .modal-body,
#employeeDialog .modal-body{
  max-height:none;
  height:auto;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Dialoge als feste Kopf/Inhalt/Fuß-Struktur. */
#orderDialog[open],
#customerDialog[open],
#employeeDialog[open]{
  display:flex;
  flex-direction:column;
}

#orderDialog .modal-head,
#customerDialog .modal-head,
#employeeDialog .modal-head,
#orderDialog .modal-foot,
#customerDialog .modal-foot,
#employeeDialog .modal-foot{
  flex:0 0 auto;
}

#orderDialog .modal-body,
#customerDialog .modal-body,
#employeeDialog .modal-body{
  flex:1 1 auto;
  min-height:0;
}

/* Die eigentlichen Listen dürfen weiterhin scrollen und bekommen deutlich mehr Platz. */
#customerDialog .list,
#employeeDialog .list,
#customerDialog .list-box,
#employeeDialog .list-box,
#customerDialog [id$="List"],
#employeeDialog [id$="List"]{
  max-height:48vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:760px),(max-height:500px) and (max-width:900px){
  #orderDialog,
  #customerDialog,
  #employeeDialog{
    width:96vw;
    max-width:96vw;
    height:92dvh;
    max-height:92dvh;
  }
}

@media(max-width:760px),(max-height:500px) and (max-width:900px){
  body.operations-mobile-mode>header.app-header,body.operations-mobile-mode>.app-shell,body.operations-mobile-mode>.planning-nav,body.operations-mobile-mode>.mobile-trainer{display:none!important}
  body.operations-mobile-mode{background:#f3f5f7;overflow-y:auto;min-height:100dvh}
  body.operations-mobile-mode .mobile-operations{display:block;min-height:100dvh;padding-bottom:74px}
  .mobile-operations-header{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--drk-blue,#002d55);border-bottom:4px solid var(--drk-red,#e60005);color:#fff}
  .mobile-operations-header>div{display:grid}.mobile-operations-header strong{font-size:19px}.mobile-operations-header small{color:#dbeafe}.mobile-operations-header button{margin-left:auto;background:#ffffff18;color:#fff;border-color:#ffffff44}
  .mobile-operations-body{padding:12px;max-width:680px;margin:auto}.mobile-date-nav{display:grid;grid-template-columns:1fr .8fr 1fr;gap:6px;margin-bottom:10px}.mobile-date-nav button{min-height:42px}.mobile-own-assignment{margin-bottom:14px}
  .mobile-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px}.mobile-summary button{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;text-align:left}.mobile-summary button:active{background:#eef5fb}.mobile-summary strong{font-size:20px;color:var(--drk-red)}.mobile-summary span{font-size:11px;font-weight:750;line-height:1.2}.mobile-summary button:first-child{grid-column:1/-1}
  .mobile-situation-group{margin:0 0 14px;scroll-margin-top:74px}.mobile-situation-group h2{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin:0 0 7px;color:#23384d}.mobile-situation-group h2 span{background:#e2e8f0;border-radius:999px;padding:2px 8px;font-size:12px}.mobile-group-list,#mobileEmployeeList,#mobileTaskList{display:grid;gap:8px}
  .mobile-ops-card,.mobile-detail-card{background:#fff;border:1px solid var(--line);border-left:5px solid #64748b;border-radius:10px;padding:10px 11px;box-shadow:0 1px 4px #0001;font-size:13px;line-height:1.45}.mobile-order-card{border-left-color:var(--status-accent,#64748b)}.mobile-ops-card strong{display:block;font-size:14px}.mobile-ops-card b{display:block;margin:3px 0}.mobile-ops-card small{display:block;color:var(--muted);margin-top:3px}.mobile-ops-time{font-size:12px;color:#475569}.mobile-series{margin-top:6px;color:#075985;font-weight:700}.mobile-person-card a,.mobile-order-card a,.mobile-detail-card a{position:relative;z-index:2;display:inline-block;padding:3px 0;color:#075985;font-weight:750}.mobile-call-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.mobile-order-card .mobile-call-action{flex:1 1 180px;padding:8px 9px;border:1px solid #93c5fd;border-radius:8px;background:#eff6ff;text-align:center;text-decoration:none}
  #mobileEmployeeSearch{margin-bottom:10px;min-height:44px}.mobile-detail-card h2{margin:0 0 10px}.mobile-detail-card p{margin:7px 0}.mobile-detail-card button{width:100%;min-height:44px;margin-top:10px}.mobile-operations-body>#mobileDetailView>#mobileDetailBack{margin-bottom:10px;min-height:42px}
  .mobile-operations-tabs{position:fixed;bottom:0;left:0;right:0;z-index:46;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 9px #0002}.mobile-operations-tabs button{min-height:46px;border:0;background:transparent;font-size:11px;font-weight:800;position:relative;padding:4px 2px}.mobile-operations-tabs button.active{color:var(--drk-red);box-shadow:inset 0 -3px 0 var(--drk-red)}
  #mobileAccountView{display:grid;gap:10px}#mobileAccountView button{min-height:44px}
}


/* 12.3 – Tagesansicht */
.day-board{display:grid;gap:12px;max-width:1500px;margin:0 auto}
.day-employee{display:grid;grid-template-columns:230px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.day-employee-head{padding:14px;background:#f8fafc;border-right:1px solid var(--line)}
.day-employee-head strong{font-size:15px}
.day-employee-head .employee-contact{display:block;margin-top:5px;font-size:12px}
.day-employee-head .quals{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.5}
.day-slots{padding:12px;display:grid;gap:10px;min-height:92px}
.day-order{border:1px solid var(--status-border,#d1d5db);border-left:7px solid var(--status-accent,#64748b);border-radius:10px;background:var(--status-bg,#fff);padding:12px;cursor:pointer}
.day-order:hover{filter:brightness(.985)}
.day-order-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.day-order-title{font-size:16px;font-weight:850}
.day-order-time{font-weight:800;white-space:nowrap}
.day-order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;margin-top:10px;font-size:12px}
.day-order-field span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.day-empty{display:flex;align-items:center;justify-content:center;min-height:68px;border:1px dashed #cbd5e1;border-radius:9px;color:var(--muted);cursor:pointer}
.day-empty:hover{background:#f8fafc;border-color:#94a3b8}
.day-multi-note{font-size:11px;color:var(--muted)}
@media(max-width:900px){.day-employee{grid-template-columns:1fr}.day-employee-head{border-right:0;border-bottom:1px solid var(--line)}.day-order-grid{grid-template-columns:1fr 1fr}}


/* 12.3.1 – Datum in der Wochenansicht öffnet den Tag */
.day-header-link{cursor:pointer}
.day-header-link:hover{background:#eef4f8;text-decoration:underline;text-underline-offset:3px}


/* 12.4 – Jahresansicht als eine fortlaufende Tabelle */
.year-continuous{
  display:grid;
  grid-template-columns:repeat(7,minmax(180px,1fr));
  min-width:1260px;
  width:100%;
}
.year-continuous .year-weekday{
  position:sticky;
  top:0;
  z-index:15;
  background:#f8fafc;
  border-bottom:2px solid var(--line);
}
.year-continuous .year-day{
  min-height:210px;
}
.year-continuous .year-blank{
  min-height:80px;
  background:#f8fafc;
  border-color:transparent;
}
.year-continuous .month-date{
  cursor:pointer;
}
.year-continuous .month-date:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Monatserster wird nur dezent markiert, ohne eigene Zwischenüberschrift. */
.year-continuous .year-day[data-date$="-01"]{
  box-shadow:inset 0 3px 0 #cbd5e1;
}


/* 12.5 – Jahresansicht: Suche/Filter + Wochentage bleiben sichtbar */
#planningView.year-mode .toolbar{
  position:sticky;
  top:56px;
  z-index:19;
  margin:0;
  padding:10px 0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
#planningView.year-mode .board-wrap{
  margin-top:10px;
  overflow-x:auto;
  overflow-y:visible;
}
#planningView.year-mode .year-continuous{
  grid-template-columns:repeat(7,minmax(0,1fr));
  min-width:980px;
  width:100%;
}
#planningView.year-mode .year-continuous .year-weekday{
  top:0;
  z-index:18;
  box-shadow:0 2px 4px rgba(15,23,42,.08);
}


/* 12.6 – kompakte Codes in Monat/Jahr */
.month-employee-row{grid-template-columns:38px minmax(0,1fr)}
.month-employee-name{justify-content:center;font-size:10px;letter-spacing:.03em}
.year-continuous .month-employee-row{grid-template-columns:38px minmax(0,1fr)}