@media (max-width: 991.98px) {
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-aside {
    min-height: 200px;
    padding: 1.5rem;
  }
  .login-aside h1 {
    font-size: 1.5rem;
    max-width: none;
  }
  .app-nav {
    height: auto;
    min-height: var(--ca-nav-h);
  }
  .app-nav .navbar-collapse {
    background: var(--ca-navy-2, #12233d);
    margin: 0.35rem -0.75rem 0;
    padding: 0.85rem;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  }
  .app-nav .nav-link {
    padding: 0.55rem 0.75rem !important;
  }
  .matrix-table thead th:nth-child(2),
  .matrix-table td:nth-child(2),
  .matrix-table thead th:nth-child(3),
  .matrix-table td:nth-child(3) {
    position: static;
    left: auto;
    box-shadow: none;
    min-width: auto;
  }
}

@media (max-width: 767.98px) {
  .page-head {
    flex-direction: column;
    align-items: stretch !important;
  }
  .page-actions,
  .page-head > .d-flex.gap-2,
  .page-head > .d-flex.flex-wrap {
    width: 100%;
  }
  .filter-bar .row > [class*="col-"] {
    margin-bottom: 0.15rem;
  }
  .stat-tile {
    padding: 0.9rem 1rem;
  }
}

@media (max-width: 575.98px) {
  .app-main {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-top: 1.15rem !important;
  }
  .stat-val { font-size: 1.35rem; }
  .page-head .btn,
  .page-actions .btn,
  .page-head a.btn {
    flex: 1 1 auto;
    text-align: center;
  }
  .login-card {
    padding: 1.5rem 1.2rem;
    border-radius: 14px;
  }
  .surface-header {
    flex-direction: column;
    align-items: flex-start;
  }
}