/* =====================================================
   Responsive - Tablet & Mobile
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .sidebar { width: var(--sidebar-width-mini); }
    .sidebar .logo-text,
    .sidebar .nav-label,
    .sidebar .user-info { opacity: 0; width: 0; }
    .sidebar-toggle { left: calc(var(--sidebar-width-mini) - 14px); }
    .sidebar-toggle svg { transform: rotate(180deg); }
    .main { margin-left: var(--sidebar-width-mini); }

    .topbar { padding: 0 var(--space-4); }
    .content { padding: var(--space-5); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    .dash-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-action-text small {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --topbar-height: 60px;
    }

    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        transition: transform var(--duration-base) var(--ease);
    }

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

    .sidebar.mobile-open .logo-text,
    .sidebar.mobile-open .nav-label,
    .sidebar.mobile-open .user-info {
        opacity: 1;
        width: auto;
    }

    .main { margin-left: 0; }

    .hamburger { display: flex; }

    /* Hide desktop collapse toggle on mobile - use hamburger instead */
    .sidebar-toggle { display: none; }

    .sidebar-backdrop {
        display: block;
        pointer-events: none;
    }

    .sidebar-backdrop.show {
        pointer-events: auto;
    }

    .topbar {
        padding: 0 var(--space-3);
    }

    .page-title h1 { font-size: 16px; }

    .user-btn-name { display: none; }
    .lang-btn { padding: 4px 8px; font-size: 11px; }

    .content { padding: var(--space-4); }

    h1 { font-size: 22px; }

    .stat-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .stat-value { font-size: 26px; }

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

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

    .dash-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .dash-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Table -> Card view on mobile */
    .table-wrap { background: transparent; border: none; box-shadow: none; }
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        box-shadow: var(--shadow-sm);
    }
    .table td {
        padding: 6px 0;
        border: none;
    }
    .table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }
    .table td:last-child { margin-top: var(--space-2); }

    .table-actions { justify-content: flex-end; }

    .auth-card { padding: var(--space-5); }
    .auth-title { font-size: 22px; }

    .app-grid {
        grid-template-columns: 1fr !important;
    }

    .toast-container {
        top: var(--space-3);
        right: var(--space-3);
        left: var(--space-3);
        max-width: none;
    }

    .dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    .dropdown.open .dropdown-menu {
        transform: translateY(0);
    }

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

/* Very small screens */
@media (max-width: 380px) {
    .topbar-right { gap: 0; }
    .lang-switch { display: none; }
    .stat-value { font-size: 22px; }
}

/* Print */
@media print {
    .sidebar, .topbar, .sidebar-backdrop { display: none; }
    .main { margin-left: 0; }
    body { background: white; }
}