<template>
  <div class="ks-dashboard">
    <section v-if="$slots.kpis" class="ks-dashboard__kpis">
      <slot name="kpis" />
    </section>

    <div class="ks-dashboard__body">
      <section v-if="$slots.primary" class="ks-dashboard__primary ks-card">
        <slot name="primary" />
      </section>

      <div class="ks-dashboard__side">
        <section v-if="$slots.secondary" class="ks-dashboard__secondary ks-card">
          <slot name="secondary" />
        </section>
        <section v-if="$slots.alerts" class="ks-dashboard__alerts ks-card">
          <slot name="alerts" />
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ks-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--ks-space-3);
  overflow: hidden;
}

.ks-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ks-space-3);
  flex-shrink: 0;
}

.ks-dashboard__body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--ks-space-3);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ks-dashboard__primary {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ks-space-3);
  display: flex;
  flex-direction: column;
}

.ks-dashboard__side {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.ks-dashboard__secondary,
.ks-dashboard__alerts {
  padding: var(--ks-space-3);
}

@media (max-width: 1100px) {
  .ks-dashboard__body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}
</style>
