@media (max-width: 1024px) {

    /** general **/

    .metrics-header {
        display: none;
    }

    /** soc screen **/

    #soc-table tbody {
        grid-template-columns: 1fr;
    }

    /** ticket table **/

    #ticket-table {
        font-size: 0.9rem;
    }
    
    #ticket-table tbody tr {
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    #ticket-table tbody td {
        display: block;
        border: none;
        padding: 4px 0;
        text-align: left !important;
    }
    
    #ticket-table tbody td:first-child,
    #ticket-table tbody td:nth-child(2) {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 8px;
    }
    
    #ticket-table tbody td:first-child {
        margin-right: 8px;
    }
    
    #ticket-table tbody td:nth-child(2) {
        font-weight: 600;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
        width: calc(100% - 40px);
    }
    
    #ticket-table tbody td:first-child img {
        width: 24px;
        height: 24px;
    }
    
    #ticket-table tbody td:nth-child(3):before { content: "Service: "; font-weight: 600; }
    #ticket-table tbody td:nth-child(4):before { content: "Issue: "; font-weight: 600; }
    #ticket-table tbody td:nth-child(5):before { content: "Due: "; font-weight: 600; }

    /** ticket sidebar **/

    .email-thread .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .email-thread .sender {
        font-size: 0.9rem;
    }
    
    .email-thread .timestamp {
        font-size: 0.7rem;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
  #soc-screen .invite-section {
    gap: 0;
    padding: 16px;
  }

  #soc-screen .soc-info {
    display: none;
  }

  #soc-screen .invite-form-wrapper {
    flex: none;
    width: 100%;
  }
}