/* Responsive breakpoints. See docs/10-ui-design-system.md. */

@media (max-width: 1199px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .grid-summary-cards {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-summary-strip { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 1439px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }
  .app-sidebar .nav-label,
  .app-sidebar .sidebar-brand-text,
  .app-sidebar .sidebar-nav-group-title,
  .app-sidebar .sidebar-profile-copy {
    display: none;
  }
  .sidebar-nav-item {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 264px;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar .nav-label,
  .app-sidebar .sidebar-brand-text,
  .app-sidebar .sidebar-profile-copy {
    display: inline;
  }
  .app-sidebar .sidebar-nav-group-title { display: block; }
  .sidebar-nav-item {
    justify-content: flex-start;
  }
  .app-shell.mobile-nav-open .app-sidebar {
    transform: translateX(0);
  }
  /* Base position:fixed/display:none for .sidebar-backdrop lives in layout.css (unconditional,
     at every width) — this block only adds the mobile-specific visuals and the open/close
     toggle. */
  .sidebar-backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(1px);
  }
  .app-shell.mobile-nav-open .sidebar-backdrop {
    display: block;
  }
  .ticket-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .report-visual-grid { grid-template-columns: 1fr; }
  .project-overview-grid { grid-template-columns: 1fr; }
  .task-quick-add { grid-template-columns: minmax(0, 1fr) 140px; }
  .task-quick-add .form-select,
  .task-quick-add .btn { width: 100%; }
  .compact-kanban-column {
    min-width: 220px;
    flex: 1 0 220px;
  }
}

@media (max-width: 767px) {
  .page-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-content {
    padding: 16px;
  }
  .grid-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .kanban-column {
    min-width: 240px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-topbar {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }
  .app-topbar input[type="search"] {
    max-width: 160px !important;
  }
  .modal {
    padding: 0;
  }
  .project-grid { grid-template-columns: 1fr; }
  .project-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-donut-layout { grid-template-columns: 105px minmax(0, 1fr); gap: 14px; }
  .report-donut { width: 100px; height: 100px; padding: 14px; }
  .filter-panel .form-input,
  .filter-panel .form-select {
    flex: 1 1 145px;
    max-width: none;
  }
  .filter-panel .filter-search { width: 100%; max-width: none; flex-basis: 100%; }
  .filter-advanced { margin-left: 0; flex: 1 1 100%; }
  .filter-advanced > summary { width: 100%; justify-content: center; }
  .filter-advanced-body {
    position: static;
    width: 100%;
    margin-top: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-shadow: none;
  }
  .task-quick-add { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: 18px minmax(0, 1fr) auto 32px; }
  .task-due-date { display: none; }
  .task-row .btn-icon { opacity: 1; }

  /* Same idea as .task-row above: drop the assignee/date columns and shrink to just the
     checkbox(es), subject, and project badge (plus delete button, if present). */
  .ticket-checklist-row,
  .ticket-checklist-row-selectable,
  .ticket-checklist-row-deletable,
  .ticket-checklist-row-selectable.ticket-checklist-row-deletable {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .ticket-checklist-row-selectable { grid-template-columns: 18px 18px minmax(0, 1fr) auto; }
  .ticket-checklist-row-deletable { grid-template-columns: 18px minmax(0, 1fr) auto 32px; }
  .ticket-checklist-row-selectable.ticket-checklist-row-deletable {
    grid-template-columns: 18px 18px minmax(0, 1fr) auto 32px;
  }
  .ticket-checklist-assignees,
  .ticket-checklist-row .task-due-date {
    display: none;
  }
  .ticket-checklist-row .btn-icon { opacity: 1; }
  .bulk-action-bar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 390px) {
  .grid-summary-cards {
    grid-template-columns: 1fr;
  }
  .form-input, .form-select, .form-textarea, .btn {
    font-size: 16px; /* prevents iOS Safari zoom-on-focus */
  }
  .app-content {
    padding: 12px;
  }
  .report-summary-strip { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .app-topbar {
    padding: 0 10px;
    gap: 6px;
  }
  .topbar-actions { gap: 4px; }
  .topbar-new-request {
    width: 40px;
    padding: 0;
    font-size: 0;
  }
  .topbar-new-request::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
  }
  .app-topbar input[type="search"] {
    min-width: 0;
    width: 100%;
  }
  .topbar-search { min-width: 0; }
  .page-header { gap: 10px; margin-bottom: 14px; }
  .page-header > div:last-child { width: 100%; }
  .page-header > div:last-child .btn { flex: 1; }
  #status-summary { grid-template-columns: 82px 1fr; }
  .dashboard-donut { width: 78px; height: 78px; }
  .project-meta-grid { grid-template-columns: 1fr; }
  .filter-advanced-body { grid-template-columns: 1fr; }
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: none;
    max-height: 96vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-body { max-height: calc(96vh - 136px); }
}