/* assets/css/dashboard.css
 *
 * Phase 0.5: Fullscreen dashboard shell + Swiper integration.
 * No widget-type logic here.
 */

/* ------------------------------
   1. Root dashboard shell
   ------------------------------ */

/* Root container that Bootstrap::renderDashboard() outputs */
.dashboard-root {
  position: fixed;
  inset: 0;
  width: 100%;

  /* Fallback for older browsers */
  height: 100vh;
  /* iOS / modern browsers – real visible viewport */
  height: 100dvh;

  display: flex;
  align-items: stretch;
  justify-content: stretch;

  pointer-events: none; /* inner content opts back in */
}

/* ------------------------------
   2. Swiper integration
   ------------------------------ */

/* Swiper takes over inside the root */
.dashboard-swiper {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Swiper internals */
.dashboard-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.dashboard-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* ------------------------------
   3. Page + grid container
   ------------------------------ */

/* Each slide contains a "page" wrapper */
.dashboard-page {
  flex: 1 1 auto;
  display: flex;
}

/* The slide content container (see Bootstrap) */
.dashboard-page .dashboard-grid {
  flex: 1 1 auto;
  height: 100%;
}

/* Actual grid track definitions live in grid.css */

/* ------------------------------
   4. Pagination dots at bottom
   ------------------------------ */

.dashboard-pagination.swiper-pagination {
  position: absolute;
  left: 50%;
  bottom: var(--space-sm);
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  z-index: 10;
}

/* Swiper's bullets */
.dashboard-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;

  background-color: rgba(255, 255, 255, 0.35);
  opacity: 1;

  transition:
    background-color 160ms ease,
    transform 160ms ease,
    width 160ms ease;
}

.dashboard-pagination .swiper-pagination-bullet-active {
  width: 18px;
  background-color: var(--color-accent, #ffffff);
  transform: translateY(-1px);
}