/* static/css/header.css — Styles header-only : sidebar + user-dock. Version “compact + contraste” */

/* ===== Thèmes (variables header) ======================================== */
:root[data-theme="dark"], :root.theme-dark{
  /* Fond/verre plus opaque pour la lisibilité */
  --sidebar-bg: rgba(16,16,20,.90);
  --sidebar-overlay: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  --dock-bg: rgba(16,16,20,.78);
  --border-color: rgba(255,255,255,.10);

  /* Menu compte : opaque, bien contrasté */
  --menu-bg: #0f1216;
  --menu-border: rgba(255,255,255,.12);
  --menu-hover: rgba(255,255,255,.08);
  --menu-shadow: 0 18px 44px rgba(0,0,0,.55);

  /* Couleurs de lecture renforcées */
  --header-fg: #fff;
  --header-fg-muted: #d8d3c6;
  --acc: var(--acc, #c6aa72);
}
:root[data-theme="light"], :root.theme-light{
  --sidebar-bg: rgba(255,255,255,.92);
  --sidebar-overlay: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
  --dock-bg: rgba(255,255,255,.86);
  --border-color: rgba(0,0,0,.10);

  --menu-bg: #ffffff;
  --menu-border: rgba(0,0,0,.10);
  --menu-hover: rgba(0,0,0,.06);
  --menu-shadow: 0 18px 44px rgba(15,20,30,.18);

  --header-fg: #121212;
  --header-fg-muted: #444;
  --acc: var(--acc, #6b5b2e);
}

/* ===== Desktop only ====================================================== */
@media (max-width: 820px){ .sidebar, .user-dock { display:none !important; } }

/* ===== Sidebar (version compact) ======================================== */
/* largeur réduite + offsets mis à jour plus bas */
.sidebar{
  position: fixed; inset: 12px auto 12px 12px;
  width: clamp(180px, 18vw, 260px); /* ⟵ plus étroit qu’avant */
  display:flex; flex-direction:column;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    var(--sidebar-bg);
  border:1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  overflow:hidden;
  transition: width 200ms ease;
  color: var(--header-fg);
  z-index: 30;
  /* petit boost de lisibilité en thème sombre */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
:root[data-theme="light"] .sidebar{ text-shadow:none; }

.nav-wallpaper{ position:absolute; inset:0; pointer-events:none; background: var(--sidebar-overlay); }
.nav-logo-mark{
  position:absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 280px; opacity:.07; filter:saturate(.9);
  pointer-events:none; user-select:none;
}

.brand-row{ display:flex; align-items:center; gap:10px; padding:12px 12px 6px; }
.brand-name{
  font-weight:700; letter-spacing:.2px; white-space:nowrap; font-size:1rem;
  color: var(--header-fg);
}

/* Boutons “verre” */
.pill.btn-ghost, .btn-ghost{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:12px; color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 140ms ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-ghost:hover{ transform: translateY(-1px); border-color: var(--acc); }

/* Liens nav — contraste renforcé */
.nav{ padding:6px; display:flex; flex-direction:column; gap:6px; }
.nav-link{
  position:relative; display:grid; grid-template-columns:32px 1fr; align-items:center;
  gap:10px; padding:8px 10px; border-radius:12px; text-decoration:none; color: var(--header-fg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.nav-link .ico{ width:18px; height:18px; color: currentColor; }
.nav-link span{ color: var(--header-fg); }

/* État actif : bord et lueur plus nets */
.nav-link[aria-current="page"]{
  border-color: var(--acc);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-link:hover{
  border-color: var(--acc);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

/* Pied de nav */
.nav-footer{
  margin-top:auto; padding:10px 10px 12px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  color: var(--header-fg-muted);
}
.nav-footer .copyright{ opacity:.7; font-size:.85rem; }
.mini-mark{ display:none; width:34px; height:34px; opacity:.8 }

/* Nav réduite (encore plus compacte) */
:root.nav-collapsed .sidebar{ width: 70px; }          /* ⟵ réduit de 78px → 70px */
:root.nav-collapsed .brand-name{ display:none; }
:root.nav-collapsed .nav-link{ grid-template-columns:1fr; justify-items:center; padding:10px }
:root.nav-collapsed .nav-link span{ display:none }
:root.nav-collapsed .nav-footer{ align-items:center }
:root.nav-collapsed .mini-mark{ display:block; align-self:center }

/* Décalage du contenu (MAJ pour les nouvelles largeurs) */
@media (min-width: 821px){
  .page{ padding-left: calc(clamp(180px, 18vw, 260px) + 24px); transition: padding-left 200ms ease; }
  :root.nav-collapsed .page{ padding-left: calc(70px + 24px); }
}

/* ===== User dock (verre + contraste) ==================================== */
.user-dock{
  position: fixed; top:14px; right:14px; display:flex; gap:8px; padding:6px;
  border-radius:16px; background: var(--dock-bg); color: var(--header-fg);
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  border:1px solid var(--border-color); box-shadow: 0 20px 50px rgba(0,0,0,.38);
  z-index: 60;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
:root[data-theme="light"] .user-dock{ text-shadow:none; }
.user-dock .ico{ width:18px; height:18px; }

/* Compte (menu déroulant opaque) */
.account{ position:relative }
.account-btn{ width:38px; height:38px }
.account-menu{
  position:absolute; right:0; top:48px; min-width:220px;
  background: var(--menu-bg); color: inherit;
  border: 1px solid var(--menu-border); border-radius:14px; box-shadow: var(--menu-shadow);
  padding:6px; display:none; z-index:80;
}
.account.is-open .account-menu{ display:block; animation:menuIn .14s ease both }
@keyframes menuIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.account-menu a, .account-menu .logout{
  display:block; width:100%; text-align:left; padding:.6rem .7rem; border-radius:10px;
  background:transparent; border:none; color:inherit; text-decoration:none; cursor:pointer; font:inherit;
}
.account-menu a:hover, .account-menu .logout:hover{ background: var(--menu-hover); }

/* Focus visibles (a11y) */
.nav-link:focus-visible, .btn-ghost:focus-visible, .account-menu a:focus-visible, .account-menu .logout:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--acc) 30%, transparent);
  outline-offset: 2px;
}

/* Mode “plus de contraste” pour les utilisateurs qui le demandent */
@media (prefers-contrast: more){
  .nav-link{
    border-color: color-mix(in oklab, var(--acc) 45%, var(--border-color));
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  }
  .nav-link[aria-current="page"]{
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--acc) 65%, transparent),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
}
/* ======= TABBAR MOBILE (menu bas, icônes) ======= */

/* Masquer la tabbar par défaut (desktop) */
.mobile-tabbar{ display:none; }

/* Desktop: afficher sidebar + user-dock (déjà géré) */

/* Mobile < 821px : tabbar ON, sidebar OFF */
@media (max-width: 820px){
  .sidebar,
  .user-dock{ display:none !important; }

  .mobile-tabbar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--dock-bg);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    z-index: 1000;
  }
  .mobile-tabbar .tab{
    display: grid; place-items: center;
    gap: 4px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--header-fg);
    border-radius: 12px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    font-size: .85rem;
  }
  .mobile-tabbar .tab svg{ width: 20px; height: 20px; }
  .mobile-tabbar .tab.is-active{
    border-color: var(--acc);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  }

  /* Laisser la place au menu en bas pour le contenu */
  body{ padding-bottom: 72px; } /* 64 + marges */
  .page{ padding-left: 0 !important; } /* pas de décalage lié à la sidebar */
}

/* Par sécurité, si d’anciens sélecteurs .mobile-header / .mobile-menu existent : force off */
.mobile-header, .mobile-menu{ display:none !important; }
/* ======= Corrige l'affichage tabbar en desktop ======= */
@media (min-width: 821px){
  .mobile-tabbar{
    position: absolute !important; /* hors du flux normal */
    bottom: -9999px !important;    /* poussé très loin en bas */
    opacity: 0 !important;         /* invisible */
    pointer-events: none !important; /* non cliquable */
    z-index: -9999 !important;     /* sous tout le reste */
  }
}