/* ==================== RESPONSIVE MOBILE - REFACTORED ==================== */
/* 
 * File consolidato per tutte le regole mobile/tablet
 * Strategia: specificità > !important
 * Organizzazione: generale → specifica → override temi
 */

/* ==================== CSS CUSTOM PROPERTIES (MOBILE) ==================== */
:root {
    /* Dimensioni touch target (WCAG 2.1) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Mobile spacing */
    --mobile-gap-sm: 0.5rem;
    --mobile-gap-md: 0.75rem;
    --mobile-gap-lg: 1rem;
    
    /* Mobile font sizes */
    --mobile-font-base: 0.9rem;
    --mobile-font-lg: 1rem;
    --mobile-font-xl: 1.1rem;
    
    /* Card/Button mobile */
    --mobile-card-padding: 1rem;
    --mobile-btn-padding: 1rem 0.75rem;
    --mobile-border-radius: 0.5rem;
    
    /* Colori tema Light (default) - Mobile */
    --mobile-edit-bg-light: rgba(179, 225, 255, 0.2);
    --mobile-edit-border-light: var(--celeste-deep);
    --mobile-delete-bg-light: rgba(255, 107, 107, 0.15);
    --mobile-delete-border-light: #ff6b6b;
    
    /* Transizioni & Shadows */
    --mobile-transition: all 0.2s ease;
    --mobile-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --mobile-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
}

/* ==================== MOBILE & TABLET (< 768px) ==================== */
@media (max-width: 768px) {
    
    /* ==================== SECTION 1: LAYOUT GENERALE ==================== */
    
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .container {
        padding: 0.75rem 1rem;
        max-width: 100%;
    }
    
    .main-content {
        gap: 1.25rem;
    }
    
    /* ==================== SECTION 2: ACCESSIBILITY (Touch Targets) ==================== */
    /* Regole generali per elementi interattivi - ESCLUSE classi specifiche tabella */
    
    button:not(.action-btn-icon):not(.pagination-btn):not(.theme-button-fixed):not(.pagination-number),
    .btn:not(.action-btn-icon),
    a.btn {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        padding: 0.75rem 1rem;
    }
    
    /* Controlli UI piccoli */
    .btn-icon,
    .font-control-btn,
    .theme-button-fixed,
    .scroll-button-fixed {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* ==================== SECTION 2B: HEADER & NAVIGATION ==================== */
    
    .header {
        margin-bottom: 1.5rem;
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--mobile-gap-sm);
    }
    
    /* Nascondi elementi non essenziali dall'header su mobile */
    .header-actions .trash-btn,
    .header-actions .find-duplicates-btn,
    .header-actions .guide-link-top,
    .header-actions .font-size-controls {
        display: none;
    }
    
    /* Menu mobile hamburger */
    .mobile-menu-btn {
        display: flex;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    /* ==================== SECTION 2C: SEARCH & FILTERS ==================== */
    
    .search-container {
        max-width: 100%;
    }
    
    .search-input {
        width: 100%;
        max-width: 100%;
        font-size: var(--mobile-font-base);
    }
    
    /* Nascondi ricerca organizzazioni su mobile */
    #org-search-section,
    #combined-search-btn,
    .smart-filter-suggestion-container {
        display: none;
    }
    
    /* ==================== SECTION 2D: CONTROLLI CONTATTI (Add/Delete) ==================== */
    
    .control-group-contacts {
        width: 100%;
        flex-direction: column;
        gap: 0;
        position: relative;
        height: 7.25rem;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .btn-primary {
        width: 100%;
        padding: 1rem 1.5rem;
        justify-content: center;
        font-size: var(--mobile-font-xl);
        font-weight: 600;
        border-radius: 0.75rem;
    }
    
    #delete-selected-btn {
        width: 100%;
        padding: 1rem 1.5rem;
        position: absolute;
        top: 3.5rem;
        left: 0;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    
    #delete-selected-btn[style*="inline-flex"] {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Nascondi controlli display (colonne) su mobile */
    .control-group-display {
        display: none;
    }
    
    /* ==================== SECTION 2E: PAGINAZIONE ==================== */
    
    .pagination {
        flex-wrap: wrap;
        gap: var(--mobile-gap-sm);
    }
    
    .pagination-btn {
        font-size: var(--mobile-font-base);
        padding: 0.625rem 1rem;
    }
    
    .pagination-number {
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
        font-size: var(--mobile-font-base);
    }
    
    .pagination-selector-top {
        flex-direction: column;
        gap: var(--mobile-gap-sm);
    }
    
    /* ==================== SECTION 3: TABELLA CONTATTI - LAYOUT CARD ==================== */
    
    /* Forza layout a card su mobile */
    .contacts-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .contacts-table thead {
        display: none;
    }
    
    .contacts-table tbody {
        display: block;
    }
    
    .contacts-table tbody tr {
        display: block;
        margin-bottom: var(--mobile-gap-lg);
        padding: var(--mobile-card-padding);
        border: 1px solid var(--border-color);
        border-radius: var(--mobile-border-radius);
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
        position: relative;
    }
    
    .contacts-table tbody tr:active {
        transform: scale(0.98);
        box-shadow: var(--shadow-md);
    }
    
    /* Celle come flex items verticali */
    .contacts-table td {
        display: flex;
        align-items: flex-start;
        padding: var(--mobile-gap-sm) 0;
        border: none;
        position: relative;
        flex-wrap: wrap;
        gap: var(--mobile-gap-sm);
    }
    
    .contacts-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-primary);
        min-width: 120px;
        margin-right: var(--mobile-gap-md);
        flex-shrink: 0;
    }
    
    /* Abbreviazione per "Organizzazione" */
    .contacts-table td[data-column="organizzazione"]:before {
        content: "Org.";
    }
    
    /* ==================== SECTION 4: CHECKBOX (Mobile Specifico) ==================== */
    
    /* Checkbox tabella - dimensione controllata */
    .contacts-table .contact-checkbox,
    .contacts-table td.checkbox-cell input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
        min-width: 1.125rem;
        min-height: 1.125rem;
        max-width: 1.125rem;
        max-height: 1.125rem;
        margin: 0 auto;
        flex-shrink: 0;
    }
    
    .contacts-table td.checkbox-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--mobile-gap-sm) 0;
        gap: 0;
    }
    
    .contacts-table td.checkbox-cell:before {
        content: '';
        display: none;
    }
    
    /* ==================== SECTION 5: PULSANTI AZIONE (Edit/Delete) ==================== */
    
    /* Container pulsanti azione */
    .contacts-table td.actions-cell {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: var(--mobile-gap-sm) 0;
    }
    
    .contacts-table td.actions-cell:before {
        content: '';
        display: none;
    }
    
    .contacts-table td .action-buttons {
        display: flex;
        flex-direction: row;
        gap: var(--mobile-gap-sm);
        margin-top: var(--mobile-gap-sm);
    }
    
    /* Stile base pulsanti azione - larghezza fissa comoda */
    .contacts-table tbody tr td .action-btn-icon {
        flex: 1 1 auto;
        margin: 0;
        padding: var(--mobile-btn-padding);
        min-height: var(--touch-target-comfortable);
        min-width: 135px;
        max-width: none;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--mobile-gap-sm);
        font-size: var(--mobile-font-lg);
        font-weight: 600;
        border-radius: var(--mobile-border-radius);
        box-sizing: border-box;
        transition: var(--transition);
    }
    
    /* Icone nei pulsanti */
    .contacts-table td .action-btn-icon svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: block;
    }
    
    /* Testo nei pulsanti (visibile su mobile) */
    .contacts-table td .action-btn-text {
        display: inline-block;
        visibility: visible;
        width: auto;
        height: auto;
        overflow: visible;
        font-size: var(--mobile-font-lg);
        line-height: normal;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        opacity: 1;
    }
    
    /* ==================== SECTION 6: STILI PULSANTI - TEMA LIGHT (Default) ==================== */
    
    /* Pulsante EDIT - Light theme */
    .contacts-table tbody tr td .action-btn-icon.edit {
        background: rgba(179, 225, 255, 0.2);
        color: var(--celeste-deep);
        border: 2px solid var(--celeste-deep);
        backdrop-filter: var(--blur-soft);
        -webkit-backdrop-filter: var(--blur-soft);
        box-shadow: var(--glow-soft);
    }
    
    .contacts-table tbody tr td .action-btn-icon.edit:hover,
    .contacts-table tbody tr td .action-btn-icon.edit:active {
        background: rgba(179, 225, 255, 0.4);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 0 12px rgba(179, 225, 255, 0.5);
    }
    
    /* Pulsante DELETE - Light theme */
    .contacts-table tbody tr td .action-btn-icon.delete {
        background: rgba(255, 107, 107, 0.15);
        color: #ff6b6b;
        border: 2px solid #ff6b6b;
        backdrop-filter: var(--blur-soft);
        -webkit-backdrop-filter: var(--blur-soft);
        box-shadow: var(--glow-soft);
    }
    
    .contacts-table tbody tr td .action-btn-icon.delete:hover,
    .contacts-table tbody tr td .action-btn-icon.delete:active {
        background: rgba(255, 107, 107, 0.3);
        color: #ff5252;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
    }
    
    /* ==================== SECTION 7: OVERRIDE TEMI ==================== */
    
    /* TEMA DARK */
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.edit {
        background: rgba(141, 209, 240, 0.15);
        color: #90b8d8;
        border: 2px solid rgba(141, 209, 240, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(141, 209, 240, 0.05);
    }
    
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.edit:hover,
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.edit:active {
        background: rgba(141, 209, 240, 0.25);
        color: #b0d0e8;
        box-shadow: 0 0 20px rgba(141, 209, 240, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.delete {
        background: rgba(255, 107, 107, 0.15);
        color: #ff9999;
        border: 2px solid rgba(255, 107, 107, 0.4);
    }
    
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.delete:hover,
    body.theme-dark .contacts-table tbody tr td .action-btn-icon.delete:active {
        background: rgba(255, 107, 107, 0.25);
        color: #ffbbbb;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    /* TEMA CONTRAST */
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.edit {
        background: rgba(106, 58, 143, 0.2);
        color: #6a3a8f;
        border: 2px solid #6a3a8f;
    }
    
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.edit:hover,
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.edit:active {
        background: rgba(106, 58, 143, 0.35);
        color: #8b4cb8;
    }
    
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.delete {
        background: rgba(211, 47, 47, 0.15);
        color: #d32f2f;
        border: 2px solid #d32f2f;
    }
    
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.delete:hover,
    body.theme-contrast .contacts-table tbody tr td .action-btn-icon.delete:active {
        background: rgba(211, 47, 47, 0.3);
        color: #e53935;
    }
    
    /* TEMA NEUBRUTALISM */
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.edit {
        background: #ffeb3b;
        color: #000000;
        border: 3px solid #000000;
        box-shadow: 3px 3px 0px #000000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.edit:hover,
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.edit:active {
        background: #ffeb3b;
        transform: translate(-1px, -1px) scale(1.02);
        box-shadow: 4px 4px 0px #000000;
    }
    
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.delete {
        background: #ff1744;
        color: #ffffff;
        border: 3px solid #000000;
        box-shadow: 3px 3px 0px #000000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.delete:hover,
    body.theme-neubrutalism .contacts-table tbody tr td .action-btn-icon.delete:active {
        background: #ff1744;
        transform: translate(-1px, -1px) scale(1.02);
        box-shadow: 4px 4px 0px #000000;
    }
    
} /* Fine @media (max-width: 768px) */

/* ==================== MOBILE TELEFONO STRETTO (< 480px) ==================== */
@media (max-width: 480px) {
    
    /* Aumenta margine per viewport molto stretti */
    .contacts-table td:before {
        margin-right: var(--mobile-gap-lg);
    }
    
    /* Logo più grande */
    .logo-img {
        height: 3.5rem;
    }
    
    /* Spaziatura ridotta */
    .contacts-table tbody tr {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
    }
    
    /* Header compatto */
    .header-content {
        padding: 0.5rem 0.75rem;
    }
    
    .mobile-menu-btn {
        width: 2rem;
        height: 2rem;
    }
    
    .mobile-menu-btn .btn-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .language-selector {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        max-width: 4rem;
    }
    
} /* Fine @media (max-width: 480px) */

/* ==================== SECTION 8: MODAL & OVERLAY ==================== */
@media (max-width: 768px) {
    
    .modal-content {
        padding: 1.25rem;
        width: 95%;
        max-width: min(95vw, 600px);
    }
    
    .modal-header {
        margin-bottom: 1rem;
    }
    
    .modal-body {
        gap: 1rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: var(--mobile-font-base);
        margin-bottom: 0.5rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: var(--mobile-font-lg);
        padding: 0.75rem;
    }
    
    /* Modal footer buttons full width */
    .modal-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
} /* Fine Modal @media */

/* ==================== SECTION 9: TRASH (CESTINO) ==================== */
@media (max-width: 768px) {
    
    .trash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    
    .trash-title {
        font-size: 1.5rem;
    }
    
    .trash-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--mobile-gap-sm);
    }
    
    .trash-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
} /* Fine Trash @media */

/* ==================== SECTION 10: FOOTER ==================== */
@media (max-width: 768px) {
    
    .footer {
        padding: 2.5rem 1.875rem;
        margin-top: 3.125rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 1.875rem;
        text-align: center;
    }
    
    .footer-block {
        align-items: center;
    }
    
    .footer-logo {
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }
    
    .footer-logo-img {
        height: 7rem;
    }
    
    .footer-center {
        margin: 0 1.5rem;
    }
    
    .footer-since {
        font-size: 0.95rem;
    }
    
    .footer-message {
        font-size: 1.05rem;
    }
    
    .footer-nav {
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }
    
    .footer-navigation {
        align-items: center;
    }
    
    .footer-link {
        font-size: 1.05rem;
    }
    
    .footer-link:hover {
        transform: translateY(-0.125rem);
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
} /* Fine Footer @media */