/* ===========================================================
   Post Op — Patient List page
   Exact tokens pulled from the live application stylesheet
   (loaded in addition to styles.css for the shared navbar/tokens).
   =========================================================== */

/* ---------- page header ---------- */
.page-title { font-family: "Montserrat", sans-serif; font-weight: 700; }
#list-total { font-weight: 400; }
/* match the app's wider container gutters (content = 1280px at xxl) */
.container { --bs-gutter-x: 2.5rem; }

/* ---------- small utilities used on this page ---------- */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.w-13px { width: 13px; }
.mt--5px { margin-top: -5px; }
.max-w-80-percent { max-width: 80%; }
.text-gray2 { color: #767676 !important; }

/* ---------- table card shell ---------- */
.data-table-wrapper { overflow: hidden; border-radius: 15px; }

/* ---------- heading: search + filter icons + archived ---------- */
.data-table-heading { background: #f5f0fe; }
@media (min-width: 768px) {
  .data-table-heading { border-top-left-radius: 15px; border-top-right-radius: 15px; }
}
.input-wrapper {
  background: #fff; position: relative; overflow: hidden;
  height: 45px; border-radius: 45px;
}
.search-input {
  width: 100%; border: unset; outline: unset; font-size: 16px;
  background: transparent;
}
.search-input::placeholder { color: #979fb0; }
.filter-icon { color: #5E37EF; line-height: 0; display: inline-block; }
.active-filters-count {
  width: 14px; height: 14px; border-radius: 50%; background: #ef3737; flex-shrink: 0;
  color: #fff; position: absolute; top: -5px; right: -5px;
  font-size: 10px; text-align: center; line-height: 14px;
}
.btn-blue {
  --bs-btn-color: #fff; --bs-btn-bg: #0077ff; --bs-btn-border-color: #0077ff;
  --bs-btn-hover-color: #0077ff; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #0077ff;
  --bs-btn-active-color: #0077ff; --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #0077ff;
  --bs-border-width: 2px; --bs-btn-border-radius: 24px;
}
/* the app renders all buttons with a 24px (rounded) radius */
.btn-blue, #create-patient-btn { --bs-btn-border-radius: 24px; }
/* app renders button text at 15px (Bootstrap default is 16px) */
.btn { font-size: 15px; }
.btn-blue:hover svg path { fill: #07f; }

/* ---------- the grid table ---------- */
@media (max-width: 767.98px) { .custom-responsive { border-radius: 15px; overflow: hidden; } }
@media (min-width: 768px) { .custom-responsive { overflow: hidden; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .custom-responsive { overflow-x: auto; } }
.datatable-cell { padding: 12px; display: flex; align-items: center; background-color: #f3f7ff; }
.datatable-cell.ps-29px { padding-left: 29px; }

@media (min-width: 768px) {
  /* md: name 30% + 5 fluid columns (min 160px → horizontal scroll when needed) */
  .datatable-row {
    display: grid;
    grid-template-columns: 30% minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr);
    border-bottom: 1px solid #eee;
  }
  .datatable-row:last-child { border-bottom: none; }
  .datatable-row:not(.datatable-header):hover > .datatable-cell { background: #fff; }
  .border-md-end { border-right: 1px solid #eee; }
}
@media (min-width: 992px) {
  /* lg+: name 25% + 5 equal fluid columns (fills container, no scroll) */
  .datatable-row { grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr; }
}
.datatable-header { font-weight: 600; background: #f8f9fa; }
@media (max-width: 767.98px) { .datatable-header { display: none; } }
@media (min-width: 992px) { .border-lg-0 { border: unset !important; } }

/* sticky Name column — only mid-desktop ranges, exactly like the app */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sticky-col-md { position: sticky; left: 0; z-index: 2; background: inherit; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sticky-col-lg { position: sticky; left: 0; z-index: 2; background: inherit; }
}

/* ---------- name cell ---------- */
.indicator-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.indicator-dot.dark-blue { background: #1f2e99; }

/* ---------- recovery-status badges ---------- */
.datatable-cell .badge.good,
.datatable-cell .badge.fair,
.datatable-cell .badge.poor {
  min-width: 76px; height: 24px; border-radius: 8px; text-align: center;
  padding: 0; line-height: 24px; font-weight: 700; font-size: 12px;
}
.badge.good { background: #bfffc5; color: #00683c; }
.badge.fair { background: #ffe586; color: #745b00; }
.badge.poor { background: #ffcecb; color: #c1180c; }

/* ---------- careplan state (gradient pill badge) ---------- */
.careplan-state-badge {
  display: inline-block; background: linear-gradient(180deg, #364afa, #d36c8e);
  font-size: 11px; text-align: center; padding: 5px 15px; border-radius: 13px; color: #fff;
}

/* ---------- pagination ---------- */
.pagination-wrapper { background: #f3f7ff; }
@media (min-width: 768px) {
  .pagination-wrapper { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
}
.pagination-btn, .pagination-page {
  border: 0; background: transparent; color: #6f7682; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pagination-page { width: 24px; height: 24px; border-radius: 4px; }
.pagination-btn:disabled { color: #b6bcc6; cursor: not-allowed; opacity: 0.3; }
.pagination-page.active { background: #6c3cff; color: #fff; }
.per-page-select {
  border: 1px solid #e3e6ec; border-radius: 8px; height: 32px;
  font-size: 13px; color: #1f2e99; width: auto; padding: 0 28px 0 10px;
}

/* mobile patient cards */
@media (max-width: 767.98px) {
  .patient-card { background: #fff; border-bottom: 1px solid #eee; }
}