/* ============================================================================
   Hynder theme - "Nebula": metro-purple, futuristic, soft.
   Dark violet base + bold neon glow. Mobile-first (PWA).

   Loaded AFTER bootstrap.css in the ~/Content/css bundle, so everything here
   layers on top of Bootstrap 5.2.3. We re-skin by (a) overriding Bootstrap's
   CSS custom properties on :root and (b) a thin layer of component rules where
   Bootstrap hard-codes colors. No bootstrap.css edits, no markup changes.
   ============================================================================ */

/* ---- Design tokens ------------------------------------------------------- */
:root {
    /* Canvas + surfaces */
    --hy-bg-0: #0e0a1a;
    --hy-bg-1: #150f2b;
    --hy-surface: rgba(31, 23, 56, 0.66);
    --hy-surface-solid: #1b1430;
    --hy-surface-2: rgba(45, 33, 78, 0.72);

    /* Lines + text */
    --hy-border: rgba(157, 123, 255, 0.18);
    --hy-border-strong: rgba(157, 123, 255, 0.40);
    --hy-text: #ece8f5;
    --hy-text-muted: #a99fc4;
    --hy-heading: #f6f3ff;

    /* Brand */
    --hy-primary: #7c4dff;
    --hy-primary-rgb: 124, 77, 255;
    --hy-primary-bright: #9d7bff;
    --hy-accent: #e040fb;
    --hy-accent-rgb: 224, 64, 251;

    /* Status - tuned to sit beside the violet without clashing */
    --hy-success: #3ddc97;
    --hy-success-rgb: 61, 220, 151;
    --hy-danger: #ff5d73;
    --hy-danger-rgb: 255, 93, 115;
    --hy-warning: #ffb454;
    --hy-warning-rgb: 255, 180, 84;

    /* Glow + depth */
    --hy-glow-primary: 0 0 0.5rem rgba(var(--hy-primary-rgb), .55), 0 0 1.5rem rgba(var(--hy-primary-rgb), .28);
    --hy-glow-accent: 0 0 0.5rem rgba(var(--hy-accent-rgb), .55), 0 0 1.75rem rgba(var(--hy-accent-rgb), .30);
    --hy-glow-success: 0 0 0.5rem rgba(var(--hy-success-rgb), .50), 0 0 1.5rem rgba(var(--hy-success-rgb), .25);
    --hy-shadow-soft: 0 0.75rem 2rem rgba(5, 2, 18, .55);

    /* Shape */
    --hy-radius: 1.1rem;
    --hy-radius-sm: 0.7rem;

    /* Bootstrap variable bridge -------------------------------------------- */
    --bs-body-bg: var(--hy-bg-0);
    --bs-body-color: var(--hy-text);
    --bs-emphasis-color: var(--hy-heading);
    --bs-heading-color: var(--hy-heading);
    --bs-secondary-color: var(--hy-text-muted);
    --bs-tertiary-color: var(--hy-text-muted);

    --bs-border-color: var(--hy-border);
    --bs-border-radius: var(--hy-radius-sm);
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: var(--hy-radius);
    --bs-border-radius-xl: 1.4rem;

    --bs-primary: var(--hy-primary);
    --bs-primary-rgb: var(--hy-primary-rgb);
    --bs-link-color: var(--hy-primary-bright);
    --bs-link-color-rgb: 157, 123, 255;
    --bs-link-hover-color: var(--hy-accent);
    --bs-link-hover-color-rgb: var(--hy-accent-rgb);

    --bs-code-color: var(--hy-accent);

    color-scheme: dark;
}

/* ---- Canvas + typography ------------------------------------------------- */
body {
    background:
        radial-gradient(1100px 760px at 12% -12%, rgba(var(--hy-primary-rgb), .22), transparent 60%),
        radial-gradient(960px 680px at 112% 8%, rgba(var(--hy-accent-rgb), .16), transparent 55%),
        linear-gradient(165deg, var(--hy-bg-0) 0%, var(--hy-bg-1) 100%);
    background-attachment: fixed;
    color: var(--hy-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Slow neon aurora drifting behind everything (bold-neon flourish). */
body::before {
    content: "";
    position: fixed;
    inset: -30vmax;
    z-index: -1;
    pointer-events: none;
    background:
        conic-gradient(from 0deg at 30% 30%, rgba(var(--hy-primary-rgb), .16), transparent 35%, rgba(var(--hy-accent-rgb), .14) 60%, transparent 80%);
    filter: blur(60px);
    opacity: .65;
    animation: hy-aurora 38s linear infinite;
}

@keyframes hy-aurora {
    to { transform: rotate(1turn); }
}

h1, h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(92deg, var(--hy-heading) 0%, var(--hy-primary-bright) 55%, var(--hy-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hy-heading); /* fallback if clip unsupported */
}

h3, h4, h5, h6 {
    color: var(--hy-heading);
    font-weight: 600;
}

.lead { color: var(--hy-text-muted); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.text-muted { color: var(--hy-text-muted) !important; }
.text-danger { color: var(--hy-danger) !important; }
.text-success { color: var(--hy-success) !important; }

code {
    color: var(--hy-accent);
    background: rgba(var(--hy-accent-rgb), .10);
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
}

hr {
    border-color: var(--hy-border);
    opacity: 1;
}

/* Selection + custom scrollbar - small futuristic details. */
::selection {
    background: rgba(var(--hy-accent-rgb), .35);
    color: #fff;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hy-primary) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--hy-primary), var(--hy-accent));
    border-radius: 50rem;
    border: 2px solid transparent;
    background-clip: padding-box;
}

footer {
    color: var(--hy-text-muted);
    font-size: 0.875rem;
}

/* ---- Navbar -------------------------------------------------------------- */
.navbar.bg-dark {
    background: linear-gradient(100deg, rgba(20, 13, 40, .92), rgba(33, 18, 60, .88)) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hy-border-strong);
    box-shadow: 0 0.5rem 1.5rem rgba(5, 2, 18, .45), inset 0 -1px 0 rgba(var(--hy-accent-rgb), .25);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(92deg, var(--hy-primary-bright), var(--hy-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.5rem rgba(var(--hy-accent-rgb), .45));
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--hy-text-muted);
    font-weight: 500;
    border-radius: 50rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    transition: color .18s ease, background-color .18s ease, text-shadow .18s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    text-shadow: 0 0 0.6rem rgba(var(--hy-primary-rgb), .8);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(var(--hy-primary-rgb), .18);
}

.navbar-toggler {
    border-color: var(--hy-border-strong);
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--hy-primary-rgb), .35);
}

/* Mobile: the collapsed menu drops below - give it a readable glass panel. */
@media (max-width: 575.98px) {
    .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: var(--hy-surface-2);
        border: 1px solid var(--hy-border);
        border-radius: var(--hy-radius);
        box-shadow: var(--hy-shadow-soft);
    }
}

/* ---- Cards (frosted glass) ----------------------------------------------- */
.card {
    --bs-card-bg: var(--hy-surface);
    --bs-card-border-color: var(--hy-border);
    --bs-card-border-radius: var(--hy-radius);
    --bs-card-inner-border-radius: calc(var(--hy-radius) - 1px);
    --bs-card-color: var(--hy-text);
    --bs-card-cap-bg: rgba(var(--hy-primary-rgb), .10);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--hy-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The Discover candidate card is the hero surface - lift + glow it on hover. */
.card:hover {
    border-color: var(--hy-border-strong);
    box-shadow: var(--hy-shadow-soft), var(--hy-glow-primary);
}

.card-title { color: var(--hy-heading); }

.card-footer {
    background: rgba(var(--hy-primary-rgb), .06);
    border-top: 1px solid var(--hy-border);
}

.img-thumbnail {
    background-color: var(--hy-surface-solid);
    border: 1px solid var(--hy-border-strong);
    box-shadow: 0 0 0.75rem rgba(var(--hy-primary-rgb), .30);
}

/* ---- List groups --------------------------------------------------------- */
.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--hy-text);
    --bs-list-group-border-color: var(--hy-border);
    --bs-list-group-border-radius: var(--hy-radius);
    --bs-list-group-action-color: var(--hy-text);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-action-hover-bg: rgba(var(--hy-primary-rgb), .12);
    gap: 0.5rem;
}

.list-group-item {
    background: var(--hy-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--hy-border) !important;
    border-radius: var(--hy-radius) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.list-group-item:hover {
    border-color: var(--hy-border-strong) !important;
    box-shadow: var(--hy-glow-primary);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 50rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.25rem;
    letter-spacing: 0.01em;
    transition: transform .15s ease, box-shadow .2s ease, background-position .4s ease, filter .2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--hy-primary-rgb), .4) !important;
}

/* Primary / dark - the template's de-facto primary action. Gradient + glow. */
.btn-primary,
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-bg: var(--hy-primary);
    --bs-btn-hover-bg: var(--hy-primary);
    --bs-btn-active-bg: var(--hy-primary);
    background-image: linear-gradient(100deg, var(--hy-primary) 0%, var(--hy-accent) 100%);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: var(--hy-glow-primary);
}
.btn-primary:hover,
.btn-dark:hover {
    background-position: 100% 0;
    box-shadow: var(--hy-glow-accent);
}

/* Success - Like / Message. Mint gradient + glow. */
.btn-success {
    --bs-btn-color: #06231a;
    --bs-btn-hover-color: #06231a;
    --bs-btn-active-color: #06231a;
    --bs-btn-bg: var(--hy-success);
    --bs-btn-hover-bg: var(--hy-success);
    --bs-btn-active-bg: var(--hy-success);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    background-image: linear-gradient(100deg, var(--hy-success) 0%, #51e6c0 100%);
    box-shadow: var(--hy-glow-success);
    font-weight: 700;
}
.btn-success:hover {
    box-shadow: 0 0 0.6rem rgba(var(--hy-success-rgb), .7), 0 0 1.9rem rgba(var(--hy-success-rgb), .4);
}

/* Outline + secondary + link - glassy, low-key actions (Pass, View, Unmatch). */
.btn-outline-secondary,
.btn-outline-dark,
.btn-secondary,
.btn-default {
    --bs-btn-color: var(--hy-text);
    --bs-btn-bg: rgba(var(--hy-primary-rgb), .08);
    --bs-btn-border-color: var(--hy-border-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--hy-primary-rgb), .20);
    --bs-btn-hover-border-color: var(--hy-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--hy-primary-rgb), .28);
    --bs-btn-active-border-color: var(--hy-primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--hy-danger);
    --bs-btn-border-color: rgba(var(--hy-danger-rgb), .55);
    --bs-btn-hover-color: #2a0008;
    --bs-btn-hover-bg: var(--hy-danger);
    --bs-btn-hover-border-color: var(--hy-danger);
    --bs-btn-active-bg: var(--hy-danger);
}
.btn-outline-danger:hover {
    box-shadow: 0 0 0.6rem rgba(var(--hy-danger-rgb), .5);
}

.btn-link {
    --bs-btn-color: var(--hy-primary-bright);
    --bs-btn-hover-color: var(--hy-accent);
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* BS3 leftover on Default.aspx - keep it from rendering unstyled. */
.btn-default { background-image: none; }

/* ---- Forms --------------------------------------------------------------- */
.form-control,
.form-select {
    color: var(--hy-text);
    background-color: rgba(8, 5, 20, .55);
    border: 1px solid var(--hy-border);
    border-radius: var(--hy-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:focus,
.form-select:focus {
    color: var(--hy-text);
    background-color: rgba(8, 5, 20, .8);
    border-color: var(--hy-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--hy-primary-rgb), .25), 0 0 1rem rgba(var(--hy-primary-rgb), .25);
}

.form-control::placeholder { color: var(--hy-text-muted); opacity: .65; }

.form-select { background-color: rgba(8, 5, 20, .55); }
.form-select option { background-color: var(--hy-surface-solid); color: var(--hy-text); }

.form-text { color: var(--hy-text-muted); }

/* asp:CheckBox renders its CssClass onto the wrapping <span>, not the <input> -
   .form-check-input never reaches the real control, leaving the native
   checkbox unstyled and "floating" over the intended box. Style the tag
   itself so it applies no matter where WebForms puts the wrapper. */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.1em;
    height: 1.1em;
    min-width: 1.1em;
    margin: 0 0.4em 0 0;
    border: 2px solid var(--hy-border-strong);
    border-radius: 0.3em;
    background-color: rgba(8, 5, 20, .55);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"]:hover {
    border-color: var(--hy-primary);
    box-shadow: 0 0 0.4rem rgba(var(--hy-primary-rgb), .35);
}

input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--hy-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--hy-primary-rgb), .25);
}

input[type="checkbox"]:checked {
    background-color: var(--hy-primary);
    border-color: var(--hy-primary);
    box-shadow: 0 0 0.5rem rgba(var(--hy-primary-rgb), .55);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.3em;
    top: 0.05em;
    width: 0.3em;
    height: 0.55em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:active {
    transform: scale(0.92);
}

/* Bootstrap's own .form-check-input rule (float + negative margin, 1em white
   box) still targets that <span> - neutralize it so only the real, custom-
   styled <input> above is visible/clickable, with no ghost box behind it. */
span.form-check-input {
    display: inline;
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

label, .form-label { color: var(--hy-text); }

/* Keep input-group ends square-ish so the pill buttons don't bubble out. */
.input-group > .btn,
.input-group > .form-control {
    --bs-btn-border-radius: var(--hy-radius-sm);
}

/* ---- Alerts -------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--hy-radius);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.alert-success {
    color: #c9ffe9;
    background: rgba(var(--hy-success-rgb), .12);
    border-color: rgba(var(--hy-success-rgb), .45);
    box-shadow: var(--hy-glow-success);
}

.alert-danger {
    color: #ffd7dd;
    background: rgba(var(--hy-danger-rgb), .12);
    border-color: rgba(var(--hy-danger-rgb), .45);
}

.alert-info,
.alert-primary {
    color: #e7ddff;
    background: rgba(var(--hy-primary-rgb), .12);
    border-color: rgba(var(--hy-primary-rgb), .45);
}

.alert-warning {
    color: #ffe9c7;
    background: rgba(var(--hy-warning-rgb), .12);
    border-color: rgba(var(--hy-warning-rgb), .45);
}

.alert-link { color: inherit; font-weight: 700; }

/* "It's a match!" - the one alert that earns a pulsing neon accent. */
.alert-success {
    animation: hy-match-pulse 2.6s ease-in-out infinite;
}

@keyframes hy-match-pulse {
    0%, 100% { box-shadow: 0 0 0.4rem rgba(var(--hy-success-rgb), .35), 0 0 1.2rem rgba(var(--hy-success-rgb), .18); }
    50%      { box-shadow: 0 0 0.8rem rgba(var(--hy-success-rgb), .7), 0 0 2.2rem rgba(var(--hy-success-rgb), .4); }
}

/* ---- Badges -------------------------------------------------------------- */
.badge.bg-primary,
.badge.text-bg-primary {
    background: linear-gradient(100deg, var(--hy-primary), var(--hy-accent)) !important;
    color: #fff !important;
    box-shadow: 0 0 0.5rem rgba(var(--hy-primary-rgb), .45);
}
.badge.bg-success, .badge.text-bg-success { background-color: var(--hy-success) !important; color: #06231a !important; }
.badge.bg-secondary, .badge.text-bg-secondary {
    background: rgba(var(--hy-primary-rgb), .18) !important;
    color: var(--hy-text) !important;
}

/* ============================================================================
   Functional component styles (carried over, restyled to the theme)
   ============================================================================ */

.body-content {
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

.dl-horizontal dt { white-space: normal; }

/* Form inputs would otherwise stretch full width. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Password field show/hide toggle + caps-lock warning (wired by Site.js). */
.password-input-group { max-width: 280px; }
.password-input-group .form-control { max-width: none; }

.password-toggle {
    display: inline-flex;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.password-toggle .password-icon { vertical-align: -0.125em; }

.password-caps-warning { max-width: 280px; }

@media screen and (min-width: 768px) {
    .body-content { padding: 0; }
}

/* Inline checkbox lists on the profile editor. */
.hy-checklist label {
    margin-right: 1rem;
    margin-left: 0.25rem;
}

/* Personality quiz Likert options. */
.hy-likert label {
    margin-right: 1.25rem;
    margin-left: 0.25rem;
}

/* Last-seen activity indicator (recency dot + label). */
.hy-activity {
    color: var(--hy-text-muted);
    font-size: 0.875rem;
}

.hy-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid transparent;
}

.hy-dot-green {
    background-color: var(--hy-success);
    box-shadow: 0 0 0.4rem rgba(var(--hy-success-rgb), .8);
}

.hy-dot-yellow {
    background-color: var(--hy-warning);
    box-shadow: 0 0 0.4rem rgba(var(--hy-warning-rgb), .8);
}

.hy-dot-grey { background-color: var(--hy-text-muted); }

.hy-dot-hollow {
    background-color: transparent;
    border-color: var(--hy-text-muted);
}

/* ---- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    .alert-success { animation: none; }
    .btn, .card, .list-group-item, .nav-link { transition: none; }
}

/* ---- Accessibility: user-selectable text scale (FEATURES.md §9) ---------- */
/* Bumping the root font-size scales every rem-based size (Bootstrap is rem-based),
   so the whole UI grows proportionally rather than just paragraph text. */
html.hy-scale-lg { font-size: 1.0625rem; }
html.hy-scale-xl { font-size: 1.1875rem; }

/* ---- Map (Hynder-Spec "Map") --------------------------------------------- */
/* Pins sit on the home-base city centroid, never a finer location. */
.hy-map {
    height: 70vh;
    min-height: 360px;
    width: 100%;
    border-radius: .5rem;
}
.hy-map-popup { text-align: center; }
.hy-map-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: .35rem;
}