/* 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: 1 1 auto;
    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); }

.btn-primary {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
    padding: 0.7rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
}

.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; }
}

/* clean-design: controls keep at least 0.5rem from their neighbours. */
.input-group { gap: 0.5rem; }
.input-group > * { margin-left: 0 !important; border-radius: 0.5rem !important; }