/* =============================================================
   Login Dark Theme
   - Scoped to the pre-auth login screen only, via :has(#username)
     (same #username anchor already used by index.html's
     forgot-password-link script) so the rest of the app (topbar,
     sidebar, menus after sign-in) stays untouched.
   - Uses element/attribute selectors only, never Axelor's hashed
     CSS-module class names (e.g. _form-select_cc0ym_2348) — those
     change on every frontend rebuild, see calendar-overrides.css
     history for why that breaks silently.
   - Some text colors (labels, the "forgot password" link) are set
     inline by Axelor's React code, which beats plain CSS specificity
     regardless of selector — those rules below need !important.
   - Deliberately flat: no gradients, no glow shadows. One accent
     color, thin borders, small radii.
   ============================================================= */

html:has(#username) {
  background-color: #0d1117;
  /* Tells the browser to render its own native form-control chrome
     (checkbox tick, autofill/reveal-password icons, scrollbars) in
     dark variants instead of leaving them light-on-dark and glaring. */
  color-scheme: dark;
}

body:has(#username) {
  background-color: #0d1117;
  color: #c9d1d9;
}

body:has(#username) form {
  background-color: #161b22;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 28px 28px;
}

/* Blanket kill for every shadow on this screen — the login frame's
   Tailwind .shadow-2xl utility class, any focus-ring box-shadow from
   Bootstrap's hashed CSS-module classes, and anything else. Universal
   selector + !important so it wins regardless of what carries it or
   what a future frontend rebuild renames. */
body:has(#username) * {
  box-shadow: none !important;
}

body:has(#username) label {
  color: #8b949e !important;
  font-weight: 500;
  font-size: 13px;
}

body:has(#username) input,
body:has(#username) select {
  background-color: #0d1117;
  color: #c9d1d9 !important;
  border: 1px solid #30363d;
  border-radius: 4px;
}

body:has(#username) #username,
body:has(#username) input[type="password"] {
  padding: 8px 10px;
}

body:has(#username) input:focus,
body:has(#username) select:focus {
  border-color: #58a6ff;
  outline: none;
}

body:has(#username) input[type="checkbox"] {
  accent-color: #388bfd;
}

body:has(#username) input::placeholder {
  color: #545d68;
}

body:has(#username) input:-webkit-autofill {
  -webkit-text-fill-color: #c9d1d9;
  -webkit-box-shadow: 0 0 0 1000px #0d1117 inset;
  transition: background-color 9999s ease-in-out 0s;
}

body:has(#username) a {
  color: #58a6ff !important;
}

body:has(#username) button[type="submit"] {
  background-color: #1f6feb;
  border: 1px solid #1f6feb;
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
}

body:has(#username) button[type="submit"]:hover {
  background-color: #388bfd;
  border-color: #388bfd;
}