/* Privacy mode — blurs client-identifying details while <html data-privacy="on">.
   State and the text-matching safety net (.pii-auto) live in
   src/privacy/privacy-mode.js. This file is the central list: add a selector
   here when a new surface renders client details, or put class="pii" on the
   element when it has no stable hook.

   Blurred: client names, avatars/initials, phone, email, ID number, address,
   billing names, notes (client notes, session notes and pre-notes), message and
   document previews, per-client amounts in browsing surfaces.
   Not blurred: navigation, headings, buttons, dates and times, session kinds,
   statuses, clinic-level totals, the therapist's own identity, client codes. */

:root {
  --pii-blur: 6px;
}

html[data-privacy="on"] :is(
  /* generic hooks */
  .pii, .pii-auto,

  /* clients grid */
  .cd-name, .cd-avatar, .cd-contact-v, .cd-leaf-note, .cd-debt-v,

  /* client card: header, contact, billing identity, notes, finance */
  #ccBreadcrumbName, #identNameView, .ident-avatar, #identAvatar,
  .cc-ident-name, .cc-ident-avatar, #contactPhoneView, #contactEmailView, .bill-name, #billNameView, #clientInvoicePrefsView .invoice-pref-value,
  .notes-list, .note-item-text, .note-text, .cc-note, .ccn-item-note, .ccn-overview-note,
  .client-notes-field, .tech-notes-textarea,
  #clientCardViewPane :is(.ccn-money, .ccn-tab-amount, .ccn-total, .cc-stat-amount, .cc-total, .stat-amount, .di-amount, .di-title),

  /* client form (new / edit) and inline editors */
  #clientFormEditingName,
  #cFullName, #cDisplayName, #cInvoiceName, #cCompanyName, #cEmail, #cPhone, #cIdNumber, #cAddress, #cNotes,
  #identNameInput, #contactPhoneInput, #contactEmailInput, #billNameInput,
  #ccDisplayNameInput, #ccIdNumberInput, #ccCompanyNameInput, #ccAddressInput, #ccInternalNotesInput, #noteInput,
  #cSalesDocCompanyLines, #ccSalesDocCompanyLinesInput,

  /* overview */
  .ov-today-name, .ov-today-client, .ov-attn-text,

  /* calendar grid, month view, drawer, appointment form */
  .e-title, .me-title, .drawer-name, #sideDrawerName, .drawer-sub, #sideDrawerSub,
  .drawer-avatar, #sideDrawerAvatar, .drawer-note,
  #rescheduleAlertClientName, #appointmentFormSubtitle, #appointmentClientSearch, #appointmentClientSuggestions,
  #appointmentPreNote, #appointmentNotes,

  /* ledger / payments */
  .cg-name, #billingClientGroups .avatar, .cg-total, .plr-client, .plr-amount, .sync-item-name,
  .mb-bi-ledger__client, .debt-history-client, .debt-history-note,
  .mb-ld-settle__client, .mb-ld-payment__notes, .sp-sub,

  /* dialogs: debt breakdown, monthly billing, reminders, WhatsApp, email review,
     single document, import, assistant duplicates */
  .debt-breakdown-name, .debt-breakdown-avatar, .debt-breakdown-amount,
  .mb-client-name, .mb-sim-client, .mb-sim-noemail, .mb-sim-notes,
  .mb-review-recip__name, .mb-review-recip__email, .mb-review-recip__avatar,
  .mb-review-editor__who-name, .mb-review-editor__who-mail, .mb-review-editor__who-avatar,
  .mb-review-preview, .inv-viewer__body,
  #reminderClientLabel, #reminderEmailLabel, #reminderMessage, #bulkReminderEmailLabel, #paymentLinkWhatsAppPreview,
  #pPaymentContext strong,
  #singleIssueRecipientIdentity, #singleIssueRecipientName, #singleIssueRecipientIdNumber,
  #singleIssueRecipientCompanyName, #singleIssueRecipientCompanyReg, #singleIssueRecipientAddress,
  #importPreviewTableBody, .ac-dup-name,
  .bulk-dispatch-recipient-form input, .bulk-dispatch-recipient-form textarea,
  :is(input, textarea)[data-field="name"], :is(input, textarea)[data-field="idNumber"],
  :is(input, textarea)[data-field="address"], :is(input, textarea)[data-field="companyName"],
  :is(input, textarea)[data-field="companyRegistrationNumber"],

  /* search boxes hold what was typed: usually a client's name */
  #clientSearchInput
) {
  filter: blur(var(--pii-blur));
  -webkit-user-select: none;
  user-select: none;
  /* No fade: a transition would show the text half-readable for a moment. */
}

/* Media and embedded documents blur harder: a photo or a rendered PDF stays
   recognisable at text strength. */
html[data-privacy="on"] :is(.mb-review-preview iframe, .inv-viewer__body iframe, .cd-avatar img, .ident-avatar img) {
  filter: blur(14px);
}

/* Deliberate reveal of a single item: press and hold (privacy-mode.js), or the
   field currently being typed into. */
/* !important: the list above carries ID specificity through :is(). */
html[data-privacy="on"] [data-pii-peek],
html[data-privacy="on"] :is(input, textarea, select):focus {
  filter: none !important;
  -webkit-user-select: auto;
  user-select: auto;
}

/* ---- Controls ---------------------------------------------------------- */

.pm-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  inline-size: 100%; min-block-size: 44px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-secondary); color: var(--text-secondary);
  font: 600 0.8125rem/1.2 var(--font-family); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pm-toggle:hover { border-color: var(--accent-hover); color: var(--text-primary); }
.pm-toggle:focus-visible, .pm-pill-off:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.pm-toggle svg { flex: none; }
.pm-toggle[aria-pressed="true"] {
  background: var(--accent-color); border-color: var(--accent-color); color: var(--bg-secondary);
}
.pm-toggle[aria-pressed="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Eye when off (press to hide), crossed eye when on. */
.pm-ui .pm-eye-off { display: none; }
html[data-privacy="on"] .pm-ui .pm-eye-open { display: none; }
html[data-privacy="on"] .pm-ui .pm-eye-off { display: inline; }

.compact-sidebar-footer .pm-toggle--sidebar { margin-block-end: -2px; }

/* Collapsed icon rail: icon only, the label stays for screen readers. */
@media (min-width: 993px) {
  html[data-sidebar="collapsed"] .pm-toggle--sidebar { inline-size: 44px; padding: 0; align-self: center; }
  html[data-sidebar="collapsed"] .pm-toggle--sidebar .pm-toggle-label {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Mobile and tablet: the sidebar footer is hidden and the menu is a bottom tab
   bar (60px), so the switch floats just above it, at the inline-end corner —
   clear of page headers and of the drawer's close button. */
.pm-toggle--float { display: none; }
@media (max-width: 992px) {
  .pm-toggle--float {
    position: fixed; z-index: 1200;
    inset-block-end: calc(16px + var(--bottom-clearance)); inset-inline-end: 12px; /* above the tab bar and the dev ribbon */
    display: grid; place-items: center;
    inline-size: 44px; block-size: 44px; padding: 0; border-radius: 50%;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
  }
  .pm-toggle--float .pm-toggle-label {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Persistent reminder while on, so the mode is not forgotten: a small tab
   hanging from the top edge, above the page headers. */
.pm-pill {
  position: fixed; z-index: 1190;
  inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding-block: 3px; padding-inline: 12px 4px;
  border: 1px solid var(--accent-color); border-block-start: 0; border-radius: 0 0 12px 12px;
  background: var(--accent-light); color: var(--accent-hover);
  font: 600 0.75rem/1.2 var(--font-family);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1));
  max-inline-size: calc(100vw - 120px); white-space: nowrap;
}
[dir="rtl"] .pm-pill { transform: translateX(50%); }
.pm-pill[hidden] { display: none; }
.pm-pill svg { flex: none; inline-size: 16px; block-size: 16px; }
.pm-pill-text { overflow: hidden; text-overflow: ellipsis; }
.pm-pill-off {
  flex: none; border: 0; border-radius: 999px; padding: 2px 10px; min-block-size: 20px; cursor: pointer;
  background: var(--accent-color); color: var(--bg-secondary); font: inherit;
}
.pm-pill-off:hover { background: var(--accent-hover); }
/* Mobile: the pill sits beside the floating switch instead of over the page
   title. */
@media (max-width: 992px) {
  .pm-pill, [dir="rtl"] .pm-pill {
    inset-block-start: auto; inset-block-end: calc(23px + var(--bottom-clearance));
    inset-inline-start: auto; inset-inline-end: 62px;
    transform: none; max-inline-size: calc(100vw - 84px);
    padding-block: 5px; border-block-start: 1px solid var(--accent-color); border-radius: 999px;
  }
}
@media (max-width: 480px) {
  .pm-pill-text { display: none; }
}

.pm-live {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pm-toggle { transition: none; }
}
html[data-motion="reduced"] .pm-toggle { transition: none; }