/* Layout & Density Helpers */
.app-container--wide {
  max-width: 100% !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-grid--compact {
  --bs-gutter-x: var(--app-gutter-compact);
  --bs-gutter-y: var(--app-gutter-compact);
}

.app-content--dense {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Panel & Card Refinements */
.panel--flush {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* KPI Compact Variant (P1-6) */
.kpi-card--compact .card-body {
  padding: 0.75rem;
}

.kpi-value--compact {
  font-size: 1.25rem;
  font-weight: var(--app-font-weight-bold);
  line-height: 1.2;
}

.kpi-label--compact {
  font-size: var(--app-font-size-label);
  color: var(--app-text-muted);
  font-weight: var(--app-font-weight-medium);
}

/* Empty State (P1-5 base) */
.empty-state--polished {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--app-text-muted);
}

.empty-state--polished i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* KPI Strip (P2-1) */
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid var(--app-border-color) !important;
  }
}

.last-child-border-0:last-child {
  border-right: 0 !important;
}

/* Button size standardization */
.btn-sm {
  --tblr-btn-padding-x: 0.625rem;
  --tblr-btn-padding-y: 0;
  --tblr-btn-font-size: 0.75rem;
  --tblr-btn-line-height: 1.2;
  min-height: 28px;
  height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  align-items: center;
}

.btn-sm i {
  line-height: 1;
}

.btn-xs {
  --tblr-btn-padding-x: 0.375rem;
  --tblr-btn-padding-y: 0;
  --tblr-btn-font-size: 0.7rem;
  --tblr-btn-line-height: 1.25;
  min-height: 24px;
  height: 24px;
  padding: 0 0.375rem;
  font-size: 0.7rem;
  line-height: 1.25;
  align-items: center;
}

.pagination-sm .page-link {
  font-size: var(--app-font-size-label) !important;
  padding: 0.35rem 0.65rem !important;
}

.data-table-footer p.small {
  font-size: var(--app-font-size-label) !important;
  margin-bottom: 0 !important;
}

/* Data Table Shell (P4-3) */
.data-table-shell {
  background: var(--app-surface-1);
  border: 1px solid var(--app-border-color);
  border-radius: 4px;
  overflow: hidden;
}

.data-table-toolbar {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--app-border-color);
  background: var(--app-surface-muted);
}

.data-table-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--app-border-color);
}

.table-loading-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.data-table-shell.is-loading .table-loading-bar {
  opacity: 1;
  background: color-mix(in srgb, var(--tblr-primary, #206bc4) 12%, transparent);
}

.table-loading-bar__indicator {
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  background: var(--tblr-primary, #206bc4);
  border-radius: 999px;
  transform: translateX(-140%);
}

.data-table-shell.is-loading .table-loading-bar__indicator {
  animation: table-loading-slide 1.1s ease-in-out infinite;
}

.data-table-shell.is-loading .table-responsive,
.data-table-shell.is-loading .data-table-footer {
  opacity: 0.68;
  transition: opacity 0.16s ease;
}

.table-loading-skeleton {
  display: inline-block;
  width: 100%;
  height: 0.95rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--app-surface-muted) 88%, white) 0%,
    color-mix(in srgb, var(--app-surface-muted) 58%, white) 50%,
    color-mix(in srgb, var(--app-surface-muted) 88%, white) 100%
  );
  background-size: 220% 100%;
  animation: table-skeleton-wave 1.25s ease-in-out infinite;
}

.table-loading-skeleton--sm {
  width: 3.5rem;
}

.table-loading-skeleton--md {
  width: 7rem;
}

.table-loading-skeleton--lg {
  width: 11rem;
}

.data-table-shell.is-loading .page-link,
.data-table-shell.is-loading [data-sort],
.data-table-shell.is-loading .btn,
.data-table-shell.is-loading select {
  pointer-events: none;
}

.data-table-shell.is-loading .btn,
.data-table-shell.is-loading select,
.data-table-shell.is-loading .page-link,
.data-table-shell.is-loading [data-sort] {
  opacity: 0.6;
}

@keyframes table-loading-slide {
  0% {
    transform: translateX(-140%);
  }

  100% {
    transform: translateX(460%);
  }
}

@keyframes table-skeleton-wave {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -20% 0;
  }
}

/* Drawer Sizes (P1-7) */
.drawer--sm { --bs-offcanvas-width: 360px !important; }
.drawer--md { --bs-offcanvas-width: 480px !important; }
.drawer--lg { --bs-offcanvas-width: 720px !important; }
.drawer--xl { --bs-offcanvas-width: min(960px, 100vw) !important; }

.offcanvas-header {
  border-bottom: 1px solid var(--app-border-color);
}

.offcanvas-footer {
  padding: 1rem;
  border-top: 1px solid var(--app-border-color);
  background: var(--app-surface-muted);
}

/* Map Toolbar Styles */
.map-toolbar {
  height: 50px;
  background: var(--app-surface-1);
  border-bottom: 1px solid var(--app-border-color);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.map-container-full {
  flex-grow: 1;
  width: 100%;
  position: relative;
}