/* ZAJEDNICKI IZGLED KALENDARA (flatpickr) — javni dio i admin panel.

   Ucitava se UVIJEK odmah iza vendor/flatpickr.min.css, na svakoj stranici
   koja ima biraca datuma. Prije je samo map.css imao djelomicne tamne boje,
   pa je isti kalendar u adminu bio bijel, a biraci mjeseca i godine su
   svugdje ostajali u nacinu preglednika (sitne strelice, nativni izbornik).

   Pravilo: ovdje NEMA ničega sto ovisi o pojedinoj stranici. Boje dolaze iz
   zajednickih promjenjivih (--gold, --navy...), uz zapisane rezerve da datoteka
   radi i ako se ucita negdje gdje te promjenjive ne postoje. */

:root {
  --kal-ploha:    var(--m-kal-ploha);                     /* pozadina kalendara */
  --kal-ploha-2:  var(--m-kal-ploha-2);                     /* dizanje: hover, izbornik mjeseci */
  --kal-rub:      var(--m-b-12);
  --kal-tekst:    var(--m-b-88);
  --kal-prigusen: var(--m-b-40);
  --kal-naglasak: var(--m-gold);                     /* odabrani dan (zlatna) */
  --kal-na-nagl:  var(--m-kal-na-nagl);                     /* tekst na zlatnoj podlozi */
}

/* ── Okvir ──────────────────────────────────────────────────────────────── */
.flatpickr-calendar {
  background: var(--kal-ploha);
  border: 1px solid var(--kal-rub);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.55);
  padding: 6px 6px 10px;
  width: 318px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--kal-ploha); }
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: var(--kal-ploha); }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowBottom:before { border-width: 0; }

/* ── Zaglavlje: mjesec, godina, strelice ────────────────────────────────── */
.flatpickr-months { padding: 4px 2px 2px; align-items: center; }
.flatpickr-months .flatpickr-month {
  background: transparent; color: var(--kal-tekst); fill: var(--kal-tekst);
  height: 44px; display: flex; align-items: center;
}
.flatpickr-current-month {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  height: 44px; padding: 0; font-size: 15px; font-weight: 600;
  width: 100%; left: 0;
}

/* Birac mjeseca: bez nacina preglednika, s vlastitom strelicom. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23e8c86d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  color: var(--kal-tekst);
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 7px 26px 7px 12px; margin: 0;
  border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; outline: none; transition: background-color .15s, border-color .15s;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: var(--kal-ploha-2); }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible {
  border-color: var(--kal-naglasak); background-color: var(--kal-ploha-2);
}
/* Nativni popis se u Chromeu/Firefoxu oboji preko option; drugdje ostaje
   sustavni izgled, ali zatvoreno polje je svugdje uskladjeno. */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--kal-ploha-2); color: #fff; font-weight: 500;
}

/* Godina: brojka + dvije vidljive strelice (prije su bile sitni trokuti
   koji se pojave tek na prijelaz misem — na dodir ih se nije moglo pogoditi). */
.flatpickr-current-month input.cur-year {
  color: var(--kal-tekst); font-family: inherit;
  font-size: 15px; font-weight: 600; padding: 7px 0 7px 8px;
}
.flatpickr-current-month input.cur-year:focus-visible { outline: none; }
.flatpickr-current-month .numInputWrapper {
  width: 8.5ch;                      /* 4 znamenke + mjesto za strelice */
  border-radius: 9px; transition: background-color .15s;
}
.numInputWrapper:hover { background: var(--kal-ploha-2); }
.numInputWrapper span {
  border: none; width: 18px; right: 0; opacity: 1;
  background-color: transparent; padding: 0;
  background-repeat: no-repeat; background-position: center;
  background-size: 10px 10px;
}
.numInputWrapper span:hover { background-color: rgba(255,255,255,0.12); }
.numInputWrapper span:active { background-color: rgba(255,255,255,0.20); }
.numInputWrapper span:after { display: none; }      /* zadani trokutici — van */
.numInputWrapper span.arrowUp {
  border-radius: 0 9px 0 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%23e8c86d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.numInputWrapper span.arrowDown {
  border-radius: 0 0 9px 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23e8c86d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Strelice mjeseca: okrugli gumbi jednaki na obje strane. Kad flatpickr
   sakrije prethodni mjesec (najraniji dopusteni datum), mjesto mu OSTAJE
   prazno — inace zaglavlje poskoci i naslov se makne ulijevo. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  width: 34px; height: 34px; padding: 0; top: 9px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--kal-tekst); fill: var(--kal-tekst);
  transition: background-color .15s;
}
.flatpickr-months .flatpickr-prev-month { left: 8px; }
.flatpickr-months .flatpickr-next-month { right: 8px; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: var(--kal-ploha-2); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 13px; height: 13px; fill: currentColor; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--kal-naglasak); }
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: flex !important; visibility: hidden;
}

/* ── Dani u tjednu ──────────────────────────────────────────────────────── */
.flatpickr-weekdays { background: transparent; height: 26px; }
span.flatpickr-weekday {
  background: transparent; color: var(--kal-prigusen);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Dani ───────────────────────────────────────────────────────────────── */
.flatpickr-days { width: 100%; }
.dayContainer { width: 100%; min-width: 0; max-width: none; padding: 0; }
.flatpickr-day {
  max-width: none; height: 38px; line-height: 38px;
  margin: 1px 0; border-radius: 10px;
  color: var(--kal-tekst); border-color: transparent;
  font-size: 13.5px; font-weight: 500;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background: rgba(255,255,255,0.10); border-color: transparent; color: #fff;
}
.flatpickr-day.today { border-color: var(--kal-naglasak); font-weight: 700; }
.flatpickr-day.today:hover { background: rgba(232,200,109,0.18); border-color: var(--kal-naglasak); color: #fff; }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--kal-naglasak); border-color: var(--kal-naglasak);
  color: var(--kal-na-nagl); font-weight: 700;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: rgba(255,255,255,0.22); background: transparent; border-color: transparent;
}

/* Dostupnost (javna rezervacija): zeleno = ima mjesta, crveno = popunjeno. */
.flatpickr-day.day-open:not(.flatpickr-disabled) {
  background: rgba(46,180,120,0.16);
  border-color: rgba(46,180,120,0.35);
  color: #b8f0d4;
}
.flatpickr-day.day-open:not(.flatpickr-disabled):hover {
  background: rgba(46,180,120,0.32);
  border-color: rgba(46,180,120,0.6);
  color: #d8fbe9;
}
.flatpickr-day.day-open.selected { color: var(--kal-na-nagl); }
/* Popunjeno — nema nikoga mjesta. Precrtano, da se razlikuje od dana na kojem
   mjesta ima ali ne dovoljno za toliko gostiju. */
.flatpickr-day.day-full {
  background: rgba(220,70,70,0.14) !important;
  border-color: rgba(220,70,70,0.30) !important;
  color: rgba(255,150,150,0.55) !important;
  text-decoration: line-through;
  cursor: not-allowed !important;
}
/* Ima mjesta, ali manje nego sto gost trazi. Isto crveno (i neodabirno), bez
   precrtavanja — smanji li gost drustvo, dan moze opet postati zelen. */
.flatpickr-day.day-tight {
  background: rgba(220,70,70,0.10) !important;
  border-color: rgba(220,70,70,0.26) !important;
  color: rgba(255,150,150,0.60) !important;
  cursor: not-allowed !important;
}

/* Zauzece po danima (priprema ture): dan s polaskom nosi broj gostiju.
   Isti podatak koji kalendar ture pokazuje za jednu turu, ovdje zbirno za
   sve ture u dosegu. Dan bez polaska ostaje kakav jest — nema ga smisla
   bojati, ondje se nema sto pripremati. */
.flatpickr-day.dan-polazak:not(.flatpickr-disabled) {
  background: rgba(42,157,143,0.18);
  border-color: rgba(42,157,143,0.40);
  color: #bdf0e8; font-weight: 600;
}
.flatpickr-day.dan-polazak:not(.flatpickr-disabled):hover {
  background: rgba(42,157,143,0.34); border-color: rgba(42,157,143,0.65);
}
/* Dan na kojem jos netko ceka potvrdu — zlatni rub, kao "novi upit" drugdje. */
.flatpickr-day.dan-polazak.dan-upiti:not(.flatpickr-disabled) {
  border-color: var(--kal-naglasak);
}
.flatpickr-day.dan-polazak.selected { color: var(--kal-na-nagl); }
.kal-dan-broj {
  position: absolute; right: 3px; bottom: 1px;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.72); pointer-events: none;
}
.flatpickr-day.dan-polazak { position: relative; }
.flatpickr-day.dan-polazak.selected .kal-dan-broj { color: var(--kal-na-nagl); }

/* Polje koje otvara kalendar */
.flatpickr-input[readonly] { cursor: pointer; }


/* ── ZAGLAVLJE RUCNO RADJENIH KALENDARA ─────────────────────────────────────
   Bookerski portal i kalendar ture u adminu NISU flatpickr — crtamo ih sami.
   Zaglavlje im je ovdje, uz flatpickrovo, da izgled ostane isti na sva tri
   mjesta. Markup koji ovo ocekuje:

     <div class="cal-head">
       <button class="cal-nav">‹</button>
       <div class="cal-pick">
         <select class="cal-msel">…</select>
         <span class="cal-ywrap">
           <input type="number" class="cal-yin">
           <button class="cal-yarr up"></button>
           <button class="cal-yarr down"></button>
         </span>
       </div>
       <button class="cal-nav">›</button>
     </div>                                                                 */

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-pick { display: flex; align-items: center; gap: 2px; }

/* Okrugle strelice mjeseca — isti oblik i velicina kao flatpickrove */
.cal-nav {
  background: transparent; border: none; color: var(--kal-tekst);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 17px; line-height: 1; flex-shrink: 0; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s, color .15s;
}
.cal-nav:hover { background: var(--kal-ploha-2); color: var(--kal-naglasak); }

/* Birac mjeseca — bez nacina preglednika, s vlastitom strelicom */
select.cal-msel {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23e8c86d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px;
  color: var(--kal-tekst); font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 7px 26px 7px 12px; margin: 0; width: auto;
  border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; outline: none; transition: background-color .15s, border-color .15s;
}
select.cal-msel:hover { background-color: var(--kal-ploha-2); }
select.cal-msel:focus-visible { border-color: var(--kal-naglasak); background-color: var(--kal-ploha-2); }
select.cal-msel option { background: var(--kal-ploha-2); color: #fff; font-weight: 500; }

/* Godina s vidljivim strelicama gore/dolje */
.cal-ywrap { position: relative; display: inline-block; border-radius: 9px; transition: background-color .15s; }
.cal-ywrap:hover { background: var(--kal-ploha-2); }
input.cal-yin {
  width: 8.5ch; background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--kal-tekst); font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 7px 20px 7px 8px; margin: 0; outline: none; -moz-appearance: textfield;
}
input.cal-yin::-webkit-outer-spin-button, input.cal-yin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.cal-yin:focus-visible { border-color: var(--kal-naglasak); }
.cal-yarr {
  position: absolute; right: 0; width: 18px; height: 50%; padding: 0;
  background-color: transparent; border: none; cursor: pointer;
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
.cal-yarr:hover { background-color: rgba(255,255,255,0.12); }
.cal-yarr:active { background-color: rgba(255,255,255,0.20); }
.cal-yarr.up {
  top: 0; border-radius: 0 9px 0 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%23e8c86d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cal-yarr.down {
  bottom: 0; border-radius: 0 0 9px 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23e8c86d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 560px) {
  .cal-head { gap: 2px; }
  select.cal-msel { font-size: 14px; padding: 7px 22px 7px 8px; background-position: right 6px center; }
  input.cal-yin { font-size: 14px; width: 7.5ch; padding: 7px 20px 7px 4px; }
  .cal-nav { width: 32px; height: 32px; font-size: 16px; }
}

/* ── Mobitel: kalendar se siri do ruba zaslona, dani su veci za prst ────── */
@media (max-width: 560px) {
  .flatpickr-calendar {
    width: auto !important;
    max-width: calc(100vw - 24px);
    min-width: 272px;
  }
  .flatpickr-day { height: 42px; line-height: 42px; font-size: 14.5px; }
  .flatpickr-current-month, .flatpickr-months .flatpickr-month { height: 46px; }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month { width: 38px; height: 38px; top: 8px; }
  .flatpickr-current-month .numInputWrapper { width: 9.5ch; }
  .numInputWrapper span { width: 22px; background-size: 11px 11px; }
}

/* ── Mreza dana: 7 stupaca ───────────────────────────────────────────────────
   `minmax(0, 1fr)`, a NE `1fr`. Element u mrezi ima zadano `min-width:auto`,
   pa se stupac ne moze stisnuti ispod svog sadrzaja — na uskom zaslonu
   (mobitel) je kalendar zato strsio izvan stranice i cijeli portal se dao
   pomicati lijevo-desno. S `minmax(0, 1fr)` stupci se smiju stisnuti.
   Razmak (gap) ostaje u stilu svakog kalendara — on se razlikuje. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }