/*
 * VINAGO APP SHELL FOUNDATION — Sprint 22.3 · EPIC 22
 * HOTFIX RC3-001 — App Shell UI Recovery
 * ====================================================
 * Official App Shell Contract (RULE 28).
 *
 * HOTFIX RC3-001:
 *   - Bottom Navigation visible on ALL breakpoints (Mobile/Tablet/Laptop/Desktop)
 *   - FAB / Quick Action / Action Sheet CSS REMOVED
 *   - Header Search Shortcut CSS REMOVED
 *
 * Scope: Presentation ONLY.
 *   - App Header (Safe Area)
 *   - Bottom Navigation (Animated Active State / Landscape / Desktop)
 *   - App Container (Content Insets)
 *   - Navigation (Transition / Scroll Restoration / Orientation)
 *
 * DO NOT:
 *   - Connect business logic
 *   - Modify Runtime / API / Database
 *
 * Loaded AFTER all theme CSS (see inc/app-shell.php) so this
 * contract wins specificity without touching main.css.
 */

/* ===========================================================
   APP SHELL TOKENS
   =========================================================== */
:root {
  --as-header-height: 52px;
  --as-header-safe-top: env(safe-area-inset-top, 0px);
  --as-nav-height: 64px;
  --as-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --as-transition: var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
}

/* ===========================================================
   PHASE 2 — APP HEADER FOUNDATION
   =========================================================== */

/* Safe Area: top notch / status bar integration */
#hpAppBar.as-appbar {
  padding-top: var(--as-header-safe-top);
  box-sizing: border-box;
}

#hpAppBar.as-appbar .hp-appbar-inner {
  height: var(--as-header-height);
  padding-top: 0;
}

/* Header actions: keep 48dp touch targets */
#hpAppBar.as-appbar .hp-appbar-actions {
  gap: var(--space-1, 2px);
}

#hpAppBar.as-appbar .hp-appbar-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

/* HOTFIX RC3-001 · HOTFIX 04 — Header visible on ALL breakpoints.
   main.css / legacy rules hid .hp-appbar at ≥1024px; this contract
   (loaded LAST) keeps the header rendered on Mobile/Tablet/Laptop/Desktop. */
.hp-appbar.as-appbar {
  display: flex !important;
  position: sticky;
  top: 0;
  z-index: var(--z-navbar, 300);
  width: 100%;
  box-sizing: border-box;
}

/* Page content clears header + safe-area (container contract) */
@media (max-width: 767px) {
  .xos-page-content {
    padding-top: calc(var(--as-header-height) + var(--as-header-safe-top));
  }
}

/* ===========================================================
   PHASE 3 — BOTTOM NAVIGATION FOUNDATION
   =========================================================== */

/* Neutralize legacy static indicator — contract uses animated one */
.ep12-nav-item.active::after,
.ep12-nav-item[aria-current="page"]::after {
  display: none !important;
}

/* Animated Active State — Material motion, < 300ms */
.as-nav-indicator {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 22px;
  height: 3px;
  border-radius: 9999px;
  background: var(--md-primary, #1f4e8c);
  transform-origin: center;
  transition: transform var(--as-transition);
  pointer-events: none;
}

.ep12-nav-item.active .as-nav-indicator,
.ep12-nav-item[aria-current="page"] .as-nav-indicator {
  transform: translateX(-50%) scaleX(1);
}

/* Touch target: 48dp+ for all nav items */
#ep12BottomNav .ep12-nav-item {
  min-width: 48px;
  min-height: 48px;
  flex: 1 1 0;
  max-width: none;
  padding: 4px 2px;
}

/* HOTFIX 03 — Bottom Nav CONSISTENCY:
   Bottom Navigation appears on Mobile, Tablet, Laptop, Desktop.
   No hiding at any breakpoint. This rule (loaded LAST) wins. */
#ep12BottomNav.ep12-bottom-nav {
  display: flex !important;
}

/* Landscape support — compact nav on short viewports */
@media (orientation: landscape) and (max-height: 500px) {
  #ep12BottomNav.ep12-bottom-nav {
    height: 40px;
    height: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #ep12BottomNav .ep12-nav-label {
    display: none;
  }

  #ep12BottomNav .ep12-nav-item {
    min-height: 40px;
    flex-direction: row;
    gap: var(--space-2, 4px);
  }

  #ep12BottomNav .ep12-nav-item svg,
  #ep12BottomNav .ep12-nav-icon {
    width: 20px;
    height: 20px;
  }

  #ep12BottomNav .ep12-nav-create-circle {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }

  #ep12BottomNav .as-nav-indicator {
    bottom: 2px;
    width: 14px;
    height: 2px;
  }
}

/* Landscape: keep bottom nav same width as content on wide phones */
@media (orientation: landscape) and (min-width: 667px) and (max-width: 1023px) {
  #ep12BottomNav.ep12-bottom-nav {
    max-width: var(--container-tablet, 720px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  }
}

/* ===========================================================
   PHASE 4 — APP CONTAINER FOUNDATION
   =========================================================== */

/* Content bottom inset = nav + clearance (all breakpoints) */
.xos-page-content {
  padding-bottom: calc(var(--as-nav-height) + var(--as-nav-safe-bottom) + 12px);
}

/* Full-bleed sections still work inside app container */
.ep12-home .xos-page-content,
.ep12-home .ep12-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================================
   PHASE 5 — NAVIGATION EXPERIENCE
   =========================================================== */

/* Page enter transition — fade + slight rise, < 300ms */
body.as-page-enter .xos-app-layout {
  animation: as-page-enter var(--motion-duration-slow, 300ms) var(--motion-easing-decelerate, cubic-bezier(0, 0, 0.2, 1)) both;
}

@keyframes as-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .as-nav-indicator,
  body.as-page-enter .xos-app-layout {
    transition: none !important;
    animation: none !important;
  }
}

/* Orientation: content paddings adjust when keyboard / nav changes */
@media (orientation: landscape) and (max-height: 500px) {
  .xos-page-content {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px) + 8px);
  }
}

/* ===========================================================
   DEVICE — 320px minimal safe
   =========================================================== */
@media (max-width: 339px) {
  #hpAppBar.as-appbar .hp-appbar-actions {
    gap: 0;
  }
}

/* ===========================================================
   END OF APP SHELL CONTRACT — HOTFIX RC3-001
   =========================================================== */