/* Layout utilities and app shell variables */
@layer layout {
  .grid{display:grid;gap:var(--space-4)}
  .grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .grid-cols-12{grid-template-columns:repeat(12,1fr)}
  .content-start{align-content:start}

  /* Dashboard grid utilities - larger gaps for transparent/minimal containers */
  .grid-dashboard{gap:var(--space-6)}
  .grid-dashboard-lg{gap:var(--space-8)}

  /* Auto-fit responsive grid patterns */
  .grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
  .grid-auto-fit-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
  .grid-auto-fit-md{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .grid-auto-fit-lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
  .grid-auto-fit-400{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
  .grid-auto-fit-xl{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

  /* Auto-fill responsive grid patterns */
  .grid-auto-fill-400{grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr))}

  /* Masonry layout - CSS Grid with auto-fit and small row units for JavaScript row-span calculation */
  .masonry-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
    gap:var(--space-4);
    grid-auto-rows:10px; /* Small row units for granular positioning */
    align-items:start; /* Cards don't stretch, use natural height */
  }
  .masonry-grid > *{
    grid-row:span var(--row-span,50); /* Default 50 rows (500px) until JavaScript calculates actual height */
  }

  /* Smooth transitions for masonry cards - height changes animate smoothly */
  .masonry-grid .card{
    transition:
      border-color .15s ease,
      transform .15s ease,
      box-shadow .15s ease,
      height .25s cubic-bezier(.4,0,.2,1),
      max-height .25s cubic-bezier(.4,0,.2,1);
  }
  /* Card body content transitions for dynamic content updates */
  .masonry-grid .card-body{
    transition:height .25s cubic-bezier(.4,0,.2,1),padding .2s ease;
  }

  /* Responsive masonry columns */
  @media (min-width:1200px){
    .masonry-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
  }
  @media (max-width:768px){
    .masonry-grid{grid-template-columns:1fr}
  }

  /* Span utilities for grid layouts */
  .col-span-full{grid-column:1/-1}
  .col-span-2{grid-column:span 2}
  .flex{display:flex}
  .flex-row{flex-direction:row}
  .flex-col{flex-direction:column}
  .items-center{align-items:center}
  .justify-between{justify-content:space-between}
  .justify-evenly{justify-content:space-evenly}

  /* List utilities */
  .list-decimal{list-style-type:decimal}
  .list-disc{list-style-type:disc}
  .list-inside{list-style-position:inside;padding-left:var(--space-4)}

  /* Layout height variables */
  :root{ --header-height: 48px; --footer-height: 56px; }

  /* 🚨 CRITICAL: Page container - Root of height flow chain for iPad Safari compatibility */
  /* 🔥 ESSENTIAL: height:var(--app-height) set by responsive.js for cross-platform viewport */
  /* ⚠️  DO NOT REMOVE: grid-template-rows:auto 1fr auto (middle row must expand) */
  /* ⚠️  DO NOT CHANGE: overflow:hidden (prevents page-level scrolling) */
  .page-container{
    /* Simple flexbox layout: header, content (flex-1), footer fixed */
    height:var(--app-height);
    display:flex;
    flex-direction:column;
    overflow:hidden
  }

  /* Page header - fixed height, flex-shrink:0 */
  .page-header{
    flex-shrink:0;
    height:var(--header-height);
    /* header takes only the space it needs */
  }

  /* 🔥 ESSENTIAL: Page content - Second level of height flow chain */
  /* ⚠️  DO NOT REMOVE: display:flex, min-height:0, overflow:hidden */
  .page-content{
    flex:1;
    position:relative;
    padding:var(--content-padding);
    overflow:hidden;
    display:flex;
    min-height:0;
    flex-direction:row;
    /* Page content has no top padding - sticky banners provide their own spacing */
    padding-top:0;
    padding-bottom:calc(var(--footer-height, 56px) + var(--content-bottom-gap));
  }

  /* Content container has menu-aware left padding - appears in same row as collapsed menu */
  .bp-desktop .page-content,.bp-tablet .page-content{
    padding-left:var(--content-padding);
    padding-right:var(--page-content-padding-right, var(--content-padding));
  }

  /* When menu is visible, add collapsed menu width to left padding */
  body.menu-visible.bp-desktop .page-content,
  body.menu-visible.bp-tablet .page-content{
    padding-left:calc(var(--content-padding) + var(--sidebar-width-compact));
  }

  /* Page navigation - sidebar positioning between header and footer */
  .page-nav{
    position:fixed;
    top:var(--header-height);
    left:0;
    bottom:var(--footer-height);
    width:var(--sidebar-width-compact);
    background:var(--color-brand);
    transition:width .3s ease;
    z-index:600;
    transform-origin:left center;
  }

  /* Navigation menu visibility and animations */
  body:not(.menu-visible) .page-nav .menu-widget{display:none}
  body.menu-expanded .page-nav{width:var(--sidebar-width-expanded)}
  body.menu-visible .page-nav{animation:fx-bounce-in-left .28s cubic-bezier(.22,1.02,.36,1)}
  body:not(.menu-visible) .page-nav{animation:fx-bounce-out-left .22s cubic-bezier(.55,.06,.68,.19)}
  .bp-mobile .page-nav{display:none}

  /* Page footer - fixed positioning */
  .page-footer{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:100 !important;
    background:var(--color-bg) !important;
    border-top:1px solid var(--color-border) !important;
    height:var(--footer-height) !important;
    flex-shrink:0 !important;
  }

  /* Hide footer on tablet and mobile to maximize vertical space */
  .bp-tablet .page-footer,.bp-mobile .page-footer{display:none}

  /* sidebar width already resolved in responsive.css via --sidebar-width */
}