/* ============================================================
   RustDesk Console (Ant Design Pro) -> EL-Tekniikka login
   Tasaharmaa tausta + amber-aksentti, EL-logo, "ELT-Remote" -nimi.
   Injektoidaan nginx sub_filterillä, ks. nginx-rustdesk.conf
   Kohdistettu RustDeskin oikeisiin Ant Pro -luokkiin.
   ============================================================ */

:root {
  --elt-bg:         #707070;   /* taustaväri (tasaharmaa)        */
  --elt-accent:     #f59e0b;   /* aksentti: reunat, painike, link */
  --elt-accent-hov: #d98806;   /* aksentti hover                 */
  --elt-text:       #ffffff;   /* teksti                         */
  --elt-field-bg:   rgba(255, 255, 255, 0.10); /* kentän tausta  */
  --elt-radius:     8px;
}

/* --- Tasaharmaa tausta koko ruudulle --- */
/* Tausta maalataan Ant Pron uloimpaan konttiin (täyskorkea), jonka tumma
   teema muuten peittäisi. container___xxx on build-kohtainen hash -> kohdistetaan
   vakaalla osamerkkijonolla. html/body toimii varataustana. */
html.elt-login,
body.elt-login,
body.elt-login [class*="container___"] {
  background: var(--elt-bg) !important;
}
body.elt-login [class*="container___"] { min-height: 100vh !important; }

/* Sisemmät kerrokset läpinäkyviksi, jotta gradientti näkyy (myös tumma footer) */
body.elt-login [class*="content___"],
body.elt-login div:has(> .ant-layout-footer),
body.elt-login .ant-layout-footer {
  background: transparent !important;
  background-image: none !important;
}

/* --- Piilota RustDeskin oma logo + iso otsikko (desc = tuotenimi näytetään) --- */
body.elt-login .ant-pro-form-login-logo,
body.elt-login .ant-pro-form-login-title {
  display: none !important;
}

/* --- EL-logo (login.js injektoi .ant-pro-form-login-top -lohkoon) --- */
body.elt-login .elt-login-logo {
  display: block;
  max-width: 230px;
  height: auto;
  margin: 8px auto 12px auto;
}

/* --- Tuotenimi "ELT-Remote" logon alla (login.js asettaa tekstin) --- */
body.elt-login .ant-pro-form-login-desc {
  display: block !important;
  color: var(--elt-text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-align: center;
  margin: 0 0 22px 0 !important;
}

/* --- Lomakekortti --- */
body.elt-login .ant-pro-form-login-main {
  background: rgba(0, 0, 0, 0.20) !important;
  border: 1px solid var(--elt-accent) !important;
  border-radius: var(--elt-radius) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
  padding: 32px 28px !important;
  backdrop-filter: blur(2px);
}

/* --- Tekstit valkoisiksi (labelit, checkbox, footer) --- */
body.elt-login .ant-form-item-label > label,
body.elt-login .ant-checkbox-wrapper,
body.elt-login .ant-pro-form-login-main,
body.elt-login .ant-pro-global-footer,
body.elt-login .ant-pro-global-footer * {
  color: var(--elt-text) !important;
}

/* --- Syötekentät: läpikuultava tausta, amber-reuna, valkoinen teksti --- */
body.elt-login .ant-input-affix-wrapper,
body.elt-login .ant-input {
  background: var(--elt-field-bg) !important;
  border-color: var(--elt-accent) !important;
  color: var(--elt-text) !important;
  border-radius: var(--elt-radius) !important;
}
/* sisempi input affix-wrapperin sisällä läpinäkyväksi (ei tuplataustaa) */
body.elt-login .ant-input-affix-wrapper > .ant-input {
  background: transparent !important;
  border: none !important;
}
body.elt-login .ant-input::placeholder { color: rgba(255, 255, 255, 0.6) !important; }
/* prefix/suffix-ikonit (henkilö, lukko, silmä) valkoisiksi */
body.elt-login .ant-input-prefix .anticon,
body.elt-login .ant-input-suffix .anticon { color: rgba(255, 255, 255, 0.75) !important; }
/* hover + focus -> amber */
body.elt-login .ant-input-affix-wrapper:hover,
body.elt-login .ant-input:hover,
body.elt-login .ant-input-affix-wrapper-focused,
body.elt-login .ant-input-affix-wrapper:focus-within,
body.elt-login .ant-input:focus {
  border-color: var(--elt-accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30) !important;
}

/* --- Pääpainike (Login): amber --- */
body.elt-login .ant-btn-primary {
  background: var(--elt-accent) !important;
  border-color: var(--elt-accent) !important;
  color: #ffffff !important;
  border-radius: var(--elt-radius) !important;
  font-weight: 600 !important;
}
body.elt-login .ant-btn-primary:hover,
body.elt-login .ant-btn-primary:focus {
  background: var(--elt-accent-hov) !important;
  border-color: var(--elt-accent-hov) !important;
}

/* --- Toissijaiset painikkeet (Get Code, Back): amber-reuna, läpikuultava --- */
body.elt-login .ant-btn:not(.ant-btn-primary) {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid var(--elt-accent) !important;
  color: #ffffff !important;
  border-radius: var(--elt-radius) !important;
}
body.elt-login .ant-btn:not(.ant-btn-primary):hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* --- Linkit (Forgot Password) --- */
body.elt-login .ant-pro-form-login-main a {
  color: var(--elt-accent) !important;
}

/* --- Footer: GitHub-/rustdesk.com-linkit pois, copyright valkoiseksi --- */
body.elt-login .ant-pro-global-footer-list {
  display: none !important;
}
body.elt-login .ant-pro-global-footer-copyright {
  color: var(--elt-text) !important;
}

/* --- Checkbox amber kun valittu --- */
body.elt-login .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--elt-accent) !important;
  border-color: var(--elt-accent) !important;
}