/* =========================================================
   LordCaisse — layout.css
   Structure de l'application : sidebar, main, topbar, content
   ========================================================= */

.app{display:flex; height:100vh; height:100dvh; overflow:hidden;}

/* ---- Sidebar ---- */
.sidebar{
  width:228px; flex-shrink:0; color:#fff;
  background:linear-gradient(190deg, var(--navy-mid) -10%, var(--navy) 32%, var(--navy-dark) 115%);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh;
  box-shadow:2px 0 0 rgba(10,30,54,.04);
}
.sidebar-brand{padding:22px 20px 16px; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:12px;}
.brand-mark{flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
.sidebar-brand .brand-text{min-width:0;}
.sidebar-brand .name{font-weight:800; font-size:16.5px; letter-spacing:1.6px; line-height:1.15; font-variant:all-small-caps;}
.sidebar-brand .sub{font-size:10px; color:#8FB0D4; margin-top:3px; letter-spacing:.5px; text-transform:uppercase; font-weight:600;}

/* ---- Carte état (date + dernière sauvegarde) ---- */
.sidebar-status{
  margin:14px 14px 0; padding:10px 12px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:6px;
}
.ss-row{display:flex; align-items:center; gap:8px; min-width:0;}
.ss-ico{display:flex; align-items:center; color:#9DBBDD; flex-shrink:0;}
.ss-label{font-size:11.5px; color:#CFE0F2; font-weight:600; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ss-row.ss-warn .ss-ico, .ss-row.ss-warn .ss-label{color:#F5C542;}
.ss-row.ss-warn{background:rgba(245,197,66,.08); border:1px solid rgba(245,197,66,.25); padding:4px 8px; margin:-4px -8px; border-radius:7px;}

.nav{flex:1; padding:14px 11px 16px; overflow-y:auto;}
.nav-section-label{font-size:9.5px; text-transform:uppercase; letter-spacing:1.1px; color:#7FA0C6; font-weight:800; padding:14px 12px 6px; border-top:1px solid rgba(255,255,255,.08); margin-top:8px;}
.nav-section-label:first-child{border-top:none; margin-top:0; padding-top:4px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9.5px 12px; border-radius:8px;
  color:#CFE0F2; text-decoration:none; cursor:pointer; margin-bottom:2px; font-size:13.5px;
  border:none; background:none; width:100%; text-align:left; font-family:var(--font); position:relative;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.nav-item .nav-ico{display:flex; align-items:center; flex-shrink:0; opacity:.8; transition:opacity .15s ease;}
.nav-item .nav-label{flex:1;}
.nav-item:hover{background:rgba(255,255,255,.09); color:#fff;}
.nav-item:hover .nav-ico{opacity:1;}
.nav-item:active{transform:scale(.985);}
.nav-item.active{background:var(--gold); color:#3D2E05; font-weight:700; box-shadow:var(--shadow-sm), 0 4px 10px rgba(184,134,11,.30);}
.nav-item.active .nav-ico{opacity:1;}
.sidebar-foot{padding:13px 20px 16px; font-size:10px; line-height:1.55; color:#7FA0C6; border-top:1px solid rgba(255,255,255,.12);}

/* ---- Main : la topbar reste fixe, seul le contenu scrolle ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  box-shadow:0 1px 0 rgba(15,38,64,.03);
  flex-shrink:0; /* jamais scroller avec le contenu */
}
.topbar h1{font-size:var(--fs-xl); margin:0; font-weight:800; letter-spacing:-.2px; color:var(--text);}
.topbar .meta{color:var(--muted); font-size:12.5px; margin-top:3px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.theme-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--navy-text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); flex-shrink:0; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.theme-btn:hover{background:var(--navy-pale); border-color:var(--navy-mid);}
html.theme-dark .theme-btn{color:var(--gold);}
.content{padding:24px 28px 40px; flex:1; overflow-y:auto; min-height:0;}

/* Fiche client : en-tête (identité) figé, seul le corps défile */
#content.view-fixed-head{display:flex; flex-direction:column; overflow:hidden; padding-bottom:0;}
.view-fixed-head .client-detail{
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.view-fixed-head .client-detail-fixed{flex-shrink:0;}
.view-fixed-head .client-detail-body{
  flex:1; min-height:0; overflow-y:auto; margin-top:18px;
  padding-right:6px; /* place pour la barre de scroll */
}
.view-fixed-head .client-detail-body > .panel:first-child{margin-top:0;}