/* ===== Tablet (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ===== Mobile (max-width: 768px) ===== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
    }

    html, body {
        overflow-x: hidden;
    }

    .sidebar,
    .sidebar.collapsed {
        transform: translateX(100%) !important;
        width: var(--sidebar-width) !important;
    }

    .sidebar.open,
    .sidebar.open.collapsed {
        transform: translateX(0) !important;
    }

    .sidebar-collapse-btn,
    .sidebar-tooltip {
        display: none !important;
    }

    /* Reset all collapsed styles on mobile */
    .sidebar.collapsed .sidebar-link-text { display: inline; }
    .sidebar.collapsed .sidebar-brand-text { display: block; }
    .sidebar.collapsed .sidebar-brand { padding: 20px 24px; flex-direction: row; justify-content: flex-start; }
    .sidebar.collapsed .sidebar-section-title { font-size: 11px; padding: 8px 24px 4px; text-align: start; }
    .sidebar.collapsed .sidebar-section-title::after { display: none; }
    .sidebar.collapsed .sidebar-link { justify-content: flex-start; padding: 10px 24px; gap: 10px; }
    .sidebar.collapsed .sidebar-link-icon { font-size: 16px; width: 20px; }
    .sidebar.collapsed .sidebar-user-info { display: block; }
    .sidebar.collapsed .sidebar-footer { padding: 16px 24px; justify-content: flex-start; }
    .sidebar.collapsed .sidebar-link-badge { position: static; margin-right: auto; font-size: 11px; padding: 1px 7px; min-width: auto; height: auto; line-height: normal; }

    .main-content {
        margin-right: 0 !important;
    }

    .header-toggle {
        display: flex;
    }

    .page-content {
        padding: 16px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box,
    .toolbar-search {
        max-width: 100%;
    }

    .filter-group,
    .toolbar-filters {
        flex-wrap: wrap;
        width: 100%;
    }

    .toolbar-filters .form-select {
        flex: 1;
        min-width: 120px;
    }

    .table-container {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .modal {
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 92vh;
        height: 92vh;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal-footer {
        padding: 12px 16px !important;
        position: sticky;
        bottom: 0;
        background: var(--bg-card) !important;
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    }

    .modal-footer .btn {
        flex: 1;
        padding: 12px !important;
        font-size: 14px !important;
    }

    .modal-body {
        padding: 16px !important;
        padding-bottom: 80px !important;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .tabs {
        overflow-x: auto;
    }

    .tab {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: var(--font-size-sm);
    }

    .header-title h1 {
        font-size: var(--font-size);
    }

    .toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .toast {
        max-width: 100%;
    }
}

/* ===== Small Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {
    .page-content {
        padding: 12px;
    }

    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 12px 16px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-card-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .stat-card-value {
        font-size: var(--font-size-xl);
    }

    .btn {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }

    .table th,
    .table td {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }
}

/* ===== Print ===== */
@media print {
    .sidebar,
    .header,
    .sidebar-overlay,
    .toast-container,
    .modal-backdrop,
    .btn,
    .toolbar {
        display: none !important;
    }

    .main-content {
        margin: 0;
    }

    .page-content {
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: #fff;
    }
}