@use 'sass:meta';
@use 'styles/font/material-icons';

@use 'sass:math';

@import '@fontsource/open-sans/400.css';
@import '@fontsource/open-sans/400-italic.css';
@import '@fontsource/open-sans/700.css';
@import '@fontsource/open-sans/300.css';

@include meta.load-css('styles/_css-variables');
@include meta.load-css('styles/themes');
@include meta.load-css('styles/page');
@include meta.load-css('styles/util');
@include meta.load-css('styles/components/components');

* {
  //box-shadow: none !important;
  user-select: none;
  -webkit-touch-callout: none;
}

p,
input,
textarea,
pre,
[contenteditable] {
  user-select: text;
  -webkit-touch-callout: default;
}

body.isDisableAnimations {
  *,
  *:after,
  *:before {
    transition: none !important;
    animation: none !important;
  }
}

// ===============================
// iOS Safe Area Handling
// ===============================

// Native mobile platforms get safe area padding
body.isNativeMobile {
  // Apply safe area padding to the viewport
  padding-top: var(--safe-area-top);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);

  // Bottom padding only when keyboard is not visible
  // Skip when bottom nav is present — the nav and content area handle it themselves
  &:not(.isKeyboardVisible):not(.hasMobileBottomNav) {
    padding-bottom: var(--safe-area-bottom);
  }
}

// Native Android's opaque system bars need the full inset, not the iOS half
// default — see --bottom-nav-safe-area in _css-variables.scss (#8792).
body.isNativeMobile:not(.isIOS) {
  --bottom-nav-safe-area: var(--safe-area-bottom);
}

// iOS-specific adjustments
body.isIOS {
  // Prevent overscroll bounce effect
  overscroll-behavior: none;

  // Ensure the viewport extends behind safe areas
  // This allows us to color the areas behind notch/home indicator
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

// Keyboard visible adjustments
body.isKeyboardVisible {
  // Remove bottom safe area when keyboard is visible
  padding-bottom: 0;

  // Optionally adjust for keyboard height
  // Elements can use --keyboard-height to position above keyboard
}

// ===============================
// iPad-Specific Optimizations
// ===============================

body.isIPad {
  // iPad has more screen real estate - use wider content
  --component-max-width: 900px;

  // Larger touch targets are less necessary on iPad
  --touch-target-min: 40px;

  // Better use of horizontal space in landscape
  @media (min-width: 1024px) {
    --component-max-width: 1000px;
  }

  // Split-view support: when iPad is in split-view mode,
  // the viewport is narrower - detect and adjust
  @media (max-width: 500px) {
    // In narrow split-view, use phone-like layout
    --component-max-width: 100%;
  }

  // iPad in landscape with enough space for side-by-side content
  @media (min-width: 1024px) and (orientation: landscape) {
    // Wider dialogs on iPad landscape
    .mat-mdc-dialog-container {
      max-width: 700px;
    }
  }
}
