/* ============================================ */
/* MOBILE RESPONSIVE - ViralWindow              */
/* Global responsive rules for all pages        */
/* ============================================ */

/* Viewport meta hint */
@viewport {
    width: device-width;
}

/* ============================================ */
/* TABLES - Horizontal scroll on mobile         */
/* ============================================ */
@media (max-width: 768px) {

    /* Wrap all tables in scrollable container */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table thead,
    table tbody,
    table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    table th,
    table td {
        font-size: 12px;
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* Table containers */
    .overflow-x-auto,
    .table-container,
    [class*="overflow"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Scroll indicator shadow */
    .overflow-x-auto {
        position: relative;
    }
}

/* ============================================ */
/* FORMS - Stack to 1 column on mobile          */
/* ============================================ */
@media (max-width: 768px) {

    /* Tailwind grids → 1 column */
    .grid-cols-2,
    .md\:grid-cols-2,
    .grid-cols-3,
    .md\:grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-4,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Flex rows → stack */
    .flex.items-center.gap-4,
    .flex.items-center.gap-6,
    .flex.gap-4,
    .flex.gap-6 {
        flex-wrap: wrap;
    }

    /* Form inputs full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
    }
}

/* ============================================ */
/* CARDS & GRIDS - Responsive columns           */
/* ============================================ */
@media (max-width: 768px) {

    /* KPI cards grid */
    .grid.grid-cols-4,
    .grid.grid-cols-3,
    .grid.md\:grid-cols-4,
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Card padding reduce */
    .p-6 {
        padding: 12px !important;
    }

    .p-8 {
        padding: 16px !important;
    }

    .px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .py-6 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

@media (max-width: 480px) {

    .grid.grid-cols-4,
    .grid.md\:grid-cols-4,
    .grid.grid-cols-3,
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ============================================ */
/* PAGE HEADERS & TOOLBARS - Stack on mobile    */
/* ============================================ */
@media (max-width: 768px) {

    /* Page title + action buttons → stack */
    .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Toolbar filters → stack */
    .flex.items-end.gap-4,
    .flex.items-end.gap-6,
    .flex.flex-wrap.gap-4 {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* Search bar full width */
    .flex.items-end.gap-4>div,
    .flex.items-end.gap-6>div {
        width: 100% !important;
    }

    /* Action buttons - wrap */
    .flex.gap-2,
    .flex.gap-3 {
        flex-wrap: wrap;
    }

    /* Hide long text labels on small screens */
    .hidden-mobile {
        display: none !important;
    }
}

/* ============================================ */
/* MODALS - Full width on mobile                */
/* ============================================ */
@media (max-width: 768px) {

    /* Modal containers */
    .fixed.inset-0 .bg-white,
    .fixed.inset-0>div>div,
    [class*="modal"] .bg-white,
    .vw-modal {
        max-width: 95vw !important;
        width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }

    /* Modal body scroll */
    .fixed.inset-0 .overflow-y-auto,
    [class*="modal"] .overflow-y-auto {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================ */
/* TYPOGRAPHY - Readable on mobile              */
/* ============================================ */
@media (max-width: 768px) {

    /* Page titles */
    .text-2xl,
    .text-3xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.1rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    /* Small text stays readable */
    .text-xs {
        font-size: 11px !important;
    }

    .text-sm {
        font-size: 13px !important;
    }
}

/* ============================================ */
/* BUTTONS - Touch friendly on mobile           */
/* ============================================ */
@media (max-width: 768px) {

    button,
    .btn,
    [class*="btn"] {
        min-height: 40px;
        font-size: 13px;
    }

    /* Small action buttons in rows */
    .px-3.py-2,
    .px-2.py-1 {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Button text hide on mobile, show icon only */
    .mobile-icon-only span,
    .mobile-icon-only .btn-text {
        display: none;
    }
}

/* ============================================ */
/* SIDEBAR SPECIFIC - User info compact         */
/* ============================================ */
@media (max-width: 768px) {
    .sidebar-logo {
        padding: 1rem !important;
    }

    /* User info section */
    .sidebar .flex.items-center.gap-3 {
        gap: 8px;
    }
}

/* ============================================ */
/* UTILITIES                                    */
/* ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Prevent content from overflowing viewport */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .main-content {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Fix any absolutely positioned elements that might overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================ */
/* PRINT - Hide sidebar and mobile UI           */
/* ============================================ */
@media print {

    .sidebar,
    .mobile-hamburger,
    .sidebar-overlay {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}