/* HaploDB v2 — Minimal custom styles */

/* Login page centering */
.login-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 2rem;
}

.login-container .login-logo {
  display: block;
  margin: 0 auto 1.5rem auto;
  max-width: 200px;
  height: auto;
}

/* Navbar logo sizing */
.navbar-brand img.navbar-logo,
img.navbar-logo {
  max-width: 150px !important;
  max-height: 28px !important;
  width: auto !important;
  height: auto !important;
  margin-right: 8px;
}

/* Keep navbar on a single line */
.navbar .container-fluid {
  flex-wrap: nowrap;
}
.navbar-nav {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.navbar .nav-link {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  font-size: 0.88rem;
}

/* Card spacing */
.card {
  margin-bottom: 1rem;
}

/* DT table adjustments */
.dataTables_wrapper {
  padding: 0.5rem 0;
}

/* Hide tabs before login */
.hidden-tab {
  display: none !important;
}

/* Navbar tab badge */
.tab-badge {
  font-size: 0.7em;
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 10px;
  padding: 2px 6px;
}

/* Home / Welcome page */
.home-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.home-logo {
  max-width: 220px;
  height: auto;
  margin-bottom: 1rem;
}

.info-text-blue {
  color: #0d6efd;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.2rem 1.8rem;
  min-width: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Dark mode overrides ── */

/* Custom dark palette — blue-tinted for a softer, richer look */
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1e2e;
  --bs-body-color: #d8dce6;
  --bs-secondary-bg: #212636;
  --bs-tertiary-bg: #272c3e;
  --bs-border-color: #363c52;
  --bs-secondary-color: #9ca3b8;
  --bs-emphasis-color: #eef0f6;
}

/* Login page background */
.login-page {
  background: var(--bs-body-bg);
}

/* Login title inherits theme colors */
.login-title {
  color: var(--bs-body-color);
}

/* Navbar — deeper shade for separation */
[data-bs-theme="dark"] .navbar {
  background-color: #151828 !important;
  border-bottom: 1px solid #2a2f42;
}

/* Cards & stat cards — subtle lift */
[data-bs-theme="dark"] .card {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .stat-card {
  background: var(--bs-tertiary-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Headings — brighter for hierarchy */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5 {
  color: var(--bs-emphasis-color);
}

/* Body text & paragraphs — ensure legibility */
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label {
  color: var(--bs-body-color);
}

/* Inputs — slightly lighter bg so they stand out from cards */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #2d3348;
  color: var(--bs-emphasis-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #333a52;
  border-color: #5b9bd5;
  box-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.25);
}

/* DT tables in dark mode */
[data-bs-theme="dark"] .dataTables_wrapper {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] table.dataTable {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td {
  background-color: #1e2335;
  color: var(--bs-emphasis-color);
  border-bottom-color: var(--bs-border-color);
  font-weight: 600;
}

[data-bs-theme="dark"] table.dataTable tbody tr {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover {
  background-color: #2a3045;
}

[data-bs-theme="dark"] table.dataTable tbody tr.odd {
  background-color: var(--bs-secondary-bg);
}

/* DT search/filter inputs */
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_length select {
  background-color: #2d3348;
  color: var(--bs-emphasis-color);
  border-color: var(--bs-border-color);
}

/* DT pagination */
[data-bs-theme="dark"] .dataTables_paginate .paginate_button {
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current {
  background: #2d3348 !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .dataTables_info {
  color: var(--bs-secondary-color);
}

/* Dark mode toggle styling in navbar */
.navbar .bslib-dark-mode {
  display: flex;
  align-items: center;
}

/* Logout button — adapts to navbar text color in both light and dark mode */
.navbar #logout_btn {
  color: var(--bs-navbar-color);
  border-color: var(--bs-navbar-color);
  background-color: transparent;
}
.navbar #logout_btn:hover,
.navbar #logout_btn:focus {
  color: var(--bs-navbar-bg, var(--bs-primary));
  background-color: var(--bs-navbar-color);
  border-color: var(--bs-navbar-color);
}


/* Buttons in dark mode */
[data-bs-theme="dark"] .btn-primary {
  background-color: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
  background-color: #5b9bd5;
  border-color: #5b9bd5;
}
[data-bs-theme="dark"] .btn-outline-primary {
  color: #7db8f0;
  border-color: #7db8f0;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
  background-color: #7db8f0;
  border-color: #7db8f0;
  color: #1a1e2e;
}

/* Blue text legibility in dark mode */
[data-bs-theme="dark"] .info-text-blue {
  color: #7db8f0 !important;
}
[data-bs-theme="dark"] td.details-control {
  color: #7db8f0;
}
[data-bs-theme="dark"] td.details-control:hover {
  color: #a3cff5;
}

/* Links */
[data-bs-theme="dark"] a {
  color: #7db8f0;
}
[data-bs-theme="dark"] a:hover {
  color: #a3cff5;
}