/* ============================================
   UI ALIGNMENT & SPACING IMPROVEMENTS
   Consistent spacing, alignment, and layout polish
   ============================================ */

/* Consistent spacing system */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* Remove empty spaces in dashboards */
.dashboard-container,
.dashboard-layout,
[data-dashboard-column] {
  gap: var(--spacing-md);
}

/* Consistent card spacing */
.card {
  margin-bottom: var(--spacing-md);
}

.card:last-child {
  margin-bottom: 0;
}

/* Button groups - consistent alignment */
.btn-group,
.button-group,
.action-group {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.btn-group .btn,
.button-group .btn,
.action-group .btn {
  margin: 0;
}

/* Form alignment */
.form-group,
.mb-3 {
  margin-bottom: var(--spacing-md) !important;
}

.form-group:last-child,
.mb-3:last-child {
  margin-bottom: 0 !important;
}

/* Consistent grid gaps */
.row.g-3,
.row.g-4 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.row.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

/* Table alignment */
.table {
  margin-bottom: 0;
}

.table-responsive {
  margin-bottom: var(--spacing-md);
}

/* Card body padding consistency */
.card-body {
  padding: var(--spacing-lg);
}

.card-body.p-3 {
  padding: var(--spacing-md) !important;
}

.card-body.p-4 {
  padding: var(--spacing-lg) !important;
}

/* Header alignment */
.dashboard-header,
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.dashboard-header h1,
.dashboard-header h2,
.page-header h1,
.page-header h2 {
  margin: 0;
}

/* Stats grid - consistent spacing */
.stats-grid,
.metrics-grid,
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stats-grid:last-child,
.metrics-grid:last-child,
.kpi-grid:last-child {
  margin-bottom: 0;
}

/* Empty state handling */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--bs-gray-600);
}

.empty-state-icon {
  font-size: 3rem;
  opacity: 0.5;
  margin-bottom: var(--spacing-md);
}

/* Widget spacing */
[data-widget-id] {
  margin-bottom: var(--spacing-md);
}

[data-widget-id]:last-child {
  margin-bottom: 0;
}

/* Consistent badge alignment */
.badge {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Alert spacing */
.alert {
  margin-bottom: var(--spacing-md);
}

.alert:last-child {
  margin-bottom: 0;
}

/* List group spacing */
.list-group-item {
  padding: var(--spacing-md) var(--spacing-lg);
}

.list-group-item:first-child {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

/* Modal spacing */
.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-sm);
}

/* Nav tabs alignment */
.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: var(--spacing-lg);
}

.nav-tabs .nav-link {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: -1px;
}

/* Breadcrumb spacing */
.breadcrumb {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

/* Pagination alignment */
.pagination {
  margin-top: var(--spacing-lg);
  margin-bottom: 0;
  justify-content: center;
}

/* Filter bar alignment */
.filter-bar,
.search-bar {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.filter-bar .form-control,
.search-bar .form-control {
  flex: 1;
  min-width: 200px;
}

/* Action buttons alignment */
.action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Stats cards - remove empty spaces */
.stat-card,
.metric-card {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 0.875rem;
  color: var(--bs-gray-600);
  margin-top: var(--spacing-xs);
}

/* Dashboard sections */
.dashboard-section {
  margin-bottom: var(--spacing-xl);
}

.dashboard-section:last-child {
  margin-bottom: 0;
}

.dashboard-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--bs-border-color);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .dashboard-header,
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-buttons {
    justify-content: flex-start;
    width: 100%;
  }

  .action-buttons .btn {
    flex: 1;
    min-width: 0;
  }

  .stats-grid,
  .metrics-grid,
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar,
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar .form-control,
  .search-bar .form-control {
    width: 100%;
  }
}

/* Remove excessive whitespace */
.container-fluid,
.container {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 576px) {
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/* Consistent icon alignment */
.btn i,
.btn .bi,
.nav-link i,
.nav-link .bi {
  vertical-align: middle;
  line-height: 1;
}

/* Card header alignment */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h5,
.card-header h6 {
  margin: 0;
}

/* Table action buttons */
.table-actions {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: flex-end;
}

.table-actions .btn {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Loading states */
.loading-placeholder {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-gray-500);
}

/* Empty dashboard message */
.dashboard-empty {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--bs-gray-600);
}

.dashboard-empty-icon {
  font-size: 4rem;
  opacity: 0.3;
  margin-bottom: var(--spacing-md);
}

/* Consistent spacing for nested elements */
.card-body > *:first-child {
  margin-top: 0;
}

.card-body > *:last-child {
  margin-bottom: 0;
}

/* Widget grid improvements */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.widget-grid:last-child {
  margin-bottom: 0;
}

/* Ensure no orphaned spacing */
.row:empty {
  display: none;
}

.col:empty {
  display: none;
}

/* Consistent form row spacing */
.form-row,
.row.g-2,
.row.g-3,
.row.g-4 {
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.form-row > *,
.row.g-2 > *,
.row.g-3 > *,
.row.g-4 > * {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}