/*
 * The anonymous sign-in shell, shared by all three surfaces: platform
 * administration, group manager, and company.
 *
 * Built to the EnergyUp International design system (design_system.md §2,
 * "Auth pages"): a single centred column on a light canvas, a low-contrast
 * watermark behind the top centre, and the same teal that every other
 * interactive element in the product uses.
 *
 * Self-contained by design. Every value below is a literal or a token declared
 * in this file — nothing here reads a --admin-* or module-scoped variable, so a
 * surface cannot half-adopt the look by having only some of the tokens. That is
 * what makes "all three verification screens are identical" a property of one
 * file rather than three that agree today.
 *
 * Linked LAST in each layout, after the module's own stylesheet, so where the
 * two overlap this one wins.
 *
 * Light only, matching the layouts' pinned data-bs-theme="light".
 */

.auth-page {
    --auth-brand-50: #F0F8F6;
    --auth-brand-700: #1B6E63;
    --auth-brand-800: #155A51;
    --auth-brand-900: #10453E;

    --auth-gray-50: #F9FAFB;
    --auth-gray-200: #EAECF0;
    --auth-gray-300: #D0D5DD;
    --auth-gray-500: #667085;
    --auth-gray-600: #475467;
    --auth-gray-700: #344054;
    --auth-gray-900: #101828;

    --auth-surface: #FFFFFF;
    --auth-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --auth-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    --auth-focus-ring: 0 0 0 4px rgba(27, 110, 99, .18);

    --auth-font: "Inter", -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;

    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 64px 20px;
    background: var(--auth-gray-50);
    font-family: var(--auth-font);
    color: var(--auth-gray-900);
    overflow: hidden;
}

/*
 * §2's globe watermark. A single radial mark at ~3% opacity behind the top
 * centre — it gives the canvas a horizon without competing with the card, and
 * it costs no markup, so all three surfaces get it from this one rule.
 */
.auth-page::before {
    content: "";
    position: absolute;
    inset-block-start: -22rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 44rem;
    height: 44rem;
    border-radius: 50%;
    border: 1px solid rgba(27, 110, 99, .10);
    background: radial-gradient(circle at 50% 65%, rgba(27, 110, 99, .06), transparent 62%);
    pointer-events: none;
}

.auth-panel {
    position: relative;
    width: 100%;
    max-width: 22.5rem;
}

/* Scoped to the panel and excluding .btn: a blanket rule outranks Bootstrap's
   own `.btn { color: … }` and paints button-links invisible. */
.auth-panel a:not(.btn) {
    color: var(--auth-brand-700);
    text-decoration: none;
    font-weight: 500;
}

.auth-panel a:not(.btn):hover {
    color: var(--auth-brand-800);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ brand */

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    text-align: center;
}

/* §1.4's icon tile at the 56px auth size: brand-50 ground, brand-700 glyph. */
.auth-brand-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--auth-brand-50);
    border: 1px solid rgba(27, 110, 99, .14);
    color: var(--auth-brand-700);
}

.auth-brand-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--auth-gray-900);
}

.auth-brand-sub {
    font-size: 0.875rem;
    color: var(--auth-gray-600);
    margin-top: 2px;
}

/* ------------------------------------------------------------------- card */

.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-gray-200);
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: var(--auth-shadow-lg);
}

.auth-card h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--auth-gray-900);
}

.auth-lede {
    color: var(--auth-gray-600);
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 24px;
}

/* What an activation link just granted, listed above the sign-in button. A
   plain list rather than pills: this is the first thing the person reads about
   their own access, and it should be legible before it is decorative. */
.auth-module-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    border: 1px solid var(--auth-gray-200);
    border-radius: 8px;
}

.auth-module-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--auth-gray-900);
}

.auth-module-list li + li {
    border-top: 1px solid var(--auth-gray-200);
}

.auth-module-role {
    flex: none;
    font-size: 0.8125rem;
    color: var(--auth-gray-600);
}

.auth-card .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--auth-gray-700);
    margin-bottom: 6px;
}

.auth-card .form-control {
    background: var(--auth-surface);
    border: 1px solid var(--auth-gray-300);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--auth-gray-900);
    box-shadow: var(--auth-shadow-xs);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.auth-card .form-control::placeholder {
    color: var(--auth-gray-500);
}

.auth-card .form-control:focus {
    border-color: var(--auth-brand-700);
    box-shadow: var(--auth-focus-ring);
}

/* §3: every auth button is full width, 44px tall, 8px radius, 14/600. */
.auth-card .btn {
    --bs-btn-border-radius: 8px;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 10px;
    --bs-btn-line-height: 1.5rem;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.auth-card .btn-primary {
    --bs-btn-bg: var(--auth-brand-700);
    --bs-btn-border-color: var(--auth-brand-700);
    --bs-btn-hover-bg: var(--auth-brand-800);
    --bs-btn-hover-border-color: var(--auth-brand-800);
    --bs-btn-active-bg: var(--auth-brand-900);
    --bs-btn-active-border-color: var(--auth-brand-900);
}

.auth-card .btn:focus-visible {
    box-shadow: var(--auth-focus-ring);
}

.auth-foot {
    text-align: center;
    font-size: 0.875rem;
    color: var(--auth-gray-600);
    margin: 24px 0 0;
}

.auth-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--auth-gray-50);
    border: 1px solid var(--auth-gray-200);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--auth-gray-600);
}

.auth-note svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--auth-gray-500);
}

/* --------------------------------------------- the verification screen */

/*
 * Monospaced and wide-tracked: the code is transcribed from an email by hand,
 * and a field that shows each character distinctly is one that gets retyped
 * less often. It stands in for §3's four-box OTP input — one field, but the
 * same 8px radius, brand focus border, and tabular figures. text-transform is
 * presentation only — the operator surfaces upper-case server-side before
 * hashing.
 */
.code-input {
    font-family: "Cascadia Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    text-align: center;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    padding: 12px;
}

/* Digits have no case to normalise, so the company surface does not shout. */
.verification .code-input[inputmode="numeric"] {
    text-transform: none;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
}

.verification-resend {
    margin-top: 16px;
    text-align: center;
}

.verification-resend .btn-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--auth-brand-700);
    text-decoration: none;
}

.verification-resend .btn-link:hover {
    color: var(--auth-brand-800);
    text-decoration: underline;
}

/* ----------------------------------------------------------- messages */

.auth-card .alert {
    border-radius: 8px;
    border-width: 1px;
    padding: 12px 16px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 24px;
}

.auth-card .alert-danger {
    --bs-alert-color: #B42318;
    --bs-alert-bg: #FEF3F2;
    --bs-alert-border-color: rgba(180, 35, 24, .22);
}

.auth-card .alert-info {
    --bs-alert-color: #175CD3;
    --bs-alert-bg: #EFF8FF;
    --bs-alert-border-color: rgba(23, 92, 211, .22);
}

.auth-card .alert-success {
    --bs-alert-color: #067647;
    --bs-alert-bg: #ECFDF3;
    --bs-alert-border-color: rgba(6, 118, 71, .22);
}

/* The result tiles the activation screens land on (§2's optional icon tile). */
.auth-card .result-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.auth-card .result-icon-success { background: #ECFDF3; color: #067647; }
.auth-card .result-icon-warning { background: #FFFAEB; color: #B54708; }
.auth-card .result-icon-danger  { background: #FEF3F2; color: #B42318; }

@media (prefers-reduced-motion: reduce) {
    .auth-card .btn,
    .auth-card .form-control {
        transition: none;
    }
}