/* ============================================
   RESPONSIVE GRID SYSTEM FOR HAISE
   Bootstrap-like responsive utilities
   Core layout handled by /public/css/layout.css
   ============================================ */

/* ============================================
   CHAT MANAGER RESPONSIVE GRID
   ============================================ */

.chat-manager-list {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  flex-direction: unset !important;
}

.chat-manager-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 120px;
}

.chat-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================
   RESPONSIVE BREAKPOINTS - SIDEBAR COLLAPSED (60px width)
   When sidebar is collapsed, we have more horizontal space
   ============================================ */

/* Tablet: 2 columns (sidebar collapsed) */
@media (min-width: 768px) {
  .chat-manager-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .chat-manager-container {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
}

/* Desktop: 3 columns (sidebar collapsed) */
@media (min-width: 1200px) {
  .chat-manager-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop: 4 columns (sidebar collapsed) */
@media (min-width: 1920px) {
  .chat-manager-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .chat-manager-container {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Ultra-wide: 5 columns (sidebar collapsed) */
@media (min-width: 2560px) {
  .chat-manager-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS - SIDEBAR PINNED (260px width)
   When sidebar is pinned, we lose 200px of horizontal space
   Adjust breakpoints accordingly
   ============================================ */

/* When sidebar is pinned, reduce columns at certain breakpoints */
.sidebar-container.pinned ~ .main-content .chat-manager-list {
  /* Reset to 1 column on small screens */
  grid-template-columns: repeat(1, 1fr);
}

/* Tablet with pinned sidebar: 2 columns (need more width) */
@media (min-width: 968px) {
  .sidebar-container.pinned ~ .main-content .chat-manager-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop with pinned sidebar: 3 columns (need more width) */
@media (min-width: 1400px) {
  .sidebar-container.pinned ~ .main-content .chat-manager-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop with pinned sidebar: 4 columns (need more width) */
@media (min-width: 2120px) {
  .sidebar-container.pinned ~ .main-content .chat-manager-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ultra-wide with pinned sidebar: 5 columns */
@media (min-width: 2760px) {
  .sidebar-container.pinned ~ .main-content .chat-manager-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.chat-manager-item {
  max-width: 100%;
}

/* ============================================
   REMOVED: Content wrapper margins
   All content now uses .container with 20px padding (defined in layout.css)
   ============================================ */

/* ============================================
   MODAL RESPONSIVE BEHAVIOR
   ============================================ */

.modal-overlay {
  padding: 20px;
}

@media (min-width: 768px) {
  .modal-overlay {
    padding: 40px;
  }

  .modal {
    max-width: 600px;
  }

  .modal.large-modal {
    max-width: 1200px;
  }
}

@media (min-width: 1920px) {
  .modal.large-modal {
    max-width: 1600px;
  }
}

.modal.large-modal {
  max-width: 90vw !important;
  width: 100%;
}

/* ============================================
   CARD GRIDS - Responsive Grid Systems
   ============================================ */

.subs-card-grid,
.grid.cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .subs-card-grid,
  .grid.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .subs-card-grid,
  .grid.cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1920px) {
  .subs-card-grid,
  .grid.cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   SIDEBAR SPECIFIC OVERRIDES
   ============================================ */

/* Chat history items stay as list (not grid) */
.sidebar .chat-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}

/* ============================================
   RESPONSIVE UTILITY CLASSES
   Display utilities for different breakpoints
   ============================================ */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-grid { display: grid !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-grid { display: grid !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-grid { display: grid !important; }
}

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

/* ============================================
   WIDTH & HEIGHT UTILITIES
   ============================================ */

.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-auto { width: auto !important; }

.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ============================================
   OVERFLOW UTILITIES
   ============================================ */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }