:root {
  color-scheme: dark;
  --bg-body: #0d111a;
  --bg-card: #161b29;
  --bg-surface: #1f293e;
  --border: #32435d;
  --text-main: #e5e9f0;
  --text-muted: #94a3b8;
  --text-secondary: #cbd5e1;
  --link: #93c5fd;
  --link-hover: #bfdbfe;
  --accent: #60a5fa;
  --accent-strong: #3b82f6;
  --shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.3);
}

html,
body {
  min-height: 100%;
  background-color: var(--bg-body);
  color: var(--text-main);
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.bg-dark,
.bg-dark {
  background-color: var(--bg-body) !important;
}

body.bg-light,
.bg-light {
  background-color: var(--bg-body) !important;
  color: var(--text-main) !important;
}

body.bg-dark.text-light,
body.bg-light.text-light,
.text-light {
  color: var(--text-main) !important;
}

a,
a:link,
a:visited {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

.card,
.table,
.table-dark,
.modal-content,
.dropdown-menu,
.list-group-item,
.btn-close {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background-color: transparent !important;
}

.table thead th {
  color: var(--text-secondary) !important;
}

.table tbody tr {
  border-color: var(--border) !important;
}

.table td,
.table th,
.form-control,
.form-select,
.form-check-input,
.form-control:focus,
.form-select:focus {
  background-color: #111827 !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.input-group-text,
.form-check-label,
.form-label,
.form-text,
.small,
.text-muted {
  color: var(--text-secondary) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning {
  border-color: var(--border) !important;
}

.btn-primary {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

.btn-outline-secondary {
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.alert {
  background-color: #111827 !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.navbar,
.navbar-nav .nav-link,
.navbar-brand,
.btn,
.breadcrumb-item a {
  color: var(--text-main) !important;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
  color: var(--text-main) !important;
}

.navbar-dark .navbar-toggler-icon {
  filter: invert(1);
}

.ui-layout {
  min-height: 100vh;
}

.ui-sidebar {
  width: 260px;
  min-height: 100vh;
  background-color: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ui-main {
  min-height: 100vh;
  background-color: var(--bg-body);
}

.sidebar-nav .nav-link,
.ui-sidebar .btn-outline-secondary,
.ui-sidebar .btn-outline-danger,
.ui-sidebar .btn-link,
.ui-sidebar .list-group-item {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border-color: var(--border) !important;
}

.ui-sidebar .btn-outline-danger {
  color: var(--bs-danger, #dc3545) !important;
  border-color: var(--bs-danger, #dc3545) !important;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active:hover,
.sidebar-nav .nav-link.active:focus {
  color: #ffffff !important;
  background-color: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}

.sidebar-nav .nav-link:hover,
.ui-sidebar .btn-outline-secondary:hover,
.ui-sidebar .btn-outline-danger:hover,
.ui-sidebar .btn-link:hover {
  color: var(--link-hover) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.sidebar-brand {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-main) !important;
}

.ui-mobile-toolbar {
  background-color: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui-mobile-toolbar .navbar-toggler-icon {
  filter: invert(1) !important;
}

.ui-mobile-toolbar .list-group-item,
.ui-mobile-toolbar .navbar-brand {
  color: var(--text-main) !important;
  width: 360px;
}

.logo-img {
  object-fit: contain;
}

.profile-container {
  max-width: 800px;
}

.hidden {
  display: none !important;
}

.recovery-codes-grid {
  background-color: var(--bg-body) !important;
  border-color: var(--border) !important;
}

.recovery-code {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.mfa-qr-wrapper {
  background-color: var(--bg-body) !important;
}

.mfa-code-img {
  max-width: 200px;
}

.icon-column {
  width: 40px;
}

.text-truncate-max {
  max-width: 250px;
}

.toggle-output-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid #0d6efd;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

.toggle-output-icon.active {
  background-color: #0d6efd;
}

.toggle-output-button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem;
}

.bg-transparent {
  background-color: transparent !important;
}