/* ============================================================
DanceYourLife Studio — Admin Panel Styles
============================================================ */
/* ============================================================
FocusOnNavigate — kill the page-title focus outline (GLOBAL, every page).
Routes.razor renders . That move is
a screen-reader nicety, but the visible side effect is the browser drawing a
focus ring around the title on page load, making the heading look "selected".
An is never in the natural tab order (FocusOnNavigate adds tabindex=-1
only transiently, then removes it), so the only time an is :focus is this
programmatic move — dropping its outline is safe and never hides a real
keyboard focus ring. admin.css is linked in the single root App.razor ,
so this covers every layout (admin, public, platform, embed). The focus move
itself is preserved, so accessibility is unaffected.
============================================================ */
h1:focus { outline: none; }
/* ============================================================
DESIGN TOKENS — the admin design-system API (7 themes: 6 light + 1 dark).
:root holds the DEFAULT theme (Sage). The shell, the shared component
library (.mh- / .ap- classes) and the Bootstrap reskin only ever read
these tokens — never a raw hex — so writing a theme's token values onto
(via data-theme + data-mode) reshapes the whole admin. The
sidebar/accent aliases at the bottom are DERIVED from the --ae-* tokens,
so a theme only needs to set the --ae-* set (+ --accent-rgb).
── HOW TO ADD A THEME ──────────────────────────────────────
Add ONE block: [data-theme="name"] { … } setting the coordinated set:
--ae-primary, --ae-accent-ink (text ON the accent), --accent-rgb (the
R,G,B of --ae-primary, for rgba tints), and the neutrals
--ae-bg/-bg-soft/-surface/-hover/-text/-text-subtle/-text-muted/-soft/
-border/-line-soft/-track/-chip. A LIGHT theme may omit any neutral
equal to Sage's (e.g. --ae-surface stays #fff). A DARK theme also gets
data-mode="dark" from the picker and should override --ae-shadow.
Soft accent washes are derived at use-site with color-mix (do NOT store
them). Status pills + the destructive red are FIXED (semantic), never
per-theme. Register the key in _themes (AdminLayout.razor). No component
or Bootstrap CSS edits are ever required.
============================================================ */
:root {
--sidebar-width: 250px;
--topbar-height: 56px;
/* ===== Sage (default) — coordinated token set ===== */
--ae-primary: #0e9488;
--ae-accent-ink: #ffffff; /* text/icons that sit ON --ae-primary */
--accent-rgb: 14, 148, 136; /* R,G,B of --ae-primary (rgba tints) */
--ae-bg: #f6f5f2; /* app background */
--ae-surface: #ffffff; /* card / sidebar / input surface (spec: panel) */
--ae-bg-soft: #fcfbf9; /* raised sub-surface: table head, expanded strip (spec: surface) */
--ae-hover: #f4f2ee; /* neutral hover wash */
--ae-text: #23211e; /* primary text (spec: ink) */
--ae-text-subtle: #56524c; /* secondary text / control label (spec: ctl) */
--ae-text-muted: #908c85; /* tertiary text / icon resting (spec: muted) */
--ae-soft: #b4afa6; /* quaternary text / placeholders (spec: soft) */
--ae-border: #eceae5; /* standard border (spec: line) */
--ae-line-soft: #f1efeb; /* hairline divider */
--ae-track: #ebe8e2; /* inactive track: progress bg, scrollbar thumb */
--ae-chip: #f1efeb; /* neutral pill/badge bg: role tags, counts */
/* shape / type / fixed semantics (theme-independent) */
--ae-r: 10px; --ae-r-card: 15px; --ae-r-pill: 99px;
--ae-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ae-shadow: 0 1px 2px rgba(20, 18, 14, .04), 0 8px 24px -12px rgba(20, 18, 14, .10);
--ae-success: #2e7d5b; --ae-danger: #c2543f; --ae-warning: #9a6b00;
--ae-accent-soft: color-mix(in srgb, var(--ae-primary) 10%, transparent);
--ae-info: var(--ae-primary);
/* sidebar/accent aliases — DERIVED from --ae-*, so the shell follows the theme */
--accent: var(--ae-primary);
--accent-light: var(--ae-accent-soft);
--accent-text: var(--ae-primary);
--accent-shadow: color-mix(in srgb, var(--ae-primary) 22%, transparent);
--sidebar-bg: var(--ae-surface);
--sidebar-text: var(--ae-text-subtle);
--sidebar-active: var(--ae-primary);
--sidebar-hover: color-mix(in srgb, var(--ae-primary) 9%, transparent);
--sidebar-logo-bg: color-mix(in srgb, var(--ae-primary) 10%, transparent);
--sidebar-logo-border: color-mix(in srgb, var(--ae-primary) 22%, transparent);
--sidebar-logo-icon: var(--ae-primary);
--sidebar-dropdown-bg: var(--ae-surface);
/* status pill tones (bg / fg / dot) — FIXED across all themes (semantic) */
--ae-pill-ok-bg: #e4f2ea; --ae-pill-ok-fg: #2e7d5b; --ae-pill-ok-dot: #43a06b;
--ae-pill-warn-bg: #fbf0d9; --ae-pill-warn-fg: #9a6b00; --ae-pill-warn-dot: #d29a2e;
--ae-pill-danger-bg: #fbeae7; --ae-pill-danger-fg: #c2543f; --ae-pill-danger-dot: #d17a66;
--ae-pill-muted-bg: #efede8; --ae-pill-muted-fg: #7a766f; --ae-pill-muted-dot: #b4afa6;
--ae-pill-noshow-bg: #fce9d8; --ae-pill-noshow-fg: #b5560f; --ae-pill-noshow-dot: #e07b2e;
--ae-pill-info-bg: #e4f0ef; --ae-pill-info-fg: #0e7a70; --ae-pill-info-dot: #0e9488;
}
/* ===== THEMES =====================================================
Each block sets its coordinated --ae-* token set; the sidebar/accent
aliases + soft washes derive automatically. Sage is the :root default.
Picker order: sage · indigo · plum · clay · rose · forest · midnight. */
/* ---- Indigo — confident blue-violet on cool blue-grey (SaaS/pro) ---- */
[data-theme="indigo"] {
--ae-primary: #5048e5;
--accent-rgb: 80, 72, 229;
--ae-bg: #f4f5fb; --ae-bg-soft: #fafbfe; --ae-hover: #f1f2fa;
--ae-text: #1b1d2a; --ae-text-subtle: #4c4f63; --ae-text-muted: #797d93; --ae-soft: #a6aabd;
--ae-border: #e5e6f0; --ae-line-soft: #eff0f7; --ae-track: #e7e8f3; --ae-chip: #ecedf7;
}
/* ---- Plum — soft purple on lilac neutrals (creative, boutique) ---- */
[data-theme="plum"] {
--ae-primary: #8a5cb0;
--accent-rgb: 138, 92, 176;
--ae-bg: #f7f4f9; --ae-bg-soft: #fcf9fd; --ae-hover: #f4eff6;
--ae-text: #261e2b; --ae-text-subtle: #564d5c; --ae-text-muted: #897e90; --ae-soft: #b5aabb;
--ae-border: #ebe4ee; --ae-line-soft: #f2ecf4; --ae-track: #ece3ef; --ae-chip: #f1e9f4;
}
/* ---- Clay — warm terracotta on sand (cozy, earthy studio warmth) ---- */
[data-theme="clay"] {
--ae-primary: #be6440;
--accent-rgb: 190, 100, 64;
--ae-bg: #faf5f0; --ae-bg-soft: #fdfaf5; --ae-hover: #f6efe7;
--ae-text: #2a211c; --ae-text-subtle: #5c4f46; --ae-text-muted: #998a7e; --ae-soft: #c0b1a4;
--ae-border: #eee3d9; --ae-line-soft: #f4ece3; --ae-track: #f0e6db; --ae-chip: #f3eadf;
}
/* ---- Rose — berry pink on blush (energetic, expressive) ---- */
[data-theme="rose"] {
--ae-primary: #c04e7c;
--accent-rgb: 192, 78, 124;
--ae-bg: #faf4f6; --ae-bg-soft: #fdf9fb; --ae-hover: #f6eef1;
--ae-text: #2a1f24; --ae-text-subtle: #5c4a52; --ae-text-muted: #978088; --ae-soft: #c0a8b1;
--ae-border: #efe2e7; --ae-line-soft: #f5ecf0; --ae-track: #f1e3e9; --ae-chip: #f4e9ee;
}
/* ---- Forest — deep green on pale sage-grey (grounded, natural) ---- */
[data-theme="forest"] {
--ae-primary: #2f8056;
--accent-rgb: 47, 128, 86;
--ae-bg: #f4f7f4; --ae-bg-soft: #fafcf9; --ae-hover: #eff4ed;
--ae-text: #1e261f; --ae-text-subtle: #4d5a4f; --ae-text-muted: #828a80; --ae-soft: #abb4a8;
--ae-border: #e5ebe3; --ae-line-soft: #eef3ec; --ae-track: #e6ece3; --ae-chip: #ecf1ea;
}
/* ---- Midnight (dark) — mint accent on cool charcoal. Panel lifts above
bg; borders are LIGHTER than panels (inverse of light mode). ---- */
[data-theme="midnight"] {
--ae-primary: #3ac9b0;
--ae-accent-ink: #06231e; /* near-black green — sits ON the mint accent */
--accent-rgb: 58, 201, 176;
--ae-bg: #15171c; --ae-surface: #1e2128; --ae-bg-soft: #232730; --ae-hover: #262b34;
--ae-text: #eceef2; --ae-text-subtle: #c3c8d1; --ae-text-muted: #969ba6; --ae-soft: #6b7079;
--ae-border: #2b2f38; --ae-line-soft: #242831; --ae-track: #313640; --ae-chip: #2a2f39;
--ae-shadow: none;
}
/* Light themes — sidebar chrome on the white panel. Gated to non-dark mode;
dark mode (Midnight) uses the base shell rules + --sidebar-* tokens. */
html:not([data-mode="dark"]) .admin-sidebar {
border-right: 1px solid var(--ae-border);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}
html:not([data-mode="dark"]) .sidebar-header {
border-bottom-color: var(--ae-border);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
}
html:not([data-mode="dark"]) .sidebar-brand { color: var(--ae-text); }
html:not([data-mode="dark"]) .sidebar-subbrand { color: var(--ae-text-muted); }
html:not([data-mode="dark"]) .nav-section { color: var(--ae-soft); }
html:not([data-mode="dark"]) .nav-toolbar-btn { color: var(--ae-soft); }
html:not([data-mode="dark"]) .nav-toolbar-btn:hover { color: var(--ae-text-subtle); background: var(--ae-hover); }
html:not([data-mode="dark"]) .nav-item { color: var(--ae-text-subtle); }
html:not([data-mode="dark"]) .nav-item:hover {
background: var(--sidebar-hover);
color: var(--accent);
}
html:not([data-mode="dark"]) .nav-item.active {
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-weight: 600;
}
html:not([data-mode="dark"]) .sidebar-footer { border-top-color: var(--ae-border); }
html:not([data-mode="dark"]) .profile-trigger {
background: var(--ae-hover);
color: var(--ae-text-subtle);
}
html:not([data-mode="dark"]) .profile-trigger:hover { background: var(--ae-chip); }
html:not([data-mode="dark"]) .profile-trigger-name { color: var(--ae-text); }
html:not([data-mode="dark"]) .profile-trigger-role {
background: var(--ae-chip);
color: var(--ae-text-muted);
}
html:not([data-mode="dark"]) .profile-dropdown {
background: var(--ae-surface);
border-color: var(--ae-border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
html:not([data-mode="dark"]) .profile-dropdown-item { color: var(--ae-text-subtle); }
html:not([data-mode="dark"]) .profile-dropdown-item:hover {
background: var(--ae-hover);
color: var(--ae-text);
}
html:not([data-mode="dark"]) .profile-dropdown-item.active {
background: var(--ae-accent-soft);
color: var(--accent-text);
}
html:not([data-mode="dark"]) .profile-dropdown-divider { background: var(--ae-border); }
html:not([data-mode="dark"]) .profile-dropdown-logout:hover {
background: rgba(239, 68, 68, 0.08);
color: #dc2626;
}
/* ---- Studio admin login (/auth/studio) — full viewport, no white gap ---- */
.login-page {
--login-accent: #38bdf8;
--login-accent-deep: #0ea5e9;
--login-ink: #0b1220;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.25rem, 4vw, 2.5rem);
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(165deg, #070b14 0%, #0f172a 42%, #152238 78%, #162544 100%);
}
.login-page::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 55% at 15% -5%, rgba(56, 189, 248, 0.28), transparent 52%),
radial-gradient(ellipse 70% 45% at 100% 15%, rgba(99, 102, 241, 0.22), transparent 48%),
radial-gradient(ellipse 55% 40% at 85% 100%, rgba(20, 184, 166, 0.12), transparent 45%);
pointer-events: none;
z-index: 0;
}
.login-page::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M32 0h32v32H32V0zm0 32h32v32H32V32zM0 32h32v32H0V32zm0-32h32v32H0V0z'/%3E%3C/svg%3E");
opacity: 1;
pointer-events: none;
z-index: 0;
}
.login-page > * {
position: relative;
z-index: 1;
}
.login-container {
width: 100%;
max-width: 420px;
padding: 0;
}
.login-card {
background: rgba(255, 255, 255, 0.97);
border-radius: 18px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.06),
0 28px 64px -12px rgba(0, 0, 0, 0.45),
0 12px 24px -8px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
}
.login-brand-mark {
display: inline-block;
margin: 0 auto 14px;
text-decoration: none;
line-height: 0;
}
.login-brand-mark .login-brand-img {
height: 56px;
width: auto;
max-width: none;
display: block;
}
.login-title {
font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--login-ink) !important;
}
.login-sub {
color: #64748b !important;
}
.login-page .btn-primary {
background: linear-gradient(135deg, var(--login-accent-deep) 0%, #0284c7 100%);
border: none;
font-weight: 700;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
box-shadow: 0 10px 28px rgba(14, 165, 233, 0.35);
transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.login-page .btn-primary:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 14px 36px rgba(14, 165, 233, 0.42);
}
.login-page .form-control:focus {
border-color: rgba(14, 165, 233, 0.65);
box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.18);
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-icon {
font-size: 2.5rem;
color: var(--accent);
}
.login-header h1 {
font-size: 1.5rem;
font-weight: 700;
margin: 0.5rem 0 0.25rem;
}
/* ---- Admin Layout ---- */
.admin-wrapper {
display: flex;
min-height: 100vh;
font-family: var(--ae-font);
color: var(--ae-text);
}
.admin-sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
color: var(--sidebar-text);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
transition: width 0.2s ease;
overflow: hidden;
}
.admin-sidebar.collapsed {
width: 64px;
}
.admin-sidebar.collapsed .sidebar-brand,
.admin-sidebar.collapsed .nav-item span,
.admin-sidebar.collapsed .nav-section,
.admin-sidebar.collapsed .user-info span {
display: none;
}
.admin-sidebar.collapsed .sidebar-brand-wrap {
display: none;
}
.sidebar-header {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem;
color: var(--sidebar-text);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}
.sidebar-logo-mark {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--sidebar-logo-bg);
border: 1px solid var(--sidebar-logo-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sidebar-logo-mark i {
font-size: 1.25rem;
color: var(--sidebar-logo-icon);
}
.sidebar-brand-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
line-height: 1.1;
min-width: 0;
text-decoration: none;
color: inherit;
}
.sidebar-brand-logo {
height: 36px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
.sidebar-brand {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
white-space: nowrap;
}
.sidebar-subbrand {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(199, 210, 254, 0.75);
margin-top: 0.15rem;
}
.admin-sidebar.collapsed .sidebar-header {
justify-content: center;
padding: 0.9rem 0;
}
.sidebar-nav {
flex: 1;
padding: 0 0 0.75rem;
overflow-y: auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: rgba(199, 210, 254, 0.25) transparent;
}
/* Sticky search band — keeps the menu filter (and its expand/collapse controls)
pinned to the top of the sidebar while the nav list scrolls underneath. The solid
sidebar background + bottom divider mask items sliding behind it. */
.nav-sticky-head {
position: sticky;
top: 0;
z-index: 5;
background: var(--sidebar-bg);
padding: 0.75rem 0 0.4rem;
border-bottom: 1px solid var(--ae-border);
}
.admin-sidebar.collapsed .nav-sticky-head { display: none; }
.sidebar-nav::-webkit-scrollbar {
width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background-color: rgba(199, 210, 254, 0.22);
border-radius: 3px;
transition: background-color 0.15s ease;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb {
background-color: rgba(199, 210, 254, 0.4);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background-color: rgba(199, 210, 254, 0.6);
}
/* Sidebar menu search — filters nav items live (see AdminLayout.BuildVisibleSections).
Uses --ae-* tokens so it follows the active theme (incl. midnight/dark). */
.nav-search {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0.75rem 0.25rem;
padding: 0.4rem 0.6rem;
background: var(--ae-bg-soft);
border: 1px solid var(--ae-border);
border-radius: 8px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search:focus-within {
border-color: var(--ae-primary);
box-shadow: 0 0 0 3px var(--ae-accent-soft);
}
.nav-search-icon {
flex-shrink: 0;
font-size: 0.85rem;
color: var(--ae-soft);
}
.nav-search-input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--ae-text);
font-size: 0.85rem;
}
.nav-search-input::placeholder { color: var(--ae-soft); }
.nav-search-clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
border: 0;
background: none;
color: var(--ae-soft);
font-size: 0.7rem;
line-height: 1;
cursor: pointer;
transition: color 0.15s;
}
.nav-search-clear:hover { color: var(--ae-text); }
/* Icon-rail mode has no room for a text field — hide it like the toolbar. */
.admin-sidebar.collapsed .nav-search { display: none; }
.nav-search-empty {
padding: 1rem;
margin: 0 0.5rem;
font-size: 0.82rem;
color: var(--ae-text-muted);
text-align: center;
}
.nav-toolbar {
display: flex;
justify-content: flex-end;
gap: 0.125rem;
padding: 0.5rem 0.75rem 0;
}
.nav-toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: none;
border: 0;
border-radius: 4px;
color: rgba(199, 210, 254, 0.5);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.nav-toolbar-btn:hover {
color: rgba(199, 210, 254, 0.95);
background: rgba(255, 255, 255, 0.06);
}
.admin-sidebar.collapsed .nav-toolbar { display: none; }
.nav-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
padding: 1rem 1rem 0.375rem;
background: none;
border: 0;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(199, 210, 254, 0.5);
text-align: left;
cursor: pointer;
transition: color 0.15s;
}
.nav-section:hover { color: rgba(199, 210, 254, 0.85); }
.nav-section-chevron {
font-size: 0.75rem;
transition: transform 0.18s ease;
}
.nav-section.is-collapsed .nav-section-chevron {
transform: rotate(-90deg);
}
.nav-section-items.is-collapsed { display: none; }
/* When the whole sidebar is reduced to icons, ignore per-section collapse
so users can still reach every nav item from the icon rail. */
.admin-sidebar.collapsed .nav-section-items.is-collapsed { display: block; }
.nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 1rem;
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.875rem;
border-radius: 6px;
margin: 1px 0.5rem;
transition: background 0.15s, color 0.15s;
}
.nav-item:hover {
background: var(--sidebar-hover);
color: #fff;
}
.nav-item.active {
background: var(--sidebar-active);
color: #fff;
font-weight: 600;
}
/* ── Shared modal form helpers ──
Used by the Assign Package, Issue Gift Card and Add Attendee modals to give
each section a small-caps header and to render the issuance-type / payment-method
radios as a full-width segmented control. */
.form-section-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
margin-top: 8px;
margin-bottom: 10px;
}
.form-section-label-hint {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #9ca3af;
}
.mode-toggle .btn {
border-radius: 8px !important;
}
.mode-toggle .btn-check + .btn {
white-space: normal;
line-height: 1.3;
}
.mode-toggle .btn-check:disabled + .btn {
opacity: 0.5;
cursor: not-allowed;
}
.mode-toggle .btn-check + .btn:not(:first-of-type) {
margin-left: 8px;
}
.nav-item i {
font-size: 1.1rem;
width: 1.25rem;
text-align: center;
}
.sidebar-footer {
padding: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-menu-wrapper { position: relative; }
.profile-trigger {
display: flex; align-items: center; gap: 0.5rem; width: 100%;
padding: 0.5rem 0.6rem; border: none; border-radius: 8px;
background: rgba(255,255,255,0.06); color: rgba(199,210,254,0.85);
font-size: 0.8rem; cursor: pointer; transition: background 0.15s;
text-align: left;
}
.profile-trigger:hover { background: rgba(255,255,255,0.1); }
.profile-trigger .bi-person-circle { font-size: 1.3rem; flex-shrink: 0; }
.profile-trigger-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.profile-trigger-role { font-size: 0.68rem; background: rgba(255,255,255,0.12); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.profile-trigger-arrow { font-size: 0.6rem; transition: transform 0.2s; opacity: 0.6; }
.profile-trigger-arrow.open { transform: rotate(180deg); }
.profile-dropdown {
position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
background: var(--sidebar-dropdown-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
box-shadow: 0 -8px 24px rgba(0,0,0,0.35); padding: 4px; z-index: 100;
animation: profileSlideUp 0.15s ease;
}
@keyframes profileSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.profile-dropdown-item {
display: flex; align-items: center; gap: 0.5rem; width: 100%;
padding: 0.45rem 0.65rem; border: none; border-radius: 6px;
background: none; color: rgba(199,210,254,0.8); font-size: 0.8rem;
cursor: pointer; text-decoration: none; transition: background 0.12s;
}
.profile-dropdown-item:hover { background: rgba(255,255,255,0.08); color: var(--accent-text); }
.profile-dropdown-item.active { background: rgba(99,102,241,0.2); color: #c7d2fe; }
.profile-dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.profile-dropdown-logout:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }
.profile-dropdown-langform { padding: 6px 8px 4px; }
.profile-dropdown-langlabel {
display: flex; align-items: center; gap: 6px;
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: rgba(199,210,254,0.6); margin-bottom: 6px;
}
.profile-dropdown-langflags { display: flex; gap: 6px; }
.profile-dropdown-langflag {
appearance: none; background: transparent; border: 1px solid transparent;
border-radius: 999px; cursor: pointer; padding: 3px;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
opacity: 0.55;
}
.profile-dropdown-langflag:hover { opacity: 1; transform: scale(1.06); background: rgba(255,255,255,0.06); }
.profile-dropdown-langflag.is-active {
opacity: 1;
border-color: rgba(165,180,252,0.7);
background: rgba(99,102,241,0.18);
}
.profile-dropdown-langflag-img {
width: 22px; height: 22px;
border-radius: 50%;
object-fit: cover;
display: block;
pointer-events: none;
}
html:not([data-mode="dark"]) .profile-dropdown-langlabel { color: var(--ae-text-muted); }
html:not([data-mode="dark"]) .profile-dropdown-langflag:hover { background: var(--ae-hover); }
html:not([data-mode="dark"]) .profile-dropdown-langflag.is-active {
border-color: var(--accent); background: rgba(var(--accent-rgb),0.1);
}
.admin-sidebar.collapsed .profile-trigger-name,
.admin-sidebar.collapsed .profile-trigger-role,
.admin-sidebar.collapsed .profile-trigger-arrow { display: none; }
.admin-sidebar.collapsed .profile-dropdown { left: 100%; bottom: 0; width: 200px; margin-left: 6px; }
/* ---- Main Content ---- */
.admin-main {
flex: 1;
min-width: 0; /* allow flex child to shrink so inner grids measure real content width */
margin-left: var(--sidebar-width);
transition: margin-left 0.2s ease;
background: var(--ae-bg);
min-height: 100vh;
}
.admin-sidebar.collapsed ~ .admin-main {
margin-left: 64px;
}
.admin-topbar {
height: var(--topbar-height);
background: color-mix(in srgb, var(--ae-surface) 85%, transparent);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--ae-border);
display: flex;
align-items: center;
padding: 0 1.5rem;
position: sticky;
top: 0;
z-index: 900;
}
.admin-content {
padding: 1.5rem;
min-width: 0;
}
/* ---- Dashboard Cards ---- */
.dashboard-card {
border: 1px solid #e2e8f0;
border-radius: 12px;
transition: transform 0.15s, box-shadow 0.15s;
}
.dashboard-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dashboard-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
/* ---- Tables ---- */
.table th {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ae-text-muted); /* was a hardcoded slate #64748b — the one grey-blue on every warm page */
border-bottom-width: 2px;
}
.table td {
vertical-align: middle;
}
/* ---- Status Badges (theme-driven via --ae-pill-* tokens) ---- */
.badge-status {
font-size: 0.75rem;
padding: 0.25rem 0.625rem;
border-radius: var(--ae-r-pill);
font-weight: 600;
}
.badge-visible { background: var(--ae-pill-ok-bg); color: var(--ae-pill-ok-fg); }
.badge-hidden { background: var(--ae-pill-warn-bg); color: var(--ae-pill-warn-fg); }
.badge-disabled { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
/* .badge-draft is defined once, below, on the warn pill tokens (a second, hardcoded slate copy used to sit here and lose the cascade). */
.badge-active { background: var(--ae-pill-ok-bg); color: var(--ae-pill-ok-fg); }
.badge-pending_first_payment { background: var(--ae-pill-info-bg); color: var(--ae-pill-info-fg); }
.badge-past_due { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
.badge-canceled { background: var(--ae-pill-muted-bg); color: var(--ae-pill-muted-fg); }
.badge-expired { background: var(--ae-pill-warn-bg); color: var(--ae-pill-warn-fg); }
.badge-paid { background: var(--ae-pill-ok-bg); color: var(--ae-pill-ok-fg); }
.badge-pending { background: var(--ae-pill-info-bg); color: var(--ae-pill-info-fg); }
.badge-failed { background: var(--ae-pill-danger-bg); color: var(--ae-pill-danger-fg); }
.badge-refunded { background: var(--ae-pill-muted-bg); color: var(--ae-pill-muted-fg); }
/* Enrollment programs (draft → publish lifecycle) + roster registration states */
.badge-draft { background: var(--ae-pill-warn-bg); color: var(--ae-pill-warn-fg); }
.badge-open { background: var(--ae-pill-ok-bg); color: var(--ae-pill-ok-fg); }
.badge-closed { background: var(--ae-pill-info-bg); color: var(--ae-pill-info-fg); }
.badge-waitlisted { background: var(--ae-pill-warn-bg); color: var(--ae-pill-warn-fg); }
.badge-dropped { background: var(--ae-pill-muted-bg); color: var(--ae-pill-muted-fg); }
/* ---- Deleted rows ---- */
tr.ae-row-deleted td {
opacity: 0.5;
}
tr.ae-row-deleted {
background-color: #fffbeb !important;
}
/* ---- Show-deleted toggle ---- */
.show-deleted-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: #64748b;
cursor: pointer;
user-select: none;
}
.show-deleted-toggle input[type="checkbox"] {
width: 2rem;
height: 1.1rem;
cursor: pointer;
}
/* ---- Studio Selector (topbar) ---- */
.studio-selector {
display: flex;
align-items: center;
gap: 4px;
}
/* ── Studio picker (custom dropdown replacing the native ) ────────── */
.studio-picker { position: relative; }
.studio-picker-trigger {
display: inline-flex; align-items: center; gap: 10px;
min-width: 220px; max-width: 320px;
padding: 6px 10px 6px 6px;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
font-size: 0.88rem; font-weight: 500; color: #1e293b;
cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.studio-picker-trigger:hover { border-color: #cbd5e1; background: #fff; }
.studio-picker-trigger.open {
border-color: var(--accent, var(--accent));
background: #fff;
box-shadow: 0 0 0 3px var(--accent-shadow, rgba(99,102,241,0.15));
}
.studio-picker-avatar {
width: 28px; height: 28px; border-radius: 7px;
background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-size: 0.95rem; flex-shrink: 0;
}
.studio-picker-name {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: left;
}
.studio-picker-caret {
font-size: 0.7rem; color: #94a3b8;
transition: transform 0.18s ease;
}
.studio-picker-trigger.open .studio-picker-caret { transform: rotate(180deg); }
.studio-picker-menu {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 260px; max-width: 360px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
box-shadow: 0 12px 28px -8px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
padding: 6px; z-index: 200;
animation: studioPickerIn 0.14s ease;
}
@keyframes studioPickerIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.studio-picker-search {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; margin-bottom: 4px;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
color: #94a3b8;
}
.studio-picker-search input {
flex: 1; border: none; outline: none; background: transparent;
font-size: 0.85rem; color: #1e293b;
}
.studio-picker-list { max-height: 320px; overflow-y: auto; }
.studio-picker-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; border: none; border-radius: 8px;
background: none; color: #334155; font-size: 0.87rem; font-weight: 500;
text-align: left; cursor: pointer; transition: background 0.12s;
}
.studio-picker-item:hover { background: #f1f5f9; color: #0f172a; }
.studio-picker-item.active { background: var(--accent-light); color: var(--accent-text); }
.studio-picker-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-picker-item-check { font-size: 1rem; color: var(--accent-text); }
.studio-picker-empty { padding: 12px 10px; font-size: 0.82rem; color: #94a3b8; text-align: center; }
/* Dark theme tweaks */
[data-theme="dark"] .studio-picker-trigger { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #e2e8f0; }
[data-theme="dark"] .studio-picker-trigger:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
[data-theme="dark"] .studio-picker-menu { background: #1e1e2e; border-color: rgba(255,255,255,0.1); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
[data-theme="dark"] .studio-picker-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .studio-picker-search input { color: #e2e8f0; }
[data-theme="dark"] .studio-picker-item { color: rgba(226,232,240,0.85); }
[data-theme="dark"] .studio-picker-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .studio-picker-item.active { background: rgba(99,102,241,0.2); color: #c7d2fe; }
/* ────────────────────────────────────────────────────────────────────────
Onboarding Tasks Badge (topbar widget) — surfaces pending setup steps.
──────────────────────────────────────────────────────────────────────── */
.onboarding-tasks { position: relative; }
.onboarding-tasks-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: linear-gradient(135deg, var(--accent-light) 0%, #f5f3ff 100%);
border: 1px solid #c7d2fe; border-radius: 10px;
color: var(--accent-text); font-size: 0.85rem; font-weight: 600;
cursor: pointer; transition: all 0.15s;
}
.onboarding-tasks-trigger:hover {
border-color: var(--accent); background: var(--accent-light);
box-shadow: 0 1px 4px rgba(var(--accent-rgb),0.18);
}
.onboarding-tasks-trigger.open {
background: var(--accent); border-color: var(--accent-text); color: #fff;
box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
.onboarding-tasks-trigger i { font-size: 0.95rem; }
.onboarding-tasks-label { line-height: 1; }
.onboarding-tasks-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
background: var(--accent); color: #fff; border-radius: 10px;
font-size: 0.72rem; font-weight: 700;
}
.onboarding-tasks-trigger.open .onboarding-tasks-count { background: #fff; color: var(--accent-text); }
.onboarding-tasks-menu {
position: absolute; top: calc(100% + 8px); right: 0;
width: 400px; max-width: 90vw;
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
box-shadow: 0 16px 36px -10px rgba(15,23,42,0.24), 0 2px 8px rgba(15,23,42,0.06);
z-index: 240;
animation: studioPickerIn 0.14s ease;
overflow: hidden;
}
.onboarding-tasks-header {
padding: 14px 16px 12px;
background: linear-gradient(135deg, var(--accent-light) 0%, #fef3f2 100%);
border-bottom: 1px solid var(--accent-light);
}
.onboarding-tasks-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.onboarding-tasks-subtitle { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.onboarding-tasks-progress {
height: 6px; background: rgba(255,255,255,0.7); border-radius: 999px;
margin-top: 10px; overflow: hidden;
}
.onboarding-tasks-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
border-radius: 999px; transition: width 0.3s;
}
.onboarding-tasks-list { padding: 6px; max-height: 320px; overflow-y: auto; }
.onboarding-tasks-item {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 10px 12px; border-radius: 10px;
min-height: 62px;
box-sizing: border-box;
color: #1e293b; text-decoration: none; text-align: left;
background: transparent; border: 0; cursor: pointer;
transition: background 0.12s, transform 0.1s;
}
.onboarding-tasks-item:hover { background: #f1f5f9; color: #0f172a; transform: translateX(2px); }
.onboarding-tasks-item-icon {
flex-shrink: 0;
width: 34px; height: 34px; border-radius: 9px;
background: var(--accent-light); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem;
}
.onboarding-tasks-item-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.onboarding-tasks-item-title { font-size: 0.87rem; font-weight: 600; line-height: 1.2; }
.onboarding-tasks-item-desc { font-size: 0.75rem; color: #64748b; line-height: 1.3; }
.onboarding-tasks-item-arrow { color: #94a3b8; font-size: 0.85rem; flex-shrink: 0; }
.onboarding-tasks-done {
padding: 8px 6px 10px; border-top: 1px solid var(--accent-light);
background: #fafafb;
}
.onboarding-tasks-done-header {
padding: 2px 12px 6px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
color: #94a3b8; text-transform: uppercase;
}
.onboarding-tasks-done-item {
display: flex; align-items: center; gap: 8px;
padding: 4px 12px;
font-size: 0.82rem; color: #64748b;
}
.onboarding-tasks-done-item i { color: #10b981; font-size: 0.95rem; }
/* Dark theme */
[data-theme="dark"] .onboarding-tasks-trigger { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.35); color: #c7d2fe; }
[data-theme="dark"] .onboarding-tasks-trigger:hover { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.55); }
[data-theme="dark"] .onboarding-tasks-trigger.open { background: var(--accent); color: #fff; }
[data-theme="dark"] .onboarding-tasks-menu { background: #1e1e2e; border-color: rgba(255,255,255,0.1); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
[data-theme="dark"] .onboarding-tasks-header { background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.15) 100%); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .onboarding-tasks-title { color: #fff; }
[data-theme="dark"] .onboarding-tasks-subtitle { color: rgba(226,232,240,0.7); }
[data-theme="dark"] .onboarding-tasks-item { color: rgba(226,232,240,0.92); }
[data-theme="dark"] .onboarding-tasks-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .onboarding-tasks-item-icon { background: rgba(99,102,241,0.18); color: #c7d2fe; }
[data-theme="dark"] .onboarding-tasks-item-desc { color: rgba(226,232,240,0.55); }
[data-theme="dark"] .onboarding-tasks-done { background: rgba(255,255,255,0.02); border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .onboarding-tasks-done-item { color: rgba(226,232,240,0.6); }
.studio-select {
width: auto;
min-width: 180px;
max-width: 280px;
font-size: 0.85rem;
border-color: #e2e8f0;
border-radius: 6px;
padding: 4px 28px 4px 8px;
background-color: #f8fafc;
cursor: pointer;
}
.studio-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-shadow);
}
.studio-badge {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
color: #64748b;
background: #f1f5f9;
padding: 4px 12px;
border-radius: 6px;
border: 1px solid #e2e8f0;
}
/* ---- Studio Links (topbar: website + client area) ---- */
.studio-links {
display: inline-flex;
align-items: center;
gap: 6px;
}
.studio-link-btn {
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 6px;
border-color: #e2e8f0;
background: #f8fafc;
color: #475569;
line-height: 1.2;
white-space: nowrap;
}
.studio-link-btn:hover,
.studio-link-btn:focus {
background: var(--accent-light);
border-color: #c7d2fe;
color: var(--accent-text);
}
/* ── Scroll boxes that used to be inline styles ───────────────────────────────
These five classes replaced inline max-height/padding on their elements so the
mobile layer could relax them. The mobile rules below OVERRIDE these — without a
desktop definition here the caps would simply vanish above 768px, which is how a
long agreement or webhook payload ends up pushing its own Save button off screen. */
.admin-content .agreement-body { max-height: 46vh; overflow-y: auto; }
.admin-content .la-req-list { max-height: 240px; overflow-y: auto; }
.admin-content .la-drill-cell { padding: 14px 18px 18px 40px; }
.admin-content .wh-pre { max-height: 40vh; }
.admin-content .wh-pre-tall { max-height: 60vh; }
@media (max-width: 768px) {
.studio-link-label { display: none; }
.studio-link-btn { padding: 4px 8px; }
.studio-link-btn .bi { margin-right: 0 !important; }
}
/* ---- Gallery block admin editor ---- */
.gallery-draft-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.gallery-draft-item {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.gallery-draft-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-draft-actions {
position: absolute;
inset: auto 0 0 0;
display: flex;
justify-content: space-between;
padding: 6px;
background: linear-gradient(to top, rgba(15,23,42,0.7), transparent);
opacity: 0;
transition: opacity .15s ease;
}
.gallery-draft-item:hover .gallery-draft-actions {
opacity: 1;
}
.gallery-draft-actions .btn {
padding: 2px 8px;
font-size: 12px;
line-height: 1.2;
}
/* ---- HTML Editor (Quill 2.x wrapper) ---- */
.html-editor-wrapper {
border: 1.5px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.html-editor-wrapper:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08);
}
/* Quill applies its own borders — remove them so our wrapper owns the rounded look. */
.html-editor-wrapper .ql-toolbar.ql-snow,
.html-editor-wrapper .ql-container.ql-snow {
border: none;
}
.html-editor-wrapper .ql-toolbar.ql-snow {
background: #f8fafc;
border-bottom: 1px solid #f1f5f9;
padding: 6px 8px;
}
.html-editor-wrapper .ql-container.ql-snow {
font-family: inherit;
font-size: 14px;
}
.html-editor-wrapper .ql-editor {
min-height: inherit;
padding: 12px 16px;
line-height: 1.6;
}
.html-editor-wrapper .ql-editor.ql-blank::before {
color: #94a3b8;
font-style: normal;
}
/* ---- Image Upload Widget ---- */
.image-upload-widget {
display: inline-block;
}
/* ── Drop-zone (empty state) ── */
.image-upload-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 140px;
padding: 24px 16px;
border: 2px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.image-upload-dropzone:hover,
.image-upload-dropzone.is-dragover {
border-color: var(--accent);
background: var(--accent-light);
box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.image-upload-dropzone.is-uploading {
pointer-events: none;
opacity: .7;
}
.image-upload-dropzone-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--accent-light);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.image-upload-dropzone-text {
font-size: 13px;
color: #475569;
}
.image-upload-dropzone-text strong {
color: var(--accent);
}
.image-upload-dropzone-hint {
font-size: 11px;
color: #94a3b8;
}
/* ── Preview card (has image) ── */
.image-upload-preview {
position: relative;
display: inline-block;
border-radius: 12px;
overflow: hidden;
border: 2px solid #e2e8f0;
background: #f8fafc;
transition: border-color .2s;
}
.image-upload-preview:hover {
border-color: #cbd5e1;
}
.image-upload-preview img {
display: block;
width: 140px;
height: 140px;
object-fit: cover;
}
.image-upload-preview-actions {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity .2s;
}
.image-upload-preview:hover .image-upload-preview-actions {
opacity: 1;
}
.image-upload-action-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: rgba(255,255,255,.92);
backdrop-filter: blur(4px);
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
transition: background .15s, color .15s;
}
.image-upload-action-btn:hover {
background: #fff;
color: #1e293b;
}
.image-upload-action-danger:hover {
background: #fef2f2;
color: #dc2626;
}
/* ── Entity-edit "Picture" column standard ──
Shared by ServiceEdit / PackageEdit / EventEdit. Put the picture label + its
inside a Bootstrap column and add `pic-col`. The picture then sits
to the right of the description (label on its own line above) and stretches to
match the description's height — Bootstrap columns are equal-height, so the
widget flexes to fill and the image covers it. */
.pic-col { display: flex; flex-direction: column; }
.pic-col .form-label { display: block; }
.pic-col .image-upload-widget { display: flex; flex-direction: column; flex: 1; width: 100%; }
.pic-col .image-upload-preview { display: block; width: 100%; flex: 1; min-height: 200px; }
.pic-col .image-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.pic-col .image-upload-dropzone { flex: 1; }
@media (max-width: 767.98px) {
.pic-col .image-upload-preview { min-height: 0; }
.pic-col .image-upload-preview img { height: 220px; }
}
/* Compact variant for entities without a description (categories, users, locations):
just puts the label on its own line above a modestly-sized square preview instead
of the label sitting inline beside the uploader. */
.pic-col-compact .form-label { display: block; }
.pic-col-compact .image-upload-widget { display: block; width: 100%; max-width: 220px; }
.pic-col-compact .image-upload-preview { display: block; width: 100%; }
.pic-col-compact .image-upload-preview img { width: 100%; height: 200px; object-fit: cover; }
/* ── ImageUpload trim/normalise editor (opt-in via