@propbinder/mobile-design 0.4.41 → 0.4.43

package/styles/ionic.css

@@ -1,989 +1,989 @@
-/**
- * Ionic-Specific Styles
- * 
- * This file contains all styles that are specific to Ionic Framework and mobile app usage.
- * These styles are not needed for web-only or design system library builds.
- */
-
-/* Core CSS required for Ionic components to work properly */
-@import "@ionic/angular/css/core.css";
-@import "@ionic/angular/css/structure.css";
-@import "@ionic/angular/css/typography.css";
-
-/* Swiper styles for image carousels */
-@import 'swiper/css';
-@import 'swiper/css/navigation';
-@import 'swiper/css/pagination';
-
-/* Mobile common styles */
-/* Note: mobile-common.css is included in @propbinder/design-system/styles/globals.css */
-
-/* Italic font faces (upright weights are declared in @propbinder/design-system/styles/globals.css) */
-@font-face {
-  font-family: "Brockmann";
-  src: url("/Brockmann/brockmann-regularitalic-webfont.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Brockmann";
-  src: url("/Brockmann/brockmann-mediumitalic-webfont.woff2") format("woff2");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Brockmann";
-  src: url("/Brockmann/brockmann-semibolditalic-webfont.woff2") format("woff2");
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Ionic-Specific CSS Variables */
-:root {
-  /* Mobile-specific brand color for headers/backgrounds */
-  --color-brand-secondary: #221a4c;
-
-  /* Ionic Keyboard Appearance - force light theme */
-  --ion-keyboard-color: #ffffff;
-  --ion-keyboard-background: #ffffff;
-  --ion-keyboard-text-color: #000000;
-  color-scheme: light;
-
-  /* Layout - Mobile Navigation */
-  --mobile-tab-bar-height: 64px;
-  --mobile-content-spacing: 20px;
-
-  /* Tab Bar Height - Used for FAB positioning and other layout calculations */
-  /* This is set by ds-mobile-tab-bar and consumed by ds-mobile-fab */
-  --ds-tab-bar-height: 64px;
-
-  /* ============================================
-     SPRING ANIMATIONS
-     Physics-based easing curves with natural bounce
-     ============================================ */
-
-  /* Spring Curves */
-  --spring-curve-bouncy: linear(0, 0.0209, 0.0772, 0.1598, 0.2602, 0.3709, 0.4854, 0.5984, 0.7056, 0.8038, 0.8908, 0.9653, 1.0267, 1.075, 1.111, 1.1354, 1.1497, 1.1551, 1.1532, 1.1455, 1.1335, 1.1184, 1.1014, 1.0837, 1.066, 1.0492, 1.0336, 1.0197, 1.0077, 0.9977, 0.9898, 0.9838, 0.9796, 0.9771, 0.976, 0.9761, 0.9771, 0.9788, 0.9811, 0.9837, 0.9864, 0.9892, 0.9918, 0.9943, 0.9965, 0.9984, 1.0001, 1.0013, 1.0023, 1.003, 1.0035, 1);
-
-  --spring-curve-gentle: linear(0, 0.2, 0.5, 0.8, 1.02, 1.01, 1);
-
-  --spring-curve-snappy: linear(0, 0.3, 0.7, 1.05, 0.98, 1);
-
-  --spring-curve-smooth: linear(0, 0.215, 0.61, 0.855, 1);
-
-  /* Spring Durations */
-  --spring-duration-fast: 400ms;
-  --spring-duration-medium: 700ms;
-  --spring-duration-slow: 1000ms;
-
-  /* Spring Presets (curve + duration) */
-  --spring-bouncy: var(--spring-duration-medium) var(--spring-curve-bouncy);
-  --spring-gentle: var(--spring-duration-fast) var(--spring-curve-gentle);
-  --spring-snappy: var(--spring-duration-fast) var(--spring-curve-snappy);
-  --spring-smooth: var(--spring-duration-medium) var(--spring-curve-smooth);
-
-  /* ============================================
-     SAFE AREA / STATUS BAR CONFIGURATION
-     
-     Controls how sheets and modals position relative to the status bar.
-     
-     IMPORTANT: This works with StatusBar.setOverlaysWebView() in app.ts
-     - With overlay: false (default) - system handles status bar, use safe-area-inset-top
-     - With overlay: true - WebView extends under status bar
-     
-     To change behavior, update BOTH:
-     1. app.ts: StatusBar.setOverlaysWebView({ overlay: true/false })
-     2. These CSS variables below
-     ============================================ */
-
-  /* Normalized safe-area variables consumed by app layout styles.
-     Defaults to env() and can be overridden at runtime from SafeArea plugin. */
-  --app-safe-top: env(safe-area-inset-top, 0px);
-  --app-safe-right: env(safe-area-inset-right, 0px);
-  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
-  --app-safe-left: env(safe-area-inset-left, 0px);
-
-  /* Sheet/modal top offset - positions content below status bar area */
-  /* Uses max() to ensure at least 32px offset even on devices without notch */
-  /* +12px adds breathing room below the status bar */
-  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 12px);
-
-  /* Header top offset - used to fine-tune header position on iOS with overlay: true */
-  /* On web (no safe area), this should be 0px. On iOS, it compensates for status bar overlap */
-  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 16px));
-}
-
-/* Android-only top safe-area tuning:
-   add 8px extra breathing room above header/sheet content. */
-.plt-android {
-  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 20px);
-  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 8px));
-}
-
-/* Global Styles for Mobile App */
-html {
-  /* Safe Area Variables - set here according to Ionic documentation */
-  --ion-safe-area-top: env(safe-area-inset-top);
-  --ion-safe-area-bottom: env(safe-area-inset-bottom);
-  --ion-safe-area-left: env(safe-area-inset-left);
-  --ion-safe-area-right: env(safe-area-inset-right);
-}
-
-html,
-body {
-  /* Background color must match theme-color for iOS PWA status bar */
-  background-color: var(--color-header-surface);
-  color: var(--text-color-default-primary);
-  font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
-
-  /* Ensure full height for iOS PWA */
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-
-  /* Don't add padding to html/body - let Ionic components handle safe areas */
-}
-
-/* iOS-specific: Purple background for overshoot areas to match dark header */
-.plt-ios html,
-.plt-ios body {
-  background-color: var(--color-header-surface) !important;
-}
-
-.plt-ios ion-app {
-  background-color: var(--color-header-surface) !important;
-  height: 100dvh;
-}
-
-ion-app {
-  height: 100dvh;
-}
-
-/* When modal opens, ensure purple background is maintained */
-body.backdrop-no-scroll {
-  background-color: var(--color-header-surface) !important;
-}
-
-/* Ionic Component Styles - Map to Design System */
-/* These styles apply Ionic's CSS variables to match our design system */
-
-:root {
-  /* Override Ionic's primary color to use our brand color */
-  /* Note: RGB values and hover/active states are set dynamically by WhitelabelService */
-  --ion-color-primary: var(--color-accent);
-  --ion-color-primary-contrast: var(--color-on-accent);
-  --ion-color-primary-shade: var(--color-accent-hover);
-  --ion-color-primary-tint: var(--color-accent);
-
-  /* Ionic component defaults */
-  --ion-background-color: var(--color-header-surface);
-  --ion-text-color: var(--text-color-default-primary);
-}
-
-ion-header {
-  box-shadow: none;
-}
-
-ion-toolbar {
-  --background: transparent;
-  --border-width: 0;
-}
-
-ion-content {
-  --background: var(--color-background-neutral-primary);
-}
-
-/* iOS: Set base ion-content background to brand secondary for pages */
-.plt-ios ion-content {
-  background: var(--color-header-surface) !important;
-}
-
-/* iOS: Also target any inner background parts */
-.plt-ios ion-content::part(background) {
-  background: var(--color-header-surface) !important;
-}
-
-/* iOS: Target the inner container if it exists */
-.plt-ios ion-content .inner-scroll {
-  background: var(--color-header-surface) !important;
-}
-
-/* Default: Block browser overscroll on all platforms */
-ion-content::part(scroll) {
-  overscroll-behavior-y: none;
-  -webkit-overflow-scrolling: touch;
-  /* Hide scrollbar while maintaining scroll functionality */
-  scrollbar-width: none;
-  /* Firefox */
-  -ms-overflow-style: none;
-  /* IE/Edge */
-}
-
-/* Hide scrollbar for WebKit browsers (Chrome, Safari, iOS) */
-ion-content::part(scroll)::-webkit-scrollbar {
-  display: none;
-}
-
-.ion-page {
-  overscroll-behavior-y: none;
-}
-
-/* iOS-specific: Enable native scroll overshoot/bounce effect */
-.plt-ios ion-content::part(scroll) {
-  overscroll-behavior-y: auto;
-  /* iOS: Set scroll container background to match brand secondary */
-  /* This prevents white background from showing when header fades on scroll */
-  background: var(--color-header-surface) !important;
-}
-
-.plt-ios .ion-page {
-  overscroll-behavior-y: auto;
-  /* Set page background to brand secondary to match header on iOS */
-  background: var(--color-header-surface) !important;
-}
-
-/* iOS-specific: Override ion-content background for pages (not modals) */
-.plt-ios .ion-page > ion-content {
-  --background: var(--color-header-surface);
-}
-
-/* iOS: Ensure modal content stays with neutral background */
-.plt-ios ion-modal ion-content::part(scroll) {
-  background: var(--color-background-neutral-primary) !important;
-}
-
-.plt-ios ion-modal ion-content {
-  background: var(--color-background-neutral-primary) !important;
-}
-
-.plt-ios ion-modal ion-content::part(background) {
-  background: var(--color-background-neutral-primary) !important;
-}
-
-.plt-ios ion-modal ion-content .inner-scroll {
-  background: var(--color-background-neutral-primary) !important;
-}
-
-/* Exception: Lightbox modals should have black background */
-.plt-ios ion-modal .lightbox-content.pdf-viewer,
-.plt-ios ion-modal .lightbox-content.pdf-viewer::part(scroll),
-.plt-ios ion-modal .lightbox-content.pdf-viewer::part(background),
-.plt-ios ion-modal .lightbox-content.pdf-viewer .inner-scroll {
-  background: #000000 !important;
-}
-
-/* Also ensure lightbox is black on all platforms */
-ion-modal .lightbox-content.pdf-viewer {
-  --background: #000000 !important;
-  background: #000000 !important;
-}
-
-ion-modal .lightbox-content.pdf-viewer::part(scroll),
-ion-modal .lightbox-content.pdf-viewer::part(background),
-ion-modal .lightbox-content.pdf-viewer .inner-scroll {
-  background: #000000 !important;
-}
-
-ion-footer {
-  box-shadow: none;
-}
-
-ion-router-outlet {
-  --background: var(--color-header-surface);
-  background: var(--color-header-surface);
-}
-
-ion-refresher {
-  --background: transparent;
-  --color: white;
-}
-
-ion-refresher-content {
-  --color: white;
-}
-
-/* Force spinner color to brand */
-ion-spinner {
-  --color: var(--color-accent) !important;
-  color: var(--color-accent) !important;
-}
-
-ion-modal:not(.ds-bottom-sheet) {
-  --background: var(--color-background-neutral-primary);
-  --border-radius: 16px;
-  --box-shadow: none;
-  /* Prevent modal from resizing when keyboard appears */
-  height: 100% !important;
-  max-height: 100vh !important;
-}
-
-/* Prevent modal container from resizing when keyboard appears */
-ion-modal:not(.ds-bottom-sheet)::part(content) {
-  position: fixed !important;
-  height: 100% !important;
-  max-height: 100vh !important;
-}
-
-/* Prevent ion-content inside modals from resizing */
-ion-modal ion-content {
-  --keyboard-offset: 0px !important;
-  height: 100% !important;
-}
-
-/* Keep neutral cursor over dismissable backdrop areas */
-ion-modal::part(backdrop) {
-  cursor: default !important;
-}
-
-ion-action-sheet {
-  --background: var(--color-background-neutral-primary);
-  --color: var(--text-color-default-primary);
-  --button-background: var(--color-background-neutral-secondary);
-  --button-background-hover: var(--color-background-neutral-tertiary);
-  --button-background-selected: var(--color-accent);
-  --button-color: var(--text-color-default-primary);
-}
-
-ion-action-sheet::part(group) {
-  border-radius: 16px 16px 0 0;
-}
-
-ion-toast {
-  --background: var(--color-background-neutral-strong);
-  --color: var(--text-color-default-primary-inverse);
-  --border-radius: 8px;
-  --box-shadow: var(--box-shadow-lg);
-}
-
-/* ============================================
-   BOTTOM SHEET MODAL STYLES
-   Based on Ionic 6 bottom sheet presentation
-   ============================================ */
-
-/* Base bottom sheet styling */
-.ds-bottom-sheet {
-  --border-radius: 16px;
-  --box-shadow: none;
-  --backdrop-opacity: 0.4;
-  transition: --backdrop-opacity 0.3s ease;
-  /* Modal at top:0 so backdrop covers full screen including status bar */
-    top: 0;
-    height: 100%;
-}
-
-/* Backdrop styling */
-.ds-bottom-sheet::part(backdrop) {
-  background: rgba(0, 0, 0, var(--backdrop-opacity, 0.6));
-}
-
-/* Handle customization */
-.ds-bottom-sheet::part(handle) {
-  background: var(--border-color-default);
-  width: 36px;
-  height: 4px;
-  border-radius: 2px;
-  margin-top: 4px;
-  margin-bottom: 8px;
-}
-
-/* Content area styling */
-.ds-bottom-sheet::part(content) {
-  /* Offset content below status bar (backdrop still covers full screen) */
-  margin-top: var(--app-sheet-top-offset);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-  background: var(--color-background-neutral-primary, #ffffff);
-  box-shadow: var(--box-shadow);
-  position: absolute !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    height: 100% !important;
-    max-height: 100% !important;
-}
-
-/* Remove border radius when fully expanded */
-@media (min-height: 768px) {
-  .ds-bottom-sheet.modal-sheet-expanded::part(content) {
-    border-radius: 0;
-  }
-}
-
-
-
-/* Facility edit: same full-height content fill as other `ds-modal-base` screens (e.g. facility detail) */
-ion-modal.ds-modal-base.facility-edit-sheet::part(content) > * {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-/* Ensure content scrolls properly */
-.ds-bottom-sheet ion-content {
-  --background: transparent;
-}
-
-/* Better mobile experience */
-@media (max-width: 768px) {
-  .ds-bottom-sheet::part(content) {
-    max-width: 100%;
-  }
-}
-
-/* Desktop centering */
-@media (min-width: 769px) {
-  .ds-bottom-sheet::part(content) {
-    max-width: 640px;
-    margin: 0 auto;
-  }
-}
-
-/* ============================================
-   Dynamic Height Action Sheets
-   Make action sheets auto-size to their content
-   ============================================ */
-
-/* Auto-height modal - override base bottom sheet styles */
-.ds-bottom-sheet.auto-height {
-  top: 0 !important;
-  height: 100% !important;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.ds-bottom-sheet.auto-height::part(content) {
-  position: relative !important;
-  height: auto !important;
-  max-height: 80vh !important;
-  top: auto !important;
-  bottom: auto !important;
-  margin-top: auto !important;
-}
-
-/* Ensure action sheet component sizes naturally */
-.ds-bottom-sheet ds-mobile-actions-bottom-sheet {
-  display: block;
-  height: auto;
-}
-
-/* Ensure action list scrolls if needed */
-.ds-bottom-sheet .actions-list {
-  max-height: calc(85dvh - 80px);
-  /* Account for handle, padding, and safe area */
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Ensure ion-content doesn't force 100% height in sheets */
-.ds-bottom-sheet ion-content {
-  height: auto !important;
-  --height: auto;
-}
-
-/* ============================================
-   Bottom Sheet Keyboard Handling
-   Uses separate --keyboard-height-sheet variable to avoid conflicts with modals.
-   The transition is always present so both keyboard-show and keyboard-hide
-   animate smoothly instead of snapping.
-   ============================================ */
-
-.ds-bottom-sheet.auto-height {
-  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.4, 1);
-  transform: translateY(calc(-1 * var(--keyboard-height-sheet, 0px)));
-}
-
-/* ============================================
-   Mobile Modal Styles (Generic Modal Service)
-   ============================================ */
-
-/**
- * Mobile Modal Styles
- * 
- * Global styles for modals opened via DsMobileModalService.
- * These styles are applied to all modals and handle different presentation styles.
- */
-
-/* Base modal styles */
-.ds-mobile-modal {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --border-radius: 16px;
-  --box-shadow: none;
-  --max-width: 640px;
-  --width: 100%;
-}
-
-.ds-mobile-modal::part(content) {
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-/* Fullscreen presentation */
-.ds-modal-fullscreen {
-  --width: 100%;
-  --height: 100%;
-  --border-radius: 0;
-}
-
-.ds-modal-fullscreen::part(content) {
-  border-radius: 0;
-}
-
-/* Card presentation (default iOS modal style) */
-.ds-modal-card {
-  --width: 100%;
-  --max-width: 640px;
-  --height: auto;
-  --max-height: 90%;
-  --border-radius: 16px 16px 0 0;
-}
-
-.ds-modal-card::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: var(--box-shadow);
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-/* Sheet presentation (bottom sheet with breakpoints) */
-.ds-modal-sheet {
-  --width: 100%;
-  --max-width: 640px;
-  --height: auto;
-  --border-radius: 16px 16px 0 0;
-}
-
-.ds-modal-sheet::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: var(--box-shadow);
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-.ds-modal-sheet::part(handle) {
-  background: var(--border-color-default);
-  width: 36px;
-  height: 4px;
-  border-radius: 2px;
-  margin: 8px auto 0;
-}
-
-/* Backdrop styles */
-.ds-mobile-modal::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-/* Animations */
-.ds-mobile-modal.modal-card-enter-active,
-.ds-mobile-modal.modal-sheet-enter-active {
-  animation: slideUpModal 0.5s ease-out;
-}
-
-.ds-mobile-modal.modal-card-leave-active,
-.ds-mobile-modal.modal-sheet-leave-active {
-  animation: slideDownModal 0.8s ease-in;
-}
-
-.ds-mobile-modal.modal-fullscreen-enter-active {
-  animation: fadeInModal 0.4s ease-out;
-}
-
-.ds-mobile-modal.modal-fullscreen-leave-active {
-  animation: fadeOutModal 0.4s ease-in;
-}
-
-@keyframes slideUpModal {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDownModal {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes fadeInModal {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOutModal {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-/* Safe area handling for notched devices */
-@supports (padding: env(safe-area-inset-top)) {
-  .ds-modal-fullscreen::part(content) {
-    padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-}
-
-/* Dark mode support removed - modals should not change based on system dark mode */
-
-/* Accessibility: Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-
-  .ds-mobile-modal.modal-card-enter-active,
-  .ds-mobile-modal.modal-card-leave-active,
-  .ds-mobile-modal.modal-sheet-enter-active,
-  .ds-mobile-modal.modal-sheet-leave-active,
-  .ds-mobile-modal.modal-fullscreen-enter-active,
-  .ds-mobile-modal.modal-fullscreen-leave-active {
-    animation: none;
-  }
-}
-
-/* ============================================
-   ION-TAB-BUTTON CUSTOMIZATION
-   ============================================ */
-
-/* Set gap for button-inner to control spacing between icon and label */
-ion-tab-button::part(native) {
-  gap: 2px;
-}
-
-/* ============================================
-   Base Modal Styles (Shared across all modals)
-   ============================================ */
-
-ion-modal.ds-modal-base {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --width: 100%;
-  --max-width: 640px;
-  --height: 100dvh;
-    /* Full viewport height - content top offset creates gap */
-  --border-radius: 16px 16px 0 0;
-}
-
-ion-modal.ds-modal-base::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--color-background-neutral-primary, #ffffff);
-  max-width: 640px;
-  margin: 0 auto;
-  /* Use top positioning instead of margin-top to work with fixed positioning */
-    top: var(--app-sheet-top-offset) !important;
-    height: calc(100% - var(--app-sheet-top-offset)) !important;
-    max-height: calc(100dvh - var(--app-sheet-top-offset)) !important;
-}
-
-/* Auto-height support for base modals */
-.ds-modal-base.auto-height {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.ds-modal-base.auto-height::part(content) {
-  height: auto !important;
-  margin-top: auto !important;
-  position: relative !important;
-  top: auto !important;
-  max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
-  bottom: 0 !important;
-}
-
-.ds-modal-base.auto-height ion-content {
-  height: auto !important;
-  --height: auto;
-}
-
-.ds-modal-base::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.ds-modal-base ion-content {
-  --background: var(--color-background-neutral-primary, #ffffff);
-}
-
-/* ============================================
-   Post Detail Modal Styles
-   ============================================ */
-
-.ds-post-detail-modal {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --width: 100%;
-  --max-width: 640px;
-  --height: 100dvh;
-  /* Full viewport height - content top offset creates gap */
-  --border-radius: 16px 16px 0 0;
-}
-
-.ds-post-detail-modal::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--color-background-neutral-primary, #ffffff);
-  max-width: 640px;
-  margin: 0 auto;
-  /* Use top positioning instead of margin-top to work with fixed positioning */
-  top: var(--app-sheet-top-offset) !important;
-  height: calc(100% - var(--app-sheet-top-offset)) !important;
-  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
-}
-
-.ds-post-detail-modal::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.ds-post-detail-modal ion-content {
-  --background: var(--color-background-neutral-primary, #ffffff);
-}
-
-/* Control the presenting element (page behind) border radius */
-ion-router-outlet.ion-page-hidden,
-.ion-page.ion-page-hidden {
-  border-radius: 16px 16px 0 0 !important;
-  overflow: hidden;
-}
-
-/* Override Ionic's default 10px border-radius */
-body.backdrop-no-scroll ion-router-outlet {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* Target the router outlet when modal is active */
-ion-router-outlet:not(.ion-page-hidden) {
-  border-radius: 16px 16px 0 0 !important;
-  transition: border-radius 0.3s ease, transform 0.3s ease;
-}
-
-/* Adjust the presenting element animation */
-.modal-card-enter-active ion-router-outlet,
-.modal-card-enter-active .ion-page {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* When page is scaled behind modal */
-.ion-page-invisible {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* Override Ionic's default presenting page styles */
-.modal-shadow .ion-page {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* ============================================
-   More Menu Sheet
-   Mobile: sits above the bottom tab bar, clipped so
-   backdrop doesn't bleed over it.
-   Desktop: behaves like a normal bottom sheet (tab bar
-   is at the top, no special handling needed).
-   ============================================ */
-
-@media (max-width: 767px) {
-  .ds-more-menu-sheet {
-    z-index: 100 !important;
-    bottom: var(--ds-more-menu-tab-bar-offset, 64px) !important;
-    height: calc(100% - var(--ds-more-menu-tab-bar-offset, 64px)) !important;
-    overflow: hidden;
-  }
-
-  .ds-more-menu-sheet.auto-height {
-    padding-bottom: 0;
-  }
-}
-
-.ds-more-menu-sheet .bottom-sheet-wrapper {
-  min-height: 0 !important;
-}
-
-/* Hide modal shadow when auto-height sheet is active */
-body:has(.ds-bottom-sheet.auto-height) .modal-shadow {
-  display: none !important;
-}
-
-ion-modal.show-modal ~ ion-router-outlet,
-ion-modal.show-modal ~ * ion-router-outlet {
-  border-radius: 16px 16px 0 0 !important;
-  transform: scale(0.915) !important;
-}
-
-/* Most important - override any Ionic defaults */
-ion-router-outlet[style*="border-radius"] {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* Target app root with modal */
-ion-app.ion-page-hidden ion-router-outlet,
-ion-app ion-router-outlet.ion-page-hidden {
-  border-radius: 16px 16px 0 0 !important;
-}
-
-/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
-
-/* Dark mode support removed - modals should not change based on system dark mode */
-
-/* ============================================
-   Chat Modal Styles
-   ============================================ */
-
-.ds-chat-modal {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --width: 100%;
-  --max-width: 640px;
-  --height: 100dvh;
-  /* Full viewport height - content top offset creates gap */
-  --border-radius: 16px 16px 0 0;
-}
-
-.ds-chat-modal::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--color-background-neutral-primary, #ffffff);
-  max-width: 640px;
-  margin: 0 auto;
-  /* Use top positioning instead of margin-top to work with fixed positioning */
-  top: var(--app-sheet-top-offset) !important;
-  height: calc(100% - var(--app-sheet-top-offset)) !important;
-  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
-}
-
-.ds-chat-modal::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.ds-chat-modal ion-content {
-  --background: var(--color-background-neutral-primary, #ffffff);
-}
-
-/* Dark mode support removed - modals should not change based on system dark mode */
-
-/* ============================================
-   Handbook Detail Modal Styles
-   ============================================ */
-
-.ds-handbook-detail-modal {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --width: 100%;
-  --max-width: 640px;
-  --height: 100dvh;
-  /* Use dynamic viewport height instead of 100% */
-  --border-radius: 16px 16px 0 0;
-  margin-top: var(--app-sheet-top-offset);
-}
-
-.ds-handbook-detail-modal::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--color-background-neutral-primary, #ffffff);
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-.ds-handbook-detail-modal::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.ds-handbook-detail-modal ion-content {
-  --background: var(--color-background-neutral-primary, #ffffff);
-}
-
-/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ds-handbook-detail-modal {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-
-  .ds-handbook-detail-modal::part(content) {
-    background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-
-  .ds-handbook-detail-modal::part(backdrop) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-
-  .ds-handbook-detail-modal ion-content {
-    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
-  }
-}
-
-/* ============================================
-   Whitelabel Demo Modal Styles
-   ============================================ */
-
-.ds-whitelabel-demo-modal {
-  --background: var(--color-background-neutral-primary, #ffffff);
-  --width: 100%;
-  --max-width: 640px;
-  --height: 100dvh;
-  /* Full viewport height - content top offset creates gap */
-  --border-radius: 16px 16px 0 0;
-}
-
-.ds-whitelabel-demo-modal::part(content) {
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  background: var(--color-background-neutral-primary, #ffffff);
-  max-width: 640px;
-  margin: 0 auto;
-  /* Use top positioning instead of margin-top to work with fixed positioning */
-  top: var(--app-sheet-top-offset) !important;
-  height: calc(100% - var(--app-sheet-top-offset)) !important;
-  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
-}
-
-.ds-whitelabel-demo-modal::part(backdrop) {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.ds-whitelabel-demo-modal ion-content {
-  --background: #ffffff;
-}
-
-/* Dark mode support removed - modals should not change based on system dark mode */
-
-/* ============================================
-   GLOBAL BUTTON INTERACTIVE STATES
-   Consistent button behavior across all ds-button instances
-   ============================================ */
-
-/* Base transition */
-ds-button .btn {
-  transition: all 0.2s ease !important;
-}
-
-/* Active/pressed/click state - scale down slightly */
-ds-button .btn:active:not(:disabled) {
-  transform: scale(0.98) !important;
-}
-
-/* FORCE hover background color directly - only for primary variant */
-ds-button[variant="primary"]:hover .btn {
-  background-color: var(--color-accent-hover) !important;
-}
+/**
+ * Ionic-Specific Styles
+ * 
+ * This file contains all styles that are specific to Ionic Framework and mobile app usage.
+ * These styles are not needed for web-only or design system library builds.
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+
+/* Swiper styles for image carousels */
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+
+/* Mobile common styles */
+/* Note: mobile-common.css is included in @propbinder/design-system/styles/globals.css */
+
+/* Italic font faces (upright weights are declared in @propbinder/design-system/styles/globals.css) */
+@font-face {
+  font-family: "Brockmann";
+  src: url("/Brockmann/brockmann-regularitalic-webfont.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Brockmann";
+  src: url("/Brockmann/brockmann-mediumitalic-webfont.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Brockmann";
+  src: url("/Brockmann/brockmann-semibolditalic-webfont.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Ionic-Specific CSS Variables */
+:root {
+  /* Mobile-specific brand color for headers/backgrounds */
+  --color-brand-secondary: #221a4c;
+
+  /* Ionic Keyboard Appearance - force light theme */
+  --ion-keyboard-color: #ffffff;
+  --ion-keyboard-background: #ffffff;
+  --ion-keyboard-text-color: #000000;
+  color-scheme: light;
+
+  /* Layout - Mobile Navigation */
+  --mobile-tab-bar-height: 64px;
+  --mobile-content-spacing: 20px;
+
+  /* Tab Bar Height - Used for FAB positioning and other layout calculations */
+  /* This is set by ds-mobile-tab-bar and consumed by ds-mobile-fab */
+  --ds-tab-bar-height: 64px;
+
+  /* ============================================
+     SPRING ANIMATIONS
+     Physics-based easing curves with natural bounce
+     ============================================ */
+
+  /* Spring Curves */
+  --spring-curve-bouncy: linear(0, 0.0209, 0.0772, 0.1598, 0.2602, 0.3709, 0.4854, 0.5984, 0.7056, 0.8038, 0.8908, 0.9653, 1.0267, 1.075, 1.111, 1.1354, 1.1497, 1.1551, 1.1532, 1.1455, 1.1335, 1.1184, 1.1014, 1.0837, 1.066, 1.0492, 1.0336, 1.0197, 1.0077, 0.9977, 0.9898, 0.9838, 0.9796, 0.9771, 0.976, 0.9761, 0.9771, 0.9788, 0.9811, 0.9837, 0.9864, 0.9892, 0.9918, 0.9943, 0.9965, 0.9984, 1.0001, 1.0013, 1.0023, 1.003, 1.0035, 1);
+
+  --spring-curve-gentle: linear(0, 0.2, 0.5, 0.8, 1.02, 1.01, 1);
+
+  --spring-curve-snappy: linear(0, 0.3, 0.7, 1.05, 0.98, 1);
+
+  --spring-curve-smooth: linear(0, 0.215, 0.61, 0.855, 1);
+
+  /* Spring Durations */
+  --spring-duration-fast: 400ms;
+  --spring-duration-medium: 700ms;
+  --spring-duration-slow: 1000ms;
+
+  /* Spring Presets (curve + duration) */
+  --spring-bouncy: var(--spring-duration-medium) var(--spring-curve-bouncy);
+  --spring-gentle: var(--spring-duration-fast) var(--spring-curve-gentle);
+  --spring-snappy: var(--spring-duration-fast) var(--spring-curve-snappy);
+  --spring-smooth: var(--spring-duration-medium) var(--spring-curve-smooth);
+
+  /* ============================================
+     SAFE AREA / STATUS BAR CONFIGURATION
+     
+     Controls how sheets and modals position relative to the status bar.
+     
+     IMPORTANT: This works with StatusBar.setOverlaysWebView() in app.ts
+     - With overlay: false (default) - system handles status bar, use safe-area-inset-top
+     - With overlay: true - WebView extends under status bar
+     
+     To change behavior, update BOTH:
+     1. app.ts: StatusBar.setOverlaysWebView({ overlay: true/false })
+     2. These CSS variables below
+     ============================================ */
+
+  /* Normalized safe-area variables consumed by app layout styles.
+     Defaults to env() and can be overridden at runtime from SafeArea plugin. */
+  --app-safe-top: env(safe-area-inset-top, 0px);
+  --app-safe-right: env(safe-area-inset-right, 0px);
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-safe-left: env(safe-area-inset-left, 0px);
+
+  /* Sheet/modal top offset - positions content below status bar area */
+  /* Uses max() to ensure at least 32px offset even on devices without notch */
+  /* +12px adds breathing room below the status bar */
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 12px);
+
+  /* Header top offset - used to fine-tune header position on iOS with overlay: true */
+  /* On web (no safe area), this should be 0px. On iOS, it compensates for status bar overlap */
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 16px));
+}
+
+/* Android-only top safe-area tuning:
+   add 8px extra breathing room above header/sheet content. */
+.plt-android {
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 20px);
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 8px));
+}
+
+/* Global Styles for Mobile App */
+html {
+  /* Safe Area Variables - set here according to Ionic documentation */
+  --ion-safe-area-top: env(safe-area-inset-top);
+  --ion-safe-area-bottom: env(safe-area-inset-bottom);
+  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-right: env(safe-area-inset-right);
+}
+
+html,
+body {
+  /* Background color must match theme-color for iOS PWA status bar */
+  background-color: var(--color-header-surface);
+  color: var(--text-color-default-primary);
+  font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
+
+  /* Ensure full height for iOS PWA */
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  /* Don't add padding to html/body - let Ionic components handle safe areas */
+}
+
+/* iOS-specific: Purple background for overshoot areas to match dark header */
+.plt-ios html,
+.plt-ios body {
+  background-color: var(--color-header-surface) !important;
+}
+
+.plt-ios ion-app {
+  background-color: var(--color-header-surface) !important;
+  height: 100dvh;
+}
+
+ion-app {
+  height: 100dvh;
+}
+
+/* When modal opens, ensure purple background is maintained */
+body.backdrop-no-scroll {
+  background-color: var(--color-header-surface) !important;
+}
+
+/* Ionic Component Styles - Map to Design System */
+/* These styles apply Ionic's CSS variables to match our design system */
+
+:root {
+  /* Override Ionic's primary color to use our brand color */
+  /* Note: RGB values and hover/active states are set dynamically by WhitelabelService */
+  --ion-color-primary: var(--color-accent);
+  --ion-color-primary-contrast: var(--color-on-accent);
+  --ion-color-primary-shade: var(--color-accent-hover);
+  --ion-color-primary-tint: var(--color-accent);
+
+  /* Ionic component defaults */
+  --ion-background-color: var(--color-header-surface);
+  --ion-text-color: var(--text-color-default-primary);
+}
+
+ion-header {
+  box-shadow: none;
+}
+
+ion-toolbar {
+  --background: transparent;
+  --border-width: 0;
+}
+
+ion-content {
+  --background: var(--color-background-neutral-primary);
+}
+
+/* iOS: Set base ion-content background to brand secondary for pages */
+.plt-ios ion-content {
+  background: var(--color-header-surface) !important;
+}
+
+/* iOS: Also target any inner background parts */
+.plt-ios ion-content::part(background) {
+  background: var(--color-header-surface) !important;
+}
+
+/* iOS: Target the inner container if it exists */
+.plt-ios ion-content .inner-scroll {
+  background: var(--color-header-surface) !important;
+}
+
+/* Default: Block browser overscroll on all platforms */
+ion-content::part(scroll) {
+  overscroll-behavior-y: none;
+  -webkit-overflow-scrolling: touch;
+  /* Hide scrollbar while maintaining scroll functionality */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE/Edge */
+}
+
+/* Hide scrollbar for WebKit browsers (Chrome, Safari, iOS) */
+ion-content::part(scroll)::-webkit-scrollbar {
+  display: none;
+}
+
+.ion-page {
+  overscroll-behavior-y: none;
+}
+
+/* iOS-specific: Enable native scroll overshoot/bounce effect */
+.plt-ios ion-content::part(scroll) {
+  overscroll-behavior-y: auto;
+  /* iOS: Set scroll container background to match brand secondary */
+  /* This prevents white background from showing when header fades on scroll */
+  background: var(--color-header-surface) !important;
+}
+
+.plt-ios .ion-page {
+  overscroll-behavior-y: auto;
+  /* Set page background to brand secondary to match header on iOS */
+  background: var(--color-header-surface) !important;
+}
+
+/* iOS-specific: Override ion-content background for pages (not modals) */
+.plt-ios .ion-page > ion-content {
+  --background: var(--color-header-surface);
+}
+
+/* iOS: Ensure modal content stays with neutral background */
+.plt-ios ion-modal ion-content::part(scroll) {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content::part(background) {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+.plt-ios ion-modal ion-content .inner-scroll {
+  background: var(--color-background-neutral-primary) !important;
+}
+
+/* Exception: Lightbox modals should have black background */
+.plt-ios ion-modal .lightbox-content.pdf-viewer,
+.plt-ios ion-modal .lightbox-content.pdf-viewer::part(scroll),
+.plt-ios ion-modal .lightbox-content.pdf-viewer::part(background),
+.plt-ios ion-modal .lightbox-content.pdf-viewer .inner-scroll {
+  background: #000000 !important;
+}
+
+/* Also ensure lightbox is black on all platforms */
+ion-modal .lightbox-content.pdf-viewer {
+  --background: #000000 !important;
+  background: #000000 !important;
+}
+
+ion-modal .lightbox-content.pdf-viewer::part(scroll),
+ion-modal .lightbox-content.pdf-viewer::part(background),
+ion-modal .lightbox-content.pdf-viewer .inner-scroll {
+  background: #000000 !important;
+}
+
+ion-footer {
+  box-shadow: none;
+}
+
+ion-router-outlet {
+  --background: var(--color-header-surface);
+  background: var(--color-header-surface);
+}
+
+ion-refresher {
+  --background: transparent;
+  --color: white;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* Force spinner color to brand */
+ion-spinner {
+  --color: var(--color-accent) !important;
+  color: var(--color-accent) !important;
+}
+
+ion-modal:not(.ds-bottom-sheet) {
+  --background: var(--color-background-neutral-primary);
+  --border-radius: 16px;
+  --box-shadow: none;
+  /* Prevent modal from resizing when keyboard appears */
+  height: 100% !important;
+  max-height: 100vh !important;
+}
+
+/* Prevent modal container from resizing when keyboard appears */
+ion-modal:not(.ds-bottom-sheet)::part(content) {
+  position: fixed !important;
+  height: 100% !important;
+  max-height: 100vh !important;
+}
+
+/* Prevent ion-content inside modals from resizing */
+ion-modal ion-content {
+  --keyboard-offset: 0px !important;
+  height: 100% !important;
+}
+
+/* Keep neutral cursor over dismissable backdrop areas */
+ion-modal::part(backdrop) {
+  cursor: default !important;
+}
+
+ion-action-sheet {
+  --background: var(--color-background-neutral-primary);
+  --color: var(--text-color-default-primary);
+  --button-background: var(--color-background-neutral-secondary);
+  --button-background-hover: var(--color-background-neutral-tertiary);
+  --button-background-selected: var(--color-accent);
+  --button-color: var(--text-color-default-primary);
+}
+
+ion-action-sheet::part(group) {
+  border-radius: 16px 16px 0 0;
+}
+
+ion-toast {
+  --background: var(--color-background-neutral-strong);
+  --color: var(--text-color-default-primary-inverse);
+  --border-radius: 8px;
+  --box-shadow: var(--box-shadow-lg);
+}
+
+/* ============================================
+   BOTTOM SHEET MODAL STYLES
+   Based on Ionic 6 bottom sheet presentation
+   ============================================ */
+
+/* Base bottom sheet styling */
+.ds-bottom-sheet {
+  --border-radius: 16px;
+  --box-shadow: none;
+  --backdrop-opacity: 0.4;
+  transition: --backdrop-opacity 0.3s ease;
+  /* Modal at top:0 so backdrop covers full screen including status bar */
+    top: 0;
+    height: 100%;
+}
+
+/* Backdrop styling */
+.ds-bottom-sheet::part(backdrop) {
+  background: rgba(0, 0, 0, var(--backdrop-opacity, 0.6));
+}
+
+/* Handle customization */
+.ds-bottom-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+
+/* Content area styling */
+.ds-bottom-sheet::part(content) {
+  /* Offset content below status bar (backdrop still covers full screen) */
+  margin-top: var(--app-sheet-top-offset);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  background: var(--color-background-neutral-primary, #ffffff);
+  box-shadow: var(--box-shadow);
+  position: absolute !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    max-height: 100% !important;
+}
+
+/* Remove border radius when fully expanded */
+@media (min-height: 768px) {
+  .ds-bottom-sheet.modal-sheet-expanded::part(content) {
+    border-radius: 0;
+  }
+}
+
+
+
+/* Facility edit: same full-height content fill as other `ds-modal-base` screens (e.g. facility detail) */
+ion-modal.ds-modal-base.facility-edit-sheet::part(content) > * {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Ensure content scrolls properly */
+.ds-bottom-sheet ion-content {
+  --background: transparent;
+}
+
+/* Better mobile experience */
+@media (max-width: 768px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 100%;
+  }
+}
+
+/* Desktop centering */
+@media (min-width: 769px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
+/* ============================================
+   Dynamic Height Action Sheets
+   Make action sheets auto-size to their content
+   ============================================ */
+
+/* Auto-height modal - override base bottom sheet styles */
+.ds-bottom-sheet.auto-height {
+  top: 0 !important;
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.ds-bottom-sheet.auto-height::part(content) {
+  position: relative !important;
+  height: auto !important;
+  max-height: 80vh !important;
+  top: auto !important;
+  bottom: auto !important;
+  margin-top: auto !important;
+}
+
+/* Ensure action sheet component sizes naturally */
+.ds-bottom-sheet ds-mobile-actions-bottom-sheet {
+  display: block;
+  height: auto;
+}
+
+/* Ensure action list scrolls if needed */
+.ds-bottom-sheet .actions-list {
+  max-height: calc(85dvh - 80px);
+  /* Account for handle, padding, and safe area */
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Ensure ion-content doesn't force 100% height in sheets */
+.ds-bottom-sheet ion-content {
+  height: auto !important;
+  --height: auto;
+}
+
+/* ============================================
+   Bottom Sheet Keyboard Handling
+   Uses separate --keyboard-height-sheet variable to avoid conflicts with modals.
+   The transition is always present so both keyboard-show and keyboard-hide
+   animate smoothly instead of snapping.
+   ============================================ */
+
+.ds-bottom-sheet.auto-height {
+  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.4, 1);
+  transform: translateY(calc(-1 * var(--keyboard-height-sheet, 0px)));
+}
+
+/* ============================================
+   Mobile Modal Styles (Generic Modal Service)
+   ============================================ */
+
+/**
+ * Mobile Modal Styles
+ * 
+ * Global styles for modals opened via DsMobileModalService.
+ * These styles are applied to all modals and handle different presentation styles.
+ */
+
+/* Base modal styles */
+.ds-mobile-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --border-radius: 16px;
+  --box-shadow: none;
+  --max-width: 640px;
+  --width: 100%;
+}
+
+.ds-mobile-modal::part(content) {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Fullscreen presentation */
+.ds-modal-fullscreen {
+  --width: 100%;
+  --height: 100%;
+  --border-radius: 0;
+}
+
+.ds-modal-fullscreen::part(content) {
+  border-radius: 0;
+}
+
+/* Card presentation (default iOS modal style) */
+.ds-modal-card {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --max-height: 90%;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-card::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Sheet presentation (bottom sheet with breakpoints) */
+.ds-modal-sheet {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-sheet::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-modal-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin: 8px auto 0;
+}
+
+/* Backdrop styles */
+.ds-mobile-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+/* Animations */
+.ds-mobile-modal.modal-card-enter-active,
+.ds-mobile-modal.modal-sheet-enter-active {
+  animation: slideUpModal 0.5s ease-out;
+}
+
+.ds-mobile-modal.modal-card-leave-active,
+.ds-mobile-modal.modal-sheet-leave-active {
+  animation: slideDownModal 0.8s ease-in;
+}
+
+.ds-mobile-modal.modal-fullscreen-enter-active {
+  animation: fadeInModal 0.4s ease-out;
+}
+
+.ds-mobile-modal.modal-fullscreen-leave-active {
+  animation: fadeOutModal 0.4s ease-in;
+}
+
+@keyframes slideUpModal {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDownModal {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes fadeInModal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutModal {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+/* Safe area handling for notched devices */
+@supports (padding: env(safe-area-inset-top)) {
+  .ds-modal-fullscreen::part(content) {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Dark mode support removed - modals should not change based on system dark mode */
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+
+  .ds-mobile-modal.modal-card-enter-active,
+  .ds-mobile-modal.modal-card-leave-active,
+  .ds-mobile-modal.modal-sheet-enter-active,
+  .ds-mobile-modal.modal-sheet-leave-active,
+  .ds-mobile-modal.modal-fullscreen-enter-active,
+  .ds-mobile-modal.modal-fullscreen-leave-active {
+    animation: none;
+  }
+}
+
+/* ============================================
+   ION-TAB-BUTTON CUSTOMIZATION
+   ============================================ */
+
+/* Set gap for button-inner to control spacing between icon and label */
+ion-tab-button::part(native) {
+  gap: 2px;
+}
+
+/* ============================================
+   Base Modal Styles (Shared across all modals)
+   ============================================ */
+
+ion-modal.ds-modal-base {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+    /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+ion-modal.ds-modal-base::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+    top: var(--app-sheet-top-offset) !important;
+    height: calc(100% - var(--app-sheet-top-offset)) !important;
+    max-height: calc(100dvh - var(--app-sheet-top-offset)) !important;
+}
+
+/* Auto-height support for base modals */
+.ds-modal-base.auto-height {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.ds-modal-base.auto-height::part(content) {
+  height: auto !important;
+  margin-top: auto !important;
+  position: relative !important;
+  top: auto !important;
+  max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+  bottom: 0 !important;
+}
+
+.ds-modal-base.auto-height ion-content {
+  height: auto !important;
+  --height: auto;
+}
+
+.ds-modal-base::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-modal-base ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* ============================================
+   Post Detail Modal Styles
+   ============================================ */
+
+.ds-post-detail-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-post-detail-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+}
+
+.ds-post-detail-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-post-detail-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Control the presenting element (page behind) border radius */
+ion-router-outlet.ion-page-hidden,
+.ion-page.ion-page-hidden {
+  border-radius: 16px 16px 0 0 !important;
+  overflow: hidden;
+}
+
+/* Override Ionic's default 10px border-radius */
+body.backdrop-no-scroll ion-router-outlet {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Target the router outlet when modal is active */
+ion-router-outlet:not(.ion-page-hidden) {
+  border-radius: 16px 16px 0 0 !important;
+  transition: border-radius 0.3s ease, transform 0.3s ease;
+}
+
+/* Adjust the presenting element animation */
+.modal-card-enter-active ion-router-outlet,
+.modal-card-enter-active .ion-page {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* When page is scaled behind modal */
+.ion-page-invisible {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Override Ionic's default presenting page styles */
+.modal-shadow .ion-page {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* ============================================
+   More Menu Sheet
+   Mobile: sits above the bottom tab bar, clipped so
+   backdrop doesn't bleed over it.
+   Desktop: behaves like a normal bottom sheet (tab bar
+   is at the top, no special handling needed).
+   ============================================ */
+
+@media (max-width: 767px) {
+  .ds-more-menu-sheet {
+    z-index: 100 !important;
+    bottom: var(--ds-more-menu-tab-bar-offset, 64px) !important;
+    height: calc(100% - var(--ds-more-menu-tab-bar-offset, 64px)) !important;
+    overflow: hidden;
+  }
+
+  .ds-more-menu-sheet.auto-height {
+    padding-bottom: 0;
+  }
+}
+
+.ds-more-menu-sheet .bottom-sheet-wrapper {
+  min-height: 0 !important;
+}
+
+/* Hide modal shadow when auto-height sheet is active */
+body:has(.ds-bottom-sheet.auto-height) .modal-shadow {
+  display: none !important;
+}
+
+ion-modal.show-modal ~ ion-router-outlet,
+ion-modal.show-modal ~ * ion-router-outlet {
+  border-radius: 16px 16px 0 0 !important;
+  transform: scale(0.915) !important;
+}
+
+/* Most important - override any Ionic defaults */
+ion-router-outlet[style*="border-radius"] {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Target app root with modal */
+ion-app.ion-page-hidden ion-router-outlet,
+ion-app ion-router-outlet.ion-page-hidden {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
+
+/* Dark mode support removed - modals should not change based on system dark mode */
+
+/* ============================================
+   Chat Modal Styles
+   ============================================ */
+
+.ds-chat-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-chat-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+}
+
+.ds-chat-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-chat-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Dark mode support removed - modals should not change based on system dark mode */
+
+/* ============================================
+   Handbook Detail Modal Styles
+   ============================================ */
+
+.ds-handbook-detail-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+  /* Use dynamic viewport height instead of 100% */
+  --border-radius: 16px 16px 0 0;
+  margin-top: var(--app-sheet-top-offset);
+}
+
+.ds-handbook-detail-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-handbook-detail-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-handbook-detail-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ds-handbook-detail-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+
+  .ds-handbook-detail-modal::part(content) {
+    background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+
+  .ds-handbook-detail-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .ds-handbook-detail-modal ion-content {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+}
+
+/* ============================================
+   Whitelabel Demo Modal Styles
+   ============================================ */
+
+.ds-whitelabel-demo-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-whitelabel-demo-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+}
+
+.ds-whitelabel-demo-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-whitelabel-demo-modal ion-content {
+  --background: #ffffff;
+}
+
+/* Dark mode support removed - modals should not change based on system dark mode */
+
+/* ============================================
+   GLOBAL BUTTON INTERACTIVE STATES
+   Consistent button behavior across all ds-button instances
+   ============================================ */
+
+/* Base transition */
+ds-button .btn {
+  transition: all 0.2s ease !important;
+}
+
+/* Active/pressed/click state - scale down slightly */
+ds-button .btn:active:not(:disabled) {
+  transform: scale(0.98) !important;
+}
+
+/* FORCE hover background color directly - only for primary variant */
+ds-button[variant="primary"]:hover .btn {
+  background-color: var(--color-accent-hover) !important;
+}