/* SkyX DroneOps login theme. Tokens mirror apps/web/src/app/globals.css (DEV-033 s17).
   Status and state are never carried by colour alone (DEV-033 s16, s36). */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --navy: #12294d;
  --accent: #1878e8;
  --accent-strong: #1266c8;
  --gold: #d9a531;
  --on-accent: #ffffff;
  --ok: #22c55e;
  --warn: #d97706;
  --block: #dc2626;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --focus: 0 0 0 3px rgba(24, 120, 232, 0.5);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --bg-image: url('../img/dark-bg.jpg');
  --hero-scrim: linear-gradient(90deg, rgba(6, 14, 28, 0.9) 0%, rgba(6, 14, 28, 0.62) 38%, rgba(6, 14, 28, 0.2) 62%, rgba(6, 14, 28, 0.12) 100%);
  --hero-fade: linear-gradient(180deg, rgba(6, 14, 28, 0.55) 0%, rgba(6, 14, 28, 0) 22%, rgba(6, 14, 28, 0) 70%, rgba(6, 14, 28, 0.85) 100%);
  --text: #ffffff;
  --text-muted: #b6c6dc;
  --text-faint: #8296b1;
  --panel: rgba(13, 25, 45, 0.9);
  --panel-line: rgba(255, 255, 255, 0.1);
  --field: rgba(255, 255, 255, 0.05);
  --field-line: rgba(255, 255, 255, 0.16);
  --strip: rgba(6, 14, 28, 0.94);
  --strip-line: rgba(255, 255, 255, 0.09);
  --footer: #060e1c;
  --toggle-shell: rgba(9, 19, 36, 0.85);
  --pitch-halo: rgba(6, 14, 28, 0.85);
  --pitch-surface: rgba(6, 14, 28, 0.55);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg-image: url('../img/light-bg.jpg');
  --hero-scrim: linear-gradient(90deg, rgba(226, 236, 247, 0.5) 0%, rgba(226, 236, 247, 0.18) 32%, rgba(226, 236, 247, 0) 55%);
  --hero-fade: linear-gradient(180deg, rgba(226, 236, 247, 0.12) 0%, rgba(226, 236, 247, 0) 14%, rgba(226, 236, 247, 0) 80%, rgba(226, 236, 247, 0.3) 100%);
  --text: #0f1f38;
  --text-muted: #46586f;
  --text-faint: #7d8da5;
  --panel: rgba(255, 255, 255, 0.97);
  --panel-line: rgba(15, 31, 56, 0.1);
  --field: #ffffff;
  --field-line: #d5dfeb;
  --strip: #dde6f1;
  --strip-line: rgba(15, 31, 56, 0.09);
  --footer: #d3dfec;
  --toggle-shell: rgba(240, 246, 252, 0.85);
  --pitch-halo: rgba(255, 255, 255, 0.9);
  --pitch-surface: rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; }

html.skyx-html, body.skyx-body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--footer);
}

body.skyx-body {
  display: flex;
  flex-direction: column;
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.skyx-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Hero band: header + content over the photograph ---------- */

.skyx-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--footer);
}

/* Photograph, then a horizontal scrim so the pitch text stays legible, then a vertical
   fade into the module strip. Contrast is checked in both themes (DEV-033 s36). */
.skyx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-image) center 45% / cover no-repeat;
}

.skyx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-scrim), var(--hero-fade);
}

.skyx-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 30px);
  padding: clamp(10px, 1.6vh, 20px) clamp(20px, 2.6vw, 44px) 0;
}

.skyx-brand { display: flex; align-items: center; gap: 20px; }
.skyx-brand img { height: clamp(40px, 4.6vh, 56px); width: auto; display: block; }
html[data-theme='dark'] .skyx-brand img { filter: brightness(0) invert(1); }

.skyx-brand-rule { width: 1px; height: 50px; background: currentColor; opacity: 0.3; }

.skyx-brand-words {
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text);
}

.skyx-tenant { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.skyx-tenant img { max-height: 78px; width: auto; }
.skyx-tenant-text { display: grid; gap: 2px; text-align: right; }
.skyx-tenant-text strong { font-family: var(--font-display); font-size: 15px; }
.skyx-tenant-text span { font-size: 11px; letter-spacing: 0.08em; color: var(--gold); }

.skyx-controls { display: flex; align-items: center; gap: 22px; }
.skyx-control-rule { width: 1px; height: 42px; background: currentColor; opacity: 0.25; }

.skyx-theme-toggle {
  display: inline-flex; padding: 5px; gap: 4px;
  border-radius: 999px; background: var(--toggle-shell);
  border: 1px solid var(--panel-line);
}

.skyx-theme-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font: 600 14px var(--font-ui); cursor: pointer;
}

.skyx-theme-toggle button[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }

.skyx-status { display: flex; align-items: center; gap: 12px; }
.skyx-status-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.22); }
.skyx-status-text { display: grid; gap: 1px; font-size: 12px; color: var(--text-muted); }
.skyx-status-text strong { font-size: 13.5px; color: var(--text); }

/* ---------- Hero body ---------- */

.skyx-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 420px);
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
  padding: clamp(6px, 1.4vh, 22px) clamp(20px, 2.6vw, 44px) clamp(12px, 2vh, 28px);
}

.skyx-pitch { max-width: 660px; }
.skyx-pitch-rule { width: 60px; height: 5px; border-radius: 3px; background: var(--accent); margin-bottom: 18px; }

.skyx-pitch h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px var(--pitch-halo);
}

.skyx-pitch h1 .skyx-accent { color: var(--accent); }

.skyx-pitch p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  text-shadow: 0 1px 3px var(--pitch-halo), 0 2px 16px var(--pitch-halo);
}

.skyx-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-l);
  padding: clamp(34px, 4.2vh, 52px) clamp(26px, 2vw, 34px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  min-height: clamp(400px, 46vh, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(430px, 52vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skyx-card-eyebrow { margin: 0; font-size: clamp(13px, 1vw, 15px); color: var(--text-muted); }
.skyx-card-title { margin: 2px 0 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.12; letter-spacing: -0.01em; }

.skyx-field { position: relative; margin-bottom: clamp(14px, 1.8vh, 20px); }

.skyx-field input {
  width: 100%; height: clamp(50px, 5.6vh, 56px);
  padding: 0 50px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--field);
  color: var(--text);
  font: 400 14.5px var(--font-ui);
}

.skyx-field input::placeholder { color: var(--text-faint); }
.skyx-field input:focus-visible { border-color: var(--accent); }

.skyx-field-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}

.skyx-reveal {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-s); background: transparent;
  color: var(--text-faint); cursor: pointer;
}

.skyx-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 4px 0 clamp(14px, 1.8vh, 20px); font-size: 13.5px;
}

.skyx-check { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); cursor: pointer; }
.skyx-check input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.skyx-row a { color: var(--accent); text-decoration: none; font-weight: 600; }
.skyx-row a:hover { text-decoration: underline; }

.skyx-submit {
  width: 100%; height: clamp(54px, 6vh, 62px);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: var(--radius-m);
  background: var(--accent); color: var(--on-accent);
  font: 700 16px var(--font-ui); cursor: pointer;
  transition: background-color 120ms ease;
}

.skyx-submit:hover { background: var(--accent-strong); }

.skyx-or { display: flex; align-items: center; gap: 16px; margin: clamp(12px, 1.8vh, 20px) 0; color: var(--text-faint); font-size: 13px; font-weight: 600; }
.skyx-or::before, .skyx-or::after { content: ''; flex: 1; height: 1px; background: var(--panel-line); }

.skyx-alt {
  width: 100%; min-height: clamp(58px, 6.6vh, 72px);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  border: 1px solid var(--accent); border-radius: var(--radius-m);
  background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}

.skyx-alt[aria-disabled='true'] { cursor: not-allowed; border-color: var(--field-line); color: var(--text-faint); }
.skyx-alt strong { display: block; font-size: 14px; font-weight: 600; }
.skyx-alt span { font-size: 13px; color: var(--text-muted); }

.skyx-message {
  margin: 0 0 18px; padding: 12px 16px;
  border-radius: var(--radius-m); font-size: 14px;
  border: 1px solid var(--block); background: rgba(220, 38, 38, 0.12);
}

.skyx-message.skyx-message-warning { border-color: var(--warn); background: rgba(217, 119, 6, 0.12); }
.skyx-message.skyx-message-success { border-color: var(--ok); background: rgba(34, 197, 94, 0.12); }
.skyx-message.skyx-message-info { border-color: var(--accent); background: rgba(24, 120, 232, 0.12); }

.skyx-field-error { display: block; margin: -8px 0 12px; font-size: 13px; color: var(--block); }

/* ---------- Module strip and footer ---------- */

.skyx-modules {
  display: grid; grid-template-columns: repeat(7, 1fr);
  list-style: none; margin: 0; padding: 0;
  background: var(--strip); border-top: 1px solid var(--strip-line);
}

.skyx-module {
  display: grid; justify-items: center; align-content: start; gap: 8px;
  padding: clamp(7px, 1vh, 12px) 10px; text-align: center;
  border-right: 1px solid var(--strip-line);
}

.skyx-module:last-child { border-right: 0; }
.skyx-module svg { color: var(--accent); width: 24px; height: 24px; stroke-width: 2.1; }
.skyx-module strong { font-size: 11px; font-weight: 700; line-height: 1.2; }
.skyx-module span { font-size: 9.5px; line-height: 1.2; color: var(--text-muted); max-width: 22ch; }

.skyx-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: clamp(7px, 1vh, 12px) clamp(20px, 2.6vw, 44px); background: var(--footer);
  border-top: 1px solid var(--strip-line);
  font-size: 12px; color: var(--text-muted);
  overflow: visible;
}

.skyx-footer-brand { display: grid; gap: 2px; align-content: center; line-height: 1.25; }
.skyx-footer-brand strong {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.skyx-footer-brand strong img { height: 18px; width: auto; display: block; }

html[data-theme='dark'] .skyx-footer-brand strong img { filter: brightness(0) invert(1); }
.skyx-footer-brand span { font-size: 10px; letter-spacing: 0.13em; line-height: 1.4; white-space: nowrap; }
.skyx-footer-centre { display: flex; align-items: center; gap: 14px; justify-self: center; }
.skyx-footer-rule { width: 36px; height: 2px; border-radius: 2px; background: var(--accent); }
.skyx-footer-tag { justify-self: end; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .skyx-main { grid-template-columns: 1fr; gap: 34px; padding: 32px 28px 48px; }
  .skyx-card { max-width: 470px; }
  .skyx-modules { grid-template-columns: repeat(4, 1fr); }
  .skyx-module:nth-child(4n) { border-right: 0; }
  .skyx-module { border-bottom: 1px solid var(--strip-line); }
}

@media (max-width: 760px) {
  .skyx-header { flex-wrap: wrap; gap: 18px; padding: 18px 20px 4px; }
  .skyx-tenant { margin-left: 0; order: 3; }
  .skyx-controls { order: 2; margin-left: auto; }
  .skyx-main { padding: 24px 20px 40px; }
  .skyx-card { padding: 24px; }
  .skyx-modules { grid-template-columns: repeat(2, 1fr); }
  .skyx-module:nth-child(2n) { border-right: 0; }
  .skyx-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .skyx-footer-tag { justify-self: center; }
}


/* Short viewports and small screens scroll normally rather than compressing
   content past legibility (SKYX-DEV-033 s36, s38). */



/* Below this height the layout scrolls rather than compressing past legibility
   (SKYX-DEV-033 s36, s38). */
@media (max-height: 720px), (max-width: 1180px) {
  html.skyx-html, body.skyx-body { height: auto; min-height: 100vh; overflow: auto; }
  .skyx-hero { flex: none; }
}

/* Tablet: the sign-in card leads, the pitch follows (SKYX-DEV-033 s38). */
@media (max-width: 1180px) {
  .skyx-main { grid-template-columns: minmax(0, 520px); justify-content: center; }
  .skyx-pitch { order: 2; max-width: 520px; text-align: center; }
  .skyx-pitch-rule { margin-inline: auto; }
  .skyx-pitch p { max-width: none; }
  .skyx-card { order: 1; width: 100%; }
}

/* Phone: single column throughout, controls stay full width and tappable. */
@media (max-width: 620px) {
  .skyx-header { flex-wrap: wrap; row-gap: 12px; }
  .skyx-brand-words { display: none; }
  .skyx-tenant { margin-left: auto; }
  .skyx-controls { width: 100%; justify-content: space-between; }
  .skyx-modules { grid-template-columns: 1fr 1fr; }
  .skyx-module { border-right: 1px solid var(--strip-line); }
  .skyx-module:nth-child(2n) { border-right: 0; }
  .skyx-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; }
  .skyx-footer-brand { justify-items: center; }
  .skyx-footer-tag { justify-self: center; }
}

/* ---------------------------------------------------------------------------
   Keycloak pages other than login (update password, reset credentials, verify
   email, error, info). They render inside the same card via the parent theme's
   markup, so the base classes are mapped onto the design system here rather than
   templated individually (SKYX-DEV-033 s17: one design system, no per-page styling).
   --------------------------------------------------------------------------- */

.skyx-card #kc-page-title,
.skyx-card h1,
.skyx-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--text);
}

.skyx-card #kc-content,
.skyx-card #kc-content-wrapper,
.skyx-card #kc-form,
.skyx-card #kc-form-wrapper {
  width: 100%;
}

/* Instruction and message blocks. */
.skyx-card .instruction,
.skyx-card .pf-c-alert,
.skyx-card .alert,
.skyx-card #kc-info-message {
  display: block;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  background: rgba(24, 120, 232, 0.1);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.skyx-card .alert-error,
.skyx-card .pf-m-danger { border-color: var(--block); background: rgba(220, 38, 38, 0.1); }
.skyx-card .alert-warning,
.skyx-card .pf-m-warning { border-color: var(--warn); background: rgba(217, 119, 6, 0.1); }
.skyx-card .alert-success,
.skyx-card .pf-m-success { border-color: var(--ok); background: rgba(34, 197, 94, 0.1); }

/* Labels and inputs. */
.skyx-card label,
.skyx-card .pf-c-form__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Excludes .skyx-field inputs, which reserve space for their leading icon. */
.skyx-card input[type='text']:not(.skyx-field input),
.skyx-card input[type='email']:not(.skyx-field input),
.skyx-card input[type='password']:not(.skyx-field input),
.skyx-card select {
  width: 100%;
  height: clamp(50px, 5.6vh, 56px);
  margin: 0 0 16px;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--field);
  color: var(--text);
  font: 400 14.5px var(--font-ui);
}

.skyx-card input:focus-visible { border-color: var(--accent); box-shadow: var(--focus); }

/* Keycloak's password reveal button sits beside the field. */
.skyx-card .pf-c-input-group,
.skyx-card #kc-form-login .pf-c-input-group { position: relative; display: block; }

.skyx-card button.pf-c-button.pf-m-control,
.skyx-card .pf-c-input-group > button {
  position: absolute;
  right: 10px;
  top: clamp(25px, 2.8vh, 28px);
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

/* Checkboxes. */
.skyx-card .checkbox,
.skyx-card .pf-c-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-muted);
}

.skyx-card input[type='checkbox'] { width: 19px; height: 19px; margin: 0; accent-color: var(--accent); }

/* Primary and secondary actions. */
.skyx-card input[type='submit'],
.skyx-card button[type='submit'],
.skyx-card .pf-c-button.pf-m-primary {
  width: 100%;
  height: clamp(50px, 5.6vh, 56px);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 16px var(--font-ui);
  cursor: pointer;
}

.skyx-card input[type='submit']:hover,
.skyx-card button[type='submit']:hover { background: var(--accent-strong); }

.skyx-card .pf-c-button.pf-m-secondary,
.skyx-card #kc-cancel,
.skyx-card #backToApplication a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--text);
  font: 600 15px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}

.skyx-card a { color: var(--accent); font-weight: 600; }

/* Keycloak wraps some pages in extra containers that add their own boxes. */
.skyx-card .card-pf,
.skyx-card .login-pf-page,
.skyx-card #kc-header,
.skyx-card #kc-header-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.skyx-card .kc-feedback-text { color: inherit; }

/* ---------------------------------------------------------------------------
   Provider pages taller than the sign-in form (SKYX-DEV-033 s36, s38).

   OTP enrolment and the first-login password change carry instructions, a QR code
   and several inputs. The card is sized for the sign-in form, so those pages
   overflow the viewport with no way to reach the submit button. Scoped by form id
   so the sign-in page is untouched.
   --------------------------------------------------------------------------- */

.skyx-card:has(#kc-totp-settings-form),
.skyx-card:has(#kc-passwd-update-form) {
  justify-content: flex-start;
  max-height: min(72vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The QR code stays legible without dominating the card. */
#kc-totp-settings-form img,
.skyx-card .qr-code img {
  display: block;
  width: clamp(150px, 40%, 200px);
  height: auto;
  margin: 12px 0 18px;
  padding: 10px;
  border-radius: var(--radius-m);
  background: #fff;
}

/* Enrolment instructions only. Scoped to the OTP form so it cannot affect the
   sign-in page, where Keycloak also uses list elements around form fields. */
#kc-totp-settings-form ol,
#kc-totp-settings-form ul {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

#kc-totp-settings-form li { margin-bottom: 6px; }