.simplebar-scrollbar:before {
  background-color: var(--palette-text-disabled);
}
.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.48;
}

/* ============================================
   SAFARI-SPECIFIC CSS FIXES FOR iPAD
   Reference: IPAD_CSS_GUIDE.md Section 4
   Version: 2.0
   ============================================ */

/* -----------------------------------------
   1. PREVENT INPUT ZOOM ON FOCUS (CRITICAL)
   ----------------------------------------- */

/*
 * Safari auto-zooms when input font-size < 16px
 * This prevents zoom while maintaining user accessibility
 */
input,
textarea,
select,
[contenteditable] {
  font-size: max(16px, 1rem);
}

/* If you need visually smaller text, use transform instead */
.small-input {
  font-size: 16px;
  transform: scale(0.875); /* Visually 14px but Safari won't zoom */
  transform-origin: left center;
}

/* -----------------------------------------
   2. SAFARI VIEWPORT HEIGHT FIX
   ----------------------------------------- */

/*
 * Safari calculates 100vh including browser UI
 * Use modern viewport units with fallbacks
 */
html {
  height: 100%;
  /* Safari-specific height fix */
  height: -webkit-fill-available;
}

body {
  min-height: 100vh; /* Fallback for all browsers */
  min-height: -webkit-fill-available; /* Safari < 15.4, iOS < 15.4 */
  min-height: 100dvh; /* Safari 15.4+, iOS 15.4+ (dynamic viewport) */
}

/* For full-height containers */
.full-height,
.dashboard-container,
[data-full-height="true"] {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
}

/* Small viewport height (always accounts for UI) */
.sticky-header,
[data-viewport="small"] {
  height: 100svh;
}

/* Large viewport height (UI hidden) */
.flexible-content,
[data-viewport="large"] {
  min-height: 100lvh;
}

/* -----------------------------------------
   3. PREVENT TEXT SIZE ADJUSTMENT ON ROTATION
   ----------------------------------------- */

/*
 * Safari auto-zooms text when rotating from portrait to landscape
 * Never use 'none' - it disables user zoom (accessibility issue)
 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* -----------------------------------------
   4. FLEXBOX SAFARI FIXES
   ----------------------------------------- */

/*
 * Safari needs explicit flex-basis for correct wrapping calculation
 * Safari ignores min/max width when calculating wrapping
 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  /* Safari requires explicit flex-basis */
  flex: 1 1 300px; /* grow shrink basis */
  /* Prevent overflow in nested layouts */
  min-width: 0;
}

/* Fix for nested flexbox height issues */
.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-child {
  flex: 1 1;
  /* CRITICAL: Safari needs this to respect parent height */
  min-height: 0;
  min-width: 0;
}

/* Fix for flex items with images */
.flex-with-image {
  display: flex;
  flex-direction: column;
}

.flex-with-image img {
  width: 100%;
  height: auto;
  /* Prevent Safari from shrinking images unexpectedly */
  flex-shrink: 0;
}

/* -----------------------------------------
   5. CSS GRID SAFARI FIXES
   ----------------------------------------- */

/*
 * Safari mishandles minmax(0, auto) in grid layouts
 * Grid items can overflow without explicit min-width/height
 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-item {
  /* Prevent overflow in grid items */
  min-width: 0;
  min-height: 0;
  /* Contain long content */
  overflow: hidden;
}

/* Fix for grid with images */
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Remove bottom gap in Safari */
  display: block;
}

/* Nested grid layouts */
.outer-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.scrollable-grid-area {
  overflow-y: auto;
  /* CRITICAL: Safari needs this for scrolling in grid */
  min-height: 0;
}

/* -----------------------------------------
   6. SAFARI IMAGE RENDERING
   ----------------------------------------- */

/*
 * Prevent Safari from adding gaps around images
 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Prevent fuzzy images on non-retina displays */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  img {
    image-rendering: auto;
  }
}

/* -----------------------------------------
   7. SAFARI SCROLLING FIXES
   ----------------------------------------- */

/*
 * Enable momentum scrolling on iOS/iPadOS
 */
.scrollable,
[data-scrollable="true"] {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Prevent scroll chaining */
.modal-content,
.drawer-content {
  overscroll-behavior: contain;
}

/* -----------------------------------------
   8. SAFARI FORM ELEMENT FIXES
   ----------------------------------------- */

/*
 * Remove default Safari styling
 */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix for date/time inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px; /* Touch target */
}

/* -----------------------------------------
   9. SAFARI TRANSFORM FIXES
   ----------------------------------------- */

/*
 * Fix for transform flickering
 */
.animated,
[data-animated="true"] {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* -----------------------------------------
   10. SAFARI POSITION: STICKY FIXES
   ----------------------------------------- */

/*
 * Safari sometimes doesn't respect sticky positioning
 */
.sticky-header,
[data-sticky="true"] {
  position: -webkit-sticky;
  position: sticky;
  /* Ensure z-index is set */
  z-index: 10;
}

/* -----------------------------------------
   11. SAFARI-ONLY DETECTION AND TARGETING
   ----------------------------------------- */

/*
 * Target Safari only using @supports
 */
@supports (-webkit-touch-callout: none) {
  /* Safari-specific adjustments */
  .safari-specific {
    /* Your Safari-only fixes here */
  }

  /* Fix for Safari flexbox bugs */
  .flex-child {
    min-height: 0;
  }
}

/* Alternative Safari detection */
@supports (-webkit-hyphens: none) {
  .safari-alternative {
    /* Another way to target Safari */
  }
}

/* -----------------------------------------
   12. SAFARI BORDER-RADIUS WITH OVERFLOW
   ----------------------------------------- */

/*
 * Safari doesn't always clip overflow with border-radius
 */
.rounded-container {
  border-radius: 8px;
  overflow: hidden;
  /* Safari needs explicit transform for proper clipping */
  transform: translateZ(0);
}

/* -----------------------------------------
   13. SAFARI SELECT ELEMENT FIXES
   ----------------------------------------- */

/*
 * Fix for select dropdown appearance
 */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.5rem;
  padding-right: 2.5rem;
}

/* -----------------------------------------
   14. SAFARI TAP HIGHLIGHT
   ----------------------------------------- */

/*
 * Remove tap highlight on iOS/iPadOS
 */
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* Custom tap feedback using active state instead */
button:active,
a:active,
[role="button"]:active {
  opacity: 0.7;
}

/* -----------------------------------------
   15. SAFARI FONT SMOOTHING
   ----------------------------------------- */

/*
 * Improve font rendering on Safari
 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Disable font smoothing for icons */
.icon,
[data-icon="true"] {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* -----------------------------------------
   16. SAFARI SAFE AREA INSETS
   ----------------------------------------- */

/*
 * Handle notch and safe areas on newer iPads
 */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(env(safe-area-inset-top), 0px);
  }

  .safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }

  .safe-area-left {
    padding-left: max(env(safe-area-inset-left), 0px);
  }

  .safe-area-right {
    padding-right: max(env(safe-area-inset-right), 0px);
  }

  .safe-area-all {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
}

/* -----------------------------------------
   17. SAFARI WILL-CHANGE OPTIMIZATION
   ----------------------------------------- */

/*
 * Use will-change sparingly for performance
 * Remove after animation completes
 */
.will-animate {
  will-change: transform, opacity;
}

/* Remove will-change after animation */
.animation-complete {
  will-change: auto;
}

/* -----------------------------------------
   18. SAFARI BACKDROP-FILTER FIX
   ----------------------------------------- */

/*
 * Safari sometimes needs explicit isolation for backdrop-filter
 */
.backdrop-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Safari needs this for proper backdrop-filter */
  isolation: isolate;
}

/** **************************************
* Fonts: app
*************************************** */
/* @import '@fontsource/public-sans/400.css'; */
/* @import '@fontsource/public-sans/500.css';
@import '@fontsource/public-sans/600.css';
@import '@fontsource/public-sans/700.css';
@import '@fontsource/public-sans/800.css';

@import '@fontsource/barlow/400.css';
@import '@fontsource/barlow/500.css';
@import '@fontsource/barlow/600.css';
@import '@fontsource/barlow/700.css';
@import '@fontsource/barlow/800.css'; */

/** **************************************
* Fonts: options
*************************************** */
/* @import '@fontsource/dm-sans/400.css';
@import '@fontsource/dm-sans/500.css';
@import '@fontsource/dm-sans/600.css';
@import '@fontsource/dm-sans/700.css';
@import '@fontsource/dm-sans/800.css'; */

/* @import '@fontsource/nunito-sans/400.css';
@import '@fontsource/nunito-sans/500.css';
@import '@fontsource/nunito-sans/600.css';
@import '@fontsource/nunito-sans/700.css';
@import '@fontsource/nunito-sans/800.css'; */

/** **************************************
* Plugins
*************************************** */
/* scrollbar */

/** **************************************
* iPad Compatibility CSS
* Reference: IPAD_RESPONSIVE.md
*************************************** */
/* Safari-specific fixes (viewport, inputs, flexbox, grid) */

/* Chrome for iOS specific fixes (viewport height, scroll issues) */
/* @import './styles/chrome-fixes.css'; */

/* Performance optimizations (content-visibility, containment, GPU acceleration) */
/* @import './styles/performance.css'; */

/* Touch vs hover detection and handling */
/* @import './styles/touch-handling.css'; */

/* WCAG 2.5.5, 2.5.8 accessibility compliance */
/* @import './styles/accessibility.css'; */

/* Layout stability and rotation handling */
/* @import './styles/layout-stability.css'; */

/** **************************************
* Baseline
*************************************** */
html {
  /* Remove height: 100% to prevent cascade issues with Chrome */
  /* Use -webkit-fill-available for Safari */
  height: -webkit-fill-available;
  -webkit-overflow-scrolling: touch;
}
body,
#root,
#root__layout {
  display: flex;
  flex: 1 1 auto;
  /* Use height instead of min-height to prevent extra scroll */
  height: 100vh;
  /* Fallback for Safari < 15.4 */
  height: -webkit-fill-available;
  /* Modern viewport units for iPad (Safari 15.4+) */
  height: 100dvh;
  /* Prevent overflow beyond viewport */
  max-height: 100vh;
  max-height: 100dvh;
  /* Prevent horizontal scroll */
  overflow-x: hidden;
  flex-direction: column;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
input[type='number'] {
  -webkit-appearance: none;
          appearance: none;
}
input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
input[type='number']::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/** **************************************
* Mention Styles
*************************************** */
.mention {
  color: #7635CB;
  background-color: rgba(118, 53, 203, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  cursor: default;
}

.mention:hover {
  background-color: rgba(118, 53, 203, 0.16);
}

#nprogress {
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  z-index: 9999;
  position: fixed;
  pointer-events: none;
}
#nprogress .bar {
  height: 100%;
  background-color: var(--palette-primary-main);
  box-shadow: 0 0 2.5px var(--palette-primary-main);
}
#nprogress .peg {
  right: 0;
  opacity: 1;
  width: 100px;
  height: 100%;
  display: block;
  position: absolute;
  transform: rotate(3deg) translate(0px, -4px);
  box-shadow:
    0 0 10px var(--palette-primary-main),
    0 0 5px var(--palette-primary-main);
}