/*
app-jardin.css
Styles propres à Garden Map, en complément de :
- minadg-design-system.css (tokens, boutons, typo)
- minadg-ds-grille.css (grille app-grille, topbar, sidebar, main)
*/

/* ---------- titre masqué pour cette appli---------- */
.hidden-title{display:none}

/* ---------- carnet / bibliothèque ---------- */
#bibliotheque{position:relative;flex:none;padding:clamp(10px,2vw,14px) clamp(12px,2.5vw,16px);border-bottom:1px solid var(--line)}
.carnet-switcher{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(8px,1.8vw,9px) clamp(8px,2vw,10px);border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);font-family:'IBM Plex Sans',sans-serif;font-size:clamp(12px,2vw,13.5px);color:var(--ink)}
.carnet-switcher:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper));color:var(--ink);border-color:var(--ink)}
.carnet-switcher #carnetName{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carnet-switcher .chevron{flex:none;color:var(--muted);transition:transform var(--dur) var(--ease)}
.carnet-switcher.open .chevron{transform:rotate(180deg)}

/* ---------- menu des carnets ---------- */
.carnet-menu{display:none;position:absolute;left:clamp(12px,2.5vw,16px);right:clamp(12px,2.5vw,16px);top:calc(100% - 2px);z-index:30;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.carnet-menu.show{display:block}
.carnet-menu-list{max-height:clamp(180px,35vh,220px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.carnet-menu-item{display:flex;align-items:center;gap:6px;min-height:34px;padding:7px 8px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink);font-size:clamp(12px,1.9vw,13px);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.carnet-menu-item:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper));border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.carnet-menu-item.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.carnet-menu-item.active:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- indicateur ---------- */
.carnet-check{width:14px;flex:none;font-size:11px;color:var(--muted);text-align:center}
.carnet-menu-item .icon-btn{display:none}
.carnet-menu-item.active .carnet-check{color:var(--paper)}

/* ---------- nom ---------- */
.carnet-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;color:inherit}
.carnet-menu-item.active .carnet-item-name{color:var(--paper)}
.carnet-menu-item.active .carnet-item-name[contenteditable="true"]{display:inline-block;width:auto;max-width:100%;overflow:visible;white-space:normal;padding:0 3px;background:var(--paper);color:var(--ink);border-radius:var(--r-xs);box-shadow:0 0 0 1px var(--paper)}

/* ---------- actions ---------- */
.carnet-item-actions{display:flex;align-items:center;gap:2px;flex:none}
.carnet-menu-item .icon-btn{width:26px;height:26px;color:var(--muted);opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.carnet-menu-item:hover .icon-btn,.carnet-menu-item.active .icon-btn{opacity:1}
.carnet-menu-item .icon-btn:hover{background:var(--veil-1);color:var(--ink)}
.carnet-menu-item.active .icon-btn{display:flex;color:var(--paper)}
.carnet-menu-item.active .icon-btn:hover{background:var(--veil-1);color:var(--muted)}

/* ---------- séparation ---------- */
.carnet-menu-sep{height:1px;margin:6px 2px;background:var(--line)}

/* ---------- nouveau carnet ---------- */
.carnet-menu-add{width:100%;justify-content:center;padding:8px;border:1px dashed var(--line);border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:clamp(11px,1.8vw,12px);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.carnet-menu-add:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper));border-color:var(--ink);color:var(--ink)}

/* ---------- carte total ---------- */
#cardTotal{flex:none;padding:clamp(10px,2vw,14px) clamp(12px,2.5vw,16px);border-bottom:1px solid var(--line)}
#cardTotal .label{font-family:'IBM Plex Mono',monospace;font-size:clamp(9px,1.6vw,10.5px);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
#cardTotal .value{font:400 clamp(20px,4vw,24px) 'Archivo Black',system-ui,sans-serif;margin-top:4px}
#cardTotal .sub{font-size:clamp(10px,1.8vw,11.5px);color:var(--muted);margin-top:2px}

/* ---------- actions sidebar ---------- */
#sidebarActions{flex:none;display:flex;gap:clamp(5px,1.5vw,8px);padding:clamp(9px,2vw,12px) clamp(12px,2.5vw,16px);border-bottom:1px solid var(--line)}
#sidebarActions .chip-btn{flex:1;min-width:0}
#sidebarActions .chip-btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
#sidebarActions .chip-btn.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--paper)}

/* ---------- liste des zones ---------- */
#zoneListCards{flex:1 1 auto;min-height:0;overflow-y:auto;padding:clamp(6px,1.5vw,8px)}
#emptyState{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:clamp(24px,6vw,36px) clamp(12px,3vw,16px);color:var(--muted)}
#emptyState span{font-size:clamp(22px,5vw,26px)}
#emptyState p{font-size:clamp(11px,1.9vw,12.5px);line-height:1.5}
#emptyState p strong{color:var(--ink);font-size:clamp(12px,2vw,13.5px)}
#zoneList{display:flex;flex-direction:column;gap:3px}

/* ---------- cartes de zones ---------- */
.module-card{display:grid;grid-template-columns:clamp(20px,4vw,22px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(6px,1.8vw,9px);width:100%;min-height:clamp(40px,7vw,42px);padding:6px clamp(6px,2vw,8px);border:1px solid transparent;border-radius:var(--r-sm);background:transparent;box-shadow:none;transform:none;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.module-card:hover{background:color-mix(in srgb,var(--ink) 5%,var(--paper));border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.module-card.selected{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.module-card.selected .zone-name{color:var(--ink)}
.module-card.selected .zone-meta,.module-card.selected .zone-del{color:var(--muted)}

.zone-swatch{grid-column:1;width:clamp(20px,4vw,22px);height:clamp(20px,4vw,22px);flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:clamp(12px,2.4vw,13px);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}

.zone-info{grid-column:2;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;text-align:left}
.zone-name{display:block;width:100%;font-size:clamp(12px,2vw,13px);line-height:1.25;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}
.zone-name[contenteditable="true"]{display:inline-block;width:auto;max-width:100%;overflow:visible;white-space:normal;background:var(--paper);color:var(--ink);border-radius:var(--r-xs);padding:0 3px;box-shadow:0 0 0 1px var(--ink)}
.zone-meta{display:block;font-family:'IBM Plex Mono',monospace;font-size:clamp(9px,1.7vw,10.5px);line-height:1.25;color:var(--muted);text-align:left}

.zone-actions{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:1px;flex:none}
.zone-edit,.zone-del{width:clamp(26px,5vw,28px);height:clamp(26px,5vw,28px);display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.module-card:hover .zone-edit,.module-card:hover .zone-del,.module-card.selected .zone-edit,.module-card.selected .zone-del{opacity:1}
.module-card.selected .zone-edit{color:var(--muted);opacity:1}
.module-card.selected .zone-edit:hover,.module-card.selected .zone-del:hover{background:var(--veil-1);color:var(--ink)}

/* ---------- zone principale : carte ---------- */
#mapHeaderActions{display:flex;gap:8px;flex:none}
#mapHeaderActions .chip-btn{padding:8px 12px;font-size:clamp(12px,2vw,14px)}

#mapWrap{position:relative;grid-column:1/-1;height:min(74vh,720px);min-height:360px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
#map{width:100%;height:100%}

/* ---------- barre de sélection ---------- */
#selectionBar{position:absolute;top:clamp(8px,2vw,12px);left:clamp(8px,2vw,12px);display:none;align-items:center;gap:clamp(6px,2vw,10px);max-width:calc(100% - 24px);padding:clamp(6px,1.8vw,8px) clamp(9px,2.5vw,12px);background:var(--ink);color:var(--paper);border-radius:var(--r-btn);box-shadow:var(--shadow-md);z-index:5;font-size:clamp(11px,2vw,12.5px)}
#selectionBar.show{display:flex}
#selectionBar .sel-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#selectionBar .sel-measure{color:var(--veil-2);flex:none}

/* ---------- barre d'outils flottante ---------- */
#mapArea{display:flex;align-items:stretch;gap:10px;grid-column:1/-1}
#mapWrap{position:relative;flex:1 1 auto;min-width:0;height:min(74vh,720px);min-height:360px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
#map{width:100%;height:100%}

#toolbar{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:auto;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);z-index:6}
.tool-sep{flex:none;width:calc(100% - 8px);height:1px;margin:2px 4px;background:var(--line)}
#markerTypeSelect{flex:none;max-width:150px;padding:8px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-size:clamp(11px,1.9vw,12.5px)}
#drawColor{flex:none;width:34px;height:34px;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer}
#toolbar input#drawColor{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer}
#toolbar input#drawColor::-webkit-color-swatch-wrapper{padding:2px}
#toolbar input#drawColor::-webkit-color-swatch{border-radius:50%;border:none}

/* ---------- toasts ---------- */
#toastWrap{position:absolute;left:50%;top:clamp(8px,2vw,12px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:20;pointer-events:none}
.toast{padding:clamp(7px,2vw,9px) clamp(12px,3vw,16px);background:var(--ink);color:var(--paper);border-radius:var(--r-btn);font-size:clamp(11px,2vw,12.5px);box-shadow:var(--shadow-md);opacity:0;transform:translateY(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:var(--danger)}

/* ---------- compléments : notice clé API ---------- */
#apiKeyNotice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,24px);background:var(--paper);z-index:5}
#apiKeyNotice .module-card{max-width:420px;text-align:center;align-items:center;gap:10px}
body.maps-ready #apiKeyNotice{display:none}

/* ---------- compléments : champ d'import de fichier ---------- */
input#importFile{display:none}

/* ---------- responsive ---------- */
@media(max-width:860px){
    .page-title,.statement{display:none}
    #topbarActions{gap:4px}
    #topbarActions .btn-label{display:none}
    #topbarActions .topbar-btn{padding:8px 10px}
    #searchInput{flex:0 1 auto;min-width:0}

    #sidebar.open #bibliotheque{
        display:block!important;
        position:relative!important;
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:80px!important;
        margin-top:50px!important;
        padding:14px 16px!important;
        box-sizing:border-box!important;
        overflow:visible!important;
        visibility:visible!important;
        opacity:1!important;
        z-index:99999!important;
    }
    
    #sidebar.open .carnet-switcher{
        display:flex!important;
        width:100%!important;
        min-height:40px!important;
        visibility:visible!important;
        opacity:1!important;
    }

    #sidebar.open #zoneListCards{
        flex:1 1 0!important;
        min-height:0!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
    }

    #main{padding:0;display:flex;flex-direction:column}
    #mainHeader{display:none}
    #mapArea{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;grid-column:1/-1;gap:0}
    #mapWrap{order:1;width:100%;flex:1 1 auto;min-height:0;height:auto;border-radius:0;border-left:none;border-right:none}
    #toolbar{order:2;flex:none;position:static;left:auto;bottom:auto;transform:none;width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center;justify-content:flex-start;gap:2px;padding:4px 6px;background:var(--paper);border:none;border-top:1px solid var(--line);border-radius:0;box-shadow:none;z-index:auto}
    #toolbar>*{flex:none}
    #toolbar .tool-btn{width:30px;height:30px;padding:0;border-radius:var(--r-sm);font-size:14px}
    #toolbar .tool-btn:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
    #toolbar .tool-btn.active{background:var(--ink);color:var(--paper)}
    .tool-sep{flex:none;width:1px;height:20px;margin:0 2px;background:var(--line)}
    #markerTypeSelect{width:30px;max-width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:0}
    #drawColor{width:30px!important;height:30px!important;padding:3px!important;border:1px solid var(--line)!important;border-radius:50%!important}
}

@media(max-width:520px){
    #toolbar .tool-btn{width:clamp(34px,10vw,38px);height:clamp(34px,10vw,38px);font-size:clamp(14px,4vw,16px)}
    #sidebar.open #bibliotheque{padding:10px 12px!important}
    #sidebar.open .carnet-switcher{font-size:12px}
    #sidebar.open #cardTotal{padding:10px 12px}
    #sidebar.open #sidebarActions{padding:9px 12px}
}