/* === Tablet (768-1024px) === */
@media (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar-brand,
    .nav-group-label,
    .nav-item span,
    .nav-badge-soon,
    .sidebar-footer .btn span {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 10px;
        border-left: none;
    }

    .nav-item.active { border-left: none; background: rgba(87,199,212,0.1); border-radius: var(--radius-sm); margin: 2px 8px; }

    .sidebar-header { justify-content: center; padding: 16px 10px; }

    .content { padding: 16px; }

    .col-cycle, .col-end { display: none; }

    .drawer { width: 520px; }
}

/* === Mobile (<768px) === */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }

    .sidebar.open { transform: translateX(0); }

    .sidebar-brand,
    .nav-group-label,
    .nav-item span,
    .nav-badge-soon,
    .sidebar-footer .btn span {
        display: revert;
    }

    .nav-item {
        justify-content: flex-start;
        padding: 8px 20px;
        border-left: 3px solid transparent;
        margin: 0;
        border-radius: 0;
    }

    .sidebar-header { justify-content: flex-start; padding: 16px 20px; }

    .hamburger { display: flex; }

    .sidebar-overlay { z-index: 40; }

    .content { padding: 12px; }

    .stats-row { grid-template-columns: 1fr; }

    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; }
    .filter-input { width: 100%; }
    .filter-reset { margin-left: 0; text-align: center; }

    /* Table → Cards */
    .data-table thead { display: none; }

    .data-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 16px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--gray-200);
    }

    .data-table td {
        padding: 2px 0;
        border: none;
    }

    .data-table td:first-child { grid-column: 1 / -1; }

    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.6875rem;
        color: var(--gray-500);
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .data-table td:first-child::before { display: none; }

    .col-actions { display: none; }

    .pagination { flex-direction: column; gap: 8px; }

    .drawer { width: 100%; }
}