@media(max-width:1240px) {
  .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .project-cards,.doc-grid,.tutorial-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:1050px) {
  :root {
    --gh-sidebar:230px
  }
  .dashboard-grid {
    grid-template-columns:1fr
  }
  .profile-layout {
    grid-template-columns:280px minmax(0,1fr)
  }
  .ticket-layout {
    grid-template-columns:280px minmax(0,1fr)
  }
}
@media(max-width:860px) {
  .portal-sidebar,.admin-sidebar {
    transform:translateX(-100%);
    transition:.22s ease;
    box-shadow:0 20px 50px rgba(5,31,69,.2)
  }
  .portal-sidebar.open,.admin-sidebar.open {
    transform:translateX(0)
  }
  .portal-main,.admin-main {
    margin-left:0
  }
  .mobile-menu {
    display:grid
  }
  .mobile-overlay {
    position:fixed;
    inset:0;
    background:rgba(4,22,48,.35);
    backdrop-filter:blur(2px);
    z-index:110
  }
  .mobile-overlay.show {
    display:block
  }
  .portal-content,.admin-content {
    padding:16px
  }
  .topbar-actions .user-chip strong,.topbar-actions .user-chip small {
    display:none
  }
  .topbar-actions .user-chip {
    padding:5px
  }
  .portal-topbar {
    padding:0 14px
  }
  .profile-layout,.ticket-layout {
    grid-template-columns:1fr
  }
  .ticket-list {
    max-height:300px
  }
  .company-hero-content {
    height:210px
  }
  .status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:640px) {
  .global-search {
    display:none
  }
  .portal-topbar {
    height:66px
  }
  .page-head {
    flex-direction:column
  }
  .page-actions {
    width:100%
  }
  .page-actions .btn {
    flex:1
  }
  .portal-content {
    padding:12px
  }
  .company-hero {
    min-height:240px
  }
  .company-hero-content {
    height:240px;
    padding:18px;
    align-items:flex-end
  }
  .company-logo {
    width:72px;
    height:72px;
    border-radius:14px
  }
  .company-meta {
    gap:5px
  }
  .metric-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .metric-card {
    padding:12px
  }
  .metric-icon {
    width:38px;
    height:38px
  }
  .project-cards,.doc-grid,.tutorial-grid {
    grid-template-columns:1fr
  }
  .quick-grid {
    grid-template-columns:1fr 1fr
  }
  .project-item {
    grid-template-columns:1fr
  }
  .project-progress small {
    text-align:left
  }
  .status-grid {
    grid-template-columns:1fr
  }
  .filter-bar .search-small {
    min-width:100%;
    max-width:none
  }
  .filter-bar select {
    flex:1
  }
  .conversation {
    min-height:460px
  }
  .message {
    max-width:88%
  }
  .table-wrap {
    border-radius:11px
  }
  .responsive-cards table,.responsive-cards thead,.responsive-cards tbody,.responsive-cards th,.responsive-cards td,.responsive-cards tr {
    display:block
  }
  .responsive-cards table {
    min-width:0
  }
  .responsive-cards thead {
    display:none
  }
  .responsive-cards tr {
    padding:11px;
    border-bottom:1px solid var(--gh-border)
  }
  .responsive-cards td {
    border:0;
    padding:5px 0;
    display:grid;
    grid-template-columns:110px 1fr;
    gap:8px;
    font-size:.8rem
  }
  .responsive-cards td::before {
    content:attr(data-label);
    font-size:.68rem;
    color:#8194ad;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:800
  }
  .responsive-cards tr:last-child {
    border-bottom:0
  }
}
@media(max-width:430px) {
  .metric-grid,.quick-grid {
    grid-template-columns:1fr
  }
  .company-hero-content {
    gap:12px
  }
  .company-info h2 {
    font-size:1.2rem
  }
  .company-meta span:nth-child(n+3) {
    display:none
  }
  .topbar-actions {
    gap:5px
  }
  .icon-btn {
    width:39px;
    height:39px
  }
  .user-chip {
    display:none
  }
  .modal-backdrop {
    padding:8px
  }
  .modal {
    border-radius:14px
  }
  .modal-body,.modal-head,.modal-foot {
    padding:14px
  }
  .doc-actions {
    flex-wrap:wrap
  }
}