/* ABOUTME: Responsive layout adaptations for the MJS v3 interface. */

@media (max-width: 1380px) {
  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .statgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vac-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .vac-tools {
    margin-left: 0;
  }
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rail-sec:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-status {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-status > form,
  .profile-ready-stamp,
  .profile-review-issues {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .brand {
    min-height: 64px;
    padding: 13px 16px;
  }

  .brand .stamp {
    max-width: none;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
    border-top: 1px solid var(--hair);
  }

  .nav a,
  .nav button {
    min-width: max-content;
    min-height: 42px;
    justify-content: center;
    padding: 10px 14px;
    border-right: 1px solid var(--hair);
    border-bottom: 0;
  }

  .nav .badge {
    margin-left: 2px;
  }

  .sidebar .spacer,
  .identity {
    display: none;
  }

  .nav.foot {
    overflow: visible;
  }

  .nav.foot form,
  .nav.foot button {
    width: 100%;
  }

  .nav.foot button {
    justify-content: flex-start;
    border-right: 0;
  }

  .stage {
    height: auto;
    min-height: calc(100vh - 149px);
  }

  .topbar {
    min-height: 58px;
    align-items: flex-start;
    padding: 11px 14px;
  }

  .topbar-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .topbar h1 {
    font-size: 17px;
  }

  .topbar-user {
    display: none;
  }

  .context-chip {
    padding: 6px 8px;
  }

  .well {
    height: auto;
    min-height: calc(100vh - 207px);
    padding: 8px;
    overflow: visible;
  }

  .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-main > * + * {
    margin-top: 8px;
  }

  .dashboard-layout,
  .grid2,
  .page-stack {
    gap: 8px;
  }

  .dashboard-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail-sec:nth-child(odd) {
    border-right: 0;
  }

  .panel,
  .rail-sec {
    padding: 15px;
  }

  .stat {
    padding: 12px;
  }

  .stat .num {
    font-size: 23px;
  }

  .vac-tools {
    flex-direction: column;
  }

  .search input,
  .vac-tools label,
  .vac-tools select {
    width: 100%;
  }

  .table-panel {
    padding: 0 12px;
  }

  .tfoot-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .qa-row {
    flex-direction: column;
  }

  .qa-row .btn {
    align-self: flex-start;
  }

  .form-row,
  .upload-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lrow {
    align-items: flex-start;
  }

  .agent-head {
    align-items: flex-start;
  }

  .profile-status,
  .profile-form-grid,
  .compensation-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-status > form,
  .profile-ready-stamp,
  .profile-review-issues,
  .field.wide {
    grid-column: auto;
  }

  .profile-status-metrics {
    width: 100%;
  }

  .suggestion-row {
    flex-direction: column;
  }

  .suggestion-actions {
    margin-left: 0;
  }

  .attention-block,
  .question-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .statgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-meta {
    display: none;
  }

  .panel-head,
  .agent-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-foot .last {
    margin-left: 0;
  }

  .mrow .mk {
    width: 92px;
  }

  .sname {
    min-width: 76px;
  }

  .login-shell {
    padding: 12px;
  }

  .login-panel {
    padding: 20px;
  }

  .profile-headline,
  .knowledge-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .role-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .role-add {
    grid-template-columns: minmax(0, 1fr);
  }
}