/* ==========================================================================
   RESPONSIVE STYLES
   APM IT Manager Dashboard
   Breakpoints: Desktop (default) / Laptop (1200px) / Tablet (992px) / Mobile (600px)
   ========================================================================== */

/* Laptop */
@media (max-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .chart-card-wide {
        grid-column: 1 / -1;
    }
}

/* Tablet: sidebar auto-collapses to icon-only rail */
@media (max-width: 992px) {
    .sidebar {
        width: var(--sidebar-width-collapsed);
    }

    .sidebar .sidebar-logo-img {
        max-width: 44px;
    }

    .sidebar .brand-tagline {
        display: none;
    }

    .sidebar .nav-item a .nav-label,
    .sidebar .logout-btn .nav-label {
        display: none;
    }

    .sidebar .nav-item a,
    .sidebar .logout-btn {
        justify-content: center;
    }

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

    /* Expanded state (toggled via JS) overlays content on tablet */
    .app-shell.sidebar-expanded .sidebar {
        width: var(--sidebar-width);
    }

    .app-shell.sidebar-expanded .sidebar .sidebar-logo-img {
        max-width: 130px;
    }

    .app-shell.sidebar-expanded .sidebar .brand-tagline {
        display: block;
    }

    .app-shell.sidebar-expanded .sidebar .nav-item a .nav-label,
    .app-shell.sidebar-expanded .sidebar .logout-btn .nav-label {
        display: inline;
    }

    .app-shell.sidebar-expanded .sidebar .nav-item a,
    .app-shell.sidebar-expanded .sidebar .logout-btn {
        justify-content: flex-start;
    }

    .user-text {
        display: none;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .topbar {
        padding: 0 16px;
    }

    .page-title {
        font-size: 1rem;
    }

    .current-date {
        display: none;
    }

    .dashboard-content {
        padding: 16px 16px 32px;
        gap: 16px;
    }

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

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

    .chart-card-wide {
        grid-column: auto;
    }

    .chart-canvas-wrapper {
        min-height: 220px;
    }

    /* Sidebar becomes an off-canvas drawer on mobile */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .app-shell.sidebar-expanded .sidebar {
        transform: translateX(0);
    }

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