/* ============================================================
   RESPONSIVE CSS — Auctions Crawler

   Strategia: separazione netta desktop / mobile.
   - Sopra 768px: ZERO modifiche, desktop intatto.
   - Sotto 768px: layout mobile completo e consultabile.
   - 430px: ottimizzazioni specifiche iPhone 16/17 Pro (393px).
   - 374px: fallback ultra-narrow (iPhone SE).

   Pagine coperte: Login, Dashboard, Admin, Unauthorized.
   IMPORTANTE: questo file e' linkato DOPO i <style> inline
   nei template, cosi' ha priorita' di cascade.
   ============================================================ */



/* ---- UTILITIES ---- */
.mobile-only {
    display: none !important;
}

/* ==========================================================
   900px — TABLET / ADMIN MOBILE
   Sidebar collassabile, tabelle scrollabili
   ========================================================== */
@media (max-width: 900px) {
    .mobile-only {
        display: inline-flex !important;
    }

    .layout {
        grid-template-columns: 1fr;
        display: block;
        /* Stack */
        height: auto;
        overflow: visible;
    }

    .sidebar {
        position: fixed;
        top: 54px;
        left: 0;
        bottom: 0;
        width: 280px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
        padding: 16px;
        max-height: none;
        border-bottom: none;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .sidebar.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 100%;
        width: 100vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        z-index: -1;
    }

    .tab-content,
    .detail {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    .editable-table {
        min-width: 600px;
    }

    .admin-page .header {
        padding: 0 16px !important;
    }

    .admin-page .layout {
        display: block;
        height: calc(100dvh - var(--admin-header-h) - var(--admin-quick-actions-h) - var(--admin-footer-h));
        overflow: hidden;
        margin-bottom: var(--admin-footer-h);
    }

    .admin-page .sidebar {
        top: calc(var(--admin-header-h) + var(--admin-quick-actions-h));
        left: 0;
        bottom: var(--admin-footer-h);
        width: var(--admin-drawer-w);
        z-index: 1200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        box-shadow: 12px 0 30px rgba(0, 0, 0, 0.14);
    }

    .admin-page .sidebar.active {
        transform: translateX(0);
    }

    .admin-page .sidebar-backdrop {
        display: block;
        position: fixed;
        top: calc(var(--admin-header-h) + var(--admin-quick-actions-h));
        right: 0;
        bottom: var(--admin-footer-h);
        left: var(--admin-drawer-w);
        background: rgba(0, 0, 0, 0.24);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .admin-page.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-page .admin-desktop-action {
        display: none !important;
    }

    .admin-page .admin-mobile-quick-actions {
        height: var(--admin-quick-actions-h);
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        gap: 0;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        background: transparent;
        position: sticky;
        top: var(--admin-header-h);
        z-index: 210;
    }

    .admin-page .admin-mobile-context {
        min-width: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--text2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.01em;
    }

    .admin-page .admin-mobile-back-btn,
    .admin-page .admin-mobile-add-btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        background: transparent;
        color: var(--text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: none;
    }

    .admin-page .admin-mobile-add-btn {
        color: var(--blue);
    }

    .admin-page #sidebarToggleBtn {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.18), rgba(155, 114, 203, 0.12), rgba(52, 168, 83, 0.12));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        display: inline-flex !important;
    }

    .admin-page #sidebarToggleBtn .material-symbols-outlined {
        font-size: 19px !important;
        color: var(--text);
    }

    .admin-page .admin-mobile-back-btn .material-symbols-outlined,
    .admin-page .admin-mobile-add-btn .material-symbols-outlined {
        font-size: 19px;
    }

    .admin-page .detail {
        height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .admin-page .footer-note {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 220;
        margin: 0;
    }
}


/* ==========================================================
   768px — MOBILE
   Tutto il contenuto diventa scrollabile e consultabile
   ========================================================== */

@media (max-width: 768px) {

    /* ---- LAYOUT MOBILE: Header Fixed + Scrollable Content + Footer Fixed ---- */
    body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex;
        flex-direction: column;
    }

    /* ---- HEADER ---- */
    .header {
        padding: 0 16px 0 70px;
        /* Left padding for corner fold */
        height: 54px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        z-index: 200;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .header h1 {
        font-size: 15px;
    }

    .header-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
    }

    /* ---- CORNER FOLD ---- */
    .corner-fold {
        width: 60px;
        height: 60px;
        z-index: 201;
        /* Above header */
    }

    .corner-fold-text {
        font-size: 8px;
    }

    /* ---- MAIN CONTENT ---- */
    .main {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        /* Remove global padding */
    }

    /* ---- STATS ---- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        max-height: 12.5rem;
        transition: max-height 0.3s ease, gap 0.3s ease, padding 0.3s ease, overflow 0s 0.3s;
        overflow: visible;
        padding-bottom: 0.5rem;
    }

    .stats-grid.stats-compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.25rem 0.375rem;
        max-height: 3rem;
        overflow: clip;
        transition: max-height 0.3s ease, gap 0.3s ease, padding 0.3s ease, overflow 0s;
    }

    .stats-compact .stat-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.125rem;
        padding: 0.25rem 0.375rem;
        min-width: 0;
    }

    .stats-compact .stat-card .label {
        font-size: clamp(0.375rem, 1.8vw, 0.5rem);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .stats-compact .stat-card .value {
        font-size: clamp(0.75rem, 3.3vw, 0.875rem);
        line-height: 1.1;
    }

    .stats-compact .stat-card:hover {
        transform: none;
        box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem rgba(66, 133, 244, 0.3);
    }

    .stats-compact .stat-card .sub {
        display: none;
    }

    .stat-card {
        padding: 12px;
        transition: all 0.3s ease;
    }

    .stat-card .value {
        font-size: 22px;
    }

    .stat-card .sub {
        font-size: 10px;
    }

    /* ---- CONTROLS ROW ---- */
    .controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-wrapper {
        order: -1;
        /* search in cima */
        min-width: 100%;
    }

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

    .site-selector {
        width: 100%;
    }

    .site-selector-inline {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .site-selector-inline select {
        flex: 1;
        min-width: 0;
    }

    .mobile-filters-trigger {
        display: inline-flex;
        height: 34px;
        padding: 0 10px;
        font-size: 11px;
        gap: 2px;
    }

    .mobile-filters-trigger .material-symbols-outlined {
        font-size: 17px;
    }

    #dynamicFilters {
        flex-wrap: wrap;
    }

    /* ---- TABS: icon-only on mobile ---- */
    .tabs-row {
        display: flex;
        gap: 6px;
        width: 100%;
    }

    .tabs-row .tabs {
        flex: 1;
        width: auto;
        display: flex;
        background: rgba(0, 0, 0, 0.06);
        padding: 3px;
        border-radius: 10px;
        gap: 0;
        overflow: hidden;
    }

    .tab {
        flex: 1;
        justify-content: center;
        padding: 4px 2px;
        height: 34px;
        gap: 0;
    }

    /* Hide labels, show only icons on mobile */
    .tab-label {
        display: none;
    }

    .tab-icon {
        font-size: 20px;
    }

    /* ---- FILTER SELECTS ---- */
    .filter-select {
        font-size: 12px;
        height: 34px;
    }

    .site-selector select {
        font-size: 12px;
        height: 34px;
    }

    /* ---- TOOLBAR / PAGINATION: hidden on mobile (infinite scroll) ---- */
    .toolbar-pagination {
        display: none !important;
    }

    .toolbar-pagination-left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .toolbar-pagination-left .filter-select,
    .toolbar-pagination-left #dynamicFilters,
    .toolbar-pagination-left #pageSizeSelect {
        width: 100%;
        min-width: 0;
    }

    #dynamicFilters {
        width: 100%;
    }

    #dynamicFilters .filter-select {
        width: 100%;
    }

    .toolbar-pagination-right {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .toolbar-pagination-info {
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
    }

    .btn-page {
        min-width: 34px;
        min-height: 34px;
        /* touch target iOS */
    }

    /* ---- TABLE ---- */
    #tableWrapper,
    .table-wrapper {
        display: none !important;
    }

    /* ---- MOBILE LIST VIEW ---- */
    /* ---- MOBILE LIST VIEW (Scrollable) ---- */
    /* ---- MAP VISIBILITY HELPER ---- */
    .d-none-important {
        display: none !important;
    }

    /* Higher specificity to override the flex !important below */
    #mobileListView.d-none-important,
    #mapView.d-none-important {
        display: none !important;
    }

    /* ---- MOBILE LIST VIEW (Scrollable — fills available space) ---- */
    #mobileListView,
    #mapView,
    .mobile-list-view {
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 5dvh;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
        padding-left: 8px;
    }

    #mapView {
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* ---- FOOTER ---- */
    .footer-note {
        flex: 0 0 auto;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 8px 10px;
        font-size: 11px;
        z-index: 300;
        text-align: center;
        width: 100%;
        position: relative;
        margin-top: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
        display: grid;
        grid-template-columns: 1fr minmax(0, auto) 1fr;
        align-items: center;
        column-gap: 6px;
    }

    .footer-meta {
        display: block;
        grid-column: 2;
        justify-self: center;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        max-width: 100%;
        text-align: center;
        line-height: 1.3;
    }

    .footer-active-users {
        grid-column: 3;
        justify-self: end;
        align-self: center;
        position: static;
        transform: none;
        height: 28px;
        min-width: 44px;
        padding: 0 8px;
        font-size: 12px;
        gap: 3px;
        border-radius: 999px;
        margin: 0;
    }

    .footer-active-users .material-symbols-outlined {
        font-size: 16px !important;
    }

    /* Fix for Login/Error pages: Force absolute footer to bottom */
    .footer-absolute {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        border-top: none !important;
        box-shadow: none !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        color: var(--text3) !important;
    }

    /* Standalone pages (login, 403, unauthorized): footer stays fixed at bottom */
    .footer-standalone {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        z-index: 200 !important;
    }

    .mobile-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 14px;
        /* Slightly reduced padding */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        gap: 6px;
        /* Reduced gap */
        transition: transform 0.2s;
        margin: 0 4px;
        /* Lateral margin to avoid edge touch */
    }

    .mobile-card:active {
        transform: scale(0.98);
        background-color: #f8fafc;
    }

    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }

    .mobile-card-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--text);
        line-height: 1.3;
        flex: 1;
    }

    .mobile-card-price {
        font-weight: 700;
        font-size: 13px;
        /* Slightly smaller */
        color: var(--text);
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.04);
        padding: 2px 6px;
        border-radius: 6px;
    }

    .mobile-card-body {
        display: flex;
        /* Flex row for single line */
        flex-direction: row;
        flex-wrap: nowrap;
        /* Force single line if possible, or wrap if very long */
        align-items: center;
        gap: 12px;
        font-size: 11px;
        /* Smaller font */
        color: var(--text2);
        overflow: hidden;
        /* Prevent spill */
    }

    /* ---- UNIFORM SPACING ---- */
    .stats-grid,
    .controls-row,
    .search-row {
        padding: 0 12px;
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        margin-bottom: 8px;
    }

    .stats-grid {
        padding-top: 12px;
    }

    .toolbar-pagination,
    .mobile-list-view {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Remove extra margins from cards to leverage container padding */
    .mobile-card {
        margin: 0 0 12px 0;
        /* Only bottom margin */
        width: 100%;
    }

    .mobile-card-body {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        /* Reduced gap to fit content */
        font-size: 11px;
        color: var(--text2);
        height: 20px;
        /* Force fixed height */
        overflow: hidden;
    }

    .mobile-info-item {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        flex: 1;
        /* Share space equally */
        min-width: 0;
        /* CRITICAL for flex truncation */
    }

    .mobile-info-item span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-info-item .material-symbols-outlined {
        font-size: 13px;
        color: var(--text3);
        flex-shrink: 0;
        /* Icon never shrinks */
    }

    .mobile-card-footer {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        /* Actions on right, status left/center */
        align-items: center;
    }

    .mobile-actions {
        display: flex;
        gap: 8px;
    }

    .mobile-status-badge {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* ---- MAP ---- */
    #mapView {
        flex: 1;
        min-height: 0;
        margin: 0 0 8px;
    }

    .map-legend {
        top: auto;
        bottom: 10px;
        right: auto;
        left: 10px;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 8px 12px;
        font-size: 10px;
        background: rgba(255, 255, 255, 0.95);
    }

    .map-fullscreen-btn {
        top: 12px;
        right: 10px;
    }

    /* ---- STATUS BAR ---- */
    .status-bar {
        padding: 12px;
        margin: 0 12px 8px;
        width: auto;
        box-sizing: border-box;
    }

    .status-header-raw {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        padding-top: 5px;
        min-height: 30px;
    }

    .status-header-section-left {
        position: absolute;
        top: 0;
        left: 0;
    }

    .status-header-section-right {
        width: 100%;
        margin-top: 8px;
    }

    .status-close-btn {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }

    .status-title-box {
        margin: 0;
        font-size: 14px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .status-counters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100%;
        justify-content: space-between;
    }

    .mini-stat {
        flex: 1;
        min-width: 0;
        padding: 4px 2px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mini-stat .value {
        font-size: 12px !important;
    }

    .mini-stat .label {
        font-size: 8px !important;
        white-space: nowrap;
    }

    .workflow-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .legend-actions-bar {
        flex-wrap: wrap;
    }

    /* ---- MODALS: Floating card — bordi visibili su tutti i lati ---- */
    .modal-overlay.open {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        height: 85dvh;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        min-height: auto;
        border-radius: 1rem;
        transform: translateY(1rem);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay.open .modal {
        transform: translateY(0);
    }

    /* No drag pill — titolo pulito */
    .modal::before {
        display: none;
    }

    /* Header — uniforme, no sticky, no banda bianca */
    .modal h2 {
        font-size: 1.125rem;
        position: static;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin: 0 0 0.75rem;
        padding: 0 2.75rem 0.5rem 0;
        border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
        flex: none;
    }

    /* Tab content — flusso normale, nessun overflow nascosto */
    .modal-tab-content {
        margin-top: 0;
    }

    .modal-tab-content.active {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }

    #modalTabInfo.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #modalTabDettaglio.active {
        display: flex;
        flex-direction: column;
    }

    #modalDettaglioContent {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Close button — 44px touch target */
    .modal .close-btn {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.125rem;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
    }

    /* Tabs — touch-friendly, scrollable */
    .modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        width: 100%;
    }

    .modal-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.8125rem;
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
    }

    .modal-tab.active {
        color: #fff !important;
    }

    .modal-tabs {
        flex: none;
    }

    /* Actions — sticky bottom, safe-area */
    .modal-actions {
        position: sticky;
        bottom: 0;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0.75rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
        margin-top: auto;
        border-top: none !important;
        z-index: 5;
        flex-direction: column;
        gap: 0.5rem;
    }

    body.low-graphics .modal-actions,
    body.adaptive-low-graphics .modal-actions {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #ffffff !important;
    }

    .modal-actions .btn {
        width: 100%;
        min-height: 2.75rem;
        font-size: 0.9375rem;
        background-clip: padding-box !important;
    }

    /* Workflow modal */
    .workflow-layout {
        grid-template-columns: 1fr;
    }

    .workflow-diagram-container {
        display: none;
    }

    .workflow-settings {
        grid-template-columns: 1fr;
    }

    .force-controls-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .workflow-modal .force-controls-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .workflow-sidebar {
        max-height: none;
        overflow: visible;
    }

    .workflow-sidebar .settings-group input,
    .workflow-sidebar .settings-group select {
        height: 2.75rem;
        font-size: 1rem;
    }

    .settings-row {
        grid-template-columns: 1fr;
    }

    /* CORS / Extension modals */
    .cors-modal .steps {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cors-modal .step {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cors-modal .step-num {
        flex-shrink: 0;
    }

    .cors-modal .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cors-modal .modal-actions .btn {
        width: 100%;
        min-height: 2.75rem;
    }

    #extensionIdInput {
        font-size: 1rem !important;
    }

    /* ---- TOAST ---- */
    .toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
        width: auto;
    }

    .toast {
        width: 100%;
        min-width: auto;
    }

    /* ---- ADMIN ---- */
    .layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: auto;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        max-height: none;
        /* mostra tutto: siti + pulsanti sistema */
        overflow-y: visible;
    }

    .admin-page .header {
        padding: 0 16px !important;
    }

    .admin-page .sidebar {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .admin-page .layout {
        overflow: hidden !important;
    }

    .admin-page .detail {
        overflow-y: auto !important;
    }

    .admin-page .tab-content {
        overflow-x: visible;
    }

    .detail {
        padding: 16px;
        overflow-y: visible;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .permissions-grid {
        grid-template-columns: 1fr;
    }

    .search-box {
        width: 100%;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .features-info-modal {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
        padding: 1rem;
    }

    .panel-title-row {
        align-items: flex-start;
    }

    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container .editable-table {
        min-width: 580px;
    }

    /* Hide Email and Permessi on mobile for Users Table */
    #usersTableBody td:nth-child(2),
    #usersDetail thead th:nth-child(2),
    #usersTableBody td:nth-child(5),
    #usersDetail thead th:nth-child(5) {
        display: none;
    }

    .action-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .site-detail-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 16px;
    }

    .site-detail-badges {
        justify-content: center;
    }

    /* ---- EMPTY STATE / LOADING ---- */
    .empty-state {
        padding: 48px 16px;
    }

    .empty-state .icon {
        font-size: 44px;
    }

    /* ---- LOGIN ---- */
    .login-card {
        width: 92%;
        max-width: 380px;
        padding: 36px 24px;
        border-radius: 24px;
        margin: 20px auto;
        box-sizing: border-box;
    }

    .login-card h1,
    .logo-container h1 {
        font-size: 28px;
    }

    .login-card p {
        font-size: 14px;
    }

    .logo-container {
        margin-bottom: 32px;
    }

    .btn-google {
        margin-top: 32px;
        height: 48px;
        font-size: 14px;
    }

    /* Footer: da absolute a flow naturale su scroll */
    .footer-absolute {
        position: static;
        transform: none;
        margin-top: 24px;
    }

    /* ---- UNAUTHORIZED ---- */
    .unauthorized-card {
        padding: 32px 20px;
        border-radius: 24px;
    }

    .unauthorized-card h1 {
        font-size: 26px;
    }

    .unauthorized-card p {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .icon-box {
        width: 100px;
        height: 100px;
    }

    .icon-box .main-icon {
        font-size: 52px;
    }

    .btn-large {
        height: 48px;
        font-size: 15px;
    }

    /* ---- LOGS ---- */
    .scrape-logs {
        font-size: 11px;
    }

    .log-entry {
        padding: 4px 8px;
    }

    /* ---- BUTTONS ---- */
    .btn {
        font-size: 12px;
    }
}


/* ==========================================================
   430px — iPHONE 16/17 PRO (393×852 logici)
   Bottom-sheet modals, colonne tabella nascoste, micro-spacing
   ========================================================== */
@media (max-width: 430px) {

    /* ---- HEADER ---- */
    .header {
        padding: 0 10px 0 65px;
        /* Left padding 65px for corner fold */
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .header-actions {
        gap: 8px !important;
        /* Override inline gap */
        white-space: nowrap;
    }

    .header h1 {
        font-size: 13px;
    }

    .admin-page .header {
        padding: 0 10px !important;
    }

    .admin-page .admin-mobile-quick-actions {
        padding: 8px 10px;
    }

    .user-badge {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .btn {
        padding: 0 10px;
        height: 30px;
        font-size: 11px;
    }

    .btn-sm {
        padding: 0 8px;
        height: 26px;
        font-size: 11px;
    }

    .footer-note {
        font-size: 10px;
        padding: 8px 8px;
    }

    .footer-active-users {
        height: 26px;
        min-width: 40px;
        padding: 0 7px;
        font-size: 11px;
    }

    /* ---- CORNER FOLD: minimale ---- */
    .corner-fold {
        width: 55px;
        height: 55px;
    }

    .corner-fold-text {
        display: none;
    }

    /* ---- STATS: griglia 2×2 compatta ---- */
    .stats-grid {
        gap: 6px;
    }

    .stats-compact .stat-card .value {
        font-size: clamp(0.6875rem, 3vw, 0.8125rem);
    }

    .stats-compact .stat-card .label {
        font-size: clamp(0.35rem, 1.65vw, 0.4375rem);
    }

    .stats-compact .stat-card {
        padding: 0.1875rem 0.25rem;
    }

    .stat-card {
        padding: 10px;
        border-radius: 10px;
    }

    .stat-card .value {
        font-size: 18px;
    }

    .stat-card .label {
        font-size: 10px;
    }

    .stat-card .sub {
        font-size: 9px;
    }

    /* ---- CONTROLS ---- */
    .search-input {
        font-size: 13px;
    }

    .tab {
        padding: 3px 2px;
        height: 28px;
    }

    .tab-icon {
        font-size: 18px;
    }

    .filter-select {
        font-size: 11px;
        height: 30px;
    }

    .site-selector select {
        font-size: 11px;
        height: 30px;
    }

    /* ---- TOOLBAR ---- */
    .toolbar-pagination-left {
        grid-template-columns: 1fr 1fr;
        gap: 3px;
    }

    .toolbar-pagination-right {
        gap: 3px;
    }

    .btn-page {
        min-width: 30px;
        min-height: 30px;
        font-size: 12px;
    }

    .toolbar-pagination-info {
        font-size: 10px;
    }

    /* ---- STATUS BAR ---- */
    .status-bar {
        padding: 10px;
    }

    .status-counters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .mini-stat {
        padding: 3px 6px;
        border-radius: 6px;
    }

    .mini-stat .value {
        font-size: 13px;
    }

    .mini-stat .label {
        font-size: 8px;
    }

    .workflow-legend {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 10px;
    }

    .legend-item-wf {
        gap: 3px;
    }

    .legend-actions-bar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 3px;
    }

    .btn-action-status {
        font-size: 10px;
        padding: 0 8px;
        height: 26px;
    }

    /* ---- TABELLA: piu' compatta ---- */
    table {
        min-width: 420px;
    }

    thead th,
    tbody td {
        padding: 5px 6px;
        font-size: 11px;
    }

    /* Disabilita tooltip su touch */
    .btn-action::after {
        display: none;
    }

    /* ---- MODALS: raffinamento iPhone ---- */
    .modal {
        padding: 0.75rem;
        max-height: calc(100dvh - 1rem);
    }

    .modal h2 {
        font-size: 1rem;
        margin: 0 0 0.5rem;
        padding: 0 2.5rem 0.375rem 0;
    }

    .modal-tabs {
        gap: 0.125rem;
    }

    .modal-tab {
        font-size: 0.75rem;
        min-height: 2.5rem;
        padding: 0.375rem 0.75rem;
    }

    .modal-actions {
        margin-top: auto;
        padding: 0.5rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* Workflow modal compatto */
    .workflow-step {
        padding: 8px;
    }

    .step-header h3 {
        font-size: 13px;
    }

    .step-desc {
        font-size: 11px;
    }

    .workflow-settings {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .workflow-sidebar {
        padding: 10px;
    }

    .workflow-sidebar .settings-group label {
        font-size: 11px;
    }

    .workflow-sidebar .settings-group input,
    .workflow-sidebar .settings-group select {
        height: 38px;
        font-size: 13px;
    }

    /* input piu' grandi per touch */
    .settings-group {
        margin-bottom: 14px;
    }

    /* Btn nel workflow: full width e touch-friendly */
    .workflow-modal .modal-actions .btn {
        height: 48px;
        font-size: 15px;
    }

    /* ---- MAP ---- */
    #mapView {
        flex: 1;
        min-height: 0;
    }

    .map-legend {
        padding: 6px 8px;
        font-size: 10px;
    }

    .legend-item {
        font-size: 10px;
    }

    .legend-color {
        width: 10px;
        height: 10px;
    }

    /* ---- ADMIN ---- */
    .sidebar {
        max-height: none;
        padding: 12px;
    }

    .sidebar h3 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .sidebar-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .sidebar-action {
        padding: 8px;
        gap: 8px;
    }

    .sidebar-action-desc {
        display: none;
    }

    .sidebar-action-label {
        font-size: 11px;
    }

    .sidebar-action-icon {
        width: 28px;
        height: 28px;
    }

    .sidebar-action-icon .material-symbols-outlined {
        font-size: 16px;
    }

    .detail {
        padding: 12px;
    }

    .detail h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .site-card {
        padding: 10px;
        gap: 8px;
    }

    .site-card .name {
        font-size: 12px;
    }

    .site-card .url {
        font-size: 10px;
    }

    .site-card-icon {
        width: 30px;
        height: 30px;
    }

    .site-card-icon .material-symbols-outlined {
        font-size: 17px;
    }

    .tab-content {
        padding: 12px;
    }

    .form-group label {
        font-size: 12px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 13px;
        padding: 8px 10px;
    }

    .action-toolbar .toolbar-divider {
        display: none;
    }

    .editable-table th,
    .editable-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .site-detail-header {
        padding: 12px;
        border-radius: 12px;
    }

    .site-detail-name {
        font-size: 17px;
    }

    .site-detail-url {
        font-size: 12px;
    }

    /* ---- LOGIN ---- */
    .login-card {
        width: 90%;
        max-width: 340px;
        padding: 28px 20px;
        margin: 16px auto;
        border-radius: 20px;
    }

    .login-card h1,
    .logo-container h1 {
        font-size: 24px;
    }

    .login-card p {
        font-size: 13px;
    }

    .logo-container {
        margin-bottom: 24px;
    }

    .btn-google {
        margin-top: 24px;
        height: 46px;
        font-size: 14px;
        border-radius: 23px;
    }

    .btn-google::before {
        border-radius: 25px;
    }

    /* Blobs: riduci su mobile per performance */
    .blobs-container {
        opacity: 0.25;
    }

    /* ---- UNAUTHORIZED ---- */
    .unauthorized-card {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .unauthorized-card h1 {
        font-size: 22px;
    }

    .unauthorized-card p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .icon-box {
        width: 80px;
        height: 80px;
    }

    .icon-box .main-icon {
        font-size: 40px;
    }

    .user-info {
        padding: 10px 12px;
        margin-bottom: 24px;
    }

    .btn-large {
        height: 46px;
        font-size: 14px;
        border-radius: 12px;
    }

    /* ---- TOAST ---- */
    .toast-container {
        left: 8px;
        right: 8px;
        top: 8px;
    }

    /* ---- EMPTY STATE ---- */
    .empty-state {
        padding: 32px 12px;
    }

    .empty-state .icon {
        font-size: 36px;
    }

    .empty-state h3 {
        font-size: 15px;
    }

    .empty-state p {
        font-size: 12px;
    }

    /* ---- LOADING ---- */
    .ai-spinner {
        width: 44px;
        height: 44px;
    }

    .loading-text {
        font-size: 12px;
    }

    /* ---- LOGS ---- */
    .scrape-logs {
        font-size: 10px;
    }

    .log-entry {
        padding: 3px 6px;
    }

    .log-time {
        font-size: 9px;
    }

    .log-type {
        font-size: 8px;
    }
}


/* ==========================================================
   374px — iPHONE SE / ULTRA-NARROW
   Stats in colonna singola inline, tutto ultra-compatto
   ========================================================== */
@media (max-width: 374px) {

    /* Stats: 1 colonna, label e valore affiancati */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .stat-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
    }

    .stat-card .label {
        font-size: 11px;
    }

    .stat-card .value {
        font-size: 16px;
    }

    .stat-card .sub {
        display: none;
    }

    /* Header ultra-compatto */
    .header h1 {
        font-size: 12px;
    }

    .header {
        padding: 6px 10px;
        padding-right: 46px;
    }

    /* Tabs minime */
    .tab {
        font-size: 10px;
        padding: 4px 8px;
        height: 26px;
    }

    /* Tabella ancora piu' stretta */
    thead th,
    tbody td {
        padding: 4px 5px;
        font-size: 10px;
    }

    /* Modal massimo spazio */
    .modal {
        max-height: calc(100dvh - 0.75rem);
        padding: 0.625rem;
    }

    .modal h2 {
        font-size: 0.875rem;
        padding: 0 2rem 0.25rem 0;
        margin: 0 0 0.375rem;
    }

    /* Mini stats compattissimi */
    .status-counters {
        gap: 3px;
    }

    .mini-stat {
        padding: 2px 4px;
    }

    .mini-stat .value {
        font-size: 12px;
    }

    .mini-stat .label {
        font-size: 7px;
    }

    /* ---- LOGIN COMPACT ---- */
    .login-card {
        padding: 24px 16px;
        margin: 8px;
    }

    .login-card h1,
    .logo-container h1 {
        font-size: 22px;
    }

    .logo-container {
        margin-bottom: 20px;
    }

    .btn-google {
        margin-top: 20px;
        height: 44px;
    }

    /* Unauthorized compattissimo */
    .unauthorized-card {
        padding: 20px 12px;
    }

    .unauthorized-card h1 {
        font-size: 20px;
    }

    .icon-box {
        width: 64px;
        height: 64px;
    }

    .icon-box .main-icon {
        font-size: 32px;
    }

    .btn-large {
        height: 42px;
        font-size: 13px;
    }
}

/* ---- COMPACT MODE (Mobile Scroll - max-width 768px to match JS) ---- */
@media (max-width: 768px) {
    body {
        /* Prevents pull-to-refresh on some mobile browsers if needed, 
           but careful as it might block scroll. 
           Mainly ensure body doesn't overflow horizontally */
        overflow-x: hidden;
    }

    /* Transition base for stats */
    .stats-grid {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        /* iOS-like spring */
        transform-origin: top center;
        max-height: 500px;
        /* Arbitrary large value for transition */
        opacity: 1;
    }

    /* Transition base for table/map */
    .table-wrapper,
    #mapView {
        transition: flex 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        flex: 1;
        min-height: 0;
    }

    /* --- Compact State --- */
    body.compact-mode .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.25rem 0.375rem;
        margin-bottom: 0.5rem;
        overflow: clip;

        padding-top: 0.5rem;
    }

    body.compact-mode .stat-card {
        padding: 0.25rem 0.375rem;
        border-radius: 0.625rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 0.125rem;
        min-width: 0;
        box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.05);
        border: 0.0625rem solid rgba(0, 0, 0, 0.05);
    }

    body.compact-mode .stat-card .label {
        font-size: clamp(0.375rem, 1.8vw, 0.5rem);
        letter-spacing: 0.03125rem;
        margin-bottom: 0;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    body.compact-mode .stat-card .value {
        font-size: clamp(0.75rem, 3.3vw, 0.875rem);
        line-height: 1.1;
    }

    body.compact-mode .stat-card .sub {
        display: none !important;
    }

    body.compact-mode .stat-card:hover {
        transform: none;
        box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem rgba(66, 133, 244, 0.3);
    }

    /* Expand content area in compact mode */
    body.compact-mode .table-wrapper,
    body.compact-mode #mapView {
        flex: 1;
        min-height: 0;
    }
}