/* Cyber RT skin v3 for the LLDAP console — injected by nginx, pure CSS.
   v3: light mode is genuinely LIGHT (white card on a soft ground), dark mode is graphite;
   the stray bootstrap dividers (navbar underline, .border-end column rule) are gone on the
   login page; the form breathes. Dark mode is matched on every class the toggle might set. */

:root {
  --crt-red: #b30000;
  --crt-red-hot: #e50404;
  --crt-ink: #16171b;
}

/* ─────────────────────────── LIGHT (default) ─────────────────────────── */
body:has(form input#username):not(:has(input#confirm_password)) {
  min-height: 100vh;
  background:
    radial-gradient(720px 420px at 88% -12%, rgba(179, 0, 0, 0.05), transparent 60%),
    radial-gradient(640px 420px at -8% 112%, rgba(23, 24, 29, 0.05), transparent 55%),
    linear-gradient(170deg, #f7f8fa, #eef0f4);
  background-attachment: fixed;
}

/* The login page carries no chrome: navbar becomes invisible, every bootstrap divider dies. */
body:has(form input#username):not(:has(input#confirm_password)) .navbar,
body:has(form input#username):not(:has(input#confirm_password)) nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:has(form input#username):not(:has(input#confirm_password)) .border,
body:has(form input#username):not(:has(input#confirm_password)) .border-end,
body:has(form input#username):not(:has(input#confirm_password)) .border-start,
body:has(form input#username):not(:has(input#confirm_password)) .border-top,
body:has(form input#username):not(:has(input#confirm_password)) .border-bottom,
body:has(form input#username):not(:has(input#confirm_password)) hr {
  border: 0 !important;
}
body:has(form input#username):not(:has(input#confirm_password)) hr { display: none; }

/* ── The card ── */
@keyframes crt-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
form:has(input#username):not(:has(input#confirm_password)) {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 10vh auto 0;
  padding: 2.6rem 2.4rem 2.3rem;
  border: 1px solid rgba(18, 20, 24, 0.06);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.06), 0 18px 50px rgba(16, 18, 22, 0.12);
  animation: crt-card-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
  overflow: hidden;
}

/* One brand hairline along the top edge — the only red before you act. */
form:has(input#username):not(:has(input#confirm_password))::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--crt-red) 30%, var(--crt-red) 70%, transparent);
}

/* Wordmark above everything, with room to breathe. */
form:has(input#username):not(:has(input#confirm_password))::before {
  content: "Cyber RT — Company Directory";
  order: -2;
  display: block;
  text-align: center;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: 0.015em;
  color: var(--crt-ink);
  margin: 0.2rem 0 1.7rem;
}
form:has(input#username):not(:has(input#confirm_password)) > * { order: 1; }

/* ── Space to breathe ── */
form:has(input#username):not(:has(input#confirm_password)) .mb-3,
form:has(input#username):not(:has(input#confirm_password)) .form-group { margin-bottom: 1.15rem !important; }
form:has(input#username):not(:has(input#confirm_password)) label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6472;
  margin-bottom: 0.4rem;
}
form:has(input#username):not(:has(input#confirm_password)) .btn-primary {
  margin-top: 0.9rem;
  width: 100%;
}

/* ── The icon + field pair is ONE control: same height, one border, one radius ── */
form:has(input#username):not(:has(input#confirm_password)) .input-group { margin-bottom: 1.15rem; }
form:has(input#username):not(:has(input#confirm_password)) .input-group .form-control { margin: 0; }
form:has(input#username):not(:has(input#confirm_password)) .input-group-text {
  border: 1px solid #dde1e7;
  border-inline-end: 0;
  border-radius: 10px 0 0 10px;
  background: #f7f8fa;
  color: #8a93a2;
  padding: 0.66rem 0.85rem;
  transition: border-color 160ms ease, color 160ms ease;
}
form:has(input#username):not(:has(input#confirm_password)) .input-group .form-control {
  border-radius: 0 10px 10px 0;
  border-inline-start: 0;
}
/* focus lights the WHOLE control, addon included */
form:has(input#username):not(:has(input#confirm_password)) .input-group:focus-within .input-group-text {
  border-color: var(--crt-red);
  color: var(--crt-red);
}
form:has(input#username):not(:has(input#confirm_password)) .input-group:focus-within .form-control {
  border-color: var(--crt-red);
  box-shadow: none;
}
form:has(input#username):not(:has(input#confirm_password)) .input-group:focus-within {
  border-radius: 10px;
  box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.12);
}

/* ── Fields ── */
.form-control {
  border: 1px solid #dde1e7;
  border-radius: 10px;
  padding: 0.66rem 0.9rem;
  background-clip: padding-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-control:focus {
  border-color: var(--crt-red);
  box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.12);
}

/* ── The one loud thing: the button ── */
.btn-primary {
  background: var(--crt-red);
  border: none;
  border-radius: 10px;
  padding: 0.66rem 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  box-shadow: 0 3px 10px rgba(179, 0, 0, 0.22);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--crt-red-hot);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(179, 0, 0, 0.3);
}
.btn-primary:active { transform: translateY(0); }
a { color: var(--crt-red); text-decoration: none; }
a:hover { color: var(--crt-red-hot); }

/* ─────────────────────────── DARK (only when toggled) ───────────────────────────
   LLDAP's toggle may mark dark mode on <html> or <body> with different names —
   every rule below matches all of them, so dark is dark and light stays white. */
html.dark body:has(form input#username):not(:has(input#confirm_password)),
body.dark:has(form input#username),
body.darkmode--activated:has(form input#username),
[data-bs-theme="dark"] body:has(form input#username):not(:has(input#confirm_password)),
body[data-bs-theme="dark"]:has(form input#username) {
  background:
    radial-gradient(720px 420px at 88% -12%, rgba(229, 4, 4, 0.09), transparent 60%),
    linear-gradient(165deg, #17181d, #101116 55%, #0c0d10);
  background-attachment: fixed;
}
html.dark form:has(input#username):not(:has(input#confirm_password)),
body.dark form:has(input#username):not(:has(input#confirm_password)),
body.darkmode--activated form:has(input#username):not(:has(input#confirm_password)),
[data-bs-theme="dark"] form:has(input#username):not(:has(input#confirm_password)) {
  background: #1d1e24;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 60px rgba(0, 0, 0, 0.5);
}
html.dark form:has(input#username):not(:has(input#confirm_password))::before,
body.dark form:has(input#username):not(:has(input#confirm_password))::before,
body.darkmode--activated form:has(input#username):not(:has(input#confirm_password))::before,
[data-bs-theme="dark"] form:has(input#username):not(:has(input#confirm_password))::before { color: #f4f5f7; }
html.dark form:has(input#username):not(:has(input#confirm_password)) label,
body.dark form:has(input#username):not(:has(input#confirm_password)) label,
body.darkmode--activated form:has(input#username):not(:has(input#confirm_password)) label,
[data-bs-theme="dark"] form:has(input#username):not(:has(input#confirm_password)) label { color: #9aa3b2; }
html.dark .form-control,
body.dark .form-control,
body.darkmode--activated .form-control,
[data-bs-theme="dark"] .form-control { border-color: #33353d; }
html.dark form:has(input#username):not(:has(input#confirm_password)) .input-group-text,
body.dark form:has(input#username):not(:has(input#confirm_password)) .input-group-text,
body.darkmode--activated form:has(input#username):not(:has(input#confirm_password)) .input-group-text,
[data-bs-theme="dark"] form:has(input#username):not(:has(input#confirm_password)) .input-group-text {
  border-color: #33353d;
  background: #24252c;
  color: #8a93a2;
}

/* ── Admin console after login: neutral, tidy, red only as accent ── */

/* Forms deserve room: on admin pages the working area opens up — and it stays CENTRED.
   (A broken version of this rule once put a max-width on <body> itself, which shoved the
   whole console to the left. Widths belong to containers, never to body.) */
body:not(:has(form input#username)) .container,
body:not(:has(form input#username)) .container-lg,
body:not(:has(form input#username)) .container-fluid {
  max-width: min(94vw, 1140px);
  margin-inline: auto;
}

.navbar { background: #16171b !important; border: 0; }
.navbar .navbar-brand,
.navbar a,
.navbar .nav-link { color: #e8eaee !important; }
.navbar .navbar-brand { font-weight: 650; }
.table thead th { background: rgba(120, 128, 140, 0.08); }
.table tbody tr { transition: background 140ms ease; }
.table tbody tr:hover { background: rgba(179, 0, 0, 0.04); }

@media (prefers-reduced-motion: reduce) {
  form:has(input#username):not(:has(input#confirm_password)) { animation: none; }
  .btn-primary,
  .form-control,
  .table tbody tr { transition: none; }
}

/* ─────────────────────── Create / edit user pages (v4) ───────────────────────
   These pages carry #email alongside #username — the login styles above skip
   them, and THIS section gives them their own card: roomy, labelled, and a
   file input that looks like it belongs to the brand. */
body:has(input#confirm_password) form:has(input#confirm_password) {
  max-width: 640px;
  margin: 1.5rem auto 3rem;
  padding: 2rem 2.2rem 2.2rem;
  border: 1px solid rgba(18, 20, 24, 0.07);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.05), 0 12px 34px rgba(16, 18, 22, 0.08);
  position: relative;
  overflow: hidden;
}
body:has(input#confirm_password) form:has(input#confirm_password)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--crt-red) 30%, var(--crt-red) 70%, transparent);
}
html.dark body:has(input#confirm_password) form:has(input#confirm_password),
body.darkmode--activated form:has(input#confirm_password),
[data-bs-theme="dark"] form:has(input#confirm_password) {
  background: #1d1e24;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Labels: one quiet voice, icons vertically centred with their text. */
body:has(input#confirm_password) form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6472;
  margin-bottom: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
html.dark body:has(input#confirm_password) form label,
body.darkmode--activated form:has(input#confirm_password) label { color: #9aa3b2; }
body:has(input#confirm_password) form label i,
body:has(input#confirm_password) form label svg { opacity: 0.55; }

/* Every row gets the same rhythm. */
body:has(input#confirm_password) form .mb-3,
body:has(input#confirm_password) form .form-group,
body:has(input#confirm_password) form .row { margin-bottom: 1.05rem; }
body:has(input#confirm_password) form .form-control,
body:has(input#confirm_password) form .form-select {
  width: 100%;
  border-radius: 10px;
}

/* The avatar picker: "Choose file" becomes a brand-outline button, the rest quiet text. */
body:has(input#confirm_password) form input[type="file"] {
  border: 1px dashed #cfd4dc;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: #fafbfc;
  font-size: 0.85rem;
  color: #667085;
  width: 100%;
  transition: border-color 160ms ease, background 160ms ease;
}
body:has(input#confirm_password) form input[type="file"]:hover {
  border-color: var(--crt-red);
  background: rgba(179, 0, 0, 0.02);
}
body:has(input#confirm_password) form input[type="file"]::file-selector-button {
  border: 1px solid var(--crt-red);
  border-radius: 8px;
  background: transparent;
  color: var(--crt-red);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  margin-inline-end: 0.8rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
body:has(input#confirm_password) form input[type="file"]::file-selector-button:hover {
  background: var(--crt-red);
  color: #fff;
}
html.dark body:has(input#confirm_password) form input[type="file"],
body.darkmode--activated form:has(input#confirm_password) input[type="file"] {
  border-color: #3a3c45;
  background: #24252c;
  color: #9aa3b2;
}

/* The page heading above the form sits with it, not lost in space. */
body:has(input#confirm_password) h1,
body:has(input#confirm_password) h2,
body:has(input#confirm_password) h3 {
  max-width: 640px;
  margin: 1.6rem auto 0.4rem;
  font-size: 1.25rem;
  font-weight: 650;
}


/* ── v5: the create form's REAL skeleton (from LLDAP source: create_user.rs + form/field.rs)
   Page: .row.justify-content-center > form.form.py-3 (no width of its own — that was the squeeze).
   Field: .row.mb-3 > label.col-4.col-form-label + .col-8 > .form-control.
   The form gets a real width; each field stacks label-over-input, modern and roomy. */
body:has(input#confirm_password) form.form {
  width: 100%;
  max-width: 720px;
}
body:has(input#confirm_password) form .row.mb-3 {
  display: block;
  margin-bottom: 1.1rem;
}
body:has(input#confirm_password) form .row.mb-3 > .col-form-label {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0 0 0.35rem;
  text-align: start;
}
body:has(input#confirm_password) form .row.mb-3 > .col-8 {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}