/* =========================
   SwiftGraphix — Dark SaaS (Automotive) — LOGIN (Compact)
   ========================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ---- Design Tokens ---- */
:root{
  /* Palette */
  --bg: #0B0F14;             /* deep slate page bg */
  --bg-elev: #10161D;        /* elevated panels */
  --surface: #0F1621;        /* cards/nav */
  --line: #18212B;           /* subtle borders */

  --text: #E7EDF6;           /* primary text */
  --muted: #A6B3C2;          /* secondary text */

  --brand: #0CA8FF;          /* cyan accent */
  --brand-600:#0895E0;
  --brand-700:#067AB8;
  --brand-soft: rgba(12,168,255,.12);

  /* Radii / Shadows / Motion */
  --radius: 14px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.45);
  --shadow-md: 0 16px 32px rgba(0,0,0,.55);

  --e-out: cubic-bezier(.16,1,.3,1);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(12,168,255,.10), transparent 60%),
    linear-gradient(180deg, #0B0F14, #10161D);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{color: var(--brand); text-decoration:none}
a:hover{color: var(--brand-600)}

/* =========================
   Header / Navigation
   ========================= */
.header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(15,22,33,.9);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.header.is-scrolled{ box-shadow: var(--shadow-sm) }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; width:100%;
  padding:.55rem 1rem;
}
.logo img{height:40px}

/* Nav */
.nav{display:flex; align-items:center}
.nav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.nav ul li a{
  color: var(--muted); font-weight:600; font-size:15px; padding:.35rem 0; position:relative;
}
.nav ul li a:hover{color: var(--text)}
.nav ul li a[aria-current="page"]{ color: var(--text) }
.nav ul li a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  transition: right .35s var(--e-out); border-radius:2px;
}
.nav ul li a:hover::after,
.nav ul li a[aria-current="page"]::after{ right:0 }

/* Mobile burger */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  cursor:pointer; padding:8px; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background: var(--surface);
  position:absolute; top:12px; right:20px;
}
.menu-toggle span{
  height:3px; width:22px; background: var(--text);
  margin:3px 0; border-radius:2px; transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle.open span:nth-child(1){ transform: rotate(45deg) translate(4px,4px) }
.menu-toggle.open span:nth-child(2){ opacity:0 }
.menu-toggle.open span:nth-child(3){ transform: rotate(-45deg) translate(4px,-4px) }

@media (max-width:880px){
  .menu-toggle{display:flex}
  .nav{
    position:absolute; top:100%; left:0; width:100%;
    display:none; flex-direction:column;
    background: var(--surface); border-bottom:1px solid var(--line);
    box-shadow: var(--shadow-sm); animation: fadeInNav .25s ease;
  }
  .nav.active{display:flex}
  .nav ul{flex-direction:column; width:100%}
  .nav ul li a{display:block; padding:1rem; border-top:1px solid var(--line)}
}
@keyframes fadeInNav{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

/* =========================
   Flash Messages
   ========================= */
.flash-messages{
  position: fixed; top: 76px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000; width: calc(100% - 32px); max-width: 420px;
}
.flash{
  padding: 10px 12px; border-radius: 10px;
  margin-bottom: 10px; display:flex; align-items:center; gap:8px;
  font-weight:600; background: var(--surface); color: var(--text);
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
  animation: fadeOut 5s forwards;
}
.flash.success { border-left:4px solid #28a745 }
.flash.danger  { border-left:4px solid #dc3545 }
.flash.warning { border-left:4px solid #ffc107 }
.flash.info    { border-left:4px solid #0CA8FF }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }

/* =========================
   Auth Shell (centers compact card)
   ========================= */
.auth-shell{
  min-height: calc(100dvh - 60px); /* minus sticky header */
  display: grid; place-items: center;
  padding: 12px;
}

/* =========================
   Login Card (Compact)
   ========================= */
main.auth{
  max-width: 420px;
  margin: 0; /* centered by auth-shell */
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
@media (max-width:560px){
  main.auth{ padding: 18px }
}

/* Title */
.auth h2{
  color: var(--text);
  font-size: clamp(1.45rem, 1vw + 1.1rem, 1.8rem);
  margin: 0 0 10px; font-weight: 800; letter-spacing:.005em;
}
.auth .sub{
  color: var(--muted); margin: -2px 0 14px; font-size: .95rem;
}

/* Form rhythm */
.auth form{ display:grid; gap: 12px }

/* Floating Label Inputs
   NOTE: Ensure inputs have placeholder=" " in HTML to enable :placeholder-shown */
.floating-group{ position: relative; margin: 0; text-align:left }
.floating-group input{
  width:100%; padding: 10px 12px; font-size:15px; height: 44px;
  border:1px solid var(--line); background: var(--bg-elev);
  color: var(--text); border-radius: 10px; outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px transparent;
}
.floating-group input:focus{
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.floating-group label{
  position:absolute; top:50%; left:12px; transform: translateY(-50%);
  color: var(--muted); background: transparent; padding: 0 .35rem;
  transition: all .18s var(--e-out); pointer-events:none; border-radius:6px;
}
.floating-group input:focus + label,
.floating-group input:not(:placeholder-shown) + label{
  top: -8px; left:10px; font-size:11px; color: var(--brand);
  background: var(--surface);
}

/* Meta row: remember + forgot inline */
.remember-me{
  display:flex; align-items:center; gap:8px; font-size:13.5px;
  color: var(--muted);
}
.remember-me input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--brand) }

.meta-row{
  display:flex; justify-content:space-between; align-items:center;
  margin: 2px 0 6px;
}
.forgot-password{ margin: 0 }
.forgot-password a{ color: var(--brand); font-size:13.5px }
.forgot-password a:hover{ color: var(--brand-600); text-decoration: underline }

/* Submit Button (compact) */
button[type="submit"],
.auth .btn-primary{
  width:100%;
  background: linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#fff; border:none; padding: 12px 14px; font-size: 16px; font-weight:700;
  border-radius: 10px; cursor:pointer; transition: transform .18s var(--e-out), filter .18s;
  box-shadow: 0 8px 18px rgba(12,168,255,.18);
}
button[type="submit"]:hover{ transform: translateY(-2px); filter:saturate(110%) }
button[type="submit"]:active{ transform: translateY(0) }

/* Register link (optional) */
.register-link{ margin-top: 12px; font-size: 14.5px; color: var(--muted); text-align:center }
.register-link a{ color: var(--brand); font-weight:700 }
.register-link a:hover{ color: var(--brand-600); text-decoration: underline }

/* =========================
   Footer
   ========================= */
.footer-section{
  background: var(--bg-elev); color: var(--text);
  padding: 60px 20px; font-size:14px; border-top:1px solid var(--line);
}
.footer-container{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; gap:20px;
}
.footer-column{flex:1; min-width:250px; text-align:left}
.footer-column h3{color:var(--brand); font-size:18px; margin-bottom:15px}
.footer-column p, .footer-column a{color: var(--muted); line-height:1.8}
.footer-column ul{list-style:none; padding:0; margin:0}
.footer-column ul li{margin-bottom:10px}
.footer-column ul li a{color: var(--brand); font-size:16px}
.footer-column ul li a:hover{color: var(--brand-600); text-decoration:underline}
.footer-bottom{text-align:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:#8FA0AF}

/* =========================
   Utilities
   ========================= */
.container{max-width:1200px; margin-inline:auto; padding-inline: 16px}
.hidden{display:none!important}