/**
 * Phase 2A: Header Controls CSS Standardization
 * 
 * Mobile-first visual placement for header control buttons.
 * Ensures consistent touch targets and safe area positioning.
 * 
 * Strategy: Override-first approach
 * - Add new standardized styles with !important
 * - Do not delete old CSS yet (cleanup in Phase 2B)
 * - CSS-only changes (no JS behavior modified)
 * 
 * Scope:
 * - .sha-mobile-top (global header container)
 * - .sha-topbar-back (global back button)
 * - .sha-back-icon (back button icon)
 * - .sha-modal-close (internal modal close button)
 * 
 * Out of scope:
 * - .cf-builder-modal__close (theme modal close - stays in custom-homes.css)
 * - Screen-specific back button hiding (Phase 2B)
 * - Progress bar visual changes (separate phase)
 */

/* ========================================================================
   GLOBAL HEADER CONTAINER
   ======================================================================== */

/**
 * Mobile-first header grid
 * - Back button: left column (touch-friendly size)
 * - Progress bar: center column (hidden in current state)
 * - Account/Close: right column (reserved for future use)
 */
.sha-mobile-top {
    /* Improve spacing for better visual balance */
    margin: 18px 0 6px 0 !important;
    padding: 8px 14px 4px !important;
    gap: 8px !important;
}

/* ========================================================================
   GLOBAL BACK BUTTON
   ======================================================================== */

/**
 * Back button visual standardization
 * - 44px touch target (Apple HIG minimum)
 * - Positioned in safe visible area
 * - Balanced visual weight with close button
 */
.sha-mobile-top .sha-topbar-back {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.94) !important;
    box-shadow: 
        0 8px 18px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    transition: 
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 160ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.sha-mobile-top .sha-topbar-back:hover {
    background: rgba(255,255,255,1) !important;
    box-shadow: 
        0 10px 22px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

.sha-mobile-top .sha-topbar-back:active {
    transform: scale(0.94) !important;
    box-shadow: 
        0 6px 14px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/**
 * Back button icon sizing
 * - Matches close button icon size for visual consistency
 */
.sha-mobile-top .sha-back-icon i {
    font-size: 17px !important;
    color: #16391f !important;
}

/* ========================================================================
   INTERNAL MODAL CLOSE BUTTON
   ======================================================================== */

/**
 * Close button for internal modals (resume draft, etc.)
 * - Matches back button size for visual symmetry
 * - Positioned in header opposite back button
 * - Larger touch target than previous 26px icon-only style
 */
.sha-modal-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    box-shadow: 
        0 8px 18px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 160ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.sha-modal-close:hover {
    background: rgba(255,255,255,1) !important;
    box-shadow: 
        0 10px 22px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

.sha-modal-close:active {
    transform: scale(0.94) !important;
    box-shadow: 
        0 6px 14px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* ========================================================================
   MODAL HEADER ADJUSTMENTS
   ======================================================================== */

/**
 * Adjust modal header padding to accommodate larger close button
 * - Ensures close button doesn't overlap title
 * - Maintains consistent spacing
 */
.sha-modal-header {
    padding: 20px 20px 16px !important;
    align-items: center !important;
    min-height: 80px !important;
}

/* Adjust internal modal close button to feel less cramped */
.sha-modal-header .sha-modal-close {
    position: relative !important;
    flex-shrink: 0 !important;
}

/* ========================================================================
   RESPONSIVE ENHANCEMENTS
   ======================================================================== */

/**
 * Desktop refinements
 * - Slightly larger buttons for mouse precision
 * - Enhanced hover states
 */
@media (min-width: 768px) {
    .sha-mobile-top .sha-topbar-back,
    .sha-modal-close {
        width: 46px !important;
        height: 46px !important;
    }

    .sha-mobile-top .sha-back-icon i {
        font-size: 18px !important;
    }

    .sha-modal-close {
        font-size: 26px !important;
    }
}

/**
 * Safe area insets for notched devices
 * - Ensures buttons stay in visible area on iPhone X+, etc.
 */
@supports (padding: max(0px)) {
    .sha-mobile-top {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/**
 * Focus states for keyboard navigation
 */
.sha-mobile-top .sha-topbar-back:focus-visible,
.sha-modal-close:focus-visible {
    outline: 2px solid rgba(47, 109, 57, 0.42) !important;
    outline-offset: 2px !important;
}

/**
 * Reduced motion support
 */
@media (prefers-reduced-motion: reduce) {
    .sha-mobile-top .sha-topbar-back,
    .sha-modal-close {
        transition: none !important;
    }
}

/* ========================================================================
   PHASE 2B: SCREEN-SPECIFIC BACK BUTTON VISIBILITY
   ======================================================================== */

/**
 * Hide back button on Screen 1: Pick a Home
 * - First screen has no previous state to return to
 * - User should use browser back or close modal instead
 */
#sha-screen-step-1.sha-screen--active ~ .sha-mobile-top .sha-topbar-back,
.sha-screen[data-screen="step-1"].sha-screen--active ~ header .sha-topbar-back {
    display: none !important;
}

/**
 * Alternative selector using :has() for modern browsers
 * Hides back button when Screen 1 is active
 */
#silva-home-app:has(#sha-screen-step-1.sha-screen--active) .sha-topbar-back {
    display: none !important;
}

/**
 * Hide back button on Screen 3: Select Flooring by Room
 * - Flooring intro screen is the first screen after home selection
 * - Back would navigate to summary, which may be confusing UX
 * - User navigates forward from wizard sub-screens
 */
#silva-home-app:has(#sha-screen-step-3.sha-screen--active) .sha-topbar-back,
.sha-screen[data-screen="step-3"].sha-screen--active ~ header .sha-topbar-back {
    display: none !important;
}

/**
 * Keep back button visible on wizard sub-screens
 * - Countertops wizard (when active)
 * - Floors selector sub-view (when mode selector is shown)
 * - Summary screens (when edit flows are active)
 * 
 * Note: These screens toggle visibility via JS state.
 * CSS only hides on main Screen 1 and Screen 3 intro.
 */