.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 90vw), 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--card-border-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.card-icon {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.card-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25rem;
}

.card-trend {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.dashboard-datatables {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-datatables:first-child {
  grid-column: span 7;
}

.dashboard-datatables:first-child {
  grid-column: span 5;
}

.table-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  padding: 0 1rem;
  background-color: var(--color-white);
}

.tab-button {
  padding: 0.75rem 1rem;
  margin-right: 0.5rem;
  border: none;
  background-color: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
}

.tab-button:hover {
  color: var(--color-primary);
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

td .status-dropdown,
td .update-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
td .status-dropdown:hover,
td .update-contact-btn:hover {
  background-color: var(--color-background);
  border-color: #adb5bd;
}

td .status-dropdown i,
td .update-contact-btn i.fa-chevron-down {
  font-size: 0.75em;
  color: var(--color-text-muted);
}

td .update-contact-btn i.fa-phone {
  font-size: 0.9em;
  color: var(--color-text-muted);
}

.status-active {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: rgba(25, 135, 84, 0.1);
}
.status-pending {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background-color: rgba(255, 193, 7, 0.1);
}
.status-closed {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background-color: rgba(108, 117, 125, 0.1);
}

.simple-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.simple-pagination .pagination-button {
  padding: 0.4rem 1rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  border-radius: var(--button-border-radius);
  color: var(--color-primary);
  cursor: pointer;
}

.simple-pagination .pagination-button:hover:not(:disabled) {
  background-color: var(--color-background);
}

.simple-pagination .pagination-button:disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  background-color: var(--color-background);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .summary-cards {
    gap: 1rem;
  }
  .card {
    padding: 0.75rem 1rem;
  }
  .card-value {
    font-size: var(--font-size-lg);
  }

  .table-tabs {
    padding: 0 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tab-button {
    padding: 0.5rem 0.75rem;
    font-size: calc(var(--font-size-sm) * 0.95);
  }

  .simple-pagination {
    padding: 0.75rem 1rem;
    justify-content: space-between;
  }
  .simple-pagination .pagination-button {
    padding: 0.3rem 0.8rem;
    flex-grow: 1;
    text-align: center;
  }
  .simple-pagination .pagination-button:first-child {
    margin-left: 0;
    margin-right: 0.25rem;
  }
  .simple-pagination .pagination-button:last-child {
    margin-left: 0.25rem;
  }

  .pagination-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .rows-per-page {
    justify-content: space-between;
    width: 100%;
  }
  .page-navigation {
    justify-content: center;
    width: 100%;
  }
  .page-info {
    width: 100%;
    text-align: center;
    order: -1;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 576px) {
  .main-content {
    padding: 1rem;
  }
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}