/* ============================================================
   L4D Reminder – Bootstrap 5
============================================================ */

.l4d .l4d-reminder {
  font-size: .85rem;
}

/* ================= HEADER ================= */
.l4d .l4d-reminder h3,
.l4d .l4d-reminder h4 {
  background: #9c9c9c;
  color: #fff;
  text-align: center;
  padding: .6rem 1rem;
  border-radius: .375rem;
  margin-bottom: 1rem;
  font-variant: small-caps;
}

/* ================= FORMS ================= */
.l4d .l4d-reminder .form-control,
.l4d .l4d-reminder .form-select {
  border-radius: .375rem;
}

/* ================= DATATABLES ================= */
.l4d .l4d-reminder .dataTables_wrapper {
  margin-bottom: 3rem;
}

.l4d .l4d-reminder .dataTables_filter,
.l4d .l4d-reminder .dataTables_length {
  padding: .75rem 0;
}

/* ================= TABLE ROW STATES ================= */
.l4d .l4d-reminder tr.table-danger {
  --bs-table-bg: #ffe5e5;
  --bs-table-color: #842029;
}

/* ================= ACTION ICONS ================= */
.l4d .l4d-reminder i.bi {
  cursor: pointer;
  font-size: 1.1em;
  vertical-align: middle;
}

.l4d .l4d-reminder i.bi:hover {
  opacity: .75;
}

/* ================= LOADING OVERLAY ================= */
.l4d .l4d-reminder .loading {
  position: absolute;
  inset: 0;
  background: rgba(248, 249, 250, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ================= HELPERS ================= */
.l4d .l4d-reminder .d-none {
  display: none !important;
}


.l4d .l4d-reminder .bi-trash {
  color: var(--bs-danger);
}
.l4d .l4d-reminder .bi-pencil {
  color: var(--bs-primary);
}

/* ============================================================
   FIX DEFINITIVO MODALES EN DASHBOARD L4D
============================================================ */

/* Cuando hay un modal abierto, ningún ancestro puede tener transform */
body.modal-open * {
  transform: none !important;
}

/* Asegurar viewport real */
body.modal-open .modal {
  position: fixed !important;
  inset: 0;
  overflow: visible !important;
}

/* Scroll interno correcto */
body.modal-open .modal-dialog {
  max-height: 100vh;
  margin: 1.5rem auto;
}

/* ================================
   REMINDER TABS – COLORES VISUALES
================================ */

#reminderTabs .nav-link {
  --tab-color: transparent;

  border-radius: 999px;
  font-weight: 600;
  padding: .35rem .9rem;

  background: transparent;
  color: var(--tab-color);
  border: 1px solid var(--tab-color);

  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

#reminderTabs .badge-SEGUIMIENTO { --tab-color: var(--seguimiento); }
#reminderTabs .badge-VISITA      { --tab-color: var(--visita); }
#reminderTabs .badge-PRESUPUESTO { --tab-color: var(--presupuesto); }
#reminderTabs .badge-NUEVO       { --tab-color: var(--nuevo); }
#reminderTabs .badge-CUSTOM      { --tab-color: var(--custom); }

#reminderTabs .nav-link.active {
  background-color: var(--tab-color);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

#reminderTabs .nav-link:not(.active):hover {
  background-color: color-mix(in srgb, var(--tab-color) 12%, transparent);
  transform: translateY(-1px);
}

#reminderTabs .nav-link.active {
  animation: tab-pop .25s ease;
}

@keyframes tab-pop {
  0%   { transform: scale(.96); }
  100% { transform: scale(1); }
}