/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet Breakpoint */
@media (min-width: 769px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(50% - var(--space-3));
  }
}

/* Desktop Breakpoint */
@media (min-width: 1200px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(25% - var(--space-3));
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Layout Adjustments */
  .mobile-header { 
    display: flex; 
  }
  
  .main-content {
    margin-left: 0;
    padding-top: calc(var(--header-height) + var(--space-4));
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
  
  /* Content Layout Mobile */
  .content-layout.cards {
    flex-direction: column;
  }
  
  .content-layout.cards > .card {
    max-width: none;
    width: 100%;
  }
  
  .content-layout.split {
    grid-template-columns: 1fr;
  }
  
  /* Form Layout Mobile */
  .form-layout.cols-2,
  .form-layout.cols-3,
  .form-layout.cols-5 {
    grid-template-columns: 1fr;
  }
  
  /* Page Header Mobile */
  .page-header {
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-6);
  }
  
  .page-header-actions {
    width: 100%;
    margin-left: 0;
  }
  
  /* Modal Mobile */
  .modal-lg,
  .modal-xl {
    max-width: 95vw;
    margin: var(--space-4);
  }
  
  /* Search Mobile */
  .search-controls,
  .search-filters-bar { 
    flex-direction: column; 
  }
  
  .search-input {
    max-width: none;
  }
  
  .filters {
    flex-wrap: wrap;
  }
  
  /* Searchable Dropdown Mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }
  
  /* Dropdown Mobile */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }
  
  /* Document grid mobile: 2 columns */
  .document-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .document-card-preview {
    height: 100px;
  }

  .doc-actions {
    align-self: stretch;
  }
  
  /* Button Mobile */
  .btn-remove {
    width: 100%;
    height: auto;
    padding: 0.75rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .page-header {
    padding: var(--space-4);
  }
  
  .page-header-content h1 {
    font-size: 1.375rem;
  }
  
  .section-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
  }
  
  .section-title {
    font-size: 1rem;
    gap: var(--space-2);
  }
  
  .count-badge {
    font-size: 0.625rem;
    padding: var(--space-1) var(--space-1);
  }
  
  .loading-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}

/* Container overflow fixes */
#listViewContainer {
  overflow: visible;
  position: relative;
}

#listViewContainer .table-container {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
}

#cardsViewContainer {
  position: relative;
  overflow: visible;
}

.page-content,
.main-content {
  overflow: visible;
  position: relative;
}

/* Dropdown body scroll prevention */
.dropdown-open {
  overflow: hidden;
}

/* Modal accessibility */
.modal-open .entity-dropdown {
  z-index: 1060; /* Higher than modal backdrop */
}

/* Debug helper (remove in production) */
.debug-dropdown {
  border: 2px solid red !important;
  background: yellow !important;
}