/* ===================================================================
   PlotBook CRM — Auth Layout (login / register / forgot password)
   Fixes: blank right column, unstyled form, no visual hierarchy.
   =================================================================== */

:root{
    --auth-primary:#10213f;
    --auth-secondary:#d5a84b;
    --auth-dark:#081426;
    --auth-text:#172033;
    --auth-muted:#697386;
    --auth-border:#e7e9ef;
    --auth-bg:#f6f7fb;
    --auth-radius:22px;
    --auth-shadow:0 25px 70px rgba(8,20,38,.12);
}

*{box-sizing:border-box}

html,body{height:100%}

body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--auth-text);
    background:var(--auth-bg);
}

/* ---------- two-column wrap (this is what was missing) ---------- */
.auth-wrap{
    display:grid;
    grid-template-columns:minmax(320px,42%) 1fr;
    min-height:calc(100vh - 140px); /* leaves room for header + footer */
    width:100%;
}

/* ---------- LEFT: brand panel ---------- */
.auth-brand{
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg,var(--auth-dark),var(--auth-primary) 70%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:70px 60px;
}

.auth-brand:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(213,168,75,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(213,168,75,.08) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
    pointer-events:none;
}

.auth-brand:after{
    content:"";
    position:absolute;
    width:340px;height:340px;
    border-radius:50%;
    background:rgba(213,168,75,.1);
    filter:blur(10px);
    right:-140px;
    bottom:-140px;
}

.auth-brand > *{position:relative;z-index:1}

.auth-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(213,168,75,.3);
    color:#fff;
    padding:8px 15px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:700;
    margin-bottom:26px;
    width:fit-content;
}
.auth-badge i{color:var(--auth-secondary)}

.auth-brand-title{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:clamp(2.1rem,3vw,2.9rem);
    line-height:1.1;
    margin:0 0 18px;
}

.auth-brand-text{
    color:rgba(255,255,255,.72);
    font-size:1rem;
    line-height:1.8;
    max-width:420px;
    margin:0 0 40px;
}

.auth-brand-stats{
    display:flex;
    gap:34px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.14);
}
.auth-brand-stats strong{
    display:block;
    font-family:'Fraunces',serif;
    font-size:1.6rem;
    color:var(--auth-secondary);
}
.auth-brand-stats span{
    display:block;
    font-size:.76rem;
    color:rgba(255,255,255,.6);
    margin-top:4px;
}

/* ---------- RIGHT: form panel ---------- */
.auth-form-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:60px 40px;
    background:
        radial-gradient(circle at 85% 15%, rgba(16,33,63,.05) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(213,168,75,.06) 0%, transparent 40%),
        var(--auth-bg);
}

.auth-card{
    width:100%;
    /*max-width:440px;*/
    background:#fff;
    border:1px solid var(--auth-border);
    border-radius:var(--auth-radius);
    box-shadow:var(--auth-shadow);
    padding: 0; /* Updated to allow seamless gradient header */
    position: relative;
    overflow: visible !important; /* Required so floating logo pops out of the card */
}

/* ---------- Gradient Header & Floating Logo Fixes ---------- */
.auth-header-banner {
    background: linear-gradient(135deg, var(--auth-dark) 0%, var(--auth-primary) 70%);
    padding: 3rem 2rem 2.2rem 2rem;
    text-align: center;
    border-top-left-radius: var(--auth-radius);
    border-top-right-radius: var(--auth-radius);
    position: relative;
    margin-bottom: 0;
}

.auth-logo-container {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 6px 20px rgba(8, 20, 38, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.auth-logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.auth-body-content {
    padding: 36px 40px 40px 40px;
}

.auth-security-note{
    display:flex;
    align-items:center;
    gap:6px;
    margin:22px 0 0;
    font-size:.78rem;
    color:var(--auth-muted);
}
.auth-security-note i{color:var(--auth-secondary)}

/* ---------- generic form styling inside the card (works with @yield('content')) ---------- */
.auth-card h1,
.auth-card h2,
.auth-card h3{
    font-family:'Fraunces',serif;
    color:var(--auth-dark);
    margin-bottom:8px;
}

/* Header banner specific typography overwrite */
.auth-header-banner h1,
.auth-header-banner h2,
.auth-header-banner h3 {
    color: #ffffff !important;
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
}

.auth-card p.text-muted,
.auth-card .auth-subtitle{
    color:var(--auth-muted);
    font-size:.9rem;
    margin-bottom:28px;
}

/* Header banner subtitle overwrite */
.auth-header-banner .auth-subtitle,
.auth-header-banner p {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.9rem;
    margin-bottom: 0 !important;
}

.auth-card label{
    font-size:.78rem;
    font-weight:700;
    color:var(--auth-text);
    margin-bottom:6px;
    display:inline-block;
}

.auth-card .form-control,
.auth-card .form-select{
    border:1px solid var(--auth-border);
    border-radius:12px;
    padding:12px 14px;
    font-size:.92rem;
    background:#fbfbfd;
    transition:.25s;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus{
    border-color:var(--auth-secondary);
    box-shadow:0 0 0 3px rgba(213,168,75,.16);
    background:#fff;
}

/* ---------- icon-prefixed inputs (email / password) ---------- */
.auth-input-group{
    position:relative;
    display:flex;
    align-items:center;
}
.auth-input-icon{
    position:absolute;
    left:14px;
    display:flex;
    align-items:center;
    color:var(--auth-muted);
    font-size:.95rem;
    pointer-events:none;
    z-index:2;
}
.auth-input-group .form-control{
    padding-left:42px;
    padding-right:42px;
    width:100%;
}
.auth-input-toggle{
    position:absolute;
    right:12px;
    background:none;
    border:none;
    color:var(--auth-muted);
    font-size:.95rem;
    padding:4px;
    display:flex;
    align-items:center;
    cursor:pointer;
    z-index:2;
}
.auth-input-toggle:hover{color:var(--auth-primary)}

/* ---------- checkbox ---------- */
.auth-card .form-check{
    display:flex;
    align-items:center;
    gap:8px;
}
.auth-card .form-check-input{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}
.auth-card .form-check-input:checked{
    background-color:var(--auth-secondary);
    border-color:var(--auth-secondary);
}
.auth-card .form-check-label{
    font-size:.85rem;
    font-weight:500;
    color:var(--auth-muted);
    margin:0;
    cursor:pointer;
}

.auth-card .btn-primary,
.auth-card button[type="submit"]{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--auth-primary),var(--auth-dark));
    color:#fff;
    border:0;
    padding:13px;
    border-radius:12px;
    font-weight:700;
    letter-spacing:.02em;
    transition:.3s;
}
.auth-card .btn-primary:hover,
.auth-card button[type="submit"]:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(8,20,38,.25);
}

.auth-card a{
    color:var(--auth-primary);
    font-weight:700;
    text-decoration:none;
}
.auth-card a:hover{color:var(--auth-secondary)}

.auth-card hr,
.auth-card .auth-divider{
    border-color:var(--auth-border);
    color:var(--auth-muted);
    font-size:.78rem;
    margin:24px 0;
}

.auth-card .invalid-feedback{
    font-size:.78rem;
}

.auth-card .alert{
    font-size:.85rem;
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:20px;
}
.auth-card .alert-danger{
    background:#fdecec;
    border:1px solid #f6c4c4;
    color:#9a2a2a;
}
.auth-card .alert-success{
    background:#dcfce7;
    border:1px solid #bbf7d0;
    color:#166534;
}

/* ---------- responsive ---------- */
@media (max-width: 991px){
    .auth-wrap{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .auth-brand{
        padding:50px 30px;
        text-align:center;
        align-items:center;
    }
    .auth-brand-text{margin-left:auto;margin-right:auto}
    .auth-brand-stats{justify-content:center}
    .auth-form-panel{padding:40px 20px}
}

@media (max-width: 480px){
    .auth-card{padding:0}
    .auth-body-content{padding:32px 24px}
    .auth-brand-stats{gap:20px}
}
/* Spinner/Loader style */
.input-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--auth-blue-600, #2547d0);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Validation status icon positioning */
.input-icon-status {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}