/* =====================================================================
   Watcher — Golden Group Security Operations Console
   Custom login page for Wazuh dashboard. Scoped to html.gg-login only,
   so it never affects the rest of the app. Pure CSS restyle of the
   existing .login-wrapper form (re-render safe); the left panel + status
   bar are injected as independent body-level DOM by watcher.js.
   ===================================================================== */

html.gg-login {
  --gg-cream-1: #f6f1e8;
  --gg-cream-2: #efe7d8;
  --gg-ink: #14213d;
  --gg-ink-soft: #33405c;
  --gg-blue: #2f6fb0;
  --gg-blue-deep: #1e4f8a;
  --gg-navy: #1b2a63;
  --gg-muted: #71767f;
  --gg-line: rgba(20, 33, 61, 0.14);
  --gg-line-soft: rgba(20, 33, 61, 0.08);
  --gg-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", "Courier New", monospace;
  --gg-sans: "Inter", "Inter UI", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gg-panel-w: 52vw;
}

html.gg-login,
html.gg-login body {
  height: 100%;
  margin: 0;
  background: #ffffff;
  overflow: hidden;
}

/* Neutralise any default OSD login chrome / background artifacts */
html.gg-login #osd_loading_message { display: none !important; }
html.gg-login body > .euiOverlayMask { display: none !important; }

/* Kill Wazuh's default blue login background (wazuh_login_bg.svg, #3585F9).
   OSD renders <div class="content wz-login"> as the app container on /app/login;
   its !important background must be overridden with !important + higher
   specificity so the blue never shows through behind our panels. */
html.gg-login .content.wz-login,
html.gg-login .wz-login {
  background: #ffffff !important;
}

/* ---------------------------------------------------------------------
   LEFT PANEL (injected by watcher.js as #gg-left)
   --------------------------------------------------------------------- */
#gg-left {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--gg-panel-w);
  height: 100vh;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 56px) clamp(32px, 4.5vw, 72px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 12% -10%, #fbf8f2 0%, rgba(251,248,242,0) 55%),
    linear-gradient(155deg, var(--gg-cream-1) 0%, var(--gg-cream-2) 100%);
  border-right: 1px solid var(--gg-line);
  color: var(--gg-ink);
  font-family: var(--gg-sans);
  z-index: 4;
  overflow: hidden;
}

/* faint geometric watermark */
#gg-left::after {
  content: "";
  position: absolute;
  right: -140px;
  top: 8%;
  width: 460px;
  height: 460px;
  border: 1px solid var(--gg-line-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(20, 33, 61, 0.02);
  pointer-events: none;
}

.gg-mono {
  font-family: var(--gg-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* top chip row */
.gg-brandrow {
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1;
}
.gg-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gg-line);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.gg-chip img { width: 20px; height: 20px; object-fit: contain; }
.gg-chip b {
  font-family: var(--gg-mono);
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--gg-ink);
  font-weight: 700;
}
.gg-brandrow .gg-sub { color: var(--gg-muted); }

/* center hero block */
.gg-hero {
  margin-top: auto;
  z-index: 1;
}
.gg-eyebrow { color: var(--gg-muted); margin-bottom: 30px; }
.gg-logo {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}
.gg-logo img { width: clamp(78px, 8vw, 108px); height: auto; }
.gg-logo .gg-word {
  font-family: var(--gg-sans);
  font-weight: 800;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--gg-navy);
}
.gg-osline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
  color: var(--gg-ink-soft);
}
.gg-osline .gg-italic { font-style: italic; font-size: 17px; }
.gg-osline .gg-rule { flex: 1; height: 1px; background: var(--gg-line); }
.gg-osline .gg-mono { color: var(--gg-blue-deep); }

.gg-h1 {
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.01em;
  color: var(--gg-ink);
  margin: 0 0 16px;
}
.gg-lead {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--gg-ink-soft);
  max-width: 34em;
  margin: 0 0 30px;
}
.gg-lead b { color: var(--gg-blue-deep); font-weight: 700; }
.gg-lead i { font-style: italic; }

/* feature strip */
.gg-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gg-line);
  border-bottom: 1px solid var(--gg-line);
  margin-bottom: 26px;
}
.gg-features div {
  padding: 14px 0;
  font-family: var(--gg-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gg-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gg-features div::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gg-blue);
}

/* intelligence surfaces */
.gg-intel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.gg-intel-head .gg-mono:first-child { color: var(--gg-ink); }
.gg-intel-head .gg-mono:first-child::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #1fa971; margin-right: 8px; vertical-align: middle;
}
.gg-intel-head .gg-mono:last-child { color: var(--gg-muted); }
.gg-surfaces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--gg-line);
}
.gg-surfaces > div {
  padding: 14px 18px 14px 0;
  border-left: 1px solid var(--gg-line);
  padding-left: 18px;
}
.gg-surfaces > div:first-child { border-left: none; padding-left: 0; }
.gg-surfaces .gg-s-idx {
  font-family: var(--gg-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gg-muted);
  margin-bottom: 8px;
}
.gg-surfaces .gg-s-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--gg-navy);
  margin-bottom: 6px;
}
.gg-surfaces .gg-s-meta {
  font-family: var(--gg-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gg-muted);
}

/* footer */
.gg-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gg-muted);
  z-index: 1;
}
.gg-foot .gg-mono { font-size: 10px; }

/* ---------------------------------------------------------------------
   TOP-RIGHT STATUS BAR (injected as #gg-status)
   --------------------------------------------------------------------- */
#gg-status {
  position: fixed;
  top: clamp(24px, 3.2vw, 40px);
  right: clamp(28px, 3.2vw, 48px);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 6;
  font-family: var(--gg-mono);
}
#gg-status .gg-st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gg-ink-soft);
}
#gg-status .gg-st::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #1fa971;
  box-shadow: 0 0 0 3px rgba(31, 169, 113, 0.18);
}
#gg-status .gg-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gg-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gg-ink);
}

/* ---------------------------------------------------------------------
   RIGHT PANEL — the real login form (.login-wrapper)
   --------------------------------------------------------------------- */
html.gg-login .login-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100vw - var(--gg-panel-w));
  height: 100vh;
  margin: 0;
  padding: 0 clamp(36px, 4vw, 88px);
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: none;
  box-shadow: none;
  z-index: 5;
  list-style: none;
}

/* constrain the content column, left-aligned */
html.gg-login .login-wrapper > * {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  text-align: left;
  margin: 0 auto;
}

/* remove EUI list-group / spacer chrome */
html.gg-login .login-wrapper .euiSpacer { display: none !important; }

/* eyebrow "01 · SIGN IN" */
html.gg-login .login-wrapper::before {
  content: "— 01 · SIGN IN";
  order: 1;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 18px;
  font-family: var(--gg-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gg-blue-deep);
  font-weight: 700;
}

/* title (config: basicauth.login.title) */
html.gg-login .login-wrapper .euiText--medium {
  order: 2;
  margin: 0 auto 14px !important;
}
html.gg-login .login-wrapper .euiText--medium,
html.gg-login .login-wrapper .euiText--medium * {
  font-family: var(--gg-sans) !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--gg-ink) !important;
  text-align: left !important;
}

/* subtitle (config: basicauth.login.subtitle) */
html.gg-login .login-wrapper .euiText--small {
  order: 3;
  margin: 0 auto 30px !important;
}
html.gg-login .login-wrapper .euiText--small,
html.gg-login .login-wrapper .euiText--small * {
  font-family: var(--gg-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--gg-muted) !important;
  text-align: left !important;
}

/* login error callout, if any */
html.gg-login .login-wrapper .euiCallOut {
  order: 4;
  margin: 0 auto 18px !important;
}

/* form rows */
html.gg-login .login-wrapper .euiFormRow {
  order: 5;
  margin: 0 auto 18px !important;
  position: relative;
  max-width: 380px;
}
/* field labels via :has() — re-render safe */
html.gg-login .login-wrapper .euiFormRow:has([data-test-subj="user-name"])::before {
  content: "USERNAME";
  display: block;
  font-family: var(--gg-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gg-ink-soft);
  margin-bottom: 8px;
  font-weight: 700;
}
html.gg-login .login-wrapper .euiFormRow:has([data-test-subj="password"])::before {
  content: "PASSWORD";
  display: block;
  font-family: var(--gg-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gg-ink-soft);
  margin-bottom: 8px;
  font-weight: 700;
}

/* inputs */
html.gg-login .login-wrapper .euiFieldText,
html.gg-login .login-wrapper .euiFieldPassword,
html.gg-login .login-wrapper .euiFormControlLayout {
  height: 50px !important;
  max-width: 100% !important;
}
html.gg-login .login-wrapper .euiFormControlLayout {
  background: #ffffff;
}
html.gg-login .login-wrapper .euiFieldText,
html.gg-login .login-wrapper .euiFieldPassword {
  background: #fbfbfc !important;
  border: 1px solid #d8dbe0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  color: var(--gg-ink) !important;
  padding-left: 42px !important;
}
html.gg-login .login-wrapper .euiFormControlLayout__childrenWrapper { border-radius: 10px; }
html.gg-login .login-wrapper .euiFieldText:focus,
html.gg-login .login-wrapper .euiFieldPassword:focus {
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.15) !important;
  background: #ffffff !important;
}
html.gg-login .login-wrapper .euiFormControlLayoutIcons { color: var(--gg-muted); }

/* submit button ".btn-login" (hardcoded text "Log in" -> relabel) */
html.gg-login .login-wrapper .euiFormRow:has(.btn-login) { margin-top: 8px !important; }
html.gg-login .login-wrapper .btn-login {
  order: 6;
  width: 100% !important;
  max-width: 380px !important;
  height: 54px !important;
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, var(--gg-navy) 0%, var(--gg-blue-deep) 55%, var(--gg-blue) 100%) !important;
  box-shadow: 0 10px 24px rgba(30, 79, 138, 0.28) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html.gg-login .login-wrapper .btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(30, 79, 138, 0.34) !important;
}
html.gg-login .login-wrapper .btn-login .euiButton__text {
  font-size: 0 !important;   /* hide hardcoded "Log in" */
}
html.gg-login .login-wrapper .btn-login .euiButton__text::after {
  content: "Sign in to Watcher  \2192";
  font-family: var(--gg-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}

/* helper text under the form */
html.gg-login .login-wrapper::after {
  content: "LOCKED OUT?  CONTACT YOUR IT ADMINISTRATOR";
  order: 7;
  width: 100%;
  max-width: 380px;
  margin: 26px auto 0;
  font-family: var(--gg-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gg-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------
   RESPONSIVE — collapse to single column
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  #gg-left { display: none; }
  #gg-status { top: 16px; right: 16px; }
  html.gg-login .login-wrapper {
    width: 100vw;
    padding: 72px 24px 32px;
    justify-content: flex-start;
  }
  html.gg-login .login-wrapper > *,
  html.gg-login .login-wrapper::before,
  html.gg-login .login-wrapper::after { max-width: 420px; }
}