/* ---------------------------------------------------------------------
   Indigo accent recolor (Bootstrap default blue -> #4f46e5 scale).
   Bootstrap's compiled CSS bakes literal hex values into most component
   classes rather than referencing --bs-primary at render time, so each
   primary-dependent selector actually used in this app is overridden
   directly here (the documented, supported way to reskin without a Sass
   rebuild - this project has no build step, only vendored static CSS).
   --------------------------------------------------------------------- */

:root {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-active: #3730a3;
  --accent-rgb: 79, 70, 229;

  /* Genuinely root-scoped Bootstrap tokens - a single override cascades everywhere. */
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-list-group-active-bg: var(--accent);
  --bs-list-group-active-border-color: var(--accent);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-dropdown-link-active-bg: var(--accent);

  /* Softer, more contemporary corners app-wide (cascades into cards/buttons/inputs). */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
}

[data-bs-theme="dark"] {
  /* Lighter indigo for legible links/text on dark surfaces. */
  --bs-link-color: #818cf8;
  --bs-link-color-rgb: 129, 140, 248;
  --bs-link-hover-color: #a5b4fc;
  --bs-link-hover-color-rgb: 165, 180, 252;
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-active);
  --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.bg-primary { background-color: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.text-bg-primary { background-color: var(--accent) !important; }
.badge.bg-primary { background-color: var(--accent) !important; }

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25);
}

/* ---------------------------------------------------------------------
   Layout & components - flat, theme-aware surfaces using Bootstrap's own
   --bs-body-bg / --bs-border-color tokens so most rules never need a
   separate [data-bs-theme=dark] block.
   --------------------------------------------------------------------- */

body {
  padding-bottom: 70px;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

.theme-toggle-btn .theme-icon-light,
.theme-toggle-btn .theme-icon-dark {
  font-size: 1.1rem;
}
html[data-bs-theme="light"] .theme-toggle-btn .theme-icon-light { display: none; }
html[data-bs-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: none; }

.bottom-nav-link {
  color: var(--bs-secondary-color);
  text-decoration: none;
  padding: 4px 10px;
  flex: 1;
  border-radius: var(--bs-border-radius);
  transition: color 0.15s ease-in-out;
}

.bottom-nav-link.active {
  color: var(--accent);
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  vertical-align: middle;
  border: 1px solid var(--bs-border-color);
}

.auth-card {
  max-width: 420px;
  margin: 10vh auto;
}

.card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* DataTables' own controls (search box, length select, pagination) reuse
   Bootstrap form-control/pagination styling already, so they inherit the
   accent recolor and dark-mode palette above with no extra rules needed -
   just tighten default spacing for a cleaner, less cluttered toolbar. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  margin-bottom: 0.75rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0.75rem;
}

.table {
  --bs-table-bg: var(--bs-body-bg);
}