/* App-wide tweaks layered on top of Bootstrap. */

.sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  padding: 0;
  border-right: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  overflow-y: auto;
}

.sidebar .nav-link {
  color: var(--bs-body-color);
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
}

.sidebar .nav-link:hover {
  background-color: var(--bs-secondary-bg);
}

.sidebar .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.collapse-toggle {
  width: 1.25rem;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

.collapse-toggle .collapse-icon-collapsed { display: none; }
.collapse-toggle.collapsed .collapse-icon-expanded { display: none; }
.collapse-toggle.collapsed .collapse-icon-collapsed { display: inline; }

@media (max-width: 767.98px) {
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
  }
}

/* Dark-mode overrides for due-date row highlights.
   Bootstrap's table-danger / table-warning are light-coloured by default
   and stay that way even when data-bs-theme="dark" is set, so we
   re-declare the key table variables here to use muted, readable tones. */
[data-bs-theme="dark"] .table > tbody > tr.table-danger {
  --bs-table-bg: rgba(var(--bs-danger-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--bs-danger-rgb), 0.28);
  --bs-table-striped-bg: rgba(var(--bs-danger-rgb), 0.24);
  color: var(--bs-danger-text-emphasis);
  border-color: rgba(var(--bs-danger-rgb), 0.3);
}

[data-bs-theme="dark"] .table > tbody > tr.table-warning {
  --bs-table-bg: rgba(var(--bs-warning-rgb), 0.15);
  --bs-table-hover-bg: rgba(var(--bs-warning-rgb), 0.22);
  --bs-table-striped-bg: rgba(var(--bs-warning-rgb), 0.18);
  color: var(--bs-warning-text-emphasis);
  border-color: rgba(var(--bs-warning-rgb), 0.25);
}