/* ── AppBase CRM — Custom Styles (Bootstrap 5.3) ─────────────────────────── */

/* Base font */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f1f3f8;
}

/* ── Nav active link ──────────────────────────────────────────────────────── */

.nav-link-active {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-radius: 0.375rem;
}

/* ── Status / Stage badges ────────────────────────────────────────────────── */

.badge-active {
    background-color: #dcfce7;
    color: #166534;
}

.badge-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-prospect-s {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-won {
    background-color: #dcfce7;
    color: #166534;
}

.badge-lost {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-negotiation {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.badge-proposal {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-qualification {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-stage-default {
    background-color: #f3f4f6;
    color: #374151;
}

/* ── CRM Card ─────────────────────────────────────────────────────────────── */

.crm-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0.875rem;
    padding: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.055), 0 0 1px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

    .crm-card:hover {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.04);
    }

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* ── Spinner sizes ────────────────────────────────────────────────────────── */

.spinner-xs {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}

.spinner-md {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

/* ── Form controls — custom style ────────────────────────────────────────── */
/* border-width is fixed — changing it on :focus shifts surrounding elements. */

/* Labels (standard — above the field) */
.form-label {
    font-size: 0.8125rem; /* 13px — slightly smaller than body text   */
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

/* Text inputs & textarea */
.form-control {
    width: 100%;
    padding: 0.45rem 0.875rem !important;
    border: 0.13rem solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9375rem; /* 15px — slightly smaller than 1rem        */
    color: #1f2937;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-control:hover:not(:focus):not(:disabled) {
        border-color: #b0b8c4; /* subtle darkening on hover                */
    }

    .form-control:focus {
        outline: none;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        background-color: #fff;
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }

    .form-control::placeholder {
        color: #adb5bd;
        opacity: 1; /* Firefox reduces opacity by default        */
    }

/* ── Outlined field label — transparent notch technique ──────────────────────
   The label floats to the top border WITHOUT any background rectangle.
   Technique: the label uses a CSS mask with two linear-gradients that make
   the label's own background transparent in the center (where the text is)
   but opaque on the tiny horizontal pads on each side — this creates the
   visual illusion that the border line simply has a gap for the text, exactly
   like the native <fieldset><legend> pattern but without changing the HTML.

   Usage:
     <div class="field-outline">
       <input class="form-control" id="foo" placeholder=" " />
       <label for="foo">Label text</label>
     </div>

   Modifiers on the wrapper div:
     has-icon    — adds a leading icon (place a .field-icon span before input)
     has-action  — adds a trailing button (.field-action button after input)

   Rules:
   • placeholder MUST be a single space " " so :placeholder-shown works.
   • Works with <input>, <InputText>, <select> and <textarea>.
   ─────────────────────────────────────────────────────────────────────── */

.field-outline {
    position: relative;
    margin-bottom: 0;
}

    /* Input inside outlined field */
    .field-outline .form-control {
        /* padding-top: 0.90rem !important;*/
        padding-top: 0.60rem !important;
        padding-bottom: 0.4rem !important;
        border-radius: 8px;
        height: auto;
    }

    /* Leading icon: shift input text right */
    .field-outline.has-icon .form-control {
        padding-left: 2.75rem !important;
    }

    /* Trailing action: shift input text left */
    .field-outline.has-action .form-control {
        padding-right: 2.5rem !important;
    }

    /* ── Label: default state (placeholder-like, centered inside field) ── */
    .field-outline > label {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.9375rem;
        font-weight: 400;
        color: #9ca3af;
        pointer-events: none;
        line-height: 1;
        white-space: nowrap;
        /* Animate position, size and color */
        transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, color 0.18s ease, letter-spacing 0.18s ease;
        /* No background in default state — label sits inside the field */
        background: transparent;
        padding: 0 2px;
    }

    /* Shift label origin right when there is a leading icon */
    .field-outline.has-icon > label {
        left: 2.75rem;
    }

    /* ── Label: floated state ────────────────────────────────────────────
   Triggered when focused OR when field has a value.
   The label moves to top: 0 (sitting on the border line).
   Instead of a solid white background, we use a linear-gradient mask
   that paints a thin "background" only under the text using the
   same color as the page background — but crucially we inherit this
   via a CSS variable so any container color works.
   The trick: a ::before pseudo-element on the label draws the
   gap line behind it, matching the container background color.       */

    .field-outline .form-control:focus ~ label,
    .field-outline .form-control:not(:placeholder-shown) ~ label {
        top: 0;
        transform: translateY(-55%); /* center label text on the border line   */
        font-size: 0.80rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #6b7280;
        /* Transparent background — the label text sits directly on the border.
       A thin pseudo-element behind it masks the border line itself.       */
        background: transparent;
        padding: 0 2px;
    }

    /* Pseudo-element that creates the transparent-looking notch:
   it sits BEHIND the label text and covers the border line with the
   same color as whatever surface is behind the input.
   We use a CSS custom property --field-bg that defaults to white;
   override it on any dark/colored parent if needed.                   */
    .field-outline > label::before {
        content: '';
        position: absolute;
        inset: 20% -4px; /* vertically centered on the border line    */
        z-index: -1;
        background: var(--field-bg, #fff);
        border-radius: 2px;
    }

    /* Blue border + outer glow on the wrapper when focused */
    .field-outline:focus-within {
        border-radius: 8px;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    /* Input: remove its own ring inside field-outline (avoid double ring) */
    .field-outline .form-control:focus {
        box-shadow: none !important;
        border-color: #2563eb;
    }

        /* Label turns blue when focused */
        .field-outline .form-control:focus ~ label {
            color: #2563eb;
        }

    /* ── Leading icon ──────────────────────────────────────────────────── */
    .field-outline .field-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
        display: flex;
        align-items: center;
        transition: color 0.15s ease;
        z-index: 1;
    }

    .field-outline:focus-within .field-icon {
        color: #2563eb;
    }

    /* ── Trailing action button (show/hide password etc.) ──────────────── */
    .field-outline .field-action {
        position: absolute;
        right: 0.625rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0.25rem;
        color: #9ca3af;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.15s ease;
        z-index: 1;
    }

        .field-outline .field-action:hover {
            color: #374151;
        }

    /* ── Validation colors inside outlined fields ──────────────────────── */

    /* Invalid */
    .field-outline .form-control.modified.invalid {
        border-color: #dc3545 !important;
    }

        .field-outline .form-control.modified.invalid ~ label {
            color: #dc3545 !important;
        }

    .field-outline:has(.form-control.modified.invalid):focus-within {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    }

    /* Valid */
    .field-outline .form-control.modified.valid:not(:-webkit-autofill) {
        border-color: #198754 !important;
    }

        .field-outline .form-control.modified.valid:not(:-webkit-autofill) ~ label {
            color: #198754 !important;
        }

    .field-outline:has(.form-control.modified.valid:not(:-webkit-autofill)):focus-within {
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
    }

/* ── no-valid-feedback overrides ───────────────────────────────────── */

/* Suppress green when not focused */
.no-valid-feedback .field-outline .form-control.modified.valid:not(:focus) ~ label {
    color: #6b7280 !important;
}

/* Restore blue label on focus */
.no-valid-feedback .field-outline .form-control.modified.valid:focus ~ label {
    color: #2563eb !important;
}

/* Restore blue ring on focus */
.no-valid-feedback .field-outline:has(.form-control.modified.valid):focus-within {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Select */
.form-select {
    width: 100%;
    padding: 0.45rem 2.25rem 0.45rem 0.875rem !important;
    border: 0.13rem solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #1f2937;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-select:hover:not(:focus):not(:disabled) {
        border-color: #b0b8c4;
    }

    .form-select:focus {
        outline: none;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    }

    .form-select:disabled {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }

/* Checkbox & radio */
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    border: 0.15rem solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .form-check-input:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        border-color: #0d6efd;
    }

.form-check-label {
    font-size: 0.9375rem;
    color: #374151;
    cursor: pointer;
}

/* Validation states
   ─────────────────────────────────────────────────────────────────────────────
   PROBLEM A: browsers apply :valid/:invalid as soon as a field has content
   (including Chrome autofill), painting green/red borders prematurely.
   PROBLEM B: Chrome autofill also triggers Blazor's "modified" class, so even
   our .modified.valid guard fires on page load when credentials are autofilled.

   STRATEGY:
   1. Neutralize all native :valid/:invalid browser/Bootstrap coloring globally.
   2. Re-enable red (invalid) only when Blazor marks the field as modified.
   3. Suppress the green (valid) state on autofilled fields via :-webkit-autofill.
   4. Provide a .no-valid-feedback utility class for forms (e.g. login) where
      green borders are never desirable — only errors should be highlighted.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Kill native :valid/:invalid coloring from browser and Bootstrap,
      but only when the field is NOT focused — focus styles must win  */
.form-control:valid:not(:focus),
.form-control:invalid:not(:focus) {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* 2. Show red border only after the user has touched the field */
.form-control.modified.invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
}

    .form-control.modified.invalid:focus {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
    }

/* 3. Show green border after touch — but NOT when the browser autofilled it */
.form-control.modified.valid:not(:-webkit-autofill) {
    border-color: #198754 !important;
}

    .form-control.modified.valid:not(:-webkit-autofill):focus {
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15) !important;
    }

/* 4. .no-valid-feedback — attach to a wrapper element (e.g. the <EditForm>)
      to completely suppress green borders in forms where only errors matter
      (login, forgot-password, reset-password, etc.)                        */
.no-valid-feedback .form-control.modified.valid:not(:focus),
.no-valid-feedback .form-control.modified.valid:not(:-webkit-autofill):not(:focus) {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

/* ── Buttons — modern overrides over Bootstrap defaults ──────────────────── */
/* All btn variants keep Bootstrap's structure — only visual style is changed.
   font-weight, letter-spacing, border-radius and transitions give a
   cleaner, more contemporary look without altering sizing or behavior.    */

.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Primary — solid blue */
.btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #1d4ed8;
        border-color: #1d4ed8;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    }

    .btn-primary:focus,
    .btn-primary:focus-visible {
        background-color: #1d4ed8;
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
        outline: none;
    }

    .btn-primary:active {
        background-color: #1e40af;
        border-color: #1e40af;
        box-shadow: none;
    }

    .btn-primary:disabled {
        background-color: #93c5fd;
        border-color: #93c5fd;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Outline secondary — ghost style */
.btn-outline-secondary {
    color: #4b5563;
    border-color: #d1d5db;
    background: transparent;
}

    .btn-outline-secondary:hover {
        background-color: #f3f4f6;
        border-color: #9ca3af;
        color: #1f2937;
        box-shadow: none;
    }

    .btn-outline-secondary:focus,
    .btn-outline-secondary:focus-visible {
        box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
        outline: none;
    }

    .btn-outline-secondary:active {
        background-color: #e5e7eb;
        border-color: #9ca3af;
        color: #1f2937;
    }

/* Danger — solid red */
.btn-danger {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

    .btn-danger:hover {
        background-color: #b91c1c;
        border-color: #b91c1c;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
    }

    .btn-danger:focus,
    .btn-danger:focus-visible {
        background-color: #b91c1c;
        border-color: #b91c1c;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
        outline: none;
    }

    .btn-danger:active {
        background-color: #991b1b;
        border-color: #991b1b;
    }

    .btn-danger:disabled {
        background-color: #fca5a5;
        border-color: #fca5a5;
        cursor: not-allowed;
    }

/* Outline danger */
.btn-outline-danger {
    color: #dc2626;
    border-color: #fca5a5;
    background: transparent;
}

    .btn-outline-danger:hover {
        background-color: #fef2f2;
        border-color: #dc2626;
        color: #b91c1c;
    }

    .btn-outline-danger:focus,
    .btn-outline-danger:focus-visible {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
        outline: none;
    }

/* Warning */
.btn-warning {
    background-color: #d97706;
    border-color: #d97706;
    color: #fff;
}

    .btn-warning:hover {
        background-color: #b45309;
        border-color: #b45309;
        color: #fff;
        box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
    }

    .btn-warning:focus,
    .btn-warning:focus-visible {
        box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
        outline: none;
        color: #fff;
    }

/* Light — used in update notification */
.btn-light {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #374151;
}

    .btn-light:hover {
        background-color: #e9ecef;
        border-color: #dee2e6;
        color: #1f2937;
    }

/* Small size — slightly tighter than Bootstrap default */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 6px;
}

/* ── Table rows — cursor pointer ──────────────────────────────────────────── */

.table-hover tbody tr {
    cursor: pointer;
}
/* ── Blazor validation colors matching Bootstrap ──────────────────────────── */

.validation-message {
    font-size: 0.875em;
    color: #dc3545;
    margin-top: 0.25rem;
}
/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT + VISUAL THEME
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 62px;
    --sidebar-bg: #1e2130;
    --sidebar-text: #b8bdd4;
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(59, 130, 246, 0.18);
    --sidebar-active-color: #93c5fd;
    --topbar-height: 54px;
}
/* ── App Shell Layout ───────────────────────────────────────────────────────── */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}
/* Desktop sidebar — sticky full-height column */
.app-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    flex-shrink: 0;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s ease;
}
    /* ── Sidebar collapsed (mini) mode ──────────────────────────────────────────── */

    .app-sidebar.sidebar-collapsed {
        width: var(--sidebar-collapsed-width);
    }
/* Brand: hide text, center icon + toggle button */
.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0.875rem 0;
    gap: 0;
}
/* Nav links: hide label text, center icon */
.sidebar-collapsed .sidebar-link-text {
    display: none;
}

.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 0.5rem 0;
    gap: 0;
}
/* Section labels: hidden in mini mode */
.sidebar-collapsed .sidebar-section-label {
    display: none;
}
/* Footer: center avatar only, hide name/role/logout */
.sidebar-collapsed .sidebar-footer {
    padding: 0.875rem 0;
    display: flex;
    justify-content: center;
}

.sidebar-collapsed .sidebar-footer-text {
    display: none;
}

.sidebar-collapsed .sidebar-footer-logout {
    display: none;
}
/* ── Sidebar toggle button ───────────────────────────────────────────────────── */

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }
/* Mobile Bootstrap Offcanvas sidebar */
.app-sidebar-offcanvas {
    width: var(--sidebar-width) !important;
    background: var(--sidebar-bg) !important;
}
/* Main content area */
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Mobile topbar (visible only <lg) */
.app-topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 1rem;
}
/* ── Sidebar Navigation Styles ──────────────────────────────────────────────── */

.sidebar-brand {
    padding: 1.125rem 1rem;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-nav {
    padding: 0.625rem 0.5rem;
    flex: 1;
}

.sidebar-section-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #4d5670;
    text-transform: uppercase;
    padding: 0 0.75rem;
    margin: 0.625rem 0 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.07);
        color: var(--sidebar-text-hover);
    }

.sidebar-link-active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-color) !important;
}

.sidebar-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 0.875rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}


@media (min-width: 576px) {
    .rounded-sm-3 {
        border-radius: var(--bs-border-radius-lg) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AUTH LAYOUT — split-panel design
   Left  : decorative panel with brand + feature list (desktop only, ≥ lg)
   Right : scrollable form area (full width on mobile)
   ══════════════════════════════════════════════════════════════════════════════ */

.auth-shell {
    display: flex;
    min-height: 100vh;
    background: #f8faff;
}

/* ── Left decorative panel ─────────────────────────────────────────────────── */
.auth-panel-left {
    width: 44%;
    max-width: 520px;
    flex-shrink: 0;
    background: linear-gradient(155deg, #1e40af 0%, #2563eb 45%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.5rem;
    position: relative;
    overflow: hidden;
}

    /* Decorative circles */
    .auth-panel-left::before,
    .auth-panel-left::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }

    .auth-panel-left::before {
        width: 420px;
        height: 420px;
        top: -80px;
        right: -120px;
    }

    .auth-panel-left::after {
        width: 280px;
        height: 280px;
        bottom: -60px;
        left: -80px;
    }

.auth-panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
}

/* Brand row inside left panel */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.auth-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-logo-icon--sm {
    width: 2rem;
    height: 2rem;
    background: #2563eb;
    border-radius: 8px;
}

.auth-logo-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.auth-headline {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.auth-subline {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.auth-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .auth-features li {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
    }

.auth-feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

/* ── Right form panel ──────────────────────────────────────────────────────── */
.auth-panel-right {
    flex: 1;
    min-height: 100vh;          /* full viewport height — enables centering   */
    display: flex;
    flex-direction: column;     /* stack mobile brand + form vertically       */
    align-items: center;
    justify-content: center;    /* vertical center at all breakpoints         */
    padding: 2.5rem 1.5rem;
    overflow-y: auto;
    background: #f8faff;
    --field-bg: #f8faff;
}

.auth-form-wrap {
    width: 100%;
    max-width: 400px;
}

/* ── Social login buttons ──────────────────────────────────────────────────── */

.social-btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 0.13rem solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .social-btn:hover:not(:disabled) {
        background: #f9fafb;
        border-color: #d1d5db;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .social-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ── Auth divider ("o continúa con") ──────────────────────────────────────── */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #9ca3af;
    font-size: 0.8125rem;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }

    .auth-divider span {
        white-space: nowrap;
    }

/* ── Demo credentials cards ────────────────────────────────────────────────── */
.demo-cred-card {
    background: #f8faff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .demo-cred-card:hover {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

/* ── Responsive tweaks ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .auth-shell {
        background: #f8faff;
    }

    .auth-panel-right {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 479px) {
    .auth-panel-right {
        padding: 1.5rem 1rem;
        /* align-items stays "center" — content is always vertically centered */
    }
}