/* ========================================================================
File: public_html/templates/assets/login.css
Login split layout + brand treatment
Why: give the landing/login a professional, on-brand first impression
===================================================================== */
:root{ --auth-min: 880px }
.auth{min-height:100dvh;display:grid;grid-template-columns: 1.1fr 1fr}
@media (max-width: 920px){ .auth{grid-template-columns:1fr} }


/* Left: brand panel with diagonal stripes + yellow wedge */
.auth__brand{
position:relative;display:grid;place-items:center;padding:48px;isolation:isolate;
background:linear-gradient(180deg,#0e2a3b 0%, #0b2230 100%);
}
.auth__brand::before{ /* yellow chevron */
content:"";position:absolute;inset:0;clip-path:polygon(0 0, 55% 0, 48% 50%, 55% 100%, 0 100%);
background: var(--sentinet-yellow-500); mix-blend:screen; opacity:.95;
}
.auth__brand::after{ /* navy stripes */
content:"";position:absolute;inset:0;left:auto;right:0;width:50%;
background: repeating-linear-gradient(-45deg,
rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 14px,
transparent 14px, transparent 28px);
opacity:.7; pointer-events:none;
}
.brand-card{position:relative;z-index:1;text-align:center;color:#fff;max-width:520px}
.brand-card .logo{width:96px;height:96px;margin-inline:auto;border-radius:24px;display:grid;place-items:center;background:#fff}
.brand-card h1{margin:18px 0 6px;font-size:34px;letter-spacing:.3px}
.brand-card p{margin:0;color:rgba(255,255,255,.85)}


/* Right: form panel */
.auth__panel{display:grid;place-items:center;padding:40px;background:linear-gradient(180deg,#ffffff 0%, #f6f8fb 100%)}
.form-card{width:min(440px, 92vw);padding:28px}
.form-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.form-card h2{margin:4px 0 0;font-size:24px}
.helper{font-size:13px;color:var(--muted)}
.footer-note{margin-top:6px;font-size:12px;color:var(--muted)}