/* Responsive Breakpoints & Mobile Adaptations */

@media (max-width: 1024px) {
  .overview-main-columns {
    grid-template-columns: 1fr;
  }
  
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 260px;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-modal);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }

  .page-container {
    padding: var(--space-md);
  }

  .top-bar {
    padding: 0 var(--space-md);
  }

  .global-search-trigger {
    min-width: 140px;
  }

  .global-search-trigger .shortcut-kbd {
    display: none;
  }

  .overview-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-window {
    max-height: 95vh;
  }

  .modal-body {
    padding: var(--space-md);
  }
}

@media (max-width: 480px) {
  .overview-stats-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .worklog-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
  }

  .toast {
    min-width: 100%;
  }
}