/* EwizPro-specific admin tweaks — loaded AFTER the vendored Hitcourt Design System
   so app overrides win (per USAGE rule 1). Keep this tiny; real design changes
   belong in the design-system repo, not here. */

.form-narrow { max-width: 640px; }

/* Standalone auth screen (login) — the app shell isn't used pre-auth. */
.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--ground); }
.auth-card  { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.1rem; }
.auth-brand .mark {
  width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center;
  font-weight: 700; color: var(--on-accent-strong); background: var(--accent-strong);
}
.auth-brand .name { font-weight: 600; line-height: 1.1; }
.auth-brand .name small { display: block; color: var(--ink-3); font-weight: 500; font-size: var(--fs--1); }

/* Theme-toggle icons: inline SVGs shown/hidden purely by [data-theme] (NOT via theme.js's
   <i> class-swap, which no-ops because FontAwesome SVG-JS turns <i> into <svg>).
   Light mode -> dark-blue half-moon ("go dark"); dark mode -> orange sun ("go light"). */
[data-theme-toggle] .theme-ico { display: inline-flex; align-items: center; line-height: 0; }
[data-theme-toggle] .theme-ico-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .theme-ico-moon { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .theme-ico-sun  { display: inline-flex; }

/* ---- Avatar field + cropper (200x200 profile photos) ---- */
.avatar-field { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.avatar-preview { position: relative; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--rule); flex: none; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview img.is-empty { display: none; }
.avatar-preview__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 1.5rem; }
.avatar-preview img:not(.is-empty) + .avatar-preview__ph { display: none; }
/* rounded thumbnail in list tables */
.avatar-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; display: block; }

.cropper-wrap { max-width: 100%; }
/* Cap the crop area to the viewport so tall/portrait photos can't overflow the screen.
   Cropper.js sizes its container to the <img>'s rendered box, so bounding the img bounds the UI. */
.cropper-wrap img, #cropperImage { display: block; max-width: 100%; max-height: 52vh; }
.cropper-container { max-height: 52vh; }
#cropperModal .modal-body { max-height: 66vh; overflow: hidden; }
/* Round framing ONLY for the avatar cropper (#cropperModal, WhatsApp-style). The unified image
   cropper (#ecCropperModal — logo/banner/cover/public-photo) stays SQUARE/rectangular. */
#cropperModal .cropper-view-box, #cropperModal .cropper-face { border-radius: 50%; }
.cropper-controls { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.cropper-controls #cropZoom { flex: 1; accent-color: var(--accent); }

/* ---- De-green (Rajat directive 2026-07-22): positive/success states use BLUE, never green.
   Overrides the vendored design-system --success token (app stylesheet wins). Danger stays red,
   warning stays amber. Applies to Active/Booked badges, Money-in, success alerts, beacons. ---- */
:root, :root[data-theme="light"] {
  --success: #0284c7; --success-soft: #e0f2fe; --success-ink: #0369a1; --on-success: #ffffff;
  --bs-success: #0284c7; --bs-success-rgb: 2,132,199;
}
:root[data-theme="dark"] {
  --success: #38bdf8; --success-soft: #0c2b3a; --success-ink: #7dd3fc; --on-success: #06283a;
  --bs-success: #38bdf8; --bs-success-rgb: 56,189,248;
}