/* ============================================================
   SILVERBACK GLOBAL STUDIOS — "Aurora" Design System
   ============================================================ */

:root {
    /* Brand core */
    --ink: #0b0b23;
    --ink-2: #14143a;
    --navy: #0a1f3c;

    /* Aurora palette */
    --violet: #7c3aed;
    --indigo: #6366f1;
    --pink: #ec4899;
    --cyan: #06b6d4;
    --amber: #f59e0b;
    --emerald: #10b981;

    /* Surfaces */
    --bg: #ffffff;
    --bg-soft: #f6f7fb;
    --bg-tint: #f0eefb;
    --line: #e7e8f0;
    --text: #1c1c33;
    --muted: #6b6f86;

    /* Semantic surfaces (themeable) — light values keep the current look.
       Components should use these instead of hardcoded #fff so dark mode
       can recolour every page at once. */
    --surface: #ffffff;      /* cards, panels, toolbars */
    --surface-2: #f8fafc;    /* inputs, secondary fills */
    --surface-3: #f1f5f9;    /* chips, ghost buttons, hover */
    --border-soft: #e5e7eb;  /* card/panel borders */
    --heading: var(--ink);   /* headings / strong text */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    --grad-aurora: linear-gradient(120deg, #6366f1 0%, #8b5cf6 30%, #ec4899 62%, #06b6d4 100%);
    --grad-night: linear-gradient(135deg, #0b0b23 0%, #1a1340 45%, #3b1d63 100%);
    --grad-cta: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #ec4899 100%);

    /* Effects */
    --radius: 18px;
    --radius-lg: 26px;
    --shadow-sm: 0 4px 14px rgba(20, 20, 58, 0.08);
    --shadow: 0 18px 40px -12px rgba(80, 40, 160, 0.25);
    --shadow-lg: 0 30px 70px -20px rgba(80, 40, 160, 0.40);
    --glow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 16px 40px -10px rgba(124, 58, 237, 0.55);

    --container: 1200px;
}

* {
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

p { margin: 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; cursor: pointer; color: var(--indigo); transition: color .2s ease; }
img { max-width: 100%; }

h1:focus, h2:focus { outline: none; }

::selection { background: rgba(124, 58, 237, 0.22); }

/* ---------- Layout helpers ---------- */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
}

.section-padding { padding: clamp(48px, 7vw, 96px) 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--violet);
    background: var(--bg-tint);
    border: 1px solid rgba(124, 58, 237, 0.18);
    padding: .5rem 1rem;
    border-radius: 999px;
}

.eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--grad-primary);
}

.gradient-text {
    background: var(--grad-aurora);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.section-head h1, .section-head h2 {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    margin: 1rem 0 .85rem;
}

.section-head p {
    color: var(--muted);
    font-size: 1.075rem;
}

/* Legacy "line" divider — now a gradient accent bar */
.line {
    height: 4px;
    flex-grow: 1;
    border-radius: 999px;
    background: var(--grad-aurora);
    opacity: .85;
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.my-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-primary,
.btn-aurora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.9rem;
    color: #fff !important;
    background: var(--grad-primary);
    background-size: 180% 180%;
    box-shadow: 0 14px 30px -10px rgba(219, 39, 119, 0.55);
}

.btn-primary:hover,
.btn-aurora:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -12px rgba(124, 58, 237, 0.65);
    background-position: right center;
    color: #fff !important;
}

.btn-sm { padding: .65rem 1.4rem !important; font-size: .9rem; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.7rem;
    border-radius: 999px;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all .25s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    color: #fff;
}

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .22rem rgba(124, 58, 237, 0.30);
    outline: none;
}

.my-btn {
    padding: .9rem 1.6rem;
    color: #fff;
    background: var(--grad-cta);
    box-shadow: 0 16px 34px -12px rgba(99, 102, 241, 0.6);
}

.my-btn:hover { transform: translateY(-3px); }

/* ---------- Brand color utilities (kept for component reuse) ---------- */
.main-blue-bg { background: var(--grad-night); color: #fff; }
.main-blue-txt { color: var(--ink); }
.secondary-blue-bg { background: var(--grad-primary); }
.gray-bg { background: var(--bg-soft); }
.gray-txt { color: var(--muted); }
.text-gold { color: #fbbf24; }

/* ---------- Cards & glass ---------- */
.glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* ---------- Decorative blobs ---------- */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
}

/* ---------- Scroll reveal ----------
   Content is visible by default. It is only hidden (to be animated in)
   when JS has confirmed it is active AND able to reveal it again. */
.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}

.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-ready .reveal.d1 { transition-delay: .08s; }
.reveal-ready .reveal.d2 { transition-delay: .16s; }
.reveal-ready .reveal.d3 { transition-delay: .24s; }
.reveal-ready .reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Nav link (legacy class kept) ---------- */
.my-nav-link {
    position: relative;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .98rem;
    padding: .35rem .2rem;
    transition: color .25s ease;
}

.my-nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--grad-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
    border-radius: 2px;
}

.my-nav-link:hover { color: var(--violet); }
.my-nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Forms ---------- */
.form-control {
    border-radius: 12px;
    border: 1.5px solid var(--line);
    padding: .7rem 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus {
    border-color: var(--violet);
}

label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }

.letter-input {
    padding: .75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 100%;
    margin-bottom: .85rem;
}

.letter-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.letter-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); }

/* ---------- Validation ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--emerald); }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: #ef4444; font-size: .88rem; }

.alert-info {
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background: var(--bg-tint);
    color: var(--ink);
}

/* ---------- Content / topbar shell ---------- */
.content { padding-top: 0; }

.topbar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

a > i { transition: transform .2s ease, color .2s ease; }

hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.footerhr { margin: 2.5rem 0 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* ---------- Loading + error (Blazor defaults) ---------- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

.loading-progress {
    position: relative; display: block;
    width: 8rem; height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none; stroke: #e6e3f5;
    stroke-width: 0.55rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #7c3aed;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ─────────────────────────────────────────────
   Shared Admin Page Shell (Clients, Team, Emails,
   Tasks, Game Areas).  Lives in app.css because
   the same classes are referenced from multiple
   Razor components and Blazor scoped CSS would
   isolate each one.
   ───────────────────────────────────────────── */
.page-shell {
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ph-hero {
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #ec4899 100%);
    border-radius: 20px;
    padding: 1.75rem 2.25rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.45);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}

.ph-hero::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.ph-hero--emerald { background: linear-gradient(135deg, #047857 0%, #06b6d4 50%, #6366f1 100%); }
.ph-hero--amber { background: linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #ef4444 100%); }
.ph-hero--violet { background: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 50%, #ec4899 100%); }
.ph-hero--sky { background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 50%, #0d9488 100%); }
.ph-hero--rose { background: linear-gradient(135deg, #831843 0%, #ec4899 50%, #f59e0b 100%); }

.ph-hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.7rem;
    position: relative;
    z-index: 1;
    color: #fff;
}

.ph-hero h1 {
    margin: 0 0 0.3rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    color: #fff;
}

.ph-hero__sub {
    margin: 0;
    opacity: 0.92;
    font-size: 0.95rem;
    max-width: 560px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.ph-hero__cta {
    background: #fff;
    color: #4338ca;
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.92rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ph-hero__cta:hover {
    transform: translateY(-2px);
    color: #4338ca;
}

.ph-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ph-stat {
    border-radius: 14px;
    padding: 1rem 1.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.2);
}

.ph-stat::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.ph-stat--violet { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.ph-stat--amber { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ph-stat--emerald { background: linear-gradient(135deg, #10b981, #06b6d4); }
.ph-stat--coral { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.ph-stat--sky { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.ph-stat--slate { background: linear-gradient(135deg, #475569, #1e293b); }

.ph-stat__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}

.ph-stat__value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.35rem;
    position: relative;
    z-index: 1;
}

.ph-toolbar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.ph-search {
    flex: 1;
    min-width: 200px;
    border: none;
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    outline: none;
}

.ph-search:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}

.ph-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ph-chip {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ph-chip:hover { border-color: #c7d2fe; color: #4338ca; }

.ph-chip--active {
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    color: #fff;
    border-color: transparent;
}

.ph-empty {
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

.ph-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 0.4rem;
}

.ph-empty h3 {
    margin: 0 0 0.4rem;
    color: #334155;
    font-size: 1.1rem;
}

.ph-empty p { margin: 0; }

.ph-toast {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #a7f3d0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.ph-toast button {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: inherit;
}

/* Cards */
.ph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.ph-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.ph-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 42, 0.15);
}

.ph-card--team::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 16px 16px 0 0;
}

.ph-card__crown {
    position: absolute;
    top: 0.55rem;
    right: 0.8rem;
    font-size: 1.05rem;
}

.ph-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.15);
}

.ph-card__body { flex: 1; min-width: 0; }

.ph-card__name {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-card__meta {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ph-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
}

.ph-pill--ok { background: #d1fae5; color: #065f46; }
.ph-pill--warn { background: #fef3c7; color: #92400e; }
.ph-pill--admin {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    color: #92400e;
    border: 1px solid #fde68a;
}
.ph-pill--booking { background: #e0e7ff; color: #3730a3; }
.ph-pill--info { background: #cffafe; color: #155e75; }

.ph-card__line {
    display: flex;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #64748b;
}

/* Modal (shared) */
.ph-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ph-modal__panel {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    animation: phModalIn 0.22s ease-out;
}

@keyframes phModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ph-modal__head {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, #4338ca, #7c3aed);
}

.ph-modal__head--amber { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ph-modal__head--emerald { background: linear-gradient(135deg, #10b981, #06b6d4); }

.ph-modal__head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.ph-modal__close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ph-modal__close:hover { background: rgba(255, 255, 255, 0.32); }

.ph-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
}

.ph-form-row { margin-bottom: 0.9rem; }

.ph-form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.ph-form-control {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.92rem;
    background: #f8fafc;
    transition: all 0.15s ease;
    font-family: inherit;
}

.ph-form-control:focus {
    outline: none;
    border-color: #4338ca;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}

.ph-form-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ph-form-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    margin-top: 0.85rem;
    font-size: 0.86rem;
}

.ph-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.ph-btn-ghost {
    background: #f1f5f9;
    border: none;
    padding: 0.65rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.ph-btn-ghost:hover { background: #e2e8f0; }

.ph-btn-primary {
    border: none;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ph-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

@media (max-width: 700px) {
    .page-shell { padding: 1rem; }
    .ph-hero { padding: 1.5rem; }
    .ph-hero h1 { font-size: 1.6rem; }
    .ph-form-row-pair { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   A single source of truth: flipping html[data-theme="dark"]
   recolours every page at once. The palette below remaps the
   design-system variables; the rules after it cover the global
   helper classes defined in this file that use hardcoded light
   surfaces. Per-component scoped styles add their own dark
   overrides via :global(html[data-theme="dark"]).
   ============================================================ */
html[data-theme="dark"] {
    /* Brand core (headings & strong text now read light) */
    --ink: #f3f3fb;
    --ink-2: #e6e6f4;

    /* Surfaces */
    --bg: #0b0b16;
    --bg-soft: #12121f;
    --bg-tint: #1a1533;
    --line: #2a2a3d;
    --text: #e6e6f2;
    --muted: #a3a5bd;

    /* Semantic surfaces */
    --surface: #181826;
    --surface-2: #1f1f2e;
    --surface-3: #262636;
    --border-soft: #2c2c40;
    --heading: var(--ink);
    --glass-bg: rgba(26, 26, 40, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Soften the heavy purple drop-shadows on dark */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}

/* Smooth the switch */
html[data-theme="dark"] body,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .ph-card,
html[data-theme="dark"] .ph-toolbar,
html[data-theme="dark"] .ph-modal__panel {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- Glass / cards ---------- */
html[data-theme="dark"] .glass {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
html[data-theme="dark"] .form-control:focus { border-color: var(--violet); }

html[data-theme="dark"] .alert-info {
    background: var(--bg-tint);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--text);
}

/* ---------- Shared admin/portal page shell ---------- */
html[data-theme="dark"] .page-shell { color: var(--text); }

html[data-theme="dark"] .ph-toolbar {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .ph-search {
    background: var(--surface-2);
    color: var(--text);
}
html[data-theme="dark"] .ph-search::placeholder { color: var(--muted); }
html[data-theme="dark"] .ph-search:focus {
    background: var(--surface-3);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

html[data-theme="dark"] .ph-chip {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}
html[data-theme="dark"] .ph-chip:hover { border-color: #4f46e5; color: #c7d2fe; }

html[data-theme="dark"] .ph-empty {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--muted);
}
html[data-theme="dark"] .ph-empty h3 { color: var(--text); }

html[data-theme="dark"] .ph-card {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .ph-card:hover {
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .ph-card__name { color: var(--text); }
html[data-theme="dark"] .ph-card__line { color: var(--muted); }

html[data-theme="dark"] .ph-modal__panel {
    background: var(--surface);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .ph-modal__body { color: var(--text); }

html[data-theme="dark"] .ph-form-row label { color: var(--text); }

html[data-theme="dark"] .ph-form-control {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text);
}
html[data-theme="dark"] .ph-form-control:focus {
    background: var(--surface-3);
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

html[data-theme="dark"] .ph-btn-ghost {
    background: var(--surface-3);
    color: var(--text);
}
html[data-theme="dark"] .ph-btn-ghost:hover { background: #30303f; }

/* Status pills keep their hues but lift contrast slightly on dark */
html[data-theme="dark"] .ph-pill--ok { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .ph-pill--warn { background: #78350f; color: #fcd34d; }
html[data-theme="dark"] .ph-pill--booking { background: #312e81; color: #c7d2fe; }
html[data-theme="dark"] .ph-pill--info { background: #155e75; color: #a5f3fc; }

/* ---------- Theme toggle button ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.theme-toggle:hover {
    transform: translateY(-2px) rotate(-12deg);
    border-color: var(--violet);
    color: var(--violet);
}
html[data-theme="dark"] .theme-toggle {
    background: var(--surface-2);
    color: var(--amber);
    border-color: var(--line);
}
html[data-theme="dark"] .theme-toggle:hover {
    color: #fcd34d;
    border-color: var(--amber);
}

/* Links switched off for now (Book Consultation, R&D, Register / Create an account): greyed, not clickable. */
.sb-off {
    opacity: 0.45 !important;
    filter: grayscale(1) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}