/* ============================================
   📱 MES-NOTES-MOBILE.CSS
   Responsive pour la page Mes Notes (mes-notes.html)
   Mobile-first, puis tablette
   ============================================ */

/* Icône filtre inline : cachée par défaut, révélée par les media queries mobile ci-dessous */
.search-filter-icon { display: none; }

/* ===== MOBILE ≤ 500px ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* --- En-tête et contrôles --- */
    .hero-left {
        padding: 0;
        margin-bottom: 0 !important;
    }

    .hero-left h1 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .library-search-box {
        order: 0;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        position: relative;
    }

    .library-search-box input {
        font-size: 16px;
    }

    .library-sort-controls {
        display: none !important;
    }

    /* Bouton filtre desktop masqué sur mobile — icône inline dans la search bar */
    .filters-btn {
        display: none !important;
    }

    /* Compteur visible en 2e ligne (droite) */
    .library-stats {
        order: 3;
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        font-size: 0.8rem;
        color: var(--text-secondary, #888);
        white-space: nowrap;
    }

    /* Icône filtre inline dans la search bar */
    .search-filter-icon {
        display: flex;
        position: absolute;
        right: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        border: none;
        background: transparent;
        color: var(--muted, #888);
        cursor: pointer;
        z-index: 2;
        transition: background 0.2s ease, color 0.2s ease;
        padding: 0;
        box-sizing: border-box;
        line-height: 0;
        font-size: 0;
        flex-shrink: 0;
    }

    .search-filter-icon svg {
        display: block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

    .search-filter-icon:active { background: rgba(0, 0, 0, 0.06); }

    .search-filter-icon.has-filters {
        color: white !important;
        background: var(--brand-green, #1A5238);
        border-radius: 50%;
    }

    .search-filter-icon.has-filters svg { stroke: white !important; }

    .library-search-box:has(.search-filter-icon) input { padding-right: 2.8rem; }

    /* Pagination + compteur sur la même ligne */
    .pagination-stats-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0.75rem 0;
    }

    .pagination-stats-row .pagination-controls {
        margin: 0;
        flex: 1 1 auto;
    }

    .pagination-stats-row .library-stats {
        flex: 0 0 auto;
        order: 2;
        text-align: right;
        font-size: 0.8rem;
    }

    /* Taille des boutons de vue */
    .view-controls {
        gap: 0.25rem !important;
        padding: 3px !important;
        order: 1;
    }

    .view-btn {
        padding: 6px !important;
        min-width: 36px;
        min-height: 36px;
    }

    .view-btn svg {
        width: 18px;
        height: 18px;
    }

    /* --- Grille de notes : colonne unique --- */
    .notes-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .masonry-col {
        gap: 16px;
    }

    /* --- Carte de note --- */
    .note-card {
        padding: 1rem;
        border-radius: 10px;
    }

    /* Carte pleine largeur (1 colonne) : on réduit la hauteur fixe du texte
       (175px desktop) pour éviter des cartes disproportionnées sur mobile. */
    .note-content {
        height: 160px;
    }

    .note-header {
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .book-cover-mini {
        width: 48px;
        height: 72px;
        margin-left: 2rem;
    }

    .book-title {
        font-size: 1rem;
    }

    .note-actions {
        gap: 0.4rem;
    }

    .action-btn {
        width: 32px;
        height: 32px;
    }

    .selected-text {
        font-size: 0.9rem;
        height: 60px;
        overflow-y: auto;
    }

    .user-note {
        font-size: 0.9rem;
        height: auto;
        max-height: none;
        white-space: normal;
        overflow: hidden;
        text-overflow: unset;
        word-break: break-word;
    }

    /* Masquer l'espace tags si aucun tag — mobile uniquement */
    .note-tags-line:not(:has(.note-tag)) {
        display: none;
    }

    /* --- Mini-panel flottant kanban (Éditer/Copier/Accéder/Supprimer) ---
       Le JS positionne le panneau à côté de la carte (rect.right + 6 ou
       rect.left - panelW - 6) : sur mobile la carte occupe toute la largeur,
       donc il n'y a de place ni à droite ni à gauche. On le centre
       horizontalement en barre (le top reste calculé par le JS, juste sous
       la carte tapée — cf. _openKanbanPanel). */
    .kanban-note-panel {
        flex-direction: row;
        left: 50% !important;
        right: auto !important;
        padding: 6px;
        gap: 6px;
        transform: translateX(-50%) translateY(8px);
    }

    .kanban-note-panel.visible {
        transform: translateX(-50%) translateY(0);
    }

    /* Cible tactile .knp-btn : désormais gérée pour TOUT pointeur tactile
       (pas seulement ce petit mobile) directement dans mes-notes-style.css,
       @media (pointer: coarse) — voir son commentaire pour le contexte. */

    /* --- Barre de sélection multiple (toolbar) ---
       bottom relevé : la bottom-nav mobile (.sidebar) occupe déjà le bas de
       l'écran (bottom:12px, ~76px de haut, voir common-mobile.css) — sans ça
       la barre de sélection se superposait dessus malgré son z-index supérieur. */
    #selection-toolbar {
        bottom: 100px;
        width: calc(100vw - 24px);
        max-width: 400px;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem !important;
    }

    .toolbar-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    #selection-toolbar button {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* --- Popovers Couleur / Tags : plus larges, plus proches du bord --- */
    .toolbar-popover {
        width: calc(100vw - 24px);
        max-width: 340px;
    }

    /* --- Kanban / Columns : 1 colonne sur mobile --- */
    .kanban-container {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .kanban-content {
        max-height: 400px;
    }

    .kanban-header {
        padding: 12px;
    }

    .knc-book-title {
        font-size: 0.9rem;
    }

    /* Scrollbar kanban toujours visible — spécificité supérieure à .kanban-container .kanban-content */
    .kanban-container .kanban-content {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
    }

    .kanban-container .kanban-content::-webkit-scrollbar {
        width: 6px !important;
        -webkit-appearance: none;
    }

    .kanban-container .kanban-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 4px !important;
    }

    .kanban-container .kanban-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 4px !important;
        min-height: 30px;
    }

    /* Scrollbar kanban en mode sombre */
    body.theme-noir .kanban-container .kanban-content {
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent !important;
    }

    body.theme-noir .kanban-container .kanban-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    body.theme-noir .kanban-container .kanban-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35) !important;
    }

    .kanban-horizontal-separator {
        width: 60%;
        margin: 1rem auto;
    }

    /* --- Modal de filtres --- */
    .popup-content {
        width: 95%;
        max-height: 85vh;
        padding: 16px;
        margin: 0 auto;
    }

    .popup-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .popup-title {
        font-size: 16px;
    }

    .filter-colors-grid {
        gap: 8px;
        justify-content: center;
    }

    .filter-color-square {
        width: 40px;
        height: 40px;
    }

    .filter-tag-item {
        font-size: 12px;
        padding: 5px 10px;
    }

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

    .filter-modal-actions .btn-primary,
    .filter-modal-actions .btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* --- Contrôles graphe mindmap : compact --- */
    .graph-controls {
        padding: 8px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .graph-group-label {
        font-size: 0.78rem;
    }

    .graph-check-item {
        font-size: 0.78rem;
        gap: 4px;
    }

    .graph-ctrl-btn {
        width: 28px;
        height: 28px;
    }

    /* flex:1 + min-height:0 (au lieu d'un height:calc(100dvh - 275px) figé,
       réglé pour le portrait) : la carte remplit tout l'espace restant sous
       le titre/toolbar dans .hero-left. -275px est calibré pour le portrait
       (titre + toolbar qui wrap sur plusieurs lignes en largeur étroite) —
       cf. bloc paysage dédié plus bas pour la valeur réduite. */
    .notes-graph-container {
        height: calc(100dvh - 275px) !important;
        max-height: calc(100dvh - 275px) !important;
        min-height: unset !important;
        border-radius: 8px;
    }

    /* --- Pagination : géré dans mes-notes-style.css responsive --- */

}

/* ===== ORIENTATION PAYSAGE MOBILE =====
   -275px (réglé pour le portrait, où le titre + la toolbar wrappent sur
   plusieurs lignes en largeur étroite) ne laissait presque plus de hauteur à
   la carte en paysage (viewport bien plus court) — contrairement à
   .xmind-container (bibliothèque), qui a son propre bloc paysage dédié avec
   un offset réduit (cf. xmind-mobile.css). Même principe ici : la
   toolbar tient sur moins de lignes en paysage (plus de largeur dispo), donc
   un offset nettement plus petit suffit. */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    .notes-graph-container {
        height: calc(100dvh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        min-height: 220px;
    }
}

/* ===== PETIT MOBILE ≤ 480px ===== */
@media (max-width: 480px) {

    .note-card {
        padding: 0.75rem;
    }

    .book-cover-mini {
        width: 42px;
        height: 63px;
    }

    .book-title {
        font-size: 0.9rem;
    }

    .selected-text {
        font-size: 0.85rem;
    }

    .action-btn {
        width: 28px;
        height: 28px;
    }

    .kanban-content {
        max-height: 300px;
        padding: 0.5rem;
    }

    .kanban-content .note-card {
        padding: 0.75rem;
    }

    .kanban-content .selected-text {
        height: auto;
        max-height: none;
    }

    /* Pagination encore plus compacte */
    .pagination-number {
        min-width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .pagination-btn {
        min-width: 30px;
        min-height: 30px;
        padding: 0.35rem;
    }
}

/* ===== TABLETTE 769px – 1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .library-controls {
        gap: 0.75rem;
    }

    .library-search-box {
        max-width: 350px;
    }

    /* Grille notes : 2 colonnes masonry */
    .notes-grid {
        gap: 16px;
    }

    .kanban-separator:nth-child(odd) {
        /* Ajuster la position des séparateurs pour 2 colonnes */
    }

    .popup-content {
        max-width: 550px;
    }

    .note-card {
        padding: 1.25rem;
    }
}

/* ===== DESKTOP RÉDUIT (hors tactile) : Kanban et Grille 3 colonnes, puis 2, puis 1 ===== */
@media (max-width: 1080px) {
    .kanban-container,
    .notes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 840px) {
    .kanban-container,
    .notes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 636px) {
    .kanban-container,
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== ORIENTATION PAYSAGE MOBILE ===== */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* En paysage, 2 colonnes de notes même sur mobile */
    .notes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Kanban en 2 colonnes en paysage */
    .kanban-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Popups graphe : largeur au contenu en paysage */
    .graph-tooltip {
        max-width: fit-content;
        min-width: 180px;
    }

    .notes-graph-container .book-modal {
        width: fit-content;
        min-width: 280px;
        max-width: 70vw;
        /* Pas de max-height dans la règle de base (contrairement à
           .note-mm-modal, cf. plus bas) : sur un conteneur de carte déjà
           réduit en paysage, un contenu un peu long pouvait dépasser la
           hauteur dispo. */
        max-height: 65%;
        padding: 0.75rem 1rem;
    }

    /* Modal note : largeur au contenu + hauteur réduite en paysage (le
       conteneur de carte lui-même est raccourci en paysage — cf.
       .notes-graph-container plus bas — donc les 85% de la règle de base
       restaient trop hauts). */
    .note-mm-modal {
        right: auto !important;
        width: fit-content;
        min-width: 220px;
        max-width: 50vw;
        max-height: 65%;
        padding: 0.75rem 1rem;
    }

    /* Layout horizontal pour le modal en paysage */
    .notes-graph-container .modal-book-info {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }

    .notes-graph-container .modal-book-cover {
        width: 50px;
        height: 75px;
    }

    .notes-graph-container .modal-actions {
        display: flex;
        flex-direction: row;
        gap: 0.4rem;
    }
}

/* ===== PRÉFÉRENCE : réduire les animations ===== */
@media (prefers-reduced-motion: reduce) {

    .note-card,
    .action-btn,
    .popup-overlay,
    .kanban-column {
        transition: none !important;
    }
}