@charset "utf-8";
@import url('theme.css');

/*
  Public / auth pages (login, register)
  New layout: centered card with optional side illustration.
*/

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

.auth-shell{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:stretch;
}

.auth-brand{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.10));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
}

.auth-brand:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(420px 260px at 30% 20%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(420px 260px at 80% 60%, rgba(14,165,233,.18), transparent 60%);
  opacity:.8;
}

.auth-brand > *{position:relative}

.auth-brand h1{
  margin:0 0 6px 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
}

.auth-brand p{
  margin:0;
  color: var(--muted);
  max-width: 42ch;
}

.auth-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.auth-card h2{
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 900;
}

.auth-row{display:flex; gap: 10px; align-items:center; margin: 10px 0}
.auth-row label{width: 130px; color: var(--muted); font-weight: 700}
.auth-row input, .auth-row select{flex: 1 1 auto}

.auth-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
}

.auth-actions .links{display:flex; gap: 12px; flex-wrap:wrap; justify-content:flex-end}

.auth-note{color: var(--muted); font-size: 13px; margin-top: 10px}

/* legacy table classes used by register.php */
.tbg, .tbg2{width:100%}

@media (max-width: 920px){
  .auth-shell{grid-template-columns: 1fr}
  body{padding: 14px; align-items:flex-start}
  .auth-row{flex-direction:column; align-items:stretch}
  .auth-row label{width:auto}
}