/* Table fixed layout styles */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.table-fixed th:nth-child(1),
.table-fixed td:nth-child(1) {
  width: 20%;
}

.table-fixed th:nth-child(2),
.table-fixed td:nth-child(2) {
  width: 20%;
}

.table-fixed th:nth-child(3),
.table-fixed td:nth-child(3) {
  width: 20%;
}

.table-fixed th:nth-child(4),
.table-fixed td:nth-child(4) {
  width: 25%;
}

.table-fixed th:nth-child(5),
.table-fixed td:nth-child(5) {
  width: 15%;
}

/* For patient view (without patient name column) */
.table-fixed th:nth-child(1):not(:has(+ th)),
.table-fixed td:nth-child(1):not(:has(+ td)) {
  width: 25%;
}

.table-fixed th:nth-child(2):not(:has(+ th)),
.table-fixed td:nth-child(2):not(:has(+ td)) {
  width: 25%;
}

.table-fixed th:nth-child(3):not(:has(+ th)),
.table-fixed td:nth-child(3):not(:has(+ td)) {
  width: 25%;
}

.table-fixed th:nth-child(4):not(:has(+ th)),
.table-fixed td:nth-child(4):not(:has(+ td)) {
  width: 25%;
}

/* Mobile card styles */
@media (max-width: 768px) {
  .table-responsive {
    display: none;
  }

  .mobile-cards {
    display: block;
  }

  .appointment-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
  }

  .appointment-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem 0.375rem 0 0;
  }

  .appointment-card .card-body {
    padding: 0;
  }

  .appointment-card .card-footer {
    background: transparent;
    border-top: 1px solid #dee2e6;
    margin: 1rem -1rem -1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0 0 0.375rem 0.375rem;
  }

  .appointment-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .appointment-meta .meta-item {
    display: flex;
    flex-direction: column;
  }

  .appointment-meta .meta-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
  }

  .appointment-meta .meta-value {
    font-size: 1rem;
    color: #212529;
  }

  .appointment-reason {
    margin-bottom: 0.75rem;
  }

  .appointment-reason .reason-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .appointment-reason .reason-text {
    font-size: 0.95rem;
    color: #212529;
    line-height: 1.4;
  }
}

@media (min-width: 769px) {
  .mobile-cards {
    display: none;
  }
}

/* Admin panel mobile cards */
@media (max-width: 768px) {
  .admin-table-responsive {
    display: none;
  }

  .admin-mobile-cards {
    display: block;
  }

  .admin-user-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
  }

  .admin-user-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem 0.375rem 0 0;
  }

  .admin-user-card .card-body {
    padding: 0;
  }

  .admin-user-card .card-footer {
    background: transparent;
    border-top: 1px solid #dee2e6;
    margin: 1rem -1rem -1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0 0 0.375rem 0.375rem;
  }

  .user-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .user-meta .meta-item {
    display: flex;
    flex-direction: column;
  }

  .user-meta .meta-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
  }

  .user-meta .meta-value {
    font-size: 1rem;
    color: #212529;
  }

  .user-email {
    margin-bottom: 0.75rem;
  }

  .user-email .email-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .user-email .email-text {
    font-size: 0.95rem;
    color: #212529;
    word-break: break-all;
  }

  .user-verification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .user-verification .verification-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
  }

  .user-created {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 769px) {
  .admin-mobile-cards {
    display: none;
  }
}