/* ═══════════════════════════════════════════════════════════════════
   SAAFF ERP SYSTEM - PREMIUM LOGIN (DEMO READY)
   login.css  ·  Color-Shifting Glass & Enlarged Logos
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* STRICT SAAFF COLOR PALETTE */
    --saaff-slate: #3b7396;    
    --saaff-light: #0ca5e6;    
    --saaff-dark: #1b3547;     
    --white: #FFFFFF;
    
    /* Physics */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100vw;
    height: 100dvh; 
    overflow: hidden; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: #1b3547; 
}

/* ─── 1. THE VIVID PHOTOGRAPHIC BACKGROUND ───────────────────────── */
.auth-page {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: linear-gradient(rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.5)), 
                url('/static/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    padding: clamp(16px, 3vh, 32px);
    position: relative;
    z-index: 1;
}

/* ─── 2. THE COLOR-SHIFTING GLASS SHELL ──────────────────────────── */
.auth-shell {
    width: 100%;
    max-width: 950px; /* Slightly wider to accommodate bigger logos */
    height: auto;
    max-height: 92dvh;
    
    /* DEFAULT STATE: Very transparent so background shines through */
    background: rgba(255, 255, 255, 0.09); 
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 28px;
    padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 56px); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    
    /* Smooth transition for the container */
    transition: background 0.5s var(--ease-smooth), 
                backdrop-filter 0.5s var(--ease-smooth), 
                box-shadow 0.5s var(--ease-smooth),
                border-color 0.5s var(--ease-smooth);
    animation: dropIn 0.8s var(--ease-spring);
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(24px, 4vw, 48px); 
    align-items: center; 
    overflow-y: auto;
}

/* HOVER STATE: Container turns thick white to focus on inputs */
.auth-shell:hover {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.auth-shell::-webkit-scrollbar { width: 0; }

@keyframes dropIn { 
    from { opacity: 0; transform: translateY(30px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* ─── 3. TEXT TRANSITIONS (The Magic Trick) ──────────────────────── */
.brand-middle h1, .brand-middle p, .tradeplus-mock-logo, 
.powered-text, .slogan, .form-group label, .switch-btn {
    transition: color 0.5s var(--ease-smooth), 
                background 0.5s var(--ease-smooth), 
                border-color 0.5s var(--ease-smooth);
}

/* ─── 4. BRANDING STACK (Left Column) ────────────────────────────── */
.brand-block { 
    grid-column: 1; text-align: left; 
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: clamp(16px, 3vw, 32px);
    display: flex; flex-direction: column;
    transition: border-color 0.5s var(--ease-smooth);
}
.auth-shell:hover .brand-block { border-color: rgba(27, 53, 71, 0.15); }

.brand-top { margin-bottom: clamp(12px, 2vh, 24px); }

/* ENLARGED SAAFF LOGO */
.brand-logo-img { 
    height: clamp(100px, 16vh, 160px); /* Massively increased size */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); 
    transition: transform 0.4s var(--ease-spring);
}
.brand-logo-img:hover { transform: scale(1.02); }

/* DEFAULT: White Text */
.brand-middle { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tradeplus-mock-logo {
    display: inline-block; padding: 4px 12px; 
    background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.4); 
    border-radius: 10px; color: var(--white); 
    font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
    margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); width: fit-content;
}
.tradeplus-mock-logo span { color: var(--saaff-light); }
.brand-middle h1 { font-size: clamp(18px, 2vw, 26px); color: var(--white); font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.brand-middle p { margin-top: 6px; color: #f1f5f9; font-size: 13px; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.brand-bottom { margin-top: clamp(20px, 3vh, 32px); display: flex; flex-direction: column; gap: 10px; }
.powered-row { display: flex; align-items: center; gap: 12px; }
.powered-text { font-size: 9px; font-weight: 800; color: #f8fafc; text-transform: uppercase; letter-spacing: 1.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.4);}

/* ENLARGED CARGO CLEAR BADGE */
.cc-logo { 
    height: clamp(65px, 9vh, 90px); /* Massively increased size */
    width: auto; 
    object-fit: contain; 
    background: #ffffff; /* Keeping standard white background for the jpg */
    padding: 10px 14px; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: transform 0.3s var(--ease-spring); 
}
.cc-logo:hover { transform: translateY(-2px); }
.slogan { font-size: 9.5px; color: #38bdf8; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* HOVER: Dark Text (Overrides the white text above when container is hovered) */
.auth-shell:hover .tradeplus-mock-logo { background: var(--white); border-color: rgba(27, 53, 71, 0.1); color: var(--saaff-dark); text-shadow: none; }
.auth-shell:hover .brand-middle h1 { color: var(--saaff-dark); text-shadow: none; }
.auth-shell:hover .brand-middle p { color: #334155; text-shadow: none; }
.auth-shell:hover .powered-text { color: #475569; text-shadow: none; }
.auth-shell:hover .slogan { color: var(--saaff-slate); text-shadow: none; }

/* ─── 5. FORM & TOGGLE (Right Column) ────────────────────────────── */
.login-form-wrapper { grid-column: 2; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 380px; margin: 0 auto; }

.login-switch {
    display: flex; background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px;
    padding: 4px; margin-bottom: clamp(14px, 2.5vh, 20px);
    transition: background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth);
}
.auth-shell:hover .login-switch { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.7); }

.switch-btn { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 10px; cursor: pointer; font-weight: 700; color: #f1f5f9; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px;}
.auth-shell:hover .switch-btn:not(.active) { color: #475569; }

.switch-btn.active { background: var(--white); color: var(--saaff-light); box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: scale(1.02); }

.login-form { display: none; flex-direction: column; gap: clamp(10px, 1.8vh, 14px); animation: slideRight 0.4s var(--ease-smooth); }
.login-form.active { display: flex; }
@keyframes slideRight { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }

/* Inputs & Labels */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-weight: 800; font-size: 11px; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-left: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.auth-shell:hover .form-group label { color: var(--saaff-dark); text-shadow: none; }

.form-group input, .form-group select {
    width: 100%; padding: clamp(12px, 1.8vh, 15px) 16px;
    background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--saaff-dark); outline: none; transition: all 0.3s var(--ease-spring);
}
.auth-shell:hover .form-group input, .auth-shell:hover .form-group select { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 1); }

.form-group input::placeholder { color: #475569; }
.form-group input:focus, .form-group select:focus { background: var(--white); border-color: var(--saaff-light); box-shadow: 0 0 0 4px rgba(12, 165, 230, 0.2), 0 8px 16px rgba(0,0,0,0.05); transform: translateY(-2px); }

/* ─── 6. BUTTON ─────────────────────────────────────────────────── */
.btn-primary {
    border: 0; border-radius: 12px; padding: clamp(14px, 2vh, 16px); font-weight: 800; cursor: pointer;
    background: linear-gradient(135deg, var(--saaff-dark) 0%, var(--saaff-slate) 100%);
    background-size: 200% auto; color: var(--white); transition: all 0.4s var(--ease-spring);
    width: 100%; font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: 1.5px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.btn-primary:hover { background-position: right center; transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 25px rgba(12, 165, 230, 0.4); }

/* ─── 7. MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 850px) {
    .auth-shell { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; max-width: 440px; }
    .brand-block { grid-column: 1; border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 20px; text-align: center; align-items: center; }
    .powered-row { justify-content: center; }
    .login-form-wrapper { grid-column: 1; max-width: 100%; }
}