:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* Deep forest green + warm cream + white cards */
  --ink:#122B22; --ink-soft:#5E7268; --paper:#F6F1E6; --paper-2:#EFE8D6;
  --line:#E1D9C2; --accent:#B4472F; --accent-soft:#F2DBD1; --green:#0E3B2E; --green-700:#1B5642; --green-soft:#DEE9DF;
  --amber:#8A6B1F; --amber-soft:#F1E4C0;
  --gold:#C9A24B;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --num:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;       /* the figures of the squares: Inter 600, aligned digits, in every language */
  --bg:var(--paper); --bg2:var(--paper-2); --fg:var(--ink); --fg-soft:var(--ink-soft); --rule:var(--line);
  --card:#FFFFFF;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(14,59,46,.06), 0 6px 20px rgba(14,59,46,.05);
}
/* Accent color variants — chosen per user in "Mon compte" */
:root[data-accent="green-gray"]{
  --ink:#1A211D; --ink-soft:#5E6862; --green:#0E3B2E; --green-700:#1B5642; --green-soft:#DEE9DF;
  --paper:#F4F5F3; --paper-2:#E9EBE7; --line:#DBDDD8;
}
:root[data-accent="emerald"]{
  --ink:#12241D; --ink-soft:#5E7268; --green:#0E9F6E; --green-700:#0B7A54; --green-soft:#D9F5EA;
}
:root[data-accent="lime"]{
  --ink:#1E2410; --ink-soft:#61684E; --green:#65A30D; --green-700:#4D7C0F; --green-soft:#ECFCCB;
}
:root[data-accent="teal"]{
  --ink:#0F2321; --ink-soft:#546864; --green:#0D9488; --green-700:#0F766E; --green-soft:#CCFBF1;
}
:root[data-accent="blue"]{
  --ink:#0F2438; --green:#123A5E; --green-700:#1E5386; --green-soft:#DDE7F1;
  --paper:#EEF1F3; --paper-2:#E4E9EC; --line:#D6DEE2;
}
:root[data-accent="wine"]{
  --ink:#2E1224; --green:#4A1942; --green-700:#6B2A5F; --green-soft:#EEE0EA;
  --paper:#F5EEF0; --paper-2:#EDE2E6; --line:#DFCDD4;
}
:root[data-accent="charcoal"]{
  --ink:#202326; --green:#2B2E33; --green-700:#454A52; --green-soft:#E4E5E7;
  --paper:#EEEEEC; --paper-2:#E4E4E1; --line:#D6D6D3;
}
/* Background variant — independent of accent color, tested separately */
:root[data-bg="gray"]{--paper:#F4F5F3 !important; --paper-2:#E9EBE7 !important; --line:#DBDDD8 !important;}
:root[data-bg="white"]{--paper:#FFFFFF !important; --paper-2:#F3F4F2 !important; --line:#E5E7E4 !important;}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px));
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:450; margin:0; letter-spacing:.1px}
h1 em, .brand em{font-style:italic; font-weight:450; color:var(--green-700);}
.num{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums;}
table:not(.p-lines) td.num{font-weight:500;}      /* amounts in the tables: medium, so 30 rows stay light; the totals and cards below are 600 */
a{color:inherit}
button{font-family:var(--sans)}
::selection{background:var(--accent-soft)}

/* App shell */
#app{display:flex; min-height:100%;}

/* Landing page */
.landing-screen{min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--fg);}
.landing-header{ position:fixed; top:0; left:0; right:0; z-index:60; box-sizing:border-box; height:106px; display:flex; align-items:center; justify-content:space-between; padding:0 max(6vw, calc((100% - 1180px) / 2 + 6vw)); background:var(--bg); background:color-mix(in srgb, var(--bg) 93%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:height .2s ease, border-color .2s ease; }
.landing-header .brand-logo{transition:height .2s ease;}
.landing-header.scrolled{ height:58px; border-bottom-color:var(--rule); }
.landing-header.scrolled .brand-logo{height:30px;}
.landing-screen{ box-sizing:border-box; padding-top:106px; }
.landing-header a.brand{text-decoration:none; color:inherit; cursor:pointer; border-radius:8px;}
.landing-header a.brand:focus-visible{outline:2px solid var(--green); outline-offset:3px;}
.landing-header-actions{display:flex; align-items:center; gap:20px;}
.header-link{font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-decoration:none;}
.header-link:hover{color:var(--fg);}
.landing-header .brand .mark{color:var(--accent);}
.landing-header .brand .name{color:var(--fg);}
.landing-hero{
  max-width:960px; margin:0 auto; padding:64px 6vw 40px; text-align:center;
}
.landing-hero .eyebrow{justify-content:center; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--accent); font-weight:600; letter-spacing:.3px; margin-bottom:18px;}
.landing-hero h1{
  font-size:max(calc(44px * var(--fs,1)), var(--fmin,0px)); line-height:1.12; letter-spacing:-.6px; margin:0 auto 22px; max-width:720px;
}
.landing-hero h1 em{font-style:italic; color:var(--green-700); font-weight:450;}
.landing-sub{
  font-size:max(calc(16.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.6; color:var(--fg-soft); max-width:540px; margin:0 auto 34px;
}
.hero-mockups{display:flex; align-items:flex-end; justify-content:center; gap:0; max-width:960px; margin:52px auto 0;}
.hero-mockup{
  border-radius:16px; overflow:hidden;
  background:var(--card); border:1px solid var(--rule); box-shadow:0 20px 60px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.08);
  text-align:left;
}
.hero-mockup-dashboard{width:64%; z-index:1;}
.hero-mockup-crm{width:40%; min-width:0; margin-left:-4%; z-index:2; box-shadow:-14px 20px 50px rgba(0,0,0,.16), 0 4px 14px rgba(0,0,0,.08);}
.hero-mockup-bar{display:flex; gap:6px; padding:12px 16px; background:var(--bg2); border-bottom:1px solid var(--rule);}
.hero-mockup-bar span{width:10px; height:10px; border-radius:50%; background:var(--rule);}
.hero-mockup-body{display:flex; min-height:340px;}
.hero-mockup-sidebar{width:64px; flex:none; background:var(--green); padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:14px;}
.hero-mockup-logo{width:26px; height:24px; background:url(assets/icone.2d3bf43d.png) center/contain no-repeat; margin-bottom:10px;}
.hero-mockup-navitem{width:30px; height:9px; border-radius:5px; background:rgba(255,255,255,.28);}
.hero-mockup-navitem.active{background:#fff; width:34px;}
.hero-mockup-main{flex:1; background:var(--bg2); padding:26px 28px;}
.hero-mockup-dash{width:100%;}
.hero-mockup-kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px;}
.hero-mockup-kpi{background:#fff; border-radius:9px; padding:12px 14px; box-shadow:0 3px 10px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:6px;}
.hero-mockup-kpi-label{font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); color:#8a8f79; text-transform:uppercase; letter-spacing:.3px;}
.hero-mockup-kpi-val{font-family:var(--serif); font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); color:var(--green); font-weight:600; white-space:nowrap;}
.hero-mockup-kpi-val.amber{color:#A9791F;}
.hero-mockup-table{background:#fff; border-radius:9px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.06);}
.hero-mockup-row{display:grid; grid-template-columns:1.1fr 1.6fr 1.2fr 1.1fr; gap:8px; padding:11px 14px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#4a4f45; align-items:center; border-bottom:1px solid #F5F3EA;}
.hero-mockup-row:last-child{border-bottom:none;}
.hero-mockup-row-head{background:var(--green); color:#fff; font-size:max(calc(9.5px * var(--fs,1)), var(--fmin,0px)); text-transform:uppercase; letter-spacing:.3px; font-weight:700;}
.hero-mockup-badge{display:inline-block; padding:2px 8px; border-radius:20px; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); font-weight:600; width:fit-content;}
.hero-mockup-badge.paid{background:#D9F5EA; color:#0B7A54;}
.hero-mockup-badge.sent{background:#DEE9DF; color:#1B5642;}
.hero-mockup-badge.overdue{background:#FBE8D2; color:#A9591F;}
.hero-mockup-kanban{display:flex; gap:10px; padding:14px 16px 18px; background:var(--bg2); width:100%; min-width:0;}
.hero-mockup-crm-head{display:flex; align-items:center; gap:7px; padding:14px 16px 0; font-family:var(--serif); font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green); background:var(--bg2);}
.hero-mockup-crm-dot{width:7px; height:7px; border-radius:50%; background:var(--green);}
.hero-mockup-kcol{flex:1 1 0; min-width:0; background:#fff; border-radius:9px; padding:10px 9px; box-shadow:0 3px 10px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:7px;}
.hero-mockup-kcol-head{display:flex; align-items:center; justify-content:space-between; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); font-weight:700; text-transform:uppercase; letter-spacing:.2px; color:#8a8f79; margin-bottom:2px;}
.hero-mockup-kcol-count{background:var(--bg2); color:#8a8f79; font-size:max(calc(9.5px * var(--fs,1)), var(--fmin,0px)); font-weight:700; border-radius:20px; padding:1px 6px; text-transform:none;}
.hero-mockup-kcard{background:var(--bg2); border-radius:7px; padding:8px 9px; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); line-height:1.3; color:#3a3f36; font-weight:600; min-width:0; display:flex; flex-direction:column; gap:4px;}
.hero-mockup-kcard-val{font-family:var(--serif); font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green-700,var(--green));}
.hero-mockup-kcard.won{background:var(--green); color:#fff;}
.hero-mockup-kcard.won .hero-mockup-kcard-val{color:#fff;}
@media (max-width:700px){
  .hero-mockups{flex-direction:column; align-items:center; gap:22px;}
  .hero-mockup-dashboard, .hero-mockup-crm{width:100%; margin-left:0; box-shadow:0 14px 40px rgba(0,0,0,.14);}
  .hero-mockup-body{flex-direction:column;}
  .hero-mockup-sidebar{width:100%; flex-direction:row; padding:12px 16px;}
  .hero-mockup-main{padding:20px;}
  .hero-mockup-row{grid-template-columns:1fr 1fr; grid-template-areas:"a b" "c d";}
}
.landing-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn.large{padding:13px 26px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px));}
.landing-features{
  max-width:1080px; margin:60px auto 0; padding:0 6vw;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.feature-card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:24px;
}
.feature-card svg{color:var(--green); margin-bottom:14px;}
.feature-card h3{font-size:max(calc(15.5px * var(--fs,1)), var(--fmin,0px)); margin-bottom:8px; font-weight:600; letter-spacing:0;}
.feature-card p{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); line-height:1.55; color:var(--fg-soft); margin:0;}
.landing-footer{
  max-width:760px; margin:70px auto 0; padding:48px 6vw 0; text-align:center;
  border-top:1px solid var(--rule);
}
.landing-footer p{font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px)); font-family:var(--serif); margin-bottom:20px;}
.landing-footer .landing-footer-sub{font-family:var(--sans); font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin:-8px 0 20px;}
.landing-tour{max-width:1080px; margin:70px auto 0; padding:0 6vw;}
.landing-tour h2{font-size:max(calc(26px * var(--fs,1)), var(--fmin,0px)); text-align:center; margin-bottom:26px; letter-spacing:-.3px;}
.tour-tabs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;}
.tour-tab{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:12px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg-soft);}
.tour-tab:hover{background:var(--bg2); color:var(--fg);}
.tour-tab.active{background:var(--green-soft); color:var(--green-700); font-weight:600;}
.tour-tab:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.tour-panel{display:none; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:44px; align-items:center;}
.tour-panel.active{display:grid;}
.tour-copy h3{font-family:var(--serif); font-size:max(calc(31px * var(--fs,1)), var(--fmin,0px)); line-height:1.18; letter-spacing:-.4px; font-weight:450; margin:0 0 22px;}
.tour-list{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:14px;}
.tour-list li{position:relative; padding-left:28px; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); line-height:1.55; color:var(--fg);}
.tour-list li::before{content:''; position:absolute; left:2px; top:6px; width:11px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);}
.tour-visual{background:var(--green-soft); border-radius:18px; padding:32px 26px; min-width:0;}
.tour-visual .hero-mockup-body{min-height:300px;}
.tour-main-plain{flex:1; min-width:0; background:var(--bg2);}
.tour-chip, .tour-cta-end{display:none;}
.mk-title{display:flex; align-items:center; gap:7px; margin-bottom:14px; font-family:var(--serif); font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.dm-main > .mk-title{margin-bottom:0;}
.tour-row-purch{grid-template-columns:1.6fr .9fr 1.15fr 1.1fr;}
.tour-row-sales{grid-template-columns:1fr 1.55fr 1.35fr 1fr;}
/* one line per word in every mockup: ellipsis rather than wrapping */
.hero-mockup-row > span, .hero-mockup-kpi-label, .hero-mockup-kcol-head > span:first-child, .kc-name, .hero-mockup-kcard-val{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.hero-mockup-badge{white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.hero-mockup-kcol-head{gap:6px;}
.tour-visual .hero-mockup-kcol-head{text-transform:none; letter-spacing:0; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px));}
/* dashboard of the general mockup */
.hero-mockup-wide{width:100%;}
.dm-main{flex:1; min-width:0; background:var(--bg2); padding:22px 24px; display:flex; flex-direction:column; gap:14px;}
.dm-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.dm-grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:14px;}
.dm-card{background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 3px 10px rgba(0,0,0,.06); min-width:0;}
.dm-card-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; min-width:0;}
.dm-card-title{font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); font-weight:700; color:#8a8f79; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.dm-key{display:inline-flex; align-items:center; gap:5px; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); color:#6b7060; white-space:nowrap; flex:none;}
.dm-key i{display:inline-block; width:8px; height:8px; border-radius:2px; background:#CFE5DA; margin-left:4px;}
.dm-key i.line{width:10px; height:2px; border-radius:2px; background:var(--green-700,var(--green));}
.dm-barchart{width:100%; height:auto; display:block;}
.dm-gridline{stroke:#EEF0E6; stroke-width:1;}
.dm-bar{fill:#CFE5DA;} .dm-bar.cur{fill:var(--green);}
.dm-line{fill:none; stroke:var(--green-700,var(--green)); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
.dm-dot{fill:#fff; stroke:var(--green-700,var(--green)); stroke-width:1.6;}
.dm-axis{fill:#8a8f79; font-size:max(calc(9px * var(--fs,1)), var(--fmin,0px)); font-family:var(--sans);}
.dm-donut{display:flex; align-items:center; gap:16px; min-width:0;}
.dm-donutchart{width:96px; height:96px; flex:none;}
.dm-seg{fill:none; stroke-width:14;} .dm-seg.paid{stroke:#1F8F6B;} .dm-seg.sent{stroke:#9CC8B0;} .dm-seg.late{stroke:#E0A45B;}
.dm-donut-num{font-family:var(--serif); font-size:max(calc(20px * var(--fs,1)), var(--fmin,0px)); font-weight:600; fill:var(--green);}
.dm-legend{display:flex; flex-direction:column; gap:8px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#4a4f45; min-width:0;}
.dm-leg{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.dm-leg b{margin-left:auto; padding-left:10px; font-weight:700; color:#3a3f36;}
.dm-leg i{width:8px; height:8px; border-radius:50%; flex:none;} .dm-leg i.paid{background:#1F8F6B;} .dm-leg i.sent{background:#9CC8B0;} .dm-leg i.late{background:#E0A45B;}
.dm-top{display:flex; flex-direction:column; gap:10px;}
.dm-top-row{display:grid; grid-template-columns:minmax(0,130px) minmax(0,1fr) 84px; gap:12px; align-items:center; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#4a4f45; white-space:nowrap;}
.dm-top-name{overflow:hidden; text-overflow:ellipsis;} .dm-top-val{text-align:right; font-weight:600; color:#3a3f36;}
.dm-track{display:block; height:8px; border-radius:6px; background:var(--bg2); overflow:hidden;} .dm-fill{display:block; height:100%; border-radius:6px; background:var(--green);}
@media (max-width:760px){
  .tour-tabs{display:none;}
  .tour-panel, .tour-panel[hidden]{display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:64px;}
  .tour-panel.tour-panel-last{margin-bottom:0;}
  .tour-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; margin-bottom:14px; border-radius:999px; background:var(--green-soft); color:var(--green-700); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600;}
  .tour-copy .btn{display:none;}
  .tour-cta-end{display:flex; justify-content:center; margin-top:46px;}
  .landing-tour h2{margin-bottom:34px;}
}
@media (max-width:700px){
  .mk-desk{display:none !important;}
  .tour-visual .hero-mockup-row.tour-row-sales{grid-template-columns:minmax(0,1.35fr) minmax(0,1.3fr) minmax(0,1fr);}
  .tour-visual .hero-mockup-row.tour-row-sales > span:first-child{display:none;}
  .tour-visual .hero-mockup-row.tour-row-purch{grid-template-columns:minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,1fr);}
  .tour-visual .hero-mockup-row.tour-row-purch > span:nth-child(2){display:none;}
  .tour-visual .hero-mockup-row.tour-row-sales, .tour-visual .hero-mockup-row.tour-row-purch{grid-template-areas:none;}
  .tour-visual .hero-mockup-row{padding:10px; gap:6px;}
  .dm-main{padding:16px 14px;}
  .dm-kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .dm-grid{grid-template-columns:1fr;}
  .dm-top-row{grid-template-columns:minmax(0,96px) minmax(0,1fr) 72px; gap:8px;}
  .tour-visual .hero-mockup-row.tour-row-stock{grid-template-columns:1.75fr .85fr 1.15fr;}
  .tour-visual .hero-mockup-row{font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); padding:10px 12px;}
  .tour-visual .hero-mockup-kanban{flex-direction:column; padding:12px 12px 14px; gap:8px;}
  .tour-visual .hero-mockup-kcol{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
  .tour-visual .hero-mockup-kcol-head{grid-column:1 / -1;}
}
.tour-row-stock{grid-template-columns:2fr .8fr 1fr;}
@media (max-width:760px){
  .tour-panel.active{grid-template-columns:1fr; gap:26px;}
  .tour-copy h3{font-size:max(calc(25px * var(--fs,1)), var(--fmin,0px));}
  .tour-tab{padding:8px 12px; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
  .tour-visual{padding:18px 12px;}
  .tour-row-stock{grid-template-columns:2fr 1fr 1fr;}
}
.landing-steps{max-width:1080px; margin:70px auto 0; padding:0 6vw;}
.landing-steps h2{font-size:max(calc(26px * var(--fs,1)), var(--fmin,0px)); text-align:center; margin-bottom:36px; letter-spacing:-.3px;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step-card{text-align:center;}
.step-num{
  display:inline-block; font-family:var(--mono); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--green);
  border:1px solid var(--green-soft); border-radius:20px; padding:3px 12px; margin-bottom:14px;
}
.step-card h3{font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); margin-bottom:8px; font-weight:600;}
.step-card p{font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.6; color:var(--fg-soft); margin:0;}
@media (max-width:760px){
  .landing-hero h1{font-size:max(calc(32px * var(--fs,1)), var(--fmin,0px));}
  .landing-features{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr; gap:26px;}
}

.auth-screen{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px;
}
.auth-card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:32px; width:100%; max-width:360px;
}
.auth-card .brand .mark{color:var(--green);}
.auth-card .brand .name{color:var(--fg);}
.auth-card .app-version{color:var(--fg-soft);}
.auth-card .field label{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-bottom:4px; display:block;}
.auth-card .field input{
  width:100%; font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); padding:9px 12px; border:1px solid var(--rule);
  border-radius:var(--radius-sm); background:var(--bg); color:var(--fg);
}
.auth-error{color:var(--accent); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); margin-bottom:10px; display:none;}
.auth-divider{display:flex; align-items:center; gap:10px; margin:4px 0; color:var(--fg-soft); font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px));}
.auth-tabs{display:flex; gap:4px; background:var(--bg2); border-radius:20px; padding:3px; margin-bottom:20px;}
.auth-tab{all:unset; box-sizing:border-box; flex:1; text-align:center; cursor:pointer; padding:8px 10px; border-radius:17px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.auth-tab.active{background:var(--card); color:var(--fg); font-weight:500; box-shadow:var(--shadow);}
.auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--rule);}
.google-btn{display:inline-flex; align-items:center; gap:10px;}
.auth-card .btn{width:100%; justify-content:center; text-align:center; box-sizing:border-box; margin-bottom:8px;}
.auth-card .btn:last-child{margin-bottom:0;}
.auth-link{display:block; text-align:center; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); cursor:pointer; margin-top:14px; background:none; border:none; text-decoration:underline; font-family:var(--sans);}
.sidebar{
  width:224px; flex:none; background:var(--green); border-right:none;
  padding:20px 14px 14px; display:flex; flex-direction:column; gap:14px; overflow:hidden;
  position:sticky; top:0; height:100vh; height:100dvh; color:var(--paper);
}
.sidebar > .brand, .sidebar > .org-switcher{flex:none;}
.brand{display:flex; align-items:baseline; gap:7px; padding:2px 8px 0;}
.brand-logo{height:26px; width:auto; display:block;}          /* the logo now fills 93 % of its image (65 % before): 0.75 × the old height = the same presence */
.auth-card .brand-logo{height:35px;}
.landing-header .brand-logo{height:46px;}
#bootLoader .brand-logo{height:40px;}
.brand .mark{font-family:var(--serif); font-style:italic; font-size:max(calc(23px * var(--fs,1)), var(--fmin,0px)); color:var(--paper);}
.brand .name{font-family:var(--serif); font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px)); color:var(--paper); letter-spacing:.2px;}
.app-version{font-family:var(--mono); font-size:max(calc(9.5px * var(--fs,1)), var(--fmin,0px)); color:var(--paper); opacity:.6; margin-left:2px;}
/* the menu scrolls by itself if it ever gets too tall; the account block below never moves */
nav.mainnav{display:flex; flex-direction:column; gap:2px; margin-top:0; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent;}
nav.mainnav button{
  all:unset; cursor:pointer; padding:10px 13px; border-radius:9px; color:#FFFFFF;
  display:flex; align-items:center; gap:10px; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500;
}
nav.mainnav button svg{flex:none; opacity:.9;}
nav.mainnav button.active svg{opacity:1;}
nav.mainnav button .dot{width:5px;height:5px;border-radius:50%;background:var(--paper); opacity:.5; flex:none}
nav.mainnav button:hover{background:rgba(255,255,255,.08); color:#FFFFFF;}
nav.mainnav button.active{background:var(--paper); color:var(--green-700); font-weight:700; opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.12);}
nav.mainnav button.active .dot{background:var(--accent); opacity:1;}
nav.mainnav .nav-group-head span{flex:1; text-align:start;}
nav.mainnav .nav-group-head.has-active{background:rgba(255,255,255,.15); font-weight:700;}
nav.mainnav .chev{flex:none; transition:transform .2s; opacity:.8;}
nav.mainnav .chev.open{transform:rotate(180deg);}
.nav-sub{display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s ease;}
.nav-sub.closed{grid-template-rows:0fr;}
.nav-sub > div{overflow:hidden; margin-inline-start:20px; padding-inline-start:8px; border-inline-start:1.5px solid rgba(255,255,255,.28); display:flex; flex-direction:column; gap:1px; margin-top:2px;}
.nav-sub.closed > div{visibility:hidden; transition:visibility 0s linear .22s;}
nav.mainnav .nav-sub button{padding:7px 12px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.nav-sep{height:1px; background:rgba(255,255,255,.2); margin:6px 4px; flex:none;}
.user-block{display:flex; align-items:center; gap:10px; padding:4px 4px 2px;}
.user-avatar{width:32px; height:32px; border-radius:50%; background:var(--paper); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); font-weight:700; flex:none;}
.user-meta{min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start;}
.user-email{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--paper); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-link{all:unset; cursor:pointer; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--paper); opacity:.85; text-decoration:underline; text-underline-offset:2px;}
.user-link:hover, .user-link.active{opacity:1; font-weight:700;}
.sidebar-foot{margin-top:0; flex:none; display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.18);}
.org-switcher{position:relative; margin:2px 0 4px;}
.new-org-btn{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%; text-align:center;
  padding:7px 8px; border-radius:9px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--paper); opacity:.85;
  border:1px dashed rgba(255,255,255,.35); margin-bottom:10px;
}
.new-org-btn:hover{background:rgba(255,255,255,.08); opacity:1;}
.company-chip{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%;
  padding:9px 8px; border-radius:9px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--paper);
  display:flex; gap:8px; align-items:center;
}
.company-chip:hover{background:rgba(255,255,255,.08);}
.company-chip.static{cursor:default;}
.company-chip.static:hover{background:transparent;}
.company-chip.cta{border:1px dashed rgba(255,255,255,.6);}
.company-chip.cta:hover{background:rgba(255,255,255,.12);}
[dir="rtl"] .company-chip.cta .caret svg{transform:scaleX(-1);}
.company-chip img{width:18px; height:18px; object-fit:contain; border-radius:4px; background:#fff; flex:none;}
.company-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:left; font-weight:700;}
.company-chip .caret{flex:none; display:flex; align-items:center; color:var(--paper); opacity:.9;}
.org-switcher-menu{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:70;
  background:var(--card); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow);
  padding:6px; max-height:260px; overflow-y:auto;
}
.org-switcher-menu button{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; gap:8px; align-items:center;
  padding:8px 9px; border-radius:7px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg);
}
.org-switcher-menu button:hover{background:var(--bg2);}
.org-switcher-menu button.current{font-weight:600; color:var(--green-700);}
.org-switcher-menu img{width:18px; height:18px; object-fit:contain; border-radius:4px; background:#fff; flex:none;}
.org-switcher-menu span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-chip img{width:22px;height:22px;object-fit:contain;border-radius:5px;background:#fff}
.theme-toggle{all:unset; cursor:pointer; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--paper); border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:7px 10px; text-align:center;}
.theme-toggle:hover{color:var(--green-700); background:var(--paper); border-color:var(--paper);}

.hamburger{display:none}
main{flex:1; min-width:0; padding:28px 34px 60px; max-width:1180px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.page-head h1{font-size:max(calc(26px * var(--fs,1)), var(--fmin,0px));}
.eyebrow{color:var(--fg-soft); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); margin-bottom:4px;}
.muted{color:var(--fg-soft);}

/* Buttons */
.btn{all:unset; cursor:pointer; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500; padding:10px 18px; border-radius:24px; border:1px solid var(--rule); color:var(--fg); display:inline-flex; align-items:center; gap:7px; background:var(--card); transition:background .15s, border-color .15s, opacity .15s;}
.btn:hover{border-color:var(--fg-soft);}
.btn.primary{background:var(--green); border-color:var(--green); color:#fff;}
.btn.primary:hover{background:var(--green-700); border-color:var(--green-700);}
.btn.accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.accent:hover{opacity:.9}
.btn.ghost{border-color:transparent; background:transparent;}
.btn.ghost:hover{border-color:var(--rule); background:var(--card);}
.btn.danger{color:var(--accent); border-color:var(--accent-soft); background:var(--card);}
.btn.small{padding:7px 13px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
.btn-new .bn-plus, .btn-new svg{display:none;}
/* Stock */
.stk-badge{display:inline-block; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap;}
.stk-badge.low{background:var(--amber-soft); color:var(--amber);}
.stk-badge.out{background:var(--accent-soft); color:var(--accent);}
.qty-neg{color:var(--accent) !important;}
.ln-stock{display:flex; align-items:center; gap:6px; margin-top:5px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700);}
.ln-stock svg{flex:none;}
.ln-stock.warn{color:var(--amber); font-weight:600;}
.ln-unlink{all:unset; cursor:pointer; padding:1px 6px; color:var(--fg-soft); border-radius:6px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); margin-inline-start:2px;}
.ln-unlink:hover{background:var(--bg2); color:var(--fg);}
input.ln-locked{background:var(--bg2); color:var(--fg); cursor:default;}
.prod-suggest{position:fixed; z-index:90; background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.2); padding:5px; display:none; max-height:260px; overflow-y:auto; box-sizing:border-box;}
.prod-suggest.show{display:block;}
.ps-item{all:unset; box-sizing:border-box; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px;}
.ps-item:hover, .ps-item.active{background:var(--green-soft);}
.ps-main b{display:block; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg);}
.ps-main small{color:var(--fg-soft); font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px));}
.ps-side{text-align:end; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-family:var(--mono); white-space:nowrap; line-height:1.35;}
.stk-hero{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px;}
.stk-big{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(30px * var(--fs,1)), var(--fmin,0px)); font-weight:500; line-height:1.1;}
.stk-unit{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-family:var(--sans);}
.stk-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.stk-side{display:flex; flex-direction:column; gap:24px; align-self:start;}
.stk-top .stk-actions{margin-bottom:0;}
.stk-hist .stk-h{margin-top:0;}
@media (max-width:880px){ .stk-side{display:contents;} .stk-top{order:-2;} .stk-hist{order:-1;} }
.stk-h{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-transform:uppercase; letter-spacing:.3px; margin:4px 0 4px;}
.mv-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--rule); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.mv-t{font-weight:600;} .mv-s{color:var(--fg-soft); font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); margin-top:1px;}
.mv-q{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:500; white-space:nowrap;}
.mv-q.pos{color:var(--green-700);} .mv-q.neg{color:var(--accent);}
.mob-only{display:none;}
.dash-plus-wrap{position:relative;}
.dash-plus{padding:6px 18px; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); line-height:1; font-weight:500;}
.dash-plus-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:190px; background:var(--card); border:1px solid var(--rule); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:6px; z-index:60;}
.dash-plus-menu.open{display:block;}
.dash-plus-menu button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:11px; width:100%; padding:12px 12px; border-radius:10px; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg);}
.dash-plus-menu button svg{color:var(--green-700); flex:none;}
.dash-plus-menu button:active{background:var(--bg2);}
@media (max-width:640px){
  .desk-only{display:none !important;}
  .mob-only{display:block;}
  .btn-new{padding:10px 15px; gap:5px;}
  .btn-new .bn-label{display:none;}
  .btn-new .bn-plus{display:inline; font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px)); font-weight:600; line-height:1;}
  .btn-new svg{display:block; flex:none;}
  .totals-box{align-items:center;}
  .totals-box .row{min-width:min(100%, 300px);}
}
.btn[disabled]{opacity:.4; cursor:not-allowed;}

/* Cards / KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px;}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr 1fr;}
}
.kpis-dash .sh{display:none;}
@media (max-width:640px){
  .kpis.kpis-dash{grid-template-columns:repeat(4,1fr); gap:6px;}
  .kpis-dash .kpi{padding:9px 6px 8px; min-width:0;}
  .kpis-dash .kpi .label{font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); line-height:1.2; min-height:24px; margin-bottom:5px; font-weight:700;}
  .kpis-dash .kpi .value{font-size:clamp(9.5px, 3.05vw, 13px); white-space:nowrap; word-break:normal;}
  .kpis-dash .kpi .sub{font-size:max(calc(9px * var(--fs,1)), var(--fmin,0px)); margin-top:3px; line-height:1.2;}
  .kpis-dash .lg{display:none;}
  .kpis-dash .sh{display:inline;}
}
.kpi{background:var(--card); padding:18px 20px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--rule);}
.kpi .label{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-bottom:9px;}
.kpi .value{font-family:var(--num); font-weight:600; letter-spacing:-0.3px; font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700); white-space:nowrap; word-break:normal;}
.kpi .value.amber{color:var(--amber);}
.kpi .sub{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-top:4px;}

.section-title{display:flex; justify-content:space-between; align-items:center; margin:32px 0 12px;}
.section-title h2{font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-weight:500; text-transform:none;}

.filter-bar{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.filter-bar-2{gap:10px; justify-content:flex-start; margin-top:-6px;}
.filter-bar-2 select, .filter-bar-2 input[type="text"], .filter-bar-2 input[type="date"]{
  font-family:var(--sans); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 11px; border:1px solid var(--rule); border-radius:20px;
  background:var(--card); color:var(--fg);
}
.filter-bar-2 select{max-width:180px;}
.cat-dd, .prod-dd{position:relative;}
.prod-vars{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-btn{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); cursor:pointer;}
.cat-btn:focus-visible{outline:2px solid var(--green); outline-offset:-1px;}
.cat-btn .ph{color:var(--fg-soft);}
.cat-chev{color:var(--fg-soft); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
.cat-list{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:280px; overflow:auto;}
.cat-list[hidden]{display:none;}
.cat-opt{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
.cat-opt:hover{background:var(--bg2);}
.cat-opt.sel > span:first-child{font-weight:600;}
.cat-opt.sel > span:first-child::after{content:" ✓"; color:var(--green);}
.cat-n{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.cat-sep{height:1px; background:var(--rule); margin:4px 0;}
.cat-add{color:var(--fg-soft); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); justify-content:flex-start;}
.cat-pick .cat-new{display:none; align-items:center; gap:10px;}
.cat-pick.is-new .cat-new{display:flex;}
.cat-pick.is-new .cat-dd{display:none;}
.cat-new input{flex:1; min-width:0;}
.cat-back{all:unset; cursor:pointer; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); white-space:nowrap; padding:4px 2px; text-decoration:underline; text-underline-offset:2px;}
.cat-back:hover{color:var(--fg);}
.filter-bar select#stockCategory, .filter-bar select#stockDepot{font-family:var(--sans); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 11px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg); max-width:180px;}
.quote-filter-bar{justify-content:flex-start; gap:8px;}
.filter-bar select#quoteStatusFilter{font-family:var(--sans); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 11px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg); max-width:220px;}
.stock-filter-right{display:flex; align-items:center; gap:10px;}
@media (max-width:640px){
  .stock-filter-bar{justify-content:flex-start; gap:8px;}
  .stock-filter-right{display:contents;}
  .stock-filter-bar select#stockCategory, .stock-filter-bar select#stockDepot{order:1; flex:1 1 110px; min-width:0; max-width:none;}
  .stock-filter-bar #stockSearch{order:2; flex:1 1 100%; width:100%; min-width:0; box-sizing:border-box;}
}
.filter-bar-2 input[type="text"]{max-width:170px; min-width:0;}
.filter-bar-2 .date-range{display:flex; align-items:center; gap:6px;}
.filter-bar-2 input[type="date"]{max-width:135px;}

.list-stats{display:flex; gap:28px; margin:2px 0 18px; flex-wrap:wrap;}
.list-stats .stat{display:flex; flex-direction:column; gap:2px;}
.list-stats .stat-label{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-transform:uppercase; letter-spacing:.3px;}
.list-stats .stat-value{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:600; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700);}
.list-stats .stat-value.amber{color:var(--amber);}
.filter-pills{display:flex; gap:6px; flex-wrap:wrap;}
input[type="checkbox"]{accent-color:var(--green);}
.pill{all:unset; cursor:pointer; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:7px 14px; border-radius:20px; border:1px solid var(--rule); color:var(--fg-soft); background:var(--card);}
.pill:hover{color:var(--fg); border-color:var(--fg-soft);}
.pill.active{background:var(--green); border-color:var(--green); color:#fff; font-weight:500;}
.filter-bar input[type="text"]{
  font-family:var(--sans); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); padding:8px 14px; border:1px solid var(--rule); border-radius:20px;
  background:var(--card); color:var(--fg); min-width:270px;
}
.filter-bar input[type="text"]:focus{outline:2px solid var(--green); outline-offset:-1px;}

/* Ledger table */
table.ledger{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
table.ledger th{
  text-align:left; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--green);
}
table.ledger th.sortable{cursor:pointer; user-select:none; white-space:nowrap;}
table.ledger th.sortable:hover{color:#fff; opacity:.85;}
table.ledger td{padding:13px 16px; border-bottom:1px solid var(--rule); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px;}
table.ledger tbody tr:last-child td{border-bottom:none;}
table.ledger tbody tr{cursor:pointer;}
table.ledger tbody tr:hover{background:var(--green-soft);}
table.ledger td.num, table.ledger th.num{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; text-align:right;}
table.ledger td.mono, table.ledger th.mono{font-family:var(--mono); text-align:left; white-space:nowrap;}

.ledger-mobile-cards{display:none;}
.fac-card{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:13px 14px; margin-bottom:10px; cursor:pointer;}
.fac-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; gap:10px;}
.fac-card-number{font-family:var(--mono); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.fac-card-client{font-weight:600; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); margin-top:1px;}
.fac-card-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:8px; border-top:1px solid var(--rule); gap:10px;}
.fac-card-date{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fac-card-amount{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:600; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); text-align:right; flex:none;}
.fac-card-remaining{display:block; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-weight:400; margin-top:1px;}
.simple-card{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:13px 14px; margin-bottom:9px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.simple-card-title{font-weight:600; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px));}
.simple-card-subtitle{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-top:2px;}
.simple-card-right{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); flex:none; text-align:right;}
.team-list{background:var(--card); border:1px solid var(--rule); border-radius:12px; margin-bottom:20px; overflow:hidden;}
.team-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--rule);}
.team-row:last-child{border-bottom:none;}
.team-row-main{flex:1; min-width:0;}
.team-row-name{font-weight:600; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.team-row-email{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.team-row-controls{display:flex; align-items:center; gap:6px; flex:none;}
.team-row-controls select{padding:8px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--bg); color:var(--fg); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); max-width:108px;}
.team-row-role{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.team-row-remove{all:unset; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--accent); font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px));}
.team-row-remove:active{background:var(--accent-soft);}
.invite-row{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap;}
.invite-row input, .invite-row select{padding:8px 11px; border:1px solid var(--rule); border-radius:2px; background:var(--bg); color:var(--fg);}
.invite-row input{max-width:280px; flex:1 1 200px;}
@media (max-width:640px){
  .invite-row{flex-direction:column; gap:10px;}
  .invite-row input, .invite-row select, .invite-row .btn, .invite-row .btn.small{
    width:100%; max-width:none; height:46px; padding:0 14px; border-radius:8px; flex:none; box-sizing:border-box;
  }
  .invite-row input, .invite-row select{font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px));}
  .invite-row .btn, .invite-row .btn.small{display:flex; align-items:center; justify-content:center; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); font-weight:600;}
}
@media (max-width:640px){
  .ledger-mobile-cards{display:block;}
  table.ledger.ledger-desktop-only{display:none;}
}

/* CRM */
.view-toggle-crm{display:flex; background:var(--bg2); border-radius:20px; padding:3px; margin-left:auto;}
.view-toggle-crm button{all:unset; cursor:pointer; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; padding:7px 14px; border-radius:20px; color:var(--fg-soft);}
.view-toggle-crm button.active{background:var(--card); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.08);}
@media (max-width:640px){
  .view-toggle-crm{display:none;}
}
.crm-pill{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:600; padding:3px 10px; border-radius:20px; display:inline-block;}
.crm-pill-todo{background:var(--bg2); color:var(--fg-soft);}
.crm-pill-contacted{background:#E3E9F5; color:#2B4C9E;}
.crm-pill-discussing{background:var(--amber-soft,#FBE8D2); color:var(--amber,#A9791F);}
.crm-pill-proposal{background:var(--amber-soft,#FBE8D2); color:var(--amber,#A9791F);}
.crm-pill-won{background:var(--green-soft); color:var(--green-700);}
.crm-pill-lost{background:var(--bg2); color:var(--fg-soft); opacity:.7;}
.crm-board{display:flex; gap:14px; overflow-x:auto; align-items:flex-start; padding-bottom:8px;}
.crm-col{flex:none; width:230px; background:var(--bg2); border-radius:12px; padding:12px; max-height:calc(100vh - 280px); display:flex; flex-direction:column;}
.crm-col.drag-over{outline:2px dashed var(--green); outline-offset:-4px;}
.crm-col-head{display:flex; align-items:center; justify-content:space-between; padding:2px 4px 12px; flex:none;}
.crm-col-head span:first-child{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600;}
.crm-col-count{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); background:var(--card); border-radius:20px; padding:2px 8px;}
.crm-col-cards{display:flex; flex-direction:column; gap:10px; overflow-y:auto; min-height:30px;}
.crm-col-empty{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-align:center; padding:14px 4px;}
.crm-card{background:var(--card); border-radius:10px; padding:11px 12px; border:1px solid var(--rule); cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.04);}
.crm-card:active{cursor:grabbing;}
.crm-card.dragging{opacity:.4;}
.crm-card-name{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg);}
.crm-card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.crm-card-value{font-family:var(--serif); font-weight:500; color:var(--green-700); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}

/* Dashboard charts */
.dash-view-toggle{display:flex; background:var(--bg2); border-radius:20px; padding:3px; margin:4px 0 22px; width:fit-content;}
.dash-view-toggle button{all:unset; cursor:pointer; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; padding:8px 16px; border-radius:20px; color:var(--fg-soft); display:flex; align-items:center; gap:6px;}
.dash-view-toggle button.active{background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.08);}
.kpis-title{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--fg-soft); margin:-14px 0 8px;}
.kpis-title.kpis-title-first{margin:0 0 8px;}
.dash-ca-grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; align-items:start;}
.dash-ca-col{min-width:0;}
.dash-ca-col > .dash-sub-controls{min-height:40px; margin-bottom:12px;}
@media (max-width:760px){ .dash-ca-grid{grid-template-columns:1fr; gap:6px;} }
@media (min-width:761px){
  .dash-ca-grid{align-items:stretch;}
  .dash-ca-col{display:flex; flex-direction:column;}
  .dash-ca-col > .card{flex:1; display:flex; flex-direction:column; min-width:0;}
  .dash-ca-col > .dash-sub-controls{height:44px; min-height:0; margin-bottom:12px; align-items:center; flex-wrap:nowrap;}   /* the two choice rows have exactly the same height */
  #caClientCol .dash-card-head{display:block; min-height:62px;}     /* title, then the page arrows on their own line: the header is the same height with or without arrows */
  #caClientCol .list-pager{margin:8px 0 0; justify-content:flex-end;}
  .dash-ca-col .top-clients{min-height:216px;}                      /* room for 5 rows even with fewer clients: the card keeps its standard size */
  .dash-ca-col .tc-row{min-height:32px;}
  .dash-ca-col .tc-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}   /* a long name never makes the row (and the card) taller */
  .dash-ca-col .chart-scroll{flex:1; display:flex; flex-direction:column; min-height:0;}
  .dash-ca-col .chart-scroll .bar-chart{flex:1 1 auto; height:auto; min-height:170px;}   /* the bars use the height the card was given */
}
@media (min-width:761px){                                  /* 12 months beside the clients: narrower columns, no currency above each bar */
  .bar-chart.bar-chart-full.bar-chart-dense{gap:6px;}
  .bar-chart.bar-chart-full.bar-chart-dense .bar-col{min-width:30px;}
  .bar-chart-dense .dash-bar{width:100%; max-width:30px;}
  .bar-chart-dense .dash-bar-val{font-size:max(calc(9.5px * var(--fs,1)), var(--fmin,0px));}
  .bar-chart-dense .dv-c{display:none;}
  .bar-chart-dense .dash-bar-year{display:block;}
}
.bar-chart-years .dash-bar{max-width:64px;}
.dash-card-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin:0 0 16px;}
.dash-card-head .dash-card-title{margin:0;}
.list-pager{display:flex; align-items:center; gap:4px; margin-inline-start:auto;}
.pager-range{min-width:78px; text-align:center; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-variant-numeric:tabular-nums; white-space:nowrap;}
.pager-btn{all:unset; box-sizing:border-box; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--green-700); border:1px solid var(--rule); background:var(--card);}
.pager-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pager-btn:hover:not([disabled]){background:var(--green-soft); border-color:var(--green-700);}
.pager-btn:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.pager-btn[disabled]{opacity:.35; cursor:default;}
[dir="rtl"] .pager-btn svg{transform:scaleX(-1);}
@media (max-width:640px){ .pager-btn{width:34px; height:34px;} }
.kpis-suppliers{margin-bottom:22px;}
@media (max-width:560px){ #dashViewToggle{max-width:100%;} #dashViewToggle button{padding:8px 11px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); gap:5px;} }
@media (max-width:420px){ #dashViewToggle button svg{display:none;} }
.dash-sub-controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px;}
.dash-pill-group{display:flex; gap:6px;}
.dash-card-title{font-family:var(--serif); font-weight:500; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); margin:0 0 16px;}
.bar-chart{display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:22px; padding-bottom:4px;}
.bar-chart.bar-chart-full{overflow-x:auto; overflow-y:visible;}
.bar-chart.bar-chart-full .bar-col{min-width:44px;}
.chart-scroll .scroll-ind, .chart-scroll .scroll-hint{display:none;}
.chart-scroll.is-scrollable .scroll-ind{display:block; position:relative; height:5px; margin:12px 2px 0; border-radius:5px; background:var(--bg2);}
.chart-scroll .scroll-thumb{position:absolute; top:0; bottom:0; border-radius:5px; background:var(--green); transition:inset-inline-start .08s linear;}
.chart-scroll.is-scrollable .scroll-hint{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); white-space:nowrap;}
.chart-scroll .scroll-hint .arrow{font-weight:600; color:var(--green-700);}
.chart-scroll .scroll-hint .arrow::before{content:'‹ ';}
[dir="rtl"] .chart-scroll .scroll-hint .arrow::before{content:'› ';}
.chart-scroll .scroll-hint.at-oldest .arrow{visibility:hidden;}
.chart-scroll.is-scrollable .bar-chart-full{scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fl,0px), #000 calc(100% - var(--fr,0px)), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 var(--fl,0px), #000 calc(100% - var(--fr,0px)), transparent 100%);}
.chart-scroll.is-scrollable .bar-chart-full::-webkit-scrollbar{display:none;}
.chart-scroll .bar-col{scroll-snap-align:end;}
@media (max-width:640px){ .bar-chart.bar-chart-full{gap:8px;} .bar-chart.bar-chart-full .bar-col{min-width:40px;} .dash-bar-year{display:block;} }
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bar-wrap{width:100%; display:flex; align-items:flex-end; justify-content:center; flex:1;}
.dash-bar{width:60%; max-width:34px; border-radius:5px 5px 0 0; background:var(--green); position:relative;}
.dash-bar-val{position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg-soft); white-space:nowrap;}
.dash-bar-label{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); line-height:1.25; text-align:center; color:var(--fg-soft); white-space:nowrap;}
.dash-bar-year{opacity:.7;}
.top-clients{display:flex; flex-direction:column; gap:14px;}
.tc-row{display:grid; grid-template-columns:22px 1fr 90px; align-items:center; gap:12px;}
.tc-rank{font-family:var(--num); font-weight:500; font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-align:center;}
.tc-info{min-width:0;}
.tc-name{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; margin-bottom:5px;}
.tc-bar-track{height:6px; border-radius:4px; background:var(--bg2); overflow:hidden; display:flex;}
.tc-bar-fill{height:100%; background:var(--green);}
.tc-bar-fill.overdue{background:var(--amber);}
.tc-late-badge{display:inline-block; font-size:max(calc(9.5px * var(--fs,1)), var(--fmin,0px)); font-weight:700; color:var(--amber); background:var(--amber-soft); border-radius:20px; padding:1px 7px; margin-left:6px; vertical-align:middle;}
.tc-amount{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; text-align:right; white-space:nowrap;}
.tc-count{font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-align:right; margin-top:2px;}
.dash-charts-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;}
@media (max-width:640px){
  .dash-charts-row{grid-template-columns:1fr;}
}
@media (max-width:760px){ .dash-charts-row{grid-template-columns:1fr;} }
table.ledger td.nowrap{white-space:nowrap;}
.empty-row td{color:var(--fg-soft); text-align:center; padding:34px 12px; cursor:default;}
.empty-row td:hover{background:none;}

.badge{display:inline-block; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); padding:4px 11px; border-radius:20px; font-weight:600;}
.badge.draft{background:var(--bg2); color:var(--fg-soft); border:1px solid var(--rule);}
.badge.sent{background:var(--amber-soft); color:var(--amber);}
.badge.partial{background:#E3E9F5; color:#2B4C9E;}
.badge.cancelled{background:var(--bg2); color:var(--fg-soft);}
.badge.credit{background:var(--bg2); color:var(--fg-soft);}
.badge.accepted, .badge.paid{background:var(--green-soft); color:var(--green);}
.badge.toreimburse{background:var(--amber-soft); color:var(--amber);}
.badge.companypaid{background:#E3E9F5; color:#2B4C9E;}
.badge.reimbursed{background:var(--green-soft); color:var(--green);}
.badge.refused, .badge.overdue{background:var(--accent-soft); color:var(--accent);}

.locked-notice{
  background:var(--green); color:#fff; border:none; border-left:2.5px solid var(--green-700);
  border-radius:var(--radius-sm); padding:11px 14px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); margin-bottom:16px;
  display:flex; align-items:flex-start; gap:9px; line-height:1.5;
}
.locked-notice svg{flex:none; margin-top:2px; color:#fff;}

/* Editor layout */
.editor-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:flex-start;}
.card{background:var(--card); border:1px solid var(--rule); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.field{display:flex; flex-direction:column; gap:5px; min-width:0 !important;}
.field label{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
@media (max-width:640px){
  .editor-grid{grid-template-columns:1fr !important;}
  .field-row{grid-template-columns:1fr !important;}
}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); padding:9px 12px; border:1px solid var(--rule);
  border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); width:100% !important; max-width:100%;
}
.field input[type="date"]{
  min-width:0;
  -webkit-appearance:none; appearance:none;
  text-align:left;
}
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
/* Date fields (phone and computer): no « JJ/MM/AAAA » text, just a calendar icon; an empty field shows the icon alone.
   The class .is-empty is set by the script for every date field. Tapping anywhere on the field opens the calendar. */
input[type="date"]{
  position:relative; min-height:38px; box-sizing:border-box;
  padding-right:34px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235E7268' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.8v2.6M10.5 1.8v2.6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:16px 16px !important;
}
input[type="date"]::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:auto; height:auto; margin:0; padding:0; opacity:0; cursor:pointer;}
input[type="date"].is-empty, input[type="date"].is-empty::-webkit-datetime-edit{color:transparent;}
input[type="date"].is-empty:focus, input[type="date"].is-empty:focus::-webkit-datetime-edit{color:var(--fg);}
[dir="rtl"] input[type="date"]{padding-right:12px !important; padding-left:34px !important; background-position:left 10px center !important;}
@supports (-moz-appearance:none){ input[type="date"]{background-image:none !important; padding-right:11px !important;} [dir="rtl"] input[type="date"]{padding-left:11px !important;} }   /* Firefox draws its own icon */

.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--green); outline-offset:-1px;}
.field select.invalid, .field input.invalid{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.field textarea{resize:vertical; min-height:56px;}

.lines-table{width:100%; border-collapse:collapse; margin-top:6px;}
.lines-table th{font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-align:left; font-weight:600; text-transform:uppercase; letter-spacing:.3px; padding:0 6px 8px;}
.lines-table td{padding:5px 6px; vertical-align:top;}
.lines-table input{width:100%; padding:8px 10px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); font-family:var(--sans);}
.lines-table td.amt{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:500; text-align:right; padding-top:10px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); white-space:nowrap;}
.lines-table td.rm{width:26px; text-align:center;}
.lines-table td.rm button{all:unset; cursor:pointer; color:var(--fg-soft); font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); padding:4px;}
.lines-table td.rm button:hover{color:var(--accent);}
/* line editor: designation on its own row, then Qté / PU HT / TVA / Total on ONE row (fits the narrow form column and phones) */
.lines-table thead{display:none;}
.lines-table, .lines-table tbody{display:block; width:100%;}
.lines-table tr{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1.4fr) 26px; column-gap:8px; row-gap:6px; grid-template-areas:"desc desc desc desc rm" "qty pu tva total ."; border:1px solid var(--rule); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--card);}
.lines-table td{padding:0; display:block; position:relative; min-width:0;}
.lines-table td:nth-child(1){grid-area:desc;}
.lines-table td:nth-child(2){grid-area:qty;}
.lines-table td:nth-child(3){grid-area:pu;}
.lines-table td:nth-child(4){grid-area:tva;}
.lines-table td:nth-child(5){grid-area:total; text-align:right; align-self:start; padding:0 !important; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); line-height:34px; white-space:nowrap;}
.lines-table td:nth-child(6){grid-area:rm; text-align:center; align-self:start; padding-top:5px;}
.lines-table td[data-label]:not(:nth-child(1))::before{content:attr(data-label); display:block; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); line-height:1.2; color:var(--fg-soft); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px;}
.lines-table td:nth-child(5)::before{text-align:right;}
.lines-table input, .lines-table select{min-width:0;}
.lines-table input[type="number"]{text-align:right; padding:8px 7px; -moz-appearance:textfield; appearance:textfield;}
.lines-table input[type="number"]::-webkit-outer-spin-button, .lines-table input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.lines-table select{width:100%; padding:8px 6px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); font-family:var(--sans);}
.add-line{all:unset; cursor:pointer; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700); font-weight:500; margin-top:10px; display:inline-flex; align-items:center; gap:5px; border-bottom:1px solid var(--rule); padding-bottom:1px;}
.add-line:hover{border-color:var(--green-700);}
.draft-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin:0 0 14px; border:1px solid var(--rule); border-radius:10px; background:var(--bg2); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.draft-banner > span{flex:1 1 200px; min-width:0; font-weight:500;}
.stepper{position:relative; display:block;}
.stepper > input[type="number"]{width:100%; box-sizing:border-box; padding-right:26px; -moz-appearance:textfield; appearance:textfield;}
.stepper > input[type="number"]::-webkit-outer-spin-button, .stepper > input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.step-btns{position:absolute; top:1px; right:1px; bottom:1px; width:20px; display:flex; flex-direction:column; border-left:1px solid var(--rule); border-radius:0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; overflow:hidden; background:var(--bg2);}
.step-btn{all:unset; flex:1; display:flex; align-items:center; justify-content:center; color:var(--fg-soft); cursor:pointer; user-select:none; -webkit-user-select:none;}
.step-btn + .step-btn{border-top:1px solid var(--rule);}
.step-btn::before{content:''; border-left:4px solid transparent; border-right:4px solid transparent;}
.step-btn.up::before{border-bottom:5px solid currentColor;}
.step-btn.dn::before{border-top:5px solid currentColor;}
.step-btn:hover{background:var(--rule); color:var(--fg);}
.step-btn:active{background:var(--fg-soft); color:var(--bg);}
.stepper.disabled .step-btns{opacity:.4; pointer-events:none;}
.lines-table .stepper > input[type="number"]{padding:8px 24px 8px 6px;}
@media (max-width:640px){
  .lines-table tr{padding:10px; column-gap:6px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr) 24px; grid-template-areas:"desc desc desc rm" "qty pu tva ." "total total total .";}
  .lines-table td:nth-child(5){display:flex; justify-content:space-between; align-items:baseline; line-height:1.3; padding-top:2px !important;}
  .lines-table td:nth-child(5)::before{margin:0;}
  .step-btns{width:24px;}
  .lines-table .stepper > input[type="number"], .stepper > input[type="number"]{padding-right:28px;}
}

.totals-box{margin-top:18px; display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.totals-box .row{display:flex; gap:22px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); min-width:220px; width:max-content; max-width:100%; justify-content:space-between;}
.totals-box .row.grand{border-top:1px solid var(--rule); padding-top:9px; margin-top:5px; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); font-family:var(--serif); color:var(--green-700);}
.totals-box .row span:last-child{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:600;}

/* Invoice preview (print target) */
.preview-wrap{position:sticky; top:20px;}
.preview{background:#fff; color:#16241E; border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); --doc-accent:#0E3B2E; position:relative; overflow:hidden; padding:38px 34px 46px;}
.preview.no-bottom-band{padding-bottom:38px;}
.preview::after{content:''; position:absolute; left:0; right:0; bottom:0; height:7px; background:var(--doc-accent);}
.preview.no-bottom-band::after{display:none;}
.preview .p-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:40px;}
.preview .p-head img{max-width:130px; max-height:60px; object-fit:contain;}
.preview .p-head > div:first-child{font-family:var(--serif); font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px));}
.preview.doc-font-sans .p-head > div:first-child{font-family:var(--sans); font-weight:600; font-size:max(calc(17px * var(--fs,1)), var(--fmin,0px));}
.preview .p-head .doc-type{text-align:right;}
.preview .p-head .doc-type .kind{font-family:var(--serif); font-style:italic; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); color:var(--doc-accent);}
.preview .p-head .doc-type .num{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:#5E7268; margin-top:2px; font-family:var(--mono);}
.preview .p-parties{display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:#333;}
.preview .p-parties .block{max-width:48%;}
.preview .p-parties .lbl{font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); color:#8a8f79; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}
.preview .p-meta-box{border-top:1px solid #E7E0CB; border-bottom:1px solid #E7E0CB; padding:9px 0; margin-bottom:48px; display:flex; flex-direction:column; gap:8px;}
.preview .p-meta{display:flex; flex-wrap:wrap; gap:8px 26px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#16241E;}
.preview .p-meta2{display:flex; flex-direction:column; gap:4px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#16241E;}
.preview table.p-lines{width:100%; border-collapse:collapse; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); margin-bottom:14px;}
.preview table.p-lines th{text-align:left; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); text-transform:uppercase; letter-spacing:.3px; color:#8a8f79; padding:0 6px 7px; border-bottom:1.5px solid var(--doc-accent);}
.preview table.p-lines td{padding:15px 6px; border-bottom:1px solid #EFE9D8;}
.preview table.p-lines td.num, .preview table.p-lines th.num{text-align:right; font-family:var(--num); font-variant-numeric:lining-nums tabular-nums;}
  .preview table.p-lines td.num{font-weight:500;}
  .preview.doc-font-mono table.p-lines td.num, .preview.doc-font-mono table.p-lines th.num{font-family:var(--mono);}
.preview .p-totals{display:flex; justify-content:flex-end;}
.preview .p-totals .box{min-width:220px; width:auto;}
.preview .p-totals .row{display:flex; justify-content:space-between; gap:16px; white-space:nowrap; padding:4px 0; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
.preview .p-totals .row.grand{border-top:1px solid var(--doc-accent); margin-top:4px; padding-top:9px; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); font-family:var(--serif); color:var(--doc-accent);}
.preview .p-foot{margin-top:26px; padding-top:14px; border-top:1px solid #E7E0CB; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); color:#8a8f79; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.preview .p-foot .p-legal{max-width:480px; line-height:1.5;}
.preview .p-notes{margin-top:16px; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:#5E7268; white-space:pre-wrap;}
.preview .p-signature{margin-top:38px; display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.preview .p-signature img{max-width:190px; max-height:85px; object-fit:contain;}
/* Font variants */
.preview.doc-font-sans .p-head .doc-type .kind{font-family:var(--sans); font-style:normal; font-weight:700; letter-spacing:-.2px;}
.preview.doc-font-sans .p-totals .row.grand{font-family:var(--sans); font-weight:700;}
.preview.doc-font-mono .p-head .doc-type .kind{font-family:var(--mono); font-style:normal; font-weight:600; font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px)); letter-spacing:.2px; text-transform:uppercase;}
.preview.doc-font-mono .p-totals .row.grand{font-family:var(--mono); font-weight:600;}
.preview.doc-font-mono .p-head > div:first-child{font-family:var(--mono); font-weight:600; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); letter-spacing:.2px; text-transform:uppercase;}
/* Layout variant: band (accent header band) */
.preview.doc-layout-modern{padding-top:0;}
.preview.doc-layout-modern .p-head{
  background:var(--doc-accent); margin:0 -34px 28px; padding:30px 34px 22px;
  color:#fff; align-items:center;
}
.preview.doc-layout-modern .p-head .doc-type .kind{color:#fff;}
.preview.doc-layout-modern .p-head .doc-type .num{color:rgba(255,255,255,.75);}
.preview.doc-layout-modern .p-head > div:first-child{color:#fff; font-family:var(--serif); font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px));}
.preview.doc-layout-modern.doc-font-sans .p-head > div:first-child{font-family:var(--sans); font-weight:700;}
.preview.doc-layout-modern.doc-font-mono .p-head > div:first-child{font-family:var(--mono); font-weight:600; text-transform:uppercase; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
.preview.doc-layout-modern table.p-lines th{border-bottom-width:2px;}
.preview.doc-layout-modern .p-totals .box{background:color-mix(in srgb, var(--doc-accent) 7%, transparent); border-radius:8px; padding:10px 14px;}
/* Layout variant: minimal — no boxed meta bar, generous air, understated table/totals, same title as classic */
.preview.doc-layout-minimal{padding:56px 50px;}
.preview.doc-layout-minimal .p-head{margin-bottom:46px;}
.preview.doc-layout-minimal .p-parties{margin-bottom:34px;}
.preview.doc-layout-minimal .p-meta-box{border:none; padding:0; margin-bottom:46px; gap:10px;}
.preview.doc-layout-minimal .p-meta, .preview.doc-layout-minimal .p-meta2{color:#16241E;}
.preview.doc-layout-minimal table.p-lines{margin-bottom:22px;}
.preview.doc-layout-minimal table.p-lines th{border-bottom:1px solid #E5E2D6; color:#B4B0A2; font-weight:500; letter-spacing:.2px;}
.preview.doc-layout-minimal table.p-lines td{border-bottom:1px solid #F5F3EA; padding:17px 6px;}
.preview.doc-layout-minimal .p-totals .box{width:200px;}
.preview.doc-layout-minimal .p-totals .row{color:#8a8f79;}
.preview.doc-layout-minimal .p-totals .row.grand{
  border-top:1px solid #E5E2D6; background:none; padding-top:12px; margin-top:6px;
  font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); font-family:var(--sans) !important; font-weight:700; color:#16241E !important;
}
.preview.doc-layout-minimal .p-totals .row.grand span:last-child{color:var(--doc-accent);}
.preview.doc-layout-minimal .p-foot{border-color:#F0EEE4; margin-top:40px;}
.preview.doc-layout-minimal::after{height:3px;}
/* Issuer / recipient labels: bold, on every layout */
.preview .p-parties .lbl{font-weight:700;}

/* Settings */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.logo-drop{border:1.5px dashed var(--rule); padding:20px; text-align:center; border-radius:var(--radius-sm); cursor:pointer;}
.logo-drop:hover{border-color:var(--green-700);}
.logo-drop img{max-width:160px; max-height:70px; object-fit:contain; margin-bottom:8px;}
.logo-drop .hint{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.rate-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.rate-pill{background:var(--bg2); border:1px solid var(--rule); border-radius:20px; padding:5px 8px 5px 12px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); display:flex; align-items:center; gap:6px; font-family:var(--mono);}
.rate-pill button{all:unset; cursor:pointer; color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.rate-pill button:hover{color:var(--accent);}
.rate-pill.default{border-color:var(--green); background:var(--green-soft); font-weight:500; color:var(--green-700);}
.order-row{display:flex; align-items:center; gap:14px; background:var(--bg2); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:8px 12px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.order-row .mono:first-child{flex:1;}
.order-row button{all:unset; cursor:pointer; color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.order-row button:hover{color:var(--accent);}

/* Clients */
.client-editor{max-width:520px;}

/* Toast */
#toast{position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px); background:var(--green); color:#fff; padding:11px 20px; border-radius:24px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:80; box-shadow:var(--shadow);}
#toast.show{opacity:1; transform:translate(-50%,0);}

/* Modal (confirm) */
.modal-bg{position:fixed; inset:0; background:rgba(14,20,17,.45); display:none; align-items:center; justify-content:center; z-index:70; padding:16px;}
.modal-bg.show{display:flex;}
.modal{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:22px; max-width:360px; width:100%; box-shadow:var(--shadow);}
@media (max-width:640px){
  #factureQuickBg, #supplierInvoiceQuickBg, #stockMoveBg{ align-items:flex-start; padding-top:20vh; }
  #factureQuickModal, #supplierInvoiceQuickModal{
    max-width:340px; width:100%;
    animation:popIn .2s ease-out;
  }
  @keyframes popIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
}
.modal h3{font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); margin-bottom:8px;}
.modal p{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin:0 0 18px;}
.modal .row{display:flex; justify-content:flex-end; gap:10px;}

.pdf-modal-bg{position:fixed; inset:0; background:rgba(14,20,17,.55); display:none; align-items:center; justify-content:center; z-index:75; padding:20px;}
.pdf-modal-bg.show{display:flex;}
.pdf-modal{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); width:min(820px, 100%); height:min(90vh, 900px); display:flex; flex-direction:column; overflow:hidden;}
.pdf-modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--rule); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
.pdf-modal iframe{flex:1; border:none; background:#525659; width:100%;}

/* ---------- Mobile top bar + bottom tab bar (≤880px) ---------- */
.mobile-top, .mobile-tabbar, .m-overlay, .m-pop{display:none;}
.mobile-top{align-items:center; gap:8px; padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px; min-height:54px; background:var(--bg); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:55;}
.mobile-top .org-switcher{flex:1; min-width:0; margin:0;}
.mobile-top .company-chip{color:var(--fg); padding:6px 6px; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
.mobile-top .company-chip:hover{background:var(--bg2);}
.mobile-top .company-chip .caret{color:var(--fg-soft);}
.mobile-top .company-chip.cta{border-color:var(--green); color:var(--green-700);}
.mobile-top .company-chip.cta:hover{background:var(--green-soft);}
.mobile-top .company-chip.cta .caret{color:var(--green-700);}
.mobile-top .org-switcher-menu{right:auto; min-width:240px; width:max-content; max-width:calc(100vw - 24px);}
.m-org-slot{flex:1; min-width:0; display:flex;}
.m-back{all:unset; display:none; cursor:pointer; align-items:center; gap:6px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green-700); padding:6px 4px;}
.mobile-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--green); padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); grid-template-columns:repeat(5,1fr);}
.m-tab{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:rgba(255,255,255,.9); padding:7px 0 6px; border-radius:13px; margin:0 3px; min-width:0;}
.m-tab svg{flex:none;}
.m-tab span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.m-tab.active{background:var(--paper); color:var(--green-700); font-weight:700;}
.m-overlay{position:fixed; inset:0; background:rgba(14,20,17,.35); z-index:48;}
.m-pop{position:fixed; background:var(--card); border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.22); padding:8px; z-index:52; max-height:70vh; overflow-y:auto;}
.m-pop.bottom{left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom,0px));}
.m-pl{font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); text-transform:uppercase; letter-spacing:.5px; color:var(--fg-soft); font-weight:700; padding:8px 10px 4px;}
.m-pi{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; width:100%; padding:12px; border-radius:10px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg);}
.m-pi svg{color:var(--green-700); flex:none;}
.m-pi:active{background:var(--bg2);}
.m-pi.active{background:var(--green-soft); font-weight:700; color:var(--green-700);}
.m-pi.danger, .m-pi.danger svg{color:var(--accent);}
.m-psep{height:1px; background:var(--rule); margin:6px 4px;}
.m-uhead{display:flex; align-items:center; gap:10px; padding:8px 10px 10px;}
.m-uhead .av{width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:700; flex:none;}
.m-uhead .n{font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); font-weight:700;}
.m-uhead .e{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); word-break:break-all;}

@media (max-width: 880px){
  .sidebar{position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .2s; width:270px;}
  .sidebar.open{transform:translateX(0); box-shadow:2px 0 18px rgba(0,0,0,.25);}
  .hamburger{display:flex; align-items:center; gap:8px; all:unset; cursor:pointer; padding:9px 12px; border:1px solid var(--rule); border-radius:6px; margin-bottom:16px; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); font-weight:600;}
  .sidebar{display:none !important;}
  .hamburger{display:none !important;}
  #app{flex-direction:column;}
  .mobile-top{display:flex;}
  .mobile-tabbar{display:grid;}
  .m-overlay.show, .m-pop.show{display:block;}
  main{padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px));}
  body.m-detail main{padding-bottom:40px;}
  body.m-detail .mobile-tabbar, body.kbd-open .mobile-tabbar{display:none;}
  body.m-detail .m-org-slot{display:none;}
  body.m-detail .m-back{display:flex;}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));}
  nav.mainnav button{padding:12px 13px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); gap:12px;}
  nav.mainnav button svg{width:17px; height:17px;}
  nav.mainnav .nav-sub button{padding:11px 12px; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
  .editor-grid{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
  .settings-grid{grid-template-columns:1fr;}
  .doc-appearance-layout{grid-template-columns:1fr !important;}
  .preview-wrap{position:static;}
}



/* ---- desktop menu on short windows (laptops, zoomed browsers): the whole menu fits; if not, fades show it goes on ---- */
nav.mainnav{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--nt,0px), #000 calc(100% - var(--nb,0px)), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 var(--nt,0px), #000 calc(100% - var(--nb,0px)), transparent 100%);}
@media (max-height:820px){
  .sidebar{padding:14px 12px 10px; gap:8px;}
  #sidebarBrand .brand-logo{height:30px;}
  .company-chip{padding:6px 8px;}
  nav.mainnav{gap:1px;}
  nav.mainnav button{padding:8px 12px; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
  nav.mainnav .nav-sub button{padding:6px 11px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
  .nav-sep{margin:4px 4px;}
  .sidebar-foot{gap:6px; padding-top:8px;}
  .user-block{padding:2px 4px 0;}
  .theme-toggle{padding:5px 10px;}
}
@media (max-height:690px){
  .sidebar{padding:10px 12px 8px; gap:6px;}
  #sidebarBrand .brand-logo{height:24px;}
  .company-chip{padding:4px 8px;}
  nav.mainnav button{padding:6px 11px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); gap:9px;}
  nav.mainnav .nav-sub button{padding:5px 10px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
  .nav-sep{margin:3px 4px;}
  .app-version{display:none;}
}
@media (max-height:600px){
  .sidebar{padding:8px 12px 6px; gap:4px;}
  #sidebarBrand .brand-logo{height:21px;}
  nav.mainnav button{padding:5px 10px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
  nav.mainnav .nav-sub button{padding:4px 10px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
  .user-block .user-avatar{width:26px; height:26px; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px));}
}

/* ---- pagination bar under the long tables ---- */
.table-pager{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px 16px; margin-top:16px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.tp-range{font-variant-numeric:tabular-nums; white-space:nowrap;}
.tp-range{grid-column:1; justify-self:start;}
.tp-nav{grid-column:2; justify-self:center; display:flex; align-items:center; gap:4px;}
.tp-nums{display:flex; align-items:center; gap:2px;}
.tp-num{all:unset; box-sizing:border-box; cursor:pointer; min-width:30px; height:30px; padding:0 6px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg); font-variant-numeric:tabular-nums;}
.tp-num:hover{background:var(--bg2);}
.tp-num.active{background:var(--green); color:#fff; font-weight:600; cursor:default;}
.tp-num:focus-visible, .tp-arrow:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.tp-gap{min-width:18px; text-align:center;}
.tp-arrow{all:unset; box-sizing:border-box; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--green-700); border:1px solid var(--rule); background:var(--card);}
.tp-arrow svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.tp-arrow:hover:not([disabled]){background:var(--green-soft); border-color:var(--green-700);}
.tp-arrow[disabled]{opacity:.35; cursor:default;}
[dir="rtl"] .tp-arrow svg{transform:scaleX(-1);}
.tp-compact{display:none; min-width:56px; text-align:center; font-variant-numeric:tabular-nums;}
.tp-size{grid-column:3; justify-self:end; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.tp-size select{font-family:var(--sans); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:5px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--card); color:var(--fg);}
@media (max-width:880px){                                  /* phone / small tablet: bottom tab bar layout */
  .table-pager{grid-template-columns:1fr; justify-items:center; gap:10px; margin:22px 0 72px;}   /* arrows in the middle; room under them: a thumb aiming at them never lands on the tab bar */
  .tp-nav{grid-column:1; grid-row:1; gap:28px;}
  .tp-range{grid-column:1; grid-row:2; justify-self:center; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
  .tp-compact{display:inline; min-width:56px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
  .tp-arrow{width:44px; height:44px;}
}

/* ---- kanban columns: 5 cards per page ---- */
.col-pager{display:flex; align-items:center; justify-content:center; gap:6px; margin:-6px 0 10px; flex:none; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.col-pager .pager-btn{width:24px; height:24px;}
.col-pager .pager-btn svg{width:12px; height:12px;}
.col-pager .cp-range{min-width:78px; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---- Arabic: a real Arabic typeface, larger sizes, joined letters, no fake italics ---- */
html[lang="ar"]{
  --sans:'Cairo','Noto Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif;
  --serif:'Cairo','Noto Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif;
  --fs:1.15;              /* every text size x1.15: Arabic letters are drawn smaller than Latin ones at the same size */
  --fmin:12.5px;          /* and nothing smaller than 12.5px: small Arabic text is unreadable */
}
#landingScreen, #authScreen, #verifyScreen, #bootLoader, html[lang="ar"] .preview{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --fs:1; --fmin:0px;     /* Latin-only screens and the printed-document preview are not scaled */
}
#landingScreen, #authScreen, #verifyScreen, #bootLoader{ font-family:var(--sans); font-size:14.5px; }   /* re-resolve the base font: it would otherwise be inherited, already computed, from the Arabic body */
:where(html[lang="ar"]) .preview{ font-family:var(--sans); }                                            /* the document preview keeps its Latin font (a chosen document font still wins: higher specificity) */
html[lang="ar"] table.ledger{ --fs:1.08; }                                                          /* dense tables: +8% instead of +15%, so the wide tables still fit */
html[lang="ar"] table.ledger th, html[lang="ar"] table.ledger td{ padding-inline:11px; }              /* and tighter cells */
html[lang="ar"] body > :not(#landingScreen):not(#authScreen):not(#verifyScreen):not(#bootLoader) *:not(.preview):not(.preview *){ letter-spacing:0 !important; }   /* spacing between letters breaks Arabic joining */
html[lang="ar"] body > :not(#landingScreen):not(#authScreen):not(#verifyScreen):not(#bootLoader) em{ font-style:normal; }              /* Arabic has no italics: the browser would just slant it */

/* ---- language switch (landing header + sign-in screen): FR | EN, the current language in colour ---- */
.ld-lang{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--rule); border-radius:999px; background:var(--card);}
.ld-lang button{all:unset; box-sizing:border-box; cursor:pointer; padding:5px 12px; border-radius:999px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; line-height:1.2; color:var(--fg-soft);}
.ld-lang button:hover{color:var(--fg);}
.ld-lang button.active{background:var(--green); color:#fff; cursor:default;}
.ld-lang button:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
#authScreen{position:relative; padding-top:68px;}      /* room for the language switch above the card, even on short screens */
.auth-lang-top{position:absolute; top:16px; right:16px; z-index:2;}
@media (max-width:520px){ .landing-header-actions{gap:10px;} .ld-lang button{padding:4px 10px;} }
@media (max-width:420px){                                  /* logo + FR|EN switch + sign-in button must fit on one line on small phones */
  .landing-header .brand-logo{ height:33px; }
  .landing-header.scrolled .brand-logo{ height:26px; }
  .landing-header-actions{ gap:8px; }
  .ld-lang button{ padding:4px 8px; }
  .landing-header-actions .btn{ padding:8px 12px; }
}
@media (max-width:340px){
  .landing-header .brand-logo{ height:30px; }
  .landing-header.scrolled .brand-logo{ height:24px; }
  .landing-header-actions .btn{ padding:7px 10px; }
}

/* ---- supplier invoice editor: reading card, form, and the preview of the document (on the right on a computer) ---- */
.si-layout{ display:grid; grid-template-columns:minmax(0,520px) minmax(320px,1fr); grid-template-areas:"ocr prev" "form prev"; column-gap:26px; align-items:start; }
.si-ocr{ grid-area:ocr; } .si-form{ grid-area:form; min-width:0; } .si-preview{ grid-area:prev; }
.ocr-card{ border:1px dashed var(--rule); background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:16px; }
.ocr-card.drag, .si-preview.drag{ border-color:var(--green); background:var(--green-soft); }
.ocr-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ocr-types{ font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); }
.ocr-body{ margin-top:10px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); }
.ocr-body:empty{ display:none; }
.ocr-meta{ color:var(--fg-soft); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); margin-bottom:2px; }
.ocr-bar{ height:6px; background:var(--rule); border-radius:99px; overflow:hidden; }
.ocr-bar i{ display:block; height:100%; width:0; background:var(--green); transition:width .2s; }
.ocr-status{ margin-top:6px; color:var(--fg-soft); }
.ocr-spin{ display:inline-block; width:12px; height:12px; border:2px solid var(--rule); border-top-color:var(--green); border-radius:50%; animation:ocrspin .8s linear infinite; vertical-align:-2px; margin-inline-end:6px; }
@keyframes ocrspin{ to{ transform:rotate(360deg); } }
.ocr-msg{ padding:7px 10px; border-radius:9px; margin-top:6px; }
.ocr-msg.ok{ background:var(--green-soft); color:var(--green); }
.ocr-msg.warn{ background:var(--amber-soft); color:var(--amber); }
.ocr-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.ocr-newsup{ margin-top:6px; padding:8px 10px; border-radius:9px; background:var(--amber-soft); color:var(--amber); }
.ocr-newsup-row{ display:flex; gap:8px; margin-top:6px; }
.ocr-newsup-row input{ flex:1; min-width:0; padding:7px 10px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--card); color:var(--fg); font:inherit; }
button.linklike{ all:unset; cursor:pointer; color:var(--fg-soft); text-decoration:underline; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); }
button.linklike:hover{ color:var(--green); }
input.ocr-check, select.ocr-check, textarea.ocr-check{ border-color:#e0a100 !important; background:#fffaf0 !important; }
.si-preview{ position:sticky; top:16px; display:flex; flex-direction:column; max-height:calc(100vh - 32px); border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); overflow:hidden; }
.si-prev-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--rule); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); }
.si-prev-name{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.si-prev-name.muted{ color:var(--fg-soft); font-weight:500; }
.si-prev-badge{ font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); padding:2px 8px; border-radius:99px; background:var(--green-soft); color:var(--green); white-space:nowrap; }
.si-prev-badge.warn{ background:var(--amber-soft); color:var(--amber); }
.si-prev-body{ overflow:auto; background:var(--bg2); padding:12px; min-height:280px; flex:1; }
.si-prev-img{ display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 1px 4px rgba(14,59,46,.18); cursor:zoom-in; background:#fff; }
.si-prev-pages{ cursor:zoom-in; }
.si-prev-page{ display:block; width:100%; height:auto; margin-bottom:10px; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(14,59,46,.18); }
.si-prev-page:last-child{ margin-bottom:0; }
.si-prev-loading{ display:flex; align-items:center; justify-content:center; min-height:200px; }
.si-prev-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:240px; color:var(--fg-soft); text-align:center; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); }
.si-prev-fname{ font-weight:600; color:var(--fg); word-break:break-all; }
@media (max-width:880px){
  .si-layout{ grid-template-columns:minmax(0,1fr); grid-template-areas:"ocr" "prev" "form"; }
  .si-preview{ position:static; max-height:none; margin-bottom:16px; }
  .si-preview.empty{ display:none; }
  .si-prev-body{ max-height:300px; min-height:0; }
}
@media (max-width:520px){ .ocr-newsup-row{ flex-direction:column; } .ocr-newsup-row .btn{ align-self:flex-start; } }
.ocr-near{ margin-top:8px; padding-top:6px; border-top:1px dashed var(--amber); }
.ocr-near-only{ padding:2px 0; }
.ocr-msg .ocr-near{ border-top-color:var(--green); }
.ocr-chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); }
.ocr-chip{ all:unset; cursor:pointer; padding:3px 10px; border-radius:99px; border:1px solid var(--rule); background:var(--card); color:var(--fg); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocr-chip:hover{ border-color:var(--green); color:var(--green); }
.ocr-msg .ocr-newsup-row input{ color:var(--fg); }
/* ---- photo crop (mobile) ---- */
.crop-ui{position:fixed; inset:0; z-index:300; background:#111; display:flex; flex-direction:column; color:#fff; touch-action:none; -webkit-user-select:none; user-select:none;}
.crop-hint{flex:none; padding:10px 14px 6px; font-size:13px; text-align:center; opacity:.85; padding-top:max(10px, env(safe-area-inset-top, 0px));}
.crop-stage{flex:1; min-height:0; position:relative;}
.crop-stage canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block;}
.crop-bar{flex:none; display:flex; gap:8px; padding:10px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom, 0px)); background:#1c1c1c;}
.crop-bar .btn{flex:1; justify-content:center; text-align:center;}

/* ---- phone lists: essentials first; filters behind « Filtrer », export / tick rows behind « ⋯ » (invoices, supplier invoices, expense reports) ---- */
.more-toggle, .more-menu-wrap, .more-chip, .mob-selbar, .mob-tick, .more-head, .more-done, .mob-lbl, .period-chips, .dr-lbl{display:none;}
.more-panel{display:contents;}
.dr-field{display:contents;}
.fac-card-txt{min-width:0;}
.more-menu .mi-sheet::before, .more-menu .mi-ticks::before{content:''; flex:none; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:20px;}
.more-menu .mi-sheet::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23122B22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='2'/%3E%3Cpath d='M3 8h14M8 8v9'/%3E%3C/svg%3E");}
.more-menu .mi-ticks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23122B22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5l1.6 1.6L7.6 4M3 11l1.6 1.6L7.6 9.5M3 16.5l1.6 1.6 3-3.1M11 6h6M11 12h6M11 17h6'/%3E%3C/svg%3E");}
@media (max-width:640px){
  .list-ctl{display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
  .list-ctl > .filter-bar{display:contents;}
  .list-ctl .filter-search-row{order:1; width:100%; align-items:center;}
  .list-ctl .more-panel{order:2;}
  .list-ctl .more-chip.on{order:3;}
  .list-ctl .filter-pills{order:4;}
  .list-ctl .mob-selbar.on{order:5;}
  .list-ctl .filter-search-row input[type="text"]{flex:1 1 auto; min-width:0; max-width:none; height:44px; box-sizing:border-box; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px));}
  .list-ctl .filter-pills{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; max-width:100%; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .list-ctl .filter-pills::-webkit-scrollbar{display:none;}
  .list-ctl .filter-pills .pill{flex:none; display:inline-flex; align-items:center; height:38px; box-sizing:border-box; padding:0 16px;}
  /* « Filtrer » button (with the number of active filters) and « ⋯ » */
  .more-toggle{position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:44px; box-sizing:border-box; padding:0 15px; border-radius:24px; background:var(--card);}
  .more-toggle.open{background:var(--green-soft); border-color:var(--green); color:var(--green);}
  .more-badge{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; line-height:18px; text-align:center;}
  .more-badge:empty{display:none;}
  .more-menu-wrap{position:relative; flex:none; display:block;}
  .more-dots{width:44px; height:44px; box-sizing:border-box; padding:0; border-radius:50%; justify-content:center; background:var(--card);}
  .more-dots.open{background:var(--green-soft); border-color:var(--green); color:var(--green);}
  .more-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:236px; padding:6px; box-sizing:border-box; background:var(--card); border:1px solid var(--rule); border-radius:16px; box-shadow:0 10px 30px rgba(14,59,46,.16);}
  .more-menu.open{display:block;}
  [dir="rtl"] .more-menu{right:auto; left:0;}
  .more-menu button{all:unset; box-sizing:border-box; width:100%; min-height:48px; display:flex; align-items:center; gap:12px; padding:0 12px; border-radius:10px; cursor:pointer; color:var(--fg); font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
  .more-menu button:active{background:var(--bg2);}
  /* the panel */
  .more-panel{display:none;}
  .more-panel.open{display:block; background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:14px 16px 16px; box-shadow:0 8px 24px rgba(14,59,46,.09);}
  .more-head{display:flex; align-items:center; justify-content:space-between; min-height:32px;}
  .more-title{font-family:var(--serif); font-size:max(calc(19px * var(--fs,1)), var(--fmin,0px)); color:var(--fg);}
  .more-reset{all:unset; display:none; box-sizing:border-box; cursor:pointer; height:44px; margin:-6px -8px -6px 0; padding:0 8px; align-items:center; color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); text-decoration:underline; text-underline-offset:3px;}
  .more-reset.on{display:inline-flex;}
  .more-panel .filter-bar.filter-bar-2{display:block; margin:0;}
  .mob-lbl{display:block; margin:12px 0 6px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg-soft);}
  .more-panel .filter-bar-2 select{display:block; width:100%; max-width:none; height:46px; box-sizing:border-box; border-radius:12px; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px));}
  .period-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .period-chip{all:unset; box-sizing:border-box; cursor:pointer; height:40px; display:inline-flex; align-items:center; padding:0 15px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
  .period-chip.on{background:var(--green-soft); border-color:var(--green); color:var(--green); font-weight:500;}
  .more-panel .filter-bar-2 .date-range{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px;}
  .more-panel .filter-bar-2 .dr-arrow{display:none;}
  .more-panel .filter-bar-2 .dr-field{display:block; min-width:0; max-width:100%; overflow:hidden;}
  .more-panel .filter-bar-2 .dr-lbl{display:block; margin-bottom:5px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
  .more-panel .filter-bar-2 input[type="date"]{-webkit-appearance:none; appearance:none; display:block; box-sizing:border-box; width:0; min-width:100%; max-width:100%; inline-size:0; min-inline-size:100%; margin:0; height:44px; border-radius:12px; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px));}
  .more-panel .filter-bar-2 input[type="date"]::-webkit-date-and-time-value{min-width:0; text-align:left;}
  .more-panel .filter-bar-2 input[type="date"]::-webkit-datetime-edit{min-width:0; padding:0;}
  .more-panel .filter-bar-2 .btn.ghost{display:none;}
  .more-done{all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; height:48px; margin-top:18px; border-radius:26px; background:var(--green); color:#fff; text-align:center; line-height:48px; font-size:max(calc(14.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
  /* summary of the hidden filters, when the panel is closed */
  .more-chip.on{display:flex; align-items:center;}
  .more-chip-text{min-width:0; max-width:100%; display:inline-flex; align-items:center; gap:2px; box-sizing:border-box; height:36px; padding:0 6px 0 14px; border-radius:20px; background:var(--green-soft); color:var(--green); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
  .more-chip-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .more-chip-x{all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--green);}
  /* selection mode */
  .mob-selbar.on{display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:var(--card); border:1px solid var(--green); border-radius:14px; padding:10px 12px;}
  .mob-selcount{flex:1 1 100%; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green);}
  .mob-selbar .btn{height:40px; box-sizing:border-box; flex:1 1 auto; justify-content:center;}
  .fac-card.selecting .fac-card-top{gap:10px;}
  .fac-card.selecting .fac-card-txt{flex:1 1 auto;}
  .fac-card.selecting .mob-tick{display:block; flex:none; width:16px; height:16px; box-sizing:border-box; margin-top:1px; border:1.5px solid #9C9275; border-radius:5px; background:var(--card);}
  .fac-card.selecting.sel{border-color:var(--green); background:var(--green-soft);}
  .fac-card.selecting.sel .mob-tick{border-color:var(--green); background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;}
}

/* iPhone / iPad (Safari and every browser built on it): a date field keeps its natural width unless told otherwise */
input[type="date"]{max-width:100%;}
input[type="date"]::-webkit-date-and-time-value{min-width:0;}

/* Close button of the popups (prospect, client, supplier): a round button, in the green of the site */
.modal-x{all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:36px; height:36px; margin:-6px -8px 0 0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--green); transition:background .12s;}
.modal-x:hover{background:var(--green-soft);}
.modal-x:active{background:var(--green-soft);}
.modal-x:focus-visible{outline:2px solid var(--green); outline-offset:1px;}

/* ---- Treasury (cash + bank) ---- */
.tz-kpis{margin-bottom:14px;}
.kpi .value.neg, .tz-mono.neg, .tz-acc-bal.neg{color:var(--accent);}
.tz-grid2{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:14px; margin-top:14px; align-items:start;}
.tz-grid2.b{grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);}
.tz-grid2.fc{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
.tz-card{padding:18px 20px;}
.tz-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.tz-card-title{font-family:var(--serif); font-size:max(calc(18px * var(--fs,1)), var(--fmin,0px)); color:var(--fg);}
.tz-card-sub{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); line-height:1.5;}
.tz-link{all:unset; cursor:pointer; color:var(--green-700); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
.tz-link:hover{text-decoration:underline;}
.tz-none{padding:14px 0; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.tz-mono{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums;}
.tz-late{color:var(--accent); font-weight:500;}
.tz-tag{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); padding:3px 9px; border-radius:20px; background:var(--bg2); color:var(--fg-soft); height:fit-content;}
.tz-banner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:11px 14px; border-radius:12px; background:var(--amber-soft); color:var(--amber); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.tz-payhint{margin:0 0 12px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--amber);}
.tz-cur{margin-bottom:14px;}
.tz-note{margin-top:12px; padding:12px 16px; border-radius:12px; background:var(--bg2); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.5; color:var(--fg-soft);}
.tz-mini{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
.tz-mini .kpi .value{font-size:max(calc(18px * var(--fs,1)), var(--fmin,0px));}
/* rows: upcoming, recent movements, forecast lines */
.tz-item{display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--rule);}
.tz-item.recent{cursor:pointer;}
.tz-item.chk{padding:10px 4px; display:grid; grid-template-columns:22px minmax(0,1fr) auto; column-gap:12px;}
.tz-item.chk input{width:17px; height:17px; accent-color:var(--green-700);}
.tz-item.off{opacity:.45;}
.tz-row-open{cursor:pointer;}
.tz-item-main{min-width:0; flex:1 1 auto;}
.tz-item-title{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tz-item-sub{margin-top:2px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.tz-amt{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); font-weight:500; white-space:nowrap;}
.tz-amt.in{color:var(--green-700);} .tz-amt.out{color:var(--accent);} .tz-amt.tr{color:#2B4C9E;}
.tz-ico{flex:none; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;}
.tz-ico.in{background:var(--green-soft); color:var(--green-700);} .tz-ico.out{background:var(--accent-soft); color:var(--accent);} .tz-ico.tr{background:#E3E9F5; color:#2B4C9E;}
.tz-chip{display:inline-block; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); padding:2px 9px; border-radius:20px; white-space:nowrap;}
.tz-chip.f{background:var(--green-soft); color:var(--green-700);} .tz-chip.s{background:var(--amber-soft); color:var(--amber);} .tz-chip.n{background:#E3E9F5; color:#2B4C9E;} .tz-chip.m{background:var(--bg2); color:var(--fg-soft);}
.tz-title-cell{display:flex; align-items:center; gap:10px;}
.tz-card-txt{display:flex; align-items:center; gap:10px;}
.tz-table td{vertical-align:middle;}
/* accounts */
.tz-acc-row{margin-top:14px;}
.tz-acc-line{display:flex; justify-content:space-between; gap:10px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
.tz-bar{margin-top:6px; height:6px; border-radius:3px; background:var(--bg2);} .tz-bar i{display:block; height:6px; border-radius:3px; background:var(--green-700);}
.tz-acc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;}
.tz-acc-card{padding:18px 20px;}
.tz-acc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.tz-acc-name{font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg);}
.tz-acc-bal{margin:14px 0 8px; font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(23px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg);}
.tz-acc-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.tz-summary{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:12px 14px; border-radius:12px; background:var(--bg2); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.tz-summary.col{display:block;} .tz-sum-row{display:flex; justify-content:space-between; gap:10px; padding:3px 0;}
.tz-gap{padding:12px 14px; border-radius:12px; background:var(--bg2); color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
.tz-gap.ok{background:var(--green-soft); color:var(--green-700);} .tz-gap.warn{background:var(--amber-soft); color:var(--amber);} .tz-gap.bad{background:var(--accent-soft); color:var(--accent);}
/* chart: grid, line and dots share the same percentage box */
.tz-chart{position:relative; height:232px; margin:6px 8px 0 46px;}
.tz-grid{position:absolute; left:0; right:0; border-top:1px dashed var(--rule);}
.tz-ylab{position:absolute; left:-46px; width:38px; margin-top:-8px; text-align:right; font-size:11px; color:var(--fg-soft);}
.tz-svg{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible;}
.tz-area{fill:var(--green-700); fill-opacity:.10;} .tz-line{fill:none; stroke:var(--green-700); stroke-width:2.4; stroke-linejoin:round;}
.tz-dot{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; box-sizing:border-box; border-radius:50%; background:var(--card); border:2px solid var(--green-700);}
.tz-dot.low{background:var(--accent); border-color:var(--accent);}
.tz-xlabs{position:relative; height:18px; margin:8px 8px 0 46px; font-size:11px; color:var(--fg-soft);} .tz-xlabs span{position:absolute; transform:translateX(-50%); white-space:nowrap;}
.tz-low{margin-top:6px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg-soft);} .tz-low.neg{color:var(--accent);}
@media (max-width:880px){
  .tz-grid2, .tz-grid2.b, .tz-grid2.fc{grid-template-columns:minmax(0,1fr);}
  .tz-acc-grid{grid-template-columns:minmax(0,1fr);}
  .tz-chart{height:170px;}
}
@media (max-width:640px){
  .tz-card{padding:16px 14px;}
  .tz-card-head{flex-wrap:wrap;}
  .tz-period button{padding:6px 11px;}
  .tz-ylab{left:-42px; width:34px;} .tz-chart{margin-left:42px;} .tz-xlabs{margin-left:42px;}
  .tz-mini{gap:8px;}
  .tz-summary{grid-template-columns:minmax(0,1fr);}
}
.view-toggle-crm.tz-period{display:flex; margin-left:0;}

/* assigning payments to an account: each payment is listed and ticked */
.tz-asg-block{margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--rule);}
.tz-asg-block:last-of-type{border-bottom:0; margin-bottom:8px;}
.tz-asg-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.tz-asg-all{display:flex; align-items:center; gap:8px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; cursor:pointer;}
.tz-asg-list{max-height:240px; overflow-y:auto; border:1px solid var(--rule); border-radius:12px;}
.tz-asg-line{display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--rule); cursor:pointer;}
.tz-asg-line:first-child{border-top:0;}
.tz-asg-line input[type="checkbox"], .tz-asg-all input[type="checkbox"]{flex:none; width:18px; height:18px; accent-color:var(--green);}
.tz-asg-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.tz-asg-title{font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tz-asg-sub{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tz-asg-amt{flex:none; font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500; white-space:nowrap;}
.tz-asg-amt.in{color:var(--green-700);} .tz-asg-amt.out{color:var(--accent);}
.tz-asg-preview{margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--green-soft); color:var(--green-700); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.5;}
.tz-asg-preview.warn{background:var(--amber-soft); color:var(--amber);}
.tz-asg-preview:empty{display:none;}
#tzsSave[disabled]{opacity:.45; cursor:not-allowed;}

/* team: treasury access of each member */
.team-tz-sel{padding:5px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--bg); color:var(--fg); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); max-width:100%;}
.team-tz-fixed{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.team-row-tz{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;}
.team-tz-lbl{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}

/* landing: the Treasury mockup (soldes, prévision, mouvements) */
.hero-mockup-kpis-3{grid-template-columns:repeat(3,1fr);}
.tour-row-treso{grid-template-columns:.8fr 1.7fr 1.1fr;}
.tour-row-treso > span:last-child{text-align:right;}
.mk-in{color:#0B7A54; font-weight:600;} .mk-out{color:#A9591F; font-weight:600;}
.mk-forecast{background:#fff; border-radius:9px; padding:12px 14px; box-shadow:0 3px 10px rgba(0,0,0,.06); margin-bottom:14px;}
.mk-forecast-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; font-size:max(calc(10px * var(--fs,1)), var(--fmin,0px)); color:#8a8f79; text-transform:uppercase; letter-spacing:.3px; font-weight:700;}
.mk-forecast-head span:last-child{color:var(--green-700); text-transform:none; letter-spacing:0; font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)); font-weight:600; white-space:nowrap;}
.mk-forecast-chart{display:block; width:100%; height:70px;}
.mk-forecast-chart polygon{fill:var(--green-700); fill-opacity:.12;}
.mk-forecast-chart polyline{fill:none; stroke:var(--green-700); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
@media (max-width:700px){
  .hero-mockup-kpis-3{grid-template-columns:repeat(2,1fr);}
  .tour-visual .hero-mockup-row.tour-row-treso{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}
  .tour-visual .hero-mockup-row.tour-row-treso > span:first-child{display:none;}
  .mk-forecast-chart{height:54px;}
}

/* small info popup (movements, expense reports): section titles */
.qp-sec{margin-top:6px; padding-top:10px; border-top:1px solid var(--rule); font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--fg-soft);}
.qp-sec:first-child{margin-top:0; padding-top:0; border-top:0;}

/* treasury: recurring charges */
.tz-recur-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; padding:10px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--card); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500;}
.tz-pend{margin-bottom:14px; border-color:var(--amber); background:var(--card);}
.tz-pend-row{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--rule);}
.tz-pend-row:first-of-type{border-top:0;}
.tz-pend-txt{flex:1 1 200px; min-width:0;}
.tz-pend-btns{display:flex; gap:8px; flex:none;}
.tz-rec-list{margin-bottom:12px; border:1px solid var(--rule); border-radius:12px; overflow:hidden;}
.tz-rec-row{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--rule); cursor:pointer;}
.tz-rec-row:first-child{border-top:0;}
div.tz-rec-row{cursor:default;}
button.tz-rec-row:hover{background:var(--bg2);}
.tz-rec-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;}
.tz-rec-amt{flex:none; font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500; white-space:nowrap;}
.tz-check{display:flex; align-items:flex-start; gap:8px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); cursor:pointer; margin-bottom:4px;}
.tz-check input{margin-top:3px; width:17px; height:17px; accent-color:var(--green); flex:none;}

/* supplier invoices created by a recurring charge */
.badge.recurring{display:inline-flex; align-items:center; gap:4px; background:var(--bg2); color:var(--fg-soft); border:1px solid var(--rule); font-weight:600; vertical-align:middle; white-space:nowrap;}
.badge.recurring svg{flex:none;}

/* recurring charges list: the buttons stay visible at the bottom of the window however long the list is (phone and computer).
   The window is the scroll container (padding 22px): the bar spans its full width and sits flush on its bottom edge. */
.tz-rec-foot{position:sticky; bottom:0; z-index:3; margin:14px -22px -22px; padding:12px 22px 22px; background:var(--card); border-top:1px solid var(--rule); box-shadow:0 -10px 14px -10px rgba(14,59,46,.14);}

/* credit notes still to be paid back to a customer */
.badge.credit-open{background:var(--amber-soft); color:var(--amber);}
.tz-chip.r{background:var(--amber-soft); color:var(--amber);}

/* Mouvements: balance bar. Same look as the « Solde total » of the overview (the .kpi cards): same font (Inter 600, like the squares), same size and colors */
.tz-balbar{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 14px;}      /* one square = one column, like the indicators of the overview (4 per row) */
.tz-bal-card{background:var(--card); padding:18px 20px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--rule); min-width:0;}
.tz-bal-label{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-bottom:9px;}
.tz-bal-cur{font-size:.95em; color:var(--fg-soft);}
.tz-bal-val{font-family:var(--num); font-weight:600; letter-spacing:-0.3px; font-variant-numeric:lining-nums tabular-nums; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700); white-space:nowrap; word-break:normal;}
.tz-bal-val.neg, .tz-bal-acc b.neg, .tz-bal-period b.neg{color:var(--accent);}
.tz-bal-sub{font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-top:4px;}
.tz-bal-period{margin-top:10px; padding-top:9px; border-top:1px solid var(--rule); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.tz-bal-period b{font-family:var(--num); font-weight:600; font-variant-numeric:lining-nums tabular-nums; color:var(--fg);}
.tz-bal-accs{display:flex; flex-direction:column; gap:5px; margin-top:10px; padding-top:9px; border-top:1px solid var(--rule);}
.tz-bal-acc span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tz-bal-acc{display:flex; justify-content:space-between; gap:12px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
.tz-bal-acc b{font-family:var(--num); font-weight:600; font-variant-numeric:lining-nums tabular-nums; color:var(--fg);}
@media (max-width:1000px){ .tz-balbar{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .tz-balbar{grid-template-columns:minmax(0,1fr);} .tz-bal-val{font-size:max(calc(18px * var(--fs,1)), var(--fmin,0px));} }

/* indicator squares that open their detail (dashboard, treasury overview) */
.kpi-link{cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.kpi-link:hover{border-color:var(--green); box-shadow:0 3px 12px rgba(14,59,46,.12); transform:translateY(-1px);}
.kpi-link:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.kpi-link:active{transform:none;}

/* Mouvements, phone cards: the customer or supplier under the title */
.tz-card-txt > div{min-width:0;}
.tz-card-party{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:500; color:var(--fg); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Comptes: reminder of the currency / type chosen on the overview */
.tz-scope{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;}

/* company block of the sidebar: a thin line under it, and the initial in place of a missing logo */
.sidebar > .org-switcher::after{content:''; display:block; height:1px; background:rgba(255,255,255,.26); margin:10px 6px 4px;}
.sidebar .org-switcher-menu{top:calc(100% - 11px);}
.company-chip .company-initial{flex:none; width:22px; height:22px; border-radius:5px; background:rgba(255,255,255,.24); color:#fff; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; overflow:visible;}
.org-switcher-menu .company-initial{flex:none; width:18px; height:18px; border-radius:4px; background:var(--green-soft); color:var(--green-700); font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:700; display:flex; align-items:center; justify-content:center; overflow:visible;}
.mobile-top .company-chip .company-initial{background:var(--green-soft); color:var(--green-700);}

/* credit note editor: the maximum amount, red when the amount is wrong */
.credit-hint{margin:8px 0 0; text-align:right; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.credit-hint.bad{color:var(--accent); font-weight:600;}

/* order page: the lines and the invoices of the order side by side on a computer (stacked below 1180 px) */
.project-cols{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; align-items:start;}
.project-cols.single{grid-template-columns:minmax(0, 1fr);}
.project-col{min-width:0; overflow-x:auto;}
.project-col table.ledger th, .project-col table.ledger td{padding-left:8px; padding-right:8px;}
.project-col table.project-lines td:first-child{white-space:normal; overflow:visible; max-width:none;}
.project-col .section-title{margin-top:22px;}
.project-col .ledger{width:100%;}
.project-desc{max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin-top:2px;}
@media (max-width:1279px){ .project-cols{grid-template-columns:minmax(0, 1fr);} .project-desc{max-width:none;} }

/* invoice / quote page: lighter header, the PDF actions and the secondary actions in two small menus */
.doc-menu-wrap{position:relative; display:inline-block;}
.doc-menu-btn{display:inline-flex; align-items:center; gap:6px;}
.doc-menu-btn.open{background:var(--green-soft); border-color:var(--green); color:var(--green);}
.doc-dots{width:38px; padding:0; justify-content:center;}
.doc-menu{display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:214px; padding:6px; box-sizing:border-box; background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);}
.doc-menu.open{display:block;}
[dir="rtl"] .doc-menu{right:auto; left:0;}
.doc-menu button, .doc-menu .dm-check{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; color:var(--fg); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
.doc-menu button:hover, .doc-menu .dm-check:hover{background:var(--bg2);}
.doc-menu .dm-danger{color:var(--accent);}
.doc-menu .dm-sep{height:1px; background:var(--rule); margin:5px 4px;}
.doc-menu .dm-check input{width:16px; height:16px; margin:0;}

/* invoice form: the small, discreet « this is a credit note » switch */
.credit-toggle{display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:-2px 0 10px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); cursor:pointer;}
.credit-toggle input{width:14px; height:14px; margin:0;}
.credit-toggle input:checked + span{color:var(--green-700); font-weight:600;}

/* order page on a phone: the lines of the order are cards like the invoices (but they open nothing) */
.pl-card{cursor:default;}

/* amounts: one line, always. The figure and its currency are glued by a no-break space (in the text itself); these boxes also refuse to wrap */
.kpi .value, .tz-bal-val, .tz-acc-bal, .tz-bal-period b, .tz-bal-acc b, .simple-card-right, .fac-card-amount, .totals-box .row span:last-child, .preview .p-totals .row span:last-child, .preview table.p-lines td.num, .lines-table td.amt{white-space:nowrap; word-break:normal; overflow-wrap:normal;}
.totals-box .row span:last-child{flex:none;}

/* document preview: the figures are in OUR number font (Inter, like the rest of the app), the dates / order lines are as dark as the figures */
.preview .p-totals .row span:last-child{font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; font-weight:600;}
.preview.doc-font-mono .p-totals .row span:last-child{font-family:var(--mono);}
.preview .p-meta strong, .preview .p-meta2 strong{font-weight:600; color:#16241E;}

/* « Mouvements »: when a currency has several accounts, its square is twice as wide: the balance on the left, the list of the banks on the right (the square gets lower) */
.tz-bal-card.has-accs{grid-column:span 2; display:flex; align-items:stretch; gap:24px;}
.tz-bal-card.has-accs .tz-bal-main{flex:0 0 auto; min-width:0; align-self:center;}
.tz-bal-card.has-accs .tz-bal-accs{flex:1 1 0; min-width:0; margin-top:0; padding-top:0; border-top:none; padding-left:24px; border-left:1px solid var(--rule); justify-content:center;}
@media (max-width:640px){
  .tz-bal-card.has-accs{grid-column:auto; display:block;}
  .tz-bal-card.has-accs .tz-bal-accs{margin-top:10px; padding-top:9px; padding-left:0; border-left:none; border-top:1px solid var(--rule);}
}
.doc-menu{max-width:calc(100vw - 16px);}

/* phone: the form's « Save » / « Close » in a bar fixed at the bottom (the tab bar is not shown on a form).
   NB: `.btn` starts with `all:unset`, which gives it back `box-sizing:content-box`: without an explicit `border-box` a `width:100%` button is wider than its cell by its padding. */
.mobile-actionbar{display:none;}
@media (max-width:880px){
  body.m-actions .mobile-actionbar{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:55; box-sizing:border-box; width:100%; max-width:100vw; background:var(--bg); border-top:1px solid var(--rule); padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); box-shadow:0 -4px 16px rgba(14,59,46,.08);}
  body.m-actions .mobile-actionbar.single{grid-template-columns:minmax(0,1fr);}
  body.m-actions .mobile-actionbar .btn{box-sizing:border-box; width:100%; min-width:0; height:44px; min-height:0; padding:0 12px; justify-content:center; text-align:center; white-space:nowrap; overflow:hidden; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px));}
  body.m-actions.kbd-hide-actions .mobile-actionbar{display:none;}       /* iPhone only: on Android the page is resized by the keyboard and the bar stays above it */
  body.m-actions [data-m-proxied]{display:none;}
  body.m-actions.m-detail main{padding-bottom:84px;}
}

/* landing page: the small banner at the bottom: ONE line (logo · copyright · e-mail and LinkedIn icons), on a phone as well */
.landing-banner{margin-top:44px; background:var(--green); color:#fff;}
.landing-banner-in{max-width:1080px; margin:0 auto; padding:6px max(20px, 6vw); box-sizing:border-box;}
.landing-banner-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:nowrap;}
.landing-banner-logo{display:inline-flex; align-items:center; flex:none;}
.landing-banner-logo img{height:26px; width:auto; display:block;}
.landing-banner .landing-banner-copy{margin:0; flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.4; color:rgba(255,255,255,.62);}
.landing-banner-icons{display:flex; align-items:center; gap:2px; flex:none;}
.landing-banner-icons a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:rgba(255,255,255,.78); transition:color .15s ease;}
.landing-banner-icons a:hover{color:#fff;}
.landing-banner-icons a:focus-visible, .landing-banner-logo:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:8px;}
.landing-banner svg text{fill:var(--green);}
@media (max-width:420px){
  .landing-banner-in{padding-left:14px; padding-right:14px;}
  .landing-banner-row{gap:8px;}
  .landing-banner-logo img{height:24px;}
  .landing-banner .landing-banner-copy{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px));}
}
@media (max-width:340px){
  .landing-banner .landing-banner-copy{font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px));}
}

/* The application has no dark theme: the system controls (lists, date pickers, scroll bars) stay light even when the phone is in dark mode. */
:root{color-scheme:light; --cs-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%235E7268' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* ----- phone: a button and a light list replace the system list of a <select> (the real <select> stays in the page, hidden) ----- */
select.cs-native{display:none !important;}
.cs-btn{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; min-height:40px; padding:9px 34px 9px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.35; color:var(--fg);
  background:var(--bg) var(--cs-chevron) no-repeat right 11px center / 12px; border:1px solid var(--rule); border-radius:var(--radius-sm);}
.cs-btn .cs-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-btn:disabled{opacity:.55; cursor:default;}
.cs-btn:focus-visible, .cs-btn.cs-open{outline:2px solid var(--green); outline-offset:-1px;}
.cs-btn.invalid{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.cs-btn.ocr-check{border-color:#e0a100 !important; background-color:#fffaf0 !important;}
/* in the same places as the <select> they replace */
.field .cs-btn{width:100% !important; max-width:100%;}
.filter-bar-2 .cs-btn{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 32px 8px 11px; border-radius:20px; background-color:var(--card); max-width:180px;}
.filter-bar .cs-btn[data-for="stockCategory"], .filter-bar .cs-btn[data-for="stockDepot"], .filter-bar .cs-btn[data-for="quoteStatusFilter"]{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 32px 8px 11px; border-radius:20px; background-color:var(--card); max-width:180px;}
.filter-bar .cs-btn[data-for="quoteStatusFilter"]{max-width:220px;}
.stock-filter-bar .cs-btn[data-for="stockCategory"], .stock-filter-bar .cs-btn[data-for="stockDepot"]{order:1; flex:1 1 110px; min-width:0; max-width:none;}
.team-row-controls .cs-btn{padding:8px 28px 8px 8px; border-radius:8px; max-width:108px; font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
.invite-row .cs-btn{width:100%; max-width:none; height:46px; padding:0 34px 0 14px; border-radius:8px; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px));}
.lines-table .cs-btn{width:100%; min-height:36px; padding:8px 26px 8px 8px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); background-position:right 8px center;}
.tp-size .cs-btn{padding:5px 28px 5px 8px; border-radius:8px; background-color:var(--card); font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); min-height:32px;}
.more-panel .filter-bar-2 .cs-btn{display:flex; width:100%; max-width:none; height:46px; border-radius:12px; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); padding:0 34px 0 14px;}

/* the light list */
.cs-pop{position:fixed; z-index:120; box-sizing:border-box; padding:5px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--card); color:var(--fg); font-family:var(--sans); border:1px solid var(--rule); border-radius:14px; box-shadow:0 12px 32px rgba(14,59,46,.18), 0 2px 6px rgba(14,59,46,.08); animation:cs-in .12s ease-out;}
@keyframes cs-in{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .cs-pop{animation:none;} }
.cs-opt{display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); line-height:1.3;}
.cs-opt .cs-check{flex:none; width:16px; height:16px; visibility:hidden;}
.cs-opt .cs-txt{flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
.cs-opt.act, .cs-opt:active{background:var(--bg);}
.cs-opt.sel{background:var(--green-soft); color:var(--green); font-weight:600;}
.cs-opt.sel .cs-check{visibility:visible;}
.cs-opt.dis{opacity:.4; pointer-events:none;}
.cs-grp{padding:10px 12px 4px; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--fg-soft);}

/* ----- phone: a button and a light calendar replace the system date picker (the real <input type="date"> stays in the page, hidden) ----- */
input[type="date"].dp-native{display:none !important;}
.dp-btn{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; min-width:0; max-width:100%; min-height:40px; padding:9px 34px 9px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); line-height:1.35; color:var(--fg);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235E7268' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='1.6'/%3E%3Cpath d='M2 7h12M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; border:1px solid var(--rule); border-radius:var(--radius-sm);}
.dp-btn .dp-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dp-btn.dp-empty .dp-label{color:var(--fg-soft);}
.dp-btn:disabled{opacity:.55; cursor:default;}
.dp-btn:focus-visible, .dp-btn.dp-open{outline:2px solid var(--green); outline-offset:-1px;}
.dp-btn.invalid{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.dp-btn.ocr-check{border-color:#e0a100 !important; background-color:#fffaf0 !important;}
[dir="rtl"] .dp-btn{padding:9px 12px 9px 34px; background-position:left 10px center;}
.field .dp-btn{width:100% !important;}
.filter-bar-2 .dp-btn{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px)); padding:8px 32px 8px 11px; border-radius:20px; background-color:var(--card); max-width:135px;}
.more-panel .filter-bar-2 .dp-btn{display:flex; width:100%; max-width:none; height:44px; border-radius:12px; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); padding:0 34px 0 14px;}
.dp-pop{position:fixed; z-index:120; box-sizing:border-box; padding:10px; background:var(--card); color:var(--fg); font-family:var(--sans); border:1px solid var(--rule); border-radius:14px; box-shadow:0 12px 32px rgba(14,59,46,.18), 0 2px 6px rgba(14,59,46,.08); animation:cs-in .12s ease-out;}
@media (prefers-reduced-motion:reduce){ .dp-pop{animation:none;} }
.dp-head{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px;}
.dp-title{flex:1; text-align:center; font-family:var(--serif); font-weight:600; font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px)); text-transform:capitalize;}
.dp-nav{all:unset; box-sizing:border-box; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-size:22px; line-height:1; color:var(--green); cursor:pointer;}
.dp-nav:active, .dp-nav:focus-visible{background:var(--bg); outline:none;}
.dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.dp-dow{text-align:center; font-size:max(calc(11px * var(--fs,1)), var(--fmin,0px)); font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--fg-soft); padding:4px 0 6px;}
.dp-pad{height:38px;}
.dp-day{all:unset; box-sizing:border-box; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); font-variant-numeric:tabular-nums; color:var(--fg); cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dp-day:active, .dp-day:focus-visible{background:var(--bg); outline:none;}
.dp-day.today{box-shadow:inset 0 0 0 1px var(--green-700);}
.dp-day.sel{background:var(--green); color:#fff; font-weight:600;}
.dp-day.dis{opacity:.3; cursor:default;}
.dp-foot{display:flex; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--rule);}
.dp-act{all:unset; box-sizing:border-box; padding:8px 12px; min-height:36px; display:inline-flex; align-items:center; border-radius:10px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); font-weight:600; color:var(--green); cursor:pointer;}
.dp-act:active, .dp-act:focus-visible{background:var(--bg); outline:none;}

/* ----- tick boxes in the lists: a small box of our own, in its own cell; a click in that cell outside the box does nothing (it never opens the row) ----- */
.sel-cell{width:44px; min-width:44px; max-width:44px; padding:0 !important; text-align:center; vertical-align:middle; cursor:default;}
th.sel-cell, td.sel-cell{box-sizing:border-box;}
/* the header cell and the row cells are centred the same way (the general rule « table.ledger th { text-align:left } » is more specific than « .sel-cell », so it is repeated here) */
table.ledger th.sel-cell, table.ledger td.sel-cell{text-align:center; padding:0 !important; vertical-align:middle; letter-spacing:0; text-overflow:clip; overflow:visible; width:44px; min-width:44px; max-width:44px;}       /* « table.ledger td » limits a cell to 260 px: the tick cell keeps its own 44 px, header and rows alike */
.sel-cell input[type="checkbox"]{-webkit-appearance:none; appearance:none; box-sizing:border-box; display:inline-block; width:14px; height:14px; margin:0; vertical-align:middle; cursor:pointer;
  border:1.5px solid #9C9275; border-radius:4px; background:var(--card) center / 10px no-repeat; transition:background-color .12s ease, border-color .12s ease;}
.sel-cell input[type="checkbox"]:hover{border-color:var(--green);}
.sel-cell input[type="checkbox"]:checked{background-color:var(--green); border-color:var(--green); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.sel-cell input[type="checkbox"]:indeterminate{background-color:var(--green); border-color:var(--green); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");}
.sel-cell input[type="checkbox"]:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.sel-cell input[type="checkbox"]:disabled{opacity:.45; cursor:default;}
tr[data-open] td.sel-cell, tr[data-action] td.sel-cell{cursor:default;}
/* the cards of the simple phone lists (customers, suppliers, orders, prospects, stock) in tick mode, like the invoice cards */
.simple-card.selecting{gap:10px; align-items:center;}
.simple-card.selecting .mob-tick{display:block; flex:none; width:16px; height:16px; box-sizing:border-box; border:1.5px solid #9C9275; border-radius:5px; background:var(--card);}
.simple-card.selecting .simple-card-main{flex:1 1 auto; min-width:0;}
.simple-card.selecting.sel{border-color:var(--green); background:var(--green-soft);}
.simple-card.selecting.sel .mob-tick{border-color:var(--green); background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;}

/* the tick of a card on a phone: 16 px, and the check mark follows */
.fac-card.selecting.sel .mob-tick, .simple-card.selecting.sel .mob-tick{background-size:10px; background-position:center; background-repeat:no-repeat;}

/* select mode on a computer: the bar under the page header (count · export · done); never on a phone, which has its own bar */
.desk-selbar{display:none;}
.desk-selbar.on{display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:9px 12px 9px 16px; background:var(--card); border:1px solid var(--green); border-radius:12px;}
.desk-selbar .desk-selcount{flex:1 1 auto; font-weight:600; color:var(--green); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
.desk-selbar .btn.small{flex:none;}
@media (max-width:640px){ .desk-selbar, .desk-selbar.on{display:none !important;} }

/* team: treasury access chosen when inviting */
.invite-tz{display:inline-flex; align-items:center; gap:8px; margin:0;}
.invite-tz .team-tz-lbl{white-space:nowrap;}
.invite-tz select{min-width:0;}
.team-row-tzchip{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); background:var(--bg); border:1px solid var(--rule); border-radius:999px; padding:2px 9px; white-space:nowrap;}
@media (max-width:640px){
  .invite-row .invite-tz{display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%;}
  .invite-row .invite-tz select{width:100%;}
}

/* company address: the postcode is a narrow field next to the city (side by side on a phone too) */
.field-row.zip-city{grid-template-columns:minmax(110px, .55fr) 1.45fr;}
@media (max-width:640px){ .field-row.zip-city{grid-template-columns:116px 1fr !important;} }

/* ---------- Editors scroll inside (Android phones) ----------
   On Android the address bar of Chrome folds and unfolds as the PAGE scrolls, and the fixed bottom bar (Close / Save) sometimes ended up partly under the edge of the screen.
   The short screens (a supplier invoice or an expense report read-only) never had the problem: they hardly scroll. So in the editors the page itself no longer scrolls:
   « main » scrolls inside, the browser bars stay where they are, and the bottom bar is as steady as on a short screen. Only Android (html.android, set in the <head>). */
@media (max-width:640px){
  html.android body.m-actions.m-detail{height:100%; overflow:hidden;}
  html.android body.m-actions.m-detail #app{height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
  html.android body.m-actions.m-detail .mobile-top{position:relative; flex:none;}
  html.android body.m-actions.m-detail #app > main{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:84px;}
}

/* ---------- Application mode ---------- the sign-in screen is the home page: no way back to the marketing landing page */
html.app-mode #auth-back-btn{display:none;}
html.app-mode #authScreenLogo{cursor:default;}

/* ---------- Settings, « Apparence des documents » on a phone ----------
   « 1fr » alone lets a column grow to the width of its widest content (the document preview): the fields and the colour value then ended up wider than the card and
   off the right edge of the screen. « minmax(0, 1fr) » keeps the column inside the card; the preview is scaled to fit by the script (fitDocAppearancePreview). */
@media (max-width: 880px){
  .doc-appearance-layout{grid-template-columns:minmax(0, 1fr) !important; gap:20px !important;}
  .doc-appearance-layout > *{min-width:0;}
  .doc-appearance-layout select, .doc-appearance-layout .field{max-width:100%;}
  #docAppearancePreviewWrap{max-width:100%; overflow-x:auto; overflow-y:hidden;}
}

/* ---------- « Recurring » box of the supplier invoice and expense report forms ---------- */
.rec-block{margin:0 0 16px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--bg2);}
.rec-block .tz-check{margin-bottom:0; font-weight:600;}
.rec-block .field-row .field{min-width:0;}
/* the titles of the purchase tables are clickable (sort) but may still wrap, so the arrow never widens a table that already fills its card */
table.ledger.ledger-purchase th.sortable{white-space:normal;}
.rec-line{margin-top:3px;}

/* ---------- payment through an account in another currency: exchange rate and amount received ---------- */
.fx-box{margin:0 0 14px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--bg2);}
.fx-box .field-row{margin-bottom:6px; align-items:flex-end;}      /* the two inputs stay on one line even when the title of the rate wraps */
.fx-box .field{min-width:0;}

/* ---------- Depots (warehouses) ---------- */
.stk-split{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); font-weight:400; margin-top:2px; white-space:normal;}
.stk-depots{margin:12px 0 4px; padding:10px 12px; border:1px solid var(--rule); border-radius:12px; background:var(--bg2);}
.stk-depots-h{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px;}
.stk-depot{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
select.ln-depot{display:block; margin-top:6px; width:100%; max-width:100%; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); padding:5px 8px; border-radius:8px;}
.ln-depot-ro{opacity:.85;}

/* ---------- Balance sheet (bilan de gestion) ---------- */
.page-sub{margin:0 0 12px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.bl-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 14px;}
.bl-bar input[type="month"]{font-family:var(--sans); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); padding:7px 10px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg);}
.bl-sit{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
.bl-spacer{flex:1;}
.bl-closed{white-space:nowrap;}
.bl-note{margin-bottom:12px;}
.bl-gapbanner{margin-bottom:14px; border-color:var(--accent); background:var(--accent-soft);}
.bl-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:16px;}
/* the two sides need about 700 px each (label + five columns): side by side only on a really wide screen, otherwise one under the other */
@media (min-width: 1700px){ .bl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;} }
.bl-card{padding:0; overflow:hidden; margin-bottom:0;}
.bl-scroll{overflow-x:auto;}
table.bl-table{width:100%; border-collapse:collapse; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
table.bl-table th{padding:10px 12px; text-align:left; font-weight:600; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--rule); white-space:nowrap;}
table.bl-table td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
table.bl-table .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
table.bl-table tr.bl-h td{font-weight:700; background:var(--bg2); border-top:1px solid var(--rule);}
table.bl-table tr.bl-sub td:first-child{padding-left:26px;}
table.bl-table tr.bl-sub2 td{font-weight:600;} table.bl-table tr.bl-sub2 td:first-child{padding-left:26px;}
table.bl-table tr.bl-total td{font-weight:700; background:var(--green-soft); border-top:2px solid var(--green);}
table.bl-table tr.bl-gapline td{color:var(--accent); font-weight:600;}
table.bl-table tr[data-action]{cursor:pointer;} table.bl-table tr[data-action]:hover td{background:var(--green-soft);}
table.bl-table tr.bl-faded td{opacity:.6;}
table.bl-table .bl-s{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); font-weight:400;}
table.bl-table .bl-zero{opacity:.45;}
table.bl-table .bl-act{width:1%; white-space:nowrap;}
.bl-result{margin-top:0; margin-bottom:16px;} .bl-result-head{padding:12px 14px 4px; font-weight:600; font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px));}
.bl-hint{padding:8px 14px 12px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px));}
.bl-start{padding:14px 16px; margin-bottom:14px;} .bl-start-t{font-weight:700; margin-bottom:4px;} .bl-start-b{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.bl-actions{display:flex; gap:8px; margin:0 0 12px;} .bl-quick{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px;}
.bl-lines td, .bl-assets td{cursor:pointer;}
@media (max-width: 760px){ .bl-opt{display:none;} table.bl-table td, table.bl-table th{padding:8px 8px;} .bl-bar .bl-spacer{display:none;} }

/* ---------- Simplified P&L (dashboard tab « Result ») ---------- */
.pnl-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 12px;}
.pnl-sub{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.pnl-controls{display:flex; flex-direction:column; gap:10px; margin:0 0 14px;}
.pnl-picker{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.pnl-picker input[type="month"]{font-family:var(--sans); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); padding:7px 10px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg);}
.pnl-opts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
.pnl-opt{display:flex; align-items:center; gap:8px; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); margin:0;}
.pnl-opt select{font-family:var(--sans); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); padding:7px 10px; border:1px solid var(--rule); border-radius:20px; background:var(--card); color:var(--fg);}
.pnl-kpis{margin-bottom:16px;} .pnl-kpis .value.neg{color:var(--accent);}
.pnl-table{min-width:520px;} .pnl-table tr.pnl-subline td{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);} .pnl-table tr.pnl-subline td:first-child{padding-left:42px;}
.pnl-table tr.pnl-ebitda td{font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
.pnl-monthly, .pnl-adj, .pnl-wrap > .bl-card{margin-bottom:16px;} .pnl-monthly table{min-width:900px;}
.pnl-monthly td.pnl-tot, .pnl-monthly th:last-child{font-weight:700; background:var(--bg2);} .pnl-pct td{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
@media (max-width: 760px){ .pnl-head{flex-wrap:wrap;} .pnl-table{min-width:0;} }

/* ---------- Simplified P&L by year: twelve months in columns, a click shows the detail ---------- */
.pnl-year-table{min-width:1180px;}
.pnl-year-table th.pnl-first, .pnl-year-table td.pnl-first{position:sticky; left:0; z-index:2; min-width:190px; max-width:260px; background:var(--card); box-shadow:1px 0 0 var(--line);}
.pnl-year-table tr.bl-h td.pnl-first{background:var(--bg2);} .pnl-year-table tr.bl-total td.pnl-first{background:var(--green-soft);}
.pnl-year-table td.pnl-tot, .pnl-year-table th.pnl-tot{font-weight:700; background:var(--bg2);} .pnl-year-table tr.bl-total td.pnl-tot{background:var(--green-soft);}
.pnl-year-table td.pnl-c, .pnl-year-table td.pnl-l{cursor:pointer;} .pnl-year-table td.pnl-c:hover, .pnl-year-table td.pnl-l:hover{background:var(--green-soft); text-decoration:underline;}
.pnl-year-table tr.pnl-subline td{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);} .pnl-year-table tr.pnl-subline td.pnl-first{padding-left:34px;}
.pnl-year-table tr.pnl-memo-head td{padding-top:16px; font-weight:700; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); text-transform:uppercase; letter-spacing:.3px; color:var(--fg-soft); background:transparent; border-bottom:1px solid var(--rule);}
.pnl-year-table tr.pnl-memo td{color:var(--fg-soft); font-style:italic;}
.pnl-classify{margin-bottom:14px;}
table.pnl-detail td, table.pnl-detail th{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
select.pnl-reclass{display:block; margin-top:6px; font-family:var(--sans); font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); padding:5px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--card); color:var(--fg); max-width:100%;}
#prospectModal.pnl-wide{max-width:min(820px, calc(100vw - 24px)); width:min(820px, calc(100vw - 24px));}
#prospectModal.pnl-wide table.pnl-detail td.num, #prospectModal.pnl-wide table.pnl-detail th.num{white-space:nowrap;}
label.pnl-invest{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); cursor:pointer;}
.pnl-modes{margin-bottom:2px;}
.pnl-opt.pnl-k{margin:0;}
.pnl-month-table{min-width:0;} .pnl-month-table td.pnl-tot, .pnl-month-table th.pnl-tot{font-weight:700; background:var(--bg2);} .pnl-month-table tr.bl-total td.pnl-tot{background:var(--green-soft);}
.pnl-month-table td.pnl-c, .pnl-month-table td.pnl-l{cursor:pointer;} .pnl-month-table td.pnl-c:hover, .pnl-month-table td.pnl-l:hover{background:var(--green-soft); text-decoration:underline;}
.pnl-month-table tr.pnl-subline td{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);} .pnl-month-table tr.pnl-subline td:first-child{padding-left:34px;}
.pnl-month-table tr.pnl-memo-head td{padding-top:16px; font-weight:700; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); text-transform:uppercase; letter-spacing:.3px; color:var(--fg-soft); background:transparent; border-bottom:1px solid var(--rule);}
.pnl-month-table tr.pnl-memo td{color:var(--fg-soft); font-style:italic;} .pnl-month-table tr.pnl-ebitda td{font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));} .pnl-month-table tr.pnl-pct td{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
/* the « Investment » choice of a supplier invoice: a discreet line, not a block */
.si-invest-min{margin:-6px 0 12px;} .si-invest-min .tz-check{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft); margin:0; font-weight:400; align-items:center;} .si-invest-min .tz-check input{width:14px; height:14px; margin-top:0;}
/* ---------- P&L: ONE typeface for its titles (the page title and the detail windows): the sans of the tables and cards around them ---------- */
.pnl-head h2.pnl-title{font-family:var(--sans); font-weight:600; font-size:max(calc(17px * var(--fs,1)), var(--fmin,0px)); letter-spacing:0; margin:0 0 3px;}
#prospectModal.pnl-wide h3{font-family:var(--sans); font-weight:600; font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); letter-spacing:0; margin:0;}
#prospectModal.pnl-wide .tz-card-sub{font-family:var(--sans);}
.pnl-adj .bl-result-head{font-family:var(--sans); font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
.pnl-kpis-cap{font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); margin:0 0 6px;}
.pnl-year-table.pnl-years{min-width:560px;}
.pnl-unvalued{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--accent);}
/* ---------- P&L: a COMPACT table (short labels that may wrap, tight cells) ---------- */
.pnl-year-table{min-width:940px;} .pnl-year-table.pnl-years{min-width:460px;}
.pnl-year-table th, .pnl-year-table td{padding:6px 7px;}
.pnl-year-table th.pnl-first, .pnl-year-table td.pnl-first{min-width:92px; max-width:118px; white-space:normal; line-height:1.25; padding-left:10px;}
.pnl-year-table.pnl-years th.pnl-first, .pnl-year-table.pnl-years td.pnl-first{min-width:130px; max-width:180px;}
.pnl-year-table tr.bl-sub td.pnl-first{padding-left:18px;}
.pnl-year-table td.num, .pnl-year-table th.num{font-size:max(calc(12.5px * var(--fs,1)), var(--fmin,0px));}
.pnl-year-table tr.pnl-pct td{font-style:italic; padding-top:3px; padding-bottom:3px;}
.pnl-detail tr.pnl-cat-head td{background:var(--bg2); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); border-top:1px solid var(--rule);}
.pnl-head .btn{white-space:nowrap; flex:none;}
/* ---------- P&L: the choice of the direct costs ---------- */
.pnl-opts .btn.small{margin-inline-start:4px;}
.pnl-dirlist{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; margin:10px 0 0;} @media (max-width: 520px){ .pnl-dirlist{grid-template-columns:1fr;} }
label.pnl-dirrow{display:flex; align-items:flex-start; gap:8px; padding:6px 0; font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); cursor:pointer; margin:0;}
label.pnl-dirstaff{padding-bottom:10px; border-bottom:1px solid var(--rule);} .pnl-dirhint{display:block; font-size:max(calc(12px * var(--fs,1)), var(--fmin,0px)); margin-top:2px;}
/* ---------- Abonnement ---------- */
.billing-banner{margin:0 0 14px;}
.billing-card .billing-state{font-size:max(calc(15px * var(--fs,1)), var(--fmin,0px));}
.billing-card .billing-pending{font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.billing-instr{background:var(--bg2); border-radius:12px; padding:14px 16px;}
.bm-cycles{flex-wrap:wrap;}
/* ---------- Page d'accueil : tarification ---------- */
.landing-pricing{max-width:560px; margin:70px auto 0; padding:0 6vw; text-align:center;}
.landing-pricing h2{font-size:max(calc(26px * var(--fs,1)), var(--fmin,0px)); margin-bottom:10px; letter-spacing:-.3px;}
.landing-pricing-sub{color:var(--fg-soft); margin:0 0 22px; line-height:1.5;}
.price-cycles{display:inline-flex; flex-wrap:wrap; justify-content:center; max-width:100%; gap:4px; padding:4px; background:var(--card); border:1px solid var(--rule); border-radius:999px;}
.price-cycle{min-height:44px; padding:0 18px; border:0; border-radius:999px; background:transparent; color:var(--fg); font:600 14px var(--sans); cursor:pointer;}
.price-cycle.active{background:var(--green); color:#fff;}
.price-card{margin-top:22px; text-align:left; background:var(--card); border:2px solid var(--green); border-radius:16px; padding:28px; box-shadow:var(--shadow);}
.price-name{font-family:var(--serif); font-size:max(calc(26px * var(--fs,1)), var(--fmin,0px)); color:var(--green);}
.price-amount{margin-top:14px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.price-amount b{font:600 48px/1 var(--sans); letter-spacing:-.02em;}
.price-unit{color:var(--fg-soft);}
.price-bill{margin-top:6px; color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px));}
.price-card .btn{margin-top:18px; width:100%; justify-content:center;}
.price-features{list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:10px; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
.price-features li::before{content:'✓'; color:var(--green-700); font-weight:700; margin-right:10px;}
.price-extra{margin-top:18px; padding:14px 16px; background:var(--bg2); border-radius:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px));}
.landing-pricing-note{margin:16px 0 0; color:var(--fg-soft); font-size:max(calc(13px * var(--fs,1)), var(--fmin,0px)); line-height:1.5;}
.ld-nav-link{color:var(--fg); text-decoration:none; font-weight:500; padding:12px 4px;}
/* ---------- Mon compte : quatre rubriques ---------- */
.account-tabs{margin:0 0 18px; flex-wrap:wrap;}
.acc-panel[hidden]{display:none;}
.billing-rows td{font-size:inherit;}
/* ---------- Page d'accueil : tarifs sur une ligne, bouton et utilisateur supplémentaire centrés, menu du téléphone ---------- */
.price-cycles{display:flex; flex-wrap:nowrap; justify-content:stretch; width:100%; box-sizing:border-box; gap:2px; padding:3px;}
.price-cycle{flex:1 1 0; min-width:0; padding:0 6px; white-space:nowrap; text-align:center; font-size:max(calc(clamp(12px, 3.4vw, 14px) * var(--fs,1)), var(--fmin,0px));}
.price-card .btn{display:flex; align-items:center; justify-content:center; text-align:center;}
.price-extra{justify-content:center; text-align:center; gap:4px 10px;}
#landingTour, #landingPricing{scroll-margin-top:84px;}
.ld-menu-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--rule); border-radius:12px; background:var(--card); color:var(--fg); cursor:pointer;}
.ld-menu-btn:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.ld-menu[hidden]{display:none;}
.ld-menu{position:absolute; top:calc(100% - 6px); inset-inline-end:max(4vw, 12px); min-width:230px; box-sizing:border-box; padding:8px; display:flex; flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow);}
.ld-menu a{display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:10px; color:var(--fg); text-decoration:none; font-weight:500;}
.ld-menu a:hover{background:var(--bg2);}
.ld-menu .btn{margin-top:6px; min-height:48px; justify-content:center;}
@media (max-width:720px){
  .landing-header .ld-desktop{display:none;}
  .ld-menu-btn{display:inline-flex;}
}
/* the sign-up button of the price card: its padding is inside its width (it stuck out of the card on the right), and the extra-user line is inside the card too */
.price-card .btn{box-sizing:border-box; width:100%; max-width:100%;}
.price-extra{box-sizing:border-box; width:100%;}
/* ---------- Page d'accueil : le menu du téléphone, trois entrées au même dessin ---------- */
.ld-menu{min-width:min(300px, calc(100vw - 24px)); padding:10px; gap:4px; border-radius:18px; box-shadow:0 18px 40px rgba(14,59,46,.16), 0 2px 6px rgba(14,59,46,.08);}
.ld-menu .ld-menu-item{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:0 12px; border-radius:12px; color:var(--fg); font-family:var(--sans); font-size:max(calc(16px * var(--fs,1)), var(--fmin,0px)); font-weight:500; line-height:1.2; text-decoration:none; cursor:pointer;}
.ld-menu .ld-menu-item:hover{background:var(--bg2);}
.ld-menu .ld-menu-item:focus-visible{outline:2px solid var(--green); outline-offset:-2px; background:var(--bg2);}
.ld-menu-ico{display:inline-flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:11px; background:var(--green-soft); color:var(--green);}

/* Équipe on the phone: the e-mail field and the two lists (type of member, treasury) get the format of the rest of the application
   (Inter 13.5 px, same height and corners). Before: the lists were 16 px, the e-mail field was drawn in Arial, and in the member list the two lists had 13.5 px and 12.5 px. */
@media (max-width:640px){
  .invite-row input, .invite-row select, .invite-row .cs-btn{font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); font-weight:400; height:44px; border-radius:var(--radius-sm);}
  .invite-row input{padding:0 12px;}
  .invite-row .cs-btn{padding:0 34px 0 12px;}
  .invite-tz .team-tz-lbl{font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:var(--fg-soft);}
  .team-row-controls .cs-btn, .team-row-tz .cs-btn, .team-row .team-tz-sel, .team-row-controls select{font-family:var(--sans); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); min-height:40px; max-width:none;}
  .team-row-tz .cs-btn{width:auto; min-width:150px;}
}