/* ==========================================================================
   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)}
.portal.collapsed .sb-toggle{transform:rotate(180deg)}
.portal.collapsed .sb-toggle{position:absolute;right:-15px;top:8px;background:var(--noir-800,#101324);z-index:41}
html[data-theme="light"] .portal.collapsed .sb-toggle{background:#fff}

.sb-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:visible;padding:4px 0}
.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, uniquement en mode replié. */
.sb-item::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translate(-6px,-50%);padding:7px 12px;border-radius:var(--r-sm);
  background:var(--noir-700,#181C33);border:1px solid var(--glass-border-hi);color:var(--ink);
  font:500 .82rem/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 8px 24px rgba(0,0,0,.35)}
.sb-item::before{content:"";position:absolute;left:calc(100% + 8px);top:50%;transform:translate(-6px,-50%) rotate(45deg);
  width:8px;height:8px;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"] .sb-item::after{background:#fff;color:var(--ink)}
html[data-theme="light"] .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}
}