/**
 * Responsive overrides for admin (ap-*), expert/security (ep-*), customer (cp-*)
 * Loaded after panel theme CSS via head.php
 */

/* ─── Tablet (768–1023px) ─── */
@media (max-width: 1023px) {
    .ap-filter-row-4,
    .ap-filter-row-6,
    .ap-filter-grid,
    .ap-filter-grid-5,
    .ep-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ap-filter-row-6 .ap-btn,
    .ep-filter-bar .ep-btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .ep-scroll .ap-exhibitions-page .ap-filter-row-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ─── Mobile (≤767px) ─── */
@media (max-width: 767px) {
    /* Scroll area padding */
    .ap-scroll,
    .ep-scroll,
    .cp-scroll {
        padding: 0.85rem 0.75rem 4.5rem !important;
    }

    .ap-container,
    .ep-container,
    .cp-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    /* Headers — unified layout on mobile */
    .pn-header,
    .ap-header,
    .ap-header--mockup,
    .ep-header,
    .ep-header--mockup,
    .cp-header,
    .cp-header--mockup {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 0.5rem 0.65rem;
        height: auto !important;
        min-height: 3.75rem;
        padding: 0.65rem 0.75rem !important;
    }

    .pn-header__start,
    .ap-header-left,
    .ep-header-left,
    .cp-header-left {
        grid-column: 1 / 3;
        grid-row: 1;
        flex: none !important;
        min-width: 0;
        gap: 0.65rem;
    }

    .pn-header__end,
    .ap-header-actions,
    .ep-header-actions,
    .cp-header-actions {
        grid-column: 3;
        grid-row: 1;
        width: auto !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .pn-header__breadcrumb-root,
    .ap-breadcrumb > span:first-child,
    .ep-breadcrumb > span:first-child,
    .pn-header__breadcrumb i {
        display: none !important;
    }

    .pn-header__breadcrumb,
    .ap-breadcrumb,
    .ep-breadcrumb {
        display: flex !important;
        min-width: 0;
    }

    .pn-header__breadcrumb-current,
    .ap-breadcrumb-active,
    .ep-breadcrumb-active {
        font-size: 0.92rem;
        max-width: 11rem;
    }

    .pn-header__search,
    .ap-search,
    .ep-search,
    .cp-search {
        display: flex !important;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        order: unset !important;
    }

    .pn-header__tools,
    .pn-header__exhibition,
    .ep-exhibition-dropdown {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        min-width: 0;
    }

    .ep-exhibition-select {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 0.78rem;
        padding: 0.45rem 0.75rem;
    }

    .ep-exhibition-select-label {
        display: none;
    }

    .ep-exhibition-select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
    }

    .ep-exhibition-menu {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }

    .cp-header-title,
    .cp-header-sub,
    .cp-header-divider,
    .cp-header-inner {
        display: none !important;
    }

    /* Page heads */
    .ap-page-head,
    .ep-page-head,
    .cp-page-head,
    .ap-page-head-with-date {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .ap-page-head h1,
    .ep-page-head h1,
    .cp-page-head h1 {
        font-size: 1.25rem !important;
        line-height: 1.35;
    }

    .ap-page-head .ap-btn,
    .ep-page-head .ep-btn,
    .cp-page-head .cp-btn,
    .ap-page-head-with-date .ap-btn {
        width: 100%;
        justify-content: center;
    }

    .ep-page-toolbar,
    .ap-page-toolbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    /* Filters — single column */
    .ap-filter-row,
    .ap-filter-row-4,
    .ap-filter-row-6,
    .ap-filter-grid,
    .ap-filter-grid-5,
    .ap-filter-bar,
    .ep-filter-bar,
    .ep-scroll .search-bar {
        grid-template-columns: 1fr !important;
    }

    .ap-filter-actions,
    .ap-filter-bar .ap-btn,
    .ep-filter-bar .ep-btn {
        width: 100%;
        justify-content: center;
    }

    /* Stat grids */
    .ap-stat-grid,
    .ep-stat-grid,
    .ep-stat-grid-modern,
    .cp-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .cp-stat-purple {
        grid-column: auto !important;
    }

    /* Cards */
    .ap-card,
    .ep-card,
    .cp-card,
    .ep-table-card,
    .ap-table-card,
    .modern-card,
    .exd-page .modern-card,
    .db-page .modern-card {
        max-width: 100%;
        border-radius: 1.15rem;
    }

    .ap-card,
    .ep-card,
    .cp-card {
        padding: 1rem !important;
    }

    /* Tables — horizontal scroll on mobile (like expert dashboard) */
    .panel-table-scroll,
    .ap-table-wrap,
    .ep-table-wrap,
    .cp-table-wrap,
    .ep-legacy-table-wrap,
    .ep-table-modern,
    .msp-table-card,
    .cp-scroll .table-wrap,
    .ap-scroll .table-wrap,
    .ep-scroll .table-wrap,
    .ap-scroll .overflow-x-auto,
    .ep-scroll .overflow-x-auto,
    .cp-scroll .overflow-x-auto,
    .ap-scroll .glass-card .overflow-x-auto,
    .ep-scroll .glass-card .overflow-x-auto,
    .cx-page .overflow-x-auto,
    .db-page .overflow-x-auto,
    .exd-page .overflow-x-auto,
    .exr-page .overflow-x-auto,
    .exc-page .overflow-x-auto,
    .ext-page .overflow-x-auto,
    .exu-page .overflow-x-auto,
    .ap-sms-page .ap-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .panel-table-scroll table,
    .ap-table-wrap table,
    .ep-table-wrap table,
    .cp-table-wrap table,
    .ep-legacy-table-wrap table,
    .ep-table-modern table,
    .msp-table-card table,
    .cp-scroll .table-wrap table,
    .ap-scroll .table-wrap table,
    .ep-scroll .table-wrap table,
    .ap-scroll .overflow-x-auto table,
    .ep-scroll .overflow-x-auto table,
    .cp-scroll .overflow-x-auto table,
    .ap-scroll .glass-card .overflow-x-auto table,
    .ep-scroll .glass-card .overflow-x-auto table,
    .cx-page .overflow-x-auto table,
    .db-page .overflow-x-auto table,
    .exd-page .overflow-x-auto table,
    .exr-page .overflow-x-auto table,
    .exc-page .overflow-x-auto table,
    .ext-page .overflow-x-auto table,
    .exu-page table,
    .ap-sms-page .ap-table-wrap table {
        min-width: 40rem;
        width: max-content;
    }

    .panel-table-scroll th,
    .panel-table-scroll td,
    .ap-table-wrap th,
    .ap-table-wrap td,
    .ep-table-wrap th,
    .ep-table-wrap td,
    .cp-table-wrap th,
    .cp-table-wrap td,
    .ep-legacy-table-wrap th,
    .ep-legacy-table-wrap td,
    .ep-table-modern th,
    .ep-table-modern td,
    .cp-scroll .table-wrap th,
    .cp-scroll .table-wrap td,
    .ap-scroll .table-wrap th,
    .ap-scroll .table-wrap td,
    .ep-scroll .table-wrap th,
    .ep-scroll .table-wrap td,
    .ap-scroll .overflow-x-auto th,
    .ap-scroll .overflow-x-auto td,
    .ep-scroll .overflow-x-auto th,
    .ep-scroll .overflow-x-auto td,
    .ap-scroll .glass-card .overflow-x-auto th,
    .ap-scroll .glass-card .overflow-x-auto td,
    .ep-scroll .glass-card .overflow-x-auto th,
    .ep-scroll .glass-card .overflow-x-auto td,
    .cx-page .overflow-x-auto th,
    .cx-page .overflow-x-auto td,
    .msp-table-card th,
    .msp-table-card td,
    .exr-page table th,
    .exr-page table td,
    .exc-page table th,
    .exc-page table td,
    .ext-page table th,
    .ext-page table td,
    .exu-page table th,
    .exu-page table td,
    .ap-sms-page .ap-table-wrap th,
    .ap-sms-page .ap-table-wrap td {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.8rem;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    .panel-table-scroll .ap-meta,
    .panel-table-scroll .ep-meta,
    .panel-table-scroll .cp-meta,
    .ap-table-wrap .ap-meta,
    .ep-table-wrap .ep-meta,
    .cp-table-wrap .cp-meta {
        display: block;
        white-space: normal !important;
        margin-top: 0.2rem;
    }

    .ap-table-head,
    .ep-table-head {
        flex-direction: column;
        align-items: stretch !important;
        padding: 1rem !important;
    }

    .ap-table-head form,
    .ep-table-head form {
        width: 100%;
        flex-direction: column;
    }

    .ap-table-head .ap-input,
    .ep-table-head .ep-input,
    .ap-table-head select,
    .ep-table-head select {
        width: 100% !important;
    }

    /* Tailwind hybrid pages */
    .exd-page,
    .db-page,
    .exh-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .exd-page .overflow-x-auto,
    .db-page .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Forms */
    .ap-form-actions,
    .ep-form-actions {
        flex-wrap: wrap;
        justify-content: stretch !important;
    }

    .ap-form-actions .ap-btn,
    .ep-form-actions .ep-btn {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 7.5rem;
        justify-content: center;
    }

    .ap-form-grid,
    .exf-form-grid,
    .ep-grid-2,
    .ep-detail-grid,
    .ep-notes-grid {
        grid-template-columns: 1fr !important;
    }

    .exf-form-grid .exf-span-2 {
        grid-column: span 1 !important;
    }

    /* Pagination */
    .ap-scroll .pagination,
    .ep-scroll .pagination,
    .cp-scroll .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
    }

    /* Tickets */
    .ep-ticket-layout {
        grid-template-columns: 1fr !important;
    }

    /* Profile split layouts */
    .ap-profile-grid,
    .ep-profile-grid,
    .cp-profile-grid {
        grid-template-columns: 1fr !important;
    }

    /* Exhibition header timer */
    .exh-page .timer-container {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
        padding: 0.85rem !important;
    }

    .exh-page .timer-container > .flex {
        border-left: none !important;
        padding-left: 0 !important;
        justify-content: center;
    }

    /* Map viewer */
    .map-studio-frame,
    .map-studio-viewport {
        max-height: 55vh !important;
    }

    .map-zoom-controls {
        transform: scale(0.9);
        transform-origin: top left;
    }

    /* Action button groups in tables */
    .exf-action-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Flash messages */
    .ap-flash,
    .ep-flash,
    .cp-flash {
        font-size: 0.85rem;
        padding: 0.75rem 0.85rem;
    }

    /* Legacy admin header overrides removed — unified .pn-header grid above */

    /* SMS page */
    .ap-sms-page {
        max-width: 100% !important;
    }

    .ap-sms-credit-banner {
        flex-direction: column;
        align-items: stretch !important;
        padding: 1.25rem !important;
        text-align: center;
    }

    .ap-sms-credit-banner h2 {
        font-size: 1.65rem !important;
    }

    .ap-sms-charge-btn {
        width: 100%;
    }

    .ap-sms-glass {
        padding: 1rem !important;
        border-radius: 1.15rem;
    }

    .ap-sms-page .ap-tabs-line {
        gap: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        margin-bottom: 1.25rem;
    }

    .ap-sms-page .ap-tabs-line .ap-tab {
        flex: 0 0 auto;
        font-size: 0.82rem;
        padding-bottom: 0.65rem;
        white-space: nowrap;
    }

    .ap-sms-send-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .ap-sms-dropdown-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .ap-sms-queue {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.65rem;
    }

    .ap-sms-modal .ap-sms-modal-card {
        margin: 0;
        max-width: calc(100% - 0.5rem);
        padding: 1.15rem;
    }

    /* Profile page */
    .ap-profile-page,
    .ep-scroll .ap-profile-page {
        max-width: 100% !important;
    }

    .ap-profile-page-head h1 {
        font-size: 1.2rem !important;
    }

    .ap-profile-page-grid {
        gap: 1rem !important;
    }

    .ap-profile-form-card,
    .ap-profile-glass {
        padding: 1.15rem !important;
        border-radius: 1.15rem !important;
    }

    .ap-profile-fields {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .ap-profile-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ap-profile-cancel-btn,
    .ap-profile-save-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .ap-profile-side-card {
        padding: 1.15rem !important;
    }

    /* Updates page */
    .ap-updates-hero h1 {
        font-size: 1.25rem !important;
        flex-wrap: wrap;
    }

    .ap-updates-status-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.85rem;
        padding: 1.25rem !important;
    }

    .ap-updates-status-card h2 {
        font-size: 1.35rem !important;
        flex-wrap: wrap;
    }

    .ap-updates-action {
        padding: 1.25rem !important;
    }

    .ap-updates-action-icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.5rem;
    }

    .ap-tech-note {
        padding: 1rem !important;
    }

    .ap-tech-note code {
        word-break: break-all;
    }

    /* Expert legacy pages */
    .exr-page,
    .exc-page,
    .exu-page,
    .ext-page {
        width: 100%;
        max-width: 100% !important;
    }

    .ext-page .modern-card.p-6 {
        padding: 1.15rem !important;
    }

    /* Expert forms pages */
    .exf-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .exf-picker-card.ep-card,
    .ep-table-card .ep-table-head {
        padding: 1rem !important;
    }

    .exf-form-grid .exf-check-row {
        min-height: auto;
        align-items: flex-start;
    }
}

/* ─── Very small phones (≤480px) ─── */
@media (max-width: 480px) {
    .ap-scroll,
    .ep-scroll,
    .cp-scroll {
        padding: 0.65rem 0.5rem 4rem !important;
    }

    .ap-icon-btn,
    .ep-icon-btn,
    .cp-icon-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .ap-form-actions .ap-btn,
    .ep-form-actions .ep-btn {
        flex: 1 1 100%;
    }

    .panel-table-scroll table,
    .ap-table-wrap table,
    .ep-table-wrap table,
    .cp-table-wrap table {
        min-width: 34rem;
    }
}