/* ============================================
   Naxoft CRM - Mobile Responsive Overrides
   ============================================ */

/* Mobile sidebar overlay backdrop */
#mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 40;
}
#mobile-sidebar-overlay.active {
    display: block;
}

/* Hamburger button - hidden on desktop */
#mobile-menu-btn {
    display: none;
}

/* ---- Breakpoint: < 768px (mobile) ---- */
@media (max-width: 767px) {
    /* Show hamburger */
    #mobile-menu-btn {
        display: flex;
    }

    /* Sidebar: off-screen by default, slides in */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Main content: full width */
    main {
        width: 100% !important;
    }

    /* Header: reduce padding */
    header {
        padding: 0.75rem 1rem !important;
    }
    header h2 {
        font-size: 1.25rem !important;
    }

    /* Tables: horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table thead,
    table tbody,
    table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }
    table {
        min-width: 600px;
    }

    /* Modals: constrain width on mobile */
    .modal-content,
    [class*="max-w-2xl"],
    [class*="max-w-3xl"],
    [class*="max-w-4xl"],
    [class*="max-w-5xl"] {
        max-width: calc(100vw - 2rem) !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    /* Toast notifications: full width on mobile */
    .toast-container {
        left: 1rem !important;
        right: 1rem !important;
        top: 0.75rem !important;
    }
    .toast {
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* Content padding: reduce on mobile */
    .p-6 {
        padding: 1rem !important;
    }

    /* Grid fixes: force single column on narrow screens */
    .grid.grid-cols-2:not(.grid-cols-7):not(.mobile-keep-cols) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Kanban columns: narrower on mobile */
    .kanban-column {
        min-width: 240px !important;
        max-width: 280px !important;
    }

    /* Task board panel: collapsible on mobile */
    .board-panel {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 35;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .board-panel.mobile-open {
        transform: translateX(0);
    }

    /* Org chart: horizontal scroll */
    .org-container,
    .divisions-container,
    [class*="div-column"] {
        min-width: unset !important;
    }

    /* Fix flex gaps that get too wide */
    .space-x-4 > * + * {
        margin-left: 0.5rem !important;
    }

    /* Smaller text in headers on mobile */
    .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Hide long descriptions on mobile */
    header p.text-gray-400 {
        display: none;
    }
}

/* ---- Breakpoint: 768px - 1023px (tablet) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 220px !important;
    }

    /* Reduce modal widths slightly */
    [class*="max-w-4xl"] {
        max-width: 90vw !important;
    }
}