/* ================================================================== */
/* RESERVATIONS — FRONTEND                                            */
/* ================================================================== */

.gf-reservations { font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */
.gf-res-header {
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:1rem;
}
.gf-res-title { margin:0; font-size:clamp(20px, 2.4vw, 28px); font-weight:700; }
.gf-res-controls { display:flex; align-items:center; gap:.75rem; }

/* Primære knapper */
.gf-btn,
.gf-res-dd-toggle{
  appearance:none; border:2px solid #000; background:#111; color:#fff;
  padding:.6rem .9rem; border-radius:.6rem; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.gf-btn:hover,
.gf-res-dd-toggle:hover{ background:#fff; color:#000; border-color:#000; }
.gf-btn:active,
.gf-res-dd-toggle:active{ transform:translateY(1px); }
.gf-res-dd-ico{ line-height:1; font-size:1rem; }

/* spacing når emoji er til højre i knappen */
.gf-btn .gf-btn-ico-right{ margin-left:.5rem; }

/* ------------------------------------------------------------------ */
/* Datovælger (flyout)                                                */
/* ------------------------------------------------------------------ */
.gf-res-dd { position:relative; }
.gf-res-dd-panel{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:9999;
  width:min(92vw, 520px); background:#fff; border:1px solid #e6e6e6; border-radius:.75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:12px; display:block;
}
.gf-res-dd[data-state="closed"] .gf-res-dd-panel{ display:none; }

.gf-res-dd-quick{
  display:flex; flex-wrap:nowrap; gap:.4rem; margin-bottom:.6rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.gf-res-dd-quick .gf-qbtn{
  border:2px solid #000; background:#111; color:#fff; padding:.32rem .6rem;
  border-radius:.55rem; font-weight:700; font-size:.9rem; line-height:1; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.gf-res-dd-quick .gf-qbtn:hover{ background:#fff; color:#000; border-color:#000; }

.gf-res-dd-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem; }
.gf-res-dd-actions .button,
.gf-res-dd-actions .gf-apply,
.gf-res-dd-actions .gf-clear{
  border:2px solid #000; background:#111; color:#fff; font-weight:700;
  padding:.5rem .9rem; border-radius:.55rem; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.gf-res-dd-actions .button:hover,
.gf-res-dd-actions .gf-apply:hover,
.gf-res-dd-actions .gf-clear:hover{ background:#fff; color:#000; border-color:#000; }
.gf-res-dd-actions .button:active,
.gf-res-dd-actions .gf-apply:active,
.gf-res-dd-actions .gf-clear:active{ transform:translateY(1px); }

/* Flatpickr (scopet) */
.gf-res-dd-panel .flatpickr-calendar{ border:none; box-shadow:none; font-family:inherit; }
.gf-res-dd-panel .flatpickr-months{ border-bottom:1px solid #eee; }
.gf-res-dd-panel .flatpickr-prev-month,
.gf-res-dd-panel .flatpickr-next-month{ color:#000; }
.gf-res-dd-panel .flatpickr-prev-month:hover,
.gf-res-dd-panel .flatpickr-next-month:hover{ background:#f5f5f5; border-radius:.4rem; }
.gf-res-dd-panel .flatpickr-weekdays .flatpickr-weekday{ color:#444; font-weight:700; }
.gf-res-dd-panel .flatpickr-day{ border-radius:.5rem; }
.gf-res-dd-panel .flatpickr-day:hover{ background:#000; color:#fff; border-color:#000; }
.gf-res-dd-panel .flatpickr-day.selected,
.gf-res-dd-panel .flatpickr-day.startRange,
.gf-res-dd-panel .flatpickr-day.endRange,
.gf-res-dd-panel .flatpickr-day.selected:hover,
.gf-res-dd-panel .flatpickr-day.startRange:hover,
.gf-res-dd-panel .flatpickr-day.endRange:hover{ background:#111; color:#fff; border-color:#000; }
.gf-res-dd-panel .flatpickr-day.today{ border:1px solid #000; }

/* ------------------------------------------------------------------ */
/* Tabel (desktop)                                                    */
/* ------------------------------------------------------------------ */
.gf-res-list .gf-table{ width:100%; border-collapse:separate; border-spacing:0; }
.gf-res-list thead th{
  position:sticky; top:0; background:#fafafa; z-index:1;
  font-weight:700; padding:.65rem .6rem; border-bottom:1px solid #eee;
}
.gf-res-list td{ padding:.65rem .6rem; border-bottom:1px solid #f1f1f1; vertical-align:top; }
.gf-res-list tr:hover td{ background:#fffafc; }

/* Kolonner (desktop-bredder/alignment) */
.gf-col-id   { width:72px; }
.gf-col-date { width:180px; text-align:center; }
.gf-col-time { width:140px; text-align:center; }
.gf-col-name { text-align:center; }
.gf-col-pers { width:130px; text-align:center; }
.gf-col-act  { width:140px; }

/* Note + siddeplads badge */
.gf-col-note .gf-seat-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.18rem .45rem;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  margin-right:.45rem;
  vertical-align:middle;
  white-space:nowrap;
}

.gf-col-note .gf-seat-badge-indoor{
  background:#eef5ff;
  color:#135e96;
  border:1px solid #cfe3f7;
}

.gf-col-note .gf-seat-badge-outdoor{
  background:#ecfdf3;
  color:#087443;
  border:1px solid #bbf7d0;
}

.gf-col-note .gf-note-text{
  vertical-align:middle;
}

/* Actions – knapper centreret i cellen, men bevarer cellens normale kant/bg */
.gf-col-act{ display:flex; align-items:center; justify-content:center; }
.gf-actions{ display:flex; align-items:center; justify-content:center; gap:.35rem; width:100%; }

.gf-icon-btn{
  border:1px solid #e6e6e6; background:#fff; border-radius:.5rem;
  padding:.35rem .45rem; cursor:pointer; line-height:0; color:#333;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.gf-icon-btn:hover{ background:#f7f7f7; }
.gf-icon-btn:active{ transform:translateY(1px); }
.gf-icon-btn.gf-edit{ background:#111; border-color:#111; color:#fff; }
.gf-icon-btn.gf-edit:hover{ background:#000; border-color:#000; color:#fff; }

/* Rød “Slet”-knap */
.gf-icon-btn.gf-del{
  background:#d32f2f; border-color:#d32f2f; color:#fff;
}
.gf-icon-btn.gf-del:hover{
  background:#b71c1c; border-color:#b71c1c; color:#fff;
}
.gf-icon-btn.gf-del:active{ transform: translateY(1px); }
.gf-icon-btn.gf-del:focus-visible{ outline:2px solid #b71c1c; outline-offset:2px; }

/* ================================================================== */
/* MOBIL: kort-visning                                                */
/* ================================================================== */
@media (max-width: 720px){

  /* Større hovedtitel + knapper på samme linje til venstre */
  .gf-res-title{ font-size:clamp(28px, 8.5vw, 42px); }
  .gf-res-header{ flex-direction:column; align-items:flex-start; }
  .gf-res-controls{
    width:auto; display:flex; gap:.6rem;
    justify-content:flex-start; align-items:center;
  }
  .gf-res-controls > *{ flex:0 0 auto; }

  /* Datovælger som overlay (skubber ikke layout) */
  .gf-res-dd{ position:relative; }
  .gf-res-dd-panel{
    position:absolute; top:calc(100% + .5rem); left:0; right:auto;
    width:min(96vw, 520px); z-index:9999;
  }

  /* Quick-knapper på én linje (scroll hvis nødvendigt) */
  .gf-res-dd-quick{
    display:block; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0;
  }
  .gf-res-dd-quick .gf-qbtn{
    display:inline-block; margin-right:.4rem; padding:.30rem .56rem; font-size:.9rem;
  }

  /* Kort */
  .gf-res-list thead{ display:none; }
  .gf-res-list .gf-table{ border-collapse: separate; border-spacing: 0 .9rem; }

  .gf-row-card{
    display:block; width:100%;
    background:#fff; border:1px solid #eee; border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    padding:.75rem .85rem; position:relative;
  }
  .gf-row-card::before{
    content:"Booking nr. " attr(data-bid);
    display:block; font-weight:800; font-size:1.05rem;
    padding-bottom:.25rem; margin-bottom:.45rem; border-bottom:1px solid #f0f0f0;
  }
  .gf-row-card td{
    display:block; border:0 !important; padding:.40rem 0 !important;
    background:transparent !important;
  }
  .gf-res-list tr:hover td{ background:transparent !important; }

  /* Gem ID-linjen – erstattet af overskriften */
  .gf-row-card .gf-col-id{ display:none; }

  /* Emoji før værdier (ikke på actions) */
  .gf-row-card td::before{
    content: attr(data-emoji) " ";
    display:inline-block; margin-right:.35rem; font-size:1rem;
  }
  .gf-row-card .gf-col-act::before{ content:none; }

  /* Separator mellem linjer */
  .gf-row-card td + td{ border-top:1px dashed #f0f0f0 !important; padding-top:.55rem !important; }

  /* Handling nederst – venstrestillet og helt flush */
  .gf-row-card .gf-col-act{
    display:block; padding-left:0 !important; padding-right:0 !important; padding-top:.6rem !important;
  }
  .gf-row-card .gf-col-act .gf-actions{
    justify-content:flex-start !important; width:auto !important; margin-left:0 !important;
  }

  /* Vis mail/note også på mobil, venstrestil talfelter */
  .gf-col-mail, .gf-col-note{ display:block; }
  .gf-col-date, .gf-col-time, .gf-col-pers, .gf-col-name{ text-align:left; }

  /* Badge i mobilkort */
  .gf-row-card .gf-col-note .gf-seat-badge{
    margin-right:.35rem;
    margin-bottom:.15rem;
  }

  .gf-row-card .gf-col-note .gf-note-text{
    display:inline;
  }
}

/* Smalle skærme: quick-knapper må wrappe hvis ekstremt trangt */
@media (max-width: 420px){
  .gf-res-dd-quick{ white-space:nowrap; overflow-x:auto; }
}

/* Inline-edit inputs (desktop) – uændret */
.gf-res-list .gf-col-date .gf-input-date,
.gf-res-list .gf-col-time .gf-input-time{
  display:inline-block; width:160px; max-width:100%; text-align:center; margin:0 auto;
}
.gf-res-list .gf-col-pers .gf-input-num,
.gf-res-list .gf-col-pers .gf-input-kids{
  display:inline-block; width:72px; text-align:center; margin:0 .15rem; vertical-align:middle;
}
.gf-res-list .gf-col-pers{ white-space:nowrap; }