/* ===== Tables: size & ellipsis ===== */
.table-smaller td,
.table-smaller th { font-size: 0.875rem; }

.table-ellipsis { table-layout: fixed; width: 100%; }
.table-ellipsis th,
.table-ellipsis td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.table-ellipsis .description-col { width: 26%; }
.table-ellipsis .actions-col {
  width: 8%;
  text-align: center;
  overflow: visible; /* allow dropdowns/icons to show */
}

/* ===== Layout & Navbar ===== */
body { padding-top: 60px; background-color: #f8f9fa; }
.navbar-brand { font-weight: 600; }
.nav-link { font-size: 14px; }
.navbar-nav .nav-link { display: flex; align-items: center; height: 100%; }
.offcanvas-end { width: 280px; }

/* ===== Cards & Form elements ===== */
.card-body .form-control,
.card-body .form-select,
.card-body textarea { width: 100% !important; } /* retains your current layout */

/* ===== Global inputs / dropdown toggles ===== */
.form-control,
.form-select,
.dropdown-toggle.form-control {
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  box-shadow: none;
  font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus,
.dropdown-toggle.form-control:focus {
  border-color: #999;
  box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.1);
}

/* Small control inside dropdowns */
.dropdown-menu .form-control-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

/* Dropdown toggle styled like input */
.dropdown-toggle.form-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 2em;
  text-align: left;
  background-color: #fff;
  position: relative;
}
.dropdown-toggle.form-control::after {
  margin-left: auto;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

/* ===== Filter controls ===== */
.filter-col { min-width: 220px; max-width: 280px; margin-bottom: 0.5rem; }

.filter-dropdown-btn {
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  background-color: #fff !important;
  box-shadow: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-right: 2.2rem !important;
}
.filter-dropdown-btn::after { display: none !important; }

.filter-dropdown-btn .dropdown-caret {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 1;
}
.filter-dropdown-btn .dropdown-caret::after {
  content: "";
  border-top: 0.35em solid;
  border-right: 0.35em solid transparent;
  border-left: 0.35em solid transparent;
  display: inline-block;
}

/* Filter dropdown menu */
.filter-dropdown-menu {
  font-size: 0.875rem;
  min-width: 220px;
  max-width: 280px;
  padding: 0;
}
.dropdown-scroll-area {
  max-height: 260px;
  overflow-y: auto;
  padding: 1rem 1rem 0.25rem;
}
.dropdown-actions.sticky-footer {
  position: sticky;
  bottom: 0;
  background: GhostWhite;
  border-top: 1px solid #eee;
  padding: 0.2rem 0.75rem;
  z-index: 2;
}
.dropdown-scroll-area .dropdown-divider {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}

/* ===== Utilities ===== */
.small { font-size: 0.85rem !important; }

/* Checkbox vertical alignment helper */
.form-check-input,
.form-check-label {
  margin-top: 0.35em !important;
  vertical-align: middle !important;
}

/* Custom badge color */
.badge.bg-lightred { background-color: #f8a5a5; color: #721c24; }

/* ===== Dropdown visibility in responsive tables =====
   NOTE: This keeps dropdowns visible inside responsive wrappers, but can
   remove horizontal scroll on small screens. Prefer scoping to a special
   wrapper (e.g., .table-responsive.table-dropdowns) if possible. */
.table-responsive { overflow: visible !important; }
.table-responsive .dropdown,
.table-responsive .dropdown-menu { position: static !important; }
.table-responsive .dropdown-menu {
  position: absolute !important;
  inset: auto !important;
  transform: none !important;
  z-index: 2000 !important;
}