/* ============================================================================
DURA — Identity / Auth (production stylesheet)
Drop-in for ASP.NET MVC · Areas/Identity/Pages/Account
----------------------------------------------------------------------------
EVERYTHING is scoped under `.dura-auth` so it CANNOT collide with the site's
existing Bootstrap (.btn, .card, .form-control, .row, etc). Put this file in
wwwroot/css/ and load it only on the identity pages (see README).
Theme: light by default. Add `theme-dark` to the `.dura-auth` root for dark.
============================================================================ */
/* Fonts — if the app doesn't already load Saira + Inter, add this @import or a
on the identity layout. Safe to remove if the fonts are already global. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&family=Saira+Semi+Condensed:wght@500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');
/* ---- Tokens (scoped to the wrapper, light) ---- */
.dura-auth{
--font-display:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
--font-semi:'Saira Semi Condensed',system-ui,sans-serif;
--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--orange:#F7941E; --orange-bright:#FFA92E; --navy:#0B3A5A;
--r-sm:10px; --r-lg:22px; --ease:cubic-bezier(.22,.61,.36,1);
--bg:#EAEEF2; --surface:#FFFFFF; --surface-2:#F4F7FA; --surface-hi:#E2E9EF;
--line:rgba(11,58,90,0.10); --line-strong:rgba(11,58,90,0.18);
--ink:#0B1F2E; --ink-dim:rgba(11,31,46,0.60); --ink-faint:rgba(11,31,46,0.34);
--accent:var(--orange); --accent-soft:rgba(247,148,30,0.14);
--primary:#0B3A5A; --primary-ink:#FFFFFF; --primary-hi:#12496F;
--bad:#D6463A; --bad-soft:rgba(214,70,58,.13);
font-family:var(--font-ui); color:var(--ink);
}
/* ---- Tokens (dark) ---- */
.dura-auth.theme-dark{
--bg:#06090E; --surface:#0E151E; --surface-2:#141E29; --surface-hi:#22303F;
--line:rgba(255,255,255,0.065); --line-strong:rgba(255,255,255,0.12);
--ink:#ECF2F8; --ink-dim:rgba(236,242,248,0.56); --ink-faint:rgba(236,242,248,0.32);
--accent-soft:rgba(247,148,30,0.13);
--primary:#1B5577; --primary-ink:#EAF4FB; --primary-hi:#236A92;
--bad:#F2685C; --bad-soft:rgba(242,104,92,.16);
}
.dura-auth *{box-sizing:border-box;}
/* ============================================================================
SPLIT LAYOUT — brand panel (left) + form (right), full viewport height
============================================================================ */
.dura-auth{display:grid;grid-template-columns:44% 56%;min-height:100vh;background:var(--surface);}
/* ---- Brand panel ---- */
.dura-auth .brand-panel{position:relative;overflow:hidden;background:var(--navy);
display:flex;flex-direction:column;justify-content:flex-end;padding:56px 52px;}
.dura-auth.theme-dark .brand-panel{background:linear-gradient(160deg,#0B2233,#06121C);}
.dura-auth .bp-glow{position:absolute;inset:0;z-index:0;
background:radial-gradient(60% 50% at 82% 8%,rgba(247,148,30,.30),transparent 60%),
radial-gradient(50% 40% at 8% 100%,rgba(247,148,30,.14),transparent 60%);}
.dura-auth .streak{position:absolute;pointer-events:none;background:var(--orange);z-index:1;}
.dura-auth .s1{width:230px;height:26px;top:-6px;right:-40px;transform:rotate(-38deg);border-radius:40% 60% 55% 45%;filter:blur(1px);opacity:.16;}
.dura-auth .s2{width:340px;height:18px;bottom:64px;right:-80px;transform:rotate(-38deg);opacity:.10;border-radius:50%;}
.dura-auth .bp-copy{position:relative;z-index:2;}
.dura-auth .bp-logo{height:46px;width:auto;max-width:74%;object-fit:contain;display:block;margin:0 0 20px;}
.dura-auth .bp-eyebrow{font-family:var(--font-semi);font-weight:600;font-size:12px;letter-spacing:.22em;
text-transform:uppercase;color:var(--orange);margin:0 0 14px;}
.dura-auth .bp-line{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
color:#EAF4FB;font-size:44px;line-height:.98;margin:0;letter-spacing:.01em;}
.dura-auth .bp-sub{color:rgba(234,244,251,.62);font-size:14.5px;line-height:1.6;margin:18px 0 0;max-width:300px;}
/* ---- Form side ---- */
.dura-auth .form-side{display:flex;align-items:center;justify-content:center;padding:48px 56px;background:var(--surface);}
.dura-auth .auth-body{width:100%;max-width:360px;}
.dura-auth .eyebrow{font-family:var(--font-semi);font-weight:600;font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin:0 0 9px;}
.dura-auth h1.auth-title{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
letter-spacing:.01em;font-size:36px;line-height:1;margin:0;color:var(--ink);}
.dura-auth .lede{color:var(--ink-dim);font-size:14.5px;line-height:1.55;margin:12px 0 0;}
.dura-auth .auth-form{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
/* ============================================================================
FIELDS
============================================================================ */
.dura-auth .field{display:flex;flex-direction:column;gap:7px;}
.dura-auth .flabel{font-family:var(--font-ui);font-weight:600;font-size:13.5px;color:var(--ink);
display:flex;justify-content:space-between;align-items:baseline;}
.dura-auth .flabel a{font-weight:600;font-size:12.5px;color:var(--accent);text-decoration:none;}
.dura-auth .flabel a:hover{text-decoration:underline;}
.dura-auth .inp-wrap{position:relative;display:flex;align-items:center;}
.dura-auth .inp-wrap .lead{position:absolute;left:14px;display:flex;color:var(--ink-faint);pointer-events:none;}
.dura-auth .inp-wrap .lead svg{width:17px;height:17px;}
.dura-auth .inp-wrap:focus-within .lead{color:var(--accent);}
/* the Razor — targets Bootstrap's .form-control too, but only inside .dura-auth */
.dura-auth .inp,
.dura-auth .form-control{font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--surface-2);
border:1.5px solid transparent;border-radius:var(--r-sm);padding:13px 15px 13px 40px;width:100%;
transition:all .15s;line-height:1.3;}
.dura-auth .inp::placeholder,.dura-auth .form-control::placeholder{color:var(--ink-faint);}
.dura-auth .inp:focus,.dura-auth .form-control:focus{outline:none;background:var(--surface);
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.dura-auth .has-toggle{padding-right:44px;}
.dura-auth .eye-btn{position:absolute;right:8px;width:32px;height:32px;border:none;background:none;cursor:pointer;
color:var(--ink-faint);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s;}
.dura-auth .eye-btn:hover{color:var(--ink);background:var(--surface-hi);}
.dura-auth .eye-btn svg{width:17px;height:17px;}
.dura-auth .eye-btn .icon-off{display:none;}
.dura-auth .eye-btn.is-shown .icon-on{display:none;}
.dura-auth .eye-btn.is-shown .icon-off{display:block;}
.dura-auth .help{font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;}
.dura-auth .help svg{width:13px;height:13px;flex:none;}
/* ---- Validation (works with asp-validation output) ---- */
.dura-auth .field.err .inp,
.dura-auth .field.err .form-control,
.dura-auth .input-validation-error{border-color:var(--bad)!important;background:var(--bad-soft)!important;}
.dura-auth .field.err .lead{color:var(--bad);}
/* per-field message emitted by asp-validation-for */
.dura-auth .text-danger,
.dura-auth .field-validation-error{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bad)!important;}
/* validation summary emitted by asp-validation-summary */
.dura-auth .val-summary,
.dura-auth .validation-summary-errors{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-sm);
background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 34%,transparent);
color:var(--bad);font-size:13.5px;line-height:1.5;}
.dura-auth .val-summary svg{width:18px;height:18px;flex:none;margin-top:1px;}
.dura-auth .validation-summary-errors ul{margin:0;padding-left:18px;}
.dura-auth .validation-summary-valid{display:none;}
/* ============================================================================
BUTTONS & LINKS
============================================================================ */
.dura-auth .btn-dura{font-family:var(--font-display);font-weight:600;font-style:italic;text-transform:uppercase;
letter-spacing:.04em;font-size:16px;border:none;border-radius:var(--r-sm);padding:14px 24px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;width:100%;
transition:all .15s var(--ease);background:var(--primary);color:var(--primary-ink);
box-shadow:0 6px 16px rgba(11,58,90,.18);text-decoration:none;}
.dura-auth .btn-dura:hover{background:var(--primary-hi);}
.dura-auth .btn-dura svg{width:18px;height:18px;}
.dura-auth .back-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
color:var(--ink-dim);text-decoration:none;margin-top:20px;transition:color .15s;}
.dura-auth .back-link:hover{color:var(--accent);}
.dura-auth .back-link svg{width:15px;height:15px;}
/* ============================================================================
CONFIRMATION MEDALLION (ForgotPasswordConfirmation / ResetPasswordConfirmation)
Light ring, orange glyph, orange node on the ring. Centered layout.
============================================================================ */
.dura-auth.is-confirm .form-side{text-align:center;}
.dura-auth.is-confirm .auth-body{max-width:400px;}
.dura-auth.is-confirm .eyebrow,.dura-auth.is-confirm .lede{text-align:center;}
.dura-auth.is-confirm .back-link{justify-content:center;}
.dura-auth .status-badge{position:relative;width:92px;height:92px;border-radius:50%;
border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
margin:0 auto 24px;color:var(--accent);background:transparent;}
.dura-auth .status-badge svg{width:36px;height:36px;}
.dura-auth .status-badge::after{content:"";position:absolute;top:8px;right:8px;width:11px;height:11px;
border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--surface);}
/* ============================================================================
RESPONSIVE — below 900px collapse to a single centered column.
Brand panel is hidden (mirrors the original d-none d-lg-block).
============================================================================ */
@media (max-width:900px){
.dura-auth{grid-template-columns:1fr;}
.dura-auth .brand-panel{display:none;}
.dura-auth .form-side{padding:40px 24px;min-height:100vh;}
}
/* small brand mark shown on mobile when the panel is hidden */
.dura-auth .mobile-brand{display:none;text-align:center;margin-bottom:26px;}
.dura-auth .mobile-brand img{height:34px;width:auto;object-fit:contain;}
@media (max-width:900px){ .dura-auth .mobile-brand{display:block;} }