/* ===================================================================
   AtSea CRM — AUTH STYLES (login / forgot / reset)
   File: /public/assets/css/auth.css
   =================================================================== */

/* -------------------- Basis -------------------- */
.auth-body{ background:#020b1a; color:#fff; }
.auth-main, .auth-wrap{ min-height:100vh; }

/* 2 kolommen (hero links, paneel rechts) + nette tussenruimte */
.auth-wrap{
  display:grid;
  grid-template-columns: 1fr min(560px, 38vw); /* rechts vaste, responsieve breedte */
  column-gap: clamp(28px, 4vw, 80px);
  align-items: center; /* verticaal centreren */
}
@media (max-width:980px){
  .auth-wrap{ grid-template-columns:1fr; }
}

/* -------------------- Hero (links) -------------------- */
/* Gebruik je geuploade achtergrond */
.auth-hero{
  position:relative;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:48px 32px;
  overflow:hidden;
  min-height:100svh;
  background:#020b1a url('/assets/images/background.jpg') center/cover no-repeat;
  z-index:0;
}
.auth-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(15,23,42,.7), rgba(15,23,42,.4));
}
.auth-hero.auth-hero--no-overlay::before{ display:none; }
.auth-hero-inner{ position:relative; max-width:560px; z-index:1; }
.logo-mark{ font-size:56px; line-height:1; opacity:.95; }
.hero-title{
  margin:12px 0 8px; font-size:48px; font-weight:800; letter-spacing:-.02em;
  color:#f9fafb; text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hero-title span{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); }
.hero-sub{
  font-size:18px; line-height:1.6; opacity:.95; max-width:46ch;
  color:#f3f4f6; text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hero-foot{ margin-top:40px; opacity:.9; font-size:14px; color:#e5e7eb; }

/* -------------------- Paneel (rechts) -------------------- */
.auth-card{
  background:#0b1620; /* subtiele donkere achtergrond achter paneel */
  border-left:1px solid #0f2a3a;
  box-shadow:-10px 0 30px rgba(0,0,0,.25);
  min-height:100svh;
  display:grid; place-items:center;
  padding: clamp(28px, 5vw, 72px) clamp(28px, 5vw, 64px);
  z-index:1;
}

.auth-card-inner{
  width:100%;
  max-width:520px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(7,25,35,.72);
  border:1px solid #0f2a3a;
  border-radius:14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.brand{ font-weight:800; font-size:18px; margin:0 0 6px; color:#fff; }
.welcome{ font-size:24px; margin:0 0 8px; color:#fff; }
.muted{ color:#9aa4b2; margin:0 0 18px; }

/* login links */
.link{ color:#60a5fa; text-decoration:underline; }
.link:hover{ color:#93c5fd; }

/* -------------------- Velden -------------------- */
.auth-form{ display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field > span{ font-size:14px; color:#cbd5e1; }

.field input,
.auth-form input,
.auth-form select,
.auth-form textarea{
  height:42px; 

	/* compacter */
  padding:0 12px;
  border:1px solid #334155;
  border-radius:12px;
  font-size:14px;
  background:#0b1220;
  color:#e5e7eb;
  width:90%;
}
.field input::placeholder,
.auth-form input::placeholder,
.auth-form textarea::placeholder{ color:#94a3b8; }
.field input:focus,
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.15);
}

/* -------------------- Knoppen -------------------- */
.btn,
button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px;           /* compacter */
  padding:0 14px;
  border-radius:999px; border:1px solid transparent;
  font-weight:800; letter-spacing:.2px;
  cursor:pointer; transition:filter .15s ease, transform .02s ease;
}
.btn:active,
button[type="submit"]:active{ transform: translateY(1px); }

.btn-primary,
button[type="submit"].btn-primary{
  width:90%;
  background:#10b3a0; border-color:#0aa79d; color:#032024;
}
.btn-primary:hover,
button[type="submit"].btn-primary:hover{ filter: brightness(1.05) saturate(1.03); }

/* Link ‘Wachtwoord vergeten?’ onder velden, links uitgelijnd */
.auth-card-inner .link{
  display:inline-block;
  margin-top:10px;
  text-align:left;
}

/* -------------------- Alerts -------------------- */
.alert{
  border-radius:12px;
  padding:10px 12px;
  margin:0 0 12px;
  font-size:14px;
	 width:90%;
  border:1px solid transparent;
}
.alert.error{ background:#3a1020; border-color:#c43e62; color:#ffd9e2; }
.alert.info{ background:#0f2230; border-color:#2c8fbf; color:#cfeefd; }
.alert.success{ background:#0c2a1a; border-color:#1b8f55; color:#d4fbe3; }

/* -------------------- Mobile tweaks -------------------- */
@media (max-width:520px){
  .auth-card{ padding:28px 18px; }
  .auth-card-inner{ padding:18px; border-radius:12px; }
  .hero-title{ font-size:36px; }

  /* iets ruimer voor touch op klein scherm */
  .field input,
  .auth-form input,
  .auth-form select,
  .auth-form textarea{
    height:46px;
    font-size:15px;
    padding:0 12px;
  }
  .btn, button[type="submit"]{ height:46px; }
}