/* Login page from the new design: the form on a white side, a navy brand panel on the other.
   Loaded after styles.css; colours come from its variables so dark mode keeps working. */
:root {
  --brand: #303d90;
  --brand-red: #c8161d;
  --login-panel: #303d90;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --login-panel: #1f2765; }
}
:root[data-theme="dark"] { --login-panel: #1f2765; }

/* The accent is the company navy (lighter in dark mode, for contrast) */
body.login-page { --accent: var(--brand); --accent-text: #fff; margin: 0; background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.login-page { --accent: #8f9bf0; --accent-text: #0f1115; }
}
:root[data-theme="dark"] body.login-page { --accent: #8f9bf0; --accent-text: #0f1115; }

.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

/* Form side */
.login-main { display: grid; place-items: center; padding: 32px; background: var(--surface); }
.login-card { width: min(500px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login-card [hidden] { display: none !important; }
.company-logo { display: block; width: 300px; max-width: 100%; height: auto; }
.login-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.login-head-text { display: flex; flex-direction: column; gap: 6px; }
.login-owl .owl { width: 76px; height: 76px; }
.login-card h1 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.2; }
.login-card h1 .brand-name { direction: ltr; unicode-bidi: isolate; }
.login-card h1 .brand-name span { color: var(--brand-red); }
.login-tagline { font-size: 18px; color: var(--muted); }
.login-sub { color: var(--muted); font-size: 16px; line-height: 1.5; }
.login-sub:empty { display: none; }

.google-btn { display: flex; justify-content: flex-start; min-height: 52px; }
.login-or { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; }
.login-card input { width: 100%; font-size: 15px; border-radius: 10px; padding: 10px 12px; min-height: 44px; }
.login-err { color: var(--hold); font-size: 13.5px; min-height: 1.2em; }
.login-card .btn.primary { justify-content: center; min-height: 46px; border-radius: 10px; font-weight: 700; font-size: 15px; }

/* Brand panel */
.login-brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px; background: var(--login-panel); color: #fff;
}
.login-brand::before {
  content: ''; position: absolute; inset: auto -120px -160px auto; width: 520px; height: 520px;
  border-radius: 50%; background: var(--brand-red); opacity: .9;
}
.login-brand > * { position: relative; }
.login-live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1px; direction: ltr; align-self: flex-start; }
.login-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b6f; animation: pulse 1.6s infinite; }
.login-pitch { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.login-pitch h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 1.15; text-wrap: pretty; }
.login-pitch p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.login-note { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* The logo's lettering is navy: in dark mode it sits on a light badge so it stays readable */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .company-logo { background: #fff; border-radius: 10px; padding: 10px 14px; box-sizing: content-box; width: 272px; }
}
:root[data-theme="dark"] .company-logo { background: #fff; border-radius: 10px; padding: 10px 14px; box-sizing: content-box; width: 272px; }

/* Narrow screens: the form only */
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-main { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { .login-live i { animation: none; } }

/* The welcome after signing in (login.js): the brand blue spreads from the owl, then the greeting and the steps */
.welcome {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: var(--login-panel); color: #fff;
  clip-path: circle(0 at var(--wx) var(--wy)); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1);
}
.welcome.open { clip-path: circle(150vmax at var(--wx) var(--wy)); }
.welcome-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; opacity: 0; transform: translateY(12px); transition: opacity .45s ease .35s, transform .45s ease .35s; }
.welcome.open .welcome-inner { opacity: 1; transform: none; }
.welcome-owl { width: 132px; height: 132px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.welcome-owl .owl { width: 96px; height: 96px; }
.welcome h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; }
.welcome p { margin: 0; font-size: 18px; color: rgba(255, 255, 255, .75); }
.welcome-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 16px; }
.welcome-steps li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .45); transition: color .3s; }
.welcome-steps li.on { color: #fff; }
.welcome-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); position: relative; transition: background .3s, border-color .3s; }
.welcome-steps li.on .welcome-check { background: #2fbf71; border-color: #2fbf71; }
.welcome-steps li.on .welcome-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome-inner, .welcome-steps li, .welcome-check { transition: none; }
}