/* Login page — Stirling Civil Engineering invoice portal */

:root{
  --maroon-1:#2a0a0f;
  --maroon-2:#521521;
  --maroon-3:#6b1c28;
  --shape:rgba(255,255,255,.055);

  --ink:#f6eeec;
  --muted:rgba(246,238,236,.62);
  --field-border:#3a1a20;
  --field-bg:#ffffff;
  --field-ink:#1c1214;

  --accent:#ff5a5f;
  --accent-ink:#2a0a0a;
  --logo-red:#cf1020;

  --danger:#ffb26b;
  --danger-bg:rgba(255,178,107,.12);
  --danger-border:rgba(255,178,107,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(120% 90% at 8% 0%, var(--maroon-3) 0%, transparent 55%),
    linear-gradient(155deg, var(--maroon-1) 0%, var(--maroon-2) 70%, var(--maroon-1) 100%);
}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;}

/* decorative watermark shape */
.shape{
  position:absolute;
  top:-8%;
  left:-9%;
  width:46vw;
  height:78vh;
  background:var(--shape);
  clip-path:polygon(0% 8%, 62% 0%, 100% 22%, 78% 62%, 58% 100%, 0% 96%, 18% 60%, 0% 55%, 16% 46%, 0% 40%);
  filter:blur(2px);
  pointer-events:none;
}
.shape::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--shape);
  filter:blur(40px);
}

.formside{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,5vw,64px);
}
.formcard{width:100%; max-width:380px;}

.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:40px;
}
.logo-frame{
  position:relative;
  display:inline-flex;
  padding:24px;
  border:2px solid rgba(246,238,236,.65);
  border-radius:18px;
  flex:0 0 auto;
}
.logo-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(246,238,236,.28);
  border-radius:12px;
  pointer-events:none;
}
.logo-plate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:8px;
  padding:9px 16px;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  flex:0 0 auto;
}
.logo-plate img{
  display:block;
  height:34px;
  width:auto;
}
.logo-word{
  font-family:Georgia,"Times New Roman","Noto Serif",serif;
  font-weight:700;
  font-style:italic;
  font-size:1.5rem;
  line-height:1;
  color:var(--logo-red);
  border:3px solid var(--logo-red);
  border-radius:9px;
  padding:5px 14px 7px;
  letter-spacing:.01em;
}

.field{margin-bottom:20px;}
.field label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:7px;
}
.field input{
  width:100%;
  font:inherit;
  font-size:.95rem;
  color:var(--field-ink);
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:8px;
  padding:.8em .9em;
}
.field input::placeholder{color:#8a8a8a;}
.field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn-primary{
  display:block;
  width:100%;
  text-align:center;
  font:inherit;
  font-weight:700;
  font-size:.95rem;
  padding:.85em 1em;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:var(--accent-ink);
  margin-top:6px;
}
.btn-primary:hover{filter:brightness(1.05);}

.alert{
  font-size:.85rem;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid var(--danger-border);
  border-radius:8px;
  padding:.7em .9em;
  margin-bottom:20px;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}