/* 
minadg-ds-grille
css pour toutes les appli complexes (grilles)
*/

/* grille générale — sidebar à droite par défaut */
.app-grille{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;overflow:hidden;display:grid;grid-template-columns:1fr 300px;grid-template-rows:60px 1fr;grid-template-areas:"topbar topbar" "main sidebar"}

/* topbar : styles de base (couleurs, hauteur, logo, zones modulables) définis dans minadg-design-system.css.
   Ici on ne fixe que son placement dans la grille et le contenu propre au format grille :
   recherche dans #topbarCenter, indicateur + bouton + toggle sidebar droite dans #topbarEnd. */
header#topbar{grid-area:topbar}
#sidebarToggle{display:none}
#searchWrap{width:100%;display:flex;justify-content:center}
#searchInput{width:100%;max-width:420px;border-radius:var(--r-btn);border:1px solid var(--veil-border);background:var(--veil-1);color:var(--paper);font-size:clamp(14px, 2.4vw, 16px);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
#searchInput::placeholder{color:var(--veil-2)}
#searchInput:focus{background-color:var(--veil-2);border-color:var(--veil-border-hover)}
#saveText{color:var(--paper)}
#topbarActions{display:flex;gap:8px;align-items:center}
#topbarActions #sidebarToggle{order:99} /* le hamburger reste toujours le dernier élément, tout à droite, quelle que soit sa position dans le HTML */
#saveIndicator{font-size:clamp(12px, 2vw, 14px);color:var(--veil-2);display:flex;align-items:center;gap:6px;white-space:nowrap}
#saveIndicator .dot{width:7px;height:7px;border-radius:50%;background:var(--paper);opacity:.9}

/* sidebar : navigation — à droite, sous le hamburger */
#sidebar{grid-area:sidebar;background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:15}
#sidebarBackdrop{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);z-index:14}
#contextSwitcher{flex:none;padding:14px 16px;border-bottom:1px solid var(--line)}
#contextSwitcher .eyebrow{margin-bottom:6px}
#contextSwitcher select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);font-size:clamp(14px, 2.4vw, 16px);color:var(--ink)}
#navList{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:clamp(14px, 2.4vw, 16px);color:var(--ink);transition:background var(--dur) var(--ease);margin-bottom:2px}
.nav-item:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.nav-item.active{background:var(--ink);color:var(--paper)}
.nav-item .nav-icon{font-size:clamp(15px, 2.6vw, 17px);flex:none;width:18px;text-align:center}
.nav-item .nav-label{flex:1}
.nav-item .nav-count{font-family:var(--font1-span);font-size:clamp(12px, 2vw, 14px);color:var(--muted)}
.nav-item.active .nav-count{color:var(--veil-2)}
.nav-section-label{font-family:var(--font1-span);font-size:clamp(11px, 1.8vw, 13px);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:14px 11px 6px}
.nav-section-label:first-child{padding-top:4px}
#sidebarFooter{padding:10px 16px;border-top:1px dashed var(--line);font-size:clamp(12px, 2vw, 14px);color:var(--muted);flex:none}
.zone-{background-color: transparent}

/* zone principale : grille de modules */
#main{grid-area:main;overflow-y:auto;padding:clamp(16px,3vw,28px)}
#mainHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.module-grid.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.module-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.module-card:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.module-card .module-top{display:flex;align-items:center;justify-content:space-between}
.module-card .module-value{font:400 clamp(24px, 4vw, 30px) var(--font1);margin-top:2px}
.module-card.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.module-card.dark .eyebrow{color:var(--veil-2)}
.module-card.dark .module-sub{color:var(--veil-2)}
.module-sub{font-size:clamp(12px, 2vw, 14px);color:var(--muted)}
.module-card.span-2{grid-column:span 2}


/* responsive */
@media(max-width:860px){
    html,body{width:100%;max-width:100%;overflow-x:hidden}
    .app-grille{width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);grid-template-areas:"topbar" "main"}
    #main{min-width:0;width:100%;max-width:100%;overflow-x:hidden}
    #sidebarToggle{display:flex}
    #appLogo,#logo h1{display:none}
    #saveIndicator{display:none}
    #sidebar{position:fixed;top:0;right:0;width:min(320px,85vw);height:100dvh;margin:0;grid-area:auto;background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:15;transform:translate3d(100%,0,0);transition:transform var(--dur) var(--ease)}
    #sidebar.open{transform:translate3d(0,0,0)}
    #sidebarBackdrop{display:none;position:fixed;inset:0;width:100%;height:100%;background:color-mix(in srgb,var(--ink) 40%,transparent);z-index:14}
    #sidebarBackdrop.show{display:block}
    .module-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  }
  @media(max-width:700px){
    .module-card.span-2{grid-column:span 1}
  }

/* ---------- sidebar à droite (au lieu de la mise en page par défaut à gauche) ---------- */
/*
.app-grille{grid-template-columns:1fr 300px;grid-template-areas:"topbar topbar" "main sidebar"}

#sidebar{border-right:none;border-left:1px solid var(--line)}
@media(max-width:860px){
    /* le tiroir mobile glisse depuis la droite, sous le bouton hamburger
    #sidebar{left:auto;right:0;border-left:none;box-shadow:var(--shadow-lg);transform:translateX(100%)}
    #sidebar.open{transform:translateX(0)}
}
*/