:root{
  --ink:#2d2438;        /* duboka šljiva - glavni tekst */
  --ink-soft:#6b5f78;
  --paper:#f6f1ea;      /* topli papir - pozadina */
  --card:#fffdf9;
  --line:#e6ddd1;
  --brass:#b08948;      /* mesing - akcent (salonski, topao) */
  --brass-soft:#e9dcc4;
  --rose:#c56d7a;       /* prigušena ruža - potvrde */
  --rose-soft:#f2dde1;
  --sage:#7d8b6a;       /* žalfija - dolazak/ok */
  --sage-soft:#e3e8d9;
  --alarm:#c25b4e;      /* izostanak */
  --alarm-soft:#f5ddd8;
  --weekend:#efe6f0;    /* vikend - blaga lila podloga */
  --weekend-ink:#7a5f80;
  --holiday:#b34a5c;    /* blagdan - jača ruža */
  --holiday-soft:#f7dfe3;
  --shadow:0 2px 14px rgba(45,36,56,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  overscroll-behavior-y:contain;
  -webkit-user-select:none;user-select:none;
}
/* ---- Header ---- */
header{
  position:sticky;top:0;z-index:20;
  background:var(--ink);color:var(--paper);
  padding:14px 18px calc(14px + env(safe-area-inset-top)) 18px;
  padding-top:calc(14px + env(safe-area-inset-top));
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.brand{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft);font-weight:600;}
.today-label{font-size:23px;font-weight:700;margin-top:2px;letter-spacing:-.01em;}
.day-count{font-size:13px;color:var(--brass-soft);margin-top:3px;}
.date-nav{display:flex;align-items:center;gap:4px;}
.date-nav button{
  background:rgba(255,255,255,.1);border:none;color:var(--paper);
  width:38px;height:38px;border-radius:11px;font-size:19px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.date-nav button:active{background:rgba(255,255,255,.22);}
.today-btn{
  font-size:12px !important;width:auto !important;padding:0 12px;
  letter-spacing:.05em;font-weight:600;
}
/* ---- Views ---- */
main{padding:14px 14px 120px 14px;max-width:640px;margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- Timeline / termini ---- */
.empty{
  text-align:center;padding:60px 24px;color:var(--ink-soft);
}
.empty .big{font-size:44px;margin-bottom:8px;opacity:.7;}
.empty p{margin:6px 0;font-size:15px;line-height:1.5;}
.appt{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px 15px;margin-bottom:11px;box-shadow:var(--shadow);
  display:flex;gap:13px;position:relative;overflow:hidden;
}
.appt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brass);}
.appt.done::before{background:var(--sage);}
.appt.noshow::before{background:var(--alarm);}
.appt.done{opacity:.62;}
.appt-time{
  min-width:52px;text-align:center;
}
.appt-time .t{font-size:19px;font-weight:700;line-height:1;}
.appt-time .dur{font-size:11px;color:var(--ink-soft);margin-top:4px;}
.appt-body{flex:1;min-width:0;}
.appt-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:7px;}
.appt-name .flag{font-size:11px;background:var(--alarm-soft);color:var(--alarm);
  padding:1px 7px;border-radius:20px;font-weight:600;}
.appt-svc{font-size:14px;color:var(--ink-soft);margin-top:2px;}
.appt-svc .price{color:var(--brass);font-weight:600;}
.appt-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:12.5px;padding:7px 11px;border-radius:20px;cursor:pointer;
  display:flex;align-items:center;gap:5px;font-weight:500;
}
.chip:active{transform:scale(.96);}
.chip.wa{background:var(--sage-soft);border-color:transparent;color:#4a5738;}
.chip.ok{background:var(--sage-soft);border-color:transparent;color:#4a5738;}
.chip.miss{background:var(--alarm-soft);border-color:transparent;color:var(--alarm);}
.day-sum{
  display:flex;gap:14px;margin-bottom:16px;padding:2px 4px;
}
.day-sum .stat{font-size:13px;color:var(--ink-soft);}
.day-sum .stat b{color:var(--ink);font-size:15px;}

/* ---- Oznaka neradnog dana (dnevni pogled) ---- */
.dayflag{
  display:flex;align-items:center;gap:9px;
  border-radius:13px;padding:11px 14px;margin-bottom:14px;
  font-size:14px;font-weight:600;line-height:1.35;
}
.dayflag .df-ic{font-size:18px;flex-shrink:0;}
.dayflag .df-sub{display:block;font-weight:500;font-size:12.5px;opacity:.8;margin-top:2px;}
.dayflag.weekend{background:var(--weekend);color:var(--weekend-ink);}
.dayflag.holiday{background:var(--holiday-soft);color:var(--holiday);}

/* ---- Klijenti ---- */
.search{
  width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:13px;
  font-size:15px;background:var(--card);margin-bottom:14px;color:var(--ink);
  -webkit-user-select:text;user-select:text;
}
.client{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;margin-bottom:9px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;box-shadow:var(--shadow);
}
.client-main{min-width:0;flex:1;}
.client-name{font-size:15.5px;font-weight:600;}
.client-note{font-size:13px;color:var(--ink-soft);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.client-meta{text-align:right;font-size:12px;color:var(--ink-soft);}
.noshow-badge{color:var(--alarm);font-weight:600;}
.icon-btn{background:var(--brass-soft);border:none;width:40px;height:40px;
  border-radius:11px;font-size:17px;cursor:pointer;flex-shrink:0;}

/* ---- Usluge ---- */
.svc-row{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;margin-bottom:9px;display:flex;align-items:center;
  justify-content:space-between;box-shadow:var(--shadow);
}
.svc-name{font-weight:600;font-size:15px;}
.svc-detail{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.svc-price{font-size:16px;font-weight:700;color:var(--brass);}

.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);font-weight:600;margin:22px 4px 12px;}

/* ---- FAB ---- */
.fab{
  position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:20px;background:var(--brass);
  color:#fff;border:none;font-size:30px;box-shadow:0 6px 20px rgba(176,137,72,.45);
  z-index:30;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.fab:active{transform:scale(.92);}

/* ---- Tab bar ---- */
nav.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:25;
  background:var(--card);border-top:1px solid var(--line);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px rgba(45,36,56,.06);
}
nav.tabs button{
  flex:1;background:none;border:none;padding:10px 0 8px;cursor:pointer;
  color:var(--ink-soft);font-size:11px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
nav.tabs button .ic{font-size:21px;}
nav.tabs button.active{color:var(--brass);}

/* ---- Modal / sheet ---- */
.sheet-bg{
  position:fixed;inset:0;background:rgba(45,36,56,.45);z-index:40;
  display:none;align-items:flex-end;
}
.sheet-bg.open{display:flex;animation:fade .2s ease;}
.sheet{
  background:var(--paper);width:100%;max-width:640px;margin:0 auto;
  border-radius:24px 24px 0 0;padding:8px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;animation:slideup .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:none;}}
.grabber{width:42px;height:5px;background:var(--line);border-radius:9px;margin:8px auto 16px;}
.sheet h2{font-size:20px;margin:0 0 18px;font-weight:700;}
label.fld{display:block;margin-bottom:15px;}
label.fld .lab{font-size:13px;color:var(--ink-soft);font-weight:600;margin-bottom:6px;display:block;}
input,select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:16px;background:var(--card);color:var(--ink);font-family:inherit;
  -webkit-user-select:text;user-select:text;
}
textarea{resize:none;min-height:64px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);}
.svc-picker{display:flex;gap:8px;flex-wrap:wrap;}
.svc-pick{border:1px solid var(--line);background:var(--card);padding:9px 13px;
  border-radius:20px;font-size:14px;cursor:pointer;color:var(--ink);}
.svc-pick.sel{background:var(--brass);color:#fff;border-color:var(--brass);}
/* Dva polja jedno pored drugog (datum+vrijeme, trajanje+cijena).
   Na iPhoneu su se preklapala: iOS daje date/time inputima vlastitu minimalnu
   širinu, a flex stavke se po defaultu (min-width:auto) ne smiju suziti ispod nje,
   pa su ispadale iz okvira. min-width:0 im dopušta sužavanje, a flex-wrap ih na
   vrlo uskim ekranima složi jedno ispod drugog umjesto da se stisnu do nečitljivosti. */
.time-row{display:flex;gap:10px;flex-wrap:wrap;}
/* osnova 150px = najmanja širina na kojoj iOS uredno prikaže "15.08.2026." s ikonom;
   ispod toga se polja radije prelome u dva reda nego da se stisnu */
.time-row>*{flex:1 1 150px;min-width:0;}
.time-row input{width:100%;min-width:0;max-width:100%;}

/* iOS: bez ovoga native prikaz vrijednosti diktira širinu polja */
input[type="date"],input[type="time"]{
  -webkit-appearance:none;appearance:none;
  display:block;min-width:0;max-width:100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{
  text-align:left;min-width:0;margin:0;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  margin-left:auto;flex-shrink:0;
}
.btn-primary{
  width:100%;padding:15px;background:var(--ink);color:var(--paper);border:none;
  border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:6px;
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{width:100%;padding:13px;background:none;border:none;color:var(--alarm);
  font-size:14px;cursor:pointer;margin-top:8px;font-weight:600;}
.btn-sec{width:100%;padding:13px;background:var(--brass-soft);border:none;
  border-radius:12px;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;margin-top:8px;}
.btn-sec:disabled{opacity:.55;cursor:default;}
/* verzija aplikacije ispod gumba za ažuriranje */
.app-ver{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:9px;}
.toast{
  position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:30px;font-size:14px;z-index:60;
  box-shadow:0 4px 18px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}
.hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;
  background:var(--brass-soft);padding:11px 13px;border-radius:11px;margin-bottom:14px;}

/* ---- Potvrdni modal (neradni dan) ---- */
.confirm-bg{
  position:fixed;inset:0;background:rgba(45,36,56,.55);z-index:50;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.confirm-bg.open{display:flex;animation:fade .18s ease;}
.confirm-box{
  background:var(--paper);width:100%;max-width:380px;border-radius:22px;
  padding:24px 22px 18px;text-align:center;box-shadow:0 12px 40px rgba(45,36,56,.35);
  animation:popin .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes popin{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
.confirm-ic{
  width:56px;height:56px;border-radius:18px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  background:var(--holiday-soft);
}
.confirm-ic.weekend{background:var(--weekend);}
.confirm-ic.danger{background:var(--alarm-soft);}
.confirm-box h3{margin:0 0 8px;font-size:19px;font-weight:700;}
.confirm-box p{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.confirm-box .cf-day{font-weight:700;color:var(--ink);}

/* što se točno briše */
.cf-what{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;margin:12px 0;text-align:left;
}
.cf-what-main{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35;}
.cf-what-sub{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.4;}
.cf-warn{
  background:var(--alarm-soft);color:#8f3d33;border-radius:11px;
  padding:10px 13px;font-size:13.5px !important;line-height:1.45 !important;
  text-align:left;margin:0 0 8px !important;
}
.cf-warn b{color:#7a3229;}
.cf-undo{font-size:12.5px !important;color:var(--ink-soft);margin-top:10px !important;}
.confirm-box .cf-hol{
  display:inline-block;margin-top:10px;background:var(--holiday-soft);color:var(--holiday);
  padding:6px 13px;border-radius:20px;font-size:13.5px;font-weight:600;
}
.confirm-box .cf-hol.weekend{background:var(--weekend);color:var(--weekend-ink);}
.confirm-actions{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
.confirm-actions button{
  width:100%;padding:14px;border:none;border-radius:13px;
  font-size:15.5px;font-weight:600;cursor:pointer;font-family:inherit;
}
.confirm-actions .yes{background:var(--ink);color:var(--paper);}
.confirm-actions .yes.danger{background:var(--alarm);color:#fff;}
.confirm-actions .no{background:none;color:var(--ink-soft);padding:10px;}
.confirm-actions button:active{transform:scale(.98);}

/* ---- Segmentni prekidač pogleda ---- */
.seg{display:flex;gap:4px;margin-top:14px;background:rgba(255,255,255,.09);
  padding:4px;border-radius:12px;}
.seg button{flex:1;background:none;border:none;color:var(--brass-soft);
  font-size:13.5px;font-weight:600;padding:8px 0;border-radius:9px;cursor:pointer;
  letter-spacing:.02em;transition:background .15s;}
.seg button.active{background:var(--brass);color:#fff;}

/* ---- Tjedni pogled ---- */
.week-day{background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow);}
.week-day.is-today{border-color:var(--brass);border-width:1.5px;}
.week-day-head{display:flex;align-items:baseline;justify-content:space-between;
  padding:11px 15px 9px;cursor:pointer;gap:10px;}
.week-day-head .wd-name{font-weight:700;font-size:15px;}
.week-day-head .wd-name .dow{color:var(--ink-soft);font-weight:500;font-size:13px;margin-left:6px;}
.week-day-head .wd-count{font-size:12px;color:var(--brass);font-weight:600;white-space:nowrap;}
.week-day.is-today .week-day-head .wd-name{color:var(--brass);}
/* vikend / blagdan */
.week-day.weekend{background:var(--weekend);border-color:#e2d4e4;}
.week-day.weekend .week-day-head .wd-name .dow{color:var(--weekend-ink);}
.week-day.holiday{background:var(--holiday-soft);border-color:#eecdd3;}
.week-day.holiday .week-day-head .wd-name{color:var(--holiday);}
.wd-hol{display:block;font-size:12px;font-weight:600;color:var(--holiday);margin-top:3px;}
.week-day.weekend .week-item,.week-day.holiday .week-item{background:rgba(255,255,255,.72);}
.week-slot{padding:0 15px 11px;display:flex;flex-direction:column;gap:5px;}
.week-item{display:flex;gap:9px;align-items:center;font-size:13.5px;
  padding:6px 9px;background:var(--paper);border-radius:9px;cursor:pointer;
  border-left:3px solid var(--brass);}
.week-item.done{border-left-color:var(--sage);opacity:.6;}
.week-item.noshow{border-left-color:var(--alarm);}
.week-item .wt{font-weight:700;min-width:38px;}
.week-item .wn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.week-empty{padding:2px 15px 12px;color:var(--ink-soft);font-size:13px;}

/* ---- Mjesečni pogled ---- */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.month-dow{text-align:center;font-size:11px;color:var(--ink-soft);font-weight:600;
  padding:4px 0 8px;text-transform:uppercase;letter-spacing:.05em;}
.month-dow.we{color:var(--weekend-ink);}
.mcell{background:var(--card);border:1px solid var(--line);border-radius:9px;
  min-height:74px;padding:4px 4px 3px;cursor:pointer;display:flex;flex-direction:column;
  overflow:hidden;}
.mcell.other{opacity:.35;}
.mcell.weekend{background:var(--weekend);border-color:#e2d4e4;}
.mcell.weekend .mnum{color:var(--weekend-ink);}
.mcell.holiday{background:var(--holiday-soft);border-color:#eecdd3;}
.mcell.holiday .mnum{color:var(--holiday);}
.mcell.is-today{border-color:var(--brass);border-width:1.5px;background:var(--brass-soft);}
.mcell .mnum{font-size:12px;font-weight:700;margin-bottom:2px;}
.mcell.is-today .mnum{color:var(--brass);}
.mhol{font-size:8.5px;line-height:1.2;font-weight:600;color:var(--holiday);
  margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtag{font-size:9.5px;line-height:1.25;background:var(--brass);color:#fff;
  border-radius:4px;padding:1px 3px;margin-bottom:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.mtag.done{background:var(--sage);}
.mtag.noshow{background:var(--alarm);}
.mmore{font-size:9px;color:var(--ink-soft);font-weight:600;}

/* ---- Legenda ispod mjeseca ---- */
.mlegend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;font-size:11.5px;color:var(--ink-soft);}
.mlegend span{display:flex;align-items:center;gap:5px;}
.mlegend i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.mlegend i.we{background:var(--weekend);border:1px solid #e2d4e4;}
.mlegend i.ho{background:var(--holiday-soft);border:1px solid #eecdd3;}
.mlegend i.td{background:var(--brass-soft);border:1px solid var(--brass);}