/* Core.Blazor layout */
:root {
  --core-appbar-height: 56px;
  --core-content-padding: 24px;
  --core-content-max-width: 1280px;
}

.core-app-shell-main { padding: var(--core-content-padding); max-width: var(--core-content-max-width); margin: 0 auto; }

.core-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kendo-spacing-4);
  margin-bottom: var(--kendo-spacing-4);
}

.core-section-header__content {
  display: grid;
  gap: var(--kendo-spacing-1);
}

.core-section-header__title {
  margin: 0;
  color: var(--semantic-text);
  font-size: var(--core-token-font-sizes-lg);
  font-weight: 600;
}

.core-section-header__subtitle {
  margin: 0;
  color: var(--semantic-text-secondary);
  font-size: var(--core-token-font-sizes-sm);
}

.core-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--kendo-spacing-2);
}

.core-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--kendo-spacing-3);
  flex-wrap: wrap;
  padding: var(--kendo-spacing-3);
  background: var(--semantic-surface-alt);
  border: var(--core-token-semantic-border-width) solid var(--semantic-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
}

/* Dashboard grid primitive */
.core-dashboard-grid {
  display: grid;
  gap: var(--kendo-spacing-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
}

.core-dashboard-grid > * {
  min-width: 0;
}

html[data-core-breakpoint="sm"] .core-dashboard-grid,
html[data-core-breakpoint="md"] .core-dashboard-grid,
html[data-core-breakpoint="lg"] .core-dashboard-grid,
html[data-core-breakpoint="xl"] .core-dashboard-grid,
html[data-core-breakpoint="xxl"] .core-dashboard-grid {
  grid-template-columns: repeat(min(2, var(--core-dashboard-grid-max-columns, 3)), minmax(0, 1fr));
}

html[data-core-breakpoint="md"] .core-dashboard-grid.core-dashboard-grid--max-3,
html[data-core-breakpoint="lg"] .core-dashboard-grid.core-dashboard-grid--max-3,
html[data-core-breakpoint="xl"] .core-dashboard-grid.core-dashboard-grid--max-3,
html[data-core-breakpoint="xxl"] .core-dashboard-grid.core-dashboard-grid--max-3,
html[data-core-breakpoint="md"] .core-dashboard-grid.core-dashboard-grid--max-4,
html[data-core-breakpoint="lg"] .core-dashboard-grid.core-dashboard-grid--max-4,
html[data-core-breakpoint="xl"] .core-dashboard-grid.core-dashboard-grid--max-4,
html[data-core-breakpoint="xxl"] .core-dashboard-grid.core-dashboard-grid--max-4 {
  grid-template-columns: repeat(min(3, var(--core-dashboard-grid-max-columns, 3)), minmax(0, 1fr));
}

html[data-core-breakpoint="xl"] .core-dashboard-grid.core-dashboard-grid--max-4,
html[data-core-breakpoint="xxl"] .core-dashboard-grid.core-dashboard-grid--max-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Demo styles */
.core-dashboard-grid-demo {
  display: grid;
  gap: var(--kendo-spacing-5);
}

.core-dashboard-grid-demo-title {
  margin: 0 0 var(--kendo-spacing-3);
  color: var(--semantic-text);
}

.core-dashboard-grid-demo-tile {
  background: var(--semantic-surface);
  border: var(--core-token-semantic-border-width) solid var(--semantic-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
  padding: var(--kendo-spacing-4);
  color: var(--semantic-text);
  font-size: var(--kendo-font-size);
  font-weight: 600;
}