:root{
  --ink:#12262A;
  --dusk:#2E4756;
  --brass:#B99257;
  --brass-light:#D8BD8B;
  --brass-dark:#8C6B3B;
  --sand:#F3ECDD;
  --sand-deep:#E9DFC8;
  --sage:#7E9483;
  --ember:#A6432E;
  --white:#FFFFFF;
  --page-bg:#FFFFFF;
  --ink-soft:rgba(18,38,42,0.62);
  --line:rgba(18,38,42,0.12);
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-card:0 18px 40px -28px rgba(18,38,42,0.28);
  --font-display-en:'Fraunces',serif;
  --font-body-en:'Inter',sans-serif;
  /* Was 'Amiri' (a calligraphic serif) — Vishal (2026-09-29) wants the
     Arabic titles to use the SAME font as the card/description text
     below them, not a separate decorative one. Matches --font-body-ar
     exactly; only the font-family changes here, titles keep their
     larger size/700 weight for visual hierarchy. */
  --font-display-ar:'IBM Plex Sans Arabic',sans-serif;
  --font-body-ar:'IBM Plex Sans Arabic',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font-body-en);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{ font-family:var(--font-body-ar); }
.font-display{ font-family:var(--font-display-en); font-weight:600; }
html[lang="ar"] .font-display{ font-family:var(--font-display-ar); font-weight:700; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2.5px solid var(--brass); outline-offset:2px; }

.app{ max-width:1180px; margin:0 auto; padding:28px 20px 80px; }

/* Site header — logo + minimal back-link + lang toggle. Light, matches
   the main site instead of the app's own nav. */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 28px; background:var(--white); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.site-logo{ display:flex; align-items:center; }
.site-logo img{ height:36px; width:auto; display:block; }
.site-header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.back-link{
  color:var(--ink-soft); text-decoration:none; font-size:13px; font-weight:600;
}
.back-link:hover{ color:var(--brass-dark); }

.whatsapp-btn{
  display:inline-flex; align-items:center; gap:7px; background:#1FA855; color:#fff;
  border:none; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700;
  text-decoration:none; transition:background .18s ease, transform .18s ease;
}
.whatsapp-btn:hover{ background:#188C46; transform:translateY(-1px); }
.whatsapp-btn svg{ width:15px; height:15px; fill:#fff; }

.lang-toggle{
  background:var(--sand); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600; letter-spacing:0.02em;
  transition:background .2s ease, transform .2s ease;
}
.lang-toggle:hover{ background:var(--sand-deep); transform:translateY(-1px); }

.brand-strip{ display:flex; align-items:baseline; gap:10px; color:var(--ink); padding:20px 4px 0; }
.brand-strip .brand-mark{ font-family:var(--font-display-en); font-size:20px; letter-spacing:0.14em; color:var(--brass-dark); }
html[lang="ar"] .brand-strip .brand-mark{ font-family:var(--font-display-ar); letter-spacing:0; }
.brand-strip .brand-sub{ font-size:12px; color:var(--ink-soft); }

/* Hero */
.hero{ padding:18px 4px 32px; color:var(--ink); animation:riseIn .7s ease both; }
@keyframes riseIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.hero h1{ font-size:clamp(28px,4.2vw,42px); line-height:1.12; max-width:640px; }
.hero p{ margin-top:10px; color:var(--ink-soft); max-width:520px; font-size:15px; line-height:1.6; }

/* Layout */
.layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:start; }
@media (max-width:860px){ .layout{ grid-template-columns:1fr; } }
.steps{ display:flex; flex-direction:column; gap:20px; }
.step-block{
  background:var(--white); border-radius:var(--radius-lg); padding:22px 22px 24px;
  box-shadow:var(--shadow-card); border:1px solid var(--line);
}
.step-block h2{ font-size:15px; letter-spacing:0.03em; color:var(--ink); margin-bottom:14px; font-weight:700; }
.step-block h2 .num{ color:var(--brass-dark); margin-inline-end:6px; font-family:var(--font-display-en); }
html[lang="ar"] .step-block h2 .num{ font-family:var(--font-display-ar); }
.step-hint{ font-size:12.5px; color:var(--ink-soft); margin:-8px 0 14px; }

/* Sky-band signature rule above each time-of-day slot group */
.sky-rule{ height:4px; border-radius:4px; margin:16px 0 10px; }
.sky-rule.morning{ background:linear-gradient(90deg,var(--brass-light),var(--sand)); }
.sky-rule.afternoon{ background:linear-gradient(90deg,var(--sand-deep),var(--brass)); }
.sky-rule.evening{ background:linear-gradient(90deg,var(--brass),var(--dusk)); }
.slot-group-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:0.03em; text-transform:uppercase; }

/* Category chips (Massage / Body / Packages / Gentleman's) */
.category-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chip-toggle{
  border:1px solid var(--line); background:var(--sand); color:var(--ink);
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; transition:all .18s ease;
}
.chip-toggle:hover{ border-color:var(--brass); }
.chip-toggle.active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.service-list{ display:flex; flex-direction:column; gap:10px; }

.option-card{
  border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px 15px;
  transition:all .18s ease; background:var(--white);
}
.option-card:hover{ border-color:var(--brass-light); }
.option-card.has-selection{ border-color:var(--brass); background:linear-gradient(160deg,#fff,#FBF6EB); }
.option-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
.option-card .o-name{ font-weight:700; font-size:14.5px; }
.option-card .o-name .mens-badge{
  display:inline-block; margin-inline-start:8px; font-size:10.5px; font-weight:700; letter-spacing:0.03em;
  color:var(--brass-dark); background:var(--sand); border-radius:999px; padding:2px 8px; vertical-align:middle;
}
.option-card .o-desc{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
.variant-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.variant-chip{
  border:1.5px solid var(--line); background:var(--sand); color:var(--ink); padding:8px 13px;
  border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; text-align:center; transition:all .15s ease;
}
.variant-chip:hover{ border-color:var(--brass); }
.variant-chip.selected{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.variant-chip .vc-price{ display:block; font-size:11.5px; color:var(--brass-dark); margin-top:2px; }
.variant-chip.selected .vc-price{ color:var(--ink); }

.pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1.5px solid var(--line); background:var(--white); padding:9px 16px; border-radius:999px;
  font-size:13.5px; font-weight:600; transition:all .18s ease;
}
.pill:hover{ border-color:var(--brass-light); }
.pill.selected{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.date-input{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px;
  background:var(--white); color:var(--ink); margin-bottom:6px;
}

.slot-groups{ margin-top:6px; }
.slot-row{ display:flex; gap:8px; flex-wrap:wrap; }
.slot-chip{
  border:1.5px solid var(--line); background:var(--white); padding:8px 13px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; transition:all .15s ease; min-width:64px; text-align:center;
}
.slot-chip:hover:not(.full){ border-color:var(--brass); }
.slot-chip.selected{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.slot-chip.full{ opacity:0.4; text-decoration:line-through; cursor:not-allowed; }
.no-slots{ font-size:13px; color:var(--ink-soft); font-style:italic; padding:6px 2px; }

.therapist-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:1.5px solid var(--line); background:var(--white); padding:12px 14px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; transition:all .15s ease; min-width:96px; text-align:center;
}
.therapist-card:hover{ border-color:var(--brass); }
.therapist-card.selected{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.therapist-card-photo{
  width:60px; height:60px; border-radius:50%; object-fit:cover; background:#d8cdb8;
  border:1.5px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; font-size:24px;
}
.therapist-card-name{ line-height:1.2; max-width:108px; overflow-wrap:break-word; }
.therapist-card-nationality{
  line-height:1.15; max-width:108px; overflow-wrap:break-word;
  font-size:11px; font-weight:500; color:var(--ink-soft); text-transform:none;
}
.therapist-card.selected .therapist-card-nationality{ color:var(--ink); opacity:0.75; }
.slot-loading{ font-size:13px; color:var(--ink-soft); padding:6px 2px; }

.detail-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-form .full{ grid-column:1 / -1; }
@media (max-width:560px){ .detail-form{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:64px; }
.phone-row{ display:flex; gap:8px; }
.phone-row .country-select{
  flex:0 0 auto; width:100px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 6px; font-size:13px; color:var(--ink); background:var(--white);
}
.phone-row input{ flex:1; min-width:0; }

/* Summary / cart card */
.summary-card{
  position:sticky; top:20px; background:var(--ink); color:var(--white); border-radius:var(--radius-lg);
  padding:24px 22px; box-shadow:0 24px 60px -32px rgba(18,38,42,0.45);
}
.summary-card h3{ font-family:var(--font-display-en); font-size:19px; margin-bottom:16px; }
html[lang="ar"] .summary-card h3{ font-family:var(--font-display-ar); }
.cart-item{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:9px 0; border-bottom:1px solid rgba(255,253,249,0.14); }
.cart-item .ci-name{ font-weight:600; }
.cart-item .ci-meta{ font-size:11.5px; color:rgba(255,253,249,0.55); margin-top:2px; }
.cart-item .ci-remove{ background:none; border:none; color:rgba(255,253,249,0.5); font-size:16px; cursor:pointer; line-height:1; padding:0 2px; }
.cart-item .ci-remove:hover{ color:var(--ember); }
.summary-row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:9px 0; border-bottom:1px solid rgba(255,253,249,0.14); }
.summary-row.total{ font-weight:700; font-size:14.5px; border-bottom:none; }
.summary-row .k{ color:rgba(255,253,249,0.6); }
.summary-row .v{ font-weight:600; text-align:end; }
.summary-empty{ font-size:13px; color:rgba(255,253,249,0.55); font-style:italic; padding:8px 0; }
.btn-primary{
  width:100%; margin-top:18px; background:var(--brass); color:var(--ink); border:none; border-radius:999px;
  padding:13px 18px; font-size:14.5px; font-weight:700; transition:all .18s ease;
}
.btn-primary:hover{ background:var(--brass-light); }
.btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.walkin-btn{ width:auto; display:inline-block; margin-top:14px; text-decoration:none; }

.discount-input{ width:80px; }
.notes-input{ min-width:140px; flex:1; }

.range-presets{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.preset-btn{ font-size:12.5px; padding:6px 12px; }

.report-presets-section{ margin-bottom:16px; }
.report-presets-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.report-presets-hint{ flex:1; margin-bottom:8px; }
.report-presets-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.report-preset-category{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.report-preset-category-label{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); min-width:110px;
}
.report-preset-chip{
  font-size:12.5px; padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.report-preset-chip:hover{ border-color:var(--brass); }
.report-preset-chip.active{ background:var(--brass); border-color:var(--brass); color:#fff; }
.report-presets-empty{ font-size:12.5px; color:var(--ink-soft); }

.preset-manage-panel{
  background:var(--sand); border-radius:var(--radius-md); padding:14px 16px; margin:10px 0 4px;
}
.preset-manage-panel.hidden{ display:none; }
.preset-manage-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.preset-manage-row{
  background:#fff; border-radius:var(--radius-sm); padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
.preset-manage-row-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.preset-manage-row-info{ font-size:13px; color:var(--ink); }
.preset-manage-row-info b{ color:var(--ink); }
.preset-manage-row-actions{ display:flex; gap:8px; }
.preset-manage-row-actions button{ font-size:12px; padding:5px 10px; }
.preset-manage-edit{ display:flex; flex-direction:column; gap:8px; }
.preset-manage-edit input[type="text"]{ max-width:260px; }
.preset-add-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.preset-add-row input[type="text"]{ min-width:160px; }

.category-visibility-card{ margin-bottom:16px; }
.category-visibility-list{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.category-visibility-row{
  display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink);
  background:#fff; border-radius:var(--radius-sm); padding:7px 12px; cursor:pointer;
}
.category-visibility-row input[type="checkbox"]{ width:16px; height:16px; cursor:pointer; }

.columns-panel{
  background:var(--sand); border-radius:var(--radius-md); padding:16px; margin:12px 0 18px;
}
.columns-panel.hidden{ display:none; }
.columns-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px 14px; margin:10px 0;
}
.columns-list label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer; }
.columns-actions{ display:flex; gap:10px; }
.columns-actions button{ font-size:12.5px; padding:6px 12px; }
.form-error{ color:#7a2e1f; background:#fbeae5; border-radius:var(--radius-sm); padding:8px 10px; font-size:12.5px; margin-top:10px; min-height:16px; }
.form-error:empty{ display:none; }

/* Past-day booking lock notice (2026-10-01) — a WARNING, not an error:
   amber like .mock-pay-note, distinct from the red .form-error, since
   this isn't something that went wrong, it's expected behavior for a
   non-admin account viewing a locked booking. */
.lock-notice{
  background:#FBF0DE; color:#8C6B1F; border-radius:var(--radius-md); padding:12px 14px; font-size:13px;
  line-height:1.6; text-align:start; margin-bottom:14px; font-weight:600;
}
.lock-notice.hidden{ display:none; }

/* Staff page */
.staff-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.staff-list{ display:flex; flex-direction:column; gap:10px; }
.staff-card{
  background:var(--white); border-radius:var(--radius-md); padding:14px 16px; display:flex; justify-content:space-between;
  align-items:center; gap:12px; border:1px solid var(--line); box-shadow:var(--shadow-card); flex-wrap:wrap;
}
.staff-card .s-main{ display:flex; flex-direction:column; gap:3px; }
.team-list-row-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.team-list-photo{
  width:32px; height:32px; border-radius:50%; object-fit:cover; background:#d8cdb8;
  border:1.5px solid rgba(0,0,0,0.08); flex-shrink:0;
}
.staff-card .s-type{ font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--brass-dark); }
.staff-card .s-title{ font-weight:700; font-size:14.5px; color:var(--ink); }
.staff-card .s-meta{ font-size:12.5px; color:var(--ink-soft); }
.staff-card .s-pay{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block; margin-inline-start:8px;
}
.s-pay.paid{ background:#E4F3E9; color:#1F7A44; }
.s-pay.pending{ background:#FBF0DE; color:#8C6B1F; }
.s-pay.not_required{ background:var(--sand); color:var(--ink-soft); }

/* Placed AFTER .staff-card deliberately — same specificity (single
   class each), so source order decides the winner. These must come
   later to actually override .staff-card's own background. */
.cancelled-booking{ opacity:0.62; background:var(--sand); }
.cancelled-badge{
  display:inline-block; background:#F6DCD8; color:#8C3B32; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:999px; margin-inline-start:8px; vertical-align:middle;
}
.status-not_started{ background:#EBEDEF; }
.status-started{ background:#D6E8F7; }
.status-in_process{ background:#FCE9C7; }
.status-completed{ background:#D7F0DE; }

.status-select{ font-weight:600; }
.status-select-not_started{ color:var(--ink-soft); }
.status-select-started{ color:#1A5A8A; }
.status-select-in_process{ color:#8C5F12; }
.status-select-completed{ color:#1F7A44; }
/* The "Cancelled" entry in the Calendar booking panel's Status dropdown
   (2026-09-29) — a real cancellation, not a progress stage, so it's
   colored like the app's other destructive actions (Cancel menu item,
   Remove buttons) to read as different from Not Started/Started/etc. */
.cal-status-cancel-option{ color:var(--ember); }

.action-menu-wrap{ position:relative; }
.action-menu-btn{ font-size:18px; font-weight:700; }
.action-menu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card); min-width:130px; z-index:20; overflow:hidden;
}
.action-menu.hidden{ display:none; }
.action-menu-item{
  display:block; width:100%; text-align:start; padding:9px 14px; font-size:13px; color:var(--ink);
  background:none; border:none; cursor:pointer;
}
.action-menu-item:hover{ background:var(--sand); }
.action-menu-item-danger{ color:var(--ember); }

.staff-cancel{ background:transparent; border:1.5px solid var(--ember); color:var(--ember); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; }
.staff-cancel:hover{ background:var(--ember); color:var(--white); }
.staff-empty{ color:var(--ink-soft); font-size:14px; padding:20px; text-align:center; background:var(--sand); border-radius:var(--radius-md); }

.staff-card-actions{ display:flex; gap:6px; }
.icon-btn{
  width:30px; height:30px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
  color:var(--ink-soft); font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ border-color:var(--brass); color:var(--brass-dark); }
.inline-edit-input{
  border:1.5px solid var(--brass); border-radius:var(--radius-sm); padding:6px 10px; font-size:14.5px; color:var(--ink); min-width:160px;
}
.assign-controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.assign-select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; color:var(--ink); background:var(--white);
}
.report-mode-tabs{ margin-bottom:14px; }

/* Reports tab */
.report-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); align-self:center; }
.report-run-btn{ text-decoration:none; display:inline-block; }
.report-summary{
  background:var(--sand); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px;
  font-size:13.5px; color:var(--ink); display:flex; gap:24px; flex-wrap:wrap;
}
.report-summary b{ font-family:var(--font-display-en); font-size:16px; }
html[lang="ar"] .report-summary b{ font-family:var(--font-display-ar); }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,38,42,0.55); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50;
}
.modal-overlay.hidden{ display:none; }
.modal-card{
  background:var(--white); border-radius:var(--radius-lg); padding:30px 28px; max-width:420px; width:100%;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.5); text-align:center;
}
.modal-card h2{ font-family:var(--font-display-en); font-size:22px; margin-bottom:8px; color:var(--ink); }
html[lang="ar"] .modal-card h2{ font-family:var(--font-display-ar); }
.modal-card .ref{ font-size:13px; color:var(--brass-dark); font-weight:700; margin-bottom:16px; letter-spacing:0.04em; }
.modal-card .details{ text-align:start; background:var(--sand); border-radius:var(--radius-md); padding:14px 16px; font-size:13.5px; line-height:1.7; margin-bottom:18px; }
.modal-card .mock-pay-note{
  background:#FBF0DE; color:#8C6B1F; border-radius:var(--radius-md); padding:12px 14px; font-size:12.5px;
  line-height:1.6; text-align:start; margin-bottom:16px;
}

.footnote{ color:var(--ink-soft); font-size:12px; text-align:center; margin-top:36px; line-height:1.6; }

/* Site footer — kept dark as an intentional accent against the light page */
.site-footer{ background:#BAD8EA; padding:44px 28px 24px; color:var(--brass-dark); margin-top:40px; }
.footer-cols{ margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:640px; }
@media (max-width:500px){ .footer-cols{ grid-template-columns:1fr; } }
.footer-col h4{ color:var(--brass-dark); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.footer-col{ display:flex; flex-direction:column; gap:0; }
.footer-col a{
  color:var(--brass-dark); text-decoration:none; font-size:14px; padding:7px 0;
  border-bottom:1px solid rgba(140,105,59,0.25);
}
.footer-col a:hover{ color:var(--ink); }
.footer-social-band{
  max-width:1180px; margin:36px auto 0; padding-top:24px; border-top:1px solid rgba(140,105,59,0.3);
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.footer-social-row{ display:flex; gap:14px; }
.footer-social-row a{
  width:34px; height:34px; color:var(--brass-dark); display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.footer-social-row a svg{ width:20px; height:20px; }
.footer-social-row a:hover{ color:var(--ink); }
.footer-logo-mark{ width:190px; height:auto; display:block; }
.site-footer-bottom{
  max-width:1180px; margin:20px auto 0; font-size:12.5px; color:var(--brass-dark); text-align:center;
}

/* Legacy dark topbar — still used by staff.html */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 28px; }
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand-mark{ font-family:var(--font-display-en); font-size:26px; letter-spacing:0.14em; color:var(--brass-dark); }
html[lang="ar"] .brand-mark{ font-family:var(--font-display-ar); letter-spacing:0; }
.brand-sub{ font-size:12.5px; letter-spacing:0.04em; color:var(--ink-soft); }
.hero .hero-link{ display:inline-block; margin-top:16px; color:var(--brass-dark); font-size:13.5px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(140,107,59,0.4); }
.hero .hero-link:hover{ color:var(--ink); }

/* Step navigation (multi-step flow: treatments -> timing -> details -> confirmation) */
.step-nav{ display:flex; gap:10px; margin-bottom:22px; }
.step-nav-item{
  flex:1; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--line); background:var(--white); opacity:0.55;
}
.step-nav-item.active{ opacity:1; border-color:var(--brass); background:linear-gradient(160deg,#fff,#FBF6EB); }
.step-nav-item.done{ opacity:1; cursor:pointer; }
.step-nav-item .sn-num{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--white); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-nav-item.active .sn-num{ background:var(--brass); color:var(--ink); }
.step-nav-item .sn-label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.step-page{ display:none; }
.step-page.active{ display:block; animation:stepFadeIn .35s ease both; }
@keyframes stepFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.step-back{ background:none; border:none; color:var(--ink-soft); font-size:13px; font-weight:600; cursor:pointer; padding:0; margin-bottom:14px; }
.step-back:hover{ color:var(--brass-dark); }

/* Mobile sticky action bar — app-style bottom CTA, phone widths only */
.mobile-action-bar{ display:none; }
@media (max-width:860px){
  .mobile-action-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(18,38,42,0.25);
  }
  .mobile-action-bar .btn-primary{ margin-top:0; }
  .mobile-action-bar .ma-error{ color:#7a2e1f; font-size:12px; margin-bottom:6px; min-height:14px; }
  .app{ padding-bottom:96px; } /* keep content clear of the fixed bar */
}

/* Success checkmark */
.success-check{ width:84px; height:84px; margin:0 auto 18px; }
.success-check circle{
  fill:none; stroke:#1FA855; stroke-width:3; stroke-dasharray:220; stroke-dashoffset:220;
  animation:checkCircle .5s ease forwards;
}
.success-check path{
  fill:none; stroke:#1FA855; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:36; stroke-dashoffset:36; animation:checkMark .35s ease forwards .45s;
}
@keyframes checkCircle{ to{ stroke-dashoffset:0; } }
@keyframes checkMark{ to{ stroke-dashoffset:0; } }

.modal-card.success-card{ text-align:center; }
.modal-card.success-card h2{ margin-bottom:6px; }
.modal-card.success-card p{ color:var(--ink-soft); font-size:14.5px; }

/* Step 3 — confirmation / thank-you page */
.confirm-page{ max-width:480px; margin:40px auto; text-align:center; }
.confirm-page .cp-icon{ width:64px; height:64px; margin:0 auto 18px; }
.confirm-page h1{ font-size:26px; margin-bottom:8px; }
.confirm-page p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin-bottom:24px; }
.confirm-page .cp-summary{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px;
  text-align:start; margin-bottom:24px; box-shadow:var(--shadow-card);
}
.confirm-page .whatsapp-btn{ font-size:15px; padding:13px 24px; margin-bottom:12px; }
.confirm-page .cp-again{ display:inline-block; color:var(--ink-soft); font-size:13.5px; text-decoration:underline; background:none; border:none; cursor:pointer; padding:8px; }
.confirm-page .cp-again:hover{ color:var(--brass-dark); }

.cp-cal-hint{ font-size:13px !important; margin-bottom:10px !important; }
.cp-calendar-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.cp-cal-btn{
  display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:10px 18px;
  font-size:13px; font-weight:700; text-decoration:none; transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.cp-cal-btn:hover{ transform:translateY(-1px); }
.cp-cal-btn svg{ width:16px; height:16px; }
.cp-cal-apple{ background:#0a0a0a; color:#fff; }
.cp-cal-apple:hover{ background:#000; }
.cp-cal-apple svg{ fill:#fff; }
.cp-cal-google{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.cp-cal-google:hover{ border-color:var(--brass); }
.cp-cal-google svg{ fill:var(--ink); }

/* Staff Schedule tab */
.staff-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.staff-tab-btn{
  background:var(--white); border:1.5px solid var(--line); color:var(--ink); padding:10px 18px;
  border-radius:999px; font-size:13.5px; font-weight:700; transition:all .18s ease;
}
.staff-tab-btn.active{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.staff-tab-btn.hidden{ display:none; }
.staff-view{ display:none; }
.staff-view.active{ display:block; }
.user-add-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.user-add-form input[type="text"], .user-add-form input[type="password"]{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; color:var(--ink);
}
.user-add-form label{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); }

.schedule-grid{ display:flex; flex-direction:column; gap:10px; }
.schedule-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--white); flex-wrap:wrap;
}
/* This row card is explicitly white (background:var(--white) above)
   even though it sits inside the dark .team-editor-card/.summary-card,
   which sets color:var(--white) for everything inside it by default —
   without this, the day name here inherits white-on-white and is
   completely invisible (same class of bug as the Team editor's other
   labels, fixed earlier; this one was missed). */
.schedule-row .sr-name{ font-weight:700; font-size:13.5px; min-width:120px; color:var(--ink); }
.schedule-row .sr-toggle{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); }
.schedule-row .sr-hours{ display:flex; align-items:center; gap:6px; }
/* Custom AM/PM time picker (2026-10-01) — replaces native
   <input type="time">, whose 12h/24h display depends on the device's
   own locale rather than anything this page sets, so it looked
   different on different staff members' computers/browsers. This
   always shows hour / minute / AM-PM, regardless of locale. */
.time-picker{ display:inline-flex; align-items:center; gap:2px; }
.time-picker select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:6px 4px; font-size:12.5px;
  background:var(--white); color:var(--ink);
}
.time-picker select.tp-hour, .time-picker select.tp-min{ width:46px; }
.time-picker select.tp-ampm{ width:54px; }
.time-picker .tp-sep{ font-weight:700; color:var(--ink-soft); }
.schedule-row.off{ opacity:0.55; }
.schedule-timeline{ display:flex; gap:1px; margin-top:8px; width:100%; flex-basis:100%; }
.schedule-timeline .tl-cell{ flex:1; height:16px; background:var(--sand); border-radius:2px; }
.schedule-timeline .tl-cell.busy{ background:var(--brass-dark); }
.schedule-timeline .tl-cell.off{ background:transparent; }
.add-therapist-row{ display:flex; gap:8px; margin-top:14px; }
.add-therapist-row input{ flex:1; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; }
.add-therapist-row button{ background:var(--brass); color:var(--ink); border:none; border-radius:var(--radius-sm); padding:9px 16px; font-size:13px; font-weight:700; }

/* Generic display:none utility — used where a component doesn't
   already have its own scoped .hidden rule (see the modal/panel/tab
   ones above, which stay as-is). */
.hidden{ display:none !important; }

/* ---------------- Team tab (therapist roster + weekly schedule) ---------------- */
.team-add-row{ flex-wrap:wrap; }
.team-add-row select{ border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; }
.team-editor-card{ display:flex; flex-direction:column; gap:4px; }
.team-editor-card h3{ margin-top:10px; }
.team-photo-row{ display:flex; align-items:center; gap:14px; margin:4px 0 10px; }
.team-photo-preview{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid rgba(255,253,249,0.25); background:rgba(255,253,249,0.08);
}
.team-photo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.team-photo-upload-label{ cursor:pointer; padding:6px 14px; font-size:12px; }
.team-photo-remove-btn{ padding:5px 12px; font-size:11.5px; }
.team-photo-actions .step-hint{ color:rgba(255,253,249,0.55); margin:0; max-width:220px; }
.team-editor-fields{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
/* This card sits on the dark .summary-card background (like the guest
   session summary) — var(--ink-soft) is a dark navy meant for LIGHT
   pages and was invisible here. Match the light, semi-transparent
   label color already used elsewhere on this same dark card
   (.summary-row .k, .cart-item .ci-meta). */
.team-editor-fields label{ font-size:12px; font-weight:700; color:rgba(255,253,249,0.6); text-transform:uppercase; letter-spacing:0.03em; margin-top:4px; }
.team-editor-fields input[type="text"], .team-editor-fields input[type="tel"], .team-editor-fields select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px;
}
.team-editor-fields .step-hint{ color:rgba(255,253,249,0.5); margin:-4px 0 2px; }
.team-checkbox-label{ display:flex; align-items:center; gap:8px; text-transform:none !important; font-weight:600 !important; }
.team-editor-actions{ display:flex; gap:8px; margin-top:10px; }
.weekly-grid{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.override-add-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.override-add-row input, .override-add-row select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px;
}
.override-add-row input[type="text"]{ flex:1; min-width:120px; }
.override-add-row button{ background:var(--brass); color:var(--ink); border:none; border-radius:var(--radius-sm); padding:8px 14px; font-size:13px; font-weight:700; }

/* ---------------- Calendar tab — per-therapist day grid ---------------- */
:root{
  --cal-booking:#3E7C59; --cal-booking-bg:#E8F3EC;
  --cal-break:#B99257;   --cal-break-bg:#FBF0DE;
  --cal-meeting:#2E6B78; --cal-meeting-bg:#E4F0F2;
  --cal-walkin:#3E5C99;  --cal-walkin-bg:#E7ECF7;
  --cal-other:#6B6560;   --cal-other-bg:#EDEBE7;
  /* Guest-booking lifecycle colors, per Vishal (2026-09-29) — replaces
     the old flat green for every booking regardless of progress.
     Text is always solid black on these (his explicit instruction),
     not a tinted color like the type swatches above. */
  --cal-upcoming-bg:#F5DE8A;  --cal-upcoming-border:#C9A227;   /* Yellow — not started yet */
  --cal-ongoing-bg:#A9CDEB;   --cal-ongoing-border:#3E7CB1;    /* Blue — started/in process */
  --cal-cancelled-bg:#EFA6A0; --cal-cancelled-border:#B23A2E;  /* Red — cancelled */
  --cal-done-bg:#F6C9A0;      --cal-done-border:#D98F4E;       /* Peach — completed */
}
.calendar-toolbar{ align-items:center; }
.cal-nav-btn{ width:34px; padding:6px 0; font-size:16px; line-height:1; }
.calendar-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 16px; }
.cal-legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.cal-swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.cal-swatch-upcoming{ background:var(--cal-upcoming-border); }
.cal-swatch-ongoing{ background:var(--cal-ongoing-border); }
.cal-swatch-cancelled{ background:var(--cal-cancelled-border); }
.cal-swatch-done{ background:var(--cal-done-border); }
.cal-swatch-break{ background:var(--cal-break); }
.cal-swatch-meeting{ background:var(--cal-meeting); }
.cal-swatch-walkin{ background:var(--cal-walkin); }
.cal-swatch-other{ background:var(--cal-other); }
.cal-swatch-off{ background:repeating-linear-gradient(45deg, rgba(18,38,42,0.18), rgba(18,38,42,0.18) 2px, transparent 2px, transparent 5px); border:1px solid var(--line); }

.calendar-grid-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
.calendar-grid{ display:grid; position:relative; min-width:600px; }
.cal-header-cell{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:var(--sand); border-bottom:1px solid var(--line); border-inline-start:1px solid var(--line);
  padding:4px 6px; position:sticky; top:0; z-index:5;
}
.cal-corner{ background:var(--sand); border-inline-start:none; }
/* Staff column header colors (2026-09-29, Vishal: "rest you set by
   yourself") — the role subtitle used to be var(--ink-soft), a
   translucent dark teal that read as a faint blue against the sand
   header background; switched to the brand copper accent instead so
   it's clearly a secondary label, not an odd stray color. */
.cal-header-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.cal-header-role{ font-size:10.5px; color:var(--brass-dark); font-weight:600; }
.cal-header-unassigned .cal-header-name{ font-style:italic; color:var(--ink-soft); font-weight:600; }
.cal-time-label{
  font-size:10.5px; color:var(--ink-soft); text-align:end; padding-inline-end:8px; padding-top:2px;
  border-top:1px solid var(--line);
}
.cal-col{
  position:relative; border-inline-start:1px solid var(--line);
  background-image:linear-gradient(var(--line) 1px, transparent 1px);
  background-size:100% 64px; background-position:top;
}
.cal-col-unassigned{ background-color:rgba(185,146,87,0.05); }
.cal-off-block{
  position:absolute; left:0; right:0; z-index:1;
  background-image:repeating-linear-gradient(45deg, rgba(18,38,42,0.045), rgba(18,38,42,0.045) 6px, rgba(18,38,42,0.09) 6px, rgba(18,38,42,0.09) 12px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:10.5px; color:var(--ink-soft); font-weight:600; letter-spacing:0.02em; padding:4px;
}
.cal-click-surface{ position:absolute; inset:0; z-index:2; cursor:pointer; }
.cal-item{
  position:absolute; left:3px; right:3px; z-index:3; border-radius:6px; padding:2px 5px;
  display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  box-shadow:0 2px 6px -3px rgba(18,38,42,0.4); border-inline-start:3px solid transparent;
}
.cal-item-time{ font-size:9px; font-weight:700; opacity:0.85; line-height:1.15; }
.cal-item-title{ font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-item-meta{ font-size:9.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0.85; }
.cal-item-booking{ background:var(--cal-booking-bg); color:var(--cal-booking); border-inline-start-color:var(--cal-booking); }
/* These come after .cal-item-booking and win on source order (same
   0,0,1,0 specificity) since every real booking now carries both
   classes together — see calBookingStatusClass() in staff.js. Text is
   forced to solid black on all four, per Vishal's explicit instruction,
   overriding the tinted-text pattern the type swatches above use. */
.cal-item-status-upcoming{ background:var(--cal-upcoming-bg); color:#000; border-inline-start-color:var(--cal-upcoming-border); }
.cal-item-status-ongoing{ background:var(--cal-ongoing-bg); color:#000; border-inline-start-color:var(--cal-ongoing-border); }
.cal-item-status-cancelled{ background:var(--cal-cancelled-bg); color:#000; border-inline-start-color:var(--cal-cancelled-border); }
.cal-item-status-done{ background:var(--cal-done-bg); color:#000; border-inline-start-color:var(--cal-done-border); }
.cal-item-status-cancelled .cal-item-title{ text-decoration:line-through; }
.cal-item-break{ background:var(--cal-break-bg); color:var(--cal-break); border-inline-start-color:var(--cal-break); }
.cal-item-meeting{ background:var(--cal-meeting-bg); color:var(--cal-meeting); border-inline-start-color:var(--cal-meeting); }
.cal-item-walk_in{ background:var(--cal-walkin-bg); color:var(--cal-walkin); border-inline-start-color:var(--cal-walkin); }
.cal-item-other{ background:var(--cal-other-bg); color:var(--cal-other); border-inline-start-color:var(--cal-other); }

/* The block-add/view modal sits on the light .modal-card, unlike the
   Team editor's dark card — reusing .team-editor-fields for layout
   only, so its label color needs overriding back to the normal
   light-page ink-soft rather than the dark-card near-white it uses
   there (see the comment on .team-editor-fields label above). */
.cal-block-modal{ text-align:start; }
.cal-block-modal .team-editor-fields label{ color:var(--ink-soft); text-transform:none; font-weight:600; }
.cal-block-fields{ margin-bottom:10px; }
.cal-block-fields input, .cal-block-fields select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; width:100%;
}
.cal-block-fields input:disabled, .cal-block-fields select:disabled{ background:var(--sand); color:var(--ink-soft); cursor:not-allowed; }
.cal-block-modal .details{ margin-bottom:14px; }

/* Booking edit log (2026-10-01, admin-only, Users tab) — a plain,
   wider modal since it's a scrollable list of log rows, not a form. */
.edit-log-modal{ text-align:start; max-width:640px; }
.edit-log-list{ max-height:50vh; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:6px; }
.edit-log-row{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; line-height:1.6; }
.edit-log-row:last-child{ border-bottom:none; }
.edit-log-row .elr-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-weight:700; color:var(--ink); }
.edit-log-row .elr-meta{ color:var(--ink-soft); font-size:12px; margin-top:2px; }
.edit-log-row .elr-changes{ margin-top:6px; color:var(--ink); }
.edit-log-row .elr-changes div{ margin-top:2px; }
.edit-log-override-badge{
  display:inline-block; background:#FBE5E0; color:#A6432E; border-radius:999px; padding:2px 9px;
  font-size:11px; font-weight:700; letter-spacing:0.02em; white-space:nowrap;
}
.edit-log-empty{ padding:18px; text-align:center; color:var(--ink-soft); font-size:13.5px; }

/* Booking-details side panel — opened by clicking a guest booking on
   the Calendar tab. Deliberately docked to the right edge and full
   height (Google-Calendar-style) rather than the centered pop-up the
   block modal above uses, so it reads as "editing this one booking
   alongside the calendar" rather than a blocking dialog. */
/* justify-content:flex-end is a LOGICAL direction, not a physical
   one — the browser already docks this to the right under the
   default ltr document direction and to the left on its own once
   i18n.js flips <html dir="rtl"> for Arabic, with no extra rule
   needed here (an earlier version of this file fought that
   automatic flip with an explicit override and ended up pinning the
   panel to the right in both languages — removed). */
.cal-side-overlay{ justify-content:flex-end; padding:0; background:rgba(18,38,42,0.35); }
.cal-side-panel{
  max-width:380px; width:100%; height:100%; border-radius:0; text-align:start;
  overflow-y:auto; box-shadow:-30px 0 60px -30px rgba(0,0,0,0.35); position:relative;
  animation:calSidePanelIn 0.18s ease-out;
}
@keyframes calSidePanelIn{ from{ transform:translateX(24px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
html[lang="ar"] .cal-side-panel{ animation-name:calSidePanelInRtl; }
@keyframes calSidePanelInRtl{ from{ transform:translateX(-24px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.cal-side-close{
  position:absolute; top:14px; inset-inline-end:14px; background:none; border:none; font-size:16px;
  color:var(--ink-soft); cursor:pointer; padding:6px; line-height:1;
}
.cal-side-close:hover{ color:var(--ink); }
.cal-side-panel h2{ font-size:19px; margin-inline-end:30px; }
.cal-side-panel .cal-block-fields select, .cal-side-panel .cal-block-fields input{ width:100%; }

/* The two WhatsApp buttons on the Calendar booking panel — side by
   side, smaller than the full-width Save button below them so they
   read as a secondary pair of actions, not the primary one. */
.cal-wa-actions{ display:flex; gap:8px; margin-top:14px; }
.cal-wa-btn{ width:auto; flex:1; margin-top:0; background:#1FA855; color:#fff; font-size:13px; padding:11px 10px; }
.cal-wa-btn:hover{ background:#189146; }
.cal-wa-hint{ margin:8px 0 0; }

/* "A new booking just came in" toast — fixed to a corner so it's
   visible regardless of which staff tab is currently open, and stacks
   if more than one comes in close together. Sits above the
   notification bell (below), which lives in the same corner. */
.new-booking-toast-wrap{
  position:fixed; bottom:86px; inset-inline-end:18px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; max-width:320px;
}
.new-booking-toast{
  background:var(--ink); color:#fff; border-radius:var(--radius-sm); padding:12px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25); font-size:13.5px; line-height:1.5; cursor:pointer;
  animation:newBookingToastIn .25s ease;
}
.new-booking-toast strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--brass-light); margin-bottom:3px; }
@keyframes newBookingToastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* Persistent notification bell (2026-09-29) — bottom-right corner
   (inset-inline-end so it mirrors correctly in Arabic/RTL, same
   convention as the toast above it), visible across every staff tab.
   Hidden entirely until the first successful count fetch, so it never
   flashes empty before login/data is ready. */
.notif-bell-btn{
  position:fixed; bottom:18px; inset-inline-end:18px; z-index:9998;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.28);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  padding:0;
}
.notif-bell-btn:hover{ background:var(--brass-dark); }
.notif-bell-icon{ line-height:1; }
.notif-bell-badge{
  position:absolute; top:-4px; inset-inline-end:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--ember); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--ink);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------------- Users tab: select a user, one editor (2026-10-08) ---------------- */
.users-layout{ display:grid; grid-template-columns:minmax(210px, 290px) 1fr; gap:16px; align-items:start; }
.users-col-title{ font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass-dark); margin-bottom:8px; }
.users-list{ display:flex; flex-direction:column; gap:8px; }
.user-row{
  display:flex; flex-direction:column; gap:2px; text-align:start; width:100%; cursor:pointer;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-md); padding:10px 14px;
  font-family:inherit; color:var(--ink);
}
.user-row:hover{ border-color:var(--brass); }
.user-row.selected{ background:var(--sand); border-color:var(--brass); box-shadow:inset 4px 0 0 var(--brass); }
html[dir="rtl"] .user-row.selected, html[lang="ar"] .user-row.selected{ box-shadow:inset -4px 0 0 var(--brass); }
.user-row .ur-name{ font-weight:700; font-size:14.5px; }
.user-row .ur-meta{ font-size:12px; color:var(--ink-soft); }
.user-editor{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-card); min-height:120px; }
.ue-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.ue-title{ margin:0; font-size:18px; color:var(--ink); }
.ue-saved{ color:var(--sage); font-size:12.5px; font-weight:700; }
.ue-section{ padding:12px 0; border-top:1px solid var(--line); }
.ue-section:first-of-type{ border-top:none; }
.ue-section-title{ font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass-dark); margin-bottom:8px; }
.ue-checks{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.ue-checks label, .ue-reports-list label{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink); }
.ue-reports-list{ display:flex; flex-wrap:wrap; gap:6px 28px; margin-top:8px; }
.ue-report-group{ display:flex; flex-direction:column; gap:5px; min-width:200px; }
.ue-report-group-title{ font-size:12px; font-weight:700; color:var(--ink-soft); }
.ue-disabled .ue-reports-list{ opacity:0.45; }
.ue-danger{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.users-create-title{ margin-top:22px; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass-dark); }
@media (max-width:720px){ .users-layout{ grid-template-columns:1fr; } }

/* ---------------- Reports: limited-reports accounts + Daily Revenue Report ---------------- */
#viewReports.restricted-reports #toggleColumnsBtn,
#viewReports.restricted-reports #columnsPanel,
#viewReports.restricted-reports .report-presets-hint,
#viewReports.restricted-reports #managePresetsBtn,
#viewReports.restricted-reports #viewEditLogBtn{ display:none !important; }
#viewReports.daily-mode #reportsOnlyControls > .staff-toolbar,
#viewReports.daily-mode #rangePresets,
#viewReports.daily-mode #columnsPanel,
#viewReports.daily-mode #viewEditLogBtn,
#viewReports.daily-mode #reportSummary,
#viewReports.daily-mode #reportList{ display:none !important; }
.dr-table-wrap{ overflow-x:auto; max-width:100%; padding-bottom:6px; }
.dr-table-wrap table{ min-width:1100px; }

/* Invoice no. box in the booking panel: this panel's other fields show their name as the dropdown's first option, a text box has no such option, so its label is made visible. */
#calBookingPanel .team-editor-fields label.cal-invoice-label{ color:var(--ink-soft); text-transform:none; font-weight:600; }

/* Daily Revenue Report: bookings still missing payment mode / invoice no. (screen only — not copied into the email) */
#drTableWrap td.dr-missing{ background:#FFF2CC; }