/**
 * ManageMate Synapse - Mobile Enhancements
 * Améliorations supplémentaires pour mobile et tablette
 * Ce fichier complète responsive-mobile.css
 */

/* ========================================
   HEADER MOBILE AMÉLIORÉ
   ======================================== */

@media (max-width: 767px) {
    /* Header compact et sticky */
    header.bg-white,
    .app-header {
        position: sticky !important;
        top: 0;
        z-index: 30;
        padding: 0.75rem 1rem !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95) !important;
    }

    .dark header.bg-white,
    .dark .app-header {
        background: rgba(21, 27, 35, 0.95) !important;
    }

    /* Titre header tronqué si trop long */
    header h1,
    .app-header h1 {
        font-size: 1.125rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 180px);
    }

    /* Boutons header bien espacés */
    header .flex.items-center.space-x-2 {
        gap: 0.375rem !important;
    }

    /* Boutons header touch-friendly */
    .header-icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.625rem !important;
    }
}

/* ========================================
   TABLEAUX RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    /* Container de tableau scrollable */
    .table-container,
    .table-wrapper,
    .overflow-x-auto:has(table) {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    /* Indicateur de scroll */
    .table-container::after,
    .table-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
    }

    .dark .table-container::after,
    .dark .table-wrapper::after {
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
    }

    /* Tableau de base */
    table {
        min-width: max-content;
        font-size: 0.8125rem;
    }

    /* Cellules plus compactes */
    table th,
    table td {
        padding: 0.625rem 0.5rem !important;
        white-space: nowrap;
    }

    /* Première colonne sticky (optionnel) */
    table.sticky-first-col th:first-child,
    table.sticky-first-col td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }

    .dark table.sticky-first-col th:first-child,
    .dark table.sticky-first-col td:first-child {
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
    }

    /* Actions dans les tableaux */
    table .actions-cell,
    table td:has(.btn),
    table td:has(button) {
        white-space: nowrap;
    }

    table .actions-cell .btn,
    table td button {
        padding: 0.375rem !important;
        min-width: 32px;
        min-height: 32px;
    }

    /* Cacher le texte des boutons d'action */
    table .actions-cell .btn span,
    table td button span:not(.sr-only) {
        display: none;
    }
}

/* Mode carte pour tableaux (alternative au scroll) */
@media (max-width: 767px) {
    table.card-mode {
        display: block;
    }

    table.card-mode thead {
        display: none;
    }

    table.card-mode tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    table.card-mode tr {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        border: 1px solid var(--border-primary, #e5e7eb);
        border-radius: 0.75rem;
        background: var(--bg-primary, white);
    }

    .dark table.card-mode tr {
        border-color: rgba(255, 255, 255, 0.1);
        background: #151B23;
    }

    table.card-mode td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid var(--border-primary, #e5e7eb);
    }

    table.card-mode td:last-child {
        border-bottom: none;
    }

    table.card-mode td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-secondary, #6b7280);
        text-transform: uppercase;
    }
}

/* ========================================
   FORMULAIRES MOBILE OPTIMISÉS
   ======================================== */

@media (max-width: 767px) {
    /* Groupes de formulaire */
    .form-group,
    .form-field {
        margin-bottom: 1rem;
    }

    /* Labels */
    .form-label,
    label:not(.inline-label) {
        display: block;
        margin-bottom: 0.375rem;
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* Tous les inputs */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important; /* Évite le zoom iOS */
        padding: 0.875rem !important;
        border-radius: 0.625rem !important;
        min-height: 48px;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Select avec flèche custom */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2.5rem !important;
    }

    /* Textarea */
    textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Groupe inline (checkbox/radio + label) */
    .inline-label,
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 44px;
        padding: 0.5rem 0;
        cursor: pointer;
    }

    /* Checkbox et radio plus grands */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        cursor: pointer;
        accent-color: var(--brand-primary, #0d9488);
    }

    /* Switch toggle */
    .toggle-switch,
    [role="switch"],
    .switch {
        min-width: 52px;
        height: 28px;
        cursor: pointer;
    }

    /* Boutons de formulaire */
    form button,
    form .btn,
    form input[type="submit"] {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        font-weight: 600;
        justify-content: center;
    }

    /* Groupe de boutons */
    form .btn-group,
    form .button-group,
    form .actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    /* Erreurs de validation */
    .error-message,
    .field-error,
    .invalid-feedback {
        font-size: 0.8125rem;
        margin-top: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
    }

    /* Focus visible */
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--brand-primary, #0d9488) !important;
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
    }
}

/* ========================================
   BOUTONS ACTIONS FLOTTANTS (FAB)
   ======================================== */

@media (max-width: 767px) {
    /* Bouton d'action principal flottant */
    .fab,
    .floating-action-btn {
        position: fixed !important;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0));
        right: 1rem;
        width: 56px;
        height: 56px;
        border-radius: 50% !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        z-index: 100;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .fab span,
    .floating-action-btn span {
        display: none !important;
    }

    .fab i,
    .fab svg,
    .floating-action-btn i,
    .floating-action-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ========================================
   BOTTOM NAVIGATION (optionnel)
   ======================================== */

@media (max-width: 767px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0));
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--bg-primary, white);
        border-top: 1px solid var(--border-primary, #e5e7eb);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 50;
    }

    .dark .bottom-nav {
        background: #151B23;
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        min-height: 56px;
        color: var(--text-secondary, #6b7280);
        text-decoration: none;
        transition: color 0.2s;
    }

    .bottom-nav-item.active {
        color: var(--brand-primary, #0d9488);
    }

    .bottom-nav-item i,
    .bottom-nav-item svg {
        width: 24px;
        height: 24px;
        margin-bottom: 0.25rem;
    }

    .bottom-nav-item span {
        font-size: 0.625rem;
        font-weight: 500;
    }

    /* Ajouter du padding en bas du contenu si bottom nav existe */
    body:has(.bottom-nav) .app-main,
    body:has(.bottom-nav) main {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }
}

/* ========================================
   PULL TO REFRESH (styles visuels)
   ======================================== */

@media (max-width: 767px) {
    .pull-to-refresh-indicator {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        padding: 1rem;
        background: var(--bg-primary, white);
        border-radius: 0 0 1rem 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: transform 0.3s ease;
    }

    .pull-to-refresh-indicator.visible {
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   SKELETON LOADING MOBILE
   ======================================== */

@media (max-width: 767px) {
    .skeleton,
    .skeleton-line {
        background: linear-gradient(
            90deg,
            var(--bg-secondary, #f3f4f6) 25%,
            var(--bg-tertiary, #e5e7eb) 50%,
            var(--bg-secondary, #f3f4f6) 75%
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 0.375rem;
    }

    @keyframes skeleton-loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    .skeleton-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .skeleton-text {
        height: 1rem;
        margin-bottom: 0.5rem;
    }

    .skeleton-text-sm {
        height: 0.75rem;
        width: 60%;
    }

    .skeleton-card {
        padding: 1rem;
        border-radius: 0.75rem;
    }
}

/* ========================================
   EMPTY STATES MOBILE
   ======================================== */

@media (max-width: 767px) {
    .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 1rem;
        opacity: 0.5;
    }

    .empty-state-title {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .empty-state-description {
        font-size: 0.9375rem;
        color: var(--text-secondary, #6b7280);
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .empty-state-action {
        width: 100%;
    }
}

/* ========================================
   ACCESSIBILITÉ MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Focus visible plus proéminent */
    :focus-visible {
        outline: 2px solid var(--brand-primary, #0d9488);
        outline-offset: 2px;
    }

    /* Skip link */
    .skip-link {
        position: fixed;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.75rem 1.5rem;
        background: var(--brand-primary, #0d9488);
        color: white;
        border-radius: 0 0 0.5rem 0.5rem;
        z-index: 10000;
        transition: top 0.3s;
    }

    .skip-link:focus {
        top: 0;
    }

    /* Réduire les animations si demandé */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ========================================
   DARK MODE MOBILE SPÉCIFIQUE
   ======================================== */

@media (max-width: 767px) {
    .dark {
        /* Améliorer le contraste sur mobile */
        --text-primary: #f0f6fc;
        --text-secondary: #9ca3af;
        --bg-primary: #0d1117;
        --bg-secondary: #151B23;
        --border-primary: rgba(240, 246, 252, 0.1);
    }

    /* Ombres plus prononcées en dark mode */
    .dark .app-card,
    .dark .card,
    .dark .modal-content {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
}

/* ========================================
   ORIENTATION PAYSAGE MOBILE
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* Réduire la hauteur du header */
    header.bg-white,
    .app-header {
        padding: 0.5rem 1rem !important;
    }

    header h1 {
        font-size: 1rem !important;
    }

    /* Modals plus compacts */
    .modal-content {
        max-height: 90vh !important;
    }

    .modal-body {
        max-height: calc(90vh - 100px) !important;
    }

    /* Sidebar plus étroite */
    .app-sidebar {
        width: 240px !important;
    }
}