/*
 * PsyAll white-label theme
 * Override these CSS variables (inline or admin config) to rebrand another clinic.
 * Default palette follows the PsyAll logo: forest green ↔ teal on light surfaces.
 */
:root {
    /* Brand identity (white-label knobs) */
    --brand-name: "PsyAll";
    --brand-primary: #1f7a4d;
    --brand-primary-rgb: 31, 122, 77;
    --brand-secondary: #1ab8b0;
    --brand-secondary-rgb: 26, 184, 176;
    --brand-accent: #2ec4b6;
    --brand-ink: #163528;
    --brand-muted: #5b7268;
    --brand-on-primary: #ffffff;

    /* Surfaces — light mixes */
    --brand-surface: #ffffff;
    --brand-surface-soft: #f5fbf8;
    --brand-surface-tint: #eef8f5;
    --brand-border: rgba(var(--brand-primary-rgb), 0.12);
    --brand-shadow: rgba(var(--brand-primary-rgb), 0.10);

    /* Gradients — clear / light blends from logo colors */
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    --brand-gradient-soft: linear-gradient(
        135deg,
        rgba(var(--brand-primary-rgb), 0.14) 0%,
        rgba(var(--brand-secondary-rgb), 0.12) 55%,
        rgba(255, 255, 255, 0.95) 100%
    );
    --brand-gradient-page: linear-gradient(
        165deg,
        #ffffff 0%,
        #f3fbf7 38%,
        #eef9f8 72%,
        #f7fcfb 100%
    );
    --brand-gradient-hero: radial-gradient(1200px 520px at 8% -12%, rgba(var(--brand-secondary-rgb), 0.22), transparent 55%),
        radial-gradient(900px 420px at 92% 0%, rgba(var(--brand-primary-rgb), 0.16), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%);
    --brand-gradient-nav: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(243, 251, 247, 0.96) 45%,
        rgba(238, 249, 248, 0.96) 100%
    );
    --brand-gradient-sidebar: linear-gradient(
        180deg,
        #ffffff 0%,
        #f4fbf8 45%,
        #eef9f7 100%
    );
    --brand-gradient-chip: linear-gradient(
        135deg,
        rgba(var(--brand-primary-rgb), 0.12),
        rgba(var(--brand-secondary-rgb), 0.14)
    );

    /* Compat aliases used across site.css */
    --primary-green: var(--brand-primary);
    --secondary-green: var(--brand-secondary);
    --light-green: var(--brand-surface-tint);
    --dark-green: var(--brand-ink);
    --psy-green: var(--brand-primary);
    --psy-teal: var(--brand-secondary);
    --gradient-green: var(--brand-gradient);
    --gradient-green-light: var(--brand-gradient-soft);
    --shadow-green: var(--brand-shadow);
    --text-dark: var(--brand-ink);
    --text-muted: var(--brand-muted);
    --text-light: var(--brand-on-primary);
    --surface: var(--brand-surface);
    --surface-soft: var(--brand-surface-soft);
    --border-soft: var(--brand-border);
}

/* Light auth shells (login / register) */
.wl-auth-page {
    min-height: 100vh;
    background: var(--brand-gradient-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5.5rem 1rem 2rem;
}

.wl-auth-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    box-shadow: 0 18px 48px var(--brand-shadow);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.wl-auth-header {
    background: var(--brand-gradient-soft);
    border-bottom: 1px solid var(--brand-border);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.wl-auth-header h1,
.wl-auth-header .wl-auth-title {
    color: var(--brand-ink);
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

.wl-auth-header p {
    color: var(--brand-muted);
    margin: 0;
}

.wl-auth-btn {
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    width: 100%;
}

.wl-auth-btn:hover {
    filter: brightness(1.04);
    color: #fff;
}

.wl-top-navbar {
    background: var(--brand-gradient-nav) !important;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.06);
}

.wl-top-navbar .navbar-brand,
.wl-top-navbar .nav-link,
.wl-top-navbar .btn-outline-light {
    color: var(--brand-ink) !important;
}

.wl-top-navbar .btn-outline-light {
    border-color: rgba(var(--brand-primary-rgb), 0.28);
}

.wl-top-navbar .btn-outline-light:hover {
    background: var(--brand-gradient-chip);
}