/* ==========================================================================
   Wi-Sky Responsive — Mobile/tablet breakpoints
   ========================================================================== */

/* ---------- Large screens (< 1200px) ---------- */
@media (max-width: 1199.98px) {
    .chart {
        min-height: 250px;
    }
}

/* ---------- Medium screens / Tablets (< 992px) ---------- */
@media (max-width: 991.98px) {
    .sidebar {
        left: calc(var(--ws-sidebar-width) * -1);
    }

    .sidebar.toggled {
        left: 0;
    }

    .main {
        margin-left: 0;
    }

    /* Show sidebar overlay when open on mobile */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        opacity: 0;
        visibility: hidden;
        transition: all var(--ws-transition-speed) ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .content {
        padding: 1rem;
    }

    .navbar {
        padding: 0.5rem 1rem;
    }

    /* Stack stat cards */
    .ws-stat-card {
        margin-bottom: 1rem;
    }

    .chart {
        min-height: 200px;
    }

    .ws-search {
        max-width: 200px;
    }
}

/* ---------- Small screens / Phones (< 768px) ---------- */
@media (max-width: 767.98px) {
    .content {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .ws-page-header h1,
    .ws-page-header .ws-page-title {
        font-size: 1.25rem;
    }

    /* Tables: force horizontal scroll */
    .table-responsive {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .dt-container .dt-buttons {
        padding: 0.5rem 0.75rem;
        justify-content: center;
    }

    .dt-container .dt-search input {
        min-width: 0;
        width: 100%;
    }

    /* DataTables info and paging */
    .dt-container .dt-info {
        padding: 0;
    }

    .dt-container .dt-paging .dt-paging-button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem;
    }

    /* Bootstrap pagination */
    .pagination {
        flex-wrap: wrap;
    }

    .pagination .page-item .page-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .ws-search {
        display: none;
    }

    /* Footer stacks */
    .footer .row {
        text-align: center !important;
    }

    .footer .col-6 {
        width: 100%;
        text-align: center !important;
    }

    /* Notification dropdown full-width on mobile */
    .dropdown-menu-lg {
        min-width: 280px;
        max-width: calc(100vw - 2rem);
    }

    .chart {
        min-height: 180px;
    }
}

/* ---------- Extra small (< 576px) ---------- */
@media (max-width: 575.98px) {
    .content {
        padding: 0.5rem;
    }

    .ws-stat-card .display-5 {
        font-size: 1.5rem;
    }

    .login-card .card-body {
        padding: 1.5rem;
    }

    .ws-error-code {
        font-size: 4rem;
    }

    .chart-sm {
        min-height: 150px;
    }
}

/* ---------- Print ---------- */
@media print {
    .sidebar,
    .navbar,
    .footer,
    .sidebar-toggle,
    .ws-theme-toggle,
    .dt-buttons,
    .dt-search,
    .dt-paging,
    .paginator {
        display: none !important;
    }

    .main {
        margin-left: 0;
    }

    .card {
        border: 1px solid #e2e8f0;
        box-shadow: none;
        break-inside: avoid;
    }

    body {
        background: #ffffff;
        color: #1a2332;
    }
}