/* public/style.css */

/* ---------- Grundlayout ---------------------------------------------- */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #1e1e1e;
  color: #e6e6e6;
}
main{
  flex: 1;
  max-width: 650px;
  margin: auto;
  padding: 1rem;
}

/* ---------- Pick-Buttons (Tag & Dienst) -------------------------------- */
.pick-btn{
  width: 100%;
  max-width: 300px;
  margin: .4rem 0;
  padding: .55rem 1rem;
  background: #218d5e;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  cursor: pointer;
  transition: background .2s;
}
.pick-btn.chosen{
  background: #3366CC; /* blau wenn ausgewählt */
}
.pick-btn.option{
  background: #444;
  color: #e6e6e6;
}
.pick-btn.option:hover{
  background: #555;
}

/* Optionen unter den Pick-Buttons */
.options-container {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1rem;
}
.options-container + * {
  margin-top: .5rem;
}

/* ---------- Tabs / Chip-Leiste --------------------------------------- */
.chip-wrapper{
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .7rem;
}
.scroll-btn{
  border: none;
  background: #333;
  color: #fff;
  font-size: 1.2rem;
  padding: .25rem .45rem;
  border-radius: 6px;
}
.scroll-btn:disabled{opacity:.3;}
.tabs{
  flex:1 1 auto;
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.tabs::-webkit-scrollbar{display:none;}
.tab-button{
  min-width:max-content;
  padding:.45rem .9rem;
  border:none;
  border-radius:6px;
  background:#444;
  color:#ddd;
  white-space:nowrap;
  scroll-snap-align:start;
}
.tab-button.active{
  background:#5c9;
  color:#fff;
}

.toggle{margin-bottom:1rem;}

/* ---------- Karten / Accordion --------------------------------------- */
.shift{
  width:100%;
  background:#2b2b2b;
  border-radius:8px;
  padding:.75rem;
  margin-bottom:1rem;
  transition:.25s;
}
.shift.collapsed .slot{display:none;}
.shift h3{
  margin:0 0 .5rem;
  font-size:1.1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.badge{
  font-size:.7rem;
  padding:.05rem .45rem;
  border-radius:6px;
  margin-left:.4rem;
  white-space:nowrap;
}
.badge.green{background:#214d24;color:#a9f5b1;}
.badge.red{background:#4d2121;color:#f4aaaa;}

/* Slot-Zeile */
.slot{
  display:flex;
  justify-content:space-between;
  padding:.25rem 0;
  border-top:1px solid #444;
}
.slot.free{background:#214d24;color:#a9f5b1;}
.slot.filled{background:#4d2121;color:#f4aaaa;}

/* ---------- Modal ----------------------------------------------------- */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.modal.hidden{display:none;}
.modal-content{
  background:#fff;
  color:#000;
  padding:1rem;
  border-radius:8px;
  width:90%;
  max-width:400px;
}
.actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  margin-top:.5rem;
}
.primary{background:#5c9;color:#fff;border:none;padding:.45rem 1rem;border-radius:6px;}
.danger{background:#c55;color:#fff;border:none;padding:.45rem 1rem;border-radius:6px;}
.error{color:#c55;margin-top:1rem;}

/* ---------- Sticky Footer -------------------------------------------- */
.sticky-footer{
  flex-shrink:0;
  background:#111;
  border-top:1px solid #444;
  padding:.75rem 1rem;
  text-align:center;
  font-size:.8rem;
  line-height:1.35;
}
.sticky-footer a{color:#5c9;text-decoration:underline;}
@supports(padding:max(0)){
  .sticky-footer{padding-bottom:calc(.75rem + env(safe-area-inset-bottom));}
}

/* ===================================================================== */
/*   Responsive Breakpoints                                               */
/* ===================================================================== */
@media (max-width:399px){
  main{max-width:100%;padding:1rem .65rem;}
  .pick-btn{padding:.45rem .8rem;font-size:.9rem;}
  .scroll-btn{font-size:.95rem;padding:.2rem .35rem;}
  .tab-button{padding:.3rem .5rem;font-size:.75rem;}
  .shift{padding:.6rem;margin-bottom:.7rem;}
  .shift h3{font-size:.95rem;}
  .slot{font-size:.8rem;}
  .badge{font-size:.6rem;padding:.02rem .3rem;}
}
@media (min-width:400px) and (max-width:767px){
  main{max-width:100%;padding:1rem .8rem;}
  .pick-btn{margin:.4rem .3rem .4rem 0;}
  .scroll-btn{font-size:1rem;padding:.22rem .38rem;}
  .tab-button{padding:.35rem .55rem;font-size:.8rem;}
  .shift{padding:.65rem;margin-bottom:.75rem;}
  .shift h3{font-size:1rem;}
  .slot{font-size:.85rem;}
}
@media (min-width:768px) and (max-width:1365px){
  main{max-width:90%;padding:1rem;}
  .pick-btn{margin:.4rem .6rem .4rem 0;}
  .tab-button{font-size:.9rem;}
  .shift{padding:.7rem;}
}
@media (min-width:1366px){
  main{max-width:800px;}
  .shift{padding:.85rem;}
  .shift h3{font-size:1.15rem;}
}
/* versteckte Select-Elemente komplett ausblenden */
#tagFilter, #serviceFilter {
  all: unset;
  display: none !important;
}