/* SERVE_DRIVER_PRESENCE_STATUS_20260929 */


/* ============================================================
   GEMEINSAM
   ============================================================ */

.serve-presence-dot{
 width:7px;
 height:7px;

 flex:0 0 7px;

 border-radius:50%;

 background:#9b9ba1;
}


.tone-success
.serve-presence-dot{
 background:#24a45a;
}


.tone-warning
.serve-presence-dot{
 background:#e19a24;
}


.tone-info
.serve-presence-dot{
 background:#4d78d7;
}


.tone-muted
.serve-presence-dot{
 background:#aaaab0;
}


/* ============================================================
   PERSONALAKTE
   ============================================================ */

.serve-employee-presence-bar{
 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:20px;

 padding:
  0 28px 16px;

 box-sizing:border-box;
}


.serve-presence-state{
 min-height:34px;

 flex:0 0 auto;

 display:inline-flex;
 align-items:center;

 gap:7px;

 padding:
  0 11px;

 border-radius:10px;

 background:#f3f3f5;
 color:#55555b;

 font-size:9px;
}


.serve-presence-state.tone-success{
 background:#edf8f1;
 color:#207b45;
}


.serve-presence-state.tone-warning{
 background:#fff7e8;
 color:#9a6815;
}


.serve-presence-state.tone-info{
 background:#edf3ff;
 color:#395fae;
}


.serve-presence-state strong{
 font-weight:800;
}


.serve-presence-facts{
 flex:1 1 auto;

 display:flex;
 align-items:center;
 justify-content:flex-end;

 gap:18px;

 min-width:0;

 color:#85858b;

 font-size:8px;
}


.serve-presence-facts span{
 min-width:0;

 overflow:hidden;

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-presence-facts b{
 margin-right:4px;

 color:#55555b;

 font-weight:800;
}


/* ============================================================
   EINSATZ: PLAN / IST
   ============================================================ */

.serve-employee-presence-comparison{
 display:grid;

 grid-template-columns:
  minmax(0,1fr)
  auto
  minmax(0,1fr)
  minmax(220px,1.15fr);

 align-items:center;

 gap:10px;

 margin-bottom:15px;
}


.serve-presence-compare-item{
 min-width:0;

 padding:11px 13px;

 border-radius:12px;

 background:#f5f5f7;
}


.serve-presence-compare-item span{
 display:block;

 margin-bottom:4px;

 color:#85858b;

 font-size:8px;
 font-weight:800;

 text-transform:uppercase;
}


.serve-presence-compare-item strong{
 display:block;

 overflow:hidden;

 color:#111;

 font-size:10px;
 font-weight:800;

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-presence-compare-arrow{
 color:#aaaab0;

 font-size:15px;
}


.serve-presence-compare-result{
 min-height:52px;

 display:flex;
 align-items:center;

 gap:9px;

 padding:
  8px 12px;

 box-sizing:border-box;

 border-radius:12px;

 background:#f5f5f7;
}


.serve-presence-compare-result.tone-success{
 background:#edf8f1;
}


.serve-presence-compare-result.tone-warning{
 background:#fff7e8;
}


.serve-presence-compare-result.tone-info{
 background:#edf3ff;
}


.serve-presence-compare-result > div{
 min-width:0;
}


.serve-presence-compare-result strong,
.serve-presence-compare-result small{
 display:block;

 overflow:hidden;

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-presence-compare-result strong{
 color:#111;

 font-size:10px;
 font-weight:800;
}


.serve-presence-compare-result small{
 margin-top:3px;

 color:#77777d;

 font-size:8px;
}


/* ============================================================
   FAHRERLISTE
   ============================================================ */

.serve-driver-live-status{
 display:inline-flex;
 align-items:center;

 gap:5px;

 margin-left:8px;

 padding:
  4px 7px;

 border-radius:8px;

 background:#f2f2f4;
 color:#77777d;

 font-size:7px;
 font-weight:800;

 white-space:nowrap;
}


.serve-driver-live-status.tone-success{
 background:#edf8f1;
 color:#207b45;
}


.serve-driver-live-status.tone-warning{
 background:#fff7e8;
 color:#9a6815;
}


.serve-driver-live-status.tone-info{
 background:#edf3ff;
 color:#395fae;
}


.serve-driver-live-status
.serve-presence-dot{
 width:5px;
 height:5px;

 flex-basis:5px;
}


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

@media(max-width:950px){

 .serve-employee-presence-bar{
  align-items:flex-start;
  flex-direction:column;

  gap:9px;

  padding:
   0 16px 13px;
 }


 .serve-presence-facts{
  width:100%;

  justify-content:flex-start;

  flex-wrap:wrap;

  gap:7px 14px;
 }


 .serve-employee-presence-comparison{
  grid-template-columns:
   1fr 1fr;
 }


 .serve-presence-compare-arrow{
  display:none;
 }


 .serve-presence-compare-result{
  grid-column:
   1 / -1;
 }

}


/* SERVE_EMPLOYEE_PRESENCE_LAYOUT_CSS_REPAIR_20260929 */

/*
 * Die Presence-Leiste ist ein eigener kompakter Streifen.
 * Sie darf die Tab-Navigation nicht aufziehen.
 */

#serveEmployeeFileNav{
 min-height:0 !important;
 height:auto !important;

 padding-bottom:0 !important;

 justify-content:flex-start !important;
 align-content:flex-start !important;
}


#serveEmployeePresenceBar{
 position:relative !important;

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

 flex:0 0 auto !important;

 margin:0 !important;

 padding:
  8px 28px 12px !important;

 box-sizing:border-box;
}


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


#serveEmployeePresenceBar
.serve-presence-facts{
 min-height:32px;
}


/*
 * Kein künstlicher Leerraum zwischen
 * Navigation und eigentlichem Akteninhalt.
 */
#employeeFileOverlay
#serveEmployeeFileNav + #serveEmployeePresenceBar{
 margin-top:0 !important;
}


/*
 * Kleine Fenster.
 */
@media(max-width:950px){

 #serveEmployeePresenceBar{
  padding:
   7px 16px 10px !important;
 }

}