/* Auth keeps its floating-field/brand composition while consuming the shared
   SEJA theme authority. This file owns Auth layout, not palette meaning. */
:root{ --radius:14px; }

html[data-theme="dark"] body{ --brand-panel:var(--sidebar); }
html[data-theme="light"] body{ --brand-panel:var(--sidebar); }

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Segoe UI, sans-serif;
}

body{
  min-height:100vh;
  background:linear-gradient(135deg,var(--sidebar),var(--bg),var(--surface-2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}


button,
input,
select{
  font:inherit;
}

button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:var(--seja-on-primary,#fff);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}

button:hover{
  opacity:.95;
  transform:translateY(-1px);
}

.auth-wrapper,
.signup-wrapper{
  width:100%;
  max-width:1000px;
  padding:20px;
}

.auth-card,
.signup-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.35);
}

html[data-theme="light"] body .auth-card,
html[data-theme="light"] body .signup-card{
  background:var(--surface-elevated);
  box-shadow:0 20px 52px rgba(71,85,105,0.18);
}

.brand{
  background:linear-gradient(160deg,var(--brand-panel),color-mix(in srgb,var(--surface-2) 88%,var(--primary) 12%));
  padding:60px 46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   AUTH LOGO — MODERN CIRCLE BADGE
   Applies to both Sign In and Sign Up.
   Requires assets/sejacon-logo.png to be transparent PNG.
   ========================================================= */

.auth-logo-slot{
  width:300px;
  height:300px;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  margin-bottom:26px;
  border-radius:999px;
  overflow:hidden;

  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.96), rgba(226,232,255,.42) 46%, color-mix(in srgb,var(--primary) 16%,transparent) 100%);
  border:1px solid rgba(129,140,248,.34);

  box-shadow:
    0 26px 64px color-mix(in srgb,var(--primary) 24%,transparent),
    0 12px 30px rgba(14,165,233,.12),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.auth-logo-slot::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  z-index:-1;
}

.auth-logo-slot::after{
  content:"";
  position:absolute;
  inset:-30px;
  border-radius:inherit;
  background:
    conic-gradient(
      from 225deg,
      transparent 0deg,
      rgba(14,165,233,.20) 55deg,
      rgba(99,102,241,.24) 118deg,
      rgba(168,85,247,.18) 170deg,
      transparent 245deg,
      transparent 360deg
    );
  opacity:.72;
  z-index:-2;
}

.auth-logo-slot img{
  display:block;
  width:300px;
  height:300px;
  object-fit:contain;
  padding:0;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 12px 20px rgba(15,23,42,.24));
}

.auth-logo-slot.is-missing{
  display:grid;
}

.auth-logo-slot.is-missing img{
  display:none !important;
}

.auth-logo-fallback{
  display:none;
  width:100%;
  height:100%;
  place-items:center;
  color:var(--seja-on-primary,#fff);
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:.04em;
}

.auth-logo-slot.is-missing .auth-logo-fallback{
  display:grid;
}

html[data-theme="light"] body .brand{
  background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface-2) 88%,var(--primary) 12%));
}

html[data-theme="light"] body .auth-logo-slot{
  background:
    radial-gradient(circle at 34% 24%, #ffffff, #eef2ff 52%, rgba(199,210,254,.78) 100%);
  border-color:#c7d2fe;
  box-shadow:
    0 24px 60px color-mix(in srgb,var(--primary) 18%,transparent),
    0 12px 30px rgba(14,165,233,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-theme="light"] body .auth-logo-slot img{
  filter:drop-shadow(0 12px 20px color-mix(in srgb,var(--primary) 18%,transparent));
}

html[data-theme="light"] body .auth-logo-fallback{
  color:var(--accent);
}

@media(max-width:768px){
  .auth-logo-slot{
    width:104px;
    height:104px;
    margin-bottom:18px;
  }

  .auth-logo-slot img{
    width:86px;
    height:86px;
  }
}

.brand h1{
  color:var(--accent);
  max-width:100%;
  margin-bottom:10px;
  font-size:2.55rem;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.04em;
}

.brand p{
  max-width:320px;
  color:var(--muted);
  font-size:1.05rem;
  font-weight:500;
  line-height:1.6;
}

.auth-form h2,
.signup-form h2{
  color:var(--text-light);
  font-size:2rem;
}

.subtitle{
  color:var(--muted);
}

.floating-field{
  position:relative;
  width:100%;
}

.floating-field input,
.floating-field select{
  width:100%;
  min-height:58px;
  padding:20px 14px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text-light);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  font-size:.95rem;
}

.floating-field input:focus,
.floating-field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent);
}

.floating-field label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  max-width:calc(100% - 28px);
  padding:0 6px;
  border-radius:999px;
  background:var(--input);
  color:var(--muted);
  font-size:.95rem;
  font-weight:700;
  line-height:1;
  overflow:hidden;
  pointer-events:none;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:top .18s ease, transform .18s ease, color .18s ease, font-size .18s ease, background .18s ease, box-shadow .18s ease;
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field select:focus + label,
.floating-field select:valid + label,
.select-field label{
  top:0;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:.74rem;
  background:var(--card);
  box-shadow:0 0 0 4px var(--card);
}

.password-wrapper{
  position:relative;
}

.password-wrapper input{
  padding-right:72px;
}

.password-wrapper label{
  max-width:calc(100% - 92px);
}

.password-wrapper input:focus + label,
.password-wrapper input:not(:placeholder-shown) + label{
  max-width:calc(100% - 28px);
  overflow:visible;
  text-overflow:clip;
}

.toggle-password{
  position:absolute;
  right:14px;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  margin:0;
  padding:3px 0;
  border:none;
  border-radius:0;
  appearance:none;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  cursor:pointer;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  user-select:none;
}

.toggle-password:hover{
  color:var(--primary);
  background:transparent;
  box-shadow:none;
  opacity:1;
  transform:translateY(-50%);
}


.back-btn-top{
  --notify-surface:var(--surface-elevated);
  --notify-border:var(--border);
  --notify-text:var(--text-light);
}

.input-error{
  border:1px solid var(--danger) !important;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--danger) 18%,transparent) !important;
}

.message{
  min-height:20px;
  font-size:.95rem;
  font-weight:700;
}

.password-rules{
  display:none;
  padding:12px 14px;
  border-radius:12px;
  background:var(--input);
  border:1px solid var(--border);
}

.password-rules.show{
  display:block;
}

.rule{
  margin:4px 0;
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
}

.rule.valid{
  color:var(--seja-success-foreground);
}

.rule.invalid{
  color:var(--muted);
}

.form-link-row a,
.switch-page a,
.login-link a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
}

.form-link-row a:hover,
.switch-page a:hover,
.login-link a:hover{
  text-decoration:underline;
}

@media(max-width:768px){
  .auth-card,
  .signup-card{
    grid-template-columns:1fr;
  }

  .brand{
    padding:35px 25px;
  }
}

/* top banner warning in demo mode */
.seja-demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
  user-select: none;
}

body.layout-has-demo-banner {
  padding-top: 34px !important;
}

.back-btn-top {
  /* Offset back button in signup/signin if banner is active */
  transition: top 0.2s ease;
}

body.layout-has-demo-banner .back-btn-top {
  top: 54px !important;
}


/* LETTER A AUTH REFINEMENT — COMPACT ACTIONS + ICON NAVIGATION */
.auth-form > button[type="submit"],
.signup-form > button[type="submit"] {
  min-height: 46px;
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
}

.back-btn-top.seja-icon-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 910;
}

/* Auth Utility Dock — fixed top-right cluster of icon-button utilities */
.auth-utility-dock {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 910;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.layout-has-demo-banner .auth-utility-dock {
  top: 66px;
}

body.layout-has-demo-banner .back-btn-top.seja-icon-button {
  top: 66px;
}

.back-btn-top.seja-icon-button[aria-disabled="true"] {
  opacity: .58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.password-wrapper input {
  padding-right: 58px;
}

@media (max-width: 680px) {
  .back-btn-top.seja-icon-button { top: 14px; left: 14px; }
  body.layout-has-demo-banner .back-btn-top.seja-icon-button { top: 58px; }
}