/* ============================================================
   DiskWeb CRM — Responsive Stylesheet
   Breakpoints: 480 / 768 / 1024 / 1280
   ============================================================ */

/* ── Large Desktop (1280px+) ───────────────────────────────── */
@media (min-width: 1280px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .dashboard-grid { grid-template-columns: 2fr 1fr; }
}

/* ── Desktop / Tablet Landscape (1024px–1279px) ────────────── */
@media (max-width: 1279px) {
    :root { --sidebar-width: 220px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet (768px–1023px) ─────────────────────────────────── */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: var(--sidebar-collapsed);
    }

    .sidebar .nav-label,
    .sidebar .user-info {
        opacity: 0;
        pointer-events: none;
        width: 0;
    }

    .sidebar-nav .nav-link {
        justify-content: center;
        padding: 11px;
    }

    .sidebar-user {
        justify-content: center;
        padding: 20px 0;
    }

    .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .sidebar-toggle { display: none; }

    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    .topbar-logo { display: flex; }

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

/* ── Mobile (≤767px) ───────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hide desktop sidebar on mobile */
    .sidebar { display: none; }

    /* Show bottom nav on mobile */
    .bottom-nav { display: flex; }

    /* Full-width content on mobile */
    .main-content {
        margin-left: 0;
    }

    .page-content {
        padding: 16px;
        padding-bottom: calc(16px + var(--bottom-nav-height));
    }

    .topbar {
        padding: 0 16px;
    }

    .topbar-logo { display: flex; }

    .page-title { font-size: 17px; }

    /* Stack stats on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card { padding: 16px; gap: 12px; }
    .stat-icon { width: 44px; height: 44px; font-size: 18px; }
    .stat-value { font-size: 22px; }

    /* Full width dashboard cards */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Auth page on mobile */
    .auth-card {
        padding: 24px 20px;
    }
    .auth-title { font-size: 20px; }

    /* Quick actions */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .quick-action-btn { padding: 14px 10px; }
    .quick-action-btn i { font-size: 22px; margin-bottom: 6px; }
    .quick-action-btn span { font-size: 11px; }

    /* Toast on mobile */
    .toast-container {
        top: auto;
        bottom: calc(var(--bottom-nav-height) + 80px);
        left: 12px;
        right: 12px;
    }
    .toast { min-width: 0; width: 100%; }

    /* PWA banner */
    .pwa-install-banner {
        left: 8px;
        right: 8px;
        bottom: calc(var(--bottom-nav-height) + 8px);
    }

    /* Card adjustments */
    .card { padding: 16px; border-radius: var(--radius-md); }

    /* Table: hide less important columns */
    .table-hide-mobile { display: none; }

    /* Topbar notification count */
    .topbar-right .notif-btn { width: 36px; height: 36px; }
}

/* ── Small Mobile (≤479px) ─────────────────────────────────── */
@media (max-width: 479px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-value { font-size: 20px; }
    .stat-label { font-size: 11px; }

    .auth-page { padding: 16px; }
    .auth-card { padding: 20px 16px; border-radius: var(--radius-lg); }
    .auth-logo-inner { width: 60px; height: 60px; }
    .auth-logo-inner img { width: 46px; height: 46px; }

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

    .btn-lg { padding: 12px 20px; font-size: 15px; }

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

    .pwa-install-text strong { font-size: 13px; }
    .pwa-install-text span { display: none; }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
    .sidebar, .bottom-nav, .topbar, .pwa-install-banner, .toast-container { display: none !important; }
    .main-content { margin: 0 !important; }
    body { background: #fff; color: #000; }
    .card { border: 1px solid #ddd; box-shadow: none; }
}

/* ── Touch & hover enhancements ────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover transforms on touch to avoid sticky states */
    .card:hover,
    .stat-card:hover,
    .quick-action-btn:hover {
        transform: none;
    }
    .btn-primary:hover { transform: none; }

    /* Larger touch targets */
    .nav-link { padding: 14px; }
    .bottom-nav-item { padding: 10px 4px; }
}

/* ── Safe area insets (iPhone notch/home bar) ──────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    .pwa-install-banner {
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px);
    }
    .page-content {
        padding-bottom: calc(28px + var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    @media (max-width: 767px) {
        .page-content {
            padding-bottom: calc(16px + var(--bottom-nav-height) + env(safe-area-inset-bottom));
        }
    }
}