/* ==============================================================
   KBN1 INTRANET • ADAPTIVE HARDWARE PROFILES CSS SPECIFICATION
   Supports: Desktop (>=1024px), iPhone 15 Pro (6.1"), iPhone 15 Pro Max (6.7"),
   Google Pixel Fold 2023 (Outer 5.8" & Inner 7.6" with Fold Continuity)
   ============================================================== */

:root {
  /* Dynamic Safe Area Insets (Dynamic Island on iPhone 15 Pro/Max, Bezels, Cutouts) */
  --kbn1-sat: env(safe-area-inset-top, 0px);
  --kbn1-sar: env(safe-area-inset-right, 0px);
  --kbn1-sab: env(safe-area-inset-bottom, 0px);
  --kbn1-sal: env(safe-area-inset-left, 0px);

  /* Touch Ergonomics Standard */
  --hw-min-touch-target: 44px;

  /* Fluid Responsive Tokens */
  --hw-grid-columns: 3;
  --hw-container-padding: 1.5rem;
  --hw-gap: 1.25rem;
}

/* ==============================================================
   PROFILE 1: COMPACT MOBILE (iPhone 15 Pro 6.1", Pro Max 6.7", Pixel Fold Outer 5.8")
   Viewport: <= 599px (and html.hw-mobile-compact / html.hw-fold-outer)
   ============================================================== */
@media (max-width: 599px) {
  :root {
    --hw-grid-columns: 1;
    --hw-container-padding: 0.85rem;
    --hw-gap: 0.85rem;
  }

  /* Full-bleed containers with safe-area padding */
  body {
    padding-left: var(--kbn1-sal) !important;
    padding-right: var(--kbn1-sar) !important;
    padding-bottom: calc(var(--kbn1-sab) + 1rem) !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Universal single-column flow for cards and tiles */
  .hw-adaptive-grid,
  .app-grid,
  .apps-grid,
  .services-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: var(--hw-gap) !important;
  }

  /* Touch targets must meet Apple / Google accessibility guidelines */
  button,
  .btn,
  .nav-btn,
  a.waffle-item,
  a.kbn1-waffle-item {
    min-height: var(--hw-min-touch-target);
  }

  /* Mobile bottom sheet drawer styling for menus */
  .hw-bottom-sheet {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 82vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(var(--kbn1-sab) + 1rem) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.75) !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .hw-bottom-sheet.active {
    transform: translateY(0) !important;
  }

  /* Hide auxiliary desktop widgets in compact mobile */
  .hw-hide-on-mobile {
    display: none !important;
  }
}

/* ==============================================================
   PROFILE 2: FOLDABLE INNER DISPLAY (Google Pixel Fold 2023 1st Gen Unfolded 7.6")
   Viewport: 600px - 1023px (specifically optimized for 840x700 6:5 canvas)
   ============================================================== */
@media (min-width: 600px) and (max-width: 1023px) {
  :root {
    --hw-grid-columns: 2;
    --hw-container-padding: 1.25rem;
    --hw-gap: 1rem;
  }

  /* 2-Column Grid on Foldable Inner Display maximizes 7.6" real estate */
  .hw-adaptive-grid,
  .app-grid,
  .apps-grid,
  .services-grid,
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--hw-gap) !important;
  }

  /* Master-Detail Split Screen Layout for Foldable Inner Screen */
  .hw-split-view {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 1.25rem !important;
    height: calc(100dvh - 60px - var(--kbn1-sat) - var(--kbn1-sab)) !important;
  }

  .hw-split-nav {
    overflow-y: auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 1rem !important;
  }

  .hw-split-detail {
    overflow-y: auto !important;
  }

  /* Expanded 2-Column Waffle Launcher on Pixel Fold Unfolded Canvas */
  #kbn1-suite-waffle-dropdown,
  .waffle-dropdown {
    width: 580px !important;
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
  }

  #kbn1-suite-waffle-dropdown .kbn1-waffle-list,
  .waffle-dropdown .waffle-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  /* Show elements enhanced for fold-inner display */
  .hw-show-on-fold {
    display: block !important;
  }
}

/* ==============================================================
   PROFILE 3: DESKTOP & LAPTOP (Full Widescreen >= 1024px)
   ============================================================== */
@media (min-width: 1024px) {
  :root {
    --hw-grid-columns: 3;
    --hw-container-padding: 2rem;
    --hw-gap: 1.25rem;
  }

  .hw-adaptive-grid,
  .app-grid,
  .apps-grid,
  .services-grid,
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: var(--hw-gap) !important;
  }

  .hw-split-view {
    display: grid !important;
    grid-template-columns: 300px 1fr 340px !important;
    gap: 1.5rem !important;
  }
}

/* Wide screens (>= 1600px) */
@media (min-width: 1600px) {
  :root {
    --hw-grid-columns: 4;
  }
  
  .hw-adaptive-grid,
  .app-grid,
  .apps-grid,
  .services-grid,
  .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ==============================================================
   SMOOTH CONTINUITY TRANSITION ANIMATIONS
   Transitions seamlessly during device fold/unfold without flash
   ============================================================== */
.hw-adaptive-grid,
.app-grid,
.apps-grid,
.services-grid,
.card,
.service-card,
.hw-split-view {
  transition: grid-template-columns 0.25s ease-out, gap 0.25s ease-out, padding 0.25s ease-out;
}