/**
 * App-Shell Architecture CSS
 * 
 * Provides native app-like behavior:
 * - Disables pull-to-refresh bounce
 * - Prevents horizontal overscroll
 * - Disables pinch zoom
 * - Prevents text selection on UI elements
 * - Removes tap highlight
 * - Smooth, native-feeling scrolling
 */

/* CSS Custom Properties for viewport height (iOS Safari fix) */
:root {
  --vh: 1vh;
  --app-height: 100vh;
}

/* Use 100svh (small viewport) where supported for consistent mobile behavior */
@supports (height: 100svh) {
  :root {
    --app-height: 100svh;
  }
}

/* Base: Prevent overscroll bounce and horizontal scroll */
html {
  overscroll-behavior-x: none;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  min-height: 100%;
}

/* Disable pull-to-refresh on iOS/Android */
html, body {
  touch-action: pan-x pan-y;
}

/* Alternative: Use position fixed only when needed */
body.fixed-shell {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.fixed-shell .scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Main scrollable content wrapper - natural scroll, no overflow capture */
.app-shell-content,
main,
[role="main"] {
  /* Let page scroll naturally - don't capture scroll in containers */
}

/* Sidebar Layout: Fixed sidebar with scrollable main content */
/* Desktop only - on mobile, bottom nav is used instead */
/* DISABLED FOR CLINIC PAGES - clinic-shell.css handles this */
/*
@media (min-width: 769px) {
  html.has-sidebar-layout {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100vh !important;
  }
  
  body.has-sidebar {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100vh !important;
    width: 100% !important;
  }

  body.has-sidebar .main-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 180px !important;
    margin-left: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
}
*/

/* For pages with fixed body - allow content scroll */
body.app-shell {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.app-shell .app-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Allow text selection on inputs and text areas */
input, textarea, [contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Prevent text selection on UI elements (buttons, nav, etc.) */
button,
a,
nav,
.nav-item,
.bottom-nav,
.sidebar,
.clinic-sidebar,
.btn,
[role="button"],
[role="navigation"] {
  -webkit-user-select: none;
  user-select: none;
}

/* Smooth scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Safe area insets for notched devices */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ==================== BOTTOM NAVIGATION FIX ==================== */
/* Ensures bottom nav stays fixed and doesn't move during overscroll */
.bottom-nav,
.clinic-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  /* GPU acceleration to prevent position shift */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  /* Safe area for notched devices */
  padding-bottom: env(safe-area-inset-bottom) !important;
  /* Ensure solid background - let portal-specific CSS control color */
  /* background-color set by portal-specific CSS (clinic-shell.css, doctor pages) */
}

/* Fixed header should respect safe area */
.clinic-shell-header,
.nav,
header[role="banner"] {
  padding-top: env(safe-area-inset-top);
}

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Hide scrollbars while maintaining scroll functionality (optional - modern look) */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Subtle custom scrollbar for desktop */
@media (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
}

/* Touch-friendly targets - minimum 44px as per Apple HIG */
@media (pointer: coarse) {
  button,
  a,
  input[type="button"],
  input[type="submit"],
  .btn,
  .nav-item,
  .bottom-nav-item {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Disable double-tap zoom on interactive elements */
button,
a,
input,
select,
textarea,
.btn {
  touch-action: manipulation;
}

/* Prevent context menu on long press (native app feel) */
.no-context-menu {
  -webkit-touch-callout: none;
}

/* Active state feedback for touch */
@media (hover: none) and (pointer: coarse) {
  button:active,
  a:active,
  .btn:active,
  .nav-item:active,
  .bottom-nav-item:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* Standalone PWA specific styles */
@media all and (display-mode: standalone) {
  /* Extra padding when running as installed PWA */
  body {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Hide browser-specific UI hints */
  .browser-only {
    display: none !important;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .bottom-nav,
  .clinic-bottom-nav {
    height: 48px;
  }
  
  .bottom-nav-item span:last-child {
    display: none;
  }
}