@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .main-content { margin-left: 0; }

    .content-loader { left: 0; }

    .content { padding: 16px; }

    .header-content { padding: 0 16px; gap: 12px; }

    .header-actions { gap: 8px; }

    .header-search { width: min(220px, 42vw); }

    .header-search-input { font-size: 12px; }

    .header-notifications-panel { right: -8px; }

    .header-title,
    .page-heading-title { font-size: 20px; }

    .kpi-grid { grid-template-columns: 1fr; }

    .kpi-grid--dashboard { grid-template-columns: 1fr; }

    .kpi-grid--summary { grid-template-columns: 1fr; }

    .trade-status-grid--full { grid-template-columns: 1fr; }

    .trade-status-grid { grid-template-columns: 1fr 1fr; }

    .chart-grid { grid-template-columns: 1fr; }

    .crm-chart-wrap { height: 280px; }

    .crm-chart-wrap--compact { height: 240px; }

    .report-cover { padding: 32px 24px; }

    .report-cover h1 { font-size: 28px; }

    .data-table { display: block; overflow-x: auto; }

    .milestone-grid { grid-template-columns: 1fr; }

    .milestone-grid--schedule { grid-template-columns: 1fr; }

    .section-button-grid { grid-template-columns: 1fr; }

    .create-form-grid { grid-template-columns: 1fr; }

    .create-form-card { padding: 20px 16px; }

    .content--profile { padding: 16px; }

    .profile-settings-layout { grid-template-columns: 1fr; }

    .profile-settings-nav { position: static; }

    .profile-settings-form-grid { grid-template-columns: 1fr; }

    .profile-hero-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .trade-status-grid { grid-template-columns: 1fr; }
}