/* Admin d'Iris: Iris colours (mockup validated by Ilyes on 14 November 2026). The rules after the shell come from the
   former console page; its colour names are mapped to the Iris palette here. */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff) format("woff");font-weight:300 700;font-display:swap}

:root{
    --navy:#0B2341;--blue:#173A63;--red:#C8102E;--red-dark:#A60D27;--green:#198754;--orange:#D89000;
    --background:#F4F7FA;--white:#FFFFFF;--border:#DDE4EC;--muted:#6A7788;--text:#17283E;
    --shadow:0 12px 32px rgba(11,35,65,.08);
  }
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);background:var(--background);font-family:"Questrial",Arial,sans-serif;font-size:14px}
.nav-tab.active{color:#fff;background:var(--navy)}
.nav-tab.active .count{background:rgba(255,255,255,.18);color:#fff}
.message{display:none;margin-bottom:16px;padding:13px 16px;border-radius:10px;line-height:1.45}
.message.visible{display:block}
.message.error{background:#FFF1F3;color:#A60D27;border:1px solid #F1BEC7}
.message.info{background:#EEF4FB;color:var(--blue);border:1px solid #C9D7E7}
.message.ok{background:#E7F6EC;color:#146C43;border:1px solid #B7E1C6}
.mb-item.active{background:#EEF4FB;border-color:#C9D7E7}
.mb-item.active .mb-av{background:var(--red)}
.mb-add .message{margin:0;font-size:12.5px}
.ml-head .sub{color:var(--muted);font-size:13px}
.ml-tools .chipset{margin:0}
.card{padding:20px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.fgrid .field{margin:0}
.fgrid .wide{grid-column:1/-1}
.field input[type=date]{min-height:42px}
.field input,.field select{min-height:42px}
.chipset{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);font-size:12.5px}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .n{opacity:.7;margin-left:4px}
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;white-space:nowrap;background:#EEF2F6;color:var(--blue)}
.badge.conf{background:#FDE8EC;color:#A60D27}
.badge.link{background:#E8EEF6;color:var(--navy)}
.badge.ok{background:#E6F6EE;color:#16794A}
.mini{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font-size:12px;white-space:nowrap}
.mini:hover{border-color:var(--blue)}
.mini.go{background:var(--navy);border-color:var(--navy);color:#fff}
.empty{padding:34px;text-align:center;color:var(--muted)}
.button{min-height:40px;padding:9px 15px;border:0;border-radius:8px;transition:.2s ease;white-space:nowrap}
.button:disabled{opacity:.55;cursor:not-allowed}
.button-primary{background:var(--red);color:#fff}
.button-primary:hover:not(:disabled){background:var(--red-dark)}
.bar.ok span{background:var(--green)}
.field label{display:block;margin-bottom:5px;color:var(--muted);font-size:12px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text)}
.field textarea{min-height:60px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #173A6326;border-color:var(--blue)}
.modal-head .sub{margin-top:5px;color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:none;padding:11px 18px;border-radius:9px;background:#146C43;color:#fff;max-width:90%}
.toast a{color:#fff}
/* ---------- administration ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.stat b{display:block;color:var(--navy);font-size:26px;font-weight:400}
.stat span{color:var(--muted);font-size:12.5px}
.stat.warn b{color:var(--red)}
.nav-tab.ac.active{color:#fff;background:var(--ac-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(120,60,200,.35)}
.nav-tab.ac.active::before{background:rgba(255,255,255,.55)}
.nav-tab.ac.active .count{background:rgba(255,255,255,.25);color:#fff}
.tbl{width:100%;border-collapse:collapse}
.tbl th{position:sticky;top:0;z-index:1;padding:10px 12px;border-bottom:1px solid var(--border);background:#F8FAFC;color:var(--muted);font-size:11.5px;font-weight:400;text-align:left;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid #EEF2F6;vertical-align:middle}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover td{background:#F7FAFD}
.tbl-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
.zhtog .zhflag{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;filter:grayscale(1);opacity:.55;transition:left .2s,filter .2s,opacity .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.zhtog.on .zhflag{left:27px;filter:none;opacity:1}
.rolehead .tag{padding:1px 6px;border-radius:999px;font-size:9.5px;background:#FFF4DB;color:#8A5A00}
.rolehead .tag.custom{background:#E7F6EC;color:#146C43}
.rolehead .tag.unknown{background:#FDE8EC;color:#A60D27}
.rpick .info{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#EEF2F6;color:var(--muted);font-size:10.5px;font-style:italic;font-family:Georgia,serif}
.card h2{margin:0 0 4px;color:var(--navy);font-size:19px;font-weight:400}
.card .sub{margin:0 0 14px;color:var(--muted);font-size:13px}
.pill.ok{background:#E7F6EC;color:#146C43}
.log td{font-size:13px}
.log .details{max-width:420px;color:var(--muted);font-size:12.5px;white-space:normal}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@keyframes glassDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.08)}100%{transform:translate(-40px,50px) scale(.96)}}
/* Main glass panels */
  .navbar,.card,.stat,.wf-card{
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.68));
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 1px 2px rgba(11,35,65,.05),0 14px 34px rgba(11,35,65,.09)}
.card,.wf-card{border-radius:20px}
.stat{border-radius:16px}
.nav-tab.active{color:#fff;background:linear-gradient(180deg,rgba(28,62,104,.97),rgba(11,35,65,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(11,35,65,.25)}
.nav-tab.active .count{background:rgba(255,255,255,.2)}
/* Buttons */
  .top-action,.button-secondary,.row-btn,.mini,.chip,.wf-btn,.close,.wf-close,.dd-btn,.odoo-link,.link-btn,.addlink,.pager button{
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));
    border-color:rgba(255,255,255,.9);
    box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,35,65,.08),0 4px 12px rgba(11,35,65,.07);
    transition:transform .12s,box-shadow .15s,background .15s}
.top-action:hover:not(:disabled),.button-secondary:hover:not(:disabled),.row-btn:hover:not(:disabled),.mini:hover,.chip:hover,.wf-btn:hover,.close:hover,.wf-close:hover,.odoo-link:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(11,35,65,.12)}
.top-action.primary,.button-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,#E3334F 0%,#C8102E 55%,#B00D28 100%);border-color:#B00D28;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px rgba(200,16,46,.28)}
.top-action.primary::after,.button-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.top-action.primary:hover::after,.button-primary:hover::after{left:130%}
.chip.active,.mini.go,.pager button.active{background:linear-gradient(180deg,#1C3E68,#0B2341);border-color:#0B2341;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(11,35,65,.2)}
.tbl-wrap{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85)}
/* Glass blur drawn on a layer behind each panel, so drop-down lists inside are never trapped. */
  .card,.wf-card{position:relative;isolation:isolate;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.card::before,.wf-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.68));-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
/* Keep open drop-down lists above the panels that follow */
  .card:has(.dd.open),.card:focus-within,.wf-card:focus-within{z-index:30}
/* Phones: columns may shrink to the screen width (wide tables scroll inside their own box instead of pushing the page sideways) */
  .two > *,.grid > *,.two-col > *,.stats > *,.layout > *,.detail-columns > *{min-width:0}
.card,.wf-card{min-width:0;max-width:100%}
.table-wrap,.tbl-wrap,.wf-wrap{max-width:100%}
.ir-muted{color:var(--muted);font-size:12px}
.ir-cus{max-width:680px;display:grid;gap:10px;padding:6px 2px}
.ir-cus h3{margin:0;font-size:20px}
.ir-cus h4{margin:8px 0 0;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:13.5px}
.ir-cuskick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ir-cuslogo{display:flex;gap:14px;align-items:center;padding:14px;border:1px dashed var(--border);border-radius:12px;flex-wrap:wrap}
.ir-cuslogo img{height:52px;max-width:120px;object-fit:contain}
.ir-cuslogo small,.ir-cusw small{display:block;color:var(--muted);font-size:12px}
.ir-cusph{width:52px;height:52px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.ir-cuslogo label.mini{cursor:pointer}
.ir-cusw{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.ir-cusw input{position:absolute;opacity:0;width:1px;height:1px}
.ir-sw{flex:none;width:38px;height:22px;border-radius:99px;background:#D6C8B6;position:relative;transition:background .15s;margin-top:1px}
.ir-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.ir-cusw input:checked+.ir-sw{background:#2E8C57}
.ir-cusw input:checked+.ir-sw::after{left:19px}
.ir-cusw input:focus-visible+.ir-sw{outline:2px solid #2E8C57;outline-offset:2px}
.ir-cusnote{margin:4px 0 0;padding:12px 14px;border-radius:10px;background:rgba(192,96,58,.08);font-size:13px}
.ir-kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 16px;font-size:13px}
.ir-kv span{color:var(--muted)}
.ir-kv b{font-weight:500;word-break:break-all}
.ir-made{margin-top:14px;padding:12px 14px;border-radius:10px;background:#E6F6EE;color:#16794A;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ir-made .ir-ta{flex-basis:100%}
.ir-num{width:64px;min-height:30px;padding:4px 6px;border:1px solid var(--border);border-radius:6px}
.ir-date{min-height:30px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;font:inherit;font-size:13px;margin-top:6px}
.ir-ed{min-height:30px}
.ir-row{cursor:pointer}
.ir-row:hover td{background:#F7F9FC}
.ir-detail{background:#FAFBFD}
.ir-detail h3{margin:14px 0 8px;font-size:13px;color:var(--navy)}
.ir-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ir-msg{flex:1;min-width:200px;min-height:30px;padding:5px 9px;border:1px solid var(--border);border-radius:8px}
.ir-ta{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
.tbl code,.ir-kv code,.ir-made code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.stat small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.ir-good{color:#16794A}
.ir-warn{color:#A15C07}
.ir-2col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.ir-2col.tight{gap:12px;margin-top:14px}
@media (max-width:900px){.ir-2col{grid-template-columns:minmax(0,1fr)}}
.ir-dlc{margin-top:18px}
.ir-dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ir-dli{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:10px;min-width:0}
.ir-dli .ir-dlv{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ir-dli a.mini{margin-top:auto;text-decoration:none;display:inline-block}
@media (max-width:900px){.ir-dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ir-dl{grid-template-columns:minmax(0,1fr)}}
.ir-bar{display:inline-block;vertical-align:middle;width:90px;height:9px;border-radius:5px;background:#E6EAF0;overflow:hidden}
.ir-bar i{display:block;height:100%;background:#16794A}
.ir-todo{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;padding:7px 0;border-bottom:1px solid #EEF1F5}
.ir-todo span{flex:1}
.ir-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none}
.ir-dot.b{background:var(--blue)}
.ir-dot.o{background:#C77A12}
.ir-cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:#C8102E;color:#fff;font-size:11px;margin-left:4px;padding:0 5px}
.ir-relbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.ir-rels{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.ir-rels{grid-template-columns:minmax(0,1fr)}}
.ir-rlist{display:grid;gap:8px}
.ir-ritem{display:grid;gap:4px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit}
.ir-ritem>span:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ir-ritem.on{border:2px solid var(--navy)}
.ir-rdetail h3{margin:16px 0 6px;font-size:14px;color:var(--navy)}
.ir-rhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ir-rhead h2{margin:0}
.ir-imp{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.ir-imp select{min-height:30px}
.ir-imp select.k-sec{border-color:#D9711C;color:#8A4300;background:#FDF1E6}
.ir-imp select.k-imp{border-color:#4F8A48;color:#2F5A2B;background:#EEF5EC}
.ir-notes{font-family:inherit;font-size:13.5px;line-height:1.55;margin:6px 0 8px}
.ir-files{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;gap:6px 14px;font-size:13px;align-items:center;background:#F7F9FC;border-radius:10px;padding:10px 12px}
.ir-files a{color:var(--navy);text-decoration:none;word-break:break-all}
.ir-box{border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:13.5px}
.ir-box h3{margin:0 0 8px}
.ir-box p{margin:4px 0}
.ir-actions.col{flex-direction:column;align-items:stretch}
.ir-danger{color:#A60D27;border-color:#F0B7C1}
.badge.ir-st-draft{background:#E8EEF6;color:var(--navy)}
.badge.ir-st-test{background:#FFF1D6;color:#8A5300}
.badge.ir-st-all{background:#E6F6EE;color:#16794A}
.badge.ir-st-withdrawn{background:#EEF2F6;color:var(--muted)}
.badge.ir-sent{background:#FFF1D6;color:#8A5300;white-space:normal}
.ir-inl{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.ir-num.w{width:80px}
.ir-msg.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
html,body{font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--background);color:var(--text);font-size:14.5px}
[hidden]{display:none!important}
.top{position:sticky;top:0;z-index:20;background:#F9F4EC;border-bottom:1px solid var(--border)}
.topin{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px max(16px,env(safe-area-inset-left));flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--text);white-space:nowrap}
#nav{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
#nav button{border:0;background:transparent;color:#5A4A3D;padding:7px 13px;border-radius:999px;font-size:14px}
#nav button:hover{background:#EFE5D7}#nav button.on{background:#241A13;color:#FBF7F1}
.me{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.wrap{max-width:1280px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-left)) 60px;display:flex;flex-direction:column;gap:14px}
#vIris{display:flex;flex-direction:column;gap:14px}
.ir-topsubs .chip[data-irsub]{display:none}.ir-topsubs:not(:has(.chip[data-irsys])){display:none}
.card{background:#F9F4EC!important;border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:none!important}
.button-primary,.mini.go{background:#241A13!important;color:#FBF7F1!important;border-color:#241A13!important}
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.lgcard{width:min(400px,100%);background:#F9F4EC;border:1px solid var(--border);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px}
.lgbrand{display:flex;align-items:center;gap:12px;font-size:21px;margin-bottom:6px}
.lgcard .field{display:flex;flex-direction:column;gap:6px}
.lgcard input{height:44px;border:1px solid var(--border);border-radius:11px;padding:0 12px;background:#fff;font-size:15px}
.lgcard input:focus{outline:2px solid var(--red);outline-offset:1px}
.lgmsg{margin:0;color:var(--red-dark);min-height:1.2em;font-size:13.5px}
.lgcard .button{height:46px;border-radius:12px;font-weight:600;font-size:15px}
.su-step{margin:6px 0 0;font-size:14px}.su-small{font-size:12.5px;margin:0}.su-small code{font-size:12.5px;word-break:break-all}
.su-qr{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;display:grid;place-items:center}
.su-qr svg{width:200px;height:200px}
#suBody{display:flex;flex-direction:column;gap:12px}

:root{--navy:#2B2420;--blue:#5C3A26;--red:#C0603A;--red-dark:#A24E2F;--green:#2E8C57;--orange:#C7832B;
  --background:#EFE7DB;--white:#FBF7F1;--border:#E0D3C1;--muted:#6E5E50;--text:#241A13;
  --shadow:0 1px 0 rgba(36,26,19,.04);--ac-grad:linear-gradient(90deg,#7A4A2E,#C0603A,#D98A55);color-scheme:light}
.card > label.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}.card > label.field select,.card > label.field input{max-width:520px}

/* ---------- Ventes (sales.js) ---------- */
#vSales{display:flex;flex-direction:column;gap:12px;min-width:0}
.sx-menu{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:6px}
.sx-menu button{border:0;background:transparent;color:#5A4A3D;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500}
.sx-menu button:hover{background:#EFE5D7}.sx-menu button.on{background:#F9F4EC;color:var(--text);box-shadow:inset 0 -2px 0 var(--red)}
.sx-crumb{font-size:18px;color:var(--muted)}.sx-crumb a{color:var(--red-dark);text-decoration:none}.sx-crumb a:hover{text-decoration:underline}.sx-crumb b{color:var(--text);font-weight:600}
.sx-tools,.sx-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sx-sp{flex:1}
.sx-actions .button{text-decoration:none}
.sx-search{height:38px;min-width:min(320px,100%);border:1px solid var(--border);border-radius:10px;padding:0 12px;background:#fff;font-size:14px}
.sx-card{padding:0!important;overflow:hidden}.sx-card.sx-form{padding:20px!important;display:flex;flex-direction:column;gap:16px;overflow:visible}
.sx-tbl{width:100%;border-collapse:collapse;font-size:14px}
.sx-tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.sx-tbl td{padding:10px 12px;border-bottom:1px solid #EDE3D5}.sx-tbl tbody tr[tabindex]{cursor:pointer}.sx-tbl tbody tr[tabindex]:hover{background:#FFFDF9}
.sx-tbl .n,.sx-lines .n{text-align:right;font-variant-numeric:tabular-nums}.sx-arch td{opacity:.5}
.sx-st{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#E8EEF6;color:var(--navy)}
.sx-st.st-sent{background:#FFF1D6;color:#8A5300}.sx-st.st-accepted,.sx-st.st-paid,.sx-st.st-confirmed{background:#E6F6EE;color:#16794A}
.sx-st.st-refused,.sx-st.st-cancelled,.sx-st.st-expired{background:#FBE4E8;color:#A60D27}.sx-st.st-validated,.sx-st.st-invoiced{background:#EFE3D3;color:#5C3A26}
.sx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sx-kind{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.sx-num{margin:2px 0 0;font-size:26px;font-weight:600}
.sx-status{display:flex;flex-wrap:wrap}
.sx-status span{padding:6px 14px 6px 18px;background:#EFE5D7;color:var(--muted);font-size:13px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%);margin-left:-4px}
.sx-status span:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);border-radius:8px 0 0 8px;margin-left:0}
.sx-status span.on{background:#241A13;color:#FBF7F1;font-weight:600}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 18px}
.sx-f{display:flex;flex-direction:column;gap:5px;min-width:0}.sx-f>span{font-size:12.5px;color:var(--muted);font-weight:600}.sx-wide{grid-column:1/-1}
.sx-f input,.sx-f select,.sx-f textarea,.sx-lines input,.sx-lines select,.sx-lines textarea,.sx-tr input,.sx-tr textarea{border:1px solid var(--border);border-radius:9px;padding:8px 10px;background:#fff;font:inherit;font-size:14px;min-width:0;width:100%;box-sizing:border-box}
.sx-f input:disabled,.sx-f select:disabled,.sx-lines input:disabled,.sx-lines select:disabled,.sx-lines textarea:disabled{background:transparent;border-color:transparent;color:var(--text)}
.sx-f small{font-size:12px}
.sx-lines{width:100%;border-collapse:collapse;min-width:760px}
.sx-lines th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--border);white-space:nowrap}
.sx-lines td{padding:6px 8px;border-bottom:1px solid #EDE3D5;vertical-align:top}
.sx-lines td:nth-last-child(-n+6) input{width:86px}
.sx-item{display:flex;flex-direction:column;gap:5px;min-width:260px}.sx-item textarea{font-size:13px;color:var(--muted);resize:vertical}
.sx-mv{white-space:nowrap;width:1%}.sx-mv .mini{padding:4px 7px}
.sx-sub{padding-top:14px!important;font-weight:600}
.sx-sec td{background:#F3EADD}.sx-sec input{font-weight:600}
.sx-add{display:flex;gap:8px}
.sx-tot{display:grid;grid-template-columns:auto auto;gap:6px 28px;justify-content:end;font-variant-numeric:tabular-nums}
.sx-tot span:nth-child(even){text-align:right}.sx-tot .g{font-weight:700;font-size:17px;border-top:1px solid var(--border);padding-top:6px}
.sx-saved{font-size:12.5px;color:var(--muted)}.sx-note{font-size:13px;color:var(--muted)}
.sx-danger{color:#A60D27!important}
.sx-h3{margin:4px 0 0;font-size:15px}.sx-tr{width:100%;border-collapse:collapse}.sx-tr td,.sx-tr th{padding:6px;text-align:left;font-size:13px}.sx-tr td:first-child{white-space:nowrap;color:var(--muted)}
.sx-actions a.button{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text)!important;font-size:14px;font-weight:500}
.sx-actions a.button:hover{border-color:var(--blue)}

/* header: logo and account on the first line, the sections on one line below (scrolls sideways if the window is narrow);
   always two lines (fix of 15 November 2026: the sections were squeezed into a column) */
.topin{row-gap:8px}
.brand{order:1}
.me{order:2;margin-left:auto;min-width:0}
.me #who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
#nav{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
#nav button{white-space:nowrap;flex:none}
@media (max-width:560px){.me #who{display:none}}