/* ================================
   Basis
   ================================ */
:root{
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #14161a;
  --muted: rgba(20,22,26,.65);
  --line: rgba(20,22,26,.14);
  --lineSoft: rgba(20,22,26,.07);

  --r8: 8px;
  --r12: 12px;
  --r14: 14px;

  --bookedBg: rgba(45,120,255,.22);
  --freeBg: rgba(20,22,26,.03);
  --pastBg: rgba(120,120,120,.10);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ================================
   Top UI
   ================================ */
header.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--lineSoft);
  padding: 10px 16px;
}

.topbar__row{
  display:flex;
  align-items:center;
  gap: 10px;
}

.topbar__row--nav{
  justify-content: space-between;
}

.topbar__navBtn{
  width: 44px;
  padding: 10px 0;
}

.topbar__center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.brand{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
}

.rangeLabel{
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(70vw, 560px);
  text-align: center;
}

.topbar__row--controls{
  justify-content: space-between;
  margin-top: 8px;
}

.topbar__controlsRight{
  display:flex;
  align-items: center;
  gap: 10px;
}

.topbar__resource .field__label{ display:block; }

@media (min-width: 900px){
  /* Desktop/Tablet: Woche ist Default, Toggle ausblenden */
  #viewToggle{ display:none; }

  /* Mehr Platz: Brand + Range in einer Zeile */
  .topbar__center{ flex-direction: row; gap: 12px; }
  .rangeLabel{ max-width: 740px; }
}

@media (max-width: 600px){
  /* Mobile: Platz sparen */
  .brand{ display:none; }
  .topbar__resource .field__label{ display:none; }
  .topbar__testdata{ display:none; }

  select, input{ font-size: 14px; }
  .topbar__navBtn{ width: 40px; }
  .rangeLabel{ max-width: 72vw; }
}

/* Segmented Toggle (Mobile Tag/Woche) */
.segmented{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius: var(--r12);
  overflow:hidden;
}
.segmented__btn{
  border:0;
  border-right:1px solid var(--line);
  background:#fff;
  padding: 9px 12px;
  font-size: 14px;
}
.segmented__btn:last-child{ border-right:0; }
.segmented__btn.is-active{
  font-weight: 800;
  background: rgba(0,0,0,.04);
}

main{
  padding: 14px 16px 40px;
}

.row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

select, input{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius: var(--r12);
  padding: 8px 10px;
  font-size: 14px;
}

button{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius: var(--r12);
  padding: 10px 12px;
  font-size: 14px;
}

button:hover{ background: rgba(0,0,0,.03); }
button:disabled{ opacity:.55; cursor:not-allowed; }

.btn{ /* alias */
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius: var(--r12);
  padding: 10px 12px;
  font-size: 14px;
}
.btn--primary{
  font-weight: 700;
}

/* ================================
   Kalender Layout (Week/Day)
   ================================ */
.planner{
  display:grid;
  gap: 12px;
}

.planner__wrap{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: start;
}

#timeAxis{
  position: relative;
  height: 1px; /* wird durch Rows visuell */
}

.axis__row{
  position:absolute;
  left:0;
  right:0;
  height: 0;
  font-size: 12px;
  color: var(--muted);
  transform: translateY(-6px);
  text-align: right;
  padding-right: 6px;
  pointer-events: none;
}

#dayGrid{
  overflow-x: auto;
  padding-bottom: 6px;
}

.planner__grid{
  display:grid;
  gap: 10px;
}

.planner__grid--week{
  grid-template-columns: repeat(7, minmax(150px, 1fr));
}

@media (max-width: 899px){
  /* Mobile-Wochenansicht: horizontal scroll (jede Spalte fix breit) */
  .planner__grid--week{
    grid-template-columns: repeat(7, 260px);
  }
}

/* Mobile Wochenansicht: horizontal scroll statt "quetschen" */
@media (max-width: 899px){
  .planner__grid--week{
    grid-template-columns: repeat(7, 260px);
  }

  .topbar__row--controls{
    gap: 8px;
  }

  /* Resource kompakter auf Mobile */
  .topbar__resource .field__label{ display:none; }
  .topbar__resource select{
    padding: 8px 10px;
    max-width: 180px;
  }

  /* Testdaten eher "secondary" */
  .topbar__testdata{ padding: 9px 10px; }
}

.planner__grid--day{
  grid-template-columns: minmax(220px, 1fr);
}

/* ================================
   Tages-Spalte
   ================================ */
.daycol{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r14);
  overflow: hidden;
}

.daycol__head{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  background: #fff;
}

/* Ganze Vortage ausgrauen (Optik, Buchbarkeit kommt später) */
.daycol--past .daycol__head{
  background: var(--pastBg);
  color: var(--muted);
}

.daycol__lane{
  position: relative;
  background: #fff;
  padding: 8px 8px;
}

/* ================================
   Blöcke
   ================================ */
.pastOverlay{
  position:absolute;
  left:0; right:0; top:0;
  background: var(--pastBg);
  pointer-events:none;
  z-index: 1;
}

.block{
  position:absolute;
  left: 8px;
  right: 8px;
  border-radius: var(--r12);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.15;
  overflow: hidden;
  z-index: 2;
  border: 1px solid var(--lineSoft);
}

.block--booked{
  background: var(--bookedBg);
}

.block--free{
  background: var(--freeBg);
  border: 1px dashed rgba(20,22,26,.20);
  cursor: pointer;
}

.freeText{
  padding-right: 30px;
}

/* Plus nur Optik */
.freePlus{
  position:absolute;
  top: 6px;
  right: 6px;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: block;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

/* ================================
   Dialog
   ================================ */
dialog#bookingDialog{
  border:none;
  padding:0;
  width: min(620px, calc(100vw - 24px));
  border-radius: var(--r14);
}

dialog#bookingDialog::backdrop{
  background: rgba(0,0,0,.35);
}

.dialog__card{
  background:#fff;
  padding: 16px;
  border-radius: var(--r14);
}

.dialog__title{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}

.dialog__row{
  display:flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}

.dialog__label{
  width: 60px;
  color: var(--muted);
}

.dialog__value{
  font-weight: 700;
}

.dialog__fields{
  display:grid;
  gap: 12px;
  margin-bottom: 8px;
}

/* KEINE globalen label-styles: nur hier */
.dialog__fields .field{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.field__label{
  font-size: 13px;
  color: var(--muted);
}

.field__control{
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--r12);
  border: 1px solid var(--line);
  font-size: 14px;
}

.dialog__help{
  margin-top: 6px;
  text-align: left;
}

.helpLink{
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  text-decoration: underline;
  font-size: 13px;
  opacity: .8;
  cursor: pointer;
}
.helpLink:hover{ opacity: 1; }

.dialog__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.dialog__actions--withHelp{
  justify-content: space-between;
  align-items: center;
}

.dialog__actionsRight{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ================================
   Hilfe-Overlay
   ================================ */
.helpOverlay{
  border: none;
  padding: 0;
  background: transparent;
}

.helpOverlay::backdrop{
  background: rgba(0,0,0,.35);
}

.helpOverlay::backdrop{
  background: rgba(0,0,0,.35);
}

.helpOverlay__card{
  width: min(560px, 100%);
  background:#fff;
  border-radius: var(--r12);
  padding: 14px;
  margin: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.helpOverlay__title{
  font-weight: 800;
  margin-bottom: 8px;
}

.helpOverlay__text{
  margin-bottom: 12px;
}

.helpSection{
  margin-bottom: 12px;
}
.helpSection:last-child{ margin-bottom: 0; }

.helpSection__title{
  font-weight: 800;
  margin-bottom: 4px;
}

.helpSection__text{
  white-space: pre-wrap;
  line-height: 1.35;
}