/* ============================================================ DanceYourLife Studio — Admin Panel Styles ============================================================ */ /* ============================================================ FocusOnNavigate — kill the page-title focus outline (GLOBAL, every page). Routes.razor renders exactly once, so the ONLY element auto-focused after any navigation is the page

. 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.75rem 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(199, 210, 254, 0.25) transparent; } .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: #64748b; 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-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