/**
 * RESPONSIVE DESIGN - Plateforme Briefs
 * Adaptation mobile, tablette et desktop
 * Version: 1.1.2 - Fix alignement boutons + toolbar Safari
 * Breakpoints: Mobile (<768px), Tablet (768-1024px), Desktop (>1024px)
 */

/* ============================================
   VARIABLES & UTILITIES
   ============================================ */

:root {
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --sidebar-width-mobile: 280px;
    --header-height-mobile: 60px;
}

/* Touch-friendly minimum sizes */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* ============================================
   FIX iOS Safari - Position Fixed Bug
   ============================================ */

/* Fix pour iOS Safari : empêcher le "bounce" qui fait disparaître les éléments fixed */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari uniquement */
    body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    .sidebar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) {
    /* Réduction des espacements */
    .main-content {
        padding: 20px !important;
    }

    /* Grilles adaptées */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }

    .clients-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    .kpi-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
}

/* ============================================
   MOBILE (<768px) - LAYOUT PRINCIPAL
   ============================================ */

@media (max-width: 768px) {
    /* Body padding réduit */
    body {
        padding: 0 !important;
    }

    /* Container en mode mobile */
    .container {
        grid-template-columns: 1fr !important;
        height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Sidebar overlay mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: var(--sidebar-width-mobile);
        height: 100vh;
        z-index: 9998;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0);
    }

    .sidebar.mobile-open {
        left: 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }

    /* Overlay sombre */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9997;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-overlay.active {
        display: block;
        opacity: 1;
    }

    /* Content wrapper full width */
    .content-wrapper {
        width: 100% !important;
        height: 100vh !important;
    }

    /* Header mobile avec burger */
    .content-header {
        padding: 12px 15px !important;
        flex-wrap: nowrap;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .content-header-title h1 {
        font-size: 16px !important;
    }

    .content-header-title p {
        font-size: 11px !important;
    }

    /* Burger menu button */
    .mobile-burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        margin-right: 12px;
        transition: all 0.2s;
    }

    .mobile-burger:active {
        transform: scale(0.95);
    }

    .mobile-burger svg {
        width: 24px;
        height: 24px;
        color: white;
    }

    /* Desktop: hide burger */
    @media (min-width: 769px) {
        .mobile-burger {
            display: none !important;
        }
    }

    /* User menu adapté mobile */
    .content-header-user {
        gap: 8px !important;
    }

    .user-menu-button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .user-menu-button span {
        display: none; /* Cache le nom sur mobile */
    }

    .user-menu-dropdown {
        right: 0;
        left: auto;
        min-width: 200px !important;
    }

    /* Main content padding réduit */
    .main-content {
        padding: 15px !important;
        height: calc(100vh - var(--header-height-mobile));
        overflow-y: auto;
    }

    /* View header empilé */
    .view-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .view-header h1 {
        font-size: 20px !important;
    }

    .view-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* Breadcrumb adapté */
    #breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ============================================
       GRILLES RESPONSIVE
       ============================================ */

    /* Stats grid - 1 colonne sur mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .stat-card {
        padding: 18px !important;
    }

    .stat-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .stat-content h3 {
        font-size: 26px !important;
    }

    /* Clients grid - 1 colonne */
    .clients-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* KPI cards - 1 colonne */
    .kpi-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .kpi-card {
        padding: 18px !important;
    }

    .kpi-value {
        font-size: 26px !important;
    }

    /* Stats grids 2 et 3 colonnes */
    .stats-grid-2col,
    .stats-grid-3col {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Quick actions - 1 colonne */
    .quick-actions {
        grid-template-columns: 1fr !important;
    }

    /* ============================================
       FILTRES & RECHERCHE
       ============================================ */

    .clients-filters {
        padding: 15px !important;
    }

    .filter-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .search-box {
        min-width: 100% !important;
    }

    .filter-select {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* ============================================
       PAGINATION
       ============================================ */

    .pagination {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .pagination-btn {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    /* ============================================
       CLIENT ACTIONS BAR (Page Client)
       ============================================ */

    .client-actions-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .client-actions-title {
        width: 100%;
        font-size: 16px !important;
    }

    .client-actions-buttons {
        width: 100%;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .client-actions-buttons button,
    .client-actions-buttons .export-md-dropdown,
    .client-actions-buttons .export-pdf-dropdown {
        width: 100% !important;
    }

    .client-actions-buttons button {
        justify-content: center !important;
    }

    /* Dropdowns en full width sur mobile */
    .export-md-dropdown,
    .export-pdf-dropdown {
        position: relative !important;
    }

    /* ============================================
       MODULES & TABS
       ============================================ */

    .modules-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .module-tab {
        padding: 12px 16px !important;
        font-size: 13px !important;
        min-width: max-content;
    }

    .modules-content {
        padding: 15px !important;
    }

    .module-header h2 {
        font-size: 20px !important;
    }

    .module-footer {
        flex-direction: column !important;
        gap: 12px !important;
        padding-bottom: 100px !important; /* Espace pour toolbar Safari mobile */
        margin-bottom: 40px !important;
    }

    .module-footer-left,
    .module-footer-right {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .module-footer button {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important; /* Supprime les marges inline */
    }

    /* ============================================
       FORMULAIRES
       ============================================ */

    /* Grilles 2 colonnes → 1 colonne */
    .values-grid,
    .aspiration-grid,
    #positioning-values-container,
    #positioning-mindset-container,
    .objectives-grid {
        grid-template-columns: 1fr !important;
    }

    /* Form fields */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Évite le zoom sur iOS */
    }

    .tooltip-content {
        max-width: 200px !important;
        font-size: 12px !important;
    }

    /* ============================================
       TABLES RESPONSIVE
       ============================================ */

    /* Tables scrollables horizontalement */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .users-table {
        min-width: 600px; /* Force scroll horizontal */
    }

    .users-table th,
    .users-table td {
        padding: 12px !important;
        font-size: 13px !important;
    }

    /* User cards mode pour mobile */
    .user-card {
        padding: 16px !important;
    }

    .user-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .user-card-actions {
        width: 100%;
        flex-direction: column !important;
    }

    .user-card-actions button {
        width: 100% !important;
    }

    /* ============================================
       MODALS
       ============================================ */

    .modal-content {
        width: 95% !important;
        max-height: 90vh !important;
        margin: 10px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px !important;
    }

    .modal-header h2,
    .modal-header h3 {
        font-size: 18px !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-footer button {
        width: 100% !important;
    }

    .social-networks-grid-modal {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }

    .social-network-option {
        padding: 15px 10px !important;
        font-size: 12px !important;
    }

    /* ============================================
       PROMPT GENERATOR
       ============================================ */

    .prompt-generator-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .prompt-config-panel {
        order: 2; /* Panel config en bas sur mobile */
    }

    .prompt-preview-panel {
        order: 1;
        max-height: 400px !important;
    }

    .template-categories {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .category-filter {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .templates-list {
        max-height: 350px !important;
    }

    .template-card {
        padding: 12px !important;
    }

    .generate-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .preview-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .copy-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ============================================
       GUIDE VIEW
       ============================================ */

    .guide-content {
        padding: 20px !important;
    }

    .guide-section h2 {
        font-size: 18px !important;
    }

    .guide-section h3 {
        font-size: 15px !important;
    }

    .guide-section code,
    .guide-section kbd {
        font-size: 12px !important;
    }

    .prompt-item {
        padding: 15px !important;
    }

    .prompt-box {
        padding: 12px !important;
        font-size: 12px !important;
    }

    /* ============================================
       SETTINGS VIEW
       ============================================ */

    .settings-content {
        gap: 20px !important;
    }

    .settings-section {
        padding: 18px !important;
    }

    .settings-section-title {
        font-size: 16px !important;
    }

    .settings-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .settings-actions button {
        width: 100% !important;
    }

    .info-grid {
        gap: 10px !important;
    }

    .info-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* ============================================
       BUTTONS & ACTIONS
       ============================================ */

    .btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px; /* Touch-friendly */
    }

    .btn-small {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 38px;
    }

    /* Button groups empilés */
    .button-group {
        flex-direction: column !important;
        width: 100%;
    }

    .button-group button {
        width: 100% !important;
    }

    /* ============================================
       ACTIVITY & DASHBOARD
       ============================================ */

    .activity-feed {
        gap: 10px !important;
    }

    .activity-item {
        padding: 12px !important;
    }

    .activity-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .activity-title {
        font-size: 13px !important;
    }

    .activity-time {
        font-size: 11px !important;
    }

    /* Top clients list */
    .top-clients-list {
        gap: 10px !important;
    }

    .top-client-item {
        flex-wrap: wrap;
        padding: 12px !important;
    }

    .top-client-completion {
        width: 100%;
        justify-content: space-between;
        margin-top: 8px;
    }

    .mini-progress-bar {
        flex: 1;
        margin: 0 10px;
    }

    /* ============================================
       SIDEBAR MOBILE ADJUSTMENTS
       ============================================ */

    .sidebar-logo {
        padding: 20px 15px !important;
    }

    .sidebar-logo img {
        width: 150px !important;
    }

    .sidebar-menu-item {
        padding: 14px 15px !important;
        margin: 3px 10px !important;
        font-size: 15px !important;
        min-height: 48px; /* Touch-friendly */
    }

    .sidebar-divider {
        margin: 15px 12px !important;
    }

    /* ============================================
       UTILITY CLASSES
       ============================================ */

    .mobile-hidden {
        display: none !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    /* ============================================
       LOADING & SPINNERS
       ============================================ */

    .loading-spinner {
        padding: 40px 15px !important;
        font-size: 14px !important;
    }

    /* ============================================
       ALERTS & MESSAGES
       ============================================ */

    .alert,
    .module-info,
    .module-warning,
    .module-success {
        padding: 12px !important;
        font-size: 13px !important;
    }

    .field-error-message {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

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

    .empty-values,
    .empty-aspiration,
    .empty-mindset,
    .no-results,
    .history-empty {
        padding: 30px 15px !important;
    }

    /* ============================================
       SCROLL IMPROVEMENTS
       ============================================ */

    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbars on mobile but keep functionality */
    .modules-tabs::-webkit-scrollbar,
    .templates-list::-webkit-scrollbar {
        height: 3px;
    }
}

/* ============================================
   LANDSCAPE MOBILE (jusqu'à 768px en landscape)
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
    }

    .main-content {
        padding: 15px 20px !important;
    }

    .content-header {
        padding: 10px 20px !important;
    }

    /* Réduction des hauteurs pour optimiser l'espace vertical */
    .view-header {
        margin-bottom: 15px !important;
    }

    .module-header {
        margin-bottom: 20px !important;
    }
}

/* ============================================
   TRÈS PETITS ÉCRANS (<375px)
   ============================================ */

@media (max-width: 375px) {
    .main-content {
        padding: 12px !important;
    }

    .view-header h1 {
        font-size: 18px !important;
    }

    .stat-content h3,
    .kpi-value {
        font-size: 24px !important;
    }

    .btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    .module-tab {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .template-card,
    .client-card {
        padding: 12px !important;
    }

    /* Réduction des icônes */
    .stat-icon,
    .kpi-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .stat-icon i,
    .kpi-icon i {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .sidebar,
    .content-header,
    .mobile-burger,
    .mobile-overlay,
    .btn,
    .user-menu,
    .module-footer {
        display: none !important;
    }

    .container {
        grid-template-columns: 1fr !important;
        box-shadow: none !important;
    }

    .main-content {
        padding: 0 !important;
    }

    * {
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible pour navigation clavier */
@media (max-width: 768px) {
    *:focus-visible {
        outline: 3px solid var(--primary, #009FE3);
        outline-offset: 2px;
    }

    /* Larger tap targets */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    .module-tab,
    .sidebar-menu-item {
        min-height: 44px;
        min-width: 44px;
    }
}