/* =========================
   Light Theme Base
========================= */
:root{
  --radius-card: 14px;
  --radius-ui: 10px;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel2: #f1f3f6;

  --text: #14161a;
  --muted: #5d6672;

  --line: rgba(20, 22, 26, .14);
  --line-soft: rgba(20, 22, 26, .08);

  /* Block-Farben (kontrastreich, aber hell) */
  --booked-bg: rgba(45, 120, 255, .18);
  --blocked-bg: rgba(255, 160, 60, .20);

  /* feine Trennlinien zwischen anliegenden Terminen */
  --block-sep: rgba(20,22,26,.18);

  /* Vergangenheit-Schleier */
  --past: rgba(120,120,120,.10);
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden; /* wichtig: verhindert "seitlich"/Desktop-Feeling auf Mobile */
}


header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
header .title{ font-weight: 700; font-size: 18px; }
header .sub{ color: var(--muted); margin-top: 2px; }

main{
  padding: 14px 16px 40px;
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px;
}

h2{
  margin: 0 0 10px 0;
  font-size: 18px;
}

pre{
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  padding: 10px;
  overflow: auto;
}

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

label{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text);
}

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

button{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  padding: 10px 12px;
}
button:hover{ background: rgba(0,0,0,.03); }
button:active{ transform: scale(0.99); }
button:disabled{ opacity: .5; cursor: not-allowed; }

.pill{
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.hint{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* =========================
   Day View Layout
========================= */
.daywrap{
  display: grid;
  grid-template-columns: 70px 1fr;
  width: 100%;
  gap: 10px;
  margin-top: 12px;

  max-height: 70vh;
  overflow: auto;

  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
}

.dayaxis{
  padding: 10px 6px;
  border-right: 1px solid var(--line);
  background: #fff;
}

.axisrow{
  height: 60px;                /* 1 Stunde */
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.daylane{
  position: relative;
  padding: 10px 10px;
  min-height: calc(16 * 60px); /* 06-22 */
  background: #fff;
}

/* Linien sehr dezent, keine gepunkteten Rahmen */
.hourline{
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--line-soft);
}
.quarterline{
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid rgba(20,22,26,.04);
}

.pastshade{
  position: absolute;
  left: 0; right: 0;
  background: var(--past);
  pointer-events: none;
  border-radius: 12px;
  z-index: 5;
}

/* =========================
   Blocks (Booked / Blocked)
   - keine Rundungen
   - vollflächig farbig
   - gute Lesbarkeit
========================= */
.block{
  position: absolute;
  left: 10px; right: 10px;
  padding: 0 10px;

  display: flex;
  align-items: center;

  border-radius: 0; /* wichtig */

  /* dezente Trennlinien (oben/unten) */
  border-top: 1px dashed var(--block-sep);
  border-bottom: 1px dashed var(--block-sep);

  z-index: 30;
  overflow: hidden;
}

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

.block.blocked{
  background: var(--blocked-bg);
}

/* Eine Zeile, stabil bei kurzen Blöcken */
.blockline{
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* =========================
   Free gaps
   - Text + "+" in einer Zeile rechts
   - keine Rahmenbox
========================= */
.freegap{
  position: absolute;
  left: 10px; right: 10px;

  border: none;
  background: transparent;
  border-radius: 0;

  padding: 0 6px;

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

  z-index: 15; /* unter Blocks */
  overflow: hidden;
}

.freegap .label{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

/* "+" Button klein & rechts */
/* "+" rechts: JS rendert <div class="plus">+</div> */
.freegap .plus{
  width: 30px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  flex: 0 0 auto;

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

  font-size: 18px;
  line-height: 1;
  color: var(--text);
}


/* =========================
   Modal
========================= */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.hidden{ display: none; }

.modalbox{
  background: #fff;
  color: #000;
  width: min(520px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}

.modalbox h3{ margin: 0 0 8px; }

.modalbox label{
  display: block;
  margin: 10px 0;
  font-size: 14px;
}

.modalbox input,
.modalbox select{
  width: 100%;
  padding: 8px;
  margin-top: 4px;
}

.modalinfo{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.modalactions{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.modalactions button:disabled{
  opacity: .5;
  cursor: not-allowed;
}
/* =========================
   Mobile tweaks
========================= */
@media (max-width: 600px){

  /* weniger "Kopfraum" */
  main{ padding: 10px 10px 24px; }
  .card{ padding: 10px; }

  /* Controls kompakter */
  .row{ gap: 8px; }
  button{ padding: 9px 10px; }

  /* Infozeile: kleiner, weniger Höhe */
  .hint{
    font-size: 12px;
    line-height: 1.25;
  }

  /* Kalender: Achse schmaler */
  .daywrap{
    grid-template-columns: 40px 1fr; /* Achse schmaler */
    max-height: 72vh;
    width: 100%;
  }

  /* Wichtig: Grid-Items dürfen nicht "min-content" die Breite aufblasen */
  .daywrap > *{
    min-width: 0;
  }

  .dayaxis{
    padding: 10px 4px;  /* etwas weniger seitlicher Platz */
    overflow: hidden;   /* falls Labels doch drücken */
  }

  .axisrow{
    font-size: 11px;
    white-space: nowrap;
  }


  .dayaxis{
    padding: 8px 4px;
  }

  .axisrow{
    font-size: 11px;
    opacity: .85;
  }

  /* in der Spalte rechts etwas weniger Padding */
  .daylane{
    padding: 8px 8px;
  }

  /* Freie "+": etwas kleiner, damit nichts überlappt */
  .freegap button{
    width: 28px;
    height: 26px;
  }
  .freegap button::before{
    font-size: 18px;
    line-height: 24px;
  }

  /* Blocktext minimal kleiner */
  .blockline, .freegap .label{
    font-size: 12px;
  }

  /* Modal: immer im sichtbaren Bereich -> Bottom-Sheet */
  .modal{
    align-items: flex-end; /* statt center */
    justify-content: center;
    padding: 10px;
  }

  .modalbox{
    width: 100%;
    max-width: 520px;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
  }
}

/* Modal generell robust gegen "irgendwo auf der Seite": */
.modal{
  position: fixed;
  inset: 0;
}