/*
  Nxbroker shared building blocks.
  Page CSS should compose these classes first, then add page-specific layout details.
*/

:root {
  --block-content-max: 1280px;
  --block-row-gap: 24px;
  --block-column-gap: 16px;
  --block-card-padding: 20px;
  --block-inner-gap: 16px;
  --block-control-gap: 12px;
  --block-radius: 8px;
  --block-border: #dce6f4;
  --block-surface: rgba(255, 255, 255, 0.98);
  --block-surface-soft: #f8fbff;
  --block-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
  --block-action-min: 112px;
  --block-repeat-min: 252px;
  --block-auto-min: 240px;
  --block-auto-gap: var(--block-inner-gap);
}

.block-container {
  width: min(100%, var(--block-content-max));
  margin: 0 auto;
}

.block-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--block-row-gap) var(--block-column-gap);
}

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

.block-span-12,
.block-full {
  grid-column: 1 / -1;
}

.block-span-8 {
  grid-column: span 8;
}

.block-span-6 {
  grid-column: span 6;
}

.block-span-4 {
  grid-column: span 4;
}

.block-span-3 {
  grid-column: span 3;
}

.block-card {
  min-width: 0;
  border: 1px solid var(--block-border);
  border-radius: var(--block-radius);
  background: var(--block-surface);
  box-shadow: var(--block-shadow);
}

.block-card-padded {
  padding: var(--block-card-padding);
}

.block-card-fill {
  height: 100%;
}

.block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--block-inner-gap);
}

.block-stack {
  display: grid;
  min-width: 0;
  gap: var(--block-inner-gap);
}

.block-autolayout,
.block-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--block-auto-min)), 1fr));
  align-items: stretch;
  gap: var(--block-auto-gap);
}

.block-auto-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--block-auto-gap);
}

.block-auto-row > *,
.block-autolayout > *,
.block-auto-grid > * {
  min-width: 0;
}

.block-auto-stack {
  display: grid;
  min-width: 0;
  gap: var(--block-auto-gap);
}

.block-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--block-action-min)), 1fr));
  gap: var(--block-control-gap);
}

.block-repeat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--block-repeat-min)), 1fr));
  gap: var(--block-inner-gap);
  align-items: start;
}

.block-action-tile {
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px solid var(--block-border);
  border-radius: 7px;
  background: #fff;
  color: #111827;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.block-action-tile:hover {
  transform: translateY(-1px);
}

.block-module-toolbar,
.block-filter-panel,
.block-table-card {
  min-width: 0;
  border: 1px solid var(--block-border);
  border-radius: var(--block-radius);
  background: var(--block-surface);
}

.block-module-toolbar,
.block-filter-panel {
  padding: var(--block-card-padding);
}

.block-table-card {
  overflow: hidden;
}

@media (max-width: 1280px) {
  .block-collapse-1280 > .block-span-8,
  .block-collapse-1280 > .block-span-6,
  .block-collapse-1280 > .block-span-4,
  .block-collapse-1280 > .block-span-3,
  .block-span-full-1280 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  :root {
    --block-row-gap: 22px;
    --block-card-padding: 15px;
    --block-action-min: 128px;
    --block-auto-min: 100%;
  }

  .block-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--block-row-gap) 12px;
  }

  .block-span-12,
  .block-span-8,
  .block-span-6,
  .block-span-4,
  .block-span-3,
  .block-full {
    grid-column: 1 / -1;
  }

  .block-head,
  .block-auto-row {
    align-items: stretch;
    flex-direction: column;
  }
}

:root[data-theme="dark"] {
  --block-border: rgba(148, 163, 184, 0.22);
  --block-surface: rgba(15, 23, 42, 0.9);
  --block-surface-soft: rgba(15, 23, 42, 0.72);
  --block-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .block-action-tile {
  background: rgba(15, 23, 42, 0.72);
  color: #e5edf8;
}