/* SERVE_SHIFT_PLAN_20260921 */


.shift-plan-topbar-btn[hidden]{
 display:none !important;
}


/* ============================================================
   HAUPTMODAL
   ============================================================ */

.shift-plan-overlay{
 position:fixed;
 inset:0;
 z-index:8500;

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

 padding:24px;

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

 backdrop-filter:
  blur(5px);
}

.shift-plan-overlay.open{
 display:flex;
}


.shift-plan-modal{
 width:
  min(
   1540px,
   calc(100vw - 48px)
  );

 height:
  min(
   900px,
   calc(100dvh - 48px)
  );

 display:flex;
 flex-direction:column;

 overflow:hidden;

 border:
  1px solid #e1e1e6;

 border-radius:30px;

 background:#fff;

 box-shadow:
  0 28px 90px
  rgba(0,0,0,.16);
}


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

.shift-plan-head{
 min-height:104px;

 box-sizing:border-box;

 display:flex;
 align-items:center;

 gap:18px;

 padding:
  22px 26px;

 border-bottom:
  1px solid #ececef;
}


.shift-plan-title h2{
 margin:0;

 font-size:27px;
 line-height:1.05;

 letter-spacing:-.5px;
}


.shift-plan-title p{
 margin:
  6px 0 0;

 color:#85858b;

 font-size:12px;
}


.shift-plan-head-spacer{
 flex:1;
}


.shift-plan-week-nav{
 display:flex;
 align-items:center;

 gap:8px;
}


.shift-plan-week-label{
 min-width:185px;

 text-align:center;

 color:#55555b;

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


.shift-plan-icon-btn,
.shift-plan-today-btn,
.shift-plan-close{
 height:42px;

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

 border:
  1px solid #dedee3;

 background:#fff;
 color:#111;

 cursor:pointer;
}


.shift-plan-icon-btn{
 width:42px;

 border-radius:13px;

 font-size:20px;
}


.shift-plan-today-btn{
 padding:
  0 15px;

 border-radius:13px;

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


.shift-plan-close{
 width:42px;

 border-radius:50%;

 background:#f1f1f3;

 font-size:24px;
}


/* ============================================================
   WOCHENRASTER
   ============================================================ */

.shift-plan-scroll{
 flex:1;

 min-height:0;

 overflow:auto;

 background:#f7f7f9;
}


.shift-plan-grid{
 display:grid;

 grid-template-columns:
  170px
  repeat(
   7,
   minmax(132px,1fr)
  );

 min-width:1120px;
}


.shift-grid-corner,
.shift-day-head{
 position:sticky;
 top:0;

 z-index:20;

 min-height:70px;

 display:flex;
 flex-direction:column;
 justify-content:center;

 box-sizing:border-box;

 border-bottom:
  1px solid #e4e4e8;

 background:
  rgba(255,255,255,.96);

 backdrop-filter:
  blur(8px);
}


.shift-grid-corner{
 left:0;

 z-index:30;

 padding:
  0 17px;

 color:#77777e;

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

 text-transform:uppercase;

 letter-spacing:.05em;
}


.shift-day-head{
 align-items:center;

 gap:3px;

 border-left:
  1px solid #ededf0;
}


.shift-day-head span{
 color:#88888f;

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

 text-transform:uppercase;
}


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


.shift-day-head.is-today{
 background:#f1f6ff;
}


.shift-driver-head{
 position:sticky;
 left:0;

 z-index:10;

 min-height:108px;

 display:flex;
 align-items:center;

 gap:11px;

 box-sizing:border-box;

 padding:15px;

 border-bottom:
  1px solid #e6e6ea;

 background:#fff;
}


.shift-driver-avatar{
 width:38px;
 height:38px;

 flex:
  0 0 38px;

 display:grid;
 place-items:center;

 border-radius:12px;

 background:#f0f0f3;

 font-size:14px;
 font-weight:850;
}


.shift-driver-head b{
 display:block;

 font-size:11px;
}


.shift-driver-head span{
 display:block;

 margin-top:3px;

 color:#96969c;

 font-size:9px;
}


.shift-cell{
 position:relative;

 min-height:108px;

 box-sizing:border-box;

 padding:10px;

 border-left:
  1px solid #e6e6ea;

 border-bottom:
  1px solid #e6e6ea;

 background:#fff;

 cursor:pointer;
}


.shift-cell:hover{
 background:#fafafa;
}


.shift-cell.is-today{
 background:#f7faff;
}


.shift-cell-items{
 display:grid;

 gap:7px;
}


.shift-chip{
 width:100%;

 min-height:34px;

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

 gap:5px;

 padding:
  7px 8px;

 border:0;
 border-radius:10px;

 background:#111;
 color:#fff;

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

 cursor:pointer;
}


.shift-chip span{
 opacity:.55;
}


.shift-cell-add{
 position:absolute;

 right:8px;
 bottom:8px;

 width:27px;
 height:27px;

 display:grid;
 place-items:center;

 border:0;
 border-radius:8px;

 background:#f0f0f3;
 color:#77777d;

 opacity:0;

 font-size:17px;

 cursor:pointer;
}


.shift-cell:hover
.shift-cell-add{
 opacity:1;
}


.shift-plan-empty{
 grid-column:
  1 / -1;

 padding:60px;

 color:#888;

 text-align:center;

 font-size:12px;
}


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

.shift-editor-overlay{
 position:fixed;
 inset:0;
 z-index:8600;

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

 padding:24px;

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

 backdrop-filter:
  blur(3px);
}

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


.shift-editor{
 position:relative;

 width:
  min(
   480px,
   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-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-editor h3{
 margin:
  0 50px 5px 0;

 font-size:21px;
}


.shift-editor-sub{
 margin-bottom:22px;

 color:#85858b;

 font-size:11px;
}


.shift-editor-grid{
 display:grid;

 grid-template-columns:
  1fr 1fr;

 gap:12px;
}


.shift-editor-field{
 display:grid;

 gap:7px;
}


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

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


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

 box-sizing:border-box;

 border:
  1px solid #dcdce1;

 border-radius:13px;

 padding:
  0 13px;

 background:#f5f5f7;

 color:#111;

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


.shift-editor-state{
 min-height:18px;

 margin-top:15px;

 color:#8d8d93;

 font-size:10px;
}


.shift-editor-state.is-saved{
 color:#168347;
}


.shift-editor-state.is-error{
 color:#bf2c22;
}


.shift-editor-footer{
 margin-top:19px;
}


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

 padding:
  0 14px;

 border:
  1px solid #efc8c5;

 border-radius:12px;

 background:#fff;
 color:#bd2b22;

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

 cursor:pointer;
}


@media(max-width:900px){

 .shift-plan-overlay{
  padding:8px;
 }


 .shift-plan-modal{
  width:
   calc(100vw - 16px);

  height:
   calc(100dvh - 16px);

  border-radius:23px;
 }


 .shift-plan-head{
  min-height:auto;

  flex-wrap:wrap;

  padding:18px;
 }


 .shift-plan-title{
  min-width:
   calc(100% - 60px);
 }


 .shift-plan-week-nav{
  width:100%;
 }


 .shift-plan-week-label{
  flex:1;

  min-width:0;
 }

}