/* Celeste Admin custom polish on top of Tabler */

:root {
  --celeste-brand: #2d4373;
  --celeste-brand-2: #1a2b4a;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--celeste-brand) 0%, var(--celeste-brand-2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.brand-mark-lg {
  width: 56px; height: 56px;
  font-size: 28px;
  border-radius: 14px;
}

.navbar-vertical.navbar-dark {
  background: linear-gradient(180deg, var(--celeste-brand) 0%, var(--celeste-brand-2) 100%) !important;
}

/* The sidebar always has the dark-blue background, so force light text for readable contrast
   regardless of the light/dark theme (otherwise light mode renders dark text on blue). */
.navbar-vertical.navbar-dark .nav-link,
.navbar-vertical.navbar-dark .nav-link-title,
.navbar-vertical.navbar-dark .navbar-brand,
.navbar-vertical.navbar-dark .navbar-brand a {
  color: rgba(255, 255, 255, .82) !important;
}
.navbar-vertical.navbar-dark .nav-link:hover,
.navbar-vertical.navbar-dark .nav-link:focus {
  color: #fff !important;
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link {
  color: #fff !important;
  background-color: rgba(255,255,255,.12);
  border-radius: 6px;
}
.navbar-vertical .nav-link-icon {
  margin-right: 8px;
  font-size: 1.05rem;
}

.card-link.disabled {
  opacity: .55;
  pointer-events: none;
}

.form-label.required:after {
  content: " *";
  color: #d63939;
}

dl.row dt { font-weight: 600; color: #6b7280; }
dl.row dd { margin-bottom: .35rem; word-break: break-word; }

/* DataTables inside Tabler cards: kill the default padding fight */
table.dataTable thead th { white-space: nowrap; }
.dataTables_wrapper .dataTables_filter { padding: .5rem 1rem; }
.dataTables_wrapper .dataTables_length { padding: .5rem 1rem; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding: .5rem 1rem; }

/* Dark mode tweaks (tabler handles most of it via data-bs-theme) */
[data-bs-theme="dark"] .brand-mark {
  background: linear-gradient(135deg, #3a5a99 0%, #1f3358 100%);
}