: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;
  --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(--mono)}
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:40px;}
.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:24px; height:24px; border-radius:7px; background:rgba(255,255,255,.9); 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;}
.landing-contact{
  max-width:560px; margin:56px auto 0; padding:44px 6vw 70px; text-align:center;
}
.landing-contact h2{font-size:max(calc(20px * var(--fs,1)), var(--fmin,0px)); margin-bottom:8px; letter-spacing:-.3px; font-family:var(--sans); font-weight:600;}
.landing-contact p{color:var(--fg-soft); font-size:max(calc(13.5px * var(--fs,1)), var(--fmin,0px)); margin-bottom:16px;}
.landing-version{margin:22px 0 0 !important; font-family:var(--mono); font-size:max(calc(10.5px * var(--fs,1)), var(--fmin,0px)) !important; color:var(--fg-soft); opacity:.55;}
.landing-contact a{color:var(--green-700); font-size:max(calc(14px * var(--fs,1)), var(--fmin,0px)); text-decoration:underline;}
@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:34px; width:auto; display:block;}
.auth-card .brand-logo{height:46px;}
.landing-header .brand-logo{height:60px;}
#bootLoader .brand-logo{height:52px;}
.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:600;}
.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(--mono); 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(--mono); 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{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(--mono); font-weight:500; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700); word-break:break-word;}
.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{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{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(--mono); 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(--mono); 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(--mono); 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(--mono); 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(--serif); 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(--serif); 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(--mono); 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)); width:220px; 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(--mono);}

/* 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:#5E7268;}
.preview .p-meta2{display:flex; flex-direction:column; gap:4px; font-size:max(calc(11.5px * var(--fs,1)), var(--fmin,0px)); color:#5E7268;}
.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(--mono);}
.preview .p-totals{display:flex; justify-content:flex-end;}
.preview .p-totals .box{width:220px;}
.preview .p-totals .row{display:flex; justify-content:space-between; 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:#8a8f79;}
.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:40px;}
  .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:32px;}
  .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:28px;}
  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:44px; }
  .landing-header.scrolled .brand-logo{ height:34px; }
  .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:40px; }
  .landing-header.scrolled .brand-logo{ height:32px; }
  .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:22px; height:22px; box-sizing:border-box; margin-top:1px; border:2px solid var(--rule); border-radius:7px; 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(--mono);}
.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(--mono); 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(--mono); 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(--mono); 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(--mono); 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 (the monospace of the amounts), 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(--mono); font-weight:500; font-size:max(calc(22px * var(--fs,1)), var(--fmin,0px)); color:var(--green-700); word-break:break-word;}
.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(--mono); font-weight:500; 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(--mono); font-weight:500; 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;}