/* =====================================================================
   NTbf Solutions — Espace client (app.css)
   Réutilise les tokens de site.css
   ===================================================================== */

.ec{min-height:100vh;display:flex;flex-direction:column;background:var(--ink)}

/* ---------- Auth screens ---------- */
.ec--auth{justify-content:center}
.auth-shell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem;gap:1.5rem;position:relative}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.75rem,4vw,2.5rem)}
.auth-card__brand{display:block;margin-bottom:2rem}
.auth-card__brand img{height:42px}
.auth-card h1{font-size:1.6rem;margin-bottom:.5rem}
.auth-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem}
.auth-back{color:var(--muted-2);font-size:.9rem}
.auth-back:hover{color:var(--fog)}
.auth-alt{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted);text-align:center}
.auth-alt a{color:var(--teal)}
.auth-links{display:flex;justify-content:space-between;font-size:.88rem;margin-top:-.4rem;margin-bottom:1.2rem}
.auth-links a{color:var(--blue-bright)}

/* ---------- Top nav ---------- */
.ec-top{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ec-top__inner{max-width:1160px;margin-inline:auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;justify-content:space-between}
.ec-top__brand img{height:34px}
.ec-nav{display:flex;align-items:center;gap:1.6rem}
.ec-nav a{font-size:.94rem;color:var(--muted);transition:color .2s;position:relative;padding:.3rem 0}
.ec-nav a:hover{color:var(--fog)}
.ec-nav a.is-active{color:var(--fog)}
.ec-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--grad)}
.ec-nav__logout{font-family:var(--mono);font-size:.82rem !important;color:var(--muted-2) !important;border:1px solid var(--line-strong);padding:.45rem .9rem !important;border-radius:999px}
.ec-nav__logout:hover{border-color:var(--swiss);color:#ffb0b6 !important}
.ec-top__toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center}
.ec-top__toggle span{width:22px;height:2px;background:var(--fog);transition:.3s}
.ec-top__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ec-top__toggle.is-open span:nth-child(2){opacity:0}
.ec-top__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .ec-top__toggle{display:flex}
  .ec-nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(11,18,32,.98);border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.5rem;
    transform:translateY(-120%);transition:transform .35s var(--ease)}
  .ec-nav.is-open{transform:translateY(0)}
  .ec-nav a{padding:.9rem 0 !important;border-bottom:1px solid var(--line)}
  .ec-nav a.is-active::after{display:none}
  .ec-nav__logout{margin-top:1rem;text-align:center}
}

/* ---------- Main ---------- */
.ec-main{flex:1;max-width:1160px;width:100%;margin-inline:auto;padding:clamp(1.75rem,4vw,3rem) var(--gutter)}
.ec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.ec-head h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.ec-head .eyebrow{margin-bottom:.6rem}
.ec-welcome{color:var(--muted);margin-top:.3rem}

/* ---------- Cards / KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2.5rem}
@media (max-width:820px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.kpi-grid{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.kpi__label{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.kpi__value{font-family:var(--display);font-weight:700;font-size:2rem;margin-top:.5rem;line-height:1}
.kpi__value.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi a{color:var(--blue-bright);font-size:.85rem;font-family:var(--mono);margin-top:.7rem;display:inline-block}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:2rem}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.panel__head h2{font-size:1.15rem}
.panel__head a{font-family:var(--mono);font-size:.82rem;color:var(--blue-bright)}
.panel__body{padding:1.5rem}
.panel__empty{padding:2.5rem 1.5rem;text-align:center;color:var(--muted)}
.panel__empty svg{width:36px;height:36px;color:var(--muted-2);margin-bottom:.8rem}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  text-align:left;padding:.85rem 1.5rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:1rem 1.5rem;border-bottom:1px solid var(--line);color:var(--fog);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl a.ref{font-family:var(--mono);color:var(--blue-bright)}

.badge-st{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.76rem;padding:.3rem .7rem;border-radius:999px;border:1px solid;white-space:nowrap}
.badge-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.is-ok{color:#48d9bf;border-color:rgba(0,209,178,.4)}
.is-info{color:#6ba6f5;border-color:rgba(31,111,235,.4)}
.is-danger{color:#ff96a0;border-color:rgba(225,29,42,.4)}
.is-muted{color:var(--muted);border-color:var(--line-strong)}

/* ---------- Forms in app ---------- */
.app-form{max-width:640px}
.app-form .field-row{grid-template-columns:1fr 1fr}
.notice{padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1.4rem;font-size:.92rem}
.notice--ok{background:rgba(0,209,178,.12);border:1px solid rgba(0,209,178,.4);color:#7ff0dd}
.notice--err{background:rgba(225,29,42,.12);border:1px solid rgba(225,29,42,.4);color:#ffb0b6}
.notice--info{background:rgba(31,111,235,.1);border:1px solid rgba(31,111,235,.35);color:#9dc0f7}

/* ---------- Ticket thread ---------- */
.thread{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem}
.msg__meta{font-family:var(--mono);font-size:.76rem;color:var(--muted-2);margin-bottom:.5rem;display:flex;gap:.8rem}
.msg__body{color:var(--fog);font-size:.94rem}
.msg--me{border-color:rgba(31,111,235,.35)}

/* ---------- Detail list ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;font-size:.94rem}
.dl dt{font-family:var(--mono);font-size:.78rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.dl dd{color:var(--fog)}

.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.back-link:hover{color:var(--teal)}

/* ---------- Footer ---------- */
.ec-foot{border-top:1px solid var(--line);background:var(--ink-2)}
.ec-foot__inner{max-width:1160px;margin-inline:auto;padding:1.5rem var(--gutter);display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted-2)}
.ec-foot__inner a{color:var(--muted-2)}
.ec-foot__inner a:hover{color:var(--fog)}

/* progress bar */
.prog{height:6px;background:var(--line-strong);border-radius:999px;overflow:hidden;min-width:100px}
.prog span{display:block;height:100%;background:var(--grad)}

/* ---------- Detail pages ---------- */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2rem}
@media (max-width:720px){.doc-grid{grid-template-columns:1fr}}

/* Document "papier" : méta + lignes + totaux dans un même panneau */
.doc-paper{overflow:hidden}
.doc-meta{display:flex;flex-wrap:wrap;gap:2.5rem;padding:1.5rem 1.75rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.doc-meta > div{display:flex;flex-direction:column;gap:.4rem}
.doc-meta__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.doc-meta__v{color:var(--fog);font-size:.98rem}
.doc-lines{margin:0}
.doc-lines th{background:transparent}
.doc-totals{margin-left:auto;width:min(360px,100%);padding:1.25rem 1.75rem;display:flex;flex-direction:column;gap:.55rem}
.total-row{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;font-size:.95rem;color:var(--muted)}
.total-row .num{font-variant-numeric:tabular-nums;color:var(--fog);white-space:nowrap}
.total-row--grand{margin-top:.5rem;padding-top:.85rem;border-top:1px solid var(--line-strong);font-family:var(--display);font-weight:700;font-size:1.25rem}
.total-row--grand span{color:var(--fog)}
.total-row--grand .num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.total-row--due{color:#ff96a0}
.total-row--due .num{color:#ff96a0;font-weight:600}

/* Row actions (list tables) */
.row-actions{white-space:nowrap;text-align:right}
.row-actions a{font-family:var(--mono);font-size:.8rem;color:var(--blue-bright);padding:.3rem .6rem;border:1px solid var(--line-strong);border-radius:8px;margin-left:.35rem;transition:border-color .2s,color .2s;display:inline-block}
.row-actions a:hover{border-color:var(--teal);color:var(--teal)}

/* Line-item section/note rows */
.tbl-section td{font-family:var(--display);font-weight:600;color:var(--fog);background:rgba(255,255,255,.03);font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.tbl-note td{color:var(--muted);font-style:italic;font-size:.88rem}