/* Kellys — stylesheet
   Author: Markiii */

:root {
  --turq-900:#0F5C57;
  --turq-700:#1E8C85;
  --turq-500:#3FB8AF;
  --turq-300:#8FD6D0;
  --turq-100:#DDF2F0;
  --turq-050:#F2FAF9;

  --ink:#12302E;
  --ink-soft:#5A7570;
  --ink-faint:#94AEAA;
  --line:#E3EDEB;
  --white:#FFFFFF;
  --danger:#D2544C;
  --warn:#E0A33E;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(18,48,46,.06), 0 6px 20px rgba(18,48,46,.06);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  margin:0; padding:0;
  height:100%;
  overscroll-behavior-y:none;
}

body {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background:var(--turq-050);
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
input, select, textarea { -webkit-appearance:none; appearance:none; }

/* ---------- login ---------- */
.login-wrap {
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 24px calc(32px + var(--safe-b));
  background:linear-gradient(165deg, var(--turq-700) 0%, var(--turq-900) 100%);
}
.brand {
  text-align:center;
  margin-bottom:36px;
}
.brand-mark {
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:20px;
  background:linear-gradient(145deg, var(--turq-500), var(--turq-700));
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(31,140,133,.28);
}
.brand-mark svg { width:32px; height:32px; }
.brand h1 {
  margin:0; font-size:28px; font-weight:650; letter-spacing:-.02em;
  color:var(--turq-900);
}
.brand p { margin:6px 0 0; color:rgba(255,255,255,.82); font-size:15px; }

.pin-display {
  display:flex; gap:14px; justify-content:center; margin-bottom:28px;
}
.pin-dot {
  width:14px; height:14px; border-radius:50%;
  background:transparent;
  border:2px solid rgba(255,255,255,.5);
  transition:transform .12s ease, background .12s ease;
}
.pin-dot.filled { background:#fff; border-color:#fff; transform:scale(1.15); }

.keypad {
  display:grid; grid-template-columns:repeat(3, 76px);
  gap:16px; justify-content:center;
}
.key {
  height:76px; border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  font-size:26px; font-weight:500;
  color:var(--turq-900);
  box-shadow:var(--shadow);
  transition:transform .08s ease, background .08s ease;
}
.key:active { transform:scale(.94); background:var(--turq-100); }
.key.action { background:transparent; box-shadow:none; border-color:transparent; font-size:15px; color:rgba(255,255,255,.9); font-weight:600; }
.key.go { background:var(--turq-500); color:var(--white); border-color:var(--turq-500); }

.login-error {
  min-height:22px; margin-top:20px;
  color:var(--danger); font-size:14px; font-weight:500; text-align:center;
}
.shake { animation:shake .38s; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}
}

/* ---------- app shell ---------- */
.app {
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding-bottom:calc(64px + var(--safe-b));
}

.topbar {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  padding:calc(10px + var(--safe-t)) 16px 10px;
}
.topbar-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.month-title { font-size:20px; font-weight:650; letter-spacing:-.01em; color:var(--turq-900); }
.month-title small { display:block; font-size:12px; font-weight:500; color:var(--ink-faint); letter-spacing:.02em; text-transform:uppercase; }
.topbar-actions { display:flex; gap:8px; }
.icon-btn {
  width:38px; height:38px; border-radius:12px;
  background:var(--turq-050); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--turq-700);
}
.icon-btn:active { background:var(--turq-100); }
.icon-btn svg { width:19px; height:19px; }

/* week strip */
.week-strip {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:4px; margin-top:12px;
}
.wd {
  border-radius:12px; padding:7px 2px 8px;
  text-align:center; background:transparent;
  border:1px solid transparent;
  position:relative;
  transition:background .12s ease;
}
.wd-name { font-size:11px; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.wd-num  { font-size:17px; font-weight:600; margin-top:2px; color:var(--ink); }
.wd.today .wd-num { color:var(--turq-700); }
.wd.sel { background:var(--turq-500); border-color:var(--turq-500); }
.wd.sel .wd-name, .wd.sel .wd-num { color:var(--white); }
.wd.off .wd-num { color:var(--ink-faint); }
.wd-pips { display:flex; gap:2px; justify-content:center; height:5px; margin-top:3px; }
.pip { width:4px; height:4px; border-radius:50%; background:var(--turq-500); }
.wd.sel .pip { background:rgba(255,255,255,.85); }
.pip.blocked { background:var(--ink-faint); }

/* ---------- day view ---------- */
.day-head {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 16px 8px;
}
.day-head h2 { margin:0; font-size:22px; font-weight:650; letter-spacing:-.015em; }
.day-meta { font-size:13px; color:var(--ink-soft); }

.note-card {
  margin:0 16px 12px; padding:12px 14px;
  background:#FFF8E8; border:1px solid #F0DFB4;
  border-radius:var(--radius-sm);
  font-size:14px; color:#6B5320;
  display:flex; gap:10px; align-items:flex-start;
}
.note-card svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; }

.blocked-banner {
  margin:0 16px 12px; padding:14px;
  background:var(--turq-100); border:1px dashed var(--turq-300);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.blocked-banner b { color:var(--turq-900); }
.blocked-banner span { font-size:14px; color:var(--turq-700); }

.agenda { padding:0 16px 24px; display:flex; flex-direction:column; gap:10px; }

.appt {
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--turq-500);
  border-radius:var(--radius);
  padding:14px 14px 14px 13px;
  box-shadow:var(--shadow);
  display:flex; gap:12px;
  transition:transform .08s ease;
}
.appt:active { transform:scale(.985); }
.appt.done { opacity:.6; }
.appt.cancelled { opacity:.45; }
.appt.cancelled .appt-name { text-decoration:line-through; }

.appt-time {
  flex-shrink:0; width:52px;
  font-variant-numeric:tabular-nums;
}
.appt-time b { display:block; font-size:15px; font-weight:650; color:var(--turq-900); }
.appt-time span { display:block; font-size:12px; color:var(--ink-faint); }

.appt-body { flex:1; min-width:0; }
.appt-name { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.appt-sub { font-size:13px; color:var(--ink-soft); margin-top:1px; }
.appt-note { font-size:13px; color:var(--ink-soft); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); }

.appt-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.pill {
  font-size:11px; font-weight:650; padding:3px 8px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.03em;
}
.pill.booked { background:var(--turq-100); color:var(--turq-700); }
.pill.done { background:#E4F2E6; color:#3D7A47; }
.pill.cancelled { background:#F3E5E4; color:var(--danger); }
.pill.noshow { background:#FBEEDA; color:#96671C; }
.appt-price { font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

.empty {
  text-align:center; padding:56px 24px; color:var(--ink-faint);
}
.empty svg { width:44px; height:44px; margin-bottom:12px; opacity:.5; }
.empty p { margin:0; font-size:15px; }
.empty b { display:block; color:var(--ink-soft); font-weight:600; margin-bottom:4px; }

/* ---------- FAB + tab bar ---------- */
.fab {
  position:fixed; right:18px;
  bottom:calc(78px + var(--safe-b));
  width:56px; height:56px; border-radius:20px;
  background:linear-gradient(145deg, var(--turq-500), var(--turq-700));
  color:var(--white);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(31,140,133,.36);
  z-index:45;
  transition:transform .1s ease;
}
.fab:active { transform:scale(.92); }
.fab svg { width:26px; height:26px; }

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr);
  padding-bottom:var(--safe-b);
}
.tab {
  padding:9px 0 8px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-faint); font-size:11px; font-weight:600;
}
.tab svg { width:22px; height:22px; }
.tab.active { color:var(--turq-700); }

/* ---------- sheets ---------- */
.scrim {
  position:fixed; inset:0; z-index:60;
  background:rgba(18,48,46,.42);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.scrim.open { opacity:1; pointer-events:auto; }

.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--white);
  border-radius:24px 24px 0 0;
  max-height:92dvh;
  display:flex; flex-direction:column;
  transform:translateY(101%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 40px rgba(18,48,46,.16);
}
.sheet.open { transform:translateY(0); }

.sheet-grab { width:38px; height:5px; border-radius:99px; background:var(--line); margin:9px auto 0; flex-shrink:0; }
.sheet-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.sheet-head h3 { margin:0; font-size:18px; font-weight:650; letter-spacing:-.01em; }
.sheet-head button { font-size:16px; font-weight:600; color:var(--turq-700); padding:4px 2px; }
.sheet-head button.save { color:var(--turq-700); }
.sheet-body { padding:16px 16px calc(24px + var(--safe-b)); overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ---------- forms ---------- */
.field { margin-bottom:16px; }
.field label {
  display:block; font-size:13px; font-weight:650;
  color:var(--ink-soft); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.03em;
}
.field input, .field select, .field textarea {
  width:100%; padding:13px 14px;
  background:var(--turq-050);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:16px;   /* 16px stops iOS zoom-on-focus */
  transition:border-color .15s ease, background .15s ease;
}
.field textarea { min-height:84px; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--turq-500); background:var(--white);
}
.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7570' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:36px;
}
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-hint { font-size:12px; color:var(--ink-faint); margin-top:5px; text-transform:none; letter-spacing:0; font-weight:400; }

.btn {
  width:100%; padding:15px; border-radius:var(--radius-sm);
  font-size:16px; font-weight:650;
  background:var(--turq-500); color:var(--white);
  transition:transform .08s ease, opacity .15s ease;
}
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.5; }
.btn.ghost { background:var(--turq-050); color:var(--turq-700); border:1px solid var(--turq-300); }
.btn.danger { background:transparent; color:var(--danger); border:1px solid #F0D4D2; }
.btn + .btn { margin-top:10px; }

/* ---------- REBOOK — the signature ---------- */
.rebook {
  margin:4px 0 20px;
  padding:16px 14px;
  background:linear-gradient(160deg, var(--turq-100), var(--turq-050));
  border:1px solid var(--turq-300);
  border-radius:var(--radius);
}
.rebook-head {
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.rebook-head svg { width:17px; height:17px; color:var(--turq-700); }
.rebook-head b { font-size:15px; font-weight:650; color:var(--turq-900); }
.rebook-sub { font-size:13px; color:var(--turq-700); margin-bottom:12px; }
.rebook-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.rb {
  padding:11px 0 9px;
  background:var(--white);
  border:1px solid var(--turq-300);
  border-radius:12px;
  text-align:center;
  transition:transform .08s ease, background .1s ease;
}
.rb:active { transform:scale(.93); }
.rb.picked { background:var(--turq-500); border-color:var(--turq-500); }
.rb.picked b, .rb.picked span { color:var(--white); }
.rb b { display:block; font-size:19px; font-weight:700; color:var(--turq-900); line-height:1.1; }
.rb span { display:block; font-size:10px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:1px; }
.rb.custom b { font-size:15px; padding-top:2px; }
.rebook-result {
  margin-top:12px; padding:11px 12px;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:600;
  display:none;
}
.rebook-result.show { display:block; }
.rebook-result.ok { background:#E4F2E6; color:#2F6639; }
.rebook-result.err { background:#F9E9E8; color:var(--danger); }

/* ---------- lists (clients / services) ---------- */
.search-bar { padding:12px 16px 4px; }
.search-bar input {
  width:100%; padding:12px 14px 12px 40px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394AEAA' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:13px center; background-size:17px;
}
.search-bar input:focus { outline:none; border-color:var(--turq-500); }

.list { padding:12px 16px calc(24px + var(--safe-b)); display:flex; flex-direction:column; gap:8px; }
.row {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 14px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow);
  transition:transform .08s ease;
}
.row:active { transform:scale(.985); }
.avatar {
  width:40px; height:40px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--turq-100); color:var(--turq-700);
  font-weight:700; font-size:15px;
}
.row-body { flex:1; min-width:0; }
.row-title { font-size:15px; font-weight:600; }
.row-sub { font-size:13px; color:var(--ink-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-chev { color:var(--ink-faint); flex-shrink:0; }
.row-chev svg { width:16px; height:16px; }

.hist { margin-top:20px; }
.hist h4 {
  margin:0 0 10px; font-size:13px; font-weight:650;
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;
}
.hist-row {
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.hist-row:last-child { border-bottom:none; }
.hist-row span { color:var(--ink-soft); }

/* toast */
.toast {
  position:fixed; left:50%; bottom:calc(96px + var(--safe-b));
  transform:translate(-50%, 14px);
  z-index:90;
  background:var(--turq-900); color:var(--white);
  padding:11px 18px; border-radius:99px;
  font-size:14px; font-weight:600;
  box-shadow:0 8px 26px rgba(15,92,87,.32);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  max-width:calc(100% - 40px); text-align:center;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.err { background:var(--danger); }

.seg {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--turq-100); border-radius:12px; padding:3px; margin-bottom:16px;
}
.seg button {
  padding:9px 0; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--turq-700);
}
.seg button.on { background:var(--white); box-shadow:0 1px 3px rgba(18,48,46,.1); color:var(--turq-900); }

/* ---------- in-app dialogs ---------- */
.modal {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(18,48,46,.38);
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.modal.open { opacity:1; pointer-events:auto; }
.modal-card {
  width:100%; max-width:340px;
  background:var(--white); border-radius:var(--radius);
  padding:22px 20px 18px;
  box-shadow:0 20px 60px rgba(18,48,46,.28);
  transform:translateY(8px) scale(.98);
  transition:transform .18s ease;
}
.modal.open .modal-card { transform:translateY(0) scale(1); }
.modal-card h3 { margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.modal-card p { margin:0 0 16px; font-size:15px; line-height:1.5; color:var(--ink-soft); white-space:pre-line; }
.modal-input {
  width:100%; padding:13px 14px; margin:0 0 16px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; color:var(--ink); background:var(--turq-050);
}
.modal-input:focus { outline:none; border-color:var(--turq-300); background:var(--white); }
.modal-btns { display:flex; gap:10px; }
.modal-btns .btn { width:auto; flex:1; margin-top:0; padding:13px; }
.modal-btns .btn + .btn { margin-top:0; }

/* ---------- toast action (Undo) ---------- */
.toast:has(.toast-act) { display:flex; align-items:center; gap:14px; text-align:left; }
.toast-act {
  color:var(--turq-300); font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:.04em;
  padding:2px 2px; flex-shrink:0;
}

/* ---------- week summary ---------- */
.week-sum {
  padding:0 16px; max-height:0; overflow:hidden;
  font-size:12.5px; font-weight:600; color:var(--ink-faint);
  letter-spacing:.01em;
  transition:max-height .2s ease, padding .2s ease;
}
.week-sum.show { max-height:28px; padding:2px 16px 8px; }

/* ---------- Fresha-style day timeline ---------- */
.tl { position:relative; margin:6px 0 48px; }
.tl-hours { position:absolute; inset:0; pointer-events:none; }
.tl-hour { position:absolute; left:0; right:0; border-top:1px solid var(--line); }
.tl-hour span {
  position:absolute; left:0; top:-8px; width:46px; text-align:right; padding-right:8px;
  font-size:11px; font-weight:600; color:var(--ink-faint);
  background:var(--turq-050);
}
.tl-track { position:absolute; left:52px; right:6px; top:0; bottom:0; }

.tl-appt {
  position:absolute; overflow:hidden;
  border-radius:9px; border-left:3px solid var(--turq-500);
  padding:5px 8px; cursor:pointer;
  box-shadow:0 1px 2px rgba(18,48,46,.08);
  transition:transform .07s ease;
}
.tl-appt:active { transform:scale(.99); }
.tl-appt-name { font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-appt-sub  { font-size:12px; color:var(--ink-soft); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-appt-time { font-size:11px; color:var(--ink-faint); margin-top:1px; }
.tl-appt.compact { padding:3px 8px; }
.tl-appt.compact .tl-appt-sub, .tl-appt.compact .tl-appt-time { display:none; }
.tl-appt.done   { opacity:.72; }
.tl-appt.done .tl-appt-name { text-decoration:line-through; text-decoration-thickness:1px; }
.tl-appt.cancelled { display:none; }
.tl-appt.noshow { border-left-color:var(--danger); }

.tl-block {
  position:absolute; left:0; right:0; overflow:hidden;
  border-radius:8px;
  background:repeating-linear-gradient(45deg, #E3EDEB, #E3EDEB 8px, #EDF4F2 8px, #EDF4F2 16px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.tl-block span { font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; }

.tl-now { position:absolute; left:-6px; right:0; height:0; border-top:2px solid var(--danger); z-index:5; }
.tl-now::before { content:''; position:absolute; left:0; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--danger); }

/* ---------- working hours editor ---------- */
.hours-list { display:flex; flex-direction:column; gap:10px; }
.hours-row {
  display:flex; flex-direction:column; gap:9px;
  padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--turq-050); border:1px solid var(--line);
}
.hours-head { display:flex; align-items:center; justify-content:space-between; }
.hours-day { font-size:15px; font-weight:700; color:var(--ink); }
.hours-times { display:flex; align-items:center; gap:10px; }
.hours-times input[type=time] {
  flex:1; min-width:0; padding:10px 10px; text-align:center;
  border:1px solid var(--line); border-radius:9px; background:var(--white);
  font-size:15px; color:var(--ink);
}
.hours-times input[type=time]:disabled { background:transparent; color:var(--ink-faint); opacity:.5; }
.hours-times span { color:var(--ink-faint); font-size:13px; }
.hours-closed { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.hours-closed input { width:18px; height:18px; accent-color:var(--turq-500); }
.hours-row.off .hours-day { color:var(--ink-faint); }

/* ---------- login logo ---------- */
.brand-logo { display:block; width:240px; max-width:76%; height:auto; margin:0 auto 2px; }