/* SERVE_DRIVER_FILE_OPS_20260929 */


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

.serve-employee-schedule-panel{
 margin:
  24px 28px 0;

 padding:
  20px;

 box-sizing:border-box;

 border:
  1px solid #e2e2e7;

 border-radius:18px;

 background:#fff;
}


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

 gap:20px;

 margin-bottom:16px;
}


.serve-employee-eyebrow{
 display:block;

 margin-bottom:4px;

 color:#85858b;

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

 letter-spacing:.04em;

 text-transform:uppercase;
}


.serve-employee-schedule-head h3{
 margin:0;

 font-size:16px;
 line-height:1.2;
}


.serve-employee-open-shift-plan{
 min-height:40px;

 flex:0 0 auto;

 padding:
  0 14px;

 border:
  1px solid #dcdce1;

 border-radius:11px;

 background:#fff;
 color:#111;

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

 cursor:pointer;
}


.serve-employee-open-shift-plan:hover{
 background:#f5f5f7;
}


.serve-shift-summary-grid{
 display:grid;

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

 gap:10px;
}


.serve-shift-summary-card{
 min-width:0;

 padding:
  13px 14px;

 border-radius:13px;

 background:#f5f5f7;
}


.serve-shift-summary-card > span{
 display:block;

 margin-bottom:6px;

 color:#85858b;

 font-size:9px;
 font-weight:760;
}


.serve-shift-summary-card strong{
 display:block;

 overflow:hidden;

 color:#111;

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

 text-overflow:ellipsis;

 white-space:nowrap;
}


.serve-shift-summary-card small{
 display:block;

 margin-top:4px;

 overflow:hidden;

 color:#85858b;

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

 text-overflow:ellipsis;

 white-space:nowrap;
}


/* ============================================================
   VERLAUF
   ============================================================ */

.serve-history-clickable{
 cursor:pointer;

 transition:
  background .12s ease;
}


.serve-history-clickable:hover{
 background:#fafafa;
}


.serve-history-detail-overlay{
 position:fixed;
 inset:0;

 z-index:8900;

 display:none;
 align-items:center;
 justify-content:center;

 padding:24px;

 background:
  rgba(20,20,24,.28);

 backdrop-filter:
  blur(4px);
}


.serve-history-detail-overlay.open{
 display:flex;
}


.serve-history-detail-modal{
 position:relative;

 width:
  min(
   540px,
   calc(100vw - 32px)
  );

 max-height:
  calc(100vh - 48px);

 overflow:auto;

 box-sizing:border-box;

 padding:28px;

 border:
  1px solid #e2e2e7;

 border-radius:24px;

 background:#fff;

 box-shadow:
  0 28px 80px
  rgba(0,0,0,.18);
}


.serve-history-detail-close{
 position:absolute;

 top:18px;
 right:18px;

 width:40px;
 height:40px;

 display:grid;
 place-items:center;

 border:0;
 border-radius:50%;

 background:#f1f1f3;
 color:#111;

 font-size:22px;

 cursor:pointer;
}


.serve-history-detail-category{
 display:inline-flex;
 align-items:center;

 min-height:28px;

 padding:
  0 9px;

 border-radius:8px;

 background:#f1f1f3;
 color:#55555b;

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


.serve-history-detail-modal h3{
 margin:
  14px 50px 4px 0;

 font-size:21px;
 line-height:1.25;
}


.serve-history-detail-time{
 margin:
  0 0 20px;

 color:#85858b;

 font-size:10px;
}


.serve-history-detail-grid{
 display:grid;

 grid-template-columns:
  1fr 1fr;

 gap:10px;
}


.serve-history-detail-field{
 min-width:0;

 padding:12px 13px;

 border-radius:12px;

 background:#f5f5f7;
}


.serve-history-detail-field span{
 display:block;

 margin-bottom:5px;

 color:#85858b;

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

 text-transform:uppercase;
}


.serve-history-detail-field strong{
 display:block;

 overflow-wrap:anywhere;

 color:#111;

 font-size:11px;
 font-weight:750;
}


@media(max-width:900px){

 .serve-employee-schedule-panel{
  margin:
   16px 16px 0;
 }


 .serve-employee-schedule-head{
  align-items:flex-start;
  flex-direction:column;
 }


 .serve-shift-summary-grid{
  grid-template-columns:
   1fr 1fr;
 }


 .serve-history-detail-grid{
  grid-template-columns:1fr;
 }

}
