/* style_light.css
   Light “timeline/grid” look (Molzait-ähnlich, clean white, feine Linien, blaues Accent)
   - Sticky header row (Räume) + sticky time column
   - Booking-Blocks: leicht abgerundete Rechtecke, nur Zahl
   - Large groups (>=8): schwarzer Streifen links
*/

/* ===== Theme tokens ===== */
:root{
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface2: #fbfbfc;

  --text: #1f2937;     /* slate-800 */
  --muted: #6b7280;    /* slate-500 */
  --muted2:#9ca3af;    /* slate-400 */

  --line: #e5e7eb;     /* gray-200 */
  --line2:#eef0f3;     /* lighter */

  --accent: #2f6cf6;   /* blue accent */
  --accent-weak: rgba(47,108,246,0.12);

  --shadow: 0 6px 20px rgba(16,24,40,0.06);
  --radius: 14px;

  /* Booking colors (soft) */
  --pill-blue:    rgba(47,108,246,0.14);
  --pill-green:   rgba(34,197,94,0.16);
  --pill-red:     rgba(239,68,68,0.16);

  --pill-blue-b:  rgba(47,108,246,0.35);
  --pill-green-b: rgba(34,197,94,0.35);
  --pill-red-b:   rgba(239,68,68,0.35);
}

/* ===== Base ===== */
html, body{
  height: 100%;
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--accent); }

:focus-visible{
  outline: none;
}

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-weak);
}

.brand-title{
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand-subtitle{
  font-size: 12px;
  color: var(--muted);
}

/* ===== Panels ===== */
.panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===== Controls ===== */
.btn-primary-soft{
  background: var(--accent);
  border: 1px solid rgba(47,108,246,0.45);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary-soft:hover{
  background: #255be0;
  border-color: rgba(47,108,246,0.60);
  color: #fff;
}

.date-input{
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
}
.date-input:focus{
  border-color: rgba(47,108,246,0.55);
  box-shadow: 0 0 0 0.2rem rgba(47,108,246,0.12);
}

/* Bootstrap switch slightly nicer */
.form-check-input{
  cursor: pointer;
}
.form-check-input:focus{
  box-shadow: 0 0 0 0.2rem rgba(47,108,246,0.12);
  border-color: rgba(47,108,246,0.45);
}
.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ===== Legend ===== */
.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.pill-demo{
  width: 22px;
  height: 12px;
  border-radius: 6px;
  display: inline-block;
}
.pill-demo.pill-alacarte{ background: var(--pill-blue); border: 1px solid var(--pill-blue-b); }
.pill-demo.pill-buffet{   background: var(--pill-green); border: 1px solid var(--pill-green-b); }
.pill-demo.pill-candle{   background: var(--pill-red); border: 1px solid var(--pill-red-b); }

/* ===== Scroll container ===== */
.grid-wrap{
  overflow: auto;
  max-height: calc(100vh - 190px);
  background: var(--surface);
}

/* Nice scrollbars */
.grid-wrap::-webkit-scrollbar{ height: 12px; width: 12px; }
.grid-wrap::-webkit-scrollbar-thumb{
  background: rgba(107,114,128,0.22);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.9);
}
.grid-wrap::-webkit-scrollbar-track{
  background: rgba(229,231,235,0.35);
}

/* ===== Schedule grid (header + body share same grid columns) ===== */
.schedule-grid{
  min-width: 1200px;
}

/* Sticky header */
.grid-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
}

/* Both header and body are grids */
.grid-header,
.grid-body{
  display: grid;
  grid-template-columns: 120px repeat(5, minmax(240px, 1fr));
}

/* Cells and separators */
.cell{
  border-right: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

/* Header cells */
.grid-header .cell{
  padding: 14px 14px;
  font-weight: 700;
  color: #111827;
}

/* Time column (sticky left) */
.time-cell{
  padding: 10px 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: rgba(250,250,251,0.95);
  position: sticky;
  left: 0;
  z-index: 15;
  border-right: 1px solid var(--line);
}

/* Top-left header cell also sticky left and above everything */
.grid-header .time-cell{
  z-index: 25;
  background: rgba(255,255,255,0.96);
}

/* Slot cells */
.slot-cell{
  padding: 8px 10px;
  background: #fff;
}
.slot-cell:hover{
  background: #fbfbfd;
}

/* Wrap many bookings */
.slot-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  min-height: 44px;
}

/* ===== Booking blocks =====
   Requirements:
   - rectangles with slightly rounded corners
   - only number (no "Pers", no time)
   - large groups >=8 marked with black left stripe
   - no dot
*/
.pill{
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.2px;

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

  min-width: 44px;
  height: 54px;

  box-shadow: 0 1px 0 rgba(16,24,40,0.04);
  border: 1px solid rgba(0,0,0,0.08);

  user-select: none;
  white-space: nowrap;
}

/* Type color variants */
.pill-alacarte{
  background: var(--pill-blue);
  border-color: var(--pill-blue-b);
  color: #0f2f7a;
}
.pill-buffet{
  background: var(--pill-green);
  border-color: var(--pill-green-b);
  color: #0f5132;
}
.pill-candle{
  background: var(--pill-red);
  border-color: var(--pill-red-b);
  color: #7a1616;
}

/* Large groups marker (>=8) */
.pill.pill-large{
  position: relative;
  padding-left: 14px;
}
.pill.pill-large::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(0,0,0,0.85);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Dicke Stunden-Trennlinie */
.cell.hour-line{
  border-top: 2px solid #cbd5e1; /* etwas kräftiger als normale Linie */
}

/* optional: auch Zeit-Zelle leicht stärker */
.time-cell.hour-line{
  font-weight: 600;
  color: #374151;
  font-size: 22px;
}

/* ===========================
   Responsive Optimierung (Tablet + Mobile)
   - kompaktere Spalten/Pills
   - bessere Scrollhöhe
   - Grid bleibt horizontal scrollbar (Plan-UX)
=========================== */

/* Grid: nutze CSS-Variable für Raumanzahl */
.grid-header,
.grid-body{
  grid-template-columns: 120px repeat(var(--rooms, 5), minmax(240px, 1fr));
}

/* Größere Touch-Ziele allgemein */
@media (pointer: coarse){
  .btn, .form-control{ min-height: 40px; }
  .grid-wrap{ -webkit-overflow-scrolling: touch; }
}

/* ---------- Large Desktop Feinheiten ---------- */
@media (min-width: 1400px){
  .schedule-grid{ min-width: 1280px; }
  .grid-wrap{ max-height: calc(100vh - 200px); }
}

/* ---------- Tablet / kleiner Desktop ---------- */
@media (max-width: 1199.98px){

  /* Container etwas enger, damit mehr Platz fürs Grid bleibt */
  .container-fluid.px-4{ padding-left: 16px !important; padding-right: 16px !important; }

  /* Header: Controls umbrechen sauber */
  .topbar .container-fluid{ gap: 10px; }
  .brand-subtitle{ display: none; } /* auf Tablet weniger visuelles Rauschen */

  /* Legende: weniger breit */
  .legend-item{
    padding: 5px 8px;
    font-size: 12px;
  }

  /* Scrollhöhe: mehr Raum fürs Grid auf Tablet */
  .grid-wrap{
    max-height: calc(100vh - 170px);
  }

  /* Grid: Spalten schmaler, aber lesbar */
  .schedule-grid{
    min-width: 980px; /* bleibt scrollbar, aber nicht übertrieben breit */
  }

  .grid-header,
  .grid-body{
    grid-template-columns: 104px repeat(var(--rooms, 5), minmax(190px, 1fr));
  }

  /* Header-Zellen kompakter */
  .grid-header .cell{
    padding: 12px 10px;
    font-size: 14px;
  }

  /* Zeitspalte kompakter */
  .time-cell{
    padding: 10px 10px;
    font-size: 14px;
  }

  /* Slot-Zellen kompakter */
  .slot-cell{
    padding: 7px 8px;
  }

  .slot-inner{
    gap: 6px;
    min-height: 40px;
  }

  /* Pills: kleiner, damit mehr pro Slot passen */
  .pill{
    font-size: 28px;
    min-width: 40px;
    height: 48px;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .pill.pill-large{ padding-left: 13px; }
  .pill.pill-large::before{ width: 6px; }
}

/* ---------- Mobile (klein) ---------- */
@media (max-width: 767.98px){

  /* Header: alles untereinander, sauber */
  .topbar .container-fluid{
    flex-direction: column;
    align-items: stretch !important;
  }
  .ms-auto{ margin-left: 0 !important; }

  /* Date/Reload volle Breite */
  .date-input, #reloadBtn{
    width: 100%;
  }

  /* Grid bleibt horizontal scroll – aber Spalten nochmal schmaler */
  .schedule-grid{
    min-width: 860px;
  }

  .grid-header,
  .grid-body{
    grid-template-columns: 92px repeat(var(--rooms, 5), minmax(160px, 1fr));
  }

  .grid-header .cell{
    padding: 10px 8px;
    font-size: 13px;
  }

  .time-cell{
    font-size: 13px;
    padding: 9px 8px;
  }

  .slot-cell{ padding: 6px 7px; }

  .slot-inner{
    gap: 6px;
    min-height: 36px;
  }

  .pill{
    font-size: 24px;
    min-width: 36px;
    height: 44px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  /* Stundenlinie etwas feiner am Handy */
  .cell.hour-line{ border-top-width: 1px; }
}

.pill{ cursor: pointer; }
.pill:active{ transform: translateY(1px); }
.pill:focus-visible{
  outline: 2px solid rgba(47,108,246,0.55);
  outline-offset: 2px;
}