/* SERVE_EMPLOYEE_MODAL_STABLE_CSS_20260929 */


/* ============================================================
   OVERLAY / MODAL
   ============================================================ */

#employeeFileOverlay{
 overflow:hidden !important;
}


body.crm-scaled-view
#employeeFileOverlay{
 overflow:hidden !important;

 align-items:center !important;

 padding:
  8px 16px !important;
}


#employeeFileOverlay
.employee-file-modal{
 display:block !important;

 width:
  min(
   1220px,
   calc(100vw - 38px)
  ) !important;

 height:
  min(
   860px,
   calc(
    var(
     --crm-effective-vh,
     100dvh
    )
    - 24px
   )
  ) !important;

 max-height:
  calc(
   var(
    --crm-effective-vh,
    100dvh
   )
   - 24px
  ) !important;

 min-height:0 !important;

 padding:0 !important;

 overflow:hidden !important;

 box-sizing:border-box !important;
}


body.crm-scaled-view
#employeeFileOverlay
> .employee-file-modal{
 overflow:hidden !important;
}


/* ============================================================
   CONTENT IST DER EINZIGE LAYOUT-HOST
   ============================================================ */

#employeeFileContent{
 display:flex !important;

 flex-direction:column !important;

 width:100% !important;
 height:100% !important;

 min-width:0 !important;
 min-height:0 !important;

 overflow:hidden !important;

 box-sizing:border-box !important;
}


/* ============================================================
   HEADER
   ============================================================ */

#employeeFileContent
> .employee-file-head{
 flex:
  0 0 auto !important;

 min-width:0 !important;
}


/* ============================================================
   ALTEN TAB-SCROLLER KOMPLETT ENTFERNEN
   ============================================================ */

#employeeFileContent
> .employee-file-tabs{
 display:none !important;

 width:0 !important;
 height:0 !important;

 min-width:0 !important;
 min-height:0 !important;

 margin:0 !important;
 padding:0 !important;

 overflow:hidden !important;

 border:0 !important;
}


/* ============================================================
   NEUER FESTER CHROME-BEREICH
   ============================================================ */

#serveEmployeeChrome{
 flex:
  0 0 auto !important;

 display:block;

 width:100%;

 min-width:0;

 overflow:hidden;

 background:#fff;

 border-bottom:
  1px solid #e5e5e8;
}


#serveEmployeeNavMount,
#serveEmployeePresenceMount{
 display:block;

 width:100%;

 min-width:0;

 overflow:hidden;
}


/* ============================================================
   5ER-NAVIGATION
   ============================================================ */

#serveEmployeeNavMount
#serveEmployeeFileNav{
 display:block !important;

 width:100% !important;

 min-width:0 !important;
 min-height:0 !important;

 height:auto !important;

 margin:0 !important;
 padding:0 !important;

 flex:none !important;

 overflow:hidden !important;

 box-sizing:border-box !important;

 background:#fff !important;
}


#serveEmployeeFileNav
.serve-employee-file-primary{
 width:100% !important;
 max-width:100% !important;

 min-width:0 !important;

 overflow-x:auto !important;
 overflow-y:hidden !important;

 box-sizing:border-box !important;

 scrollbar-width:none !important;
}


#serveEmployeeFileNav
.serve-employee-file-primary::-webkit-scrollbar{
 display:none !important;
}


#serveEmployeeFileNav
.serve-employee-file-secondary{
 max-width:
  calc(100% - 48px) !important;

 min-width:0 !important;

 overflow-x:auto !important;
 overflow-y:hidden !important;

 scrollbar-width:none !important;
}


#serveEmployeeFileNav
.serve-employee-file-secondary::-webkit-scrollbar{
 display:none !important;
}


/* ============================================================
   PRESENCE
   ============================================================ */

#serveEmployeePresenceMount:empty{
 display:none;
}


#serveEmployeePresenceMount
#serveEmployeePresenceBar{
 position:static !important;

 display:flex !important;

 align-items:center !important;
 justify-content:space-between !important;

 width:100% !important;
 max-width:100% !important;

 min-width:0 !important;
 min-height:0 !important;

 height:auto !important;

 margin:0 !important;

 padding:
  0 28px 12px !important;

 gap:18px !important;

 flex:none !important;

 overflow:hidden !important;

 box-sizing:border-box !important;
}


#serveEmployeePresenceBar
.serve-presence-facts{
 min-width:0;

 flex-wrap:wrap;

 justify-content:flex-end;
}


/* ============================================================
   EINZIGER NORMALER SCROLLER
   ============================================================ */

#employeeFileContent
> .employee-file-body{
 position:relative !important;

 flex:
  1 1 auto !important;

 width:100% !important;

 min-width:0 !important;
 min-height:0 !important;

 height:auto !important;

 overflow-x:hidden !important;
 overflow-y:auto !important;

 box-sizing:border-box !important;

 overscroll-behavior:contain;
}


#employeeFileContent
> .employee-file-body
> *{
 max-width:100%;

 min-width:0;
}


/* ============================================================
   EINSATZ
   ============================================================ */

.employee-file-body
> #serveEmployeeSchedulePanel{
 display:block !important;

 width:100% !important;
 max-width:100% !important;

 min-width:0 !important;

 margin:
  0 0 20px !important;

 padding:20px !important;

 box-sizing:border-box !important;
}


.employee-file-body
#serveEmployeePresenceComparison{
 width:100% !important;

 min-width:0 !important;

 box-sizing:border-box !important;
}


.employee-file-body
.serve-shift-summary-grid{
 width:100% !important;

 min-width:0 !important;

 grid-template-columns:
  repeat(
   4,
   minmax(0,1fr)
  ) !important;
}


.employee-file-body
.serve-shift-summary-card{
 min-width:0 !important;
}


/* ============================================================
   EXPLORER
   ============================================================ */

.employee-file-body.serve-explorer-shell-host{
 position:relative !important;
}


.employee-file-body
> #serveEmployeeExplorer{
 position:absolute !important;

 inset:0 !important;

 width:auto !important;
 height:auto !important;

 min-width:0 !important;
 min-height:0 !important;

 overflow:hidden !important;

 box-sizing:border-box !important;

 background:#fff;

 z-index:60;
}


.employee-file-body
> #serveEmployeeExplorer[hidden]{
 display:none !important;
}


#serveEmployeeExplorer
.serve-explorer-content{
 min-width:0 !important;
 min-height:0 !important;

 overflow:auto !important;
}


.serve-explorer-context-menu{
 z-index:100100 !important;
}


.serve-explorer-dialog-overlay,
.serve-explorer-preview-overlay{
 z-index:100200 !important;
}


/* ============================================================
   KEINE VERSEHENTLICHEN HORIZONTALEN SCROLLBARS
   ============================================================ */

#employeeFileOverlay,
#employeeFileOverlay .employee-file-modal,
#employeeFileContent,
#serveEmployeeChrome,
#serveEmployeeNavMount,
#serveEmployeePresenceMount,
#employeeFileContent > .employee-file-body{
 scrollbar-gutter:auto !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

 #employeeFileOverlay
 .employee-file-modal{
  width:
   calc(100vw - 20px) !important;

  height:
   calc(
    var(
     --crm-effective-vh,
     100dvh
    )
    - 20px
   ) !important;
 }


 #serveEmployeePresenceMount
 #serveEmployeePresenceBar{
  align-items:flex-start !important;

  flex-direction:column;

  padding:
   0 16px 10px !important;
 }


 #serveEmployeePresenceBar
 .serve-presence-facts{
  justify-content:flex-start;
 }


 .employee-file-body
 .serve-shift-summary-grid{
  grid-template-columns:
   repeat(
    2,
    minmax(0,1fr)
   ) !important;
 }

}


@media(max-width:600px){

 .employee-file-body
 .serve-shift-summary-grid{
  grid-template-columns:
   1fr !important;
 }

}


/* SERVE_EMPLOYEE_MODAL_HEADER_ALIGNMENT_20260929 */


/* ============================================================
   GEMEINSAMER AKTENKOPF
   ============================================================ */

#serveEmployeeChrome{
 width:100% !important;

 min-width:0 !important;

 box-sizing:border-box !important;

 padding:
  12px 28px 14px !important;

 overflow:hidden !important;

 background:#fff !important;
}


/* ============================================================
   HAUPTNAVIGATION
   ============================================================ */

#serveEmployeeNavMount{
 width:100% !important;

 min-width:0 !important;

 margin:0 !important;
 padding:0 !important;

 overflow:hidden !important;
}


#serveEmployeeNavMount
#serveEmployeeFileNav{
 width:100% !important;

 margin:0 !important;
 padding:0 !important;

 overflow:hidden !important;
}


#serveEmployeeNavMount
.serve-employee-file-primary{
 display:flex !important;

 align-items:center !important;

 width:100% !important;

 min-width:0 !important;

 gap:18px !important;

 margin:0 !important;

 padding:0 !important;

 overflow-x:auto !important;
 overflow-y:hidden !important;

 box-sizing:border-box !important;

 scrollbar-width:none !important;
}


#serveEmployeeNavMount
.serve-employee-file-primary::-webkit-scrollbar{
 display:none !important;
}


#serveEmployeeNavMount
.serve-employee-file-primary-btn{
 min-height:46px !important;

 padding:
  0 18px !important;

 border-radius:12px !important;

 flex:
  0 0 auto !important;
}


/* ============================================================
   UNTERNAVIGATION
   ============================================================ */

#serveEmployeeNavMount
.serve-employee-file-secondary{
 width:max-content !important;

 max-width:100% !important;

 margin:
  8px 0 0 !important;

 padding:3px !important;

 gap:3px !important;

 box-sizing:border-box !important;

 overflow-x:auto !important;
 overflow-y:hidden !important;

 border-radius:11px !important;

 background:#f1f1f3 !important;

 scrollbar-width:none !important;
}


#serveEmployeeNavMount
.serve-employee-file-secondary::-webkit-scrollbar{
 display:none !important;
}


#serveEmployeeNavMount
.serve-employee-file-secondary[hidden]{
 display:none !important;
}


#serveEmployeeNavMount
.serve-employee-file-secondary-btn{
 min-height:34px !important;

 padding:
  0 13px !important;

 border-radius:8px !important;
}


/* ============================================================
   PRESENCE

   gleiche linke/rechte Kante wie Navigation
   ============================================================ */

#serveEmployeePresenceMount{
 width:100% !important;

 min-width:0 !important;

 margin:0 !important;
 padding:0 !important;

 overflow:hidden !important;
}


#serveEmployeePresenceMount:empty{
 display:none !important;
}


#serveEmployeePresenceMount
#serveEmployeePresenceBar{
 display:flex !important;

 align-items:center !important;
 justify-content:space-between !important;

 width:100% !important;

 min-width:0 !important;

 margin:
  8px 0 0 !important;

 padding:0 !important;

 gap:18px !important;

 box-sizing:border-box !important;

 overflow:hidden !important;
}


#serveEmployeePresenceBar
.serve-presence-state{
 min-height:32px !important;

 flex:
  0 0 auto !important;
}


#serveEmployeePresenceBar
.serve-presence-facts{
 flex:
  1 1 auto !important;

 min-width:0 !important;

 display:flex !important;

 align-items:center !important;
 justify-content:flex-end !important;

 gap:18px !important;

 overflow:hidden !important;
}


#serveEmployeePresenceBar
.serve-presence-facts span{
 flex:
  0 1 auto !important;

 min-width:0 !important;

 white-space:nowrap !important;
}


/* ============================================================
   INHALT

   gleiche Außenkante wie Kopf
   ============================================================ */

#employeeFileContent
> .employee-file-body{
 padding:
  22px 26px 28px !important;
}


/* ============================================================
   EINSATZPANEL

   Body hat bereits Innenabstand.
   Deshalb hier KEIN zusätzlicher Außenabstand.
   ============================================================ */

.employee-file-body
> #serveEmployeeSchedulePanel{
 width:100% !important;

 max-width:100% !important;

 margin:
  0 0 20px !important;

 box-sizing:border-box !important;
}


/* ============================================================
   DOKUMENTE

   Explorer ersetzt den Body komplett und darf deshalb
   dessen normalen Padding nicht doppelt bekommen.
   ============================================================ */

.employee-file-body:has(
 #serveEmployeeExplorer:not([hidden])
){
 padding:0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

 #serveEmployeeChrome{
  padding:
   10px 16px 12px !important;
 }


 #serveEmployeeNavMount
 .serve-employee-file-primary{
  gap:7px !important;
 }


 #serveEmployeeNavMount
 .serve-employee-file-primary-btn{
  min-height:42px !important;

  padding:
   0 17px !important;
 }


 #serveEmployeePresenceMount
 #serveEmployeePresenceBar{
  align-items:flex-start !important;

  flex-direction:column !important;

  gap:7px !important;
 }


 #serveEmployeePresenceBar
 .serve-presence-facts{
  width:100% !important;

  justify-content:flex-start !important;

  flex-wrap:wrap !important;
 }

}

/* SERVE_EMPLOYEE_MODAL_NO_SCROLL_20261001 */

/*
 * Desktop-Personalakte:
 * verfügbare Viewport-Höhe vollständig verwenden.
 *
 * Der alte 860px-Deckel hat unnötig Platz verschenkt.
 */
@media (min-width:901px) and (min-height:700px){

 #employeeFileOverlay
 .employee-file-modal{
  height:
   calc(
    var(
     --crm-effective-vh,
     100dvh
    )
    - 12px
   ) !important;

  max-height:
   calc(
    var(
     --crm-effective-vh,
     100dvh
    )
    - 12px
   ) !important;
 }


 /*
  * Der Inhalt soll innerhalb der Akte vollständig sichtbar
  * sein und nicht als eigener Scrollbereich funktionieren.
  */
 #employeeFileContent
 > .employee-file-body{
  overflow-x:hidden !important;
  overflow-y:hidden !important;

  padding:
   14px 22px 16px !important;

  scrollbar-width:none !important;
 }


 #employeeFileContent
 > .employee-file-body::-webkit-scrollbar{
  display:none !important;
 }


 /*
  * Einsatzpanel etwas kompakter.
  */
 .employee-file-body
 > #serveEmployeeSchedulePanel{
  margin:
   0 0 10px !important;

  padding:
   14px !important;
 }


 /*
  * Lange Notizfelder sind der größte vertikale Platzverbraucher.
  * Sie bleiben vollständig nutzbar, benötigen aber nicht mehr
  * knapp 140–160px Höhe.
  */
 #employeeFileContent
 > .employee-file-body
 textarea{
  min-height:88px !important;
  max-height:108px !important;
  height:96px !important;

  resize:none !important;
 }


 /*
  * Normale Eingabefelder leicht kompakter, ohne den
  * bisherigen visuellen Stil zu verändern.
  */
 #employeeFileContent
 > .employee-file-body
 input:not([type="checkbox"]):not([type="radio"]),
 #employeeFileContent
 > .employee-file-body
 select{
  min-height:42px !important;
 }


 /*
  * Explorer bleibt davon vollständig unberührt.
  */
 #employeeFileContent
 > .employee-file-body:has(
  #serveEmployeeExplorer:not([hidden])
 ){
  padding:0 !important;
 }

}