/* =============================================================================
   Closina Identity Server Styles
   =============================================================================
   Brand tokens + component overrides for authentication pages (Login, Register,
   2FA, ForgotPassword). Mirrors closina-theme.css light mode values.
   ============================================================================= */

/* Display serif for brand wordmark on auth pages — Fraunces variable font.
   Matches the Blazor app's --closina-font-display token. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400..700,0..100,0..1&display=swap');

/* -----------------------------------------------------------------------------
   1. Brand Tokens (mirrors closina-theme.css from Blazor Client)
   ----------------------------------------------------------------------------- */
:root {
    /* Display serif for brand wordmark — mirrors Blazor's --closina-font-display */
    --closina-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Logo overrides for LeptonX Lite */
    --lpx-logo: url('/images/logo/leptonxlite/logo-light.svg') !important;
    --lpx-logo-icon: url('/images/logo/leptonxlite/logo-icon-light.svg') !important;

    /* Primary Tokens - Emerald green (brand identity).
       Emerald-700 (#047857) on white is 5.48:1 contrast — WCAG 2.1 AA compliant for
       normal-weight text on primary buttons. Matches Closina.Blazor.Client/closina-theme.css. */
    --closina-primary: #047857;
    --closina-primary-hover: #065f46;
    --closina-primary-dark: #064e3b;
    --closina-primary-light: #10b981;
    --closina-primary-lighter: #34d399;
    --closina-primary-lightest: #6ee7b7;
    --closina-link: #047857;

    /* Surface Tokens */
    --closina-surface: #ffffff;
    --closina-background: #f8f8f6;
    --closina-border: rgba(0, 0, 0, 0.06);

    /* Text Tokens */
    --closina-text-primary: #1a1a1a;
    --closina-text-secondary: #6b7280;

    /* Radius Tokens */
    --closina-radius-sm: 8px;
    --closina-radius-md: 12px;
    --closina-radius-full: 9999px;

    /* Shadow Tokens */
    --closina-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --closina-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* Focus/Interaction */
    --closina-focus-ring: rgba(4, 120, 87, 0.25);
    --closina-primary-glow: rgba(4, 120, 87, 0.3);
}

:root .abp-account-layout .lpx-brand-logo {
    --lpx-logo: url('/images/logo/leptonxlite/logo-dark.svg') !important;
}

/* -----------------------------------------------------------------------------
   2. Shared Account Page Layout
   ----------------------------------------------------------------------------- */
body {
    background-color: var(--closina-background) !important;
}

.account-module-form {
    background-color: var(--closina-background);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.account-brand img {
    max-height: 80px;
}

.account-brand-heading {
    color: var(--closina-primary);
    font-family: var(--closina-font-display);
    font-variation-settings: "opsz" 56, "SOFT" 30, "WONK" 0;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card {
    border: none;
    border-radius: var(--closina-radius-md);
    box-shadow: var(--closina-shadow-sm);
}

.card a {
    color: var(--closina-link);
}

.card a:hover {
    color: var(--closina-primary-dark);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   3. Bootstrap Primary Color Override (Emerald)
   ----------------------------------------------------------------------------- */
.abp-account-layout {
    --bs-primary: var(--closina-primary-light);
    --bs-primary-rgb: 16, 185, 129;
    --bs-primary-text-emphasis: #065a3f;
    --bs-primary-bg-subtle: #d1fae5;
    --bs-primary-border-subtle: #a7f3d0;
    --bs-link-color: var(--closina-primary-light);
    --bs-link-hover-color: var(--closina-primary);
    --bs-link-color-rgb: 16, 185, 129;
    --bs-link-hover-color-rgb: 5, 150, 105;
    --bs-focus-ring-color: var(--closina-focus-ring);
}

/* -----------------------------------------------------------------------------
   4. Button Overrides
   ----------------------------------------------------------------------------- */
.abp-account-layout .btn-primary,
.account-column .btn-primary,
.account-module-form .btn-primary {
    background-color: var(--closina-primary) !important;
    border-color: var(--closina-primary) !important;
    color: var(--closina-on-primary, #fff) !important;
    font-weight: 500;
}

.abp-account-layout .btn-primary:hover,
.account-column .btn-primary:hover,
.account-module-form .btn-primary:hover {
    background-color: var(--closina-primary-hover) !important;
    border-color: var(--closina-primary-hover) !important;
    color: var(--closina-on-primary, #fff) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--closina-primary-glow);
}

.abp-account-layout .btn-primary:focus,
.abp-account-layout .btn-primary:active,
.abp-account-layout .btn-primary.active,
.account-column .btn-primary:focus,
.account-column .btn-primary:active {
    background-color: var(--closina-primary-hover) !important;
    border-color: var(--closina-primary-hover) !important;
    box-shadow: 0 0 0 0.25rem var(--closina-focus-ring);
}

.abp-account-layout .btn-primary:disabled {
    background-color: var(--closina-primary) !important;
    border-color: var(--closina-primary) !important;
    opacity: 0.65;
}

/* Outline button variant */
.abp-account-layout .btn-outline-primary,
.account-column .btn-outline-primary {
    color: var(--closina-primary);
    border-color: var(--closina-primary);
}

.abp-account-layout .btn-outline-primary:hover,
.account-column .btn-outline-primary:hover {
    color: var(--closina-on-primary, #fff);
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
}

.abp-account-layout .btn-outline-primary:focus,
.abp-account-layout .btn-outline-primary:active,
.abp-account-layout .btn-outline-primary.active,
.account-column .btn-outline-primary:focus,
.account-column .btn-outline-primary:active {
    color: var(--closina-on-primary, #fff);
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
    box-shadow: 0 0 0 0.25rem var(--closina-focus-ring);
}

/* Secondary button (password toggle, etc.) */
.abp-account-layout .btn-secondary,
.account-column .btn-secondary,
.account-module-form .btn-secondary {
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
    color: var(--closina-on-primary, #fff);
}

.abp-account-layout .btn-secondary:hover,
.account-column .btn-secondary:hover,
.account-module-form .btn-secondary:hover {
    background-color: var(--closina-primary-hover);
    border-color: var(--closina-primary-hover);
    color: var(--closina-on-primary, #fff);
}

.abp-account-layout .btn-secondary:focus,
.abp-account-layout .btn-secondary:active,
.account-column .btn-secondary:focus,
.account-column .btn-secondary:active,
.account-module-form .btn-secondary:focus,
.account-module-form .btn-secondary:active {
    background-color: var(--closina-primary-hover);
    border-color: var(--closina-primary-hover);
    box-shadow: 0 0 0 0.25rem var(--closina-focus-ring);
}

/* -----------------------------------------------------------------------------
   5. Form Control Overrides
   ----------------------------------------------------------------------------- */
.abp-account-layout .form-control:focus,
.account-module-form .form-control:focus {
    border-color: var(--closina-primary-lighter);
    box-shadow: 0 0 0 0.2rem var(--closina-focus-ring);
}

/* Custom checkbox and radio buttons */
.abp-account-layout .form-check-input:checked {
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
}

.abp-account-layout .form-check-input:focus {
    border-color: var(--closina-primary-lightest);
    box-shadow: 0 0 0 0.25rem var(--closina-focus-ring);
}

/* -----------------------------------------------------------------------------
   6. Links & Input Group
   ----------------------------------------------------------------------------- */
.abp-account-layout a {
    color: var(--closina-primary);
}

.abp-account-layout a:hover {
    color: var(--closina-primary-hover);
}

/* Input group text (for password toggle) */
.abp-account-layout .input-group-text,
.account-column .input-group-text {
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
    color: var(--closina-on-primary, #fff);
}

.abp-account-layout .input-group .btn,
.account-column .input-group .btn {
    border-color: var(--closina-primary);
}

/* -----------------------------------------------------------------------------
   7. Pill-Shaped Submit Buttons
   ----------------------------------------------------------------------------- */
.account-module-form .d-grid .btn,
.abp-account-layout .d-grid .btn {
    border-radius: var(--closina-radius-full);
}