@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn.woff2") format("woff2-variations"), url("/fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/*
 * Palette: «غروب انار» (pomegranate sunset). The whole site takes its colours
 * from the --pal-* values below; to change the palette, change only these
 * (and their dark-mode twins). See design/PALETTE.md.
 */
:root {
  --pal-violet: #6c2bd9;   /* brand: buttons, links, active items */
  --pal-coral: #ff5a36;    /* call to action: book, highlights */
  --pal-sun: #ffc53d;      /* warmth: mood, gifts, notices */
  --pal-mint: #00b39a;     /* calm and "done": verified, paid */
  --pal-ink: #2a1640;      /* text */

  --bg: #faf8fd;
  --surface: #ffffff;
  --surface-2: #f5f3f8;
  --text: var(--pal-ink);
  --muted: #6b6478;
  --border: #e8e4ef;
  --primary: var(--pal-violet);
  --primary-ink: #ffffff;
  --primary-soft: #efe8fc;
  --accent: var(--pal-coral);
  --accent-ink: #ffffff;
  --accent-soft: #ffe9e3;
  --sun: var(--pal-sun);
  --sun-soft: #fff4d6;
  --mint: var(--pal-mint);
  --mint-soft: #dcf6f1;
  --danger: #d0283a;
  --danger-soft: #fde7ea;
  --warn: #a86400;
  --warn-soft: #fff4d6;
  --ok: #00806e;
  --ok-soft: #dcf6f1;
  --shadow: 0 1px 2px rgba(42, 22, 64, 0.06), 0 4px 16px rgba(42, 22, 64, 0.07);
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pal-violet: #a98bff;
    --pal-coral: #ff7a5c;
    --pal-sun: #ffd166;
    --pal-mint: #3fd1bb;
    --pal-ink: #f4f1fa;

    --bg: #17131f;
    --surface: #211b2c;
    --surface-2: #2a2337;
    --muted: #a9a2b8;
    --border: #362e45;
    --primary-ink: #17131f;
    --primary-soft: #2e2448;
    --accent-ink: #17131f;
    --accent-soft: #3a221c;
    --sun-soft: #3a3020;
    --mint-soft: #173430;
    --danger: #ff7b88;
    --danger-soft: #3a1f24;
    --warn: #ffc562;
    --warn-soft: #3a3020;
    --ok: #3fd1bb;
    --ok-soft: #173430;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
[hidden] { display: none !important; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.4; margin: 0 0 0.5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- controls ---------- */
button, .btn {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
  min-height: 40px;
  transition: background 0.15s, border-color 0.15s;
}
button:hover, .btn:hover { border-color: var(--primary); }
button:disabled { opacity: 0.55; cursor: default; }
button.primary, .btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
button.danger { color: var(--danger); border-color: var(--danger-soft); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--surface-2); }
button.sm { min-height: 32px; padding: 0.2rem 0.65rem; font-size: 0.88rem; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }

label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 0.25rem; }
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  min-height: 42px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field { margin-bottom: 0.9rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 160px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }
.date-picker { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 0.4rem; }
.time-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; direction: ltr; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  padding: 1.2rem 0.8rem;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.brand { font-weight: 700; font-size: 1.05rem; padding: 0 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav svg { width: 20px; height: 20px; flex: none; }
.sidebar .who { margin-top: auto; padding: 0.6rem; font-size: 0.85rem; color: var(--muted); }
main { padding: 1.5rem clamp(1rem, 3vw, 2.2rem) 6rem; max-width: 1100px; width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    inset-inline: 0;
    height: auto;
    flex-direction: row;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    border-inline-start: none;
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  .brand, .sidebar .who { display: none; }
  .nav { display: flex; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 0.1rem; font-size: 0.72rem; padding: 0.35rem 0.4rem; }
}

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.stat .label { color: var(--muted); font-size: 0.85rem; }
.stat .value { font-size: 1.35rem; font-weight: 700; margin-top: 0.15rem; }
.stat .value.bad { color: var(--danger); }
.stat .value.good { color: var(--ok); }

.list { display: flex; flex-direction: column; }
.item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: start;
  background: none;
  border-radius: 0;
  border-inline: none;
  border-top: none;
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
}
.item:last-child { border-bottom: none; }
.item:hover { background: var(--surface-2); border-color: var(--border); }
.item .main { flex: 1; min-width: 0; }
.item .title { font-weight: 600; }
.item .sub { color: var(--muted); font-size: 0.85rem; }
.item .end { text-align: end; flex: none; }
.time-badge { flex: none; min-width: 64px; text-align: center; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 10px; padding: 0.35rem 0.4rem; }
.day-head { font-weight: 700; margin: 1.2rem 0 0.3rem; color: var(--muted); font-size: 0.9rem; }
.day-head:first-child { margin-top: 0; }

.chip { display: inline-block; font-size: 0.78rem; padding: 0.05rem 0.6rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.scheduled { background: var(--primary-soft); color: var(--primary); }
.chip.completed { background: var(--ok-soft); color: var(--ok); }
.chip.no_show { background: var(--warn-soft); color: var(--warn); }
.chip.cancelled { background: var(--danger-soft); color: var(--danger); }
.chip.owed { background: var(--danger-soft); color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tabs button { border: none; border-radius: 0; background: none; border-bottom: 2px solid transparent; padding: 0.5rem 0.8rem; }
.tabs button.active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }
.search { max-width: 320px; }
/* Notices: a soft card with a round icon (yellow: heads-up, violet: info, red: danger) */
.notice {
  position: relative; display: block; margin-bottom: 1rem; padding: 0.8rem 1rem; padding-inline-start: 3.1rem;
  background: var(--sun-soft); color: var(--text); font-size: 0.9rem; line-height: 1.8;
  border: 1px solid color-mix(in srgb, var(--pal-sun) 55%, transparent); border-radius: 16px;
  box-shadow: 0 8px 22px -16px rgba(42, 22, 64, 0.35);
}
.notice::before {
  content: ""; position: absolute; inset-inline-start: 0.85rem; top: 0.8rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--pal-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1640' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.6v.1'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.notice a { color: var(--primary); font-weight: 700; }
.notice.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--pal-violet) 30%, transparent); color: var(--text); }
.notice.info::before { background: var(--pal-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E") center / 15px no-repeat; }
.lock { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.lock svg { width: 14px; height: 14px; }

/* ---------- dialog ---------- */
dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
dialog::backdrop { background: rgba(10, 20, 20, 0.45); }
dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem 0.4rem; }
dialog .dlg-head h2 { margin: 0; }
dialog .dlg-body { padding: 0.6rem 1.2rem 1.2rem; overflow-y: auto; max-height: calc(100vh - 140px); }
dialog .dlg-foot { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.6rem; flex-wrap: wrap; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  z-index: 100;
  box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
}
.toast.error { background: var(--danger); color: #fff; }

/* ---------- login ---------- */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 16px; }
.login-card { width: min(420px, 100%); }
.login-card h1 { text-align: center; }
.login-card .lead { text-align: center; color: var(--muted); margin-bottom: 1.4rem; }
.login-card button.primary { width: 100%; min-height: 48px; font-size: 1rem; }
.divider { text-align: center; color: var(--muted); margin: 1.2rem 0; font-size: 0.85rem; }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--primary); }
label.row { color: var(--text); font-size: 0.95rem; }
a.item { color: inherit; text-decoration: none; }
.item .title, .item .sub { display: block; }
.item .sub .ltr { display: inline; }
.time-preview { margin-top: 0.4rem; font-size: 0.88rem; color: var(--primary); }
.time-preview.past { color: var(--danger); }
.code-input { font-size: 1.6rem; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; }
.center-row { justify-content: center; margin-top: 0.6rem; }
.emergency { margin-top: 1.4rem; }

/* ---------- home ---------- */
.next-card { border: 2px solid var(--primary); }
.next-label { color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.next-name { font-size: 1.5rem; margin: 0.2rem 0; }
.next-when { margin-bottom: 1rem; }
.next-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.4rem; }
.big-btn { min-height: 52px; font-size: 1.02rem; }
@media (max-width: 520px) { .next-actions { grid-template-columns: 1fr; } }
.empty-next p { margin: 0.4rem 0 0; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0; }
.quick-actions button { min-height: 48px; }
.quick-grid { display: grid; gap: 0.6rem; }
.big-choice { justify-content: flex-start; min-height: 56px; font-size: 1.02rem; }
.big-choice svg { width: 24px; height: 24px; color: var(--primary); }
.chip.pending_payment { background: var(--warn-soft); color: var(--warn); }
.chip.expired, .chip.void { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.chip.paid { background: var(--ok-soft); color: var(--ok); }
.chip.partial { background: var(--warn-soft); color: var(--warn); }
.chip.unpaid { background: var(--danger-soft); color: var(--danger); }
.invoice-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.item .end.row { flex-wrap: nowrap; }

/* ---------- booking settings ---------- */
.day-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 0.6rem; align-items: start; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.day-row:last-child { border-bottom: none; }
.day-name { font-weight: 600; padding-top: 0.5rem; }
.day-ranges { display: flex; flex-direction: column; gap: 0.4rem; }
.day-ranges .muted { padding-top: 0.5rem; }
.range { display: flex; align-items: center; gap: 0.4rem; }
.range select { width: auto; min-width: 92px; }
.link-box { background: var(--surface-2); border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.sticky-save { position: sticky; bottom: 0; padding: 0.8rem 0; background: linear-gradient(transparent, var(--bg) 30%); }
.sticky-save button { width: 100%; min-height: 48px; }
@media (max-width: 820px) { .sticky-save { bottom: 64px; } }
@media (max-width: 520px) { .day-row { grid-template-columns: 1fr auto; } .day-ranges { grid-column: 1 / -1; } }
.day-actions { display: flex; flex-direction: column; gap: 0.2rem; align-items: stretch; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
@media (max-width: 520px) { .day-actions { flex-direction: row; grid-column: 1 / -1; } }
.amount-box { display: flex; align-items: center; gap: 0.5rem; }
.amount-box input { flex: 1; min-width: 0; }
.amount-unit { color: var(--muted); white-space: nowrap; font-size: 0.92rem; }
.share-booking {
  width: 100%; justify-content: flex-start; gap: 0.9rem; margin-top: 1rem; padding: 0.9rem 1rem; min-height: 64px;
  background: var(--primary-soft); border: 1.5px dashed var(--primary); border-radius: var(--radius); text-align: start; color: var(--text);
}
.share-booking strong { display: block; color: var(--primary); font-size: 1.05rem; }
.share-booking .sub { display: block; color: var(--muted); font-size: 0.85rem; }
.share-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; }
.share-icon svg { width: 22px; height: 22px; }
.notice-card { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  background: var(--sun-soft); border: 1px solid color-mix(in srgb, var(--pal-sun) 55%, transparent); border-radius: 16px; padding: 0.8rem 1rem; margin-bottom: 0.8rem;
  box-shadow: 0 8px 22px -16px rgba(42, 22, 64, 0.35); }
.notice-text { flex: 1 1 240px; }
.pkg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.pkg-choice { flex-direction: column; min-height: 72px; gap: 0.2rem; }
.pkg-choice span { color: var(--muted); font-size: 0.9rem; }
.pkg-choice.selected { border: 2px solid var(--primary); background: var(--primary-soft); }
.pkg-summary { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; margin-bottom: 0.4rem; }
.pkg-summary strong { font-size: 1.3rem; color: var(--primary); }
.pkg-summary strong.bad { color: var(--danger); }

/* =====================================================================
   Compact, refined layout: less empty space, finer controls, phone first.
   ===================================================================== */
body { font-size: 14px; line-height: 1.65; }
h1 { font-size: 1.2rem; }
h2 { font-size: 1rem; margin-bottom: 0.4rem; }
h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }

button, .btn {
  min-height: 36px; padding: 0.35rem 0.85rem; border-radius: 9px; font-size: 0.9rem;
  box-shadow: 0 1px 1px rgba(20, 30, 30, 0.04);
}
button.primary, .btn.primary { box-shadow: 0 1px 2px rgba(47, 111, 106, 0.25), 0 2px 8px rgba(47, 111, 106, 0.12); font-weight: 600; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.06); }
button:active, .btn:active { transform: translateY(1px); }
button.sm { min-height: 30px; padding: 0.15rem 0.6rem; font-size: 0.82rem; border-radius: 8px; }
button.ghost { box-shadow: none; }

input, select, textarea { min-height: 38px; padding: 0.4rem 0.65rem; border-radius: 9px; font-size: 0.92rem; }
textarea { min-height: 96px; }
label { font-size: 0.82rem; margin-bottom: 0.15rem; }
.field { margin-bottom: 0.65rem; }

main { padding: 1rem clamp(12px, 3vw, 1.8rem) 5.5rem; }
.page-head { margin-bottom: 0.8rem; gap: 0.6rem; }
.card { padding: 0.85rem 0.95rem; border-radius: 12px; }
.card + .card { margin-top: 0.7rem; }
.stats { gap: 0.55rem; margin-bottom: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { padding: 0.6rem 0.75rem; border-radius: 11px; }
.stat .label { font-size: 0.78rem; }
.stat .value { font-size: 1.1rem; }

.item { padding: 0.55rem 0.15rem; gap: 0.6rem; }
.item .sub { font-size: 0.8rem; }
.time-badge { min-width: 54px; padding: 0.2rem 0.35rem; border-radius: 8px; font-size: 0.88rem; }
.day-head { margin: 0.8rem 0 0.15rem; font-size: 0.82rem; }
.chip { font-size: 0.72rem; padding: 0 0.5rem; }
.tabs { margin-bottom: 0.6rem; }
.tabs button { padding: 0.35rem 0.6rem; min-height: 34px; box-shadow: none; }
.notice { padding: 0.65rem 0.8rem; padding-inline-start: 2.8rem; font-size: 0.85rem; margin-bottom: 0.7rem; }
.notice::before { inset-inline-start: 0.7rem; top: 0.68rem; width: 1.45rem; height: 1.45rem; }

/* home */
.next-name { font-size: 1.25rem; margin: 0.1rem 0; }
.next-when { margin-bottom: 0.7rem; font-size: 0.9rem; }
.next-actions { gap: 0.45rem; }
.big-btn { min-height: 42px; font-size: 0.95rem; }
.share-booking { margin-top: 0.7rem; padding: 0.55rem 0.8rem; min-height: 50px; gap: 0.7rem; border-width: 1px; }
.share-booking strong { font-size: 0.95rem; }
.share-booking .sub { font-size: 0.78rem; }
.share-icon { width: 34px; height: 34px; }
.share-icon svg { width: 18px; height: 18px; }
.quick-actions { gap: 0.45rem; margin: 0.7rem 0; }
.quick-actions button { min-height: 40px; }
.notice-card { padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.big-choice { min-height: 46px; font-size: 0.95rem; }
.big-choice svg { width: 20px; height: 20px; }
.pkg-choice { min-height: 58px; }

/* dialogs */
dialog { border-radius: 14px; }
dialog .dlg-head { padding: 0.75rem 0.95rem 0.25rem; }
dialog .dlg-body { padding: 0.4rem 0.95rem 0.95rem; }

/* menu */
.nav a { padding: 0.45rem 0.6rem; }
@media (max-width: 820px) {
  .nav a { padding: 0.25rem 0.3rem; font-size: 0.68rem; }
  .nav svg { width: 19px; height: 19px; }
}

/* booking settings */
.day-row { padding: 0.45rem 0; gap: 0.45rem; }
.day-name { padding-top: 0.35rem; }
.range select { min-width: 84px; }
.sticky-save button { min-height: 42px; }

/* login */
.login-card button.primary { min-height: 42px; font-size: 0.95rem; }
.center-page { padding: 1rem 12px; }
@media (max-width: 520px) { .next-actions { grid-template-columns: 1fr 1fr; } }
.next-actions .big-btn { padding-inline: 0.5rem; }
.next-more { margin-top: 0.15rem; color: var(--muted); padding-inline: 0.2rem; }
.hold-left { color: var(--warn) !important; }
.hold-actions { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; }
.share-row { display: flex; gap: 0.45rem; margin-top: 0.7rem; align-items: stretch; }
.share-row .share-booking { margin-top: 0; flex: 1; }
.copy-btn { flex-direction: column; gap: 0.1rem; min-width: 58px; padding: 0.3rem 0.5rem; border-radius: var(--radius); font-size: 0.75rem; color: var(--primary); }
.copy-btn svg { width: 18px; height: 18px; }
.next-links { justify-content: space-between; margin-top: 0.2rem; }
.next-links button { gap: 0.3rem; }
.next-links svg { width: 14px; height: 14px; }
.big-choice svg { flex: none; }
.offscreen { position: fixed; top: -1000px; opacity: 0; }
.copy-field { font-size: 0.85rem; }

/* Keep content in a comfortable, centered column on wide screens. */
main { max-width: 680px; margin-inline: auto; }
.sidebar { width: 200px; }
.app { grid-template-columns: 200px 1fr; }
@media (max-width: 820px) { .app { grid-template-columns: 1fr; } .sidebar { width: auto; } }
dialog { width: min(480px, calc(100vw - 24px)); }
.day-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
dialog.narrow { width: min(340px, calc(100vw - 24px)); }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.tile-choice {
  flex-direction: column; gap: 0.3rem; min-height: 78px; padding: 0.5rem 0.25rem;
  font-size: 0.78rem; line-height: 1.35; text-align: center; border-radius: 12px;
}
.tile-choice svg { width: 22px; height: 22px; color: var(--primary); flex: none; }
.tile-choice:hover { background: var(--primary-soft); }
.field-hint { display: block; color: var(--warn); font-size: 0.78rem; margin-top: 0.2rem; }

/* Online bookings: distinct colour; a bell while waiting for payment */
:root { --online: var(--accent); --online-soft: var(--accent-soft); --attn: var(--warn); --attn-soft: var(--sun-soft); }
.online-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0 0.45rem; border-radius: 99px; background: var(--online-soft); color: var(--online); vertical-align: middle; }
.bell { display: inline-flex; color: var(--attn); margin-inline-end: 0.3rem; vertical-align: -2px; animation: ring 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.bell svg { width: 15px; height: 15px; }
h2 .bell svg { width: 17px; height: 17px; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bell { animation: none; } }
.item.attention { background: var(--attn-soft); border-radius: 10px; padding-inline: 0.5rem; border-bottom-color: transparent; margin-bottom: 0.25rem; }
.item.attention .time-badge { background: var(--attn); color: #fff; }
.attention-card { background: var(--attn-soft); border-color: var(--attn); }
.attention-card .item { border-bottom-color: color-mix(in srgb, var(--attn) 25%, transparent); }
.attention-card .time-badge { background: var(--attn); color: #fff; }
.nav a.has-badge { position: relative; }
.nav-badge { display: inline-flex; align-items: center; gap: 0.1rem; margin-inline-start: auto; background: var(--attn); color: #fff; border-radius: 99px; padding: 0 0.4rem; font-size: 0.7rem; line-height: 1.6; }
.nav-badge svg { width: 12px !important; height: 12px !important; }
@media (max-width: 820px) {
  .nav-badge { position: absolute; top: 0; inset-inline-start: 50%; margin: 0; padding: 0 0.3rem; }
}
.field-help { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 0.15rem; }
input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.phone-tail { font-size: 0.72em; font-weight: 400; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.grid2.keep-2 { grid-template-columns: 1fr 1fr; }
.name-help { margin: -0.4rem 0 0.6rem; }
.dup-card { padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }

/* admin, support mode, access codes */
.support-bar { position: sticky; top: 0; z-index: 40; grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: #2a1640; color: #fff; padding: 0.5rem 1rem; font-size: 0.88rem; box-shadow: 0 6px 18px -10px rgba(42, 22, 64, 0.6); }
.support-bar strong { color: #ffc53d; }
.support-bar button { margin-inline-start: auto; background: #ffc53d; color: #2a1640; border: none; font-weight: 700; border-radius: 999px; }
.admin-link { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit; border-color: var(--online); }
.admin-link svg { width: 28px; height: 28px; color: var(--online); flex: none; }
.admin-link .sub { display: block; color: var(--muted); font-size: 0.8rem; }
.code-box { background: var(--surface-2); border-radius: 10px; padding: 0.7rem; text-align: center; margin-bottom: 0.6rem; }
.code-value { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.15em; direction: ltr; font-family: ui-monospace, Consolas, monospace; color: var(--primary); }
.access-input { text-transform: uppercase; letter-spacing: 0.12em; font-family: ui-monospace, Consolas, monospace; }
.signup-msg { white-space: pre-wrap; color: var(--text) !important; background: var(--surface-2); border-radius: 8px; padding: 0.3rem 0.5rem; margin-top: 0.2rem; }
@media (max-width: 820px) { .nav .desktop-only { display: none; } }
.contact-link { font-weight: 600; }

/* main page */
.landing { width: min(420px, 100%); display: grid; gap: 0.8rem; }
.landing-head { text-align: center; }
.brand-big { font-size: 1.6rem; font-weight: 800; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary); }
.brand-big .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.find-card { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit; border: 1.5px solid var(--primary); background: var(--primary-soft); }
.find-card strong { display: block; color: var(--primary); }
.find-card .sub { display: block; font-size: 0.82rem; color: var(--muted); }
.find-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; flex: none; }
.find-icon svg { width: 22px; height: 22px; }
.find-arrow { margin-inline-start: auto; font-size: 1.6rem; color: var(--primary); }
.login-title { text-align: center; margin-bottom: 0.6rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 10px; padding: 3px; margin-bottom: 0.8rem; }
.seg > * { min-height: 34px; border: none; border-radius: 8px; background: transparent; box-shadow: none; display: grid; place-items: center; font-size: 0.9rem; color: var(--muted); text-decoration: none; }
.seg > .on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.landing-foot { text-align: center; font-size: 0.8rem; }
.landing-foot a { color: var(--muted); }

/* profile settings */
.photo-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.photo-preview { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; flex: none; border: 2px solid var(--border); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview span { font-size: 0.72rem; color: var(--muted); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip-btn { min-height: 28px; padding: 0 0.7rem; border-radius: 99px; font-size: 0.8rem; box-shadow: none; }
.chip-btn.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* Profile: several categories (the first is the main one), approaches, key points */
.chip-btn.main { box-shadow: 0 0 0 2px var(--primary-soft); }
.chip-btn.main::after { content: " · اصلی"; font-size: 0.7rem; opacity: 0.8; }
.label-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.label-row label { margin: 0; }
.row.wrap { flex-wrap: wrap; gap: 0.35rem; }

/* How the video call went, in the appointment dialog */
.call-q h3 { margin: 0 0 0.4rem; }
.call-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.call-enc { display: flex; align-items: center; gap: 0.35rem; color: var(--ok); font-weight: 600; }
.call-enc svg { width: 0.95rem; height: 0.95rem; }

/* Admin: features per plan */
.table-wrap { overflow-x: auto; margin-bottom: 0.7rem; }
.feat-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.feat-table th, .feat-table td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--border); text-align: center; }
.feat-table td:first-child { text-align: start; }
.feat-table input { width: 18px; height: 18px; }

/* Reports */
.locked-card { display: flex; gap: 0.8rem; align-items: flex-start; border-style: dashed; }
.locked-card svg { width: 28px; height: 28px; color: var(--muted); flex: none; margin-top: 0.2rem; }
.feature-list { margin: 0; padding-inline-start: 1.2rem; line-height: 2; font-size: 0.9rem; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 0.8rem; }
.ins-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0.4rem; }
.ins-stats .stat { padding: 0.5rem 0.6rem; }
.ins-stats .stat .value { font-size: 1.15rem; }
.forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.forecast div { background: var(--surface-2); border-radius: 12px; padding: 0.5rem; text-align: center; display: grid; }
.forecast .big { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.forecast span:last-child { font-size: 0.78rem; color: var(--muted); }
.tips { display: grid; gap: 0.55rem; }
.tip { border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.75rem; display: grid; gap: 0.35rem; justify-items: start; font-size: 0.9rem; }
.tip button svg, .page-head button svg, .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.item.event.up { border-inline-start: 3px solid var(--ok); }
.item.event.down { border-inline-start: 3px solid var(--warn); }
.item.event.shift { border-inline-start: 3px solid var(--online); }
.warn-text { color: var(--warn) !important; }
.promo-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 0.3rem 0.5rem; }
.promo-member { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.promo-member:last-child { border-bottom: none; }
.promo-member .muted { margin-inline-start: auto; }
.promo-member.off { opacity: 0.55; }
@media (max-width: 420px) { .ins-stats { grid-template-columns: repeat(3, 1fr); } .ins-stats .stat .label { font-size: 0.72rem; } }

/* Account deletion: tucked away at the bottom of settings */
.danger-zone { margin-top: 1.6rem; padding: 0.4rem 0.2rem; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.danger-zone[open] { border: 1px solid var(--danger); border-radius: var(--radius); padding: 0.8rem 1rem; background: var(--surface); }
.danger-zone[open] summary { color: var(--danger); font-weight: 700; margin-bottom: 0.6rem; }
.notice.danger-notice { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); }
.notice.danger-notice::before { background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.6v.1'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* Reports: clickable numbers, income, equal-size period cards */
.ins-grid { align-items: stretch; }
.ins-card { display: flex; flex-direction: column; }
.ins-card .ins-note { margin: auto 0 0; padding-top: 0.4rem; }
.stat-btn { display: grid; justify-items: start; text-align: start; width: 100%; min-height: 0; cursor: pointer; font: inherit; color: inherit; box-shadow: none; }
.stat-btn:hover { border-color: var(--primary); }
.stat-btn .label { color: var(--muted); font-size: 0.8rem; }
.stat-btn .value { font-size: 1.15rem; font-weight: 700; }
.stat-btn .value.bad { color: var(--danger); }
.income-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--primary-soft); color: var(--text); border: 1px solid transparent; font: inherit; cursor: pointer; box-shadow: none; }
.income-row strong { color: var(--primary); font-size: 1.05rem; }
.income-row .muted { margin-inline-start: auto; }
.income-row:hover { border-color: var(--primary); }
.detail-total { text-align: end; margin: 0.6rem 0 0; }
button.item { width: 100%; text-align: start; font: inherit; color: inherit; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; cursor: pointer; }
.week-bars { display: grid; gap: 0.3rem; margin-bottom: 0.4rem; }
.week-bar { display: grid; grid-template-columns: 5.5rem 1fr 7.5rem; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; box-shadow: none; padding: 0.2rem 0; font: inherit; color: inherit; cursor: pointer; min-height: 0; }
.wb-label { font-size: 0.78rem; color: var(--muted); text-align: start; }
.wb-track { height: 12px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.wb-fill { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 99px; opacity: 0.55; transition: width 0.3s; }
.week-bar.current .wb-fill { opacity: 1; }
.week-bar.current .wb-label { color: var(--primary); font-weight: 700; }
.wb-sum { font-size: 0.8rem; text-align: end; }
@media (min-width: 700px) { .ins-grid { grid-template-columns: 1fr 1fr; } }

/* Package discount: final price beside the box */
.discount-row { display: flex; gap: 0.5rem; align-items: stretch; }
.discount-row input { width: 5.5rem; flex: none; text-align: center; }
.final-price { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; background: var(--primary-soft); border-radius: 10px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.final-price span { color: var(--muted); font-size: 0.75rem; }
.final-price strong { color: var(--primary); }
.final-price s { color: var(--muted); font-size: 0.78rem; }

/* Sample introductions */
.bio-box { min-height: 14rem; line-height: 2; }
dialog.wide { width: min(920px, calc(100vw - 24px)); max-width: none; }
.bio-samples { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bio-sample { border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--surface); }
.bio-sample p { margin: 0; white-space: pre-wrap; line-height: 2; font-size: 0.9rem; flex: 1; }
.bio-sample button { align-self: flex-start; }

/* Foreign-currency settlement */
.fx-box { background: var(--surface-2); border-radius: 12px; padding: 0.6rem 0.8rem 0.3rem; margin-bottom: 0.8rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 0.7rem; }

/* My name opens my profile */
a.who, a.me-link { color: inherit; text-decoration: none; }
a.who:hover, a.me-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

/* Field errors (shared profile fields in the panel and the signup form) */
.field-error { display: block; color: var(--danger); font-size: 0.8rem; margin-top: 0.15rem; }
.field-error:empty { display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.field.invalid .tag-picker { outline: 2px solid var(--danger-soft); outline-offset: 4px; border-radius: 8px; }
.field.invalid .field-help { display: none; }
.num-only { text-align: center; }
.signup-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.signup-more summary { cursor: pointer; font-size: 0.8rem; color: var(--primary); }
.signup-more p { white-space: pre-wrap; margin: 0.3rem 0; font-size: 0.85rem; line-height: 1.9; }

/* Reports: the two period cards line up exactly, and so do their small boxes */
.ins-grid { gap: 0.8rem; margin-bottom: 0.8rem; }
.ins-grid > .card { margin: 0; }
.ins-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-btn .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* The therapist's picture next to their name */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--primary-soft); color: var(--primary); font-weight: 800; vertical-align: middle; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 30px; height: 30px; font-size: 0.85rem; }
.avatar.lg { width: 48px; height: 48px; font-size: 1.3rem; }
a.who { display: flex; align-items: center; gap: 0.5rem; }
h1.hello { display: flex; align-items: center; gap: 0.6rem; }

a.info-link { display: block; text-decoration: none; }
a.info-link:hover { text-decoration: underline; }

/* Exchange rates: one clear row per currency, full width */
.fx-rates { border-top: 1px solid var(--border); margin: 0.6rem 0 0.8rem; padding-top: 0.7rem; }
.fx-rates h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.fx-rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 0.8rem; }
.fx-rate .amount-box input { width: 100%; min-width: 0; }

/* Client search above pickers */
.client-search { margin-bottom: 0.35rem; }
.client-search.no-match { border-color: var(--danger); }

/* Client history */
.event-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; background: var(--surface-2); border-radius: 10px; padding: 0.55rem 0.8rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
.event-stats em.bad { color: var(--danger); font-style: normal; }
.event-row { display: flex; align-items: center; gap: 0.6rem; }
.ev-icon { flex: none; width: 1.8rem; text-align: center; font-size: 1.1rem; }
.events .event-row .main { flex: 1; min-width: 0; }

/* ---------- Super admin panel ---------- */
.super .admin-side { background: #2a1640; border-color: transparent; }
.super .admin-side .brand { color: #fff; }
.super .admin-side .brand .dot { background: #f6c98c; }
.super-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 99px; background: #f6c98c; color: #2d2547; direction: ltr; }
.super .admin-side .nav a { color: #dfe6f2; }
.super .admin-side .nav a:hover { background: rgba(255, 255, 255, 0.08); }
.super .admin-side .nav a.active { background: rgba(246, 201, 140, 0.18); color: #ffe2b8; }
.nav-count { margin-inline-start: auto; min-width: 1.4rem; text-align: center; font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 99px; background: #e0574b; color: #fff; }
.admin-switch { margin-top: auto; display: grid; gap: 0.4rem; padding: 0.4rem; }
.super .admin-switch button { width: 100%; justify-content: center; }
.super .admin-switch button.ghost { color: #dfe6f2; border-color: rgba(255, 255, 255, 0.18); }
.super .admin-switch button.ghost.danger { color: #ffb4ab; }
@media (max-width: 820px) {
  .admin-switch { position: fixed; top: 0; inset-inline: 0; z-index: 25; display: flex; justify-content: center; padding: 0.4rem; background: #24324a; }
  .super .admin-switch button { width: auto; }
  .super main { padding-top: 3.6rem; }
  .nav-count { position: absolute; margin: 0; transform: translate(-0.9rem, -0.3rem); }
  .super .nav a { position: relative; }
}
.admin-stats { margin-bottom: 1rem; }

/* Request inbox */
.kart-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.kart-tabs button { border-radius: 99px; }
.kart-tabs button b { margin-inline-start: 0.3rem; font-weight: 700; color: var(--muted); }
.kart-tabs button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.kart-tabs button.on b { color: var(--primary-ink); }
.kart-list { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kart-card { display: grid; gap: 0.3rem; justify-items: start; text-align: start; width: 100%; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit; min-height: 0; }
.kart-card:hover { border-color: var(--primary); }
.kart-card.is-new { border-inline-start: 4px solid #e0574b; }
.kart-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kart-card .sub { color: var(--muted); font-size: 0.82rem; }
.kart-time { font-size: 0.78rem !important; }
.kart-note { font-size: 0.8rem; background: var(--warn-soft); color: var(--text); border-radius: 8px; padding: 0.2rem 0.5rem; }

/* One request */
.sd-head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 0.7rem; }
.sd-head .row { margin: 0.3rem 0; }
.sd-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.sd-photo.empty { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.72rem; color: var(--muted); border: 2px dashed var(--border); }
.sd-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; padding: 0.7rem 0.9rem; background: var(--surface-2); border-radius: 12px; }
.sd-list dt { color: var(--muted); font-size: 0.85rem; }
.sd-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sd-list dd.ltr { direction: ltr; text-align: right; }
.signup-detail h3 { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.sd-text { white-space: pre-wrap; line-height: 2; margin: 0; }
.sd-points { margin: 0; padding-inline-start: 1.2rem; line-height: 1.9; }
.sd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.sd-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.85rem; }
.sd-history li span { color: var(--muted); margin-inline-end: 0.4rem; }
.sd-history em { color: var(--muted); }

/* Test profile */
.test-card { border: 1px dashed #b4a5e0; }
.support-bar.test-bar { background: #6c2bd9; color: #fff; }
.super .admin-side .brand { flex-wrap: wrap; white-space: nowrap; row-gap: 0.35rem; }
/* On phones the test profile bar is just one small button */
@media (max-width: 820px) {
  .support-bar.test-bar { background: transparent; padding: 0; position: fixed; top: 8px; inset-inline-end: 8px; z-index: 30; box-shadow: none; }
  .support-bar.test-bar .tb-text { display: none; }
  .support-bar.test-bar button { background: #ffc53d; color: #2a1640; box-shadow: 0 4px 12px rgba(42, 22, 64, 0.25); }
}

/* Logo */
.logo { width: 28px; height: 28px; flex: none; display: inline-block; vertical-align: middle; }
.brand-big .logo { width: 40px; height: 40px; }
.super .admin-side .brand .logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }

/* Page background: soft waves at the top (lilac) and bottom (mint) of the screen */
body:not(.room) {
  background:
    url("/bg/wave-top.svg") top center / 100% 180px no-repeat fixed,
    url("/bg/wave-bottom.svg") bottom center / 100% 150px no-repeat fixed,
    var(--bg);
}
@media (prefers-color-scheme: dark) {
  body:not(.room) { background-image: url("/bg/wave-top-dark.svg"), url("/bg/wave-bottom-dark.svg"); }
}
@media (max-width: 640px) {
  body:not(.room) { background-size: 100% 120px, 100% 100px, auto; }
}
.search-help { margin: 0.35rem 0 0; }

/* Never let one wide row (tabs, long lines) widen the whole page on phones */
.app { grid-template-columns: 200px minmax(0, 1fr); }
.app > main, #view { min-width: 0; }
@media (max-width: 820px) { .app { grid-template-columns: minmax(0, 1fr); } }
.tabs { max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.page-head > div, .page-head h1 { min-width: 0; overflow-wrap: anywhere; }

/* Session settings: small boxes for a few digits */
.compact-fields { display: grid; gap: 0.5rem; max-width: 440px; margin-bottom: 1rem; }
.cf-row { display: flex; align-items: center; gap: 0.6rem; }
.cf-row > label { flex: 1; margin: 0; font-size: 0.92rem; }
.cf-row .cf-num { width: 4.2rem; flex: none; text-align: center; }
.cf-row em { font-style: normal; color: var(--muted); font-size: 0.85rem; width: 5.6rem; flex: none; }
.cf-row .amount-box { flex: none; width: auto; }
.cf-row .amount-box input { width: 4.2rem; flex: none; text-align: center; }
.wb-sum { font-size: 0.76rem; line-height: 1.5; }

/* Email quota monitoring */
.quota-warning { display: block; text-decoration: none; font-weight: 600; }
.quota-warning:hover { border-color: var(--pal-sun); }
.quota-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.quota-grid .card { margin: 0; }
.quota-numbers { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.quota-numbers strong { font-size: 1.8rem; color: var(--primary); }
.quota-left { margin-inline-start: auto; color: var(--muted); font-size: 0.85rem; }
.quota-track { position: relative; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.quota-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--primary)); transition: width 0.4s; }
.quota-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #e0574b; opacity: 0.7; }
.quota-card.is-low { border-color: #f3c66b; background: #fffaf0; }
.quota-card.is-low .quota-fill { background: linear-gradient(90deg, #f0a03c, #e0574b); }
.quota-card.is-low .quota-numbers strong { color: #c0392b; }
.bad-text { color: var(--danger); }
.mail-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 0.4rem; }
.mail-bar { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; }
.mb-sent { display: block; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 0; }
.mb-failed { display: block; background: #e0574b; border-radius: 3px 3px 0 0; }
.mail-bars-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; }
.cf-row .wide-num { width: 6rem; }

/* Compact settings: label | box | unit in three columns, so the boxes line up under each other */
.compact-fields { display: grid; grid-template-columns: max-content max-content 1fr; align-items: center; gap: 0.55rem 0.8rem; max-width: 560px; }
.compact-fields > .cf-row { display: contents; }
.compact-fields > .cf-row > label { flex: none; }
.compact-fields .cf-row .amount-box { display: contents; }
.compact-fields .cf-row .cf-num, .compact-fields .cf-row .amount-box input { width: 5.2rem; justify-self: start; text-align: center; }
.compact-fields .cf-row em, .compact-fields .cf-row .amount-unit { width: auto; font-size: 0.85rem; color: var(--muted); }
.compact-fields > :not(.cf-row) { grid-column: 1 / -1; }
.fx-fees { border-top: 1px solid var(--border); margin: 0.4rem 0 0.9rem; padding-top: 0.8rem; }
.fx-fees h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.fx-pkg { line-height: 1.6; }
@media (max-width: 480px) { .compact-fields { grid-template-columns: max-content max-content; } .compact-fields .fx-pkg { grid-column: 1 / -1; margin-top: -0.3rem; } }
/* One label width for every compact group, so all their boxes share one column */
.compact-fields { grid-template-columns: 10.5rem 5.2rem 1fr; }
@media (max-width: 480px) { .compact-fields { grid-template-columns: 8.5rem 5.2rem; } }

/* Package discounts: under each other, and the final-price box keeps its size whatever the numbers */
.discount-fields { margin-bottom: 1rem; }
.discount-fields .final-price {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.1rem 0.6rem;
  width: 16rem; max-width: 100%; height: 3.4rem; box-sizing: border-box; flex: none; padding: 0.35rem 0.8rem;
  white-space: nowrap; overflow: hidden;
}
.discount-fields .final-price > s { grid-column: 2; }
@media (max-width: 480px) { .discount-fields .final-price { grid-column: 1 / -1; width: 100%; } }

/* The client picked in advance, and the currency picker beside an amount */
.fixed-client { padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--surface-2); font-weight: 700; }
.amount-cur { flex: none; width: auto; min-width: 7.5rem; font-size: 0.88rem; }
.res-limits { grid-template-columns: minmax(10.5rem, 16rem) 6rem 1fr; }
@media (max-width: 480px) { .res-limits { grid-template-columns: 1fr 6rem; } .res-limits em { grid-column: 1 / -1; margin-top: -0.4rem; } }

/* Reconciling payments with sessions */
.session-pays h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.session-pays .list .item { padding-inline: 0; }
.link-row { margin-top: 0.5rem; }
.link-row select { flex: 1; min-width: 0; }

/* Suggested times for a new session */
.suggest-box { background: var(--primary-soft); border-radius: 12px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.suggest-title { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; }

/* English pages inside the Persian panel */
.en-page { direction: ltr; text-align: left; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.en-page .quota-left { margin-inline-start: auto; }

/* Paid sessions: a green tick beside them. */
.paid-tick { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-inline-start: 0.35rem; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }

/* Appointments page: one row per day, square tiles that wrap. */
main:has(.week-rows) { max-width: 1240px; }
.week-rows { display: grid; gap: 0.7rem; }
.wk-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.9rem; align-items: stretch; padding: 0.7rem; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); }
.wk-row.is-past { opacity: 0.78; }
.wk-row.is-today { border-color: transparent; box-shadow: 0 0 0 2px var(--primary), 0 12px 28px -18px rgba(47, 111, 106, 0.6); }
.wk-daybox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; padding: 0.6rem 0.3rem; border-radius: 14px;
  background: var(--surface-2); color: var(--text); text-align: center; }
.wk-row.is-today .wk-daybox { background: var(--primary); color: var(--primary-ink); }
.wk-weekday { font-size: 0.82rem; font-weight: 700; }
.wk-daynum { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.wk-month { font-size: 0.75rem; opacity: 0.8; }
.wk-today, .wk-count { margin-top: 0.25rem; padding: 0.05rem 0.55rem; border-radius: 99px; font-size: 0.68rem; font-weight: 700; }
.wk-today { background: rgba(255, 255, 255, 0.25); }
.wk-count { background: var(--primary-soft); color: var(--primary); }
.wk-tiles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.6rem; min-width: 0; }
.wk-tile { position: relative; width: 8.6rem; aspect-ratio: 1; min-height: fit-content; display: flex; flex-direction: column; justify-content: space-between; gap: 0.3rem;
  padding: 0.6rem 0.6rem 0.55rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); text-align: center; font: inherit; cursor: pointer;
  overflow: hidden; box-shadow: 0 6px 16px -14px rgba(20, 30, 50, 0.5); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wk-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--muted); }
.wk-tile.st-scheduled::before { background: var(--primary); }
.wk-tile.st-completed::before { background: var(--ok); }
.wk-tile.st-no_show::before, .wk-tile.st-pending_payment::before { background: var(--warn); }
.wk-tile.st-cancelled::before { background: var(--danger); }
.wk-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(20, 30, 50, 0.55); border-color: var(--primary); }
.wk-tile.is-paid { background: linear-gradient(180deg, var(--surface) 60%, var(--ok-soft)); }
.wk-tile.st-cancelled { background: var(--surface-2); box-shadow: none; }
.wk-tile.st-cancelled .wk-name { text-decoration: line-through; color: var(--muted); }
.wk-tile-top { display: flex; align-items: center; justify-content: center; }
.wk-time { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.45rem; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 0.78rem; font-weight: 800; }
.wk-time .bell svg { width: 0.85rem; height: 0.85rem; }
.wk-name { font-size: 0.95rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.wk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.wk-chips .chip { font-size: 0.66rem; padding: 0.02rem 0.45rem; }
.chip.unpaid-soft { background: var(--surface-2); color: var(--muted); }
.wk-add { align-items: center; justify-content: center; gap: 0.1rem; border: 2px dashed var(--border); background: transparent; box-shadow: none; color: var(--muted); }
.wk-add::before { display: none; }
.wk-add span { font-size: 1.8rem; font-weight: 300; line-height: 1; }
.wk-add small { font-size: 0.75rem; }
.wk-add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.wk-row.is-empty:not(.is-today) .wk-add { aspect-ratio: auto; height: 4.2rem; flex-direction: row; gap: 0.35rem; width: auto; padding: 0 1rem; }
.wk-row.is-empty:not(.is-today) .wk-add span { font-size: 1.3rem; }
.wk-free { align-self: center; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 640px) {
  .wk-row { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.55rem; }
  .wk-daybox { flex-direction: row; justify-content: flex-start; gap: 0.45rem; padding: 0.4rem 0.7rem; }
  .wk-daynum { font-size: 1.15rem; }
  .wk-today, .wk-count { margin: 0 auto 0 0; margin-inline-start: auto; }
  .wk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .wk-tile { width: auto; padding: 0.45rem 0.35rem; border-radius: 13px; }
  .wk-name { font-size: 0.8rem; line-height: 1.35; }
  .wk-time { font-size: 0.68rem; }
  .wk-chips .chip { font-size: 0.58rem; padding: 0 0.3rem; }
  .wk-row.is-empty:not(.is-today) .wk-tiles { grid-template-columns: 1fr; }
  .wk-row.is-empty:not(.is-today) .wk-add { height: 2.8rem; }
}

/* Buying a subscription. */
.good-text { color: var(--ok); }
.sub-now { display: grid; gap: 0.2rem; }
.sub-pending { border-inline-start: 4px solid var(--warn); }
.sub-form h2 { font-size: 1rem; margin: 1.1rem 0 0.5rem; }
.sub-form h2:first-child { margin-top: 0; }
.sub-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.sub-plans .plan { position: relative; display: grid; justify-items: center; gap: 0.15rem; padding: 0.8rem 0.5rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: center; }
.sub-plans .plan input { position: absolute; opacity: 0; pointer-events: none; }
.sub-plans .plan strong { font-size: 1.15rem; }
.sub-plans .plan span { color: var(--primary); font-weight: 700; }
.sub-plans .plan em { font-style: normal; font-size: 0.75rem; color: var(--warn); font-weight: 700; }
.sub-plans .plan:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.sub-plans .plan:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.pay-methods { display: flex; gap: 0.5rem; }
.pay-method { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 2px solid var(--primary); border-radius: 10px; background: var(--primary-soft); font-weight: 600; }
.card-box { display: grid; justify-items: start; gap: 0.4rem; margin-top: 0.7rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--primary); color: var(--primary-ink); }
.card-box .muted { color: rgba(255, 255, 255, 0.85); }
.card-box strong { color: #fff; }
.card-number { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.card-box button { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.card-box button svg { width: 1rem; height: 1rem; vertical-align: middle; }
.login-card.wide-card { max-width: 560px; text-align: start; }
.pay-method { white-space: nowrap; cursor: pointer; }
.pay-method input { width: 1.05rem; height: 1.05rem; margin: 0; padding: 0; flex: none; accent-color: var(--primary); }

/* Contact messages: answers written in the panel. */
.contact-replies { display: grid; gap: 0.4rem; }
.contact-reply { padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--primary-soft); }
.contact-reply.failed { background: var(--danger-soft); }
.contact-reply p { margin: 0.2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-form { display: grid; gap: 0.4rem; }
.reply-form textarea { width: 100%; }

/* Merging two client records. */
.merge-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.merge-table th, .merge-table td { padding: 0.4rem; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.merge-table thead th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.merge-table tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.merge-table label { display: flex; gap: 0.35rem; align-items: flex-start; cursor: pointer; overflow-wrap: anywhere; }
.merge-table input { width: auto; margin-top: 0.3rem; flex: none; accent-color: var(--primary); }

/* Who has not paid: payments page and home. */
.debtors-card { border-inline-start: 4px solid var(--danger); }
.debtors-card.all-paid { border-inline-start-color: var(--ok); }
.debtors-card h2 { margin: 0; }
.debtors-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.debtors-head p { margin: 0.15rem 0 0; }
.debtors-total { display: grid; justify-items: end; padding: 0.4rem 0.8rem; border-radius: 12px; background: var(--danger-soft); }
.debtors-total strong { color: var(--danger); font-size: 1.2rem; }
.debtor-list { display: grid; gap: 0.35rem; }
.debtor { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.debtor summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; }
.debtor summary::-webkit-details-marker { display: none; }
.debtor summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s; }
.debtor[open] summary::after { transform: rotate(180deg); }
.debtor-name { display: grid; font-weight: 700; flex: 1; min-width: 0; }
.debtor-name .sub { font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.debtor-amount { color: var(--danger); font-weight: 800; white-space: nowrap; }
.debtor-items { display: grid; gap: 0.2rem; padding: 0 0.8rem; }
.debtor-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; padding: 0.35rem 0; border-top: 1px dashed var(--border); font-size: 0.88rem; }
.debtor-actions { padding: 0.5rem 0.8rem 0.7rem; }
.owed-card { display: flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; border-inline-start: 4px solid var(--danger); }
.owed-card:hover { border-color: var(--danger); }
.owed-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 12px; background: var(--danger-soft); color: var(--danger); }
.owed-icon svg { width: 1.4rem; height: 1.4rem; }
.owed-text { display: grid; flex: 1; min-width: 0; }
.owed-text .sub, .owed-sum .sub { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.owed-sum { display: grid; justify-items: end; color: var(--danger); font-weight: 800; white-space: nowrap; }

/* Days left of the subscription, top corner of every page. */
.plan-badge { position: fixed; top: 0.7rem; inset-inline-end: 1rem; z-index: 30; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border-radius: 99px; font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); box-shadow: 0 6px 18px -12px rgba(20, 30, 50, 0.5); }
.plan-badge b { padding: 0.02rem 0.5rem; border-radius: 99px; background: rgba(255, 255, 255, 0.3); font-size: 0.72rem; }
.pb-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.plan-badge.lvl-calm { color: var(--ok); }
.plan-badge.lvl-ok { color: var(--primary); }
.plan-badge.lvl-soon { color: #a86400; background: #fff4dc; border-color: #f1d49a; }
.plan-badge.lvl-warn { color: #fff; background: #e08a1e; border-color: #e08a1e; }
.plan-badge.lvl-urgent { color: #fff; background: var(--danger); border-color: var(--danger); animation: pb-pulse 1.8s ease-in-out infinite; }
.plan-badge:hover { filter: brightness(1.05); }
@keyframes pb-pulse { 50% { box-shadow: 0 0 0 6px var(--danger-soft); } }
@media (prefers-reduced-motion: reduce) { .plan-badge.lvl-urgent { animation: none; } }
.app:has(.support-bar) .plan-badge { top: 3.3rem; }
/* Room for the badge above each page's own buttons. */
.app:has(.plan-badge) main { padding-top: 3.2rem; }
@media (max-width: 820px) {
  .plan-badge { top: 0.5rem; inset-inline-end: 0.6rem; font-size: 0.72rem; padding: 0.22rem 0.6rem; }
  .app:has(.plan-badge) main { padding-top: 2.6rem; }
}

/* Resource monitoring: live light on each resource. */
.res-live-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.res-live { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.5rem; font-size: 0.85rem; }
.res-live .light-dot { width: 0.7rem; height: 0.7rem; margin: 0; }
.res-live.online .light-dot { animation: light-pulse 2s ease-in-out infinite; }
.res-live.degraded .light-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.res-live.offline .light-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.res-live.unknown .light-dot { background: var(--muted); box-shadow: none; }
.res-live .light-reasons { flex-basis: 100%; margin: 0.1rem 0 0; }
.res-live.offline strong { color: var(--danger); }
.res-live.degraded strong { color: var(--warn); }
.quota-card.is-down { border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .res-live.online .light-dot { animation: none; } }
/* Kartable: time left to answer a request. */
.kart-due { font-size: 0.78rem; font-weight: 600; color: var(--ok); }
.kart-due.soon { color: var(--warn); }
.kart-due.late { color: var(--danger); }

/* Email monitoring: online light. */
.email-light { display: flex; align-items: flex-start; gap: 0.8rem; }
.email-light .light-text { flex: 1; min-width: 0; }
.email-light p { margin: 0.2rem 0 0; }
.light-dot { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.3rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.email-light.online .light-dot { animation: light-pulse 2s ease-in-out infinite; }
.email-light.degraded .light-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.email-light.offline .light-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.email-light.offline { border-color: var(--danger); }
.light-reasons { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; font-size: 0.85rem; }
.light-reasons li { margin: 0.15rem 0; overflow-wrap: anywhere; }
@keyframes light-pulse { 50% { box-shadow: 0 0 0 7px var(--ok-soft); } }
@media (prefers-reduced-motion: reduce) { .email-light.online .light-dot { animation: none; } }

/* Super admin: contact form messages. */
.contact-list { display: grid; gap: 0.6rem; }
.contact-msg { display: grid; gap: 0.3rem; margin: 0; }
.contact-msg.is-new { border-inline-start: 4px solid var(--primary); }
.contact-text { margin: 0.3rem 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }

/* Subscription upgrade (6 months to a year for the difference). */
.upgrade-offer { display: grid; gap: 0.3rem; margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: linear-gradient(135deg, #fff4dc, #ffe9c2); color: #6b4700; }
.upgrade-offer b { color: #4d3300; }
.sub-plans .plan small { color: var(--muted); font-size: 0.75rem; }
.sub-plans .plan.is-upgrade { border-style: dashed; border-color: #e0a640; }
.sub-plans .plan.is-upgrade:has(input:checked) { border-style: solid; border-color: #c98a1f; background: #fff4dc; }
.sub-after { margin: 0.5rem 0 0; }
.paid-amount { display: inline-flex; align-items: center; gap: 0.1rem; }
.item .end .paid-tick { margin-inline-end: 0.35rem; }

/* New session: free times from the calendar, and whether the chosen time is free. */
.free-box { display: grid; gap: 0.4rem; margin: -0.2rem 0 0.8rem; padding: 0.6rem 0.7rem; border-radius: 12px; background: var(--primary-soft); }
.free-box p { margin: 0; }
.clash-note { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; }
.clash-note.good { color: var(--ok); }
.clash-note.warn { color: var(--warn); }
.clash-note.bad { color: var(--danger); }

/* ⓘ: what each session status means. */
.status-help { display: inline-block; position: relative; font-weight: 400; vertical-align: middle; }
.status-help summary { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: var(--muted); cursor: pointer; list-style: none; transition: color 0.15s, background 0.15s; }
.status-help summary svg { width: 1.15rem; height: 1.15rem; }
.status-help summary:hover { color: var(--primary); background: var(--primary-soft); }
.status-help summary::-webkit-details-marker { display: none; }
.status-help[open] summary { color: var(--primary); background: var(--primary-soft); }
.status-help dl { position: absolute; z-index: 40; top: calc(100% + 0.4rem); inset-inline-start: -0.5rem; width: min(22rem, 80vw); margin: 0; padding: 0.7rem 0.8rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 0.6rem; align-items: start; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: 0 14px 30px -16px rgba(20, 30, 50, 0.45); font-size: 0.82rem; line-height: 1.7; color: var(--text); text-align: start; }
.status-help dt { margin: 0; }
.status-help dd { margin: 0; }
.label-with-help { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Client's account at a glance. */
.acct-pill { display: inline-flex; align-items: center; padding: 0.08rem 0.6rem; border-radius: 99px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.acct-pill.owes { background: var(--danger-soft); color: var(--danger); }
.acct-pill.credit { background: var(--ok-soft); color: var(--ok); }
.acct-pill.settled { background: var(--surface-2); color: var(--muted); }
.member-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.member-title .acct-pill { font-size: 0.85rem; }
.acct-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.35rem 0; }
.item .end .acct-pill { margin-inline-start: 0.2rem; }
.merge-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Referrals and credit. */
.invite-card { display: grid; gap: 0.6rem; border-inline-start: 4px solid #c98a1f; }
.invite-card h2 { margin: 0 0 0.2rem; }
.invite-card p { margin: 0; }
.invite-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; }
.invite-top > div:first-child { flex: 1; min-width: 14rem; }
.invite-code { display: grid; justify-items: center; align-content: center; padding: 0.5rem 1rem; border: 2px dashed #e0a640; border-radius: 12px; background: #fff8ea; }
.invite-code strong { font-size: 1.4rem; letter-spacing: 0.12em; color: #8a5a00; }
.credit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.credit-line strong { color: var(--ok); font-size: 1.1rem; }
.credit-history summary { cursor: pointer; }
.use-credit { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600; cursor: pointer; }
.use-credit input { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; accent-color: var(--ok); }
.credit-all { margin: 0.8rem 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }

/* Recording a payment while booking, and inside a session. */
.pays-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pays-head h3 { margin: 0; }
.paid-now-toggle { gap: 0.45rem; margin: 0.2rem 0 0.6rem; font-weight: 600; cursor: pointer; }
.paid-now-toggle input { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; accent-color: var(--ok); }
.paid-now { margin-bottom: 0.8rem; padding: 0.6rem 0.7rem; border-radius: 12px; background: var(--ok-soft); }

/* Email monitoring: per service. */
.provider-rows { display: grid; gap: 0.4rem; margin-bottom: 0.4rem; }
.provider-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--surface-2); }
.provider-row strong { min-width: 6rem; }

/* Resource monitoring: Bot Fight Mode. */
.bot-stats { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; }
.bot-stat { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: baseline; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--surface-2); }
.bot-stat > .muted { min-width: 6rem; }
.bot-bad b { color: var(--danger); }
.bot-good b { color: var(--ok); }

/* Email monitoring: the two servers. */
.server-rows { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; }
.server-row { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; }
.server-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.server-name .light-dot { margin: 0; width: 0.75rem; height: 0.75rem; }
.server-row.down .light-dot, .server-row.full .light-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.server-row.off .light-dot { background: var(--muted); box-shadow: none; }
.server-row.up .light-dot { animation: light-pulse 2s ease-in-out infinite; }
.server-row.down, .server-row.full { border-color: var(--danger); }
.server-state { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.server-row.up .server-state { color: var(--ok); }
.server-row.down .server-state, .server-row.full .server-state { color: var(--danger); }
.server-nums { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; font-size: 0.88rem; }
.route-form { display: grid; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.route-form h3 { margin: 0 0 0.2rem; }
.route-opt { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.route-opt input { width: auto; margin-top: 0.3rem; flex: none; accent-color: var(--primary); }

/* Sidebar: always fits the screen (below the support / test bar), and scrolls if the screen is short,
   so the photo and name at its bottom stay visible. --bar is the bar's height, set by the page. */
.sidebar { top: var(--bar, 0px); height: calc(100dvh - var(--bar, 0px)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 820px) { .sidebar { top: auto; height: auto; overflow: visible; } }

/* Purchase history. */
.ph-list { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
.ph-row { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; }
.ph-row.approved { border-inline-start: 4px solid var(--ok); }
.ph-row.pending { border-inline-start: 4px solid var(--warn); }
.ph-row.rejected { border-inline-start: 4px solid var(--danger); }
.ph-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.4rem 1rem; font-size: 0.9rem; }
.ph-grid > span { display: grid; gap: 0.05rem; }
/* Phones with the support / test bar: room for both the bar and the days-left badge above the page. */
@media (max-width: 820px) { .app:has(.support-bar):has(.plan-badge) main { padding-top: 5rem; } }

/* Settings on phones: label | number | unit on one line (the unit used to drop to the next line). */
@media (max-width: 480px) {
  .compact-fields { grid-template-columns: minmax(0, 1fr) 4.4rem max-content; gap: 0.5rem 0.5rem; }
  .compact-fields > .cf-row > label { font-size: 0.85rem; line-height: 1.5; }
  .compact-fields .cf-row .cf-num, .compact-fields .cf-row .amount-box input { width: 4.4rem; }
  .compact-fields .cf-row em, .compact-fields .cf-row .amount-unit { font-size: 0.78rem; white-space: nowrap; }
}

/* Days-left badge: stays at the top of the page and scrolls away with it (not floating). */
.app { position: relative; }
.plan-badge { position: absolute; }

/* Install the panel as an app. */
.install-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; border: 1px solid #d9cff5; background: var(--primary-soft); }
.install-card img { border-radius: 14px; box-shadow: 0 6px 16px -10px rgba(60, 40, 120, 0.5); flex: none; }
.install-text { display: grid; gap: 0.15rem; flex: 1; min-width: 12rem; }
.install-text .sub { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.install-actions { display: flex; gap: 0.4rem; }
.offline-card { text-align: center; display: grid; justify-items: center; gap: 0.6rem; }

/* Therapist sign-in page. */
.center-page:has(.lp) { align-items: center; padding: 1.5rem 1rem; }
.lp { width: min(980px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; align-items: stretch; }
.lp-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.9rem; padding: 2rem 1.8rem; border-radius: 24px; color: #fff;
  background: #6c2bd9; box-shadow: 0 24px 50px -30px rgba(42, 22, 64, 0.7); }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.35; pointer-events: none; }
.lp-blob.one { width: 260px; height: 260px; inset-block-start: -90px; inset-inline-start: -70px; background: #ffc53d; border-radius: 50%; opacity: 0.95; }
.lp-blob.two { width: 320px; height: 320px; inset-block-end: -140px; inset-inline-end: -110px; background: #ff5a36; border-radius: 50%; opacity: 0.95; }
.lp-hero > :not(.lp-blob) { position: relative; }
.lp-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-size: 1.35rem; font-weight: 800; }
.lp-brand img { border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); }
.lp-title { margin: 0.4rem 0 0; font-size: 1.9rem; color: #fff; }
.lp-lead { margin: 0; font-size: 1rem; opacity: 0.92; line-height: 1.9; }
.lp-features { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.lp-features li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.65rem 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(4px); }
.lp-features b { display: block; font-size: 0.95rem; }
.lp-features small { display: block; font-size: 0.8rem; opacity: 0.88; line-height: 1.7; }
.lp-ic { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 11px; background: rgba(255, 255, 255, 0.2); }
.lp-ic svg { width: 1.2rem; height: 1.2rem; }
.lp-side { display: grid; align-content: center; gap: 0.8rem; }
.lp .login-card { width: 100%; padding: 1.6rem 1.4rem; border-radius: 20px; box-shadow: 0 20px 44px -30px rgba(30, 50, 80, 0.55); }
.lp .login-title { margin: 0; font-size: 1.35rem; }
.login-sub { margin: 0.2rem 0 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
.lp .login-card .lead.small { font-size: 0.85rem; margin-bottom: 0.9rem; }
.lp-find { padding: 0.75rem 0.9rem; border-radius: 16px; }
@media (max-width: 860px) {
  .lp { grid-template-columns: 1fr; gap: 1rem; }
  .lp-hero { padding: 1.3rem 1.2rem; gap: 0.6rem; border-radius: 20px; }
  .lp-title { font-size: 1.4rem; }
  .lp-lead { font-size: 0.9rem; }
  .lp-features { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .lp-features li { flex-direction: column; gap: 0.35rem; padding: 0.55rem; }
  .lp-features small { display: none; }
  .lp-side { order: 0; }
}
@media (max-width: 860px) {
  .lp-hero { padding: 1rem 1.1rem; gap: 0.45rem; }
  .lp-brand { font-size: 1.1rem; }
  .lp-brand img { width: 40px; height: 40px; border-radius: 12px; }
  .lp-title { font-size: 1.2rem; margin: 0; }
  .lp-lead { font-size: 0.85rem; line-height: 1.7; }
  .lp-features { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
  .lp-features li { flex-direction: row; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem 0.25rem 0.35rem; border-radius: 99px; }
  .lp-ic { width: 1.6rem; height: 1.6rem; border-radius: 50%; }
  .lp-ic svg { width: 0.95rem; height: 0.95rem; }
  .lp-features b { font-size: 0.78rem; }
}


/* Top menu of the public pages (sign-in, signup, contact), like the home page's. */
.site-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: 0.65rem max(16px, calc((100vw - 1080px) / 2)); background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.sb-brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.sb-links { display: flex; gap: 1.1rem; margin-inline-start: 0.6rem; }
.sb-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.sb-links a:hover, .sb-links a[aria-current] { color: var(--primary); }
.sb-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.6rem; }
.sb-actions .btn { white-space: nowrap; }
@media (max-width: 820px) {
  .site-bar { flex-wrap: wrap; row-gap: 0.4rem; padding: 0.55rem 12px; }
  .sb-links { order: 3; width: 100%; margin: 0; gap: 0.9rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; }
  .sb-links::-webkit-scrollbar { display: none; }
  .sb-links a { font-size: 0.82rem; }
}
/* The sign-in page: the menu at the top, the page below it. */
.center-page:has(.site-bar) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; }
.center-page:has(.site-bar) > .landing { margin: 1.4rem auto 2rem; padding: 0 1rem; }

/* Locked plans: shown, not chosen. */
.sub-plans .plan.is-locked { opacity: 0.6; cursor: not-allowed; background: var(--surface-2); }
.plan-soon { position: absolute; top: -0.6rem; inset-inline-end: 50%; transform: translateX(50%); padding: 0.02rem 0.55rem; border-radius: 99px; background: var(--muted); color: #fff; font-size: 0.66rem; font-weight: 800; white-space: nowrap; }
.sub-plans .plan { overflow: visible; }
.lock-opt { gap: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.lock-opt input { width: auto; margin: 0; accent-color: var(--primary); }

/* Super admin prices: one compact row per plan (label | price | unit | lock). */
.price-title { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.price-rows { display: grid; gap: 0.45rem; max-width: 520px; }
.price-row { display: grid; grid-template-columns: minmax(9rem, 1fr) 5.5rem max-content max-content; align-items: center; gap: 0.5rem; }
.price-row > label:first-child small { display: block; color: var(--muted); font-size: 0.75rem; }
.price-row .amount-box { display: contents; }
.price-row .amount-box input { width: 5.5rem; text-align: center; }
.price-row .amount-unit { font-size: 0.85rem; color: var(--muted); }
.price-row .lock-opt { font-size: 0.85rem; }
@media (max-width: 480px) { .price-row { grid-template-columns: minmax(0, 1fr) 4.6rem max-content max-content; } .price-row .amount-box input { width: 4.6rem; } }

/* Recurring sessions. */
.repeat-box { margin-bottom: 0.4rem; }
.repeat-dates { margin: -0.3rem 0 0.8rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--surface-2); }
.repeat-dates p { margin: 0 0 0.4rem; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rep-chip { padding: 0.05rem 0.55rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 0.78rem; }
.rep-chip.clash { background: var(--danger-soft); border-color: transparent; color: var(--danger); text-decoration: line-through; }
.series-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0.4rem 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--primary-soft); font-size: 0.88rem; }

/* Replacement for a cancelled session's time. */
.replace-box h3 { margin: 0 0 0.3rem; }
.replace-box .end { display: flex; gap: 0.35rem; align-items: center; }

/* After a session: what happens to the client's next sessions */
.plan-box > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; list-style: none; }
.plan-box > summary::-webkit-details-marker { display: none; }
.plan-box > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.plan-box[open] > summary::before { transform: rotate(-90deg); }
.plan-title { font-weight: 700; }
.plan-state { color: var(--muted); font-size: .85rem; }
.plan-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.plan-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 12px; white-space: normal; height: auto; }
.plan-choice b { font-size: .95rem; }
.plan-choice span { font-size: .78rem; color: var(--muted); font-weight: 400; }
.plan-choice.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); background: color-mix(in srgb, var(--primary) 8%, var(--card, #fff)); }
.plan-panel { margin-top: 4px; }
.plan-actions { margin-top: 8px; }
.rep-chip.kept { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pause-chip { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #8a5a00; border: 1px solid #f1d58a; margin-inline-end: 4px; white-space: nowrap; }
.pause-chip.ended { background: #eef0f3; color: #4b5563; border-color: #d5d9e0; }
@media (prefers-color-scheme: dark) {
  .pause-chip { background: #3a2f10; color: #f5d27a; border-color: #5c4a17; }
  .pause-chip.ended { background: #2a2f37; color: #c4cad4; border-color: #3b424d; }
}
@media (max-width: 560px) { .plan-choices { grid-template-columns: 1fr; } }
/* Subscription: add a referral code later */
.late-ref { display: grid; gap: 0.4rem; margin: 0.6rem 0; padding: 0.7rem 0.8rem; border-radius: 12px; background: var(--surface-2); }
.late-ref .row { flex-wrap: nowrap; }
.late-ref input { max-width: 12rem; }
.ref-by { margin: 0.5rem 0; }
/* A feature not in this subscription (a lock and where it is) */
.locked-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.locked-line svg { width: 16px; height: 16px; flex: none; }
/* Admin: texts of the public plans page */
.pp-card h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.pp-list { display: grid; gap: 0.45rem; margin-bottom: 0.6rem; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 0.4rem; align-items: center; }
.pp-list:not(#pp-base) .pp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pp-tools { display: flex; gap: 0.2rem; }
.pp-tools button { min-width: 2rem; padding-inline: 0.4rem; }
@media (max-width: 640px) { .pp-row, .pp-list:not(#pp-base) .pp-row { grid-template-columns: 1fr; } .pp-row { padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } }
.lim-table input { width: 6.5rem; text-align: center; }
.video-left { color: var(--primary); font-weight: 700; margin: 0 0 0.3rem; }
/* Ended subscription: read-only bar at the top of the panel */
.expired-bar { position: sticky; top: 0; z-index: 35; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  padding: 0.6rem 1rem; background: #2a1640; color: #fff; font-size: 0.88rem; box-shadow: 0 6px 18px -10px rgba(42, 22, 64, 0.6); }
.expired-bar .eb-text { flex: 1 1 320px; }
.expired-bar .eb-text b { color: #ffc53d; }
.expired-bar .eb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.expired-bar .eb-buy { background: #ffc53d; color: #2a1640; border: none; font-weight: 800; border-radius: 999px; }
.expired-bar .ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); border-radius: 999px; }
/* Extra video sessions */
.pack-title { margin: 1rem 0 0.2rem; font-size: 1rem; }
.pack-plans .plan.is-pack { border-style: dashed; }
.vp-count { width: 4.5rem; text-align: center; display: inline-block; }
.vp-plans { margin: 0.2rem 0 0.5rem; gap: 0.8rem; }
/* Secretary */
.staff-who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.3rem 0.55rem; }
.staff-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pal-mint); color: #fff; font-weight: 800; flex: none; }
.staff-who .who-name { display: grid; min-width: 0; line-height: 1.45; }
.staff-who .who-name b, .staff-who .who-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-who .who-name b { font-size: 0.9rem; }
.staff-who .who-name small { color: var(--muted); font-size: 0.72rem; }
.staff-who #staff-logout { grid-column: 1 / -1; width: 100%; justify-content: center; }
.staff-add { margin-top: 0.6rem; }
/* Secretary without financial access: the money parts are hidden (the server sends none) */
.no-money .session-pays, .no-money .invoice-row, .no-money #pay, .no-money #sell-pkg, .no-money .acct-line, .no-money .acct-pill,
.no-money [data-tab="payments"], .no-money [data-tab="invoices"], .no-money .paid-now-toggle, .no-money .owed-card, .no-money .stat-money { display: none !important; }
.staff-row.is-off { opacity: 0.6; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.staff-add h3 { margin: 0.8rem 0 0.4rem; font-size: 0.95rem; }
.staff-fin { margin: 0.2rem 0 0.6rem; gap: 0.4rem; }
.staff-limit { margin: 0 0 0.5rem; color: var(--primary); font-weight: 700; }
/* Secretary activity log */
.slog-day { margin: 0.9rem 0 0.3rem; font-size: 0.9rem; color: var(--primary); }
.slog-list { display: grid; gap: 0.15rem; }
.slog-row { display: flex; gap: 0.7rem; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.slog-time { color: var(--muted); min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.slog-row.refused .slog-text { color: var(--danger); }
/* Secretaries: one tidy card each */
.staff-rules { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.25rem; font-size: 0.85rem; }
.staff-rules li::before { display: inline-block; width: 1.3rem; font-weight: 800; }
.staff-rules li.ok::before { content: "✓"; color: var(--ok); }
.staff-rules li.no::before { content: "✕"; color: var(--danger); }
.staff-items { display: grid; gap: 0.7rem; margin-bottom: 0.8rem; }
.staff-item { border: 1px solid var(--border); border-radius: 16px; padding: 0.8rem 0.9rem; background: var(--surface); }
.staff-item.is-off { opacity: 0.65; }
.si-head { display: flex; align-items: center; gap: 0.6rem; }
.si-name { display: grid; gap: 0.2rem; }
.si-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.si-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem 1rem; margin: 0.7rem 0; }
.si-info div { display: grid; gap: 0.05rem; }
.si-info dt { font-size: 0.75rem; color: var(--muted); }
.si-info dd { margin: 0; font-size: 0.9rem; }
.si-info bdi { unicode-bidi: isolate; }
.si-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.staff-foot { gap: 0.4rem; }
.slog-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.slog-sum { font-weight: 700; margin: 0 0 0.4rem; }
.slog-empty { text-align: center; padding: 1.2rem 0; }
.sh-days { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.sh-day, .sh-any { display: inline-flex; align-items: center; gap: 0.3rem; }
.sh-any { margin-bottom: 0.6rem; }
.si-hours { grid-column: 1 / -1; }
/* Extra video sessions: apart from the plans */
.pack-card { border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.pack-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.pack-item { display: grid; gap: 0.2rem; justify-items: start; padding: 0.7rem 0.8rem; border-radius: 14px; background: var(--surface-2); }
.pack-price { font-weight: 800; color: var(--primary); }
.pack-item button { margin-top: 0.3rem; }
/* Admin: a therapist's settled payments */
.t-orders summary { cursor: pointer; color: var(--primary); }
.t-orders-list { display: grid; gap: 0.35rem; margin: 0.4rem 0; }
.t-order { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.35rem 0.5rem; border-radius: 10px; background: var(--surface-2); font-size: 0.85rem; }
/* Admin prices: a discount on the 3-month plan */
.disc-opt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-size: 0.85rem; margin-top: 0.2rem; }
.disc-opt label { display: inline-flex; align-items: center; gap: 0.3rem; }
.disc-box input { width: 4.5rem; text-align: center; }
.disc-result { color: var(--primary); font-weight: 700; }
.plan-off { display: inline-block; width: fit-content; margin-top: 0.15rem; padding: 0 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--danger); font-size: 0.72rem; font-weight: 800; }
/* Date and time on one row */
.dt-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; align-items: center; }
.dt-row.with-time { grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr); }
.dt-sep { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 560px) {
  .dt-row.with-time { grid-template-columns: minmax(0, 1fr); }
  .dt-sep { display: none; }
}
/* Who paid: a short note, then the 4 digits (narrow) and the name (wide) side by side */
.payer-note { margin: 0.4rem 0 0.2rem; color: var(--muted); }
.payer-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.payer-row .field { margin-bottom: 0.4rem; }
.payer-row input[inputmode="numeric"] { text-align: center; letter-spacing: 0.2em; }
/* The extra-video window: everything in one column, the card number on one line */
.pack-form .card-box { padding: 0.8rem; }
.pack-form .card-number { font-size: clamp(1rem, 5.2vw, 1.25rem); letter-spacing: 0.06em; white-space: nowrap; }
.pack-form .date-picker select, .pack-form .time-picker select { min-width: 0; }
.plan-soon svg { width: 0.8rem; height: 0.8rem; vertical-align: -0.12em; }
/* Admin: usage per therapist */
.usage-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.usage-table th, .usage-table td { padding: 0.5rem 0.45rem; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.usage-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.usage-table td:first-child, .usage-table th:first-child { text-align: start; }
.usage-table td span { display: block; }
.usage-table tr.is-test { opacity: 0.6; }
.usage-table tr.is-off { opacity: 0.5; }
.enc-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--mint-soft); color: var(--ok); font-size: 0.75rem; font-weight: 700; }
.enc-badge svg { width: 0.85rem; height: 0.85rem; }
/* Instant session */
.instant-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; background: var(--accent-soft, #fff1dc); border-color: transparent; font-weight: 700; }
.instant-btn svg { width: 1rem; height: 1rem; }
.assign-note { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.instant-ready .row { margin: 0.8rem 0; flex-wrap: wrap; }
/* All quick actions on one row (two for a secretary, who has no instant session) */
.quick-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.quick-actions button { padding-inline: 0.4rem; white-space: nowrap; }
/* Client file: the kartable */
.desk { display: grid; gap: 0.8rem; }
.desk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; }
.desk-box { border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.85rem; display: grid; gap: 0.35rem; align-content: start; }
.desk-box.live { border-color: var(--ok); background: var(--ok-soft); }
.desk-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.desk-label svg { width: 1rem; height: 1rem; }
.desk-when strong { color: var(--primary); }
.desk-note { margin: 0; font-size: 0.88rem; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.desk-actions { flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.desk-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--muted); }
.desk-facts strong { color: var(--text); }
.desk-todo ul { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.desk-todo li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.65rem; border-radius: 10px; background: var(--warn-soft); font-size: 0.88rem; }
.desk-todo li > :last-child { flex-shrink: 0; }
.desk-clear { margin: 0; color: var(--ok); }
/* Two-way choice shown as side-by-side buttons */
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.seg-choice label { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; }
.seg-choice label svg { width: 1rem; height: 1rem; }
.seg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.seg-choice label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.seg-choice label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Files page: order and account filter */
.files-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
.files-sort { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); margin: 0; }
.files-sort select { width: auto; min-height: 36px; }
.files-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.files-filter .chip-btn { min-height: 34px; }
.ff-n { opacity: 0.75; font-size: 0.75rem; }
/* While a window is open only it scrolls; the page behind stays still. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
dialog, dialog .dlg-body { overscroll-behavior: contain; }
/* Files page: account filter (dropdown) and sortable column headers */
.files-filter { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); margin: 0; }
.files-filter select { width: auto; min-height: 36px; }
.files-head { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.3rem; margin-top: 0.6rem; border-bottom: 1px solid var(--border); }
.sort-col { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; min-height: 40px; padding: 0 0.4rem;
  font-size: 0.82rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; }
.sort-col:hover { color: var(--text); }
.sort-col.on { color: var(--primary); border-bottom-color: var(--primary); }
.sort-col:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.sort-arrow { font-size: 0.65rem; }
.sort-col:not(:first-child) { justify-content: center; }
/* Files list: same three columns as the header (name, last session, next session) */
#mlist .file-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.3rem; align-items: center; }
.file-row .main { min-width: 0; }
.file-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.file-chips:empty { display: none; }
.file-date { text-align: center; font-size: 0.85rem; color: var(--text); }
/* Files list: name | last session | next session | payment | actions */
.files-head, #mlist .file-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr) auto; }
.files-head .col-actions { width: 8.5rem; }
.files-head.no-pay, #mlist .file-row.no-pay { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
#mlist .file-row { cursor: pointer; }
.file-row .title { color: inherit; text-decoration: none; font-weight: 700; }
.file-pay { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: center; }
.file-actions { display: flex; gap: 0.3rem; justify-content: flex-end; width: 8.5rem; }
.files-tools { justify-content: flex-start; gap: 1rem; }
/* Phones: the name on its own line, then the other columns with small labels */
@media (max-width: 700px) {
  .files-head { display: flex; flex-wrap: wrap; }
  .files-head .col-actions { display: none; }
  #mlist .file-row, #mlist .file-row.no-pay { grid-template-columns: 1fr 1fr; row-gap: 0.4rem; }
  .file-row .main { grid-column: 1 / -1; }
  .file-row .file-date { text-align: start; }
  .file-row .file-date::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.75rem; }
  .file-pay { justify-content: flex-start; }
  .file-actions { width: auto; justify-content: flex-start; }
}
/* Files: search and the two filters on one line (wrapping on phones) */
.files-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0; }
.files-tools .search { flex: 1 1 14rem; min-width: 0; }

.email-hint { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--danger, #c0392b); }
/* Session window: tell the client */
.notify-box h3 { margin: 0 0 0.3rem; }
.notify-box button { display: inline-flex; align-items: center; gap: 0.35rem; }
.notify-box button svg { width: 1rem; height: 1rem; }

.sales-switch { border-inline-start: 4px solid var(--warn, #d98c00); }
.sales-switch.is-open { border-inline-start-color: var(--ok); }
.sales-switch label { gap: 0.5rem; align-items: center; }

.cal-help ol { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; line-height: 1.9; }
/* Next session: enter on its own row; send and copy the link together, details opposite */
.next-actions:has(> :only-child) { grid-template-columns: 1fr; }
.next-links { align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.next-link-btns { gap: 0.4rem; flex-wrap: wrap; }
.next-link-btns button { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Not available yet (or no email): grey, and cannot be pressed */
.notify-box button:disabled { background: var(--surface-2, #eceaf2); color: var(--muted); border-color: transparent; box-shadow: none; filter: grayscale(1); opacity: 0.7; cursor: not-allowed; pointer-events: none; }
/* "Tell the client" in booking forms */
.notify-choice { border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.8rem 0.6rem; margin: 0.6rem 0; }
.notify-choice legend { font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 0 0.3rem; }
.notify-choice label { align-items: center; gap: 0.35rem; margin: 0; font-weight: 600; }
.notify-choice label svg { width: 1rem; height: 1rem; }
.notify-choice .nt-soon { color: var(--muted); opacity: 0.6; filter: grayscale(1); cursor: not-allowed; }
.notify-choice small { display: block; margin-top: 0.25rem; }
/* The public top bar: the same on every page */
.sb-join { color: var(--primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.site-bar.scrolled { box-shadow: 0 4px 18px rgba(30, 40, 40, 0.06); }
@media (max-width: 420px) { .sb-join { font-size: 0.78rem; } .sb-brand { font-size: 1rem; } }