/* ═══ LEX DESIGN — layout.css : structure commune (sidebar / top-bar / mob-nav)
   Mêmes classes et mêmes seuils que les apps Lex : 640 / 1100 px.
   PC = sidebar flottante · tablette = top-bar + sidebar coulissante ·
   mobile = top-bar simplifiée + barre flottante en bas.            ═══ */

.layout{display:flex;min-height:100dvh}

/* ── SIDEBAR (verre flottant) ── */
.side{
  width:252px;flex-shrink:0;position:sticky;top:14px;height:calc(100dvh - 28px);
  margin:14px 0 14px 14px;padding:16px;display:flex;flex-direction:column;z-index:39;
  /* verre */
  background:var(--glass-bg);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  box-shadow:var(--glass-shadow);
}
.side-brand{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--glass-border);margin-bottom:12px}
.side-logo{width:42px;height:42px;border-radius:14px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-app) 90%,#fff),color-mix(in srgb,var(--accent-app) 55%,#000));
  box-shadow:0 4px 16px color-mix(in srgb,var(--accent-app) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.side-logo img{width:100%;height:100%;object-fit:cover;display:block}
.side-title{font-size:19px;font-weight:900;letter-spacing:-.02em}
.side-site-box{background:var(--glass-bg-strong);border-radius:15px;padding:10px 12px;margin-bottom:10px;
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 0 1px 0 var(--hl-low)}
.side-site-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;font-weight:700}
.side-site-select{background:transparent;border:none;color:var(--text);outline:none;width:100%;font-size:13px;font-weight:700;cursor:pointer}
.side-site-select option{background:var(--bg);color:var(--text)}
.side-site-code{font-size:10px;color:var(--muted);opacity:.6;margin-top:4px;font-family:monospace}

/* ── NAV (la bulle d'eau gère l'état actif via lex-glass.js) ── */
.side nav{position:relative}
.nav-btn{display:flex;width:100%;text-align:left;background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:14px;padding:10px 12px;font-weight:700;font-size:13px;
  align-items:center;gap:10px;transition:color .18s,background .18s;margin:2px 0;position:relative;z-index:1}
.nav-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
html[data-theme="light"] .nav-btn:hover{background:rgba(0,0,0,.05)}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]) .nav-btn:hover{background:rgba(0,0,0,.05)}}
.nav-btn.active{color:var(--accent-app)}
.nav-btn-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0;opacity:.6;transition:opacity .15s}
.nav-btn:hover .nav-btn-icon{opacity:.85}
.nav-btn.active .nav-btn-icon{opacity:1}
/* icônes PNG blanches → assombries en thème clair (actif garde son icône couleur) */
html[data-theme="light"] img.nav-btn-icon,html[data-theme="light"] img.mob-nav-icon{filter:brightness(0);opacity:.5}
html[data-theme="light"] .nav-btn.active img.nav-btn-icon,html[data-theme="light"] .mob-nav-btn.active img.mob-nav-icon{filter:none;opacity:1}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) img.nav-btn-icon,html:not([data-theme="dark"]) img.mob-nav-icon{filter:brightness(0);opacity:.5}
  html:not([data-theme="dark"]) .nav-btn.active img.nav-btn-icon,html:not([data-theme="dark"]) .mob-nav-btn.active img.mob-nav-icon{filter:none;opacity:1}
}
.side-spacer{flex:1}
.side-user{padding-top:12px;border-top:1px solid var(--glass-border);margin-top:6px;margin-bottom:10px}
.side-user-name{font-weight:700;font-size:13px;margin-bottom:2px}
.side-user-role{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ── CONTENU ── */
.main{flex:1;padding:26px 26px 40px;min-width:0;overflow:hidden}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;padding-bottom:0;flex-wrap:wrap}
.page-title{font-size:26px;font-weight:900;letter-spacing:-.03em}
.page-sub{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.page-month input{background:var(--glass-bg);border:none;border-radius:12px;color:var(--text);padding:8px 11px;font-size:13px;outline:none;
  box-shadow:inset 0 0 0 1px var(--glass-border)}
.page-month input:focus{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-app) 60%,transparent)}

/* ── TOP BAR (tablette + mobile) : pilule de verre flottante ── */
.top-bar{display:none;position:sticky;top:10px;z-index:38;margin:10px 14px 0;padding:9px 14px;
  align-items:center;gap:10px;border-radius:999px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  box-shadow:var(--glass-shadow)}
.hamburger{background:none;border:none;color:var(--text);font-size:21px;line-height:1;padding:4px 8px;cursor:pointer;border-radius:10px;flex-shrink:0;transition:background .15s}
.hamburger:hover{background:rgba(255,255,255,.08)}
.top-bar-logo{width:28px;height:28px;border-radius:9px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-app) 90%,#fff),color-mix(in srgb,var(--accent-app) 55%,#000))}
.top-bar-logo img{width:100%;height:100%;object-fit:cover;display:block}
.top-bar-title{font-size:14px;font-weight:900;letter-spacing:-.01em;white-space:nowrap}
.top-bar-page{font-size:13px;font-weight:700;color:var(--muted);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-overlay{display:none;position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.side-overlay.active{display:block}

/* ── MOB NAV (barre flottante bas, pilule) ── */
.mob-nav{display:none;position:fixed;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  left:12px;right:12px;z-index:40;border-radius:26px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  box-shadow:var(--glass-shadow)}
.mob-nav-inner{display:flex;padding:5px;gap:2px;position:relative}
.mob-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 3px 8px;
  background:none;border:none;color:var(--muted);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  cursor:pointer;line-height:1.1;transition:color .18s;-webkit-tap-highlight-color:transparent;border-radius:20px;position:relative;z-index:1}
.mob-nav-btn.active{color:var(--accent-app)}
.mob-nav-icon{width:22px;height:22px;object-fit:contain;display:block;margin:0 auto}

/* ── RESPONSIVE commun ── */
@media (max-width:1100px) and (min-width:641px){
  .top-bar{display:flex}
  .side{position:fixed!important;left:-290px;top:10px;height:calc(100dvh - 20px);margin:0 0 0 10px;
    transition:left .28s cubic-bezier(.4,0,.2,1);z-index:39}
  .side.open{left:0}
  .split{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .day-layout{grid-template-columns:1fr}
  .main{padding:18px 14px 40px}
  .split>*{min-width:0}
}
@media (max-width:640px){
  .mob-nav{display:block}
  .side{display:none!important}
  .top-bar{display:none!important}
  .main{padding:12px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));min-width:0;overflow:visible}
  .page-title{font-size:20px}
  .page-head{margin-bottom:12px;gap:8px}
  .page-month{display:none}
}