/* Additional Responsive Improvements
 * 
 * Extra responsive styles to ensure perfect layout across all devices.
 * Handles edge cases, touch interactions, and mobile-specific optimizations.
 */

/* Improve touch targets for mobile */
@media (max-width: 768px) {

  /* Better spacing for touch */
  .stickyNote {
    margin-bottom: var(--space-sm);
  }

  /* Prevent text selection on double tap */
  .stickyNote,
  .boardColumn h2,
  .priorityBadge {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Allow text selection in modals */
  .modalBody,
  .modalBody * {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .boardColumn {
    min-height: 250px;
  }

  .notesContainer {
    max-height: calc(100vh - 280px);
  }

  .modalContent {
    max-height: 85vh;
  }
}

/* Small landscape phones */
@media (max-width: 640px) and (orientation: landscape) {
  .boardColumn {
    min-height: 200px;
  }

  .notesContainer {
    max-height: calc(100vh - 240px);
  }
}

/* Tablet portrait specific */
@media (min-width: 431px) and (max-width: 768px) and (orientation: portrait) {
  .board {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .boardColumn {
    min-height: 320px;
  }

  #addNoteForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  #noteText {
    grid-column: 1 / -1;
  }

  #addNoteForm button {
    grid-column: 1 / -1;
  }
}



/* Very small screens - removed, using 360px breakpoint instead */

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  .stickyNote,
  .boardColumn,
  .modalContent {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Prevent zoom on input focus for iOS */
@media (max-width: 768px) {

  input[type="text"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .appHeader {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }


  .container {
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
    padding-bottom: var(--space-lg);
  }

  @media (max-width: 768px) {
    .container {
      padding-left: max(var(--space-sm), env(safe-area-inset-left));
      padding-right: max(var(--space-sm), env(safe-area-inset-right));
    }
  }
}

/* Improve scrolling performance on mobile */
@media (max-width: 768px) {

  .notesContainer,
  .modalBody,
  .googleEventsListContainer {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}