@charset "UTF-8";
/* ============================================
   TABLE STYLING IMPROVEMENTS
   Production-grade table alignment and spacing
   ============================================ */
/* ===== ACTION COLUMN STYLING ===== */
/* Fixed-width action columns for layout stability (Livewire tables only) */
.livewire-table thead th:last-child,
.livewire-table tbody td:last-child {
  min-width: 180px;
  width: 180px;
}

/* Action column containers - centered flexbox */
.d-flex.justify-content-center[class*=action],
.d-flex.justify-content-center > a.btn,
div[data-action-column=true] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Standardize all action button sizing and spacing */
.btn.px-1,
.btn.px-2 {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  background-color: transparent !important;
  border: none !important;
}

/* Action button icon sizing */
.btn.px-1 i,
.btn.px-2 i {
  font-size: 16px;
  line-height: 1;
}

/* Primary action buttons (View/Eye icon) */
.btn.text-primary {
  color: #217FF7 !important;
}

.btn.text-primary:hover {
  background-color: #217FF7 !important;
  color: #ffffff !important;
}

/* Success action buttons (Add Appointment) */
.btn.text-success {
  color: #0AC074 !important;
}

.btn.text-success:hover {
  background-color: #0AC074 !important;
  color: #ffffff !important;
}

/* Danger/Delete action buttons */
.btn.text-danger {
  color: #F62947 !important;
}

.btn.text-danger:hover {
  background-color: #F62947 !important;
  color: #ffffff !important;
}

/* Warning action buttons (Hide/Unhide patient) */
.btn.text-warning {
  color: #FFC107 !important;
}

.btn.text-warning:hover {
  background-color: #FFC107 !important;
  color: #ffffff !important;
}

/* Specific hide button styling */
.patient-hide-btn:hover {
  background-color: #FFC107 !important;
  color: #ffffff !important;
}

/* Specific unhide button styling */
.patient-unhide-btn:hover {
  background-color: #FFC107 !important;
  color: #ffffff !important;
}

/* ===== NAV TABS STYLING ===== */
/* Remove default nav-tabs border */
/* Fix ::after pseudo-element purple line from theme */
.nav-tabs .nav-link::after,
#patientTab .nav-link::after {
  border-bottom-color: transparent !important;
  background-color: transparent !important;
}

.nav-tabs .nav-link.active::after,
#patientTab .nav-link.active::after {
  border-bottom-color: #217FF7 !important;
  background-color: #217FF7 !important;
}

/* Active nav-link styling - HIGH SPECIFICITY to override theme CSS */
/* Target: patient tab specific selector */
#patientTab .nav-link.active,
.nav-tabs .nav-item.active > .nav-link,
.nav-tabs .nav-link.active {
  border-color: transparent transparent #217FF7 transparent !important;
  border-width: 0 0 2px 0 !important;
  background-color: transparent !important;
  color: #217FF7 !important;
  margin-bottom: 0 !important;
}

.nav-tabs .nav-link:hover {
  color: #217FF7 !important;
  border-bottom-color: #217FF7 !important;
}

/* Toggle switch in action column - maintain spacing */
.transaction-action-column .form-check {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

.transaction-action-column .form-check-input {
  margin: 0 !important;
}

/* ===== COLUMN ALIGNMENT STRATEGY ===== */
/* Sr# Column - Left aligned for functional reference (Livewire tables only) */
.livewire-table tbody td:first-child,
.livewire-table thead th:first-child {
  text-align: left !important;
  padding-left: 20px !important;
  font-weight: 500;
  color: #5E6278;
  width: 80px;
  min-width: 80px;
}

/* Name columns - Left aligned for readability */
table tbody td .d-flex.align-items-center,
table tbody td .d-flex.flex-column {
  text-align: left;
  justify-content: flex-start;
}

/* Age columns - Center aligned (short uniform content) */
table tbody td:has(.badge),
table thead th:has([title*=Age]) + th,
.livewire-table [wire\:key*=age] {
  text-align: center !important;
}

/* Status badges and toggles - Center aligned */
table tbody td:has(.form-check),
table tbody td:has(.badge.badge-light-success),
table tbody td:has(.badge.badge-light-danger),
table tbody td:has(.badge.badge-light-warning),
table tbody td:has(.badge.badge-light-info) {
  text-align: center !important;
}

.form-check-input,
.form-switch {
  margin-left: auto;
  margin-right: auto;
}

/* Date columns - Left aligned for scanning */
table tbody td:has(> span[class*=fs-6]),
table tbody td[wire\:key*=date],
table tbody td[wire\:key*=created_at] {
  text-align: left !important;
  padding-left: 16px;
}

/* Amount/Number columns - Right aligned for comparison */
table tbody td:has(.text-success.fw-bold),
table tbody td:has(.text-danger.fw-bold),
table thead th[wire\:key*=amount],
table tbody td[wire\:key*=amount],
table tbody td[wire\:key*=total],
table tbody td[wire\:key*=price] {
  text-align: right !important;
  padding-right: 24px;
  font-variant-numeric: tabular-nums;
}

/* ===== TABLE HEADER STYLING ===== */
.livewire-table thead th,
table thead th {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3F4254;
  padding: 16px 12px;
  background-color: #F9FAFB;
  border-bottom: 2px solid #E4E6EF;
}

/* Action column header - center aligned */
.livewire-table thead th:last-child,
table thead th:last-child {
  text-align: center !important;
}

/* ===== TABLE BODY STYLING ===== */
.livewire-table tbody td,
table tbody td {
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #EFF2F5;
  font-size: 14px;
  color: #3F4254;
}

/* Row hover effect - subtle and professional */
.livewire-table tbody tr:hover,
table tbody tr:hover {
  background-color: #F9FAFB;
  transition: background-color 0.15s ease;
}

/* ===== PRIMARY BUTTONS (Add, Create, etc.) ===== */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(33, 127, 247, 0.2);
}

/* Force text to be white on anchor button links */
a.btn.btn-primary,
a.btn.btn-primary:visited,
a.btn.btn-primary:hover,
a.btn.btn-primary:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn.btn-primary:hover {
  background-color: #1a6bd6 !important;
  border-color: #1a6bd6 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 127, 247, 0.3);
}

.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(33, 127, 247, 0.2);
}

/* ===== FILTER BUTTONS ===== */
.btn.btn-outline-primary {
  border-color: #217FF7;
  color: #217FF7;
  background-color: transparent;
  transition: all 0.2s ease;
}

.btn.btn-outline-primary:hover {
  background-color: #217FF7;
  color: #ffffff;
  border-color: #217FF7;
}

/* ===== TABLE RESPONSIVE WRAPPER ===== */
.table-responsive {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ===== STATUS BADGES ===== */
.badge {
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: capitalize;
}

/* Doctor/Therapist Role badges - center aligned with solid blue style */
.doctor-role-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
}

table tbody td:has(.doctor-role-badge) {
  text-align: center !important;
}

/* Doctor/Therapist Total Sessions badge - center aligned with solid blue style */
.doctor-total-sessions-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
}

table tbody td:has(.doctor-total-sessions-badge) {
  text-align: center !important;
}

/* Doctor/Therapist Contract Type badge - center aligned with solid blue style */
.doctor-contract-type-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
}

table tbody td:has(.doctor-contract-type-badge) {
  text-align: center !important;
}

/* Appointment Status badge - center aligned with color-coded style */
.appointment-status-badge {
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
  min-width: 90px;
}

table tbody td:has(.appointment-status-badge) {
  text-align: center !important;
}

.badge-light-success {
  background-color: rgba(10, 192, 116, 0.1);
  color: #0AC074;
}

.badge-light-danger {
  background-color: rgba(246, 41, 71, 0.1);
  color: #F62947;
}

.badge-light-warning {
  background-color: rgba(255, 184, 33, 0.1);
  color: #FFB821;
}

.badge-light-info {
  background-color: rgba(33, 127, 247, 0.1);
  color: #217FF7;
}

/* ===== EMAIL VERIFICATION & SPECIAL ICONS ===== */
.doctor-email-verification,
.patient-email-verification {
  background-color: rgba(33, 127, 247, 0.08);
  color: #217FF7 !important;
}

.doctor-email-verification:hover,
.patient-email-verification:hover {
  background-color: #217FF7;
  color: #ffffff !important;
}

/* ===== PROFILE IMAGES IN TABLES ===== */
.image.image-circle.image-mini {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #E4E6EF;
}

.image.image-circle.image-mini img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ===== PAGINATION ===== */
.pagination {
  margin-top: 20px;
  gap: 4px;
}

.pagination .page-link {
  border-radius: 6px;
  padding: 8px 14px;
  color: #5E6278;
  border: 1px solid #E4E6EF;
  transition: all 0.2s ease;
}

.pagination .page-link:hover {
  background-color: #F9FAFB;
  border-color: #217FF7;
  color: #217FF7;
}

.pagination .page-item.active .page-link {
  background-color: #217FF7;
  border-color: #217FF7;
  color: #ffffff;
}

/* ===== DARK MODE OVERRIDES ===== */
[data-bs-theme=dark] .livewire-table thead th,
[data-bs-theme=dark] table thead th {
  background-color: #1E1E2D;
  color: #92929F;
  border-bottom-color: #2B2B40;
}

[data-bs-theme=dark] .livewire-table tbody td,
[data-bs-theme=dark] table tbody td {
  color: #CDCDDE;
  border-bottom-color: #2B2B40;
}

[data-bs-theme=dark] .livewire-table tbody tr:hover,
[data-bs-theme=dark] table tbody tr:hover {
  background-color: #1E1E2D;
}

[data-bs-theme=dark] .btn.text-primary {
  background-color: rgba(33, 127, 247, 0.12);
}

[data-bs-theme=dark] .btn.text-success {
  background-color: rgba(10, 192, 116, 0.12);
}

[data-bs-theme=dark] .btn.text-danger {
  background-color: rgba(246, 41, 71, 0.12);
}

[data-bs-theme=dark] .image.image-circle.image-mini {
  border-color: #2B2B40;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  /* Stack action buttons vertically on mobile */
  .d-flex.justify-content-center[class*=action],
div[data-action-column=true] {
    flex-direction: column;
    gap: 4px;
    padding-right: 8px;
  }

  /* Reduce button size on mobile */
  .btn.px-1,
.btn.px-2 {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .btn.px-1 i,
.btn.px-2 i {
    font-size: 16px;
  }

  /* Adjust action column width on mobile (Livewire tables only) */
  .livewire-table thead th:last-child,
.livewire-table tbody td:last-child {
    min-width: 60px;
    width: 60px;
  }

  /* Transactions ACTION column - more space on mobile for toggle + delete */
  #table-transactions .livewire-table thead th:last-child,
#table-transactions .livewire-table tbody td:last-child {
    min-width: 100px;
    width: 100px;
  }
}
/* ===== UTILITY CLASSES ===== */
/* For manual alignment overrides if needed */
.text-align-left {
  text-align: left !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-right {
  text-align: right !important;
}

/* ===== TRANSACTION TABLE - ACTION COLUMN ALIGNMENT ===== */
/* Action column wrapper - Always centered, gap between toggle and delete */
.transaction-action-column {
  gap: 8px;
  padding: 0 4px;
}

.transaction-action-column .btn {
  margin: 0 2px;
}

/* Delete button - fixed size so hover doesn't clip */
.transaction-action-column .transaction-delete-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* Transactions ACTION column - more space for toggle + delete */
#table-transactions .livewire-table thead th:last-child,
#table-transactions .livewire-table tbody td:last-child {
  min-width: 220px;
  width: 220px;
}

/* Ensure action column cell is always centered */
table tbody td:has(.transaction-action-column) {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Action column header alignment */
table thead th[wire\:key*=action] {
  text-align: center !important;
}

/* ===== TRANSACTION TABLE - PATIENT & APPOINTMENT WITH ALIGNMENT ===== */
/* Patient column - image and text container (transactions only) */
#table-transactions table tbody td[wire\:key*="user.first_name"],
#table-transactions table tbody td[wire\:key*="user.first_name"] .d-flex {
  text-align: left !important;
  padding-left: 16px !important;
  vertical-align: middle !important;
}

/* Appointment With column - match Patient exactly (transactions only) */
#table-transactions table tbody td:has(> div > div.image-circle),
#table-transactions table tbody td:nth-child(3) {
  text-align: left !important;
  padding-left: 16px !important;
  vertical-align: middle !important;
}

/* Image+text containers - no extra left padding (transactions) */
#table-transactions .d-flex.align-items-center {
  padding-left: 0 !important;
}

/* Image margin - consistent gap between avatar and text (transactions) */
#table-transactions .image.image-circle.image-mini.me-3 {
  margin-right: 12px !important;
}

/* N/A row - align with name position (avatar width + gap) */
#table-transactions .appointment-with-na {
  padding-left: 52px;
}

/* Patient header (transactions only) */
#table-transactions table thead th[wire\:key*="user.first_name"] {
  text-align: left !important;
  padding-left: 16px !important;
}

/* Appointment With header (transactions only) */
#table-transactions table thead th:nth-child(3) {
  text-align: left !important;
  padding-left: 16px !important;
}

/* ===== TRANSACTION TABLE - APPOINTMENT STATUS & TYPE ALIGNMENT ===== */
/* Appointment Status Column Wrapper - Fixed alignment container */
.transaction-appointment-status-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  width: 100%;
}

/* Appointment Status Badge - Consistent fixed-width for alignment */
.transaction-status-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 0;
  border-radius: 6px;
  min-width: 110px;
  max-width: 110px;
  width: 110px;
  text-align: center;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Type Column Wrapper - Fixed alignment container */
.transaction-type-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  width: 100%;
}

/* Type Badge - Consistent fixed-width for alignment */
.transaction-type-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 0;
  border-radius: 6px;
  min-width: 130px;
  max-width: 130px;
  width: 130px;
  text-align: center;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Column cell alignment - ensure consistent left alignment */
table tbody td:has(.transaction-appointment-status-wrapper),
table tbody td:has(.transaction-type-wrapper) {
  text-align: left !important;
  padding-left: 16px !important;
  vertical-align: middle !important;
}

/* Header alignment to match content */
table thead th[wire\:key*=appointment_status],
table thead th[wire\:key*=type] {
  text-align: left !important;
  padding-left: 16px !important;
}

/* ===== PATIENT DETAILS APPOINTMENT TABLE (NO ACTION COLUMN) ===== */
/* Override last-child rules for tables without action column */
#appointments .livewire-table thead th:last-child,
#appointments .livewire-table tbody td:last-child,
#appointments table thead th:last-child,
#appointments table tbody td:last-child {
  min-width: auto;
  width: auto;
  padding-right: 24px !important;
}

/* Status column in patient appointments - proper width and alignment */
#appointments table tbody td:has(.appointment-status) {
  text-align: left !important;
  padding-left: 16px;
  padding-right: 24px !important;
  min-width: 250px;
  width: auto;
}

/* Status dropdown container - left aligned with proper spacing */
#appointments .appointment-status-change {
  max-width: 200px;
}

/* Appointment time badge - left alignment to match header */
#appointments table tbody td:has(.badge.bg-info) {
  text-align: left !important;
  padding-left: 16px !important;
}

#appointments table thead th:nth-child(2) {
  text-align: left !important;
  padding-left: 16px !important;
}

/* Doctor column - left alignment with proper spacing */
#appointments table tbody td:first-child + td {
  text-align: left !important;
  padding-left: 16px;
}

/* Table container width optimization */
#appointments .table-responsive {
  max-width: 100%;
  overflow-x: visible;
}

#appointments .livewire-table,
#appointments table {
  width: 100%;
  table-layout: auto;
}

/* ===== GAME-HISTORY & PATIENT-HISTORY: undo td.text-center min-width (my-resource.scss) ===== */
.game-history-table-wrap td.text-center,
#gameHistoryTabsContent td.text-center,
#patientHistoryContent td.text-center {
  min-width: auto;
}

/* ===== FIX: ASSIGN GAME PAGE - PROPER PADDING (NOT EDGE ALIGNED) ===== */
/* Assign game form - natural left alignment with padding */
.card-body form,
.card-body .form-group,
.card-body .mb-3,
.card-body .mb-4 {
  text-align: initial !important;
}

/* Form labels with proper spacing */
.card-body label {
  text-align: initial !important;
  padding-left: 0 !important;
}

/* ===== FIX: PERMISSIONS PAGE - PROPER PADDING (NOT EDGE ALIGNED) ===== */
/* Permission checkboxes - natural alignment with spacing */
/* ============================================
   STAFF TABLE STYLING IMPROVEMENTS
   Consistent primary blue color system
   ============================================ */
/* ===== PRIMARY BLUE COLOR SYSTEM ===== */
/* ===== STAFF NAME COLUMN ===== */
.staffs-table {
  /* Name links - primary blue */
  /* Email text - muted */
}
.staffs-table .staff-name-link {
  color: #217FF7 !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.staffs-table .staff-name-link:hover {
  color: #1a6bd6 !important;
  text-decoration: none;
}
.staffs-table .staff-email-text {
  color: #5E6278;
  font-size: 14px;
}

/* Update existing staff name component links */
.d-flex.align-items-center a[href*=staffs] {
  color: #217FF7 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.d-flex.align-items-center a[href*=staffs]:hover {
  color: #1a6bd6 !important;
}

/* ===== TOTAL SESSION BADGE ===== */
.total-sessions-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-block !important;
  min-width: 40px;
  text-align: center;
}

/* Override any existing green badges in total sessions */
.badge.bg-success {
  /* Only apply to total sessions context */
}
table tbody td:has(.total-sessions-badge) .badge.bg-success, [wire\:key*=total_session] .badge.bg-success {
  background-color: #217FF7 !important;
}

/* ===== EMAIL VERIFIED TOGGLE ===== */
.staff-email-verified.form-check-input:checked {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
}

.staff-email-verified.form-check-input:not(:checked) {
  background-color: #E4E6EF;
  border-color: #E4E6EF;
}

.staff-email-verified.form-check-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.staff-email-verified.form-check-input:focus {
  border-color: #217FF7;
  box-shadow: 0 0 0 0.25rem rgba(33, 127, 247, 0.25);
}

/* ===== STATUS TOGGLE ===== */
.doctor-status.form-check-input:checked {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
}

.doctor-status.form-check-input:not(:checked) {
  background-color: #E4E6EF;
  border-color: #E4E6EF;
}

.doctor-status.form-check-input:focus {
  border-color: #217FF7;
  box-shadow: 0 0 0 0.25rem rgba(33, 127, 247, 0.25);
}

.doctor-status.form-check-input:checked:hover {
  background-color: #1a6bd6 !important;
  border-color: #1a6bd6 !important;
}

/* ===== REGISTERED ON BADGE ===== */
.registered-on-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Override existing bg-primary badges in registered_on context */
table tbody td {
  /* Target registered_on column badges */
}
table tbody td .badge.bg-primary {
  background-color: #217FF7 !important;
  color: white !important;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* ===== ROLE COLUMN ===== */
.staff-role-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
}

/* ===== ACTION BUTTONS (Staff specific) ===== */
.staff-action-column .btn.text-primary {
  color: #217FF7 !important;
  transition: all 0.2s ease;
}

.staff-action-column .btn.text-primary:hover {
  background-color: #217FF7 !important;
  color: #ffffff !important;
}

.staff-action-column .btn.text-danger {
  color: #F62947 !important;
  transition: all 0.2s ease;
}

.staff-action-column .btn.text-danger:hover {
  background-color: #F62947 !important;
  color: #ffffff !important;
}

/* ===== STAFF TABLE HEADER ===== */
.staffs-table thead th {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3F4254;
  background-color: #F9FAFB;
  padding: 16px 12px;
}

/* ===== ROW HOVER EFFECT ===== */
.staffs-table tbody tr {
  transition: background-color 0.15s ease;
}
.staffs-table tbody tr:hover {
  background-color: #F9FAFB;
}

/* ===== PROFILE IMAGE ===== */
.staff-profile-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #E4E6EF;
  -o-object-fit: cover;
     object-fit: cover;
  transition: border-color 0.2s ease;
}
.staff-profile-image:hover {
  border-color: #217FF7;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .registered-on-badge {
    font-size: 11px;
    padding: 6px 10px;
  }

  .total-sessions-badge {
    font-size: 12px;
    padding: 5px 12px;
  }
}
/* ===== DARK MODE SUPPORT ===== */
[data-bs-theme=dark] .staffs-table .staff-name-link {
  color: #217FF7 !important;
}
[data-bs-theme=dark] .staffs-table .staff-name-link:hover {
  color: #529bf9 !important;
}
[data-bs-theme=dark] .staffs-table .staff-email-text {
  color: #92929F;
}
[data-bs-theme=dark] .staffs-table .staff-role-text {
  color: #CDCDDE;
}
[data-bs-theme=dark] .staff-email-verified.form-check-input:not(:checked),
[data-bs-theme=dark] .doctor-status.form-check-input:not(:checked) {
  background-color: #2B2B40;
  border-color: #2B2B40;
}
[data-bs-theme=dark] .staff-profile-image {
  border-color: #2B2B40;
}
[data-bs-theme=dark] .staff-profile-image:hover {
  border-color: #217FF7;
}
[data-bs-theme=dark] .staffs-table tbody tr:hover {
  background-color: #1E1E2D;
}

/* ===== SPACING & ALIGNMENT REFINEMENTS ===== */
/* Total Session - center aligned */
table tbody td:has(.total-sessions-badge) {
  text-align: center;
}

/* Toggles - center aligned */
table tbody td:has(.staff-email-verified),
table tbody td:has(.doctor-status) {
  text-align: center;
}

/* Email Verified & Status - compact toggle columns; headers need min width to avoid overlap */
#table-staff-table th.email-verified-column,
#table-staff-table td.email-verified-column {
  width: 1%;
  min-width: 108px;
  max-width: 118px;
  box-sizing: border-box;
}

#table-staff-table th.status-column,
#table-staff-table td.status-column {
  width: 1%;
  min-width: 72px;
  max-width: 82px;
  box-sizing: border-box;
}

#table-staff-table td.email-verified-column,
#table-staff-table td.status-column {
  white-space: nowrap;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#table-staff-table th.email-verified-column,
#table-staff-table th.status-column {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Prevent toggle wrapper from stretching; keep cell content compact */
#table-staff-table td.email-verified-column .form-check,
#table-staff-table td.status-column .form-check {
  display: inline-flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

/* Registered On - tight gap after Status (match image 2 spacing) */
table tbody td:has(.registered-on-badge) {
  text-align: left;
  padding-left: 8px !important;
  padding-right: 12px !important;
}

/* Role column - left aligned (badge style) */
table tbody td:has(.staff-role-badge) {
  text-align: left !important;
  padding-left: 16px;
}

/* Action column - centered (inherited from main table-improvements.scss) */
.staff-action-column {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
}

/* ===== COLOR CONSISTENCY OVERRIDES ===== */
/* Ensure badges work globally, not just in staff table */
.badge-primary,
.bg-primary {
  background-color: #217FF7 !important;
  color: #ffffff !important;
}

/* Staff table specific overrides */
.staffs-table {
  /* Override any link colors */
  /* Override form-check active states */
}
.staffs-table a:not(.btn) {
  color: #217FF7;
}
.staffs-table a:not(.btn):hover {
  color: #1a6bd6;
}
.staffs-table .form-check-input:checked {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Better focus states for toggles */
.form-check-input {
  /* Keyboard navigation highlight */
}
.form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(33, 127, 247, 0.25);
}
.form-check-input:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(33, 127, 247, 0.4);
}

/* Tooltip support for action buttons */
.staff-action-column .btn[data-bs-toggle=tooltip] {
  cursor: pointer;
}

/* ===== BADGE CONSISTENCY ===== */
/* Ensure all badges use consistent styling */
.badge.total-sessions-badge, .badge.registered-on-badge {
  font-family: "Poppins", sans-serif;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease;
}
.badge.total-sessions-badge:hover, .badge.registered-on-badge:hover {
  transform: translateY(-1px);
}

/* ============================================
   STAFF FORM – GENDER FIELD
   Spacing + alignment under "G", pixel-perfect
   ============================================ */
.staff-gender-field .form-label {
  display: block;
  margin-bottom: 0.5rem;
  padding-left: 0;
  margin-left: 0;
}
.staff-gender-field .staff-gender-values {
  padding-left: 0.5rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}
.staff-gender-field .staff-gender-option {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-left: 0;
  cursor: pointer;
}
.staff-gender-field .staff-gender-option .form-check-input {
  margin-left: 0;
  margin-right: 0.5rem;
  flex-shrink: 0;
  margin-top: 0;
}
.staff-gender-field .staff-gender-option .form-check-label {
  margin-bottom: 0;
  padding-left: 0;
  cursor: pointer;
}

/* Spacing between Gender and previous column – desktop + mobile */
.col-gender-with-gap {
  padding-left: 1rem;
}

@media (min-width: 992px) {
  .col-gender-with-gap {
    padding-left: 1.5rem;
  }
}
/* ============================================
   PATIENT DETAIL PAGE
   Match second screenshot: clean tabs, cards, layout
   ============================================ */
.patient-detail-page {
  /* Override any max-width constraints ONLY for patient detail page */
  /* This ensures full width without affecting other pages */
  max-width: 100% !important;
  /* Ensure stats cards don't get squeezed - prevent text wrapping */
  /* Header + overview cards: clean border, radius */
  /* Tab row: full-width, gray border under entire row (tabs + button). Match second image. */
  /* Disable theme .nav-tabs .nav-link::after – we use border-bottom on .nav-link */
  /* Header card: avatar, role, name, email, contact */
  /* Stats boxes: consistent with reference */
  /* Update Diagnose button */
}
@media only screen and (min-width: 1800px) {
  .patient-detail-page {
    max-width: 100% !important;
  }
}
.patient-detail-page .border.rounded-10 h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patient-detail-page .card {
  border-radius: 8px;
  border: 1px solid #E4E6EF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.patient-detail-page .patient-detail-tabs-row {
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
  border-bottom: 1px solid #E4E6EF;
  margin-bottom: 0;
  padding-bottom: 0;
}
.patient-detail-page .patient-detail-tab-list,
.patient-detail-page #myTab {
  min-width: 0;
  flex: 1 1 0%;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  border-bottom: none;
}
.patient-detail-page .patient-detail-diagnose-btn {
  flex-shrink: 0;
}
.patient-detail-page #myTab .nav-link::after,
.patient-detail-page #myTab .nav-link.active::after {
  display: none !important;
  content: none !important;
}
.patient-detail-page #myTab .nav-item {
  margin-bottom: -1px;
}
.patient-detail-page #myTab .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: #5E6278;
  font-weight: 500;
  padding: 0.75rem 0;
  margin-right: 1.5rem;
  background: transparent;
}
.patient-detail-page #myTab .nav-link:hover {
  color: #217FF7;
  border-bottom-color: transparent;
}
.patient-detail-page #myTab .nav-link.active {
  color: #217FF7;
  border-bottom-color: #217FF7;
  background: transparent;
}
.patient-detail-page .card .card-body .image.image-circle.image-lg-small {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #E4E6EF;
}
.patient-detail-page .card .card-body .image.image-circle.image-lg-small img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.patient-detail-page .text-success.mb-2 {
  font-size: 0.875rem;
  font-weight: 500;
}
.patient-detail-page .border.rounded-10 {
  border-radius: 8px;
  border: 1px solid #E4E6EF !important;
  background: #fff;
}
.patient-detail-page .border.rounded-10 .text-primary {
  color: #217FF7 !important;
  font-size: 1.5rem;
  font-weight: 600;
}
.patient-detail-page .border.rounded-10 h3 {
  font-size: 0.875rem;
  color: #5E6278;
}
.patient-detail-page #overview .bg-light {
  background-color: #F9FAFB !important;
  border-radius: 6px;
}
.patient-detail-page #overview label.pb-1,
.patient-detail-page #overview .fs-4.text-gray-600 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #5E6278;
}
.patient-detail-page #overview .fs-4.text-gray-800 {
  font-size: 1rem;
  color: #3F4254;
}
.patient-detail-page #addDiagnoseButton {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
  border-radius: 6px;
  font-weight: 500;
}
.patient-detail-page #addDiagnoseButton:hover {
  background-color: #1a6bd6 !important;
  border-color: #1a6bd6 !important;
}

/* ============================================
   PATIENT REPORTS TABLE STYLING
   Production-grade UI polish for Patient Reports
   ============================================ */
/* ===== REFRESH BUTTON STYLING ===== */
#refreshReportsBtn {
  background-color: #217FF7 !important;
  border-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(33, 127, 247, 0.2);
}

#refreshReportsBtn:hover {
  background-color: #1a6bd6 !important;
  border-color: #1a6bd6 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 127, 247, 0.3);
}

#refreshReportsBtn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(33, 127, 247, 0.2);
}

#refreshReportsBtn:disabled {
  background-color: #9CB8E0 !important;
  border-color: #9CB8E0 !important;
  cursor: not-allowed;
  transform: none;
}

#refreshReportsBtn i {
  margin-right: 6px;
  font-size: 12px;
}

/* ===== PATIENT REPORTS TABLE STYLING ===== */
/* Table headers */
#patientReportsCard table thead th {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5E6278;
  padding: 16px 12px;
  background-color: #F9FAFB;
  border-bottom: 2px solid #E4E6EF;
  vertical-align: middle;
}

/* Table body cells */
#patientReportsCard table tbody td {
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #EFF2F5;
  font-size: 14px;
  color: #3F4254;
}

/* Patient Name Column */
#patientReportsCard table tbody td:first-child {
  padding-left: 20px;
}

#patientReportsCard table tbody td:first-child .symbol {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

#patientReportsCard table tbody td:first-child .symbol img,
#patientReportsCard table tbody td:first-child .symbol-label {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Game Column - Improved alignment */
#patientReportsCard table tbody td:nth-child(2) {
  padding-left: 16px;
  padding-right: 16px;
}

#patientReportsCard .game-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

#patientReportsCard .game-name {
  color: #3F4254;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}

#patientReportsCard .game-icon {
  color: #217FF7;
  font-size: 16px;
  min-width: 16px;
}

/* Status Badges - Revoked/Active */
#patientReportsCard .game-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  margin-left: 8px;
  vertical-align: middle;
}

#patientReportsCard .game-status-badge.revoked {
  background-color: rgba(246, 41, 71, 0.1);
  color: #F62947;
}

#patientReportsCard .game-status-badge.active {
  background-color: rgba(10, 192, 116, 0.1);
  color: #0AC074;
}

/* Counter Column - Perfect center alignment */
#patientReportsCard table tbody td:nth-child(3) {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 12px;
}

#patientReportsCard .counter-badge {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 6px;
  display: inline-block;
  min-width: 50px;
  text-align: center;
  letter-spacing: 0.5px;
}

#patientReportsCard .counter-label {
  color: #7E8299;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  display: block;
  text-align: center;
}

#patientReportsCard .counter-not-played {
  color: #A1A5B7;
  font-size: 13px;
  font-weight: 500;
}

/* View History Column - Button styling */
#patientReportsCard table tbody td:nth-child(4) {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 12px;
}

#patientReportsCard .btn-view-history {
  background-color: transparent !important;
  border: 2px solid #217FF7 !important;
  color: #217FF7 !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#patientReportsCard .btn-view-history:hover {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 127, 247, 0.2);
}

#patientReportsCard .btn-view-history:active {
  transform: translateY(0);
}

#patientReportsCard .btn-view-history i {
  font-size: 12px;
}

/* Row hover effect */
#patientReportsCard table tbody tr:hover {
  background-color: #F9FAFB;
  transition: background-color 0.15s ease;
}

/* Empty state styling */
#patientReportsCard .empty-state-icon {
  color: #E4E6EF;
  font-size: 48px;
  margin-bottom: 12px;
}

#patientReportsCard .empty-state-text {
  color: #5E6278;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

#patientReportsCard .empty-state-subtext {
  color: #A1A5B7;
  font-size: 13px;
}

/* Table responsive wrapper */
#patientReportsCard .table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

/* Card styling improvements */
#patientReportsCard.card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#patientReportsCard .card-header {
  background-color: #217FF7 !important;
  padding: 20px 24px;
}

#patientReportsCard .card-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

#patientReportsCard .card-body {
  padding: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #patientReportsCard table tbody td {
    padding: 12px 8px;
  }

  #patientReportsCard .counter-badge {
    font-size: 14px;
    padding: 8px 12px;
  }

  #patientReportsCard .btn-view-history {
    font-size: 12px;
    padding: 6px 12px;
  }
}
/* ============================================
   SOAP NOTES STYLING
   Production-grade UI polish for SOAP Notes
   ============================================ */
/* ===== CARD HEADER ===== */
.soap-notes-card .card-header {
  background-color: #217FF7 !important;
  padding: 20px 24px;
  position: relative;
}

.soap-notes-card .card-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.soap-notes-card .card-header small {
  font-size: 13px;
  opacity: 0.9;
}

/* ===== ADD NOTE BUTTON (Header) ===== */
#addSoapNoteBtn {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #217FF7 !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
}

#addSoapNoteBtn:hover {
  background-color: #f8f9fa !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#addSoapNoteBtn i {
  font-size: 12px;
  margin-right: 6px;
}

/* ===== SOAP NOTE ITEM ===== */
.soap-note-item {
  border: 1px solid #E4E6EF;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.soap-note-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #D1D5DB;
}

/* Note Header */
.soap-note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EFF2F5;
}

.soap-note-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #3F4254;
}

.soap-note-date i {
  color: #217FF7;
  font-size: 16px;
}

/* Doctor Info Badge (for Admin, Front Desk, Clinic Coordinator) */
.soap-note-doctor-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #F3F6F9;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #5E6278;
  margin-top: 8px;
}

.soap-note-doctor-info i {
  color: #217FF7;
  font-size: 11px;
}

/* Action Buttons Container */
.soap-note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Edit Button */
.edit-soap-note-btn {
  background-color: transparent !important;
  border: 2px solid #217FF7 !important;
  color: #217FF7 !important;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.edit-soap-note-btn:hover {
  background-color: #217FF7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(33, 127, 247, 0.2);
}

.edit-soap-note-btn i {
  font-size: 12px;
}

/* Delete Button */
.delete-soap-note-btn {
  background-color: transparent !important;
  border: 2px solid #F62947 !important;
  color: #F62947 !important;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.delete-soap-note-btn:hover {
  background-color: #F62947 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(246, 41, 71, 0.2);
}

.delete-soap-note-btn i {
  font-size: 12px;
}

/* Note Content */
.soap-note-content-wrapper {
  background-color: #F9FAFB;
  border: 1px solid #E4E6EF;
  border-radius: 6px;
  padding: 20px;
}

.soap-note-preview,
.soap-note-full {
  color: #3F4254;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Read More/Less Buttons */
.read-more-btn,
.read-less-btn {
  background-color: transparent !important;
  border: none !important;
  color: #217FF7 !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 0 !important;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.read-more-btn:hover,
.read-less-btn:hover {
  color: #1a6bd6 !important;
  text-decoration: none;
}

.read-more-btn i,
.read-less-btn i {
  font-size: 11px;
}

/* ===== EMPTY STATE ===== */
.soap-notes-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.soap-notes-empty-state i {
  color: #E4E6EF;
  font-size: 64px;
  margin-bottom: 20px;
}

.soap-notes-empty-state h4 {
  color: #5E6278;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

.soap-notes-empty-state p {
  color: #A1A5B7;
  font-size: 14px;
  margin-bottom: 24px;
}

.soap-notes-empty-state .btn {
  font-size: 14px;
  padding: 10px 20px;
}

/* ===== MODAL STYLING ===== */
.soap-notes-modal .modal-header {
  background-color: #F9FAFB;
  border-bottom: 1px solid #E4E6EF;
  padding: 20px 24px;
}

.soap-notes-modal .modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #3F4254;
}

.soap-notes-modal .modal-body {
  padding: 24px;
}

.soap-notes-modal .form-label {
  font-weight: 600;
  font-size: 14px;
  color: #3F4254;
  margin-bottom: 8px;
}

.soap-notes-modal .form-label.required::after {
  content: "*";
  color: #F62947;
  margin-left: 4px;
}

.soap-notes-modal .form-control {
  border: 1px solid #E4E6EF;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.soap-notes-modal .form-control:focus {
  border-color: #217FF7;
  box-shadow: 0 0 0 3px rgba(33, 127, 247, 0.1);
}

.soap-notes-modal .form-text {
  font-size: 12px;
  color: #A1A5B7;
  margin-top: 6px;
}

.soap-notes-modal .modal-footer {
  background-color: #F9FAFB;
  border-top: 1px solid #E4E6EF;
  padding: 16px 24px;
}

.soap-notes-modal .modal-footer .btn {
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 500;
}

/* ===== CARD BODY ===== */
.soap-notes-card .card-body {
  padding: 24px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  #addSoapNoteBtn {
    position: static !important;
    margin-top: 16px;
    width: 100%;
  }

  .soap-note-header {
    flex-direction: column;
    gap: 12px;
  }

  .soap-note-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .edit-soap-note-btn,
.delete-soap-note-btn {
    flex: 1;
    justify-content: center;
  }

  .soap-note-item {
    padding: 16px;
  }

  .soap-note-content-wrapper {
    padding: 16px;
  }
}
/* ===== FIX: MY RESOURCE ACTION BUTTONS ===== */
.my-resource-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}

/* only for Available tools actions (Demo + Assign) */
.my-resource-actions .btn-info,
.my-resource-actions .btn-primary {
  height: 44px;
  padding: 0 22px !important;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 0 !important;
  margin: 0 !important;
}

/* icon spacing */
.my-resource-actions .btn-info i,
.my-resource-actions .btn-primary i {
  margin-right: 10px !important;
  font-size: 14px;
  line-height: 1;
}

/* keep your colors */
.my-resource-actions .btn-info {
  background: #217FF7 !important;
  color: #fff !important;
}

.my-resource-actions .btn-info:hover {
  background: #1a6ad4 !important;
}

.my-resource-actions .btn-primary {
  background: #1a6ad4 !important;
  color: #fff !important;
}

.my-resource-actions .btn-primary:hover {
  background: #1a6ad4 !important;
}

/* prevent squeezing inside table */
td.text-center {
  min-width: 360px;
}

/* mobile stack */
@media (max-width: 576px) {
  .my-resource-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .my-resource-actions .btn-info,
.my-resource-actions .btn-primary {
    width: 100%;
  }

  td.text-center {
    min-width: auto;
  }
}
/* ===== REVOKE & HISTORY BUTTONS ONLY ===== */
/* container (same line, proper gap) */
#assigned-tools .my-resource-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Revoke button */
#assigned-tools .my-resource-actions .btn-danger {
  height: 40px;
  padding: 0 18px !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  /* ✅ text ek line me */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* History button */
#assigned-tools .my-resource-actions .btn-light-primary {
  height: 40px;
  padding: 0 18px !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  /* ✅ text ek line me */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icons spacing */
#assigned-tools .my-resource-actions .btn-danger i,
#assigned-tools .my-resource-actions .btn-light-primary i {
  margin-right: 8px;
  font-size: 13px;
}

/* Actions column width (prevent wrap) */
#assigned-tools td.text-center {
  min-width: 260px;
}

/* Mobile */
@media (max-width: 576px) {
  #assigned-tools .my-resource-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #assigned-tools .my-resource-actions .btn {
    width: 100%;
  }

  #assigned-tools td.text-center {
    min-width: auto;
  }
}
/* ================================================================
   LINGUA LINK 360 — RESPONSIVE / MOBILE-FIRST STYLESHEET
   Mobile-first approach covering all major breakpoints:
     Mobile:       320px – 480px
     Tablet:       481px – 768px
     Small Laptop: 769px – 1024px
     Desktop:      1025px+
   ================================================================ */
html {
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1199px) {
  .wrapper {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .aside-menu-container {
    transition: left 0.3s ease-in-out !important;
  }

  .aside-menu-container.collapsed-menu {
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.18) !important;
  }
}
@media (max-width: 1199px) {
  header.header {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }
}
@media (max-width: 767px) {
  header.header {
    padding: 0 8px !important;
  }

  .bg-light-primary.rounded-pill {
    padding: 4px 10px !important;
  }
  .bg-light-primary.rounded-pill span.fs-5,
.bg-light-primary.rounded-pill span.fw-bold {
    font-size: 0.72rem !important;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .bg-light-primary.rounded-pill .fa-hospital {
    font-size: 0.85rem !important;
  }

  .nav.align-items-center > li {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }

  button#menuDropDown {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  #admin-imp-timer {
    display: none !important;
  }

  span.text-danger.fs-7.fw-bold.text-nowrap {
    font-size: 0.7rem !important;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 480px) {
  #impersonation-warning-banner {
    padding: 3px 6px !important;
    gap: 6px !important;
  }
  #impersonation-warning-banner .lh-sm > div {
    font-size: 0.65rem !important;
  }

  header .image.image-circle.image-mini {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}
@media (max-width: 1199px) {
  .top-navbar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .top-navbar .navbar-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .top-navbar .nav-link {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }
  .top-navbar .container-fluid {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
@media (max-width: 767px) {
  .content.d-flex.flex-column.flex-column-fluid {
    padding-top: 12px !important;
  }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 480px) {
  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.dashboard-card {
  width: 100% !important;
  max-width: 345px;
}
@media (max-width: 575px) {
  .dashboard-card {
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .dashboard-vizit {
    margin-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  .admin-dashbord-user-card-body {
    flex-direction: column !important;
  }
}

@media (max-width: 767px) {
  .admin-user-data {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .card-header-dashbord {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
    gap: 8px;
  }
}
@media (max-width: 767px) {
  .row > .col-xl-4,
.row > .col-xxl-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.dashbord-doctor-card {
  width: 100% !important;
}
@media (max-width: 425px) {
  .dashbord-doctor-card {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 767px) {
  .dashbord-doctor-card-body {
    flex-direction: column !important;
  }
}

@media (max-width: 500px) {
  .add-slot {
    flex-direction: column;
    margin-left: 0 !important;
    align-items: flex-start !important;
    gap: 8px;
  }
}

.smart-card-tem-body {
  width: 100% !important;
  max-width: 600px;
  overflow-x: auto;
}
@media (max-width: 640px) {
  .smart-card-tem-body {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .patient-modal-content .card .card-body {
    padding: 12px !important;
  }
  .patient-modal-content .card .card-body .card-img {
    width: 70px !important;
    min-width: 70px !important;
    height: 100px;
  }
}
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto !important;
  overflow-y: visible;
  margin-bottom: 1rem;
  width: 100%;
}

[wire\:id] .table-responsive,
[wire\:id] > div > .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .livewire-table,
table.table {
    min-width: 550px;
  }

  .livewire-table thead th,
table.table thead th {
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
  }

  .livewire-table tbody td,
table.table tbody td {
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
  }
}
@media (max-width: 480px) {
  .livewire-table thead th,
table.table thead th {
    font-size: 0.7rem !important;
    padding: 8px 6px !important;
  }

  .livewire-table tbody td,
table.table tbody td {
    font-size: 0.75rem !important;
    padding: 8px 6px !important;
  }
}
@media (max-width: 767px) {
  input.form-control,
textarea.form-control,
select.form-control,
.form-select,
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=search],
input[type=date] {
    font-size: 16px !important;
  }
}
.select2-container {
  width: 100% !important;
  max-width: 100%;
}

@media (max-width: 575px) {
  .row > .col-md-6:not(.col-sm-6):not(.col-6),
.row > .col-md-4:not(.col-sm-4):not(.col-4),
.row > .col-md-3:not(.col-sm-3):not(.col-3),
.row > .col-lg-6:not(.col-sm-6):not(.col-6),
.row > .col-lg-4:not(.col-sm-4):not(.col-4),
.row > .col-lg-3:not(.col-sm-3):not(.col-3) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 575px) {
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
    margin: 8px auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .modal-content {
    border-radius: 12px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-header {
    padding: 12px 16px !important;
  }

  .modal-title {
    font-size: 1rem !important;
  }

  .modal-body {
    padding: 12px 16px !important;
  }

  .modal-footer {
    padding: 8px 16px !important;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .modal-footer .btn {
    flex: 1;
    min-height: 42px;
    font-size: 0.875rem;
  }
}
@media (max-width: 768px) {
  .btn {
    min-height: 38px;
  }

  .sidebar-btn,
.navbar-toggler,
button[type=button].btn.px-0 {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .width-540 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 575px) {
  .bg-white.rounded-15.shadow-md {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-radius: 12px !important;
    margin-left: 4px;
    margin-right: 4px;
  }

  .d-flex.flex-column.flex-column-fluid.align-items-center.justify-content-center {
    padding: 0.75rem !important;
  }
}
.front-app-logo {
  max-height: 55px;
  max-width: 180px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 767px) {
  .front-app-logo {
    max-height: 42px;
    max-width: 140px;
  }
}
@media (max-width: 480px) {
  .front-app-logo {
    max-height: 36px;
    max-width: 120px;
  }
}

@media (max-width: 991px) {
  .header-btn-grp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  .header-btn-grp .btn {
    min-height: 42px;
    padding: 8px 16px;
  }
}
@media (max-width: 991px) {
  .collapse.navbar-collapse {
    padding: 8px 0;
  }

  .navbar-nav.align-items-center {
    align-items: flex-start !important;
    padding: 0 8px;
  }

  .navbar-nav .nav-link {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
}
@media (max-width: 575px) {
  .alert.alert-warning.d-flex.align-items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
  }
  .alert.alert-warning.d-flex.align-items-center i.fas.fa-exclamation-triangle {
    margin-right: 0 !important;
    margin-bottom: 6px;
  }
}
@media (max-width: 575px) {
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 12px 16px !important;
  }
  .card-header .card-toolbar {
    width: 100%;
  }
  .card-header .card-toolbar .d-flex {
    flex-wrap: wrap;
    gap: 6px;
  }
  .card-header .card-toolbar .btn {
    font-size: 0.8rem;
  }

  .d-flex.justify-content-between.align-items-end.mb-5 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .d-flex.justify-content-between.align-items-end.mb-5 a.btn.btn-outline-primary {
    align-self: flex-start;
  }
}
@media (max-width: 767px) {
  .d-flex.justify-content-between.flex-wrap,
.d-flex.align-items-center.justify-content-between {
    flex-wrap: wrap !important;
  }

  [wire\:model*=search],
input[wire\:model*=filter],
.search-field input[type=text] {
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .fc {
    font-size: 0.75rem !important;
  }
  .fc .fc-toolbar {
    flex-direction: column !important;
    align-items: center;
    gap: 8px;
  }
  .fc .fc-toolbar-title {
    font-size: 1rem !important;
  }
  .fc .fc-button {
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
  }
  .fc .fc-daygrid-event,
.fc .fc-list-event {
    font-size: 0.7rem !important;
  }
}
@media (max-width: 767px) {
  .table-responsive table td,
.table-responsive table th {
    white-space: normal !important;
  }

  .card-title.fw-bolder,
.card-title {
    font-size: 1rem !important;
  }
}
@media (max-width: 767px) {
  .patient-detail-page .patient-detail-tabs-row {
    flex-direction: column;
    gap: 8px;
  }
  .patient-detail-page .patient-detail-tabs-row .patient-detail-diagnose-btn {
    align-self: flex-start;
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .dropdown-menu[aria-labelledby=dropdownMenuButton1],
.custom-dropdown .dropdown-menu {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}
@media (max-width: 575px) {
  .dropdown-menu[aria-labelledby=menuDropDown] {
    width: calc(100vw - 32px) !important;
    max-width: 280px !important;
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .fs-1 {
    font-size: 1.5rem !important;
  }

  .fs-2 {
    font-size: 1.25rem !important;
  }

  .fs-3 {
    font-size: 1.1rem !important;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.1rem;
  }
}
@media (max-width: 575px) {
  .row > .col-md-3,
.row > .col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 400px) {
  .row > .col-md-3,
.row > .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  #toast-container {
    width: 100% !important;
    padding: 0 8px;
    left: 0 !important;
    right: 0 !important;
  }
  #toast-container > .toast {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 4px;
  }
}
@media (max-width: 575px) {
  .image.image-circle.image-lg-small {
    width: 60px !important;
    height: 60px !important;
  }
}
@media (max-width: 575px) {
  .row > .col-md-2.fw-bold,
.row > .col-md-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    font-weight: 600;
  }

  .row > .col-md-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 575px) {
  .billing-card,
.billing-overview-card {
    margin-bottom: 12px;
  }
}
@media (max-width: 575px) {
  .row > .col-md-4.col-lg-3,
.row > .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 400px) {
  .row > .col-md-4.col-lg-3,
.row > .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 575px) {
  #prescriptionMedicineTable {
    font-size: 0.75rem;
  }
  #prescriptionMedicineTable td,
#prescriptionMedicineTable th {
    padding: 6px 4px !important;
  }
  #prescriptionMedicineTable input.form-control {
    font-size: 14px !important;
    padding: 4px !important;
  }
}
@media (max-width: 575px) {
  .pagination {
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
  }

  .pagination .page-link {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  :focus-visible {
    outline: 2px solid #217FF7;
    outline-offset: 2px;
  }
}
@media (max-width: 768px) {
  #table-hospitals table {
    min-width: 800px;
  }
}
@media (max-width: 575px) {
  .start-meeting-btn,
.join-meeting-btn {
    width: 100%;
    margin-bottom: 4px;
  }
}
@media (max-width: 1199px) {
  #sidebar .aside-menu-container__aside-menu .nav-link {
    padding: 12px 16px !important;
  }
}
@media (max-width: 1199px) {
  .dark-mode header.header,
[data-bs-theme=dark] header.header {
    background: #1e1e2d;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
}
@media print {
  #sidebar,
header.header,
.bg-overlay {
    display: none !important;
  }

  .wrapper {
    margin-left: 0 !important;
  }
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media (display-mode: standalone) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  .container-fluid > footer,
.footer-wrapper {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  header.header {
    padding-top: env(safe-area-inset-top, 0px);
  }
}
a,
button,
.btn,
[role=button],
input[type=submit],
input[type=button] {
  -webkit-tap-highlight-color: transparent;
}

html,
.table-responsive,
.aside-menu-container,
.top-navbar {
  -webkit-overflow-scrolling: touch;
}

.sidebar-btn,
.navbar-toggler,
.btn,
header.header {
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid #e4e6ef;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.pwa-install-banner--visible {
  transform: translateY(0);
}
.pwa-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.pwa-install-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  border: 1px solid #f1f3f9;
}
.pwa-install-banner__text {
  flex: 1;
  min-width: 0;
}
.pwa-install-banner__text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e1e2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-install-banner__text span {
  display: block;
  font-size: 0.75rem;
  color: #7e8299;
  line-height: 1.4;
}
.pwa-install-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pwa-install-banner__btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.1s;
}
.pwa-install-banner__btn:active {
  transform: scale(0.96);
}
.pwa-install-banner__btn--primary {
  background: #5e72e4;
  color: #fff;
}
.pwa-install-banner__btn--primary:hover {
  background: #4558d4;
}
.pwa-install-banner__btn--ghost {
  background: #f1f3f9;
  color: #7e8299;
  padding: 8px 10px;
}
.pwa-install-banner__btn--ghost:hover {
  background: #e4e6ef;
}

.pwa-ios-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pwa-ios-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pwa-ios-modal--visible .pwa-ios-modal__backdrop {
  opacity: 1;
}
.pwa-ios-modal__card {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 28px 24px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}
.pwa-ios-modal__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 12px 0 8px;
  color: #1e1e2d;
}
.pwa-ios-modal__card p {
  font-size: 0.875rem;
  color: #7e8299;
  margin-bottom: 16px;
}
.pwa-ios-modal--visible .pwa-ios-modal__card {
  transform: translateY(0);
}
.pwa-ios-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #f1f3f9;
}
.pwa-ios-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f1f3f9;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  color: #7e8299;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pwa-ios-modal__steps {
  text-align: left;
  padding-left: 20px;
  margin-bottom: 16px;
}
.pwa-ios-modal__steps li {
  font-size: 0.875rem;
  color: #3f4254;
  margin-bottom: 8px;
  line-height: 1.5;
}
.pwa-ios-modal__note {
  font-size: 0.8rem !important;
  color: #a1a5b7 !important;
  margin-bottom: 0 !important;
}

.pwa-ios-share-icon {
  display: inline-block;
  background: #007aff;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.75rem;
}

.lwt-table-header {
  flex-wrap: wrap !important;
}

.lwt-search-wrapper {
  flex: 1 1 240px;
  min-width: 0;
}

@media (max-width: 575px) {
  .lwt-table-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .lwt-table-header .lwt-search-wrapper,
.lwt-table-header .lwt-search-wrapper form {
    flex-grow: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
  }
  .lwt-table-header .lwt-search-inner,
.lwt-table-header .width-320 {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
  }
  .lwt-table-header .lwt-table-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
  }
  .lwt-table-header .lwt-table-actions .btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 38px !important;
  }
  .lwt-table-header .lwt-table-actions .btn i {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  #doctors .lwt-table-header {
    flex-wrap: wrap !important;
  }
  #doctors .lwt-table-header .lwt-search-wrapper,
#doctors .lwt-table-header .lwt-search-wrapper form {
    width: 100% !important;
    flex-grow: 1 !important;
  }
  #doctors .lwt-table-header .lwt-search-inner,
#doctors .lwt-table-header .width-320 {
    width: 100% !important;
    max-width: 100% !important;
  }
  #doctors .lwt-table-header .lwt-table-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  #doctors .lwt-table-header .lwt-table-actions > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #doctors .lwt-table-header .lwt-table-actions .btn {
    width: 100% !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  #doctors .lwt-table-header .lwt-table-actions .btn i {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }
  #doctors .lwt-table-header .lwt-table-actions .dropdown {
    display: flex !important;
    flex: 1 1 auto !important;
  }

  [wire\:id]:has(#table-appointments) .lwt-table-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions {
    display: contents !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div {
    display: contents !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div.d-flex.justify-content-end.flex-wrap {
    display: contents !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:first-child,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.flex-wrap.align-items-center.justify-content-end.mt-3 {
    grid-row: 1 !important;
    grid-column: 1/span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    overflow: visible !important;
    /* Block any scrolling */
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 4px !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:first-child > div,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.flex-wrap.align-items-center.justify-content-end.mt-3 > div {
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:first-child > div span,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.flex-wrap.align-items-center.justify-content-end.mt-3 > div span {
    font-size: 11px !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:first-child > div .badge,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.flex-wrap.align-items-center.justify-content-end.mt-3 > div .badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:first-child > div .slot-color-dot,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.flex-wrap.align-items-center.justify-content-end.mt-3 > div .slot-color-dot {
    width: 8px !important;
    height: 8px !important;
    margin-right: 4px !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-search-wrapper {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-search-wrapper form {
    width: 100% !important;
    display: flex !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-search-wrapper .lwt-search-inner,
[wire\:id]:has(#table-appointments) .lwt-table-header .lwt-search-wrapper .width-320 {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center {
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child .btn,
[wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child .btn-icon,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center .btn,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center .btn-icon {
    height: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child .btn i,
[wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child .btn-icon i,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center .btn i,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center .btn-icon i {
    font-size: 0.95rem !important;
    margin: 0 !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child .dropdown,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center .dropdown {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child #apptmentFilterBtn,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center #apptmentFilterBtn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:first-child #apptmentFilterBtn p,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.mt-3.align-items-center #apptmentFilterBtn p {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end {
    grid-row: 3 !important;
    grid-column: 1/span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    margin-top: 4px !important;
    align-items: center !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child > div:first-child,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child > div:last-child,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child .btn,
[wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child input.form-control,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end .btn,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end input.form-control {
    height: 38px !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    width: 100% !important;
  }
  [wire\:id]:has(#table-appointments) .lwt-table-header .lwt-table-actions > div > div:last-child > div:last-child #appointmentDateFilter,
[wire\:id]:has(#table-appointments) .lwt-table-header .d-flex.align-items-center.flex-wrap.justify-content-end #appointmentDateFilter {
    width: 100% !important;
    min-width: 0 !important;
  }

  div[id^=datatable-] .lwt-table-header,
.container-fluid div[id^=datatable-] .lwt-table-header,
div[wire\:key=transactions-wrapper] .lwt-table-header {
    display: flex !important;
    flex-direction: column !important;
    /* Force search and filters onto their own separate rows */
    height: auto !important;
    /* Smash the rigid desktop height box down completely */
    min-height: unset !important;
    max-height: unset !important;
    gap: 4px !important;
    /* Keep Row 1 and Row 2 completely tight */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-search-wrapper,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-search-wrapper,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-search-wrapper {
    width: 100% !important;
    margin-bottom: 4px !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-search-wrapper form,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-search-wrapper form,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-search-wrapper form {
    width: 100% !important;
    display: flex !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-search-wrapper .lwt-search-inner,
div[id^=datatable-] .lwt-table-header .lwt-search-wrapper .width-320,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-search-wrapper .lwt-search-inner,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-search-wrapper .width-320,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-search-wrapper .lwt-search-inner,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-search-wrapper .width-320 {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-search-wrapper input.search-box,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-search-wrapper input.search-box,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-search-wrapper input.search-box {
    height: 38px !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions {
    width: 100% !important;
    margin-top: 0 !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .custom-margin-filter,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .custom-margin-filter,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div .custom-margin-filter {
    flex-grow: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .custom-margin-transaction-filter,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .custom-margin-transaction-filter,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div .custom-margin-transaction-filter {
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .btn,
div[id^=datatable-] .lwt-table-header .lwt-table-actions > div input.form-control,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .btn,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div input.form-control,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div .btn,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div input.form-control {
    height: 38px !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    width: 100% !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionDateFilter,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionDateFilter,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div #transactionDateFilter {
    width: 100% !important;
    min-width: 0 !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn p,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn p,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div #transactionFilterBtn p {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .dropdown,
.container-fluid div[id^=datatable-] .lwt-table-header .lwt-table-actions > div .dropdown,
div[wire\:key=transactions-wrapper] .lwt-table-header .lwt-table-actions > div .dropdown {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
  }

  div[id^=datatable-] .lwt-search-wrapper,
div[id^=datatable-] .lwt-table-actions {
    height: auto !important;
    min-height: unset !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  div[id^=datatable-] .lwt-search-wrapper,
div[wire\:key=transactions-wrapper] .lwt-search-wrapper {
    flex: 0 0 auto !important;
    /* Kill the 240px vertical height basis on columns */
    width: 100% !important;
    /* Keep full fluid width on mobile */
    height: auto !important;
    margin-bottom: 8px !important;
    /* Clean space right above the filter row */
  }

  .d-flex.justify-content-between.mb-5 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 0.75rem !important;
  }
  .d-flex.justify-content-between.mb-5 > form {
    width: 100% !important;
  }
  .d-flex.justify-content-between.mb-5 .width-320 {
    width: 100% !important;
  }

  /* ── Patient Profile details view (≤ 575px) ── */
  .text-end.mt-4.mt-md-0 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .text-end.mt-4.mt-md-0 > a {
    flex: 1 1 auto !important;
    margin-right: 0 !important;
  }
  .text-end.mt-4.mt-md-0 > a .btn,
.text-end.mt-4.mt-md-0 > a button {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }
  .text-end.mt-4.mt-md-0 .btn {
    margin-right: 0 !important;
  }

  .patient-detail-tabs-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .patient-detail-tabs-row ul.patient-detail-tab-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .patient-detail-tabs-row ul.patient-detail-tab-list li.nav-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .patient-detail-tabs-row ul.patient-detail-tab-list li.nav-item .nav-link {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #f1f3f9 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    border: none !important;
  }
  .patient-detail-tabs-row ul.patient-detail-tab-list li.nav-item .nav-link.active {
    background-color: #009ef7 !important;
    color: #ffffff !important;
  }
  .patient-detail-tabs-row #addDiagnoseButton {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    display: block !important;
  }
}
@media (max-width: 767px) {
  #appointmentChartId,
#appointmentDoctorChartId {
    height: 220px !important;
  }
}
@media (max-width: 480px) {
  #appointmentChartId,
#appointmentDoctorChartId {
    height: 185px !important;
  }
}
@media (max-width: 575px) {
  .doctor-period-nav .nav-link,
.nav-link.btn.btn-sm.btn-color-muted.btn-active-light-primary {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.78rem !important;
  }
}
@media (max-width: 767px) {
  .bg-light-primary.rounded-pill span.fs-5,
.bg-light-primary.rounded-pill span.fw-bold {
    max-width: 120px !important;
  }
}
@media (max-width: 480px) {
  .bg-light-primary.rounded-pill .fa-hospital {
    display: none !important;
  }

  .bg-light-primary.rounded-pill span.fs-5,
.bg-light-primary.rounded-pill span.fw-bold {
    max-width: 100px !important;
  }
}
@media (max-width: 575px) {
  .inner-scroll.height-270 {
    max-height: 200px !important;
    overflow-y: auto;
  }

  .dropdown-menu .px-7 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
@media (max-width: 575px) {
  a.btn.px-5.show_patient_card {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}
@media (max-width: 992px) {
  .table thead th {
    white-space: nowrap !important;
  }
}
@media (max-width: 768px) {
  [class*=-action-column] .btn,
.doctor-action-column .btn,
.staff-action-column .btn,
.patient-action-column .btn {
    min-height: 34px;
    min-width: 34px;
    padding: 4px 7px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .nav.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .nav.nav-tabs .nav-item {
    flex-shrink: 0;
  }
  .nav.nav-tabs .nav-link {
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
  }
  .nav.nav-tabs .nav-item.me-7 {
    margin-right: 1rem !important;
  }
}
@media (max-width: 575px) {
  .card-label.fw-bolder.fs-3 {
    font-size: 0.95rem !important;
  }

  h3.card-title span.card-label {
    word-break: break-word;
    white-space: normal;
  }
}
@media (max-width: 575px) {
  .dropdown-menu.py-7 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .card-header-dashbord {
    flex-wrap: wrap !important;
  }

  .card-header-dashbord .dropdown.d-flex {
    margin-right: 0 !important;
  }

  .ms-0.ms-md-2.mb-3 {
    margin-left: 0 !important;
  }

  .badge.rounded-pill,
span.badge {
    white-space: nowrap;
    font-size: 0.7rem !important;
  }
}
@media (max-width: 380px) {
  .nav.align-items-center > li {
    padding-left: 0.1rem !important;
    padding-right: 0.1rem !important;
  }

  button#menuDropDown {
    max-width: 60px !important;
    font-size: 0.75rem !important;
  }

  .bg-light-primary.rounded-pill {
    padding: 3px 6px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card-header-dashbord {
    padding: 12px 16px !important;
  }

  #appointmentChartId,
#appointmentDoctorChartId {
    height: 280px !important;
  }
}
@media (max-width: 575px) {
  .width-320 {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.search-box.form-control {
  font-size: 16px;
}

@media (max-width: 1024px) {
  .table-responsive > table.table {
    min-width: 800px;
  }
}
@media (max-width: 1200px) {
  .table-responsive {
    position: relative;
  }

  table.table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #fff;
    background-clip: padding-box;
  }
}
@media (max-width: 1024px) {
  .table-responsive {
    box-shadow: inset -8px 0 10px -8px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 1200px) {
  table.table tbody td {
    white-space: nowrap;
  }
}
@media (max-width: 992px) {
  table.table tbody td .d-flex.flex-column > span.fs-6 {
    display: none !important;
  }
}
@media (max-width: 768px) {
  table.table tbody td .image.image-circle.image-mini {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
  }
  table.table tbody td .image.image-circle.image-mini img {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 992px) {
  table.table tbody td .badge.bg-primary {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    white-space: nowrap;
  }
}
@media (max-width: 992px) {
  [data-action-column=true],
[class*=-action-column] {
    min-width: 80px;
    white-space: nowrap;
  }
  [data-action-column=true] .btn,
[class*=-action-column] .btn {
    padding: 5px 8px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 0.8rem !important;
  }
}
@media (max-width: 1200px) {
  table.table tbody td[style*=max-width] {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 767px) {
  [wire\:id] .table-responsive {
    overflow-x: visible !important;
    box-shadow: none !important;
  }

  [wire\:id] .table-responsive > table.table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  [wire\:id] .table-responsive > table.table > tbody {
    display: block !important;
    width: 100% !important;
  }

  [wire\:id] .table-responsive > table.table > thead {
    display: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid #e4e6ef !important;
    border-left: none !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    cursor: default !important;
    transition: box-shadow 0.2s ease !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr:hover {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.11) !important;
    background-color: #ffffff !important;
    border-left: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    font-size: 13px !important;
    white-space: normal !important;
    min-height: 46px !important;
    gap: 10px !important;
    color: #3f4254 !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:last-child {
    border-bottom: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 10px;
    color: #a1a5b7;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 100px;
    flex-shrink: 0;
    line-height: 1.4;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
    padding: 14px 16px !important;
    border-bottom: 2px solid #e8eaf0 !important;
    background: linear-gradient(to right, #f8f9fc, #ffffff) !important;
    min-height: 72px !important;
    gap: 12px !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle)::before {
    display: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .image.image-circle.image-mini {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border: 2px solid #e0e3ef !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #181c32 !important;
    line-height: 1.3 !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column span.fs-6 {
    display: block !important;
    font-size: 12px !important;
    color: #7e8299 !important;
    margin-top: 2px !important;
  }

  [wire\:id] .table-responsive > table.table:not(#table-roles) > tbody > tr > td:first-child {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-height: auto !important;
    padding: 2px 8px !important;
    border: none !important;
    border-bottom: none !important;
    background: #eff2f5 !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #b5b5c3 !important;
    gap: 0 !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  [wire\:id] .table-responsive > table.table:not(#table-roles) > tbody > tr > td:first-child::before {
    display: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action],
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) {
    justify-content: center !important;
    flex-wrap: wrap !important;
    background: #f9fafb !important;
    padding: 12px 16px !important;
    border-top: 1px solid #eff2f5 !important;
    border-bottom: none !important;
    gap: 8px !important;
    min-height: 58px !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action]::before,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true])::before {
    display: none !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] [data-action-column=true],
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) [data-action-column=true],
[wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .transaction-action-column,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .transaction-action-column {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .btn:not(.form-check),
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .btn:not(.form-check) {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .btn i,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .btn i {
    font-size: 16px !important;
  }

  [wire\:id] .table-responsive table.table tbody td .badge {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  [wire\:id] .table-responsive table.table tbody td .appointment-status-change {
    max-width: 170px !important;
    flex: 1 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr {
    background: #1e1e2d !important;
    border-color: #2b2b40 !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr:hover {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td {
    color: #cdcdde !important;
    border-bottom-color: #2b2b40 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
    color: #5e6278 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
    background: linear-gradient(to right, #1a1a27, #1e1e2d) !important;
    border-bottom-color: #2b2b40 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
    color: #d1d3e0 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child {
    background: #2b2b40 !important;
    color: #5e6278 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action],
[data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) {
    background: #13131f !important;
    border-top-color: #2b2b40 !important;
  }
}
@media (max-width: 1199px) {
  .wrapper > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  [data-bs-theme=dark] .wrapper > div:first-child {
    background-color: #1e1e2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 1199px) {
  header.header > button.sidebar-btn {
    flex-shrink: 0 !important;
    order: -1;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 480px) {
  #impersonation-warning-banner .lh-sm {
    display: none !important;
  }

  #impersonation-warning-banner {
    padding: 4px 6px !important;
    gap: 0 !important;
  }
}
@media (max-width: 360px) {
  #impersonation-warning-banner {
    display: none !important;
  }
}
@media (max-width: 1199px) {
  body.collapsed-menu {
    overflow: hidden !important;
  }
}
@media (max-width: 1199px) {
  .aside-menu-container {
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1009 !important;
  }

  .aside-menu-container .sidebar-scrolling {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}
.patient-detail-tab-list {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.patient-detail-tab-list::-webkit-scrollbar {
  display: none;
}

.patient-detail-diagnose-btn {
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  .edit-soap-note-btn,
.delete-soap-note-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
}
@media (max-width: 1199px) {
  body.dark-mode .wrapper > div:first-child,
.dark-theme .wrapper > div:first-child {
    background-color: #1e1e2d;
  }
}
@media (max-width: 1199px) {
  header.header > ul.nav.align-items-center {
    flex-wrap: nowrap !important;
  }

  header.header {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}
@media (max-width: 767px) {
  /* C1. Kill horizontal scroll — cards don't need it */
  [wire\:id] .table-responsive {
    overflow-x: visible !important;
    box-shadow: none !important;
  }

  /* C2. Reset the 800 px min-width (B1) so cards fill the column */
  [wire\:id] .table-responsive > table.table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  /* C3. tbody must also be block so its children stack vertically */
  [wire\:id] .table-responsive > table.table > tbody {
    display: block !important;
    width: 100% !important;
  }

  /* C4. Hide the desktop column header row */
  [wire\:id] .table-responsive > table.table > thead {
    display: none !important;
  }

  /* ── C5. CARD SHELL: each <tr> ─────────────────────────────────── */
  [wire\:id] .table-responsive > table.table > tbody > tr {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-left: none !important;
    /* prevent hover rule from adding left border */
    margin-bottom: 16px !important;
    padding: 0 !important;
    overflow: visible !important;
    cursor: default !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    border-left: none !important;
    border-color: rgba(0, 150, 255, 0.15) !important;
  }

  /* ── C6. CARD ROW: each <td> as labelled flex row ────────────────
     Overrides B4 (nowrap), B6 (avatar sizing), and d-none/d-sm-table-cell
     so ALL columns appear in the card view. */
  [wire\:id] .table-responsive > table.table > tbody > tr > td {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    width: 100% !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    font-size: 13px !important;
    white-space: normal !important;
    min-height: 46px !important;
    gap: 10px !important;
    color: #3f4254 !important;
    text-align: start !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:last-child {
    border-bottom: none !important;
  }

  /* C7. Column label prefix via data-label attribute */
  [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 10px;
    color: #a1a5b7;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: center;
  }

  /* C7-A — Ensure ::before is suppressed on special cells */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child::before,
[wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action]::before,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle)::before {
    display: none !important;
    content: none !important;
  }

  /* ── C8. CARD HEADER: Name/Avatar cell ─────────────────────────
     Detected via the avatar image; shown as a prominent header strip. */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
    padding: 14px 16px !important;
    border-bottom: 2px solid #e8eaf0 !important;
    background: linear-gradient(to right, #f8f9fc, #ffffff) !important;
    min-height: 72px !important;
    gap: 12px !important;
  }

  /* No label for the name/avatar cell — the card header speaks for itself */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle)::before {
    display: none !important;
  }

  /* C9. Avatar sizing: slightly larger in card header, guaranteed perfect circle */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .image.image-circle.image-mini {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border: 2px solid #e0e3ef !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-block !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .image.image-circle.image-mini img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }

  /* C10. Patient name typography in card header */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #181c32 !important;
    line-height: 1.3 !important;
  }

  /* C11. Email sub-line: re-show (overrides B5 which hides it below 992 px) */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column span.fs-6 {
    display: block !important;
    font-size: 12px !important;
    color: #7e8299 !important;
    margin-top: 2px !important;
  }

  /* ── C12. SR# COLUMN: compact badge, top-right of card ──────────*/
  [wire\:id] .table-responsive > table.table:not(#table-roles) > tbody > tr > td:first-child {
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 2px 10px !important;
    border: none !important;
    border-bottom: none !important;
    background: #eff2f5 !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #b5b5c3 !important;
    gap: 0 !important;
    z-index: 2 !important;
    grid-column: unset !important;
  }

  [wire\:id] .table-responsive > table.table:not(#table-roles) > tbody > tr > td:first-child::before {
    display: none !important;
  }

  /* ── C13. ACTION COLUMN: touch-friendly button row ──────────────────*/
  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action],
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f9fafb !important;
    padding: 12px 16px !important;
    border-top: 1px solid #eff2f5 !important;
    border-bottom: none !important;
    gap: 8px !important;
    min-height: unset !important;
    height: auto !important;
    grid-template-columns: unset !important;
  }

  /* No label for action column */
  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action]::before,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true])::before {
    display: none !important;
  }

  /* C14. Action column inner wrapper: universal — covers named and unnamed wrapper divs */
  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] > *,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) > * {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
  }

  /* C15. Action buttons — 44 px touch target (WCAG 2.1 minimum)
     Note: font-size: 0 hides text labels; icons are restored below.
     The form-check (toggle switch) is excluded to keep its visual. */
  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .btn:not(.form-check),
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .btn:not(.form-check) {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    /* hide text residue; icon restored below */
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .btn *,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .btn * {
    font-size: 16px !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action] .btn *,
[wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) .btn * {
    font-size: 1.25rem !important;
  }

  /* C6-A — Avatar header: override grid back to flex */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
    display: flex !important;
    grid-template-columns: unset;
    align-items: center;
  }

  /* C6-C — Action row: flex with wrap, auto height */
  /* C6-E — Toggle alignment fix: left-align inside grid cells */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:not(:first-child):not([data-column-type=action]):not(:has(.image-circle)) .form-check {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* C6-G — Collapse empty data cells: remove excess height when
     the value slot contains nothing (Specialization = N/A / empty) */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:not(:first-child):not([data-column-type=action]):not(:has(.image-circle)):empty {
    min-height: unset !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:not(:first-child):not([data-column-type=action]):not(:has(.image-circle)) > *:empty {
    min-height: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* C6-F — Rounded corners on first/last td to replace tr overflow:hidden */
  [wire\:id] .table-responsive > table.table > tbody > tr > td:nth-child(2) {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  [wire\:id] .table-responsive > table.table > tbody > tr > td:last-child {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }

  /* C16. Badges: prevent wrapping in card rows */
  [wire\:id] .table-responsive table.table tbody td .badge {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* C17. Status select: constrained width so it fits in a card row */
  [wire\:id] .table-responsive table.table tbody td .appointment-status-change {
    max-width: 170px !important;
    flex: 1 !important;
  }

  /* ── C18. DARK MODE ─────────────────────────────────────────────── */
  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr {
    background: #1e1e2d !important;
    border-color: #2b2b40 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(0, 150, 255, 0.25) !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td {
    color: #cdcdde !important;
    border-bottom-color: #2b2b40 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
    color: #5e6278 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
    background: linear-gradient(to right, #1a1a27, #1e1e2d) !important;
    border-bottom-color: #2b2b40 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
    color: #d1d3e0 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child {
    background: #2b2b40 !important;
    color: #5e6278 !important;
  }

  [data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type=action],
[data-bs-theme=dark] [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column=true]) {
    background: #13131f !important;
    border-top-color: #2b2b40 !important;
  }

  /* Reset padding, centering margins, and alignments for toggles and badges on mobile card views for all tables */
  /* Reset padding, centering margins, and alignments for toggles and badges on mobile card views for all tables */
  [wire\:id] .table-responsive #table-staff-table tbody td,
[wire\:id] .table-responsive #table-doctors tbody td,
[wire\:id] .table-responsive #table-patients tbody td,
[wire\:id] .table-responsive #table-appointments tbody td,
[wire\:id] .table-responsive #table-transactions tbody td,
[wire\:id] .table-responsive #table-hospitals tbody td,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td,
[wire\:id] .table-responsive #table-super_admin_patients tbody td,
[wire\:id] .table-responsive #table-categories tbody td,
[wire\:id] .table-responsive #table-live-consultations tbody td,
[wire\:id] .table-responsive #table-holidays tbody td,
[wire\:id] .table-responsive #table-enquiries tbody td,
[wire\:id] .table-responsive #table-medicines tbody td {
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: start !important;
  }

  [wire\:id] .table-responsive #table-staff-table tbody td .form-check,
[wire\:id] .table-responsive #table-doctors tbody td .form-check,
[wire\:id] .table-responsive #table-patients tbody td .form-check,
[wire\:id] .table-responsive #table-appointments tbody td .form-check,
[wire\:id] .table-responsive #table-transactions tbody td .form-check,
[wire\:id] .table-responsive #table-hospitals tbody td .form-check,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td .form-check,
[wire\:id] .table-responsive #table-super_admin_patients tbody td .form-check,
[wire\:id] .table-responsive #table-categories tbody td .form-check,
[wire\:id] .table-responsive #table-live-consultations tbody td .form-check,
[wire\:id] .table-responsive #table-holidays tbody td .form-check,
[wire\:id] .table-responsive #table-enquiries tbody td .form-check,
[wire\:id] .table-responsive #table-medicines tbody td .form-check {
    margin: 0 !important;
    margin-left: 30px !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }

  [wire\:id] .table-responsive #table-staff-table tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-doctors tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-patients tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-appointments tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-transactions tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-hospitals tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-super_admin_patients tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-categories tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-live-consultations tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-holidays tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-enquiries tbody td .d-flex.justify-content-center,
[wire\:id] .table-responsive #table-medicines tbody td .d-flex.justify-content-center {
    justify-content: flex-start !important;
  }

  [wire\:id] .table-responsive #table-staff-table tbody td > *,
[wire\:id] .table-responsive #table-doctors tbody td > *,
[wire\:id] .table-responsive #table-patients tbody td > *,
[wire\:id] .table-responsive #table-appointments tbody td > *,
[wire\:id] .table-responsive #table-transactions tbody td > *,
[wire\:id] .table-responsive #table-hospitals tbody td > *,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td > *,
[wire\:id] .table-responsive #table-super_admin_patients tbody td > *,
[wire\:id] .table-responsive #table-categories tbody td > *,
[wire\:id] .table-responsive #table-live-consultations tbody td > *,
[wire\:id] .table-responsive #table-holidays tbody td > *,
[wire\:id] .table-responsive #table-enquiries tbody td > *,
[wire\:id] .table-responsive #table-medicines tbody td > * {
    justify-self: start !important;
  }

  /* Force action buttons to be centered and override any start alignment */
  [wire\:id] .table-responsive #table-staff-table tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-doctors tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-patients tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-appointments tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-transactions tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-hospitals tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-super_admin_patients tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-categories tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-live-consultations tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-holidays tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-enquiries tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-medicines tbody td[data-column-type=action] > *,
[wire\:id] .table-responsive #table-staff-table tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-doctors tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-patients tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-appointments tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-transactions tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-hospitals tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-super_admin_doctors tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-super_admin_patients tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-categories tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-live-consultations tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-holidays tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-enquiries tbody td:has([data-action-column=true]) > *,
[wire\:id] .table-responsive #table-medicines tbody td:has([data-action-column=true]) > * {
    justify-self: center !important;
    justify-content: center !important;
  }

  /* ── Sub-tables Card Layout (Patient Reports & Documents) ── */
  #patientReportsCard,
#patientDocumentsTabContainer {
    /* Fix for inner alignment containers or badges forced by desktop layouts */
  }
  #patientReportsCard .table-responsive,
#patientDocumentsTabContainer .table-responsive {
    overflow-x: visible !important;
    box-shadow: none !important;
  }
  #patientReportsCard table.table,
#patientDocumentsTabContainer table.table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  #patientReportsCard thead,
#patientDocumentsTabContainer thead {
    display: none !important;
    /* Hide flat desktop header rows */
  }
  #patientReportsCard tbody,
#patientReportsCard tr,
#patientDocumentsTabContainer tbody,
#patientDocumentsTabContainer tr {
    display: block !important;
    width: 100% !important;
  }
  #patientReportsCard tr,
#patientDocumentsTabContainer tr {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  }
  #patientReportsCard table.table tbody tr td,
#patientDocumentsTabContainer table.table tbody tr td {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    align-items: center !important;
    text-align: start !important;
    /* Force all content to align neatly to the left */
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    font-size: 13px !important;
    white-space: normal !important;
    /* Force text wrapping */
    min-width: unset !important;
    /* Strip hardcoded desktop column classes */
  }
  #patientReportsCard tr > td:last-child,
#patientDocumentsTabContainer tr > td:last-child {
    border-bottom: none !important;
  }
  #patientReportsCard table.table tbody tr td > .text-center,
#patientReportsCard table.table tbody tr td > .d-flex,
#patientDocumentsTabContainer table.table tbody tr td > .text-center,
#patientDocumentsTabContainer table.table tbody tr td > .d-flex {
    justify-content: flex-start !important;
    text-align: start !important;
  }

  #patientDocumentsTabContainer table.table tbody tr td > * {
    max-width: 100% !important;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    display: inline-block !important;
  }

  #patientReportsCard tbody tr td::before,
#patientDocumentsTabContainer tbody tr td::before {
    display: block !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    color: #a1a5b7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }

  #patientReportsCard table.table tbody tr td {
    /* Force the Game cell text and its inner badge to handle layout fluidly */
    /* Force Number 1 and "times played" to sit flat on a single row */
  }
  #patientReportsCard table.table tbody tr td:nth-child(2) {
    display: block !important;
    /* Temporarily drop grid for this cell so elements float inline */
    padding-left: 136px !important;
    /* Preserve the 120px label gap space manually */
    position: relative;
  }
  #patientReportsCard table.table tbody tr td:nth-child(2)::before {
    position: absolute;
    left: 16px;
    top: 12px;
  }
  #patientReportsCard table.table tbody tr td:nth-child(2) .badge {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    white-space: nowrap !important;
  }
  #patientReportsCard table.table tbody tr td:nth-child(3) {
    /* Force any inner flex blocks to stay horizontal */
  }
  #patientReportsCard table.table tbody tr td:nth-child(3) span,
#patientReportsCard table.table tbody tr td:nth-child(3) div,
#patientReportsCard table.table tbody tr td:nth-child(3) b,
#patientReportsCard table.table tbody tr td:nth-child(3) i {
    display: inline !important;
    white-space: nowrap !important;
  }
  #patientReportsCard table.table tbody tr td:nth-child(3) > * {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #patientReportsCard tbody tr td:nth-child(1)::before {
    content: "Patient" !important;
  }
  #patientReportsCard tbody tr td:nth-child(2)::before {
    content: "Game" !important;
  }
  #patientReportsCard tbody tr td:nth-child(3)::before {
    content: "Counter" !important;
  }
  #patientReportsCard tbody tr td:nth-child(4)::before {
    content: "History" !important;
  }

  #patientDocumentsTabContainer tbody tr td:nth-child(1)::before {
    content: "File Name" !important;
  }
  #patientDocumentsTabContainer tbody tr td:nth-child(2)::before {
    content: "Size" !important;
  }
  #patientDocumentsTabContainer tbody tr td:nth-child(3)::before {
    content: "Uploaded On" !important;
  }
  #patientDocumentsTabContainer tbody tr td:nth-child(4)::before {
    content: "Actions" !important;
  }

  #patientReportsCard tbody tr td:last-child::before,
#patientDocumentsTabContainer tbody tr td:last-child::before {
    display: none !important;
    content: none !important;
    /* Completely kill the left-side label columns */
  }

  #patientReportsCard tbody tr td:last-child {
    display: block !important;
    /* Kill grid rules entirely */
    text-align: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: #f9fafb !important;
    /* Light accent background tint for the footer tray */
    border-top: 1px solid #eff2f5 !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    margin-top: 4px !important;
  }
  #patientReportsCard tbody tr td:last-child a,
#patientReportsCard tbody tr td:last-child button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 140px !important;
    justify-content: center !important;
  }

  #patientDocumentsTabContainer tbody tr td:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    /* Give excellent finger-tapping space */
    width: 100% !important;
    background: #f9fafb !important;
    /* Light accent background tint for the footer tray */
    padding: 12px 16px !important;
    border-top: 1px solid #eff2f5 !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    margin-top: 4px !important;
    /* Neutralize any vertical-forcing code elements or inner link blocks */
  }
  #patientDocumentsTabContainer tbody tr td:last-child a,
#patientDocumentsTabContainer tbody tr td:last-child button,
#patientDocumentsTabContainer tbody tr td:last-child form,
#patientDocumentsTabContainer tbody tr td:last-child div {
    display: inline-flex !important;
    flex-direction: row !important;
    margin: 0 !important;
  }
  #patientDocumentsTabContainer tbody tr td:last-child br {
    display: none !important;
    /* Absolute insurance against raw line-breaks */
  }
}
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: visible !important;
    box-shadow: none !important;
    /* TARGET EXCLUSION FILTER: Capture only fresh, non-configured tables to ensure safety of custom modules */
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    /* Generate mobile category indicators dynamically using the JS dataset */
    /* Suppress inline label columns on checkboxes, blank containers, or action buttons */
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) thead {
    display: none !important;
    /* Hide desktop horizontal header rows completely */
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tbody,
.table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr {
    display: block !important;
    width: 100% !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 16px !important;
    padding: 8px 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    /* Symmetrical left column metric label, fluid right data asset track */
    align-items: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    font-size: 13px !important;
    text-align: start !important;
    white-space: normal !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td:last-child {
    border-bottom: none !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td::before {
    content: attr(data-label) !important;
    /* Pulls active header string dynamically from injected attribute */
    display: block !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    color: #a1a5b7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td:first-child::before,
.table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td[data-column-type=action]::before,
.table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td:has(.form-check)::before,
.table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td:has(.action-btn)::before,
.table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td:empty::before {
    display: none !important;
    content: none !important;
  }
}
@media (max-width: 360px) {
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td {
    display: flex !important;
    flex-direction: column !important;
    /* Stack label on top, text below on tiny viewports */
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 8px 16px !important;
  }
  .table-responsive table.table:not([id*=table-staff]):not([id*=table-doctors]):not([id*=table-patients]):not([id*=table-appointments]):not([id*=table-transactions]):not([id*=table-super_admin_doctors]):not([id*=table-super_admin_patients]) tr > td::before {
    margin-bottom: 2px !important;
  }
}
@media (max-width: 767px) {
  .table-responsive table.table.clinical-form-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .table-responsive table.table.clinical-form-table tr > td input:not([type=checkbox]):not([type=radio]),
.table-responsive table.table.clinical-form-table tr > td select,
.table-responsive table.table.clinical-form-table tr > td textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
  .table-responsive table.table.clinical-form-table tr > td .yn-group, .table-responsive table.table.clinical-form-table tr > td .radio-group-box, .table-responsive table.table.clinical-form-table tr > td .d-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .table-responsive table.table.clinical-form-table tr > td:has(.form-check)::before {
    display: block !important;
    content: attr(data-label) !important;
  }
  .table-responsive table.table.clinical-form-table tr > td[colspan] {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding-left: 15px !important;
  }
  .table-responsive table.table.clinical-form-table tr > td[colspan]::before {
    display: none !important;
  }
  .table-responsive table.table.clinical-form-table tr.table-info td[colspan], .table-responsive table.table.clinical-form-table tr.table-warning td[colspan] {
    background-color: transparent !important;
  }
  .table-responsive table.table.clinical-form-table tr.table-info {
    background-color: #e2f0fd !important;
  }
  .table-responsive table.table.clinical-form-table tr.table-warning {
    background-color: #fff3cd !important;
  }

  /* Ensure the NAME label is visible for the roles table since it has no SR# column */
  .table-responsive table#table-roles tr > td:first-child::before {
    display: block !important;
    content: attr(data-label) !important;
  }

  /* Completely hide the Rappasoft Reorder drag-handle column on mobile so it doesn't take up the first slot */
  .table-responsive table.table > tbody > tr > td[x-show=currentlyReorderingStatus],
.table-responsive table.table > tbody > tr > td[wire\:key*=-reorder-] {
    display: none !important;
  }
}
.time-slot {
  border-radius: 30px;
  margin-bottom: 10px;
  margin-right: 1rem;
  height: 39px;
  width: 170px;
  box-shadow: 0 2px 4px -2px #79e79d;
  background: #47cf73;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time-slot:hover {
  background-color: #3596e8 !important;
  cursor: pointer;
  color: #fff;
}

.h-300px {
  height: 300px;
}

.bookedSlot {
  pointer-events: none;
  color: white;
  background: #df4f4f !important;
  box-shadow: 0 2px 4px -2px #e87c7c;
}

.activeSlot {
  background-color: #3596e8 !important;
  cursor: pointer;
  color: #fff;
}

.iti {
  display: block !important;
  width: 100%;
}

.appointment-circle .badge-circle {
  border-radius: 50%;
  padding: 0;
  min-width: unset;
  width: 12px !important;
  height: 12px !important;
}

.w-150px {
  width: 150px;
}

.swal-modal .swal-text {
  text-align: center !important;
}

.form-control[readOnly] {
  background-color: #e9ecef !important;
}

.ribbon {
  position: relative;
}

.ribbon .ribbon-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  background-color: #009ef7;
  box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  top: 50%;
  left: 70%;
  transform: translateX(-5px) translateY(-50%);
}

.ribbon-vertical .ribbon-label {
  padding: 5px 10px;
  min-width: 36px;
  min-height: 46px;
  text-align: center;
}

.ribbon.ribbon-top .ribbon-label {
  top: 0;
  transform: translateX(-15px) translateY(-4px);
  border-bottom-right-radius: 0.475rem;
  border-bottom-left-radius: 0.475rem;
}

.rating-input {
  position: absolute !important;
  left: -9999px !important;
}

.rating-input[disabled] {
  display: none;
}

.rating-label > i {
  line-height: 1;
  color: #b5b5c3;
}

.rating-label > .svg-icon {
  line-height: 1;
}

.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

label.rating-label {
  cursor: pointer;
}

div.rating-label.checked > i,
label.rating-label > i {
  color: #b5b5c3;
}

div.rating-label.checked > .svg-icon svg [fill]:not(.permanent):not(g),
label.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #ffc107ff;
}

div.rating-label.checked > .svg-icon svg:hover [fill]:not(.permanent):not(g),
label.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.rating-input:checked ~ .rating-label > i {
  color: #b5b5c3;
}

.rating-input:checked ~ .rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

.rating-input:checked ~ .rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.rating:hover label.rating-label > i {
  color: #ffc107ff;
}

.rating:hover label.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #ffc107ff;
}

.rating:hover label.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

label.rating-label:hover ~ .rating-label > i {
  color: #b5b5c3;
}

label.rating-label:hover ~ .rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

label.rating-label:hover ~ .rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.avg-review-star-div .review-star {
  color: #ffc107ff;
  font-size: 15px;
}
.avg-review-star-div .review-count {
  color: #ced4daff;
}

.review-star-div .review-star {
  color: #ffc107ff;
  font-size: 25px;
}
.review-star-div .review-count {
  color: #ced4daff;
}

.bg-status-canceled {
  background-color: #f1416c !important;
}

.bg-status-booked {
  background-color: #399ef7 !important;
}

.bg-status-checkIn {
  background-color: #50cd89 !important;
}

.bg-status-checkOut {
  background-color: #fac702 !important;
}

body {
  overflow-x: hidden;
}

.sidebar-app-logo {
  max-height: 50px;
  max-width: 120px;
}

.card-logo-height {
  height: 20px !important;
}

.pe-25 {
  padding-right: 7rem !important;
}

.prescription-app-logo {
  max-height: 80px;
  max-width: 140px;
}

@media (max-width: 320px) {
  .problem-btn {
    width: 65px !important;
  }
}
@media (max-width: 480px) {
  #toast-container > .toast {
    width: 310px !important;
    min-width: 310px !important;
  }
}
@media (max-width: 320px) {
  #toast-container > .toast {
    width: 270px !important;
    min-width: 270px !important;
  }
}

@media (max-width: 321px) {
  .width-320 {
    width: 290px !important;
  }
}

@media (max-width: 1024px) {
  .custom-appointment-status {
    display: none !important;
  }
}

.min-w-input {
  min-width: 1.563em !important;
}

.checkbox-content {
  width: 85px;
}

@media (max-width: 345px) {
  .flex-xs-column {
    flex-direction: column !important;
  }
}

.extra-margin {
  margin-top: 21px !important;
}

.purchase-tax {
  min-width: 42px !important;
}

.fs-12 {
  font-size: 12px;
}

.fs-15 {
  font-size: 15px;
}

.flex-1 {
  flex: 1;
}

.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.text-primary {
  color: #ff8e4b !important;
}

.patient_unique_id,
.patient_unique_id_span {
  color: #ff8e4b;
}

.card {
  overflow: hidden;
  border: none;
  background-color: transparent;
}
.card .smart-card-header {
  background-color: #161e54;
  padding: 14px 25px;
}
.card .smart-card-header .logo {
  width: auto;
  min-width: 40px;
  height: 40px;
}
.card .card-body {
  padding: 20px 25px;
}
.card .card-body .card-img {
  width: 110px;
  min-width: 110px;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .card .card-body .card-img {
    width: 100%;
    text-align: center;
  }
}
.card .card-body .patient-desc tr td {
  height: 20px;
  padding: 4px 0;
  font-size: 15px;
  color: #5a5a5a;
}
.card .card-body .qr-code {
  width: 80px;
  height: 80px;
}
@media (max-width: 768px) {
  .card .card-body .qr-main-div {
    width: 60% !important;
    text-align: center;
  }
}
@media (max-width: 425px) {
  .card .card-body .qr-main-div {
    width: 70% !important;
    text-align: center;
  }
}
@media (max-width: 340px) {
  .card .card-body .qr-main-div {
    width: 80% !important;
    text-align: center;
  }
}
.card .card-body .address-text {
  font-size: 15px;
  color: #5a5a5a;
}
.card .card-body .signature-text {
  color: #909090;
}

.display_show {
  display: none;
}

.color-black {
  color: black !important;
}

.color-white {
  color: white !important;
}

/* Responsive: use max-width so it doesn't overflow on mobile */
.smart-card-tem-body {
  width: 100%;
  max-width: 600px;
  overflow-x: auto;
}

.patient-modal-content {
  background-color: transparent !important;
}

.patient-smart-card-body {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.patient-smart-card-ser-detail {
  color: white !important;
}

/* Responsive: remove cascading hardcoded margin-left hacks */
@media (max-width: 500px) {
  .add-slot {
    flex-direction: column;
    margin-left: 0 !important;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 575px) {
  .checkbox-content {
    margin-top: 25px;
  }
}

@media (max-width: 500px) {
  .checkbox-content {
    margin-top: 0px;
  }
}

.admin-dashbord-user-card-header {
  background-color: #e0e3ff;
  color: #6571ff;
  padding: 15px 0px 40px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.admin-dashbord-user-card-body {
  background-color: white;
  position: relative;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media (max-width: 1800px) {
  .admin-dashbord-user-card-body {
    flex-direction: column;
  }
}
@media (max-width: 1024px) {
  .admin-dashbord-user-card-body {
    flex-direction: row;
  }
}

.admin-user-card-img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50%;
  border: 4px solid white;
  position: relative;
  top: -40px;
}

.dashboard-vizit {
  margin-left: 100px;
}

.admin-user-data {
  margin-top: -25px;
}
@media (max-width: 1040px) {
  .admin-user-data {
    margin-top: 10px;
  }
}

.admin-dashbord-earning-card-header {
  padding: 15px 0px 15px 15px;
  background-color: white !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.admin-dashbord-earning-card-body {
  height: 60px;
  background-color: white;
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.admin-wiget-appointment-card1,
.admin-wiget-appointment-card2,
.admin-wiget-appointment-card3 {
  background-color: white;
}

@media (max-width: 1440px) {
  .admin-card-icon {
    font-size: 20px !important;
  }
}
@media (max-width: 1024px) {
  .admin-card-icon {
    font-size: 25px !important;
  }
}

.admin-radial-bar {
  margin-right: 50px;
  margin-left: auto;
  width: 80px;
  height: 80px;
  background-color: #cccccc;
  border-radius: 50%;
}

.admin-radial-bar__mask {
  clip: rect(0px, 80px, 80px, 40px);
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
}

.admin-radial-bar__fill {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  border-radius: 50%;
  clip: rect(0px, 40px, 80px, 0px);
  background-color: #6571ff;
  width: 80px;
  height: 80px;
  position: absolute;
}

.admin-radial-bar__inset {
  width: 70px;
  height: 70px;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
  background-color: #fbfbfb;
  border-radius: 50%;
  display: table-cell;
}

.admin-radial-bar__percent {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #627ce8;
  font-size: 22px;
}

.admin-patient-widget-icon {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
}
@media (max-width: 1440px) {
  .admin-patient-widget-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}
@media (max-width: 1024px) {
  .admin-patient-widget-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}

.blood_group {
  width: 100px;
}

.dashbord-patient-card-header {
  background-color: #e0e3ff;
  color: #6571ff;
  padding: 15px 0px 40px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.dashbord-patient-card-body {
  background-color: white;
  position: relative;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.patient-card-img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50%;
  border: 4px solid white;
  position: relative;
  top: -40px;
}

.dashbord-doctor-card-header {
  background-color: #e0e3ff;
  color: #6571ff;
  padding: 15px 0px 40px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.dashbord-doctor-card-body {
  background-color: white;
  position: relative;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media (max-width: 1400px) {
  .dashbord-doctor-card-body {
    flex-direction: column;
    float: start;
  }
}

.doctor-card-img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50%;
  border: 4px solid white;
  position: relative;
  top: -40px;
}

.dashboard-vizit {
  margin-left: 100px;
}

.card-header-dashbord {
  padding: 0px !important;
}

.patient-dashbord-earning-card-header {
  padding: 17px 0px 0px 17px;
  background-color: white !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.patient-dashbord-earning-card-body {
  height: 60px;
  background-color: white;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.patient-wiget-appointment-card1,
.patient-wiget-appointment-card2,
.patient-wiget-appointment-card3 {
  background-color: white;
}

/* Responsive: max-width instead of fixed width */
.dashboard-card {
  width: 100% !important;
  max-width: 345px;
}

.patient-data {
  margin-top: -40px;
}

.doctor-data {
  margin-top: -40px;
}

/* Responsive: fluid width, drop fixed pixel values */
.dashbord-doctor-card {
  border-radius: 10px;
  width: 100% !important;
}
@media (max-width: 425px) {
  .dashbord-doctor-card {
    margin-bottom: 16px;
  }
}

.doctor-dashbord-earning-card-header {
  padding: 15px 0px 15px 15px;
  background-color: white !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.doctor-dashbord-earning-card-body {
  height: 60px;
  background-color: white;
  padding: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media (max-width: 768px) {
  .doctor-dashbord-earning-card-body {
    height: 140px;
  }
}
@media (max-width: 1024px) {
  .doctor-dashbord-earning-card-body {
    height: 140px;
  }
}
@media (max-width: 1400px) {
  .doctor-dashbord-earning-card-body {
    height: 100px !important;
  }
}

.doctor-dashbord-earning-card {
  border-radius: 10px;
}

.doctor-wiget-appointment-card1,
.doctor-wiget-appointment-card2,
.doctor-wiget-appointment-card3 {
  background-color: white;
}

@media (max-width: 1440px) {
  .card-icon {
    font-size: 20px !important;
  }
}
@media (max-width: 1024px) {
  .card-icon {
    font-size: 25px !important;
  }
}

.patient-radial-bar {
  margin-right: 40px;
  margin-left: auto;
  width: 80px;
  height: 80px;
  background-color: #cccccc;
  border-radius: 50%;
}

.doctor-radial-bar {
  margin-right: 40px;
  margin-left: auto;
  width: 80px;
  height: 80px;
  background-color: #cccccc;
  border-radius: 50%;
}

.patient-radial-bar__mask,
.doctor-radial-bar__mask {
  clip: rect(0px, 80px, 80px, 40px);
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
}

.patient-radial-bar__fill {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  border-radius: 50%;
  clip: rect(0px, 40px, 80px, 0px);
  background-color: #6571ff;
  width: 80px;
  height: 80px;
  position: absolute;
}

.doctor-radial-bar__fill {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  border-radius: 50%;
  clip: rect(0px, 40px, 80px, 0px);
  background-color: #6571ff;
  width: 80px;
  height: 80px;
  position: absolute;
}

.patient-radial-bar__inset,
.doctor-radial-bar__inset {
  width: 70px;
  height: 70px;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
  background-color: #fbfbfb;
  border-radius: 50%;
  display: table-cell;
}

.patient-radial-bar__percent,
.doctor-radial-bar__percent {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #627ce8;
  font-size: 22px;
}

.patient-widget-icon,
.doctor-widget-icon {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
}
@media (max-width: 1440px) {
  .patient-widget-icon,
.doctor-widget-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}
@media (max-width: 1024px) {
  .patient-widget-icon,
.doctor-widget-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}

.patient_unique_id {
  width: 133px;
}
@media (max-width: 768px) {
  .patient_unique_id {
    width: 100% !important;
  }
}

.card-main-div {
  width: 75% !important;
}
@media (max-width: 992px) {
  .card-main-div {
    width: 100% !important;
  }
}

@media (max-width: 1400px) {
  .custom-margin-transaction-filter {
    margin-top: 10px !important;
  }

  .custom-margin-filter {
    margin-right: 0px !important;
  }
}
.custom-margin-filter {
  margin-right: 10px !important;
}

/* Clickable table row hover effect */
.clickable-table-row {
  cursor: pointer !important;
  transition: all 0.3s ease;
  position: relative;
}

/* Override Bootstrap table variables and styles - Force background on row */
.clickable-table-row:hover {
  --bs-table-accent-bg: #f8f9fa !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
  border-left: 3px solid #5e72e4 !important;
}

/* Override Bootstrap's box-shadow inset trick on td elements */
.clickable-table-row:hover > *,
.clickable-table-row:hover td,
table tbody tr.clickable-table-row:hover > *,
table tbody tr.clickable-table-row:hover td {
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px transparent !important;
  color: #32325d !important;
}

/* Dark mode support */
[data-bs-theme=dark] .clickable-table-row:hover,
.dark-mode .clickable-table-row:hover {
  --bs-table-accent-bg: #2d3748 !important;
  background-color: #2d3748 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border-left-color: #5e72e4 !important;
}

[data-bs-theme=dark] .clickable-table-row:hover > *,
[data-bs-theme=dark] .clickable-table-row:hover td,
[data-bs-theme=dark] table tbody tr.clickable-table-row:hover > *,
[data-bs-theme=dark] table tbody tr.clickable-table-row:hover td,
.dark-mode .clickable-table-row:hover > *,
.dark-mode .clickable-table-row:hover td,
.dark-mode table tbody tr.clickable-table-row:hover > *,
.dark-mode table tbody tr.clickable-table-row:hover td {
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px transparent !important;
  color: #e9ecef !important;
}