.table-responsive {
  border-radius: inherit;
}

.table {
  --bs-table-bg: #fff;
  --bs-table-hover-bg: #f8faff;
  --bs-table-border-color: #edf1f6;
  margin-bottom: 0;
  color: var(--sp-text-secondary);
  font-size: var(--sp-font-size-md);
  font-weight: var(--sp-font-medium);
}

.table thead th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sp-border) !important;
  color: var(--sp-text-secondary) !important;
  background: #fbfcfe;
  font-size: 11.5px;
  font-weight: var(--sp-font-semibold);
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}

.table tbody td {
  padding: 10px 12px;
  border-color: #edf1f6;
  color: var(--sp-text-secondary);
  font-weight: var(--sp-font-medium);
  vertical-align: middle;
}

.table tbody tr {
  height: 60px;
  transition: background-color var(--sp-transition);
}

.table.table-sm {
  font-size: 13px;
}

.table.table-sm tbody tr {
  height: 44px;
}

.table.table-sm tbody td,
.table.table-sm thead th {
  padding-top: 7px;
  padding-bottom: 7px;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* Standard "click anywhere on the row to open its details" pattern.
   Pair with data-href (target URL) — see wwwroot/js/site.js for the click/keyboard handling. */
.clickable-row {
  cursor: pointer;
}

.table tbody tr.clickable-row:hover > * {
  background-color: #f8faff;
}

.clickable-row:focus-visible {
  outline: 2px solid var(--sp-blue-600, #2563eb);
  outline-offset: -2px;
}

.clickable-row:active > * {
  background-color: #eef4ff !important;
}

.table-sticky-header thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  box-shadow: 0 1px 0 var(--sp-border);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--sp-slate-300);
  border-radius: 8px;
}

.page-link {
  border-color: var(--sp-border);
  color: var(--sp-slate-700);
}

.page-item.active .page-link {
  border-color: var(--sp-blue-600);
  background: var(--sp-blue-600);
}

.sp-clinics-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sp-clinics-card > .table-responsive {
  overflow: hidden;
}

.sp-clinics-table {
  width: 100%;
  table-layout: fixed;
}

.sp-clinics-table tbody tr {
  height: auto;
}

.sp-clinics-table .sp-clinics-col-clinic,
.sp-clinics-table .sp-clinics-col-contact {
  overflow: hidden;
}

.sp-clinics-table .sp-person-cell,
.sp-clinics-table .sp-person-copy,
.sp-clinics-table .sp-clinic-contact {
  width: 100%;
  max-width: 100%;
}

.sp-clinics-col-clinic { width: 32%; }
.sp-clinics-col-contact { width: auto; }
.sp-clinics-col-providers { width: 6.5rem; }
.sp-clinics-col-alerts { width: 9rem; }
.sp-clinics-col-actions { width: 9.75rem; }

.sp-clinic-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.sp-clinic-contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sp-clinic-contact-line {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-clinic-flags {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.sp-clinic-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  color: var(--sp-text-secondary);
  font-size: 12px;
  line-height: 1.2;
}

.sp-clinic-flag-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-clinic-inline-flags {
  display: none;
}

@media (max-width: 1199.98px) and (min-width: 768px) {
  .sp-clinics-table .sp-clinics-col-alerts {
    display: none;
  }

  .sp-clinics-col-clinic { width: 38%; }
  .sp-clinics-col-providers { width: 5.75rem; }
  .sp-clinics-col-actions { width: 8.75rem; }

  .sp-clinic-inline-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
  }
}

@media (max-width: 767.98px) {
  .sp-clinics-card > .table-responsive {
    overflow: visible;
  }

  .sp-clinics-table {
    table-layout: auto;
  }

  .sp-clinics-col-clinic,
  .sp-clinics-col-contact,
  .sp-clinics-col-providers,
  .sp-clinics-col-alerts,
  .sp-clinics-col-actions {
    width: auto;
  }

  .sp-clinic-contact-line {
    white-space: normal;
    text-overflow: unset;
  }
}