/* ===== HEADER ===== */
.dash-header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* gauche | centre | droite */
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto 12px;
  position: relative;
  z-index: 3;
}

.dash-left{ justify-self: start; }
.dash-center{ justify-self: center; }
.dash-burger{ justify-self: end; }

.dash-user{
  color:#cfd8ff;
  font-size:15px;
}
.dash-user strong{
  font-weight:800;
  color:#fff;
}

.dash-logo{
  height: 56px;
  display:block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* Bouton menu (icône ☰) */
.dash-burger{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: #eaf1f6;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.dash-burger:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
}

/* ===== LAYOUT PRINCIPAL ===== */
.dash-layout{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px 24px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
}

/* ===== SIDEBAR ===== */
.dash-sidebar{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:12px;
  height:fit-content;
  position:sticky;
  top:10px;
}

.dash-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#e6edf4;
  font-size: 14px;
  border:1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.nav-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
.nav-item.active{
  background:rgba(102,179,255,.12);
  border-color:rgba(102,179,255,.35);
}

/* ===== CARTES PRINCIPALES ===== */
.dash-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.dash-card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.4vh, 24px);
  color: var(--txt);
}
.dash-card h3{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:.2px;
}
.dash-card p{
  margin:0 0 10px;
  color:#cfd8e3;
}

.dash-list{
  margin:6px 0 0 0;
  padding-left:0;
  list-style:none;
  color:#cfd8e3;
}
.dash-list li{
  margin:4px 0;
}

.dash-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.dash-actions .btn{
  flex:0 0 auto;
}

.dash-kpis{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:8px;
}
.kpi{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.kpi-num{
  display:block;
  font-size:22px;
  font-weight:800;
  line-height:1.1;
}
.kpi-label{
  display:block;
  font-size:12.5px;
  opacity:.9;
}

/* Responsive */
@media (max-width: 860px){
  .dash-layout{ grid-template-columns: 1fr; }
  .dash-sidebar{
    position: fixed;
    inset: 60px 10px auto 10px;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
.dash-sidebar.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  top: 110px; /* ta hauteur */
  background: rgba(13, 26, 36, 0.96);
  backdrop-filter: blur(8px);

  width: min(45vw, 210px);  /* ✅ largeur contrôlée */
  margin-left: auto;
  margin-right: 10px;
  border-radius: 14px;      /* ✅ arrondis jolis */

  /* ✅ ajout du scroll interne sans rien modifier d'autre */
  max-height: calc(100vh - 130px);  /* ajuste si besoin selon la hauteur du header */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* défilement fluide sur mobile */
}
  .dash-logo{ height: 120px; }
}
/* ====== FRAIS (UI affutée) ====== */
.frais-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
#fraisCard .btn.ghost{
  padding:8px 12px; border-radius:10px; font-weight:600;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
}
#fraisCard .btn.ghost:hover{ background:rgba(255,255,255,.10); }

.frais-list{ display:flex; flex-direction:column; gap:8px; }

.frais-row{
  display:grid; grid-template-columns: 1fr 150px 36px; gap:10px;
  align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px;
}
@media (max-width: 520px){
  .frais-row{ grid-template-columns: 1fr 120px 36px; }
}

.frais-row input{
  width:100%; height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.15); color:#fff; padding:0 12px;
}
.frais-row input::placeholder{ color:#b8c6d4; opacity:.7; }

/* Montant avec suffixe € */
.frais-amount-wrap{ position:relative; }
.frais-amount-wrap input{ padding-right:26px; text-align:right; }
.frais-amount-wrap::after{
  content:"€"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:#b8c6d4; pointer-events:none;
}

/* Suppression */
.frais-del{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04); color:#e9a3a3; font-weight:700;
  cursor:pointer;
}
.frais-del:hover{ background:rgba(255,0,0,.08); border-color:rgba(255,0,0,.35); }

/* Barre total */
.frais-totalbar{
  margin-top:10px; padding:10px 12px;
  border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.04); border-radius:12px;
  display:flex; justify-content:space-between; align-items:center;
  color:#e6edf4;
}
.frais-totalbar strong{ font-size:1.05rem; }
.frais-hint {
  font-size: 13px;
  color: #bcd0e0;
  margin-bottom: 8px;
  font-style: italic;
}
.urssaf-hint {
  font-size: 13px;
  color: #bcd0e0;
  margin-bottom: 8px;
  font-style: italic;
}
.email-change-box {
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from {opacity:0; transform:translateY(-6px);}
  to {opacity:1; transform:translateY(0);}
}
.btn.small {
  padding:6px 10px;
  font-size:13px;
}
.note-bene {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 16px;
  color: #cfe3f4;
  font-size: 13px;
  line-height: 1.45;
}

.note-bene .note-icon {
  flex-shrink: 0;
  font-size: 15px;
  opacity: 0.9;
  margin-top: 1px;
}
/* ====== CA — Ruban "Congés à prélever" ====== */
.objectif.extra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  padding:6px 8px;
  background: rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px;
  color:#cfe3f4;
  font-size:13px;
}

.conge-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-weight:700;
  color:#ffffff;
  white-space:nowrap;
}
.conge-badge[data-conge-eur]::after{
  content:" €";
  opacity:.9;
}

/* (option) micro-optim pour la puce d’état neu */
.month-status.neu{ background:rgba(255,255,255,.35); }
/* --- Empêche le fond décoratif de bloquer les clics --- */
.hero-bg{
  position: fixed;
  inset: 0;
  z-index: 0;             /* Toujours derrière tout */
  pointer-events: none;   /* <<< C’est la clé : les clics passent à travers */
}

/* --- Ordre des calques (pour bien gérer les clics) --- */
.dash-header{ position: relative; z-index: 3; }
.dash-layout{ position: relative; z-index: 1; }
.dash-sidebar{ z-index: 2; }          /* fermée */
.dash-sidebar.open{ z-index: 4; }     /* ouverte (au-dessus du reste) */

/* --- Sécurité : un élément masqué ne capte jamais les clics --- */
.is-hidden{ display: none !important; }

/* ===========================================================
   DASHBOARD — Graphiques + Picker "chips" plus sexy
   =========================================================== */

/* Carte & grille des graphiques */
.dbcharts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:12px;
}
.dbchart-card{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.dbchart-card .dbchart-body{
  /* Hauteur confortable et responsive */
  height: clamp(180px, 28vh, 260px);
  position: relative;
}
.dbchart-card canvas{
  width:100% !important;
  height:100% !important;  /* Chart.js respecte cette hauteur grâce à maintainAspectRatio:false */
  display:block;
}

/* Petit popover “Choisir les graphiques” */
.dash-pop{
  padding:10px;
  border-radius:10px;
  background:rgba(20,30,50,.6);
  border:1px solid rgba(255,255,255,.12);
}

/* Chips picker */
.chipset{
  display:flex; flex-wrap:wrap; gap:10px;
}
.chip-input{
  position:absolute; inline-size:1px; block-size:1px;
  margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none;
  color:#e6edf4; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  transition: background .2s ease, border-color .2s ease, transform .05s;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.chip .ico{ font-size:16px; line-height:1; }
.chip:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); }
.chip-input:focus + .chip{ box-shadow:0 0 0 2px rgba(120,180,255,.28), 0 1px 0 rgba(255,255,255,.04) inset; }
.chip-input:checked + .chip{
  background:linear-gradient(135deg, rgba(90,170,255,.22), rgba(80,160,255,.08));
  border-color:rgba(120,180,255,.50);
}
.chip-input:checked + .chip .ico{ transform:translateY(-1px); }

.btn.tiny{ font-size:12.5px; padding:6px 10px; border-radius:999px; }

/* Sélecteur de style (héritage / ligne / barres / aire) */
.chart-style-select{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff; font-weight:700;
}
.chart-style-hint{
  margin-left:8px; font-size:12px; color:#cfd8e3; opacity:.85;
}

/* Mobile tweaks */
@media (max-width:560px){
  .dbchart-card .dbchart-body{ height: clamp(160px, 30vh, 220px); }
}
/* Quand le menu est ouvert, on élève la layout au-dessus du header */
body.menu-open .dash-layout { z-index: 10; }
body.menu-open .dash-sidebar { z-index: 11; }  /* la sidebar reste au-dessus du contenu */
#badgeConge {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  gap: 6px; /* petit espace entre l’icône et le texte */
}
/* Texte du lien "Mentions légales" plus petit mais emoji inchangé */
.nav-item .nav-text-menu {
  font-size: 10px;
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
}