/* Shared styling for the auth pages (login, account type, register).
   Markup: pages/user_management/_auth_layout.html and the pages that extend it. */

/* ---- First paint ---------------------------------------------------------------------------- */
/* The Tailwind classes on these pages are compiled by a script that finishes after the first
   frames, so the page used to flash white when moving between login and register. These rules load
   with the stylesheet and give every area its colour straight away. */
html, #auth-split, #auth-panel { background-color: #FFFFFF; }
#auth-hero { background: linear-gradient(135deg, #0D1118 0%, #131A26 60%, #3A1229 100%); }
@media (prefers-color-scheme: dark) {
  html, #auth-split, #auth-panel { background-color: #131A26; }
}

/* ---- Layout -------------------------------------------------------------------------------- */
/* On desktop the split layout is fixed to the screen and only the form column scrolls, so a long
   form (register step 2) or a step change never resizes the image panel or the page. */
@media (min-width: 768px) {
  #auth-split { height: calc(100vh - 72px); min-height: 0 !important; }
  #auth-split > div { min-height: 0; }
  #auth-panel { overflow-x: hidden; overflow-y: auto; }
}

/* ---- Scrollbars (brand colours; the app-wide rule is bright blue) --------------------------- */
html, #auth-panel { scrollbar-width: thin; scrollbar-color: #A01745 #F1F1F1 !important; }
html::-webkit-scrollbar, #auth-panel::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track, #auth-panel::-webkit-scrollbar-track { background: #F1F1F1 !important; }
html::-webkit-scrollbar-thumb, #auth-panel::-webkit-scrollbar-thumb { background: #A01745 !important; border: 0 !important; border-radius: 8px; }
html::-webkit-scrollbar-thumb:hover, #auth-panel::-webkit-scrollbar-thumb:hover { background: #B52055 !important; }
@media (prefers-color-scheme: dark) {
  html, html #auth-panel { scrollbar-color: #A01745 #1B2433 !important; }
  html::-webkit-scrollbar-track, html #auth-panel::-webkit-scrollbar-track { background: #1B2433 !important; }
}

/* ---- Motion --------------------------------------------------------------------------------- */
/* Fade-up entrance; set --i on the element to stagger it. */
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-rise { animation: auth-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }

/* Slow zoom on the hero photo. */
@keyframes auth-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.auth-zoom { animation: auth-zoom 28s ease-in-out infinite alternate; }

/* Register steps slide in from the side we are moving towards (register.js). */
@keyframes step-in-forward { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.step-enter-forward { animation: step-in-forward 0.3s ease-out; }
.step-enter-back { animation: step-in-back 0.3s ease-out; }

/* ---- Components ----------------------------------------------------------------------------- */
input[type="password"]::-ms-reveal { display: none; }  /* Edge's own reveal icon; the forms have a toggle */

/* Primary button: lift on hover; while submitting it shows a spinner, holds its width and ignores clicks. */
.auth-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(160, 23, 69, 0.7); }
.auth-btn:active { transform: translateY(0) scale(0.98); }
.auth-btn:focus-visible { outline: 2px solid #A01745; outline-offset: 2px; }
.auth-btn[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress; pointer-events: none; transform: none; box-shadow: none; white-space: nowrap; }
.auth-spinner { flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: auth-spin 0.7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* A form that is submitting can't be edited or re-submitted; fields dim a little so the button is the focus. */
form[data-busy] :is(input, select, textarea, a, button:not([aria-busy="true"])) { pointer-events: none; }
form[data-busy] :is(input, select, textarea, button:not([aria-busy="true"])) { opacity: 0.55; }
form[data-busy] .ts-wrapper, form[data-busy] .select2-container { pointer-events: none; opacity: 0.7; }

/* Account-type cards. */
.auth-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.auth-card:hover, .auth-card:focus-visible { transform: translateY(-2px); border-color: #A01745; box-shadow: 0 14px 30px -16px rgba(160, 23, 69, 0.55); outline: none; }
.auth-card .auth-card-arrow { transition: transform 0.2s ease; }
.auth-card:hover .auth-card-arrow, .auth-card:focus-visible .auth-card-arrow { transform: translateX(4px); }

/* Dropdown widgets (Select2 / TomSelect) sized and rounded like the text inputs. */
#auth-panel .select2-container { width: 100% !important; }
#auth-panel .select2-container--classic .select2-selection--single,
#auth-panel .select2-container--default .select2-selection--single { height: 46px !important; border-radius: 8px !important; display: flex; align-items: center; }
#auth-panel .select2-container--classic .select2-selection--single .select2-selection__rendered,
#auth-panel .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 16px !important; line-height: 44px !important; }
#auth-panel .select2-container--classic .select2-selection--single .select2-selection__arrow,
#auth-panel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
#auth-panel .ts-control { min-height: 46px; border-radius: 8px; padding: 6px 12px; }

/* Form-level alert (sign-in errors): opens by growing from nothing, so showing it is not a jump. */
.auth-alert { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.3s ease; }
.auth-alert.is-open { grid-template-rows: 1fr; opacity: 1; }
.auth-alert > div { overflow: hidden; min-height: 0; }
.auth-alert:not(.is-open) > div { visibility: hidden; }

/* Registration success panel (shown in place of the form). */
.success-badge { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.success-badge i { position: absolute; inset: 0; border-radius: 50%; background: rgba(22, 163, 74, 0.22); animation: success-ring 2.4s ease-out infinite; }
.success-badge b { position: relative; width: 60px; height: 60px; border-radius: 50%; background: #16A34A; display: flex; align-items: center; justify-content: center; animation: success-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.success-badge svg { width: 30px; height: 30px; }
.success-badge path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: success-draw 0.5s 0.25s ease-out forwards; }
@keyframes success-ring { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes success-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes success-draw { to { stroke-dashoffset: 0; } }
.success-steps { list-style: none; padding: 0; margin-left: 0; margin-right: 0; }
.success-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; animation: auth-rise 0.5s both; }
.success-step:nth-child(1) { animation-delay: 0.35s; }
.success-step:nth-child(2) { animation-delay: 0.45s; }
.success-step:nth-child(3) { animation-delay: 0.55s; }
.success-dot { flex: none; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid #AEB6C2; color: #6B7686; }
.success-step.is-done .success-dot { background: #16A34A; border-color: #16A34A; color: #fff; }
.success-step.is-now .success-dot { background: #A01745; border-color: #A01745; color: #fff; }

/* Register step indicator. */
.step-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 600; border: 2px solid #D1D5DB; color: #7A8899; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.step-dot.is-active, .step-dot.is-done { background: #A01745; border-color: #A01745; color: #fff; }

/* Password strength: four bars + a word, in the label row so nothing below it moves. */
.pw-strength { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7A8899; }
.pw-strength i { width: 18px; height: 4px; border-radius: 2px; background: #D1D5DB; transition: background-color 0.25s ease; }
.pw-strength[data-level="1"] i:nth-child(-n+1) { background: #DC2626; }
.pw-strength[data-level="2"] i:nth-child(-n+2) { background: #F59E0B; }
.pw-strength[data-level="3"] i:nth-child(-n+3) { background: #84CC16; }
.pw-strength[data-level="4"] i { background: #16A34A; }

@media (prefers-color-scheme: dark) {
  .step-dot, .success-dot { border-color: #3A4658; }
  .success-step.is-done .success-dot { border-color: #16A34A; }
  .success-step.is-now .success-dot { border-color: #A01745; }
  .step-dot.is-active, .step-dot.is-done { border-color: #A01745; }
  .pw-strength i { background: #3A4658; }
  .pw-strength[data-level="1"] i:nth-child(-n+1) { background: #DC2626; }
  .pw-strength[data-level="2"] i:nth-child(-n+2) { background: #F59E0B; }
  .pw-strength[data-level="3"] i:nth-child(-n+3) { background: #84CC16; }
  .pw-strength[data-level="4"] i { background: #16A34A; }
  /* Services (TomSelect) matches the other dark inputs. */
  #auth-panel .ts-control, #auth-panel .ts-dropdown { background: #1C2637; color: #E6EDF7; border-color: #4B5563; }
  #auth-panel .ts-control input { color: #E6EDF7; }
  #auth-panel .ts-dropdown .option.active { background: #2A3750; color: #E6EDF7; }
  #auth-panel .ts-wrapper.multi .ts-control > div { background: #A01745; color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-rise, .auth-zoom, .step-enter-forward, .step-enter-back, .auth-spinner, .success-badge i, .success-badge b, .success-badge path, .success-step { animation: none; }
  .success-badge path { stroke-dashoffset: 0; }
  .auth-alert, .auth-btn, .auth-card, .auth-card .auth-card-arrow, .step-dot, .pw-strength i { transition: none; }
}

/* Status screens (password updated, account under review, registration sent) sit in the middle of the panel,
   not at the top: the form column grows and centers whatever it holds when a visible success badge is in it. */
#auth-panel > div:first-child:has(.success-badge:not(.hidden *)) { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }