/* =====================================================================
   CRM theme — design tokens + Bootstrap 5.3 remap.
   Source of truth: docs/design/design-system-tokens.css (Claude Design).
   Sizes are rem (design px / 16) so the admin font-scale cookie works.
   Load order: bootstrap.rtl.min.css → style-rtl.css → theme.css
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand & accent */
  --crm-black: #000000;
  --near-black: #17171c;
  --ink: #212121;
  --deep-green: #003c33;
  --dark-navy: #071829;
  --action-blue: #1863dc;
  --coral: #ff7759;
  --coral-soft: #ffad9b;

  /* Surface */
  --canvas: #ffffff;
  --soft-stone: #eeece7;
  --pale-green: #edfce9;
  --pale-blue: #f1f5ff;

  /* Text & rules */
  --body-muted: #616161;
  --muted: #93939f;
  --slate: #75758a;
  --hairline: #d9d9dd;
  --border-light: #e5e7eb;
  --card-border: #f2f2f2;

  /* Semantic state */
  --focus-blue: #4c6ee6;
  --form-focus: #9b60aa;
  --error: #b30000;

  /* Semantic aliases */
  --surface-page: var(--canvas);
  --surface-card: var(--canvas);
  --surface-stone: var(--soft-stone);
  --surface-product: var(--near-black);
  --text-body: var(--ink);
  --text-strong: var(--crm-black);
  --text-muted: var(--body-muted);
  --text-meta: var(--muted);
  --text-tertiary: var(--slate);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, .62);
  --text-link: var(--action-blue);
  --text-error: var(--error);
  --border-rule: var(--hairline);
  --border-card: var(--card-border);
  --border-on-dark: rgba(255, 255, 255, .18);
  --border-input: var(--hairline);
  --border-input-focus: var(--form-focus);
  --action-primary: var(--near-black);
  --action-primary-hover: #000000;
  --on-action-primary: #ffffff;
  --ring-focus: var(--focus-blue);

  /* Type */
  --font-display: Heebo, "Noto Sans Hebrew", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-ui: Heebo, "Noto Sans Hebrew", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans Hebrew", Arial, ui-monospace, monospace;
  --text-80: 5rem;
  --text-72: 4.5rem;
  --text-48: 3rem;
  --text-32: 2rem;
  --text-24: 1.5rem;
  --text-18: 1.125rem;
  --text-16: 1rem;
  --text-14: .875rem;
  --text-12: .75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --leading-tight: 1.2;
  --leading-heading: 1.3;
  --leading-lead: 1.4;
  --leading-body: 1.5;
  --leading-button: 1.71;
  --tracking-heading: -0.03em;
  --tracking-card: -0.01em;
  --tracking-mono: 0.02em;

  /* Space (8px base) */
  --space-xs: .375rem;
  --space-sm: .5rem;
  --space-md: .75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-xxl: 2rem;
  --space-40: 2.5rem;
  --space-56: 3.5rem;
  --space-section: 5rem;

  /* Radius */
  --radius-xs: .25rem;
  --radius-sm: .5rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.875rem;
  --radius-pill: 2rem;
  --radius-full: 9999px;
  --radius-input: var(--radius-xs);
  --radius-card: var(--radius-sm);
  --radius-cta: var(--radius-pill);
  --radius-filter: var(--radius-xl);

  /* Motion & focus */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ring-focus);
}

@media (max-width: 768px) {
  :root { --text-72: 3.25rem; --text-48: 2.125rem; --text-32: 1.625rem; --text-24: 1.3125rem; --text-18: 1.0625rem; --space-section: 3rem; }
}
@media (max-width: 640px) {
  :root { --text-72: 2.75rem; --text-48: 1.75rem; }
}

/* ---------- 2. Bootstrap variable remap ---------- */
:root, [data-bs-theme="light"] {
  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--text-body);
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--text-16);
  --bs-body-line-height: var(--leading-body);
  --bs-heading-color: var(--text-strong);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-meta);
  --bs-tertiary-bg: var(--surface-stone);
  --bs-secondary-bg: var(--surface-stone);
  --bs-border-color: var(--border-rule);
  --bs-border-color-translucent: var(--border-rule);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 24, 99, 220;
  --bs-link-hover-color: var(--near-black);
  --bs-link-hover-color-rgb: 23, 23, 28;
  --bs-primary: var(--near-black);
  --bs-primary-rgb: 23, 23, 28;
  --bs-success: var(--deep-green);
  --bs-success-rgb: 0, 60, 51;
  --bs-danger: var(--error);
  --bs-danger-rgb: 179, 0, 0;
  --bs-light: var(--surface-stone);
  --bs-light-rgb: 238, 236, 231;
  --bs-dark: var(--near-black);
  --bs-dark-rgb: 23, 23, 28;
  --bs-focus-ring-color: rgba(76, 110, 230, .5);
  --bs-focus-ring-width: 2px;
}

/* ---------- 3. Base ---------- */
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-card);
}
strong, b, .fw-bold, .fw-bolder, .fw-semibold { font-weight: var(--weight-medium); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
a:hover { opacity: .72; }
:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; }
::selection { background: var(--coral-soft); color: var(--crm-black); }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.text-primary { color: var(--text-body) !important; }
.bg-primary { background-color: var(--near-black) !important; }
.bg-light { background-color: var(--surface-stone) !important; }
.text-muted { color: var(--text-muted) !important; }
.small, small { font-size: var(--text-14); }

/* ---------- 4. Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--font-ui);
  --bs-btn-font-size: var(--text-14);
  --bs-btn-font-weight: var(--weight-medium);
  --bs-btn-line-height: var(--leading-button);
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-border-radius: var(--radius-cta);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: var(--focus-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(.985); }
.btn:disabled, .btn.disabled { opacity: .4; }

.btn-primary {
  --bs-btn-bg: var(--action-primary);
  --bs-btn-border-color: var(--action-primary);
  --bs-btn-color: var(--on-action-primary);
  --bs-btn-hover-bg: var(--action-primary-hover);
  --bs-btn-hover-border-color: var(--action-primary-hover);
  --bs-btn-hover-color: var(--on-action-primary);
  --bs-btn-active-bg: var(--action-primary-hover);
  --bs-btn-active-border-color: var(--action-primary-hover);
  --bs-btn-active-color: var(--on-action-primary);
  --bs-btn-disabled-bg: var(--action-primary);
  --bs-btn-disabled-border-color: var(--action-primary);
  --bs-btn-disabled-color: var(--on-action-primary);
}

/* pill-outline: the design's secondary action */
.btn-outline {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--near-black);
  --bs-btn-color: var(--near-black);
  --bs-btn-hover-bg: var(--soft-stone);
  --bs-btn-hover-border-color: var(--near-black);
  --bs-btn-hover-color: var(--near-black);
  --bs-btn-active-bg: var(--soft-stone);
  --bs-btn-active-border-color: var(--near-black);
  --bs-btn-active-color: var(--near-black);
  --bs-btn-disabled-color: var(--near-black);
  --bs-btn-disabled-border-color: var(--near-black);
  --bs-btn-font-weight: var(--weight-regular);
  --bs-btn-border-radius: var(--radius-filter);
  min-width: 4.5rem;
}
.btn-group .btn-outline { min-width: 0; }
.btn-outline.btn-outline-danger { --bs-btn-border-color: var(--error); --bs-btn-color: var(--error); --bs-btn-hover-bg: #fbeaea; --bs-btn-hover-border-color: var(--error); --bs-btn-hover-color: var(--error); --bs-btn-active-bg: #fbeaea; --bs-btn-active-color: var(--error); }
/* legacy classes still present in JS-emitted markup get the same treatment */
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-light, .btn-info, .btn-warning {
  --bs-btn-bg: transparent; --bs-btn-border-color: var(--near-black); --bs-btn-color: var(--near-black);
  --bs-btn-hover-bg: var(--soft-stone); --bs-btn-hover-border-color: var(--near-black); --bs-btn-hover-color: var(--near-black);
  --bs-btn-active-bg: var(--soft-stone); --bs-btn-active-border-color: var(--near-black); --bs-btn-active-color: var(--near-black);
  --bs-btn-font-weight: var(--weight-regular); --bs-btn-border-radius: var(--radius-filter);
}
.btn-outline-danger {
  --bs-btn-bg: transparent; --bs-btn-border-color: var(--error); --bs-btn-color: var(--error);
  --bs-btn-hover-bg: #fbeaea; --bs-btn-hover-border-color: var(--error); --bs-btn-hover-color: var(--error);
  --bs-btn-active-bg: #fbeaea; --bs-btn-active-color: var(--error); --bs-btn-border-radius: var(--radius-filter);
}
/* filled destructive pill: main.js showConfirmationModal() swaps btn-primary/btn-danger/btn-success on #confirmationModalConfirmBtn */
.btn-danger {
  --bs-btn-bg: var(--error); --bs-btn-border-color: var(--error); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8f0000; --bs-btn-hover-border-color: #8f0000; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8f0000; --bs-btn-active-border-color: #8f0000; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--error); --bs-btn-disabled-border-color: var(--error); --bs-btn-disabled-color: #fff;
}
.btn-success { --bs-btn-bg: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-color: var(--on-action-primary); --bs-btn-hover-bg: var(--action-primary-hover); --bs-btn-hover-border-color: var(--action-primary-hover); --bs-btn-hover-color: var(--on-action-primary); --bs-btn-active-bg: var(--action-primary-hover); --bs-btn-active-border-color: var(--action-primary-hover); --bs-btn-active-color: var(--on-action-primary); --bs-btn-font-weight: var(--weight-medium); --bs-btn-border-radius: var(--radius-cta); }
.btn-link {
  --bs-btn-color: var(--text-body); --bs-btn-hover-color: var(--crm-black); --bs-btn-font-weight: var(--weight-regular);
  --bs-btn-font-size: var(--text-16); --bs-btn-padding-x: 0; --bs-btn-padding-y: .5rem; --bs-btn-border-radius: var(--radius-xs);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.btn-link:hover { opacity: .72; }
/* on-dark outline (navbar font-size controls) */
.btn-outline-light { --bs-btn-border-color: var(--border-on-dark); --bs-btn-color: var(--text-on-dark); --bs-btn-hover-bg: rgba(255,255,255,.08); --bs-btn-hover-border-color: var(--border-on-dark); --bs-btn-hover-color: var(--text-on-dark); --bs-btn-active-bg: rgba(255,255,255,.08); --bs-btn-active-color: var(--text-on-dark); --bs-btn-font-weight: var(--weight-regular); --bs-btn-border-radius: var(--radius-filter); }
.btn-close { --bs-btn-close-focus-shadow: none; }
/* Size modifiers come after every colour variant so they win the cascade:
   every .btn shares one height per size, whichever colour it is. */
.btn-lg { --bs-btn-font-size: var(--text-16); --bs-btn-padding-y: .875rem; --bs-btn-padding-x: 1.75rem; --bs-btn-border-radius: var(--radius-cta); }
.btn-sm { --bs-btn-font-size: var(--text-14); --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-border-radius: var(--radius-filter); }

/* ---------- 5. Cards ---------- */
.card {
  --bs-card-bg: var(--surface-card);
  --bs-card-border-color: var(--border-rule);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-card-cap-bg: var(--surface-card);
  --bs-card-cap-color: var(--text-body);
  --bs-card-spacer-y: var(--space-xl);
  --bs-card-spacer-x: var(--space-xl);
  --bs-card-cap-padding-y: var(--space-lg);
  --bs-card-cap-padding-x: var(--space-xl);
  --bs-card-title-color: var(--text-strong);
  box-shadow: none;
}
.card-header { border-bottom: 1px solid var(--border-rule); }
.card-title { font-size: var(--text-24); line-height: var(--leading-heading); }
.crm-stone { background: var(--surface-stone); border: 0; border-radius: var(--radius-xs); }
.crm-dark { background: var(--surface-product); color: var(--text-on-dark); }
.crm-dark .text-muted { color: var(--text-on-dark-muted) !important; }
.crm-dark h1, .crm-dark h2, .crm-dark h3, .crm-dark h4, .crm-dark .h1, .crm-dark .h2, .crm-dark .h3, .crm-dark .h4 { color: var(--text-on-dark); }

/* ---------- 6. Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-body);
  --bs-table-border-color: var(--border-rule);
  --bs-table-hover-bg: var(--surface-stone);
  --bs-table-hover-color: var(--text-body);
  --bs-table-striped-bg: var(--surface-stone);
}
.table > :not(caption) > * > * { padding: var(--space-md) var(--space-lg); border-bottom-width: 1px; }
.table > thead > tr > th, table.table > thead > tr > th {
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--text-14);
  font-weight: var(--weight-regular);
  border-bottom: 1px solid var(--border-rule);
}
.table-responsive { border: 0; }
.card > .card-body.p-0 > .table-responsive > .table { margin-bottom: 0; }

/* ---------- 7. Forms ---------- */
.form-control, .form-select {
  --bs-border-color: var(--border-input);
  border-radius: var(--radius-input);
  padding: .625rem .875rem;
  font-size: var(--text-16);
  color: var(--text-body);
  background-color: var(--canvas);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-select { padding-inline-end: 2.25rem; }
.form-control:focus, .form-select:focus { border-color: var(--border-input-focus); box-shadow: none; }
.form-control-lg, .form-select-lg { padding: .75rem .875rem; font-size: var(--text-16); border-radius: var(--radius-input); }
.form-select-lg { padding-inline-end: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .375rem .625rem; font-size: var(--text-14); border-radius: var(--radius-input); }
.form-select-sm { padding-inline-end: 2rem; }
.form-label { font-size: var(--text-14); color: var(--text-muted); font-weight: var(--weight-regular); margin-bottom: var(--space-sm); }
::placeholder { color: var(--text-meta); opacity: 1; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--error); }
.invalid-feedback, .error-validation { color: var(--text-error); }
.form-check-input { border-color: var(--border-input); border-radius: var(--radius-xs); width: 1.25rem; height: 1.25rem; margin-top: .125rem; }
/* Bootstrap's checkbox gutter is a flat 1.5em sized for its own 1em box. This
   system's checkbox is 1.25rem (1.5rem on coarse pointers, where it would eat
   the gutter whole and leave the label flush against the box), so size the
   gutter from the real box plus a spacing token. Switches keep Bootstrap's
   wider gutter and take their gap from .form-switch .form-check-label. */
.form-check:not(.form-switch) { padding-inline-start: calc(1.25rem + var(--space-sm)); }
.form-check:not(.form-switch) .form-check-input { margin-inline-start: calc(-1.25rem - var(--space-sm)); }
.form-check-input:checked { background-color: var(--near-black); border-color: var(--near-black); }
.form-check-input:focus { border-color: var(--near-black); box-shadow: none; }
.form-switch .form-check-input { width: 2.75rem; height: 1.625rem; border-radius: var(--radius-full); background-color: var(--hairline); border: 0; margin-top: 0; }
.form-switch .form-check-input:checked { background-color: var(--near-black); }
.form-switch .form-check-label { padding-inline-start: .5rem; }
.input-group-text { background: var(--surface-stone); border-color: var(--border-input); color: var(--text-muted); font-size: var(--text-14); border-radius: var(--radius-input); }
.required::after { color: var(--text-error); font-weight: var(--weight-regular); }

/* ---------- 8. Badges → status pills ---------- */
.badge {
  --bs-badge-font-size: var(--text-12);
  --bs-badge-font-weight: var(--weight-regular);
  --bs-badge-padding-y: .1875rem;
  --bs-badge-padding-x: .625rem;
  --bs-badge-border-radius: var(--radius-filter);
  --bs-badge-color: var(--text-body);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  background: transparent !important;
  border: 1px solid var(--border-rule);
  color: var(--text-body) !important;
  /* no direction:ltr here: badges carry Hebrew ("פג תוקף"); LTR comes only from .crm-mono */
}
.badge.badge-positive, .badge.bg-success { border-color: var(--deep-green); color: var(--deep-green) !important; }
.badge.badge-error, .badge.bg-danger { border-color: var(--error); color: var(--error) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-info { color: var(--text-meta) !important; }
/* Tag-color badges (admins choose a color per tag in tags.php; dashboard renders badge bg-{color}).
   DECISION A pending: (1) keep hue as border+text, or (2) fully neutral. Default below = (1). */
.badge[class*="bg-"] { background: transparent !important; }
.badge.bg-primary  { border-color: var(--action-blue); color: var(--action-blue) !important; }
.badge.bg-info     { border-color: #2a7f9e; color: #2a7f9e !important; }
.badge.bg-warning  { border-color: #9a6a00; color: #9a6a00 !important; }
.badge.bg-dark     { border-color: var(--near-black); color: var(--near-black) !important; }
.badge.bg-secondary, .badge.bg-light { border-color: var(--border-rule); color: var(--text-meta) !important; }

/* ---------- 9. Alerts, modals, dropdowns, accordion, spinner ---------- */
.alert { --bs-alert-border-radius: var(--radius-xs); --bs-alert-padding-y: var(--space-lg); --bs-alert-padding-x: var(--space-xl); border: 0; background: var(--surface-stone); color: var(--text-body); }
.alert-danger { color: var(--text-error); }
.alert-success { color: var(--deep-green); }
.floating-alert { box-shadow: none; border: 1px solid var(--border-rule); }
.modal { --bs-modal-border-radius: var(--radius-sm); --bs-modal-border-color: var(--border-rule); --bs-modal-box-shadow: none; --bs-modal-header-border-color: var(--border-rule); --bs-modal-footer-border-color: var(--border-rule); --bs-modal-padding: var(--space-xl); }
.modal-title { font-size: var(--text-24); }
.dropdown-menu { --bs-dropdown-border-color: var(--border-rule); --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-box-shadow: none; --bs-dropdown-link-hover-bg: var(--surface-stone); --bs-dropdown-link-active-bg: var(--surface-stone); --bs-dropdown-link-active-color: var(--text-body); --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-item-padding-x: var(--space-lg); --bs-dropdown-font-size: var(--text-14); }
.accordion { --bs-accordion-border-color: var(--border-rule); --bs-accordion-border-radius: var(--radius-sm); --bs-accordion-inner-border-radius: calc(var(--radius-sm) - 1px); --bs-accordion-btn-bg: var(--canvas); --bs-accordion-active-bg: var(--canvas); --bs-accordion-active-color: var(--text-body); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-padding-y: var(--space-lg); --bs-accordion-btn-padding-x: var(--space-xl); --bs-accordion-body-padding-y: var(--space-xl); --bs-accordion-body-padding-x: var(--space-xl); }
.accordion-button { font-size: var(--text-18); gap: var(--space-lg); }
.accordion-button:not(.collapsed) { border-bottom: 1px solid var(--border-rule); }
#summaryAccordion .accordion-button::after { display: none; }
.accordion-item { border: 1px solid var(--border-rule); }
.accordion-body { background: var(--surface-stone); }
.spinner-border { color: var(--text-meta); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border-rule); --bs-nav-tabs-link-active-color: var(--text-body); --bs-nav-tabs-link-active-border-color: var(--border-rule) var(--border-rule) var(--canvas); --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text-body); }
.pagination { --bs-pagination-color: var(--text-body); --bs-pagination-border-color: var(--border-rule); --bs-pagination-active-bg: var(--near-black); --bs-pagination-active-border-color: var(--near-black); --bs-pagination-hover-bg: var(--surface-stone); --bs-pagination-focus-box-shadow: none; }
.list-group { --bs-list-group-border-color: var(--border-rule); --bs-list-group-border-radius: var(--radius-sm); --bs-list-group-active-bg: var(--near-black); --bs-list-group-active-border-color: var(--near-black); }
.tooltip { --bs-tooltip-bg: var(--near-black); --bs-tooltip-border-radius: var(--radius-xs); }

/* progress bars: start.php stage bar (#progressBar) and countdown #countdown-progress (JS swaps bg-success/warning/danger) */
.progress { --bs-progress-height: .375rem; --bs-progress-bg: var(--surface-stone); --bs-progress-border-radius: var(--radius-full); --bs-progress-bar-bg: var(--near-black); --bs-progress-box-shadow: none; }
.progress-bar.bg-success { background-color: var(--deep-green) !important; }
.progress-bar.bg-warning { background-color: var(--coral) !important; }
.progress-bar.bg-danger  { background-color: var(--error) !important; }

/* datepicker */
.datepicker { border: 1px solid var(--border-rule); border-radius: var(--radius-sm); box-shadow: none; font-family: var(--font-ui); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active { background: var(--near-black) !important; background-image: none !important; border-radius: var(--radius-xs); }
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--surface-stone); }
.datepicker table tr td.today { background: var(--pale-green) !important; background-image: none !important; }

/* ---------- 10. Design utilities used by rewritten markup ---------- */
.crm-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); direction: ltr; unicode-bidi: isolate; text-align: right; }

.crm-page-head { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--border-rule); }
.crm-page-head > div:first-child { min-width: 0; }
.crm-page-head__title { margin: 0; font-family: var(--font-display); font-size: var(--text-48); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); }
.crm-page-head__sub { margin: var(--space-sm) 0 0; font-size: var(--text-14); color: var(--text-muted); }
.crm-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 768px) { .crm-page-head { align-items: center; } .crm-page-head__title { font-size: var(--text-32); } }

.crm-wordmark { display: grid; gap: 2px; text-align: center; }
.crm-wordmark__name { font-family: var(--font-display); font-size: 1.625rem; letter-spacing: -0.02em; color: var(--text-strong); }
.crm-wordmark__logo { display: block; margin-inline: auto; width: 180px; max-width: 100%; height: auto; }
.crm-wordmark__sub { font-size: var(--text-14); color: var(--text-muted); }

.crm-auth-frame { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-40) var(--space-lg); background: var(--surface-product); }
.crm-auth-frame-stone { min-height: 100vh; padding: var(--space-section) var(--space-lg); background: var(--surface-stone); }
.crm-auth-panel { width: 100%; max-width: 460px; margin-inline: auto; background: var(--canvas); border-radius: var(--radius-lg); padding: var(--space-xxl); display: grid; gap: var(--space-xl); }
.crm-auth-panel--narrow { max-width: 420px; }
.crm-auth-panel h1, .crm-auth-panel h2, .crm-auth-panel .crm-auth-title { margin: 0; font-size: var(--text-32); line-height: var(--leading-tight); letter-spacing: var(--tracking-card); text-align: center; }
.crm-auth-panel .step, .crm-auth-panel form { display: grid; gap: var(--space-xl); }
/* A run of related fields is ONE row of the panel grid, with its own tighter
   rhythm: 16px between fields against the label's 8px, so a label reads as
   belonging to the input beneath it rather than floating between two. The
   panel's 24px still separates the stack from the blocks around it -- the
   captcha row, the buttons -- which is why this is a wrapper and not a
   smaller gap on the form itself. */
.crm-field-stack { display: grid; gap: var(--space-lg); }
.crm-auth-panel .step:not(.active) { display: none !important; }
.crm-auth-panel .step.active { display: grid !important; }
.crm-auth-panel .step .mb-2, .crm-auth-panel .step .mb-3, .crm-auth-panel .step .mb-4,
.crm-auth-panel form .mb-2, .crm-auth-panel form .mb-3, .crm-auth-panel form .mb-4 { margin-bottom: 0 !important; }
.crm-auth-panel .d-grid { gap: var(--space-md); }
/* auth panels: links are near-black + underline (design base rule); admin tables keep the blue link color */
.crm-auth-panel a:not(.btn) { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }
.crm-auth-panel a:not(.btn):hover { color: var(--crm-black); }
.crm-auth-panel .border-top { border-top: 1px solid var(--border-rule) !important; padding-top: var(--space-lg) !important; margin-top: 0 !important; text-align: center; font-size: var(--text-14); color: var(--text-muted); }
/* Turnstile widget is 300px wide; the auth panel's inner width is ~356px, so the label stacks ABOVE the widget.
   Cannot be verified locally (development mode skips Turnstile): verify on production after first deploy. */
.crm-turnstile-row { padding: 0; display: grid; gap: var(--space-sm); justify-items: center; font-size: var(--text-14); color: var(--text-muted); }
.crm-turnstile-row .cf-turnstile { max-width: 100%; }

.crm-code-boxes { display: flex; gap: var(--space-md); direction: ltr; justify-content: center; }
.crm-code-boxes input { width: 3.5rem; height: 4rem; text-align: center; font-family: var(--font-mono); font-size: var(--text-24); border: 1px solid var(--border-input); border-radius: var(--radius-input); background: var(--canvas); outline: none; }
.crm-code-boxes input:focus { border-color: var(--border-input-focus); }

.crm-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.625rem; height: 1.625rem; padding: 0 .375rem; border-radius: var(--radius-full); background: var(--action-primary); color: var(--on-action-primary); font-family: var(--font-mono); font-size: var(--text-12); }
.crm-count-error { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; background: var(--error) !important; border: 0; color: #fff !important; font-family: var(--font-mono); font-size: var(--text-12); line-height: 1; }
.crm-sum { font-family: var(--font-mono); font-size: var(--text-14); letter-spacing: var(--tracking-mono); color: var(--deep-green); white-space: nowrap; margin-inline-start: auto; }
.crm-sign { color: var(--text-tertiary); width: 1rem; text-align: center; font-size: var(--text-18); }
/* Countdown states — admin/countdown.php, emitted by admin-countdown.js.
   The state word and the digits are one unit: the label sits tight above the
   count, and the next appointment is pushed clear of both. The digits carry
   their own centring because .crm-mono sets text-align: right for numerals
   sitting inside RTL prose, and this is a centred display block, not prose.
   __next is shared by the break card and the active-meeting card (#meeting-info):
   "what comes next" is one piece of information and reads at one size in both.
   Its top margin is the break card's; the active card overrides it with mt-3. */
.crm-countdown { padding-block: var(--space-xl); }
.crm-countdown__state { margin: 0 0 var(--space-sm); font-size: var(--text-32); font-weight: var(--weight-regular); letter-spacing: var(--tracking-card); line-height: var(--leading-tight); }
.crm-countdown-digits { font-family: var(--font-mono); font-size: var(--text-72); line-height: 1; letter-spacing: -0.02em; text-align: center; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.crm-countdown__next { margin: var(--space-40) 0 0; font-size: var(--text-48); line-height: var(--leading-heading); }
.crm-countdown__client { margin: 0; font-size: var(--text-80); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); }
/* ייעוץ tag beside the current/next client: same size and font as the surrounding text, filled so it reads from across the room. */
.badge.crm-countdown__tag { font: inherit; letter-spacing: inherit; vertical-align: baseline; padding: .05em .35em; border-color: var(--soft-stone); background: var(--soft-stone) !important; color: var(--text-body) !important; }
/* In the פגישות list the tag sits a step below the client name. */
.badge.crm-countdown__tag--list { font-size: .75em; }
/* Header rows of the פגישות / טיפולים קודמים / הערות cards: stone ground so the three widgets read as labelled blocks. */
.crm-countdown__widget-head { --bs-card-cap-bg: var(--surface-stone); }
/* Meeting count in the פגישות header: white pill on the stone header row. */
.badge.countdown-meetings-badge { font-size: .65em; vertical-align: middle; border-color: var(--border-rule); background: var(--surface-card) !important; color: var(--text-strong) !important; }
/* countdown.php is a stationary desktop screen read from across the room: hold the
   desktop type scale at every width instead of following the phone breakpoints in
   section 1. It also opts out of the admin A+/A- scale (see includes/header.php). */
body.crm-countdown-page { --text-80: 5rem; --text-72: 4.5rem; --text-48: 3rem; --text-32: 2rem; --text-24: 1.5rem; --text-18: 1.125rem; }

/* ---------- Tag picker ----------
   The "ניהול תגיות" control on every summary card in admin-dashboard.js and on
   admin/client-view.php. Both render this markup; edit them together. */

/* The toggle is a chip, not a button: it opens a picker for a secondary
   attribute of a card, and it sits directly under the tag badges it edits, so
   it takes their scale rather than the action row's. It stays that size on
   touch — the 44px floor is met by an invisible hit area centred on the chip,
   not by inflating it into a lozenge twice the height of the badge above it. */
.btn.crm-tagtoggle {
  --bs-btn-font-size: var(--text-12);
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: var(--space-sm);
  position: relative;
  min-width: 0;
  min-height: 0;
}
@media (pointer: coarse) {
  /* inset-inline rather than a centring transform: a transform does not flip
     with direction, and this chip renders inside an RTL document. */
  .btn.crm-tagtoggle::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* The menu declares its width rather than shrinking to fit. Tag names are
   admin-authored, so max-content sizing let the longest tag in the system set
   the width of the menu on every card — 358px against a 294px card column on a
   phone. rem so the admin font-scale cookie moves it, clamped against the
   viewport so it can never outgrow a small phone. */
.crm-tagmenu {
  z-index: 1050;
  width: min(18rem, calc(100vw - var(--space-xxl)));
  padding: var(--space-md);
}
/* 16px, not form-control-sm's 14px: anything under 16px zooms the viewport on
   iOS focus, and this menu opens on a phone. */
.crm-tagmenu__search { margin-bottom: var(--space-sm); }
/* One axis only. `overflow-y: auto` alone is not that: CSS computes the other
   axis from `visible` to `auto`, so a name that no longer fit produced a second
   scrollbar instead of wrapping. Names wrap; x is closed explicitly. */
.crm-tagmenu__list {
  max-height: min(50vh, 16rem);
  overflow-x: hidden;
  overflow-y: auto;
}
/* A flex row, not Bootstrap's padding-plus-negative-margin gutter, and the
   label stretches to fill it: the whole row is the target, not the 20px box
   and a 21px line of text inside a 41px row. The gap is the system's own
   box-to-label gutter (--space-sm), so nothing about the checkbox moves.
   The .form-check.tag-item pairing is deliberate — it has to outrank the
   coarse-pointer block further down, which re-declares the gutter it replaces. */
.crm-tagmenu .form-check.tag-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
}
.crm-tagmenu .form-check.tag-item .form-check-input { flex: 0 0 auto; margin: 0; }
.crm-tagmenu .form-check.tag-item .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* Ground, not a rule, because search hides rows with `display: none` and no
   selector can address "the last visible row" — a per-row hairline strands a
   rule under whatever the filter leaves behind. */
.crm-tagmenu .tag-item:hover,
.crm-tagmenu .tag-item:active { background: var(--surface-stone); }
/* The row shows the tag as it will appear on the card. A badge is inline-block
   and nowrap by default; let a long name wrap inside it rather than push. */
.crm-tagmenu .badge { max-width: 100%; white-space: normal; text-align: start; overflow-wrap: anywhere; }
.crm-tagmenu__empty { padding: var(--space-md) 0; text-align: center; font-size: var(--text-14); color: var(--text-muted); }

/* No yellow in the palette: Bootstrap warning tints (countdown break state, sticky notes) → pale-green wash + deep green.
   .text-warning-emphasis is also a JS idempotency guard in admin-countdown.js — recolor it, never rename it. */
.bg-warning.bg-opacity-10 { background-color: var(--pale-green) !important; }
.border-warning { border-color: var(--deep-green) !important; }
.text-warning-emphasis { color: var(--deep-green) !important; }

/* ---------- 11. Admin navbar (TopBar) ---------- */
/* px on purpose throughout this section: the top bar must NOT scale with the admin font-size cookie (see style-rtl.css) */
.navbar.crm-topbar {
  --bs-navbar-color: var(--text-on-dark-muted);
  --bs-navbar-hover-color: var(--text-on-dark);
  --bs-navbar-active-color: var(--text-on-dark);
  --bs-navbar-brand-color: var(--text-on-dark);
  --bs-navbar-brand-hover-color: var(--text-on-dark);
  --bs-navbar-toggler-border-color: var(--border-on-dark);
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-padding-y: 8px;
  --bs-navbar-padding-x: 0;
  --bs-navbar-nav-link-padding-x: 12px;
  background: var(--surface-product);
  color: var(--text-on-dark);
  min-height: 56px;
}
.crm-topbar .navbar-brand { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; }
.crm-topbar .nav-link { font-size: 14px; padding-bottom: 2px; border-bottom: 1px solid transparent; white-space: nowrap; }
.crm-topbar .nav-link.active { border-bottom-color: var(--text-on-dark); }
.crm-topbar .dropdown-toggle::after { opacity: .6; }
.crm-topbar .dropdown-menu { overflow: hidden; }
.crm-topbar .dropdown-item { font-size: 14px; border-inline-start: 2px solid transparent; }
.crm-topbar .dropdown-item.active-page { border-inline-start-color: var(--surface-product); background: var(--surface-stone); }
.crm-topbar .crm-user { color: var(--text-on-dark-muted); font-size: 14px; }
.crm-topbar .crm-logout { color: var(--text-on-dark); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.crm-topbar .btn-outline-light { font-size: 14px; }
/* px on purpose: keep topbar controls from scaling with the admin font-size cookie */
.crm-topbar .btn { padding: 4px 10px; }
.crm-topbar .dropdown-item { padding: 8px 16px; }
@media (max-width: 1199.98px) {
  .crm-topbar .navbar-collapse { padding: 12px 0 16px; }
  .crm-topbar .nav-link { display: block; padding: 10px 0; border-bottom: 1px solid var(--border-on-dark); font-size: 16px; }
  .crm-topbar .nav-link.active { border-bottom-color: var(--border-on-dark); color: var(--text-on-dark); }
  .crm-topbar .navbar-toggler { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--text-on-dark); font-size: 16px; }
  .crm-topbar .navbar-toggler-icon { display: none; }
}
.admin-footer { color: var(--text-meta) !important; padding-bottom: var(--space-xl); }

/* =====================================================================
   12. Phone adaptation
   The admin console is used one-handed, standing, between treatments.
   Pinch-zoom is disabled by the viewport meta (deliberate), so tap
   precision is the only remaining affordance: coarse-pointer controls
   must clear 44px. Sizing here is px for chrome (must not move with the
   admin font cookie) and rem for content (must move with it).
   ===================================================================== */

/* ---------- 12a. Touch targets: keyed to input method, not width ----------
   A desktop mouse keeps the dense 36px controls; anything with a coarse
   pointer gets the 44px floor, including touch laptops. */
@media (pointer: coarse) {
  .btn-sm {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1rem;
    min-height: 44px;
  }
  .btn-group .btn { min-height: 44px; }

  .form-control-sm, .form-select-sm {
    padding: .625rem .75rem;
    min-height: 44px;
  }
  .form-select-sm { padding-inline-end: 2rem; }

  /* The control itself grows and the row gains bite, so the label is a
     target too rather than a 20px square being the only way in. */
  .form-check { padding-block: .625rem; }
  .form-check-input { width: 1.5rem; height: 1.5rem; }
  .form-check:not(.form-switch) { padding-inline-start: calc(1.5rem + var(--space-sm)); }
  .form-check:not(.form-switch) .form-check-input { margin-inline-start: calc(-1.5rem - var(--space-sm)); }
  .form-switch .form-check-input { width: 3rem; height: 1.75rem; }

  .pagination { --bs-pagination-padding-y: .625rem; --bs-pagination-padding-x: .875rem; }
  .dropdown-menu { --bs-dropdown-item-padding-y: .75rem; }

  /* The tag picker is the one checklist a thumb works through in bulk, so the
     floor goes on the row rather than on the box inside it. */
  .crm-tagmenu .form-check.tag-item { min-height: 44px; }

  /* Hover is unreachable on touch; the row tint would otherwise stick
     to whichever row was tapped last. */
  .table-hover > tbody > tr:hover > * { background-color: transparent; }
}

/* ---------- 12b. Page head wraps instead of squeezing ----------
   nowrap holds on desktop, where title and actions share a line. On a
   phone a long Hebrew title and its button were compressing each other. */
@media (max-width: 768px) {
  .crm-page-head { flex-wrap: wrap; align-items: flex-start; row-gap: var(--space-md); }
  .crm-page-head__actions { width: 100%; }
  .crm-page-head__actions .btn { flex: 1 1 auto; }
}

/* ---------- 12c. Tables become cards ----------
   Opt-in via .crm-table-cards. Each row is a card, each cell names itself
   from data-label, and the first cell is the card's title. Selector depth
   matches section 6 so the padding and border resets actually land. */
@media (max-width: 767.98px) {
  .crm-table-cards { display: block; }
  .crm-table-cards > thead { display: none; }
  .crm-table-cards > tbody { display: block; }

  .crm-table-cards > tbody > tr {
    display: block;
    border: 1px solid var(--border-rule);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--surface-card);
  }
  .crm-table-cards > tbody > tr:last-child { margin-bottom: 0; }

  .crm-table-cards > tbody > tr > td {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    width: auto;
    padding: var(--space-xs) 0;
    border: 0;
  }
  .crm-table-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 6rem;
    color: var(--text-muted);
    font-size: var(--text-14);
  }
  /* The first cell is the identity of the card, so it carries no label
     and sits a step up in the hierarchy. */
  .crm-table-cards > tbody > tr > td:first-child {
    display: block;
    font-size: var(--text-18);
    padding-top: 0;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-rule);
  }
  .crm-table-cards > tbody > tr > td:first-child::before { display: none; }
  .crm-table-cards > tbody > tr > td:last-child { padding-bottom: 0; }
  /* A cell with no label still stacks, it just does not print an empty gutter. */
  .crm-table-cards > tbody > tr > td:not([data-label])::before { display: none; }
}

/* ---------- 12d. Bottom navigation ----------
   Primary destinations move into thumb reach below the same 1200px the
   top bar collapses at. px throughout: this is chrome, and the admin
   font cookie must not resize it. Text only, per the no-icons rule;
   the active marker is a rule above the label, inverting the top bar's
   rule below it. */
.crm-bottomnav { display: none; }
.crm-bottomnav-spacer { display: none; }

@media (max-width: 1199.98px) {
  .crm-bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--surface-product);
    border-top: 1px solid var(--border-on-dark);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .crm-bottomnav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 0;
    border-top: 2px solid transparent;
    background: transparent;
    color: var(--text-on-dark-muted);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .crm-bottomnav__item:hover,
  .crm-bottomnav__item:focus-visible { color: var(--text-on-dark); }
  .crm-bottomnav__item.active {
    color: var(--text-on-dark);
    border-top-color: var(--text-on-dark);
  }
  .crm-bottomnav__item:active { background: rgba(255, 255, 255, .08); }

  /* Clears the fixed bar so the last row of a table and the footer stay
     reachable. Uses a real element rather than :has() so nothing depends
     on selector support. */
  .crm-bottomnav-spacer {
    display: block;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* The top bar keeps the brand and the text-size control; navigation has
     moved to the bottom, so its toggler and drawer are redundant. */
  .crm-topbar .navbar-toggler,
  .crm-topbar .navbar-collapse { display: none !important; }
}

/* ---------- 12e. Secondary navigation sheet ----------
   Tools, advanced options, and sign-out, opened from the bottom bar so
   the whole navigation system stays in the same reach. */
.crm-navsheet {
  --bs-offcanvas-height: auto;
  --bs-offcanvas-bg: var(--canvas);
  --bs-offcanvas-border-color: var(--border-rule);
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  max-height: 85vh;
}
.crm-navsheet .offcanvas-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-rule);
}
.crm-navsheet .offcanvas-title { font-size: var(--text-18); }
.crm-navsheet .offcanvas-body { padding: 0 0 env(safe-area-inset-bottom, 0px); }
.crm-navsheet__group {
  padding: var(--space-md) var(--space-xl) var(--space-xs);
  font-size: var(--text-14);
  color: var(--text-meta);
}
.crm-navsheet__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-md) var(--space-xl);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--border-rule);
  border-inline-start: 2px solid transparent;
}
.crm-navsheet__link:active { background: var(--surface-stone); }
/* The current page carries a 2px rule on its leading edge over a stone
   ground -- the bottom bar's active marker (rule plus a contrast step)
   inverted onto white, so the sheet reads as that bar's continuation. The
   transparent rule sits on every row so nothing shifts when it appears. */
.crm-navsheet__link.active-page {
  border-inline-start-color: var(--surface-product);
  background: var(--surface-stone);
}
.crm-navsheet__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
}
.crm-navsheet__user { color: var(--text-muted); font-size: var(--text-14); }

/* ---------- 12f. Client form fields fill their column ----------
   form-render.js ships every input with .w-none (width: unset), which
   pins a text field to the browser's default ~203px and shrinks a select
   to its longest option. In a 294px card on a phone that reads as a
   ragged column of mismatched boxes with a dead gutter beside it.
   Below md the field fills its container instead, capped so the rule
   cannot stretch a field across a wide tablet. Desktop keeps the
   deliberate compact width: this block does not apply there. */
@media (max-width: 767.98px) {
  .w-none { width: 100%; max-width: 22rem; }

  /* The repeater card is width: min-content, so it hugged whatever the
     widest .w-none child happened to be (236px of a 294px column).
     With the fields filling, the card should too. */
  .repeater-instance { width: auto; }
}

/* ---------- 12g. Auth panel on small phones ----------
   The panel is a fixed-padding card holding two things that do not scale:
   the Turnstile widget (a 300x65 iframe Cloudflare sizes itself) and the
   four 56px code boxes (260px with gaps). At 320px the panel's content box
   is 209px, so step 1 pushed the document 28px wide and step 2's boxes ran
   into the card's padding.

   Measured content box after this block: 320px -> 248px, which clears the
   scaled widget (246px) and the tightened code row (216px).

   Cloudflare's widget cannot be observed in development mode, so these
   numbers come from a 300x65 stand-in matching its documented size.
   Re-check on production after deploy. */

/* Give the card back the space the phone does not have to spare. */
@media (max-width: 420px) {
  .crm-auth-frame-stone { padding-inline: var(--space-md); }
  .crm-auth-panel { padding: var(--space-xl); }
}

@media (max-width: 360px) {
  /* zoom, not transform: transform would shrink the widget visually while
     its 300px layout box kept pushing the page wide. */
  .crm-turnstile-row .cf-turnstile { zoom: .82; }

  /* 4x48 + 3x8 = 216. Still a 48x64 target, well over the 44px floor. */
  .crm-code-boxes { gap: var(--space-sm); }
  .crm-code-boxes input { width: 3rem; }
}

/* ---------- 12h. Registration wizard ----------
   Two defects the wizard has and the login panel does not: a progress
   label that lived inside the filled portion of the bar, and long URLs
   in the regulations that no Hebrew line-breaking opportunity can split. */

/* The label was inside .progress-bar, so its box was the FILL, not the
   track. At stage 1 the fill is 25% -- 62px against a 69px label on a
   320px screen -- and .progress-bar clips (overflow: hidden), so the
   very first screen of registration showed a truncated "שלב 1 מתוך 4".
   The label now sits above a track at the system's own 6px progress
   token, instead of the 1.5rem inline override the old markup needed to
   make room for text. */
.crm-progress__label {
  margin-bottom: var(--space-sm);
  font-size: var(--text-14);
  color: var(--text-muted);
}

/* The regulations list a booking URL and a portal URL. A URL has no break
   opportunity, so it set the min-content width of the whole panel: the
   stage measured 286px inside a 233px content box and spilled past the
   card's edge. `anywhere` (not `break-word`) is deliberate -- only
   `anywhere` also lets the container shrink below the token's width. */
.crm-auth-panel a { overflow-wrap: anywhere; }

/* The panel is a grid. A grid item is sized to its max-content by default,
   so one unshrinkable child -- the 300px Turnstile iframe, a long URL --
   widened the whole column and every sibling with it, which is why the
   progress track took a different length on each stage. min-width: 0 lets
   items shrink to the column instead; only the fixed-size widget itself
   spills into the panel padding, and nothing else follows it. */
.crm-auth-panel > * { min-width: 0; }

/* New-client funnel card (admin dashboard). The bar is a plain block inside an
   RTL track, so it grows from the right edge with no direction overrides. */
.crm-funnel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.crm-funnel__title { margin: 0; font-family: var(--font-display); font-size: var(--text-24); font-weight: var(--weight-regular); line-height: var(--leading-heading); letter-spacing: var(--tracking-card); }
.crm-funnel__sub { margin: var(--space-xs) 0 0; font-size: var(--text-14); color: var(--text-muted); }
.crm-funnel__range { display: flex; align-items: center; gap: var(--space-sm); }
.crm-funnel__range-unit { font-size: var(--text-14); color: var(--text-muted); }
.crm-funnel__range .btn { text-align: center; }
.crm-funnel__range .btn.active { background: var(--action-primary); border-color: var(--action-primary); color: var(--on-action-primary); }
.crm-funnel__rows { display: grid; gap: var(--space-md); transition: opacity var(--duration-base) var(--ease-standard); }
.crm-funnel.is-loading .crm-funnel__rows { opacity: .4; }
.crm-funnel__row { display: grid; grid-template-columns: 11rem 3.5rem minmax(0, 1fr) 13rem; align-items: center; gap: var(--space-lg); }
.crm-funnel__label { font-size: var(--text-16); color: var(--text-strong); }
.crm-funnel__count { font-size: var(--text-18); color: var(--text-strong); }
.crm-funnel__track { height: 1.5rem; background: var(--surface-stone); border-radius: var(--radius-xs); overflow: hidden; }
.crm-funnel__bar { height: 100%; background: var(--deep-green); border-radius: var(--radius-xs); }
.crm-funnel__meta { font-size: var(--text-14); color: var(--text-muted); }
.crm-funnel__note { margin: var(--space-xl) 0 0; font-size: var(--text-12); color: var(--text-meta); }

@media (max-width: 767.98px) {
  .crm-funnel__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label count" "track track" "meta meta"; gap: var(--space-xs) var(--space-md); }
  .crm-funnel__label { grid-area: label; }
  .crm-funnel__count { grid-area: count; }
  .crm-funnel__track { grid-area: track; }
  .crm-funnel__meta { grid-area: meta; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-funnel__rows { transition: none; }
}

/* Google reviews card (admin dashboard), below the funnel; its header reuses .crm-funnel__*.
   The plot is plain HTML: .crm-reviews__plot is direction: ltr so time runs left to right inside
   the RTL page, and the whole range always fits the card's width. The 2px gap between stacked
   segments is a border in the card's surface colour. Series colours are DESIGN.md palette tokens,
   light to dark up the stack (waiting -> link sent -> reviewed); checked for colour-blind
   separation and >= 3:1 on the white card.
   The Google marker is near-black: a 2px line over a surface-coloured halo, with ringed dots.
   Light only: the theme has no dark mode. */
.crm-reviews { --reviews-requested: var(--muted); --reviews-sent: var(--action-blue); --reviews-reviewed: var(--deep-green); --reviews-google: var(--near-black); --reviews-plot-height: 12rem; }
.crm-reviews [data-series="reviewed"] { --reviews-series: var(--reviews-reviewed); }
.crm-reviews [data-series="sent"] { --reviews-series: var(--reviews-sent); }
.crm-reviews [data-series="requested"] { --reviews-series: var(--reviews-requested); }
.crm-reviews__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.crm-reviews__body { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: start; gap: var(--space-xl); transition: opacity var(--duration-base) var(--ease-standard); }
.crm-reviews.is-loading .crm-reviews__body { opacity: .4; }
.crm-reviews__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-md); }
.crm-reviews__tile { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--surface-stone); border-radius: var(--radius-sm); color: var(--text-body); text-decoration: none; }
.crm-reviews__tile-value { font-size: var(--text-32); line-height: var(--leading-tight); color: var(--text-strong); }
.crm-reviews__tile-label { font-size: var(--text-14); color: var(--text-muted); }
.crm-reviews__main { position: relative; min-width: 0; }
.crm-reviews__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: var(--text-14); color: var(--text-body); }
.crm-reviews__legend-item { display: inline-flex; align-items: center; gap: var(--space-sm); }
.crm-reviews__swatch { flex: none; width: .75rem; height: .75rem; border-radius: var(--radius-xs); background: var(--reviews-series, var(--text-meta)); }
.crm-reviews__linekey { position: relative; flex: none; width: 1.25rem; height: 2px; background: var(--reviews-google); }
.crm-reviews__linekey::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--radius-full); background: var(--reviews-google); }
.crm-reviews__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; direction: ltr; }
.crm-reviews__yaxis, .crm-reviews__xaxis { font-family: var(--font-mono); font-size: var(--text-12); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.crm-reviews__yaxis { position: relative; height: var(--reviews-plot-height); margin-top: var(--space-sm); }
.crm-reviews__ytick { position: absolute; right: var(--space-sm); transform: translateY(50%); line-height: 1; }
.crm-reviews__frame { min-width: 0; padding-top: var(--space-sm); }
.crm-reviews__area { position: relative; height: var(--reviews-plot-height); }
.crm-reviews__gridline { position: absolute; left: 0; right: 0; height: 1px; margin-bottom: -1px; background: var(--border-card); }
.crm-reviews__gridline--base { background: var(--border-rule); }
.crm-reviews__cols { position: relative; display: flex; height: 100%; }
.crm-reviews__col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.crm-reviews__col.is-active { background: var(--surface-stone); }
.crm-reviews__col:focus-visible { outline-offset: -2px; }
.crm-reviews__bar { display: flex; flex-direction: column-reverse; width: 72%; min-width: 2px; max-width: 24px; }
.crm-reviews__seg { flex: 1 1 0; background: var(--reviews-series, var(--text-meta)); }
.crm-reviews__seg + .crm-reviews__seg { border-bottom: 2px solid var(--surface-card); }
.crm-reviews__seg:last-child { border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.crm-reviews__line, .crm-reviews__dots { position: absolute; inset: 0; pointer-events: none; }
.crm-reviews__line { width: 100%; height: 100%; overflow: visible; }
.crm-reviews__line polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crm-reviews__line-halo { stroke: var(--surface-card); stroke-width: 4; }
.crm-reviews__line-stroke { stroke: var(--reviews-google); stroke-width: 2; }
.crm-reviews__dots { display: flex; }
.crm-reviews__dots.is-dense { display: none; }
.crm-reviews__dot-slot { position: relative; flex: 1 1 0; min-width: 0; }
.crm-reviews__dot { position: absolute; left: 50%; box-sizing: border-box; width: 12px; height: 12px; margin: 0 0 -6px -6px; border: 2px solid var(--surface-card); border-radius: var(--radius-full); background: var(--reviews-google); }
.crm-reviews__xaxis { position: relative; height: 1.75rem; }
.crm-reviews__xtick { position: absolute; top: var(--space-sm); transform: translateX(-50%); line-height: 1; white-space: nowrap; }
.crm-reviews__xtick.is-end { right: 0; transform: none; }
.crm-reviews__tip { position: absolute; z-index: 2; display: grid; gap: var(--space-xs); min-width: 9rem; padding: var(--space-sm) var(--space-md); background: var(--surface-card); border: 1px solid var(--border-rule); border-radius: var(--radius-sm); font-size: var(--text-14); color: var(--text-body); pointer-events: none; }
.crm-reviews__tip-title { color: var(--text-strong); }
.crm-reviews__tip-span { font-size: var(--text-12); color: var(--text-muted); }
.crm-reviews__tip-row { display: flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.crm-reviews__tip-total { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-rule); }
.crm-reviews__tip-google { padding-top: var(--space-xs); border-top: 1px solid var(--border-rule); }
.crm-reviews__tip-key { flex: none; width: .75rem; height: 2px; background: var(--reviews-series, var(--text-meta)); }
.crm-reviews__tip-value { color: var(--text-strong); font-weight: var(--weight-medium); }

@media (max-width: 767.98px) {
  .crm-reviews { --reviews-plot-height: 10rem; }
  .crm-reviews__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
/* Phones: each switch is its label over its buttons, one switch under the other */
@media (max-width: 575.98px) {
  .crm-reviews__controls, .crm-reviews__controls .crm-funnel__range { flex-direction: column; align-items: flex-start; }
  .crm-reviews__controls .crm-funnel__range { gap: var(--space-xs); }
}
/* Five buttons in the 246px a 320px phone leaves: narrower padding, touch sizes included */
@media (max-width: 400px) {
  .crm-reviews__controls .btn-sm { --bs-btn-padding-x: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-reviews__body { transition: none; }
}