/**
 * @file
 * VivaSport Studio login — ports design-system/dev/login-cms-new to Drupal.
 * Self-contained dark palette (the login is a full branded takeover, not the
 * light Gin admin). Restyles the core user_login_form inside the form panel.
 */

.vs-login {
  /* self-contained dark palette (mirrors the design-system frontend tokens) */
  --vsl-bg: #1f1f1f;
  --vsl-surface: #141414;
  --vsl-raised: #3c3c3c;
  --vsl-border: rgba(255, 255, 255, 0.16);
  --vsl-border-muted: rgba(255, 255, 255, 0.08);
  --vsl-fg: #f0f0f0;
  --vsl-fg-emphasis: #ffffff;
  --vsl-fg-muted: #9b9b9b;
  --vsl-fg-subtle: #666666;
  --vsl-accent: #ffab00;
  --vsl-radius: 8px;

  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 50% 1fr;
  background: var(--vsl-bg);
  color: var(--vsl-fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  z-index: 1;
}

/* ── Brand panel ── */
.vs-login__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 56px;
  background: linear-gradient(165deg, #101010 0%, #050505 100%);
}
.vs-login__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 52% at 12% 8%, rgba(124, 212, 253, 0.12), transparent 60%);
}
.vs-login__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(165deg, #202020 0%, #0c0c0c 100%);
  -webkit-mask: url('../images/vivasport-pattern-white.svg') center / cover no-repeat;
  mask: url('../images/vivasport-pattern-white.svg') center / cover no-repeat;
}
.vs-login__brand::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,0.45) 0%, transparent 38%, transparent 52%, rgba(5,5,5,0.82) 100%);
}
.vs-login__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 52%, rgba(6,6,6,0.55) 0%, transparent 72%);
}
.vs-login__brand-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
}
.vs-login__wordmark { width: 160px; height: auto; }
.vs-login__chip {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-weight: 700; font-size: 9px; letter-spacing: 0.14em;
  color: #0a0a0a; background: var(--vsl-accent);
  padding: 3px 7px; border-radius: 4px;
}

/* ── Form panel ── */
.vs-login__panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.vs-login__card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
}
.vs-login__title {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1.15;
  color: var(--vsl-fg-emphasis); margin: 0; text-align: center;
}

/* Microsoft SSO */
.vs-login__ms {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; border: 0; border-radius: var(--vsl-radius); cursor: pointer;
  background: var(--vsl-fg-emphasis); color: #1a1a1a;
  font-family: 'Titillium Web', system-ui, sans-serif; font-weight: 600; font-size: 15px;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.vs-login__ms:hover:not(:disabled) { background: var(--vsl-fg-muted); }
.vs-login__ms:disabled { opacity: 0.55; cursor: not-allowed; }
.vs-login__ms svg { display: block; flex-shrink: 0; }

.vs-login__sso #openid-connect-login-form,
.vs-login__sso .vs-login__oidc-form {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.vs-login__sso #openid-connect-login-form > div,
.vs-login__sso .vs-login__oidc-form > div {
  margin: 0;
}
.vs-login__form #openid-connect-login-form,
.vs-login__form .vs-login__oidc-form {
  display: none;
}

.vs-login__or {
  display: flex; align-items: center; gap: 14px; margin: 2px 0;
  font-size: 12px; color: var(--vsl-fg-subtle);
}
.vs-login__or::before, .vs-login__or::after {
  content: ''; flex: 1; height: 1px; background: var(--vsl-border-muted);
}

/* Hide the primary local-task tabs (Log in / Reset password / Register) —
   redundant on this branded login (fallback if the template strip misses them). */
.vs-login__form nav.tabs,
.vs-login__form .tabs,
.vs-login__form .block-local-tasks-block,
.vs-login__form [class*="local-tasks"] {
  display: none;
}

/* ── Drupal user_login_form, restyled ── */
/* Gin gives the login form a white card — neutralise it for the dark panel. */
.vs-login__form #user-login-form,
.vs-login__form .user-login-form {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.vs-login__form .form-item,
.vs-login__form .js-form-item { margin: 0 0 14px; }
.vs-login__form label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; color: var(--vsl-fg-muted);
}
.vs-login__form input[type="text"],
.vs-login__form input[type="password"],
.vs-login__form input[type="email"] {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--vsl-surface); border: 1px solid var(--vsl-border);
  border-radius: var(--vsl-radius);
  color: var(--vsl-fg-emphasis); font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vs-login__form input::placeholder { color: var(--vsl-fg-subtle); }
/* Keep autofilled fields dark (Chrome paints autofill light by default). */
.vs-login__form input:-webkit-autofill,
.vs-login__form input:-webkit-autofill:hover,
.vs-login__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vsl-fg-emphasis);
  -webkit-box-shadow: 0 0 0 1000px var(--vsl-surface) inset;
  caret-color: var(--vsl-fg-emphasis);
  transition: background-color 9999s ease-in-out 0s;
}
.vs-login__form input[type="text"]:focus,
.vs-login__form input[type="password"]:focus,
.vs-login__form input[type="email"]:focus {
  outline: none; border-color: var(--vsl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vsl-accent) 22%, transparent);
}
.vs-login__form .description { font-size: 12px; color: var(--vsl-fg-subtle); margin-top: 4px; }

/* Submit — design-system Button variant="dark" size="lg" (login-cms-new uses
   exactly this). The dark variant is NOT a flat fill: it's a #3c3c3c fill
   (padding-box) + a 2px gradient rim bright→dim (border-box) + a skeuomorphic
   bevel shadow. Reproduced faithfully here. */
.vs-login__form .form-actions { margin-top: 4px; }
.vs-login__form input[type="submit"]:not(.vs-login__ms-submit),
.vs-login__form .button:not(.vs-login__ms-submit),
.vs-login__form .button--primary:not(.vs-login__ms-submit),
.vs-login__form .form-submit:not(.vs-login__ms-submit),
.vs-login__form .button-login:not(.vs-login__ms-submit) {
  width: 100%; height: 48px; cursor: pointer;
  display: block;
  border: 2px solid transparent !important; border-radius: var(--vsl-radius);
  background:
    linear-gradient(var(--vsl-raised), var(--vsl-raised)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%) border-box !important;
  /* !important: override Gin's .button--primary amber border + amber glow shadow. */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
    0 1px 2px 0 rgba(0, 0, 0, 0.30) !important;
  color: var(--vsl-fg-emphasis) !important;
  font-family: 'Titillium Web', system-ui, sans-serif; font-weight: 600; font-size: 16px;
  line-height: 44px;
  padding-block: 0;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, filter 0.15s ease;
}
.vs-login__form input[type="submit"]:not(.vs-login__ms-submit):hover,
.vs-login__form .button:not(.vs-login__ms-submit):hover,
.vs-login__form .button--primary:not(.vs-login__ms-submit):hover,
.vs-login__form .form-submit:not(.vs-login__ms-submit):hover {
  background:
    linear-gradient(#474747, #474747) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%) border-box !important;
}
.vs-login__form input[type="submit"]:not(.vs-login__ms-submit):focus-visible,
.vs-login__form .button:not(.vs-login__ms-submit):focus-visible,
.vs-login__form .form-submit:not(.vs-login__ms-submit):focus-visible {
  outline: 2px solid var(--vsl-accent); outline-offset: 2px;
}

.vs-login__sso .vs-login__ms-action {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--vsl-radius);
  background: var(--vsl-fg-emphasis);
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.vs-login__sso .vs-login__ms-action:hover {
  background: var(--vsl-fg-muted);
}
.vs-login__sso .vs-login__ms-action:has(.vs-login__ms-submit:focus-visible) {
  outline: 2px solid var(--vsl-accent);
  outline-offset: 2px;
}
.vs-login__sso .vs-login__ms-action-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.vs-login__sso .vs-login__ms-action-mark {
  display: block;
  flex: 0 0 auto;
}
.vs-login__sso .vs-login__ms-action-label {
  display: block;
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.vs-login__sso .vs-login__ms-submit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: var(--vsl-radius);
  cursor: pointer;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}
.vs-login__sso .vs-login__ms-submit:focus {
  outline: none;
  box-shadow: none !important;
}

/* Secondary links (request password, register) */
.vs-login__form .item-list,
.vs-login__form nav,
.vs-login__form ul { list-style: none; margin: 8px 0 0; padding: 0; text-align: center; }
.vs-login__form a { color: var(--vsl-accent); text-decoration: none; font-weight: 600; font-size: 13px; }
.vs-login__form a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .vs-login {
    position: static; min-height: 100vh;
    grid-template-columns: 1fr; grid-template-rows: auto auto;
  }
  .vs-login__brand { min-height: 220px; padding: 36px 24px; }
  .vs-login__panel { padding: 28px 20px 48px; }
}