/* 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 class-swap, which no-ops because FontAwesome SVG-JS turns into ). 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 '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; } /* Website editor — gallery thumbnails (showcase manager) */ .gallery-thumb { display:inline-flex; flex-direction:column; gap:.35rem; cursor:pointer; } .gallery-thumb img { width:110px; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--bs-border-color, #d0d7de); display:block; } .gallery-thumb__rm { font-size:var(--fs--1, .82rem); color:var(--bs-secondary, #6b7280); display:inline-flex; align-items:center; gap:.3rem; } .gallery-thumb input:checked ~ * { } .gallery-thumb:has(input:checked) img { outline:2px solid #dc3545; opacity:.55; } /* ── Row-action kebab (⋮) menus + single-line credential cell (2026-09-08) ─────────────── Consolidates per-row actions into one uniform dropdown so admin list Action columns never stagger; the Account column shows creds/status on ONE line. */ .creds-inline{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;white-space:nowrap;font-size:var(--fs--1);line-height:1.6} .creds-inline .pw-cell{display:inline-flex;align-items:center;gap:4px} .pw-cell .pw{font-variant-numeric:tabular-nums;letter-spacing:.5px} .row-actions{display:inline-block} .row-actions .dropdown-menu{min-width:210px} .row-actions form{margin:0} /* a