/* row-limit-fix.css - Limit notes layout to maximum 3 rows with improved mobile handling */

/* Base container styling - ensure proper min-height and overflow */
.notes-container {
  grid-auto-rows: minmax(30vh, 1fr);
  max-height: 90vh;
  overflow-y: auto;
}

/* Single note - Full width and tall */
.notes-container.note-count-1 {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

.notes-container.note-count-1 .note {
  min-height: 75vh !important;
}

/* Two notes - Side by side in one row */
.notes-container.note-count-2 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
}

.notes-container.note-count-2 .note {
  min-height: 70vh !important;
}

/* Three notes - One row of 3 */
.notes-container.note-count-3 {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr !important;
}

.notes-container.note-count-3 .note {
  min-height: 65vh !important;
}

/* Fix specific layout for note-count-3 */
.notes-container.note-count-3 .note:nth-child(3) {
  grid-column: 3 / 4 !important;
}

/* Four to six notes - 2 rows of 3 (or fewer) */
.notes-container.note-count-4,
.notes-container.note-count-5,
.notes-container.note-count-6 {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}

.notes-container.note-count-4 .note,
.notes-container.note-count-5 .note,
.notes-container.note-count-6 .note {
  min-height: 40vh !important;
}

/* Fixed layout for 4 notes - 2x2 grid */
.notes-container.note-count-4 .note:nth-child(3) {
  grid-column: auto !important;
}

/* Seven to nine notes - 3 rows of 3 */
.notes-container.note-count-7,
.notes-container.note-count-8,
.notes-container.note-count-9 {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr 1fr !important;
}

.notes-container.note-count-7 .note,
.notes-container.note-count-8 .note,
.notes-container.note-count-9 .note {
  min-height: 30vh !important;
}

/* Many notes - enforce 3 column layout with maximum 3 rows visible at once */
.notes-container.note-count-many {
  grid-template-columns: repeat(3, 1fr) !important;
  display: grid !important;
  grid-template-rows: repeat(3, minmax(30vh, 1fr)) !important;
  grid-auto-rows: minmax(30vh, 1fr) !important;
  overflow-y: auto !important;
}

.notes-container.note-count-many .note {
  min-height: 30vh !important;
}

/* Medium screen adjustments */
@media (max-width: 1200px) and (min-width: 769px) {
  /* Keep 3 notes in a single row */
  .notes-container.note-count-3 {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }
  
  .notes-container.note-count-3 .note:nth-child(3) {
    grid-column: 3 / 4 !important;
  }
  
  /* Make 4-6 notes fit in 2 rows */
  .notes-container.note-count-4,
  .notes-container.note-count-5,
  .notes-container.note-count-6 {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  
  /* Make 4 notes fit in 2 rows of 2 */
  .notes-container.note-count-4 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
}

/* Enhanced mobile layout - FORCE single column for ALL smartphone screens */
@media (max-width: 768px) {
  /* Force single column layout regardless of note count */
  .notes-container,
  .notes-container.note-count-1,
  .notes-container.note-count-2,
  .notes-container.note-count-3,
  .notes-container.note-count-4,
  .notes-container.note-count-5,
  .notes-container.note-count-6,
  .notes-container.note-count-7,
  .notes-container.note-count-8,
  .notes-container.note-count-9,
  .notes-container.note-count-many {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    max-height: none !important;
    padding: 15px !important;
    gap: 15px !important;
  }
  
  /* Reset any grid positioning for all notes */
  .notes-container .note,
  .notes-container.note-count-3 .note:nth-child(3),
  .notes-container.note-count-4 .note:nth-child(3),
  .notes-container.note-count-5 .note:nth-child(4),
  .notes-container.note-count-5 .note:nth-child(5) {
    grid-column: auto !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    min-height: 45vh !important; /* Make notes taller on mobile */
  }
  
  /* Last note shouldn't have bottom margin */
  .notes-container .note:last-child {
    margin-bottom: 0 !important;
  }
}

/* Extra small screens (phones in portrait mode) */
@media (max-width: 480px) {
  .notes-container {
    padding: 10px !important;
    gap: 10px !important;
  }
  
  .notes-container .note {
    margin: 0 0 10px 0 !important;
    min-height: 40vh !important;
  }
}

/* For larger screens, ensure notes look good */
@media (min-width: 1520px) {
  .notes-container.note-count-1 .note {
    min-height: 80vh !important;
  }
  
  .notes-container.note-count-2 .note,
  .notes-container.note-count-3 .note {
    min-height: 70vh !important;
  }
}