/**
 * Help Desk Partners — mobile & tablet responsive layer
 * Breakpoints: sm 640px, md 768px, lg 1024px
 */

/* ── Front site ─────────────────────────────────────────────── */
@media (max-width: 639px) {
    :root {
        --front-header-h: 4rem;
    }

    .front-header .ml-3.text-xl {
        font-size: 1rem;
        max-width: 10.5rem;
        line-height: 1.2;
    }

    .front-header .w-10.h-10 {
        width: 2.25rem;
        height: 2.25rem;
    }

    .front-banner-inner {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .front-banner-visual {
        min-height: 220px;
    }

    .front-banner-visual img {
        min-height: 220px;
    }

    .front-banner-offer-card {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .front-page-hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .front-reviews-track {
        min-height: 340px;
    }

    /* Stats: single column on very small phones */
    .front-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

@media (max-width: 380px) {
    .front-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .front-banner-visual {
        min-height: 320px;
    }

    .front-banner-visual img {
        min-height: 320px;
    }
}

@media (max-width: 1023px) {
    .front-footer-cta h3 {
        font-size: 1.5rem !important;
    }

    .front-footer-main .grid {
        gap: 2rem !important;
    }

    .front-footer-bottom .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 639px) {
    .front-footer-cta .max-w-7xl {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .front-footer-bottom p {
        font-size: 0.8125rem;
    }
}

/* Touch-friendly tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .front-nav-link,
    .front-footer-links a,
    .front-footer-contact-item a,
    .front-footer-social {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── Admin / portal shell ───────────────────────────────────── */
@media (max-width: 1023px) {
    html.admin-panel.admin-modern main.admin-main-modern {
        padding: 0.75rem !important;
    }

    html.admin-panel.admin-modern .admin-module-modern {
        border-radius: 1rem;
        padding: 0.25rem;
    }

    html.admin-panel.admin-modern header.admin-top-modern .page-title-wrap p {
        display: none;
    }

    html.admin-panel.admin-modern header.admin-top-modern {
        flex-wrap: wrap;
        min-height: 3.5rem;
        height: auto;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    html.admin-panel.admin-modern header.admin-top-modern > div:last-child {
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    /* Page headers stack */
    .admin-module-modern .admin-page-head {
        flex-direction: column;
        align-items: stretch !important;
    }

    .admin-module-modern .admin-page-head > div:last-child {
        margin-top: 0.75rem;
        margin-left: 0 !important;
    }

    .admin-module-modern .admin-page-head .inline-flex,
    .admin-module-modern .admin-page-head button,
    .admin-module-modern .admin-page-head a.inline-flex {
        width: 100%;
        justify-content: center;
    }

    /* Filter grids: single column */
    .admin-module-modern form .grid.grid-cols-2,
    .admin-module-modern .grid.grid-cols-2:not(.gap-0) {
        grid-template-columns: 1fr !important;
    }

    .admin-module-modern form .md\:col-span-2.flex {
        flex-direction: column;
    }

    .admin-module-modern .bg-white.rounded-2xl.p-6,
    .admin-module-modern .bg-white.rounded-2xl.shadow-sm.p-6 {
        padding: 1rem !important;
    }

    /* Modals: edge-to-edge on phone */
    .admin-module-modern [role="dialog"] .sm\:max-w-2xl,
    .admin-module-modern [role="dialog"] .sm\:max-w-sm,
    .admin-module-modern [role="dialog"] .sm\:max-w-lg,
    .admin-module-modern [role="dialog"] .sm\:max-w-xl {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem !important;
    }

    .admin-module-modern [role="dialog"] .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Notification dropdown */
    html.admin-panel header .absolute.right-0.mt-2.w-80 {
        width: min(20rem, calc(100vw - 1.5rem)) !important;
        right: -0.25rem;
    }

    /* Flash messages */
    .notification-content {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem !important;
        font-size: 0.8125rem !important;
    }

    /* Dashboard KPI text */
    .admin-module-modern .text-3xl.font-extrabold {
        font-size: 1.75rem;
    }

    /* Reports / multi-column stat rows */
    .admin-module-modern .grid.grid-cols-2.md\:grid-cols-4,
    .admin-module-modern .grid.grid-cols-2.md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .admin-module-modern .grid.grid-cols-2.md\:grid-cols-4,
    .admin-module-modern .grid.grid-cols-2.md\:grid-cols-2,
    .admin-module-modern .grid.grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Chat widget — full panel on mobile, compact on tablet */
.admin-chat-panel {
    z-index: 10000;
}

@media (max-width: 767px) {
    .admin-chat-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: min(85vh, 600px) !important;
        border-radius: 1rem 1rem 0 0 !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .admin-chat-panel {
        width: min(22rem, calc(100vw - 2rem)) !important;
        right: 1rem !important;
        bottom: 1rem !important;
        height: min(70vh, 520px) !important;
    }
}

/* Mobile search bar (shown via .admin-mobile-search) */
.admin-mobile-search {
    display: none;
    width: 100%;
    padding: 0 1rem 0.75rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.95);
}

.admin-mobile-search.is-visible {
    display: block;
}

@media (max-width: 767px) {
    .admin-mobile-search-toggle {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .admin-mobile-search-toggle {
        display: none !important;
    }

    .admin-mobile-search {
        display: none !important;
    }
}

/* ── Stacked data tables (class added by JS) ───────────────── */
@media (max-width: 767px) {
    .admin-module-modern table.table-responsive-stack {
        min-width: 0 !important;
    }

    .admin-module-modern table.table-responsive-stack thead {
        display: none;
    }

    .admin-module-modern table.table-responsive-stack tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .admin-module-modern table.table-responsive-stack tbody tr:hover {
        background: #fff !important;
    }

    .admin-module-modern table.table-responsive-stack tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.65rem 1rem !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        white-space: normal !important;
        text-align: right;
        font-size: 0.8125rem !important;
    }

    .admin-module-modern table.table-responsive-stack tbody td:last-child {
        border-bottom: none !important;
        justify-content: flex-end;
        padding-top: 0.5rem !important;
        padding-bottom: 0.75rem !important;
    }

    .admin-module-modern table.table-responsive-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        text-align: left;
        flex-shrink: 0;
        max-width: 42%;
    }

    .admin-module-modern table.table-responsive-stack tbody td[data-label=""]::before,
    .admin-module-modern table.table-responsive-stack tbody td:not([data-label])::before {
        display: none;
    }

    .admin-module-modern table.table-responsive-stack tbody td > * {
        max-width: 58%;
    }

    .admin-module-modern table.table-responsive-stack tbody td .flex.items-center {
        max-width: 100%;
        justify-content: flex-end;
    }

    /* Parent scroll wrapper: no horizontal scroll when stacked */
    .admin-module-modern .overflow-x-auto:has(table.table-responsive-stack) {
        overflow-x: visible;
    }
}

/* Tablet: keep horizontal scroll but softer */
@media (min-width: 768px) and (max-width: 1023px) {
    .admin-module-modern .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .admin-module-modern .overflow-x-auto::after {
        content: '';
        display: block;
        height: 0;
    }
}

/* Scroll hint for wide tables (mobile/tablet when not stacked) */
@media (max-width: 1023px) {
    .admin-module-modern .overflow-x-auto:not(:has(table.table-responsive-stack)) {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }
}

/* Auth pages */
@media (max-width: 639px) {
    .auth-form-shell {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .auth-form-shell .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .auth-form-shell .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    .admin-chat-panel {
        bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }

    @media (max-width: 767px) {
        .front-header {
            padding-left: max(0.5rem, env(safe-area-inset-left));
            padding-right: max(0.5rem, env(safe-area-inset-right));
        }
    }
}