/* ============================================================
   IDMe design system — modern, glassy, motion-aware.
   Brand color vars (--brand-primary/secondary/accent) are injected
   per-request in App.razor; the static tokens live here.
   ============================================================ */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;

    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --border: rgba(15, 23, 42, .14);
    --border-strong: rgba(15, 23, 42, .22);
    --text: #0f172a;
    --text-2: #475569;
    --muted: #8792a6;

    --bg-app: #eef1f7;
    --header-bg: rgba(255, 255, 255, .72);
    --footer-bg: rgba(255, 255, 255, .6);

    --glass-bg: rgba(255, 255, 255, .55);
    --glass-border: rgba(255, 255, 255, .75);
    --glass-shadow: 0 12px 40px -12px rgba(16, 24, 40, .18);

    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius: 14px;
    --radius-sm: 10px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px -4px rgba(16, 24, 40, .12);
    --shadow-md: 0 10px 28px -8px rgba(16, 24, 40, .14), 0 3px 10px -3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 30px 70px -18px rgba(16, 24, 40, .28);

    /* Matches the landing hero tile (deep #0076BD blue). */
    --sidebar-bg: linear-gradient(180deg, #063a5c 0%, #05283f 55%, #041d30 100%);
    --sidebar-fg: #c2ccdd;
    --sidebar-fg-muted: #7c88a3;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 140ms var(--ease);
    --t: 220ms var(--ease);
}

/* ---- Dark theme — shades of #0076BD ---- */
:root[data-theme="dark"] {
    --surface: #0b2637;
    --surface-2: #08202f;
    --border: rgba(120, 180, 215, .16);
    --border-strong: rgba(120, 180, 215, .30);
    --text: #e4eef6;
    --text-2: #aecadb;
    --muted: #7ea0b4;

    --bg-app: #05161f;
    --header-bg: rgba(8, 32, 47, .72);
    --footer-bg: rgba(8, 32, 47, .55);

    --glass-bg: rgba(148, 197, 230, .07);
    --glass-border: rgba(148, 197, 230, .16);
    --glass-shadow: 0 16px 44px -16px rgba(0, 0, 0, .6);

    --sidebar-bg: linear-gradient(180deg, #062133 0%, #041019 100%);
    --sidebar-fg: #cfe0ec;
    --sidebar-fg-muted: #6f93a8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, .55), 0 3px 10px -3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 30px 70px -18px rgba(0, 0, 0, .7);

    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

a,
a:visited {
    color: var(--brand-primary, #0076BD);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: color-mix(in srgb, var(--brand-primary, #0076BD) 80%, #000);
}

/* Dark mode: white links (also overrides the browser's purple :visited). */
:root[data-theme="dark"] a,
:root[data-theme="dark"] a:visited {
    color: #ffffff;
}

:root[data-theme="dark"] a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Custom scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .4) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .55);
    background-clip: content-box;
}

::selection {
    background: color-mix(in srgb, var(--brand-primary, #1565C0) 22%, transparent);
}

/* Motion */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatBlob {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30px, -20px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---- MudBlazor polish (gentle, additive) ---- */

.mud-paper, .mud-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-card {
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.mud-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
    border-color: color-mix(in srgb, var(--brand-primary, #1565C0) 35%, var(--border));
}

.mud-button-root {
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 11px !important;
    transition: transform var(--t-fast), box-shadow var(--t), filter var(--t-fast) !important;
}

.mud-button-filled.mud-button-filled-primary {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-primary, #1565C0) 92%, white),
        var(--brand-secondary, #0D47A1)) !important;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-primary, #1565C0) 70%, transparent) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-1px);
    filter: saturate(1.1);
    box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--brand-primary, #1565C0) 80%, transparent) !important;
}

.mud-expansion-panels .mud-expand-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    margin-bottom: .6rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   Auth pages (login / register / password) — glass card layout.
   ============================================================ */

.auth-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 100% 0%, #0a3a5c 0%, transparent 55%),
        radial-gradient(120% 120% at 0% 100%, #06304d 0%, transparent 55%),
        linear-gradient(160deg, #041d30 0%, #05283f 100%);
}

.auth-wrap::before,
.auth-wrap::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    z-index: 0;
}

.auth-wrap::before {
    top: -120px;
    right: -80px;
    background: color-mix(in srgb, var(--brand-primary, #1565C0) 80%, transparent);
    animation: floatBlob 14s var(--ease) infinite;
}

.auth-wrap::after {
    bottom: -140px;
    left: -100px;
    background: color-mix(in srgb, var(--brand-accent, #00897B) 70%, transparent);
    animation: floatBlob 18s var(--ease) infinite reverse;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2.25rem;
    /* Always a light card on the dark auth backdrop — keep it a self-contained
       light context so text/inputs stay readable regardless of the app theme. */
    background: #ffffff;
    color: #0f172a;
    color-scheme: light;
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: fadeInUp .5s var(--ease) both;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .5px;
    background: linear-gradient(135deg, var(--brand-primary, #1565C0), var(--brand-accent, #00897B));
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand-primary, #1565C0) 70%, transparent);
}

.auth-brand-logo {
    max-height: 46px;
    max-width: 170px;
}

.auth-brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.auth-foot {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
    text-align: center;
}

/* Modernize the Bootstrap form inside the auth card */
.auth-card h1 {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

.auth-card h1 {
    color: #0f172a;
}

.auth-card h2, .auth-card h3 {
    font-size: .95rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 1rem;
}

.auth-card label,
.auth-card .form-label,
.auth-card .form-floating > label {
    color: #475569;
}

.auth-card hr {
    display: none;
}

.auth-card .row,
.auth-card [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
}

.auth-card .form-control {
    width: 100%;
}

.auth-card .form-control {
    border-radius: 12px;
    border: 1px solid #d5dae3;
    background: #ffffff;
    color: #0f172a;
    padding: .8rem 1rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Floating-label fields: hide the placeholder while empty (the label occupies
   that space); reveal a subtle placeholder only once focused. */
.auth-card .form-control::placeholder {
    color: transparent;
}

.auth-card .form-control:focus::placeholder {
    color: #9aa4b2;
}

.auth-card .form-control:focus {
    border-color: var(--brand-primary, #1565C0);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #1565C0) 18%, transparent);
    outline: none;
}

.auth-card .btn-primary,
.auth-card .btn-lg.btn-primary {
    border: none;
    border-radius: 12px;
    padding: .8rem 1rem;
    font-weight: 600;
    background-image: linear-gradient(135deg, var(--brand-primary, #1565C0), var(--brand-secondary, #0D47A1));
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--brand-primary, #1565C0) 75%, transparent);
    transition: transform var(--t-fast), filter var(--t-fast);
}

.auth-card .btn-primary:hover {
    transform: translateY(-1px);
    filter: saturate(1.1);
}

.auth-card a {
    font-weight: 500;
}

/* Error boundary + validation (kept, restyled) */
.validation-message, .text-danger {
    color: #e5484d;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 10px;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

h1:focus {
    outline: none;
}

/* ============================================================
   Language selector (public-facing chrome only)
   ============================================================ */
.lang-select {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.lang-select-icon {
    font-size: 1rem !important;
    margin-right: .2rem;
    opacity: .7;
}

.lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    padding: .12rem .38rem;
    border-radius: 7px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text-2);
    transition: background var(--t-fast, .18s), color var(--t-fast, .18s);
}

.lang-opt:hover {
    background: rgba(15, 23, 42, .06);
    color: var(--text);
}

.lang-opt.active {
    background: var(--brand-primary, #0076BD);
    color: #fff;
}

/* Sidebar footer variant: sits on the dark sidebar gradient. */
.lang-select--compact .lang-select-icon {
    color: var(--sidebar-fg-muted, #7c88a3);
}

.lang-select--compact .lang-opt {
    min-width: 0;
    padding: .1rem .32rem;
    color: var(--sidebar-fg-muted, #7c88a3);
}

.lang-select--compact .lang-opt:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.lang-select--compact .lang-opt.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.nav2-footer--lang {
    padding-bottom: .35rem;
}

/* Built-in captcha challenge on auth forms */
.captcha-builtin {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.captcha-q {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    padding: .35rem .6rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, .05);
    white-space: nowrap;
    user-select: none;
}

.captcha-answer {
    max-width: 8rem;
}