/* SERVE_SHIFT_PERIOD_VIEW_20260921 */


/* ============================================================
   WOCHE / MONAT SWITCH
   ============================================================ */

.shift-period-switch{
 display:inline-flex;

 padding:3px;

 border-radius:12px;

 background:#f0f0f3;
}


.shift-period-switch-btn{
 height:36px;

 padding:
  0 14px;

 border:0;
 border-radius:9px;

 background:transparent;
 color:#77777d;

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

 cursor:pointer;
}


.shift-period-switch-btn.active{
 background:#fff;
 color:#111;

 box-shadow:
  0 1px 3px
  rgba(0,0,0,.08);
}


/* ============================================================
   WOCHE UND MONAT:
   KEIN SCROLLEN IM MODAL
   ============================================================ */

.shift-plan-modal.is-period-week
.shift-plan-scroll,

.shift-plan-modal.is-period-month
.shift-plan-scroll{
 display:flex;

 min-height:0;

 overflow:hidden !important;
}


/* ============================================================
   WOCHENANSICHT
   ============================================================ */

/*
 * Keine Fahrer-Spalte mehr.
 *
 * Exakt sieben gleich breite Tage über die
 * komplette Breite und Höhe.
 */
.shift-plan-grid.shift-week-grid{
 flex:1;

 width:100%;
 height:100%;

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

 display:grid;

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

 grid-template-rows:
  minmax(0,1fr);

 gap:1px;

 overflow:hidden;

 background:#e5e5e9;
}


.shift-week-day{
 min-width:0;
 min-height:0;

 display:flex;
 flex-direction:column;

 overflow:hidden;

 background:#fff;
}


.shift-week-day.is-today{
 background:#f5f9ff;
}


.shift-week-day-head{
 min-height:64px;

 box-sizing:border-box;

 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:8px;

 padding:
  13px 14px;

 border-bottom:
  1px solid #ececf0;
}


.shift-week-day-head div{
 display:grid;

 gap:3px;
}


.shift-week-day-head span{
 color:#85858b;

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

 text-transform:uppercase;
}


.shift-week-day-head b{
 font-size:12px;
}


.shift-week-day.is-today
.shift-week-day-head b{
 color:#111;
}


.shift-week-day-body{
 display:grid;

 align-content:start;

 gap:7px;

 min-height:0;

 padding:
  12px;

 overflow:hidden;
}


/* ============================================================
   MONATSANSICHT
   ============================================================ */

.shift-plan-grid.shift-month-grid{
 flex:1;

 width:100%;
 height:100%;

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

 display:grid;

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

 grid-template-rows:
  42px
  repeat(
   var(--shift-month-rows,6),
   minmax(0,1fr)
  );

 gap:1px;

 overflow:hidden;

 background:#e5e5e9;
}


.shift-month-weekday{
 min-height:0;

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

 background:#fff;

 color:#85858b;

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

 text-transform:uppercase;
}


.shift-month-day{
 min-width:0;
 min-height:0;

 overflow:hidden;

 box-sizing:border-box;

 padding:
  7px 8px;

 background:#fff;
}


.shift-month-day.is-outside{
 background:#fafafa;
}


.shift-month-day.is-today{
 background:#f5f9ff;
}


.shift-month-day-head{
 height:22px;

 display:flex;
 align-items:center;
 justify-content:space-between;

 margin-bottom:4px;
}


.shift-month-day-head > span{
 width:22px;
 height:22px;

 display:grid;
 place-items:center;

 border-radius:50%;

 color:#55555b;

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


.shift-month-day.is-outside
.shift-month-day-head > span{
 color:#bebec4;
}


.shift-month-day.is-today
.shift-month-day-head > span{
 background:#111;
 color:#fff;
}


.shift-month-day-body{
 display:grid;

 gap:3px;

 overflow:hidden;
}


/* ============================================================
   PLUS
   ============================================================ */

.shift-period-add{
 width:25px;
 height:25px;

 flex:
  0 0 25px;

 display:grid;
 place-items:center;

 border:0;
 border-radius:8px;

 background:#f0f0f3;
 color:#77777d;

 opacity:0;

 font-size:16px;

 cursor:pointer;

 transition:
  opacity .12s ease,
  background .12s ease;
}


.shift-week-day:hover
.shift-period-add,

.shift-month-day:hover
.shift-period-add{
 opacity:1;
}


.shift-period-add:hover{
 background:#e5e5e9;
 color:#111;
}


/* ============================================================
   SCHICHTEN
   ============================================================ */

.shift-period-chip{
 width:100%;

 min-width:0;

 display:grid;

 gap:3px;

 box-sizing:border-box;

 padding:
  9px 10px;

 border:0;
 border-radius:10px;

 background:#111;
 color:#fff;

 text-align:left;

 cursor:pointer;
}


.shift-period-chip b{
 min-width:0;

 overflow:hidden;

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

 text-overflow:ellipsis;

 white-space:nowrap;
}


.shift-period-chip span{
 color:
  rgba(255,255,255,.62);

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

 white-space:nowrap;
}


.shift-period-chip.compact{
 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:6px;

 padding:
  4px 6px;

 border-radius:7px;

 background:#f0f0f3;
 color:#111;
}


.shift-period-chip.compact b{
 font-size:8px;
}


.shift-period-chip.compact span{
 flex:0 0 auto;

 color:#66666c;

 font-size:7px;
}


.shift-period-more{
 padding:
  2px 4px;

 color:#88888f;

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


/* ============================================================
   EDITOR
   ============================================================ */

.shift-period-editor-overlay{
 position:fixed;
 inset:0;

 z-index:8700;

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

 padding:24px;

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

 backdrop-filter:
  blur(3px);
}


.shift-period-editor-overlay.open{
 display:flex;
}


.shift-period-editor{
 position:relative;

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

 box-sizing:border-box;

 padding:26px;

 border:
  1px solid #e1e1e6;

 border-radius:24px;

 background:#fff;

 box-shadow:
  0 24px 70px
  rgba(0,0,0,.17);
}


.shift-period-editor-close{
 position:absolute;

 top:18px;
 right:18px;

 width:40px;
 height:40px;

 display:grid;
 place-items:center;

 border:0;
 border-radius:50%;

 background:#f1f1f3;

 font-size:22px;

 cursor:pointer;
}


.shift-period-editor h3{
 margin:
  0 50px 6px 0;

 font-size:21px;
}


.shift-period-editor > p{
 margin:
  0 0 20px;

 color:#85858b;

 font-size:11px;
}


.shift-period-editor-field{
 display:grid;

 gap:7px;
}


.shift-period-editor-field label{
 color:#66666c;

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


.shift-period-editor-field input,
.shift-period-editor-field select{
 width:100%;
 height:52px;

 box-sizing:border-box;

 padding:
  0 13px;

 border:
  1px solid #dcdce1;

 border-radius:13px;

 background:#f5f5f7;
 color:#111;

 font:inherit;
 font-size:14px;
}


.shift-period-editor-times{
 display:grid;

 grid-template-columns:
  1fr 1fr;

 gap:12px;

 margin-top:12px;
}


.shift-period-editor-status{
 min-height:18px;

 margin-top:14px;

 color:#85858b;

 font-size:10px;
}


.shift-period-delete{
 min-height:42px;

 margin-top:14px;

 padding:
  0 14px;

 border:
  1px solid #efc8c5;

 border-radius:12px;

 background:#fff;
 color:#bd2b22;

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

 cursor:pointer;
}


.shift-period-delete[hidden]{
 display:none !important;
}


@media(max-width:900px){

 .shift-period-switch{
  order:3;
 }


 .shift-plan-week-nav{
  order:4;
 }


 .shift-period-editor-times{
  grid-template-columns:1fr;
 }

}