/* ═══════════════════════════════════════════════════════════════════
   SAPS 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 SAPS COLOR PALETTE */
    --saps-slate: #3b7396;    
    --saps-light: #0ca5e6;    
    --saps-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 SAPS 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(--saps-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(--saps-dark); text-shadow: none; }
.auth-shell:hover .brand-middle h1 { color: var(--saps-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(--saps-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(--saps-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); } }
.auth-register-link { display: block; margin-top: 14px; color: #f1f5f9; font-size: 12px; font-weight: 700; text-align: center; transition: color .3s var(--ease-smooth); }
.auth-shell:hover .auth-register-link { color: var(--saps-dark); }

/* 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(--saps-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(--saps-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(--saps-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(--saps-dark) 0%, var(--saps-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%; }
}

/* Registration uses the same glass shell and form language as sign-in. */
.registration-page { height: 100dvh; overflow-y: auto; }
.registration-shell {
    max-width: 1180px;
    max-height: 94dvh;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
    gap: 0 clamp(24px, 4vw, 48px);
    padding: clamp(24px, 3vh, 36px) clamp(24px, 3vw, 44px);
}
.registration-wrapper { grid-column: 2; width: 100%; min-width: 0; }
.registration-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.registration-heading h2 { color: var(--white); font-size: 20px; font-weight: 800; transition: color 0.5s var(--ease-smooth); }
.auth-shell:hover .registration-heading h2 { color: var(--saps-dark); }
.registration-login-link { color: #f1f5f9; font-size: 12px; font-weight: 700; white-space: nowrap; }
.auth-shell:hover .registration-login-link { color: var(--saps-dark); }
.registration-form { display: flex; flex-direction: column; gap: 14px; }
.account-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; }
.account-type-picker legend { grid-column: 1 / -1; color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; }
.auth-shell:hover .account-type-picker legend { color: var(--saps-dark); }
.account-type-option { position: relative; cursor: pointer; }
.account-type-option input { position: absolute; opacity: 0; }
.account-type-option span { min-height: 82px; display: grid; grid-template-columns: 25px 1fr; align-content: center; column-gap: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.48); border-radius: 14px; background: rgba(255,255,255,.18); color: var(--white); transition: .25s var(--ease-smooth); }
.account-type-option i { grid-row: span 2; align-self: center; color: #7dd3fc; }
.account-type-option strong { font-size: 12px; }
.account-type-option small { margin-top: 3px; font-size: 10px; line-height: 1.4; opacity: .9; }
.auth-shell:hover .account-type-option span { color: var(--saps-dark); background: rgba(255,255,255,.58); border-color: rgba(255,255,255,.85); }
.account-type-option input:checked + span { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(12,165,230,.2); }
.auth-shell:hover .account-type-option input:checked + span { border-color: var(--saps-light); background: rgba(255,255,255,.9); }
.account-type-option input:focus-visible + span { outline: 3px solid rgba(12,165,230,.55); outline-offset: 2px; }
.registration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.registration-fields .form-group { min-width: 0; }
.registration-fields .form-group[hidden] { display: none; }
.registration-fields .form-group small { color: #eef7ff; font-size: 10px; line-height: 1.4; }
.auth-shell:hover .registration-fields .form-group small { color: #475569; }
.registration-fields .form-group input, .registration-fields .form-group select { padding: 10px 12px; font-size: 13px; }
.disclaimer-section { border: 1px solid rgba(255,255,255,.45); border-radius: 14px; padding: 12px; background: rgba(15,23,42,.16); }
.auth-shell:hover .disclaimer-section { background: rgba(255,255,255,.48); border-color: rgba(255,255,255,.8); }
.disclaimer-section h3 { margin-bottom: 8px; color: var(--white); font-size: 12px; letter-spacing: .4px; }
.auth-shell:hover .disclaimer-section h3 { color: var(--saps-dark); }
.disclaimer-copy { max-height: 150px; overflow-y: auto; white-space: pre-line; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.16); color: #f8fafc; font-size: 10px; line-height: 1.55; scrollbar-width: thin; scrollbar-color: #7dd3fc rgba(255,255,255,.12); }
.auth-shell:hover .disclaimer-copy { color: #334155; background: rgba(255,255,255,.56); }
.disclaimer-copy::-webkit-scrollbar { width: 8px; }
.disclaimer-copy::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient(180deg, #0ca5e6, #3b7396); }
.disclaimer-accept { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; color: var(--white); font-size: 11px; font-weight: 700; line-height: 1.45; }
.auth-shell:hover .disclaimer-accept { color: var(--saps-dark); }
.disclaimer-accept input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--saps-light); }
.registration-submit { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.registration-message { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.registration-message.error { color: #7f1d1d; background: rgba(254,226,226,.92); }
.registration-message.success { color: #14532d; background: rgba(220,252,231,.94); }
.registration-next-step { max-width: 320px; }

@media (max-width: 850px) {
    .registration-page { align-items: flex-start; padding: 12px; }
    .registration-shell { grid-template-columns: 1fr; max-width: 560px; max-height: none; }
    .registration-wrapper { grid-column: 1; }
    .registration-shell .brand-block { grid-column: 1; }
}
@media (max-width: 520px) {
    .registration-fields, .account-type-picker { grid-template-columns: 1fr; }
    .registration-heading { align-items: flex-start; flex-direction: column; }
}