/* Login page. Kept OUT of the template on purpose: inline, this block pushed the response past
   Tomcat's ~8KB buffer, so the response was committed BEFORE the <form th:action> — which then
   could not create the session it needs for the CSRF token, and the page was served truncated
   (HTTP 200, no form). An external stylesheet keeps the document small, and is cacheable. */

:root {
    --ink: #102d29; --teal: #0e7c6b; --teal-dark: #0a5d50;
    --sand: #f7f4ee; --amber: #e8a33d; --muted: #647570; --line: #e7e2d8;
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink); background: var(--sand); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
.wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* ── Left brand panel — layered gradient + amber glow + map/route motif ── */
.aside {
    position: relative; overflow: hidden; color: #fff; padding: 3.2rem 3.2rem 2.6rem;
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(680px 460px at 88% 8%, rgba(232,163,61,0.24), transparent 60%),
        linear-gradient(158deg, #108975 0%, #0a5d50 52%, #084b41 100%);
}
/* diagonal hairline weave */
.aside::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 27px);
}
/* concentric "map rings" + pin, bottom-left */
.aside::after {
    content: ""; position: absolute; left: -90px; bottom: -110px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, transparent 37%, rgba(255,255,255,0.06) 38% 39.4%, transparent 40%),
        radial-gradient(circle, transparent 56%, rgba(255,255,255,0.05) 57% 58.4%, transparent 59%),
        radial-gradient(circle, transparent 75%, rgba(255,255,255,0.045) 76% 77.4%, transparent 78%),
        radial-gradient(circle at 50% 50%, rgba(232,163,61,0.35) 0 6px, transparent 7px);
}
.aside > * { position: relative; z-index: 1; }
.aside .brand { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; display: inline-flex; }
.aside .brand span { color: var(--amber); }
.aside h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -0.02em; max-width: 13ch; line-height: 1.05; }
.aside .sub { opacity: 0.9; max-width: 34ch; margin-top: 0.9rem; font-size: 1.02rem; line-height: 1.5; }
.perks { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.perks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.98rem; opacity: 0.96; }
.perks li::before { content: ""; flex: none; margin-top: 0.5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(232,163,61,0.2); }
.aside .foot { font-size: 0.85rem; opacity: 0.72; }

/* ── Right form panel ── */
.panel { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem;
    background: radial-gradient(600px 420px at 90% -10%, rgba(232,163,61,0.08), transparent 60%), var(--sand); }
.form { width: 100%; max-width: 388px; }
.form h2 { font-family: var(--display); font-weight: 600; font-size: 1.95rem; letter-spacing: -0.02em; }
.form .lead { color: var(--muted); margin: 0.4rem 0 2rem; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 1.15rem; }
label span { display: block; margin-bottom: 0.4rem; }
/* Match every text-ish field, not just [type=text]: the email input is type=email and was falling
   through every rule below — no width, no padding — which is why it rendered as a bare browser box. */
.form input:not([type=hidden]):not([type=checkbox]) {
    width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 12px;
    font-size: 1rem; outline: none; background: #fff; color: var(--ink); font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.form input:not([type=hidden]):not([type=checkbox]):focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.16);
}
button {
    width: 100%; padding: 0.9rem; border: none; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    background: linear-gradient(180deg, #17433b, #102d29); color: #fff; font-weight: 700; font-size: 1rem; margin-top: 0.5rem;
    box-shadow: 0 8px 20px rgba(16,45,41,0.24); transition: transform .12s, box-shadow .18s, background .18s;
}
button:hover { transform: translateY(-1px); background: linear-gradient(180deg, #1c4c43, #123430); box-shadow: 0 12px 28px rgba(16,45,41,0.3); }
button:active { transform: translateY(0); }
button:disabled { cursor: progress; transform: none; box-shadow: none; opacity: 1; }
button:disabled:hover { transform: none; background: linear-gradient(180deg, #17433b, #102d29); }
.spin { flex: none; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert, .ok { padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9rem; margin-bottom: 1.4rem; }
.alert { background: #fde8e8; color: #9b1c1c; }
.ok { background: #e4f0ec; color: var(--teal-dark); }
.meta { margin-top: 1.5rem; color: var(--muted); font-size: 0.9rem; text-align: center; }
.meta a { color: var(--teal-dark); font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 2rem; color: var(--muted); font-size: 0.9rem; }
.back:hover { color: var(--ink); }

/* Social login */
.social-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
    padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: #fff;
    font-weight: 600; font-size: 0.95rem; color: var(--ink); cursor: pointer;
    transition: border-color .15s, box-shadow .18s, transform .12s; }
.social-btn:hover { border-color: #cfc8ba; box-shadow: 0 4px 14px rgba(16,45,41,0.08); transform: translateY(-1px); }
.divider { display: flex; align-items: center; gap: 0.8rem; text-align: center; color: var(--muted);
    font-size: 0.82rem; margin: 1.1rem 0 1.3rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 820px) { .wrap { grid-template-columns: 1fr; } .aside { display: none; } .panel { padding: 2.4rem 1.4rem; } }