/* Account pages only. The PHP include in usersc/includes controls the scope. */
:root {
  color-scheme: light;
  --qc-bg: #f3f5f8;
  --qc-surface: #fff;
  --qc-surface-soft: #f7f8fa;
  --qc-text: #171a20;
  --qc-muted: #59636f;
  --qc-line: #d7dce2;
  --qc-brand: #374151;
  --qc-brand-deep: #242b35;
  --qc-on-brand: #fff;
  --qc-accent: #e5e7eb;
  --qc-action: #08783e;
  --qc-action-hover: #086b38;
  --qc-on-action: #fff;
  --qc-shadow: 0 18px 45px rgba(20, 28, 40, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;
    --qc-bg: #101318;
    --qc-surface: #191e26;
    --qc-surface-soft: #222832;
    --qc-text: #f4f6f8;
    --qc-muted: #b2bac5;
    --qc-line: #3a424e;
    --qc-brand: #48566a;
    --qc-brand-deep: #242d3a;
    --qc-accent: #313b49;
    --qc-action: #08783e;
    --qc-action-hover: #0b8848;
    --qc-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  }
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --qc-bg: #101318;
  --qc-surface: #191e26;
  --qc-surface-soft: #222832;
  --qc-text: #f4f6f8;
  --qc-muted: #b2bac5;
  --qc-line: #3a424e;
  --qc-brand: #48566a;
  --qc-brand-deep: #242d3a;
  --qc-accent: #313b49;
  --qc-action: #08783e;
  --qc-action-hover: #0b8848;
  --qc-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

html { background: var(--qc-bg); }
body {
  min-width: 18rem;
  color: var(--qc-text);
  background: radial-gradient(circle at 12% -10%, rgba(53, 74, 96, .17), transparent 35rem), var(--qc-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.55;
}

a { color: #334b64; text-underline-offset: .18em; }
:root[data-bs-theme="dark"] a { color: #9bc9ee; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) a { color: #9bc9ee; }
}
a:hover { color: var(--qc-brand); }
:root[data-bs-theme="dark"] a:hover { color: #c4e0f5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) a:hover { color: #c4e0f5; }
}

/* Both UserSpice's menu and the older navbar use the same site header colours. */
ul.us_menu.horizontal,
ul.us_menu.horizontal.dark,
nav.navbar.bg-dark {
  background: linear-gradient(115deg, var(--qc-brand-deep), var(--qc-brand) 62%, #606c7c) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .18);
}
ul.us_menu.horizontal { min-height: 4.25rem; padding: .55rem max(1rem, calc((100vw - 76rem) / 2)); }
ul.us_menu.horizontal .us_brand a,
ul.us_menu.horizontal > li > a,
ul.us_menu.horizontal .us_menu_mobile_control,
nav.navbar.bg-dark a { color: var(--qc-on-brand) !important; }
ul.us_menu.horizontal .us_brand a { font-size: 1.05rem; font-weight: 300; letter-spacing: .025em; text-decoration: none; }
ul.us_menu.horizontal > li > a { border-radius: .55rem; padding: .55rem .75rem; }
ul.us_menu.horizontal > li:hover > a,
ul.us_menu.horizontal > li.active-style > a { background: rgba(255, 255, 255, .16) !important; }
ul.us_menu.horizontal .us_sub-menu {
  background: var(--qc-surface) !important;
  border: 1px solid var(--qc-line);
  border-radius: .65rem;
  box-shadow: var(--qc-shadow);
}
ul.us_menu.horizontal .us_sub-menu li { background: transparent !important; }
ul.us_menu.horizontal .us_sub-menu a { color: var(--qc-text) !important; }
ul.us_menu.horizontal .us_sub-menu li:hover > a { background: var(--qc-surface-soft) !important; }
nav.navbar.bg-dark { min-height: 4.25rem; }

body > .container,
body > div > .container { max-width: 76rem; }
.card,
.modal-content,
.form-signup,
form#pwReset,
form[name="updateAccount"] {
  color: var(--qc-text);
  background: var(--qc-surface) !important;
  border: 1px solid var(--qc-line) !important;
  border-radius: 1rem !important;
  box-shadow: var(--qc-shadow);
}
.card-header,
.card-footer,
.modal-header,
.modal-footer,
.bg-body-tertiary {
  color: var(--qc-text);
  background: var(--qc-surface-soft) !important;
  border-color: var(--qc-line) !important;
}
.card-header,
.modal-header { border-radius: 1rem 1rem 0 0 !important; }
.form-signup.bg-body-tertiary { background: var(--qc-surface) !important; }
.card-footer,
.modal-footer { border-radius: 0 0 1rem 1rem !important; }
.modal-content { overflow: hidden; }
.modal-dialog { max-width: min(32rem, calc(100% - 1rem)); margin-inline: auto; }
.modal-header { padding: 1rem 1.25rem; }
.modal-header b { font-size: 1.25rem; letter-spacing: -.015em; }
.modal-body { padding: 1.25rem !important; }
.modal-backdrop { background: #111927; }
.modal-backdrop.show { opacity: .56; }
.btn-close { opacity: .75; }
:root[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}

h1, h2, h3, h4, h5 { color: var(--qc-text); letter-spacing: -.025em; }
h1 { font-weight: 750; }
.form-label,
.col-form-label,
form label { color: var(--qc-text); font-weight: 650; }
.form-text,
.text-muted,
.text-body-secondary,
small { color: var(--qc-muted) !important; }

.form-control,
.form-select,
textarea,
select,
.input-group-text {
  color: var(--qc-text);
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-line);
  border-radius: .55rem;
  min-height: 2.8rem;
}
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
  color: var(--qc-text);
  background: var(--qc-surface);
  border-color: var(--qc-brand);
  box-shadow: 0 0 0 .2rem rgba(55, 65, 81, .22);
}
.form-control::placeholder { color: var(--qc-muted); opacity: .85; }
.form-control-plaintext { color: var(--qc-text); }
.form-check-input { accent-color: var(--qc-action); }
.input-group-text { display: flex; align-items: center; cursor: pointer; }

.btn,
button,
input[type="submit"] {
  border-radius: .55rem;
  font-weight: 700;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:not(.btn-sm),
input[type="submit"].btn { padding: .65rem .95rem; }
.btn-primary,
input[type="submit"].btn-primary {
  color: var(--qc-on-action) !important;
  background: var(--qc-action) !important;
  border-color: var(--qc-action) !important;
  box-shadow: 0 .3rem .9rem rgba(8, 120, 62, .19);
}
.btn-primary:hover,
.btn-primary:focus,
input[type="submit"].btn-primary:hover {
  color: var(--qc-on-action) !important;
  background: var(--qc-action-hover) !important;
  border-color: var(--qc-action-hover) !important;
}
.btn-secondary,
.btn-outline-secondary {
  color: var(--qc-text) !important;
  background: var(--qc-surface-soft) !important;
  border-color: var(--qc-line) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover { border-color: var(--qc-brand) !important; }
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--qc-brand); outline-offset: 2px; }

.alert { border-radius: .6rem; }
.alert-info { color: var(--qc-text); background: var(--qc-accent); border-color: var(--qc-line); }
.alert-success { color: var(--qc-text); background: #dff3e8; border-color: #a4dabc; }
.alert-danger { color: var(--qc-text); background: #fae5e8; border-color: #e9b2bb; }
.alert-warning { color: var(--qc-text); background: #fff2d4; border-color: #e9cf89; }

/* UserSpice's toast markup uses .toast-body; its built-in text rule targets
   .us-toast-body, leaving dark-mode text unreadable on the forced white card. */
#us-toast-container .us-toast {
  color: var(--qc-text) !important;
  background: var(--qc-surface) !important;
  border: 1px solid var(--qc-line) !important;
}
#us-toast-container .us-toast .toast-body,
#us-toast-container .us-toast .toast-body * { color: inherit !important; }
:root[data-bs-theme="dark"] .alert-success { background: #173b29; border-color: #286342; }
:root[data-bs-theme="dark"] .alert-danger { background: #48232b; border-color: #813443; }
:root[data-bs-theme="dark"] .alert-warning { background: #493b1c; border-color: #7d642a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .alert-success { background: #173b29; border-color: #286342; }
  :root:not([data-bs-theme="light"]) .alert-danger { background: #48232b; border-color: #813443; }
  :root:not([data-bs-theme="light"]) .alert-warning { background: #493b1c; border-color: #7d642a; }
}

/* The login screen is a modal in UserSpice; keep its native open/close flow. */
#loginModal .modal-dialog { max-width: min(32rem, calc(100% - 1rem)); }
#loginModal .modal-body .row.p-3 { gap: .5rem 0; }
#loginModal .close.btn-close { position: static !important; margin-left: auto; width: 1.5rem; height: 1.5rem; }
#loginModal .totp-section,
#loginModal .backup-code-section { border-color: var(--qc-line); }

/* Give registration and account settings the same panel treatment. */
.form-signup { padding: clamp(1rem, 3vw, 1.6rem) !important; }
form#pwReset,
form[name="updateAccount"] { padding: clamp(1rem, 3vw, 1.6rem); }
footer,
#footer.bg-light { color: var(--qc-muted); background: var(--qc-surface) !important; border-color: var(--qc-line) !important; }

@media (max-width: 48rem) {
  ul.us_menu.horizontal { padding-inline: .75rem; }
  .modal-body { padding: 1rem !important; }
  .form-signup { padding: 1rem !important; }
}