/* LASHES by Špela — portal styles.
   Two themes off one set of tokens. Everything below the token blocks is
   theme-agnostic: it only ever refers to variables, never to a raw colour. */

/* --- Dark (default) --------------------------------------------------------- */

:root {
  --bg:          #050505;
  --bg-glow:     radial-gradient(120% 90% at 50% 8%, #1a0f26 0%, #050505 62%);
  --surface:     #0f0d12;
  --surface-2:   #0a080d;
  --line:        #241d2b;
  --line-2:      #2c2435;
  --ink:         #f4f0f6;
  --ink-mid:     #ddd6e3;
  --ink-soft:    #8b8194;
  --ink-faint:   #6c6376;

  --accent:      #c084fc;
  --accent-str:  #e9d5ff;
  --gradient:    linear-gradient(92deg, #9333ea, #db2777);
  --wordmark:    linear-gradient(92deg, #a855f7, #f0abfc);
  --glow:        0 0 18px rgba(147, 51, 234, .45);
  --glow-strong: 0 0 26px rgba(147, 51, 234, .5);
  --wm-glow:     drop-shadow(0 0 14px rgba(168, 85, 247, .5));

  --sel-bg:      linear-gradient(92deg, rgba(147, 51, 234, .22), rgba(219, 39, 119, .14));
  --sel-line:    rgba(192, 132, 252, .45);
  --warn-bg:     rgba(219, 39, 119, .09);
  --warn-line:   rgba(240, 171, 252, .4);
  --warn-ink:    #f6e9fb;
  --warn-label:  #f0abfc;

  --danger:      #f87171;
  --blocked-fill:   rgba(255, 255, 255, .05);
  --blocked-stripe: rgba(255, 255, 255, .11);
  --blocked-ink:    #9a90a6;
  --now:            #ff4438;

  --photo-line:  rgba(192, 132, 252, .35);
  --photo-glow:  0 0 18px rgba(147, 51, 234, .22);
  --card-shadow: none;

  --radius:      14px;
  --radius-sm:   10px;
}

/* --- Light ------------------------------------------------------------------ */

:root[data-theme="light"] {
  --bg:          #f6f2fa;
  --bg-glow:     radial-gradient(120% 90% at 50% 6%, #f3e9fd 0%, #f6f2fa 60%);
  --surface:     #ffffff;
  --surface-2:   #fdfbff;
  --line:        #ebe3f3;
  --line-2:      #e6ddf0;
  --ink:         #17141c;
  --ink-mid:     #2c2735;
  --ink-soft:    #6f6779;
  --ink-faint:   #9990a3;

  --accent:      #7c3aed;
  --accent-str:  #5b21b6;
  --gradient:    linear-gradient(92deg, #9333ea, #db2777);
  --wordmark:    linear-gradient(92deg, #7c3aed, #db2777);
  --glow:        0 4px 12px rgba(147, 51, 234, .28);
  --glow-strong: 0 6px 18px rgba(147, 51, 234, .32);
  --wm-glow:     none;

  --sel-bg:      linear-gradient(92deg, rgba(147, 51, 234, .12), rgba(219, 39, 119, .07));
  --sel-line:    rgba(147, 51, 234, .32);
  --warn-bg:     rgba(219, 39, 119, .06);
  --warn-line:   rgba(219, 39, 119, .28);
  --warn-ink:    #3a2130;
  --warn-label:  #b0329a;

  --danger:      #c0392f;
  --blocked-fill:   rgba(23, 20, 28, .05);
  --blocked-stripe: rgba(23, 20, 28, .13);
  --blocked-ink:    #8b8398;
  --now:            #dc2626;

  --photo-line:  #ebe3f3;
  --photo-glow:  none;
  --card-shadow: 0 1px 3px rgba(23, 20, 28, .05);
}

* { box-sizing: border-box; }

/* An explicit display value beats the browser's [hidden] rule, so anything laid
   out with flex/grid would stay visible when hidden. Settle it once, here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.spacer { flex: 1; }

.empty {
  color: var(--ink-soft);
  padding: 24px;
  text-align: center;
}

/* --- Wordmark --------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  filter: var(--wm-glow);
}
.wm-lashes {
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 3px;
  background: var(--wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wm-by {
  font-family: "Parisienne", cursive;
  font-size: 19px;
  color: var(--ink);
}

/* Stacked, larger version for the login card. */
.wordmark.stacked { flex-direction: column; align-items: center; gap: 2px; }
.wordmark.stacked .wm-lashes { font-size: 34px; letter-spacing: 6px; text-indent: 6px; }
.wordmark.stacked .wm-by { font-size: 26px; align-self: flex-end; margin-right: 8px; margin-top: -6px; }

/* --- Buttons ---------------------------------------------------------------- */

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  padding: 8px 14px;
}
button:hover { border-color: var(--accent); }

button.primary {
  background: var(--gradient);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  padding: 9px 20px;
  box-shadow: var(--glow);
}
button.primary:hover { box-shadow: var(--glow-strong); }

button.outline {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-str);
  font-weight: 600;
}

button.danger { color: var(--danger); border-color: transparent; background: transparent; }
button.danger:hover { border-color: var(--danger); }

button.small { padding: 6px 12px; font-size: 12px; }
button.primary.small, button.outline.small { padding: 7px 13px; }

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  padding: 6px 4px;
  text-decoration: underline;
}
.link-button:hover { color: var(--accent-str); }

/* --- Theme toggle ----------------------------------------------------------- */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Show the icon for the theme you would switch TO. */
.theme-toggle .icon-light { display: block; }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: block; }

/* --- Forms ------------------------------------------------------------------ */

input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
}
textarea { resize: vertical; }
::placeholder { color: var(--ink-faint); }

.error { color: var(--danger); margin: 4px 0 0; }

/* --- Login page ------------------------------------------------------------- */

.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
  background: var(--bg-glow);
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(147, 51, 234, .18);
  padding: 40px 34px;
}
:root[data-theme="light"] .login-card { box-shadow: 0 8px 40px rgba(147, 51, 234, .12); }

.login-card .theme-toggle { position: absolute; top: 14px; right: 14px; }

.login-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  margin: 30px 0 26px;
}

.login-card label { display: block; margin: 16px 0 6px; font-size: 11px; letter-spacing: .6px; color: var(--ink-soft); }
.login-card button[type="submit"] { width: 100%; margin-top: 22px; padding: 13px; font-size: 15px; font-weight: 700; }

/* --- Layout ----------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.who { color: var(--ink-soft); font-size: 13px; }

.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 24px;
  align-items: start;
  max-width: 1250px;
}

/* --- Address book ----------------------------------------------------------- */

.sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 16px;
  position: sticky;
  top: 20px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.sidebar-head h2 { font-family: "Syne", system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .5px; }

.client-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.client-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: none;
}
.client-item:hover { border-color: var(--line-2); }
.client-item.active {
  background: var(--sel-bg);
  border-color: var(--sel-line);
}
.client-item.active .client-name { font-weight: 700; }
.client-item.active .client-meta { color: var(--ink-mid); }

.client-name { display: block; font-weight: 600; font-size: 14px; color: var(--ink-mid); }
.client-item.active .client-name { color: var(--ink); }
.client-meta { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* --- Client detail ---------------------------------------------------------- */

.detail { display: grid; gap: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 18px 20px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h2 { font-family: "Syne", system-ui, sans-serif; font-size: 22px; font-weight: 700; }
.card-head h3 { font-family: "Syne", system-ui, sans-serif; font-size: 15px; font-weight: 700; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.grid.inset {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 11px; letter-spacing: .4px; color: var(--ink-soft); }
.field.wide, .form-actions { grid-column: 1 / -1; }

/* The allergy field is the one thing that must not be missed. */
.field.warn > span { color: var(--warn-label); }
.field.warn textarea {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn-ink);
}

.form-actions { display: flex; align-items: center; gap: 14px; }
.saved-hint { color: var(--accent); font-size: 13px; }

.head-actions { display: flex; align-items: center; gap: 12px; }

/* Read-only view: plain text, not a disabled-looking input. No box, no fill,
   no border - just a quiet label with the value under it. */
.read-grid { gap: 20px 28px; }

.field.read > span { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.field.read .value {
  margin: 3px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}
.field.read .value-empty { color: var(--ink-faint); }

/* Allergies still have to catch the eye - an accent rule, not a filled box. */
.field.read.warn {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
}
.field.read.warn > span { color: var(--warn-label); }
.field.read.warn .value { color: var(--ink); }

/* --- Appointments ----------------------------------------------------------- */

.appointment {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.appointment:first-child { border-top: none; padding-top: 0; }

.appointment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.appointment-head strong { font-size: 14px; font-weight: 700; }

.appointment-notes {
  margin: 8px 0 0;
  white-space: pre-wrap;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* --- Photos ----------------------------------------------------------------- */

.photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.photo {
  position: relative;
  margin: 0;
  width: 108px;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--photo-line);
  box-shadow: var(--photo-glow);
  background: var(--surface-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
.photo-delete:hover { background: var(--danger); }

/* Keep the grid clean: the delete cross appears on hover. Touch screens have no
   hover, so there it stays visible. */
.photo-delete { opacity: 0; transition: opacity .12s ease; }
.photo:hover .photo-delete,
.photo:focus-within .photo-delete { opacity: 1; }
@media (hover: none) { .photo-delete { opacity: 1; } }

.upload { display: inline-block; margin-top: 10px; }
.upload .link-button { cursor: pointer; }

/* --- Photo viewer ------------------------------------------------------------ */

/* Deliberately dark in BOTH themes - a photo is judged against a neutral dark
   surround, and a white overlay would wash out skin tones. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 72px;
  background: rgba(5, 3, 8, .93);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(147, 51, 234, .3);
}

.lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #f4f0f6;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .16); border-color: var(--accent); }
.lightbox-btn svg { width: 22px; height: 22px; display: block; }

.lightbox-close { top: 18px; right: 18px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }

.lightbox-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(244, 240, 246, .7);
}

.photo img { cursor: zoom-in; }
.no-scroll { overflow: hidden; }

@media (max-width: 780px) {
  .lightbox { padding: 64px 12px; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}

/* --- Navigation -------------------------------------------------------------- */

.nav { display: flex; gap: 4px; margin-left: 18px; }
.nav-item {
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.nav-item:hover { color: var(--ink); border-color: var(--line-2); }
.nav-item.active {
  color: var(--ink);
  background: var(--sel-bg);
  border-color: var(--sel-line);
  font-weight: 600;
}

/* --- Calendar ---------------------------------------------------------------- */

.calendar-page { padding: 20px 24px; }

.calendar-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.week-range { margin-left: 10px; font-family: "Syne", system-ui, sans-serif; font-weight: 700; font-size: 16px; }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }

.day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  min-height: 120px;
}
.day.today { border-color: var(--sel-line); }
.day.off { opacity: .6; }

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.day.today .day-head { background: var(--sel-bg); }
.day-name { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.day-date { font-size: 13px; font-weight: 600; }

.day-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.day-off { margin: 0; padding: 12px 4px; text-align: center; font-size: 12px; color: var(--ink-faint); }

.booking, .gap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.booking {
  background: var(--sel-bg);
  border: 1px solid var(--sel-line);
  color: var(--ink);
}
.booking:hover { border-color: var(--accent); }
.booking.done { opacity: .65; }
.booking-time { font-size: 11px; color: var(--ink-soft); }
.booking-title { font-weight: 600; }
.booking-sub { font-size: 11.5px; color: var(--ink-soft); }
.booking-flag { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }

.gap {
  background: none;
  border: 1px dashed var(--line-2);
  color: var(--ink-soft);
}
.gap:hover { border-color: var(--accent); border-style: solid; color: var(--ink); }
.gap-time { font-size: 11px; }
.gap-label { font-size: 11.5px; }

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.notice p { margin: 0 0 8px; }

.connect-button {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--glow);
}
.connect-button:hover { box-shadow: var(--glow-strong); color: #fff; }

/* --- Dialog ------------------------------------------------------------------ */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 3, 8, .7);
  backdrop-filter: blur(4px);
}
.dialog {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.dialog h3 { font-family: "Syne", system-ui, sans-serif; font-size: 17px; margin-bottom: 16px; }
.dialog .form-actions { margin-top: 6px; flex-wrap: wrap; }
.booking-detail p { margin: 0 0 10px; }

/* --- Phone ------------------------------------------------------------------ */

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; padding: 16px; }
  .sidebar { position: static; }
  .client-list { max-height: 40vh; }
  .grid { grid-template-columns: 1fr; }
  .topbar { padding: 14px 16px; flex-wrap: wrap; }
  .nav { margin-left: 0; order: 3; width: 100%; }
  .calendar-page { padding: 10px; }
  .day { min-height: 0; }
}

/* Which Google calendar the week view reads. */
.cal-picker { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.cal-picker > span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.cal-picker select { width: auto; min-width: 170px; padding: 6px 10px; font-size: 13px; }

/* --- Time slots --------------------------------------------------------------- */

.day-body { gap: 0; padding: 6px; }

.slot {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 12.5px;
  min-height: 28px;
}
.slot-time { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.slot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.slot.free { color: var(--ink-faint); }
.slot.free:hover { border-color: var(--accent); color: var(--ink); background: var(--surface-2); }

/* A lash booking: full detail, since this is her own salon calendar. */
.slot.taken {
  background: var(--sel-bg);
  border-color: transparent;
  border-radius: 0;
  color: var(--ink);
}
.slot.taken .slot-label { font-weight: 600; }
.slot.taken.run-start { border-radius: 6px 6px 0 0; margin-top: 2px; }
.slot.taken:hover { border-color: var(--accent); }
.slot.taken.done { opacity: .6; }

/* Busy on another calendar. Must read as unmistakably unavailable, while saying
   nothing about what it is - the app knows the time and nothing else, and the UI
   must not imply otherwise: no title, no tooltip, no colour coding by type. */
.slot.blocked {
  position: relative;
  background-color: var(--blocked-fill);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--blocked-stripe) 0, var(--blocked-stripe) 2px,
    transparent 2px, transparent 7px
  );
  border-radius: 0;
  color: var(--blocked-ink);
  cursor: not-allowed;
}
.slot.blocked .slot-time { color: var(--blocked-ink); opacity: .75; }
.slot.blocked .slot-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.slot.blocked .lock { width: 11px; height: 11px; flex-shrink: 0; opacity: .9; }

/* Solid edges top and bottom of a run, so a block reads as one sealed span
   rather than a stack of ambiguous rows. */
.slot.blocked.run-start {
  border-radius: 6px 6px 0 0;
  margin-top: 2px;
  border-top: 1px solid var(--blocked-stripe);
}
.slot.blocked.run-end {
  border-radius: 0 0 6px 6px;
  border-bottom: 1px solid var(--blocked-stripe);
}

/* --- Current time ------------------------------------------------------------- */

.day-body { position: relative; }

.now-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 0;
  border-top: 2px solid var(--now);
  pointer-events: none;
  z-index: 3;
}
.now-dot {
  position: absolute;
  left: -3px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--now);
}
.now-time {
  position: absolute;
  right: 0;
  top: -8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--now);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* Already gone by. Dimmed, not hidden - she may still want to look back. */
.slot.past { opacity: .45; }
.slot.past.taken { opacity: .5; }

/* Booking slots carry their own edit affordance, so the slot body can be used
   for navigating to the client instead. */
.slot.taken { grid-template-columns: 46px minmax(0, 1fr) 22px; cursor: pointer; }
.slot.taken:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.slot-edit {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .12s ease;
}
.slot-edit svg { width: 12px; height: 12px; display: block; }
.slot.taken:hover .slot-edit,
.slot.taken:focus-within .slot-edit { opacity: 1; }
.slot-edit:hover { color: var(--ink); background: var(--surface-2); }

/* No hover on touch, so the pencil has to stay put there. */
@media (hover: none) { .slot-edit { opacity: 1; } }

/* --- Her usual lash set --------------------------------------------------------
   Style and shape are labels, so they read as chips; the three lengths are
   numbers on a line and read as a strip - inner, peak, outer, left to right,
   the same order they sit on the eye. */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
}
.chip-style {
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--glow);
}
.chip-shape {
  background: var(--sel-bg);
  border: 1px solid var(--sel-line);
  color: var(--ink);
}

.lengths { display: flex; align-items: flex-end; gap: 6px; }

.len {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.len b { font-size: 17px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.len span { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }

/* The peak is the length everything else is judged against. */
.len.peak { border-color: var(--sel-line); background: var(--sel-bg); }
.len.peak b { color: var(--accent-str); }

.len-unit { font-size: 11px; color: var(--ink-soft); padding-bottom: 8px; }

/* On the client card, under its own label. */
.field.read.lash .lash-body { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* In the edit form: one labelled group rather than five loose fields. */
.lash-fields {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px 14px 14px;
}
.lash-fields > span { text-transform: uppercase; letter-spacing: .5px; }
.lash-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.lash-grid > .field:nth-child(1),
.lash-grid > .field:nth-child(2) { grid-column: span 3; }
.lash-grid > .field:nth-child(n+3) { grid-column: span 2; }

/* --- Daily view ---------------------------------------------------------------- */

.day-page { padding: 20px 24px; }
.day-source { margin: 0 0 14px; }

.day-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 1250px;
}

.day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* A gradient edge, so a wall of cards still has a left-hand rhythm. */
.day-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient);
}
.day-card.done { opacity: .62; }
.day-card.done::before { background: var(--line-2); }

.day-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-card-time {
  font-family: "Syne", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.day-card-flag {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
}

.day-card-name { font-family: "Syne", system-ui, sans-serif; font-size: 19px; font-weight: 700; }
.day-card-service { margin: -4px 0 0; color: var(--ink-mid); font-size: 13.5px; }

/* Allergies get the same treatment as on the client card: an accent rule, not
   a coloured box - it has to catch the eye without shouting. */
.day-card-allergy {
  margin: 2px 0;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--accent);
  font-size: 13px;
  color: var(--ink);
}
.day-card-allergy strong { color: var(--warn-label); }

.day-card-lash { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.day-card-meta { margin: 0; font-size: 12px; color: var(--ink-soft); }
.day-card-notes {
  margin: 0;
  white-space: pre-wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.day-card-photos { display: flex; flex-direction: column; gap: 5px; }
.day-card-photos-label {
  font-size: 9.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.day-card-photos .thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.day-card-photos img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--photo-line);
  cursor: zoom-in;
  display: block;
}

.day-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.day-card-actions .link-button { text-decoration: none; font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
  .day-page { padding: 16px; }
  .day-cards { grid-template-columns: 1fr; }
  .lash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lash-grid > .field:nth-child(1),
  .lash-grid > .field:nth-child(2) { grid-column: span 6; }
}

/* --- Storitev ------------------------------------------------------------------
   A checkbox must not inherit the full-width rule the text inputs use, or it
   stretches into a band across the form. */

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.check > span { font-size: 12.5px; color: var(--ink-mid); }

.check:has(input:disabled) { cursor: default; opacity: .45; }
.check:has(input:disabled) input { cursor: default; }

.service-field select { text-overflow: ellipsis; }
.service-field optgroup { font-style: normal; font-weight: 700; }

/* --- The set on an appointment -------------------------------------------------
   Sits between the note and the photos, because filling it in and putting the
   photos on are the same moment's work. */

.appointment-lash { margin: 10px 0 2px; }

.lash-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.lash-row-label {
  font-size: 9.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lash-row .value-empty { font-size: 12.5px; color: var(--ink-faint); }
.lash-row .link-button { padding: 2px 4px; font-size: 12px; }

/* Compact against the appointment's own line height. */
.lash-row .len { min-width: 46px; padding: 3px 7px; }
.lash-row .len b { font-size: 14px; }
.lash-row .len-unit { padding-bottom: 5px; }

.lash-form { margin: 0; }
.lash-form .lash-fields { border: none; background: none; padding: 0; }
.lash-form .form-actions { margin-top: 2px; }

@media (max-width: 780px) {
  .lash-row { align-items: flex-start; }
  .lash-row .spacer { flex-basis: 100%; }
}

/* --- Instagram -----------------------------------------------------------------
   The handle is the link to the chat, so it has to look tappable without
   turning the card into a page of blue underlines. */

.ig-value { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.ig-link:hover { color: var(--accent-str); text-decoration: underline; }
.ig-icon { width: 15px; height: 15px; flex-shrink: 0; }

.ig-profile {
  font-size: 11.5px;
  color: var(--ink-soft);
  text-decoration: underline;
}
.ig-profile:hover { color: var(--ink); }

/* On a day card it sits in the row of ways to reach her, beside the phone. */
.day-card-actions .ig-link { font-size: 13px; }

/* --- An appointment still ahead -------------------------------------------------
   A booking writes its row up front so the set and the photos can go in during
   the appointment. It sits at the top of the history and must not be mistaken
   for work already done. */

.appointment.upcoming {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-left: -16px;
}

.upcoming-flag {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent);
}

.appointment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 780px) {
  .appointment.upcoming { margin-left: 0; padding-left: 12px; }
  .appointment-actions { flex-wrap: wrap; }
}

/* --- Legal pages ---------------------------------------------------------------
   Public, no login: the privacy notice has to be readable by anyone, including
   Google's reviewers, so it is plain prose rather than app chrome. */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  line-height: 1.7;
}
.legal h1 {
  font-family: "Syne", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
}
.legal h2 {
  font-family: "Syne", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 30px 0 8px;
  color: var(--accent-str);
}
.legal p, .legal li { color: var(--ink-mid); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--ink); }

/* --- The week on a phone ---------------------------------------------------------
   The week stays a week: seven columns side by side, so the shape of the days is
   readable at a glance. At ~48px per column there is no room for both a time and
   a name, so the slot keeps the TIME - it is what she reads when placing a booking -
   and the name moves to the dialog a tap away. Colour still carries booked / free /
   busy elsewhere, which is most of the information anyway. */

@media (max-width: 780px) {
  /* Never stack. If the viewport really cannot fit seven columns, scroll rather
     than reflow - a vertical list of days is not a week view. */
  #calendar-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .week {
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    gap: 4px;
    min-width: 320px;
  }

  .day { border-radius: 8px; }
  .day-head { padding: 6px 4px; flex-direction: column; align-items: center; gap: 0; }
  .day-name { font-size: 9px; letter-spacing: .3px; }
  .day-date { font-size: 10.5px; }

  .day-body { padding: 3px; }

  /* One column: the time, centred. The label would be four characters wide. */
  .slot {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 2px;
    min-height: 24px;
    border-radius: 4px;
  }
  .slot-time { font-size: 9px; text-align: center; }
  .slot-label { display: none; }

  /* A booked slot needs to read as booked without its label. */
  .slot.taken .slot-time { color: var(--ink); font-weight: 700; }
  .slot.blocked .slot-time { font-size: 8.5px; }

  /* The pencil has nowhere to go at this width; the dialog still offers Uredi. */
  .slot.taken { grid-template-columns: 1fr; }
  .slot-edit { display: none; }

  .day-off { font-size: 10px; padding: 8px 2px; }

  .now-time { font-size: 8px; padding: 0 3px; }
  .now-dot { width: 6px; height: 6px; top: -3px; }

  .calendar-bar { flex-wrap: wrap; gap: 6px; }
  .week-range { margin-left: 0; font-size: 14px; }
  .cal-picker { margin-right: 0; }
  .cal-picker select { min-width: 130px; }
}