/* login/css/style.css — SA Cargo */
:root {
    --primary:      #1a3a5c;
    --primary-l:    #2a5298;
    --accent:       #e8a020;
    --success:      #2e7d52;
    --danger:       #c0392b;
    --warning:      #e67e22;
    --text-dark:    #1c2b3a;
    --text-mid:     #4a5568;
    --text-light:   #718096;
    --border:       #d8e2ed;
    --bg-page:      #f0f4f8;
    --bg-card:      #ffffff;
    --bg-input:     #f7fafc;
    --shadow-card:  0 8px 40px rgba(26,58,92,.13);
    --radius:       14px;
    --radius-sm:    8px;
    --tr:           0.22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--text-dark);background:var(--bg-page);}

/* ── Login layout ── */
.login-body{min-height:100vh;display:flex;align-items:stretch;}
.login-wrapper{display:flex;width:100%;min-height:100vh;}

.login-left{
    flex:0 0 42%;
    background:linear-gradient(145deg,var(--primary) 0%,var(--primary-l) 100%);
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.login-left::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(232,160,32,.12) 0%,transparent 60%),
               radial-gradient(ellipse 40% 40% at 10% 80%,rgba(255,255,255,.06) 0%,transparent 50%);
}
.login-left::after{
    content:'';position:absolute;bottom:-60px;right:-60px;
    width:280px;height:280px;border:2px solid rgba(255,255,255,.07);border-radius:50%;
}

.brand-panel{position:relative;z-index:1;padding:48px 44px;color:#fff;}
.logo-area{margin-bottom:36px;}
.logo{max-height:64px;max-width:200px;object-fit:contain;filter:brightness(0) invert(1);}
.logo-text-fallback{display:inline-flex;align-items:baseline;gap:6px;}
.logo-sa{font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:600;color:var(--accent);letter-spacing:-1px;}
.logo-cargo{font-family:'DM Sans',sans-serif;font-size:1.4rem;font-weight:300;color:rgba(255,255,255,.85);letter-spacing:4px;text-transform:uppercase;}
.brand-tagline h1{font-family:'Playfair Display',serif;font-size:2rem;font-weight:500;line-height:1.25;margin-bottom:10px;}
.brand-tagline p{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6;max-width:260px;}
.brand-deco{margin-top:44px;display:flex;align-items:center;gap:16px;}
.deco-line{flex:1;height:1px;background:rgba(255,255,255,.18);}
.deco-dots{display:flex;gap:6px;}
.deco-dots span{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.7;}
.deco-dots span:last-child{opacity:1;}

.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg-page);}
.login-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:44px 40px;width:100%;max-width:420px;border:1px solid var(--border);}
.card-header{margin-bottom:32px;}
.card-header h2{font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:500;color:var(--primary);margin-bottom:6px;}
.card-header p{font-size:.875rem;color:var(--text-light);}

/* ── Form ── */
.form-group{margin-bottom:20px;}
.form-group label{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--text-mid);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}
.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=email]{
    width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    background:var(--bg-input);font-family:'DM Sans',sans-serif;font-size:.95rem;color:var(--text-dark);
    outline:none;transition:border-color var(--tr),box-shadow var(--tr);
}
.form-group input:focus{border-color:var(--primary-l);box-shadow:0 0 0 3px rgba(42,82,152,.09);background:#fff;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:46px;}
.toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;opacity:.45;transition:opacity var(--tr);display:flex;align-items:center;}
.toggle-pw img{width:18px;height:18px;}
.toggle-pw:hover{opacity:.85;}

/* ── Extras ── */
.form-extras{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.remember-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.88rem;color:var(--text-mid);user-select:none;}
.remember-label input[type=checkbox]{display:none;}
.custom-check{width:18px;height:18px;border:1.5px solid var(--border);border-radius:4px;background:var(--bg-input);display:inline-flex;align-items:center;justify-content:center;transition:all var(--tr);flex-shrink:0;}
.remember-label input:checked+.custom-check{background:var(--primary);border-color:var(--primary);}
.remember-label input:checked+.custom-check::after{content:'';display:block;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(42deg) translateY(-1px);}
.session-note{font-size:.78rem;color:var(--text-light);background:var(--bg-input);padding:3px 10px;border-radius:20px;border:1px solid var(--border);}

/* ── Button ── */
.btn-login{width:100%;padding:14px 24px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-l) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity var(--tr),transform var(--tr),box-shadow var(--tr);box-shadow:0 4px 16px rgba(26,58,92,.22);}
.btn-login:hover{opacity:.93;transform:translateY(-1px);box-shadow:0 6px 22px rgba(26,58,92,.30);}
.btn-login:active{transform:translateY(0);}
.btn-login:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Message ── */
.login-message{padding:12px 16px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:8px;border:1px solid transparent;}
.login-message.success{background:#edf7f1;color:var(--success);border-color:#b2dfcc;}
.login-message.error{background:#fdf2f1;color:var(--danger);border-color:#f5c6c2;}
.login-message.warning{background:#fef9ed;color:var(--warning);border-color:#f9dfa0;}

/* ── Footer ── */
.login-footer{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);text-align:center;}
.login-footer p{font-size:.78rem;color:var(--text-light);line-height:1.7;}
.admin-link-hint a{color:var(--primary-l);text-decoration:none;font-weight:500;transition:color var(--tr);}
.admin-link-hint a:hover{color:var(--accent);}

/* ── Status pages (welcome / error) ── */
.page-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-page);padding:24px;}
.status-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:52px 48px;width:100%;max-width:480px;text-align:center;border:1px solid var(--border);}
.status-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;font-size:2rem;}
.status-icon.success{background:#edf7f1;}
.status-icon.error{background:#fdf2f1;}
.status-card h1{font-family:'Playfair Display',serif;font-size:1.9rem;color:var(--primary);margin-bottom:12px;}
.status-card p{color:var(--text-mid);line-height:1.7;margin-bottom:8px;font-size:.92rem;}
.username-display{display:inline-block;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:4px 14px;font-weight:600;color:var(--primary);margin:4px 0 16px;font-size:1rem;}
.btn-action{display:inline-block;margin-top:20px;padding:12px 28px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-weight:600;font-size:.9rem;transition:opacity var(--tr);}
.btn-action:hover{opacity:.85;}
.session-info{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.session-info p{font-size:.78rem;color:var(--text-light);}
.session-bar{height:4px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden;}
.session-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;}

@media(max-width:768px){
    .login-left{display:none;}
    .login-card{padding:32px 24px;}
}