/* ==========================================================================
   CodaBill · portails app + admin
   Coquille : topbar, sidebar rétractable animée, tooltips hors sidebar.
   Complète codabill-ui.css. Animations : transform et opacity uniquement.
   ========================================================================== */

.portal{display:flex;min-height:100vh}

/* ---------- Sidebar ---------- */
.sb{position:sticky;top:0;height:100vh;width:248px;flex:0 0 auto;display:flex;flex-direction:column;
  padding:14px 12px;border-right:1px solid var(--glass-border);
  background:color-mix(in srgb, var(--noir-900,#0A0C18) 88%, transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:width .45s var(--ease-coda);z-index:40}
html[data-theme="light"] .sb{background:rgba(255,255,255,.82)}
.portal.collapsed .sb{width:76px}

.sb-head{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;position:relative}
.sb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;overflow:hidden}
.sb-logo img{flex:0 0 auto;transition:transform .6s var(--ease-spring)}
.sb-logo .logo-word{white-space:nowrap;opacity:1;transform:none;transition:opacity .3s var(--ease-coda),transform .3s var(--ease-coda)}
.portal.collapsed .sb-logo .logo-word{opacity:0;transform:translateX(-8px);pointer-events:none}
/* Le symbole salue quand on replie/déplie. */
.portal.collapsed .sb-logo img{transform:rotate(-360deg)}

.sb-toggle{margin-left:auto;flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--ink-muted);
  cursor:pointer;transition:transform .45s var(--ease-spring),background var(--t-fast)}
.sb-toggle:hover{background:var(--glass-bg-strong);color:var(--ink)}
/* Replié : le bouton se cache SOUS le logo. Survoler le symbole l'efface
   en douceur et révèle la flèche de dépliage, exactement à sa place. */
.portal.collapsed .sb-toggle{position:absolute;left:50%;top:4px;margin:0;width:36px;height:36px;
  transform:translateX(-50%) rotate(180deg);opacity:0;pointer-events:none;
  background:var(--noir-800,#101324);z-index:41;transition:opacity .3s var(--ease-coda),transform .45s var(--ease-spring)}
html[data-theme="light"] .portal.collapsed .sb-toggle{background:#fff}
.portal.collapsed .sb-head:hover .sb-toggle{opacity:1;pointer-events:auto}
.portal.collapsed .sb-logo img{transition:transform .6s var(--ease-spring),opacity .3s var(--ease-coda)}
.portal.collapsed .sb-head:hover .sb-logo img{opacity:0;transform:scale(.55) rotate(-360deg)}

.sb-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:visible;padding:4px 0}
.portal.collapsed .sb-nav{overflow:visible}
.portal.collapsed .sb{overflow:visible}
.sb-sec{margin:14px 10px 6px;font:700 .68rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;opacity:1;transition:opacity .25s var(--ease-coda)}
.portal.collapsed .sb-sec{opacity:0;height:0;margin:8px 0 0;overflow:hidden}

.sb-item{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);
  color:var(--ink-muted);text-decoration:none;font:500 .92rem/1 var(--f-ui);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.sb-item i.fa-solid{width:20px;text-align:center;font-size:1rem;flex:0 0 auto;transition:transform .4s var(--ease-spring)}
.sb-item:hover{background:var(--glass-bg);color:var(--ink);transform:translateX(2px)}
.sb-item:hover i.fa-solid{transform:scale(1.18) rotate(-6deg)}
.sb-item.on{background:linear-gradient(135deg,color-mix(in srgb,#3D3BF3 22%,transparent),color-mix(in srgb,#5865FF 12%,transparent));
  color:var(--ink);border:1px solid color-mix(in srgb,#3D3BF3 35%,transparent)}
.sb-item.on i.fa-solid{color:var(--bleu-500,#5865FF)}
.sb-item .sb-label{opacity:1;transform:none;transition:opacity .25s var(--ease-coda),transform .25s var(--ease-coda)}
.portal.collapsed .sb-item .sb-label{opacity:0;transform:translateX(-6px);width:0;overflow:hidden}
.sb-item .badge{margin-left:auto;transition:opacity .2s}
.portal.collapsed .sb-item .badge{position:absolute;top:4px;right:6px;margin:0;padding:1px 5px;font-size:.6rem}

/* Tooltip à droite, HORS de la sidebar — n'existe qu'en mode replié. */
.portal.collapsed .sb-item::after{content:attr(data-tt);position:absolute;left:calc(100% + 16px);top:50%;
  transform:translate(-6px,-50%);padding:12px 16px;border-radius:var(--r-md);
  background:var(--noir-800,#101324);border:1px solid var(--glass-border-hi);color:var(--ink);
  font:500 .92rem/1 var(--f-ui);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease-coda),transform .22s var(--ease-coda);z-index:60;
  box-shadow:0 10px 28px rgba(0,0,0,.4)}
.portal.collapsed .sb-item::before{content:"";position:absolute;left:calc(100% + 10px);top:50%;
  transform:translate(-6px,-50%) rotate(45deg);width:10px;height:10px;
  background:var(--noir-700,#181C33);border-left:1px solid var(--glass-border-hi);
  border-bottom:1px solid var(--glass-border-hi);opacity:0;
  transition:opacity .22s var(--ease-coda),transform .22s var(--ease-coda);z-index:61}
.portal.collapsed .sb-item:hover::after{opacity:1;transform:translate(0,-50%)}
.portal.collapsed .sb-item:hover::before{opacity:1;transform:translate(0,-50%) rotate(45deg)}
html[data-theme="light"] .portal.collapsed .sb-item::after{background:#fff;color:var(--ink)}
html[data-theme="light"] .portal.collapsed .sb-item::before{background:#fff}

.sb-foot{border-top:1px solid var(--glass-border);padding-top:10px;display:flex;flex-direction:column;gap:4px}

/* ---------- Topbar + contenu ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 26px;
  border-bottom:1px solid var(--glass-border);
  background:color-mix(in srgb, var(--noir-950,#05060D) 70%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme="light"] .topbar{background:rgba(238,241,249,.82)}
.topbar h1{font:650 1.05rem/1 var(--f-display)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.content{padding:26px;display:flex;flex-direction:column;gap:22px;flex:1}

/* Menu utilisateur */
.usr{position:relative}
.usr-btn{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:var(--r-pill);
  border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--ink);cursor:pointer;
  font:500 .88rem/1 var(--f-ui);transition:background var(--t-fast)}
.usr-btn:hover{background:var(--glass-bg-strong)}
.usr-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:8px;border-radius:var(--r-md);
  background:var(--noir-800,#101324);border:1px solid var(--glass-border-hi);box-shadow:0 16px 40px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .2s var(--ease-coda),transform .2s var(--ease-coda);z-index:70}
html[data-theme="light"] .usr-menu{background:#fff}
.usr.open .usr-menu{opacity:1;transform:none;pointer-events:auto}
.usr-menu a,.usr-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  background:none;border:0;color:var(--ink-muted);text-decoration:none;font:500 .88rem/1 var(--f-ui);cursor:pointer;text-align:left}
.usr-menu a:hover,.usr-menu button:hover{background:var(--glass-bg);color:var(--ink)}

/* Statistiques */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat-card{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-card .t-small{color:var(--ink-faint)}
.stat-card strong{font:800 1.7rem/1 var(--f-display)}
.stat-card .delta{font-size:.8rem;color:var(--ok)}

/* Table conteneur */
.panel{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--glass-border);flex-wrap:wrap}
.panel-head h2{font:650 1rem/1 var(--f-display)}
.panel-head .spacer{margin-left:auto}
.panel .tbl-wrap{border:0;border-radius:0}

/* Auth (login / register / reset) */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:30px 16px;position:relative}
.auth-card{width:100%;max-width:430px;padding:38px 34px;border-radius:var(--r-xl)}
.auth-card .site-logo{justify-content:center;display:flex;margin-bottom:18px}
.auth-card h1{font:700 1.35rem/1.3 var(--f-display);text-align:center;margin-bottom:6px}
.auth-sub{text-align:center;color:var(--ink-muted);font-size:.92rem;margin-bottom:24px}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-alt{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.auth-sep{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:.8rem;margin:16px 0 2px}
.auth-sep::before,.auth-sep::after{content:"";height:1px;flex:1;background:var(--glass-border)}
.auth-links{margin-top:18px;text-align:center;font-size:.88rem;color:var(--ink-muted)}
.auth-links a{color:var(--bleu-500,#5865FF);text-decoration:none}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}

@media(max-width:860px){
  .sb{position:fixed;left:0;transform:translateX(-100%);transition:transform .4s var(--ease-coda),width .45s var(--ease-coda)}
  .portal.sb-open .sb{transform:none}
  .portal.collapsed .sb{width:248px}
  .portal.collapsed .sb .sb-label{opacity:1;transform:none;width:auto}
}


/* ---------- Formulaires dans les entêtes de panneau ---------- */
.panel-head form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel-head .field{margin:0;min-width:190px}
.panel-head .field label{display:none}
.panel-head .input,.panel-head .sselect{height:38px}

/* ---------- Mobile ---------- */
@media(max-width:860px){
  .content{padding:16px;gap:16px}
  .topbar{padding:10px 14px}
  .topbar h1{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .usr-btn .sb-label{display:none}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .panel-head{padding:12px 14px}
  .panel-head .spacer{margin-left:0;width:100%}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:640px}
  /* Replié n'a pas de sens en mobile : la sidebar est un tiroir plein écran. */
  .portal.collapsed .sb-item::after,.portal.collapsed .sb-item::before{display:none}
}
@media(max-width:480px){
  .stat-cards{grid-template-columns:1fr}
}

/* ---------- Filtre pays (trafic) ---------- */
.dd.open .country-panel{opacity:1;transform:none;pointer-events:auto}
.country-panel{position:absolute;top:calc(100% + 8px);padding:12px;border-radius:var(--r-md);
  background:var(--noir-800,#101324);border:1px solid var(--glass-border-hi);
  box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(-6px) scale(.98);
  pointer-events:none;transition:opacity .2s var(--ease-coda),transform .2s var(--ease-coda);z-index:70}
html[data-theme="light"] .country-panel{background:#fff}
.country-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;font:500 .9rem/1 var(--f-ui);color:var(--ink-muted);
  transition:background var(--t-fast),color var(--t-fast)}
.country-row:hover{background:var(--glass-bg);color:var(--ink)}
.country-row input{accent-color:var(--bleu-600,#3D3BF3)}

/* Le panneau du filtre pays doit passer AU-DESSUS de la carte suivante :
   chaque .card à backdrop-filter crée son propre contexte d'empilement, le
   z-index du panneau enfant ne suffit donc pas — on élève le formulaire. */
#countryFilter{position:relative;z-index:95;overflow:visible}

/* ---------- Densité globale des listes (lisible jusqu'à l'iPad) ---------- */
.tbl thead th{padding:11px 14px;font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
.tbl tbody td{padding:11px 14px;font-size:13px}
.tbl .mono-cell{white-space:nowrap}
.tbl .badge{white-space:nowrap}
@media (max-width:1100px){
  .tbl thead th{padding:9px 11px}
  .tbl tbody td{padding:9px 11px;font-size:12.5px}
}