/* crm.autoattender.ai — Copyright © 2026 DATALYTIQUE INC. All Rights Reserved.
   PROPRIETARY AND CONFIDENTIAL — TRADE SECRET. Licensed, not sold. Unauthorized
   use, copying, modification, distribution, disclosure, or reverse engineering is
   strictly prohibited and will be prosecuted to the fullest extent of the law.
   No rights granted except by written agreement with DATALYTIQUE INC.
   See LICENSE · legal@datalytique.com · SPDX-License-Identifier: LicenseRef-DATALYTIQUE-Proprietary */

/* ============================================
   AutoAttender AI — Landing + Sign In (split layout)
   Brand (autoattender.ai): navy base #060b1c, cyan primary #06b6d4 / #00d9ff,
   violet secondary #7c3aed
   ============================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    color: #1e293b;
    background: #f8fafc;
}

.auth-split {
    display: flex;
    min-height: 100vh;
}

/* ---------- LEFT: brand / value proposition ---------- */
.auth-hero {
    position: relative;
    flex: 1.15;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--login-hero-grad, linear-gradient(135deg, #0a1430 0%, #070d22 55%, #05081a 100%));
    color: var(--login-hero-text, #fff);
    padding: 3.5rem clamp(2rem, 5vw, 5rem);
}

/* soft decorative glows */
.auth-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 82% 12%, rgba(255, 255, 255, 0.16), transparent 70%),
        radial-gradient(closest-side at 8% 92%, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none;
}

.auth-hero-inner {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease;
}

.hero-brand { margin-bottom: 1.75rem; }

/* White-fill wordmark — sits on the dark navy hero panel. */
.hero-logo {
    width: clamp(160px, 18vw, 210px);
    height: auto;
    display: block;
    mix-blend-mode: var(--hero-logo-blend, normal);
}

/* Retained for any surface still rendering the wordmark as text. */
.hero-wordmark {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--login-hero-text, #fff);
}
.hero-wordmark span { color: var(--login-accent, #67e8f9); }

.hero-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.hero-title span {
    color: color-mix(in srgb, var(--login-hero-text, #fff) 82%, transparent);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}

.hero-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--login-hero-text, #fff) 92%, transparent);
    max-width: 34rem;
    margin: 0 0 2rem;
}

/* module tiles */
.hero-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.hero-tile {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--login-hero-text, #fff) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-hero-text, #fff) 16%, transparent);
    border-radius: 0.75rem;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.2s ease;
}
.hero-tile:hover {
    background: color-mix(in srgb, var(--login-hero-text, #fff) 16%, transparent);
    transform: translateY(-2px);
}

.ht-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--login-hero-text, #fff) 18%, transparent);
    color: var(--login-hero-text, #fff);
    font-size: 1rem;
}

.ht-body { display: flex; flex-direction: column; line-height: 1.35; }
.ht-body strong { font-size: 0.95rem; font-weight: 700; }
.ht-body span { font-size: 0.82rem; color: color-mix(in srgb, var(--login-hero-text, #fff) 85%, transparent); }

.hero-foot {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--login-hero-text, #fff) 85%, transparent);
    margin: 0;
}

/* ---------- RIGHT: sign in ---------- */
.auth-panel {
    flex: 0 0 clamp(360px, 34vw, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: #fff;
}

.auth-form-wrap {
    width: 100%;
    max-width: 360px;
    animation: fadeInUp 0.6s ease 0.05s both;
}

.auth-form-head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-form-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 1rem;
}
.auth-form-head h2 {
    color: #0d1730;
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0 0 0.35rem;
}
.auth-form-head p { font-size: 0.9rem; color: #64748b; margin: 0; }

.form-label {
    font-weight: 500;
    color: #475569;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.input-group-text {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    color: #0891b2;
    padding: 0.65rem 0.875rem;
}

.input-group .form-control {
    border: 1px solid #e2e8f0;
    border-left: none;
    padding: 0.65rem 0.875rem;
    font-size: 0.9375rem;
}
.input-group .form-control:focus {
    border-color: var(--login-accent, #0891b2);
    box-shadow: none;
}
.input-group:focus-within .input-group-text { border-color: var(--login-accent, #0891b2); }

/* Brand CTA — the gradient used on autoattender.ai (cyan → blue → violet).
   White text needs the blue/violet body of the ramp for contrast; a flat cyan
   fill would drop below 3:1. */
.btn-primary {
    background: var(--login-btn-grad, linear-gradient(120deg, #06b6d4 0%, #2563eb 58%, #7c3aed 100%));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--login-btn-text, #fff);
    padding: 0.7rem 1rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px -12px rgba(0, 217, 255, .55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 16px 42px -14px rgba(0, 217, 255, .7), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(0, 217, 255, 0.28); }

.alert {
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.auth-form-foot {
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid #eef2f6;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .auth-split { flex-direction: column; }
    .auth-hero { padding: 2.5rem 1.5rem; }
    .auth-hero-inner { max-width: 720px; }
    .auth-panel { flex: 1 1 auto; }
}

@media (max-width: 640px) {
    .hero-tiles { grid-template-columns: 1fr; }
    .hero-title { font-size: 1.7rem; }
    .hero-sub { font-size: 0.97rem; }
    .auth-panel { padding: 2rem 1.25rem; }
}