@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Raleway:wght@400;600;700;800&display=swap');

:root {
    /* DM Sans: clean, slightly warm/soft — much less "space-y" than Inter or Plus Jakarta Sans */
    --lu-font-body: "DM Sans", sans-serif;
    /* Outfit: geometric but rounded and friendly — replaces the colder Space Grotesk */
    --lu-font-display: "Outfit", sans-serif;
    --lu-font-mono: "JetBrains Mono", ui-monospace, monospace;

    --lu-bg-top: #0d1526;
    /* Blue-tinted canvas behind page headers — gives the app a crisper, less neutral look. */
    --lu-canvas-top: #e8edf8;
    --lu-bg-bottom: #f1f5fb;
    --lu-surface: #ffffff;
    --lu-surface-2: #f5f9ff;
    /* Top bar: deep navy */
    --lu-surface-dark: #0a1140;
    --lu-surface-dark-rgb: 10, 17, 64;
    /* Sidebar: ice-blue tint — just enough to separate from white content */
    --lu-surface-sidebar-rgb: 241, 245, 253;

    --lu-text: #0f172a;
    --lu-muted: #4f637d;
    --lu-text-on-canvas-strong: rgba(15, 23, 42, 0.94);
    --lu-text-on-canvas-muted: rgba(15, 23, 42, 0.68);
    --lu-text-on-dark-strong: rgba(255, 255, 255, 0.96);
    --lu-text-on-dark-muted: rgba(255, 255, 255, 0.78);

    /* Sidebar light: dark text on white */
    --lu-sidebar-text-strong: rgba(15, 23, 42, 0.90);
    --lu-sidebar-text-strong-rgb: 15, 23, 42;
    --lu-sidebar-text-muted: rgba(15, 23, 42, 0.55);
    --lu-sidebar-text-icon: rgba(15, 23, 42, 0.38);
    /* Blue-600 — primary accent, clear on white */
    --lu-sidebar-accent: #2563eb;
    --lu-sidebar-accent-rgb: 37, 99, 235;

    --lu-border: rgba(15, 23, 42, 0.11);
    --lu-border-on-dark: rgba(255, 255, 255, 0.13);

    /* Blue 600 — more vibrant than the previous flat #1b6ec2 */
    --lu-primary: #2563eb;
    --lu-primary-rgb: 37, 99, 235;
    --lu-success: #198754;
    --lu-success-rgb: 25, 135, 84;

    /* Accent violet — adds visual variety without clashing */
    --lu-accent: #7c3aed;
    --lu-accent-rgb: 124, 58, 237;

    --lu-radius-sm: 10px;
    --lu-radius-md: 14px;
    /* Crisper, layered shadows instead of a single diffuse blur */
    --lu-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.08);
    --lu-shadow-md: 0 8px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);

    /* Bootstrap variables */
    --bs-body-font-family: var(--lu-font-body);
    --bs-body-color: var(--lu-text);
    --bs-body-bg: var(--lu-bg-bottom);
    --bs-border-color: var(--lu-border);

    --bs-primary: var(--lu-primary);
    --bs-primary-rgb: var(--lu-primary-rgb);
    --bs-success: var(--lu-success);
    --bs-success-rgb: var(--lu-success-rgb);

    --bs-link-color: var(--lu-primary);
    --bs-link-hover-color: #1a4ec0;

    --bs-border-radius: var(--lu-radius-sm);
    --bs-border-radius-lg: var(--lu-radius-md);
}

html, body {
    font-family: var(--lu-font-body);
    background: var(--lu-bg-bottom);
}

body {
    min-height: 100vh;
    color: var(--lu-text);
    background: var(--lu-bg-bottom);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lu-font-display);
    letter-spacing: -0.01em;
}

a {
    text-underline-offset: 0.18em;
}

a, .btn-link {
    color: var(--lu-primary);
}

a:hover, .btn-link:hover {
    color: #1a4ec0;
}

.card, .modal-content, .dropdown-menu {
    border-radius: var(--lu-radius-md);
}

/*
 * Global modal safety: keep dialog above backdrop and avoid backdrop
 * intercepting input events when third-party overlays/extensions alter stacking.
 */
body.modal-open .modal-backdrop.show {
    z-index: 200000;
}

body.modal-open .modal.show {
    z-index: 200010;
}

/*
 * HxModal is rendered inside page content; lu-animate-in keeps transform: translateY(0)
 * because of animation fill-mode and creates a stacking context that can place the modal
 * below the backdrop. Remove transform while a modal is open.
 */
body.modal-open .lu-animate-in {
    transform: none !important;
    animation: none !important;
}

.card {
    border-color: var(--lu-border);
    box-shadow: var(--lu-shadow-sm);
}

/* Gradient primary button — much more distinctive than a flat colour */
.btn-primary {
    background: linear-gradient(135deg, #2d70f5 0%, #1d4ed8 100%);
    border-color: #2058d8;
    box-shadow: 0 4px 14px rgba(var(--lu-primary-rgb), 0.28);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(135deg, #1d4ed8 0%, #1a3fb5 100%);
    border-color: #1a3fb5;
    box-shadow: 0 6px 20px rgba(var(--lu-primary-rgb), 0.36);
}

.form-control, .form-select {
    border-color: rgba(15, 23, 42, 0.16);
}

.form-control:focus, .form-select:focus {
    border-color: rgba(var(--lu-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.25rem rgba(var(--lu-primary-rgb), 0.16);
}

.table {
    --bs-table-bg: var(--lu-surface);
    border-color: rgba(15, 23, 42, 0.08);
}

/* Uppercase small-caps header — much cleaner than muted body-text headers */
.table thead th {
    font-family: var(--lu-font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lu-muted);
    background-color: rgba(var(--lu-primary-rgb), 0.04);
}

@keyframes lu-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.lu-animate-in {
    animation: lu-fade-up 180ms ease-out both;
}

.lu-userbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.lu-userbar .btn {
    border-radius: 999px;
}

.lu-userbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--lu-text-on-dark-strong);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.lu-userbar-link:hover {
    color: var(--lu-text-on-dark-strong);
    background: rgba(255, 255, 255, 0.16);
}

/* Page header over the dark "hero" background (top gradient). */
.lu-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    margin-bottom: 1rem;
}

.content > h1,
.content > h2,
.content > h3 {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    font-family: var(--lu-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lu-text-on-canvas-strong);
}

.content > h1 a,
.content > h2 a,
.content > h3 a {
    color: var(--lu-primary);
}

.content > h1 a:hover,
.content > h2 a:hover,
.content > h3 a:hover {
    color: #1a4ec0;
}

.lu-pagehead-title {
    margin: 0;
    font-family: var(--lu-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem);
    color: var(--lu-text-on-canvas-strong);
}

.lu-pagehead-title a {
    color: var(--lu-primary);
    text-decoration: none;
}

.lu-pagehead-title a:hover {
    color: #1a4ec0;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.lu-pagehead-sep {
    display: inline-block;
    margin: 0 0.35rem;
    color: var(--lu-text-on-canvas-muted);
}

.lu-pagehead-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lu-page-subhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.4rem 0 1rem 0;
    flex-wrap: wrap;
}

.lu-page-subhead a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--lu-text-on-canvas-muted);
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.13);
}

.lu-page-subhead a:hover {
    color: var(--lu-text-on-canvas-strong);
    background: rgba(15, 23, 42, 0.09);
    border-color: rgba(15, 23, 42, 0.20);
}

.lu-divider {
    border-color: rgba(15, 23, 42, 0.11);
    opacity: 1;
}

.therapy-page-help .therapy-page-help-summary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 650;
    cursor: pointer;
    text-align: left;
}

.therapy-page-help .therapy-page-help-summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
    border-radius: 10px;
}

.therapy-page-help .therapy-page-help-chevron {
    flex: 0 0 auto;
    opacity: 0.75;
    transform: rotate(0deg);
    transition: transform 140ms ease, opacity 140ms ease;
}

.therapy-page-help.is-open .therapy-page-help-chevron {
    transform: rotate(90deg);
    opacity: 0.95;
}

.therapy-page-help .therapy-page-help-body {
    color: rgba(15, 23, 42, 0.92);
}

/* Sidebar body chrome override — keep sidebar flush with the main header surface */
.hx-sidebar-body {
    border-right: none;
}