/* ═══════════════════════════════════════════════════════════
   Eagle Wings CRM — Auth Pages (Login, Forgot Password, etc.)
   Dark navy theme matching the app's design system
   Brand: Navy #0A1628 / Card #0C1D33 / Gold #C9973A
═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
   background: #0A1628;
   font-family: 'Work Sans', sans-serif;
   margin: 0;
   min-height: 100vh;
}

/* ── Full-page centered layout ── */
main.auth {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #0A1628;
   padding: 24px 16px;
}

/* Subtle background texture */
main.auth::before {
   content: '';
   position: fixed;
   inset: 0;
   background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(201,151,58,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 90%, rgba(201,151,58,0.04) 0%, transparent 55%);
   pointer-events: none;
   z-index: 0;
}

/* ── Auth card ── */
.auth-card {
   position: relative;
   z-index: 1;
   background: #0C1D33;
   border: 1px solid rgba(201,151,58,0.28);
   border-radius: 16px;
   box-shadow:
      0 0 0 1px rgba(201,151,58,0.06),
      0 24px 64px rgba(0,0,0,0.55);
   padding: 40px 36px 36px;
   width: 100%;
   max-width: 420px;
}

/* ── Logo ── */
.auth-logo-wrap {
   text-align: center;
   margin-bottom: 28px;
}
.auth-logo {
   max-height: 52px;
   width: auto;
}
.auth-logo-fallback {
   font-size: 1.4rem;
   font-weight: 700;
   color: #ffffff;
   letter-spacing: 0.3px;
}
.auth-logo-fallback span { color: #C9973A; }

/* ── Heading ── */
.auth-heading {
   font-size: 1.45rem;
   font-weight: 700;
   color: #ffffff;
   margin: 0 0 6px;
   text-align: center;
}
.auth-sub {
   font-size: 0.83rem;
   color: rgba(255,255,255,0.40);
   text-align: center;
   margin-bottom: 28px;
}

/* ── Field wrapper ── */
.au-field {
   margin-bottom: 18px;
}

/* ── Labels ── */
.au-label {
   display: block;
   font-size: 0.68rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   color: #8A9BB0;
   margin-bottom: 7px;
}

/* ── Inputs ── */
.au-input {
   display: block;
   width: 100%;
   background: rgba(255,255,255,0.05) !important;
   border: 1px solid rgba(255,255,255,0.12) !important;
   border-radius: 8px !important;
   padding: 12px 16px !important;
   font-size: 0.9rem;
   color: #ffffff !important;
   outline: none;
   height: auto !important;
   font-family: inherit;
   transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.au-input:focus {
   border-color: #C9973A !important;
   box-shadow: 0 0 0 3px rgba(201,151,58,0.15) !important;
   background: rgba(255,255,255,0.07) !important;
}
.au-input::placeholder { color: rgba(255,255,255,0.22) !important; }
.au-input.au-error-input {
   border-color: #f87171 !important;
   box-shadow: 0 0 0 3px rgba(248,113,113,0.12) !important;
}

/* ── Password field with toggle ── */
.au-pw-wrap {
   position: relative;
   display: flex;
   align-items: center;
}
.au-pw-wrap .au-input { padding-right: 44px !important; }
.au-pw-toggle {
   position: absolute;
   right: 12px;
   background: none;
   border: none;
   color: rgba(255,255,255,0.35);
   cursor: pointer;
   font-size: 0.88rem;
   padding: 4px;
   line-height: 1;
   transition: color 0.15s;
   outline: none;
}
.au-pw-toggle:hover { color: rgba(255,255,255,0.75); }

/* ── Inline field error ── */
.au-field-error {
   font-size: 0.78rem;
   color: #f87171;
   margin-top: 5px;
   display: none;
}
.au-field-error.visible { display: block; }

/* ── Remember + Forgot row ── */
.au-meta-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px;
}
.au-remember {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 0.82rem;
   color: rgba(255,255,255,0.50);
   cursor: pointer;
   user-select: none;
}
.au-remember input[type="checkbox"] {
   accent-color: #C9973A;
   cursor: pointer;
   width: 15px;
   height: 15px;
}
.au-forgot {
   font-size: 0.82rem;
   color: #C9973A;
   text-decoration: none;
   transition: color 0.15s;
}
.au-forgot:hover { color: #b8852e; text-decoration: none; }

/* ── Response / global error ── */
.au-response {
   text-align: center;
   font-size: 0.82rem;
   min-height: 20px;
   margin-bottom: 14px;
}
.au-response .text-danger { color: #f87171 !important; }

/* ── Login button ── */
.au-btn {
   display: block;
   width: 100%;
   background: #C9973A;
   color: #0A1628;
   border: none;
   border-radius: 8px;
   padding: 14px 16px;
   font-size: 0.95rem;
   font-weight: 700;
   cursor: pointer;
   font-family: inherit;
   letter-spacing: 0.02em;
   transition: background 0.15s, opacity 0.15s;
   line-height: 1;
}
.au-btn:hover  { background: #b8852e; }
.au-btn:active { background: #a57428; }
.au-btn:disabled {
   background: rgba(201,151,58,0.35);
   color: rgba(10,22,40,0.50);
   cursor: not-allowed;
}

/* ── Legacy class compatibility (auth.js uses .authBtn on .login_area) ── */
main.auth .authBtn,
.login_area .authBtn { /* Overridden by .au-btn styles via the new HTML */ }

/* Responsive */
@media (max-width: 480px) {
   .auth-card { padding: 28px 20px 24px; }
   .auth-heading { font-size: 1.25rem; }
}