/* Paynt Growth Hub — style aligned with the Paynt Portal */
:root{
  --firefly-25:#f4f7f9;--firefly-50:#e7eef1;--firefly-100:#c7d4da;--firefly-200:#a6bbc4;--firefly-300:#859fa9;
  --firefly-400:#647f8b;--firefly-500:#4b6671;--firefly-600:#364f5a;--firefly-700:#243e48;--firefly-800:#0f2832;
  --blue-50:#f2f7ff;--blue-100:#dce9ff;--blue-600:#2457a7;--blue-700:#1c478b;
  --green-50:#edfcf4;--green-100:#dcf9e9;--green-400:#50e191;--green-500:#40b474;--green-700:#287149;
  --yellow-50:#fff7e5;--yellow-400:#ffb400;--yellow-700:#805a00;
  --red-50:#ffefef;--red-400:#ff6464;--red-600:#993c3c;
  --orange-50:#fff6f0;--orange-500:#ff8d41;--orange-700:#c25c1d;
  --purple-50:#f6f3ff;--purple-100:#ede8ff;--purple-500:#a38aff;--magenta-100:#f7e8ff;
  --gray-50:#f4f6f9;--gray-100:#e5eaf0;--gray-400:#9aa5b8;--gray-600:#6b7285;
  --text:var(--firefly-800);--muted:var(--firefly-500);--border:var(--firefly-100);--line:var(--firefly-50);
  --radius:12px;
}
*{box-sizing:border-box}
html{font-size:14px}
body{margin:0;font-family:"Poppins",system-ui,sans-serif;color:var(--text);background:var(--firefly-25);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--blue-700);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:32px;font-weight:500;margin:0;line-height:1.2}
h2{font-size:18px;font-weight:600;margin:0 0 4px}
h3{font-size:14px;font-weight:600;margin:0 0 8px}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.icon{flex:none}

/* Layout */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:16px 0 16px 16px}
.sidebar-inner{background:#fff;border-radius:20px;height:100%;display:flex;flex-direction:column;padding:20px 14px}
.menu-toggle{display:none}
.menu-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px}
.brand img{width:44px;height:44px;border-radius:10px}
.brand:hover{text-decoration:none}
.brand span{color:var(--firefly-800);font-weight:600;font-size:15px;line-height:1.15}
.brand small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a,.nav button{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:var(--firefly-500);font-weight:500;font-size:14px;border:0;background:none;font-family:inherit;cursor:pointer;width:100%;text-align:left;position:relative}
.nav a:hover,.nav button:hover{color:var(--firefly-800);background:var(--firefly-25);text-decoration:none}
.nav a.on{color:var(--blue-600);background:var(--blue-50)}
.nav a.on::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--blue-600)}
.nav-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}
.avatar{width:30px;height:30px;border-radius:8px;background:var(--magenta-100);color:#412a4d;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.nav .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{padding:28px 32px 48px;min-width:0;width:100%;max-width:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:22px}
.page-head .sub{color:var(--muted);margin-top:4px}
.crumb{font-size:12px;color:var(--muted);margin-bottom:6px;display:block}

/* Cards and grids */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card.flush .card-head{padding:18px 22px 0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.tile .label{font-size:12px;color:var(--muted);font-weight:500}
.tile .value{font-size:19px;white-space:nowrap;font-weight:500;margin-top:4px;letter-spacing:-.02em}
.tile{container-type:inline-size;min-width:0}
.tile .value{font-size:clamp(14px,11cqi,19px)}   /* long amounts shrink with the tile instead of spilling out */
.tile .hint{font-size:11px;color:var(--gray-400);margin-top:2px}
.tile.accent{background:var(--green-100);border-color:var(--green-100)}
.tile.soft{background:var(--gray-100);border-color:var(--gray-100)}
.tile.lilac{background:var(--magenta-100);border-color:var(--magenta-100)}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:500;color:var(--firefly-500);text-align:left;padding:12px 14px;background:var(--firefly-25);white-space:nowrap}
td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:middle}
th.right,td.right{text-align:right}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover td{background:#fafcfd}
tr.total td{font-weight:600;background:var(--firefly-25)}
tr.balance td{font-weight:500;background:var(--firefly-25)}
td .sub{display:block;font-size:12px;color:var(--muted)}
.pos{color:var(--green-700)}
.neg{color:var(--red-600)}
.empty{padding:36px;text-align:center;color:var(--muted)}

/* Pills, tags, buttons */
.pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--firefly-200);border-radius:999px;padding:7px 14px;background:#fff;font-size:13px;color:var(--firefly-800)}
.pill select,.pill input{border:0;background:none;font:inherit;color:var(--blue-600);font-weight:500;outline:0;max-width:240px}
.pill .k{color:var(--muted)}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid;white-space:nowrap}
.tag.green{background:var(--green-50);border-color:var(--green-400);color:var(--green-700)}
.tag.yellow{background:var(--yellow-50);border-color:var(--yellow-400);color:var(--yellow-700)}
.tag.red{background:var(--red-50);border-color:var(--red-400);color:var(--red-600)}
.tag.orange{background:var(--orange-50);border-color:var(--orange-500);color:var(--orange-700)}
.tag.blue{background:var(--blue-100);border-color:var(--blue-600);color:var(--blue-600)}
.tag.gray{background:var(--gray-50);border-color:var(--gray-400);color:var(--gray-600)}
.tag.dark{background:var(--firefly-50);border-color:var(--firefly-400);color:var(--firefly-700)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 18px;font:500 13px "Poppins",sans-serif;border:1px solid var(--firefly-800);background:var(--firefly-800);color:#fff;cursor:pointer;text-decoration:none!important;white-space:nowrap}
.btn:hover{background:var(--firefly-700)}
.btn.ghost{background:#fff;color:var(--firefly-800);border-color:var(--firefly-200)}
.btn.ghost:hover{background:var(--firefly-50)}
.btn.small{padding:6px 12px;font-size:12px}
.btn[disabled]{background:var(--gray-100);border-color:var(--gray-100);color:var(--gray-400);cursor:not-allowed}

/* Forms */
label{display:block;font-size:12px;font-weight:500;color:var(--firefly-600);margin-bottom:5px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email],input[type=search],input[type=file],select,textarea{width:100%;border:1px solid var(--firefly-300);border-radius:8px;padding:9px 11px;font:400 14px "Poppins",sans-serif;color:var(--text);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--purple-500);outline-offset:-1px;border-color:var(--purple-500)}
textarea{min-height:70px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;align-items:end}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-section{font-size:12px;font-weight:600;color:var(--firefly-500);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 10px}
.align-start{align-items:start}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.field-inline{display:flex;gap:8px;align-items:center}
input.cell{width:92px;text-align:right;padding:6px 8px}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:var(--gray-400);border-radius:999px;transition:.15s;cursor:pointer}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+span{background:var(--green-500)}
.switch input:checked+span::after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:2px solid var(--purple-500);outline-offset:2px}
.switch input:disabled+span{opacity:.45;cursor:not-allowed}

/* Messages */
.messages{margin-bottom:18px;display:grid;gap:8px}
.msg{border:1px solid;border-radius:10px;padding:11px 14px;font-size:13px}
.msg.success{background:var(--green-50);border-color:var(--green-400);color:var(--green-700)}
.msg.error{background:var(--red-50);border-color:var(--red-400);color:var(--red-600)}
.msg.warning,.msg.info{background:var(--yellow-50);border-color:var(--yellow-400);color:var(--yellow-700)}
.note{background:var(--blue-50);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--firefly-700)}
.todo{display:grid;gap:8px}
.todo a{display:flex;justify-content:space-between;gap:10px;background:var(--yellow-50);border-radius:10px;padding:10px 14px;color:var(--yellow-700);font-weight:500}

/* Rules */
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.rule .code{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.rule.off h2{color:var(--firefly-400)}
.vars{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vars td,.vars th{padding:8px 12px}

/* Statement */

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500}
.balances{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-size:3.2px;fill:var(--firefly-500);font-family:"Poppins",sans-serif}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
details.box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
details.box summary{cursor:pointer;font-weight:500}
details.box[open] summary{margin-bottom:12px}

/* Statement in Paynt document style */
.sheet{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet-top{display:flex;justify-content:space-between;align-items:flex-start;height:112px}
.sheet-top img{height:34px;margin:44px 0 0 56px}
.sheet-top .chevron{width:30%;min-width:180px;height:100%;background:var(--green-400);clip-path:polygon(0 0,100% 0,100% 100%,2% 100%,20% 50%)}
.sheet-body{padding:22px 56px 40px}
.sheet .holder{font-size:13px;text-transform:uppercase;line-height:1.35;min-height:54px}
.sheet-title{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 16px}
.sheet-title h2{font-size:19px;font-weight:600;margin:0}
.sheet-title span{font-size:12px}
.sheet-meta{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;font-size:12px}
.sheet-meta dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 14px;margin:0}
.sheet-meta dt{font-weight:600}
.sheet-meta dd{margin:0}
.sheet-intro{font-size:12px;margin:30px 0 14px}
.sheet-section{font-size:14px;font-weight:600;margin:30px 0 8px}
.sheet-table{font-size:12px}
.sheet-table th{background:none;color:#000;font-weight:600;padding:7px 10px;border-bottom:1px solid #000}
.sheet-table td{border-top:0;padding:7px 10px;vertical-align:top}
.sheet-table:not(.summary){table-layout:fixed}
.sheet-table.moves th:nth-child(1){width:92px}
.sheet-table.moves th:nth-child(n+3){width:78px}
.sheet-table.moves th:nth-child(6){width:56px}
.sheet-table td.rulecode{padding-top:9px}
.sheet-table tr.band td{background:#f0f0f0}
.sheet-table tbody tr:hover td{background:none}
.sheet-table tbody tr.band:hover td{background:#f0f0f0}
.sheet-table td.rulecode{color:#555;font-size:11px}
.sheet-table.summary{max-width:none}
.sheet-table.summary td:nth-child(2),.sheet-table.summary th:nth-child(2){border-left:1px solid #000;width:150px}
.sheet-table.summary td:nth-child(3),.sheet-table.summary th:nth-child(3){border-left:1px solid #000;width:150px}
.sheet-table.summary th small{font-weight:400;font-size:10px}
.sheet-table.summary td[rowspan]{vertical-align:middle;border-left:1px solid #000}
.sheet-table.summary th{border-bottom:0}
.sheet-foot{font-size:11px;color:#333;margin:36px 0 0}

/* Hierarchy: tree as a list */
.tree{padding:8px 0;overflow-x:auto}
.tree-head,.tree-row{display:grid;grid-template-columns:minmax(260px,1fr) 70px 80px 70px 70px 140px 110px;gap:8px;align-items:center;padding:10px 22px;min-width:850px}
.tree-head{font-size:12px;font-weight:500;color:var(--firefly-500);background:var(--firefly-25);margin:0 0 4px}
.tree .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tree-row{border-top:1px solid var(--line)}
.tree-row.root{border-top:0}
summary.tree-row{cursor:pointer;list-style:none}
summary.tree-row::-webkit-details-marker{display:none}
summary.tree-row .tree-name::before{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid var(--firefly-400);border-bottom:2px solid var(--firefly-400);transform:rotate(-45deg);margin-right:12px;transition:transform .12s;vertical-align:middle}
details[open]>summary.tree-row .tree-name::before{transform:rotate(45deg)}
summary.tree-row:hover,.tree-row.leaf:hover{background:#fafcfd}
.tree-children .tree-children .tree-name{padding-left:28px}
.tree-children .tree-children .tree-children .tree-name{padding-left:68px}
.tree-children .tree-children .tree-children .tree-children .tree-name{padding-left:96px}
.tree-node.person>summary{background:var(--firefly-25)}
.tree-row.leaf{font-size:13px;color:var(--firefly-700);padding-top:7px;padding-bottom:7px}

/* Tabs */
.tabs{display:flex;gap:26px;box-shadow:inset 0 -1px 0 var(--border);margin:-6px 0 20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 2px 12px;color:var(--firefly-500);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--firefly-800);text-decoration:none}
.tabs a.on{color:var(--blue-600);border-bottom-color:var(--blue-600)}

details.version summary{font-weight:400}
table.tiers{width:auto;margin-left:auto}
table.tiers th,table.tiers td{padding:3px 4px;border:0;background:none}
select.custom{border-color:var(--blue-600);background:var(--blue-50)}

input[type=month]{width:100%;border:1px solid var(--firefly-300);border-radius:8px;padding:9px 11px;font:400 14px "Poppins",sans-serif;color:var(--text);background:#fff}

/* My production */
.outlook{margin-bottom:18px}
.outlook .card{height:100%;margin-bottom:0}
.goal{margin:12px 0 8px;font-size:15px;color:var(--firefly-600)}
.big{font-size:26px;font-weight:600;color:var(--firefly-800);letter-spacing:-.01em}
.bar{height:10px;border-radius:999px;background:var(--gray-100);overflow:hidden;margin:6px 0 12px}
.bar span{display:block;height:100%;border-radius:999px;background:var(--purple-500)}
.bar span.done{background:var(--green-500)}
.bar.thin{height:6px;margin:0}
.what-if{background:var(--green-50);border-radius:10px;padding:12px 14px;margin-top:10px}
.what-if .big{color:var(--green-700);font-size:22px}
.what-if .eq{font-size:12px;color:var(--green-700);margin:-2px 0 4px}
table.mini{margin:8px 0 10px;font-size:13px}
table.mini td{padding:6px 8px;border-top:1px solid var(--line)}
table.mini tr.on td{background:var(--blue-50);font-weight:500;color:var(--blue-600)}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.section-head h2{margin:0}
.section-head p{margin:2px 0 0}

/* Team */
.indent{color:var(--firefly-300);margin-left:10px}
.card.flush.team-card,.team-card .table-wrap{overflow:visible}
/* narrow screens and touch screens (tablets): the users table scrolls sideways instead of sticking out of the page */
@media screen and (max-width:1280px),screen and (pointer:coarse){.team-card .table-wrap{overflow-x:auto}.row-panel{position:static;width:auto;box-shadow:none;margin-top:8px}}
tr.muted td{opacity:.6}
details.row-menu{position:relative;display:inline-block;text-align:left}
details.row-menu summary{list-style:none;cursor:pointer}
details.row-menu summary::-webkit-details-marker{display:none}
.row-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:15;width:340px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 8px 28px rgba(15,40,50,.14)}
.row-panel form+form{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.row-panel .form-actions{margin-top:10px}
td input[type=text]{min-width:150px}

.country-switch{padding:0 6px 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.country-switch label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.country-switch select{padding:7px 9px;font-weight:500}

.tree-row.person-row{color:var(--firefly-800)}
.pill .switch{transform:scale(.8)}

details.add-card>summary{list-style:none;cursor:pointer}
details.add-card>summary::-webkit-details-marker{display:none}
details.add-card[open]>summary{margin-bottom:6px}
details.add-card:not([open]){background:none;border:0;padding:0}
.row-panel h3{margin:0 0 6px}
.row-panel.wide{width:400px;max-height:70vh;overflow:auto}
.rule-list{margin:8px 0 0;padding-left:18px;font-size:13px}

td.chain{font-size:13px;color:var(--firefly-500)}
td.chain i{font-style:normal;color:var(--firefly-300);margin:0 2px}
td.chain strong{color:var(--firefly-800);font-weight:500}

/* Red strip: viewing as another user */
.imp-bar{position:sticky;top:0;z-index:50;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;background:#cc2f2f;color:#fff;padding:9px 16px;font-size:13px}
.imp-bar form{margin:0}
.imp-bar button{border:1px solid #fff;background:#fff;color:#a12020;border-radius:999px;padding:5px 14px;font:600 12px "Poppins",sans-serif;cursor:pointer}
@media print{.imp-bar{display:none}}

.invoice-box{margin-top:26px;border:1px solid #000;padding:14px 18px;font-size:12px}
.invoice-box h3{font-size:14px;margin:0 0 8px}
.invoice-box p{margin:6px 0 0}
table.invoice-data{width:auto}
table.invoice-data td{padding:4px 22px 4px 0;border:0;vertical-align:top}
table.invoice-data td.k{font-weight:600;white-space:nowrap}

label.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--text);margin:6px 0}
label.check input{margin-top:3px}
.link-btn{border:0;background:none;color:var(--red-600);font:inherit;cursor:pointer;text-decoration:underline;padding:0}

/* Sign-in */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:24px;position:relative;background:#f2f6f9;overflow:hidden}
.login::before,.login::after{content:"";position:absolute;inset:0;pointer-events:none}
.login::before{background:#dbebf4;clip-path:polygon(0 0,24.2% 0,24.2% 26%,0 52%)}
.login::after{background:#dcdcfa;clip-path:polygon(100% 6%,75.3% 33%,75.3% 74%,52% 100%,100% 100%)}
.login-card{position:relative;z-index:1;background:#fdfdfd;border-radius:24px;padding:56px 64px 48px;width:100%;max-width:626px}
.login-card img{height:46px;display:block;margin:0 auto 6px}

.login-card h1{font-size:20px;font-weight:600;text-align:center;margin:0 0 8px}
.login-card>p.muted{text-align:center;margin:0 0 8px}
.login-card .field{margin-top:26px}
.login-card .field label{font-size:15px;font-weight:500;color:var(--text);margin-bottom:8px;display:block}
.login-card .field label::after{content:"*";color:#e5484d}
.login-card .field input{height:48px;border-radius:8px;border:1px solid var(--firefly-300);padding:0 12px;font-size:14px;width:100%;background:#fff}
.login-card .field input:focus{outline:none;border-color:var(--firefly-800);box-shadow:0 0 0 3px rgba(15,40,50,.08)}
.login-card .msg{margin-top:16px}
.login-card .btn{width:100%;justify-content:center;margin-top:56px;height:48px;border-radius:999px;background:#0f2832;color:#fff;font-weight:600;font-size:14px;border:0}
.login-card .btn:hover{background:#1c3a46}

.login-copy{position:relative;z-index:1;margin:0;font-size:17px;font-weight:500;color:var(--text)}
@media (max-width:700px){.login{gap:24px;padding:16px}.login::before{clip-path:polygon(0 0,40% 0,40% 14%,0 30%)}.login::after{clip-path:polygon(100% 62%,60% 82%,30% 100%,100% 100%)}
  .login-card{padding:36px 22px 30px;border-radius:20px}.login-card .btn{margin-top:36px}}

@media screen and (max-width:980px){
  .sheet-body{padding:16px}
  .sheet-top img{margin-left:16px}
  .sheet-meta{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:20;height:auto;padding:10px 12px 0}
  .sidebar-inner{border-radius:16px;padding:10px 12px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;height:auto;box-shadow:0 2px 10px rgba(15,40,50,.08)}
  .brand{padding:0}
  .brand img{width:38px;height:38px}
  .menu-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:var(--firefly-25);color:var(--firefly-800);cursor:pointer}
  .menu-toggle[aria-expanded=true]{background:var(--blue-50);color:var(--blue-600)}
  .menu-panel{display:none;flex-basis:100%;padding-top:10px;max-height:calc(100vh - 90px);overflow:auto}
  .sidebar.open .menu-panel{display:flex}
  .nav a.on::before{display:none}
  .nav-bottom{margin-top:8px}
  .main{padding:16px}
  h1{font-size:26px}
  .g2,.g3,.split,.balances,.form-2{grid-template-columns:1fr}
  .outlook .card{height:auto}
}
@media print{
  body{background:#fff;font-size:11px}
  .sidebar,.no-print,.messages{display:none!important}
  .shell{display:block}
  .main{padding:0}
  .card,.tile{border-color:#ccc;break-inside:avoid}
  .page-head{display:none}
  .sheet{border:0;border-radius:0;margin:0}
  .sheet-top img{margin-left:8mm}
  .sheet-body{padding:6mm 8mm 0}
  .sheet-table tr{break-inside:avoid}
  .sheet-table thead{display:table-header-group}
  @page{size:A4;margin:0 0 10mm}
  .card.flush{overflow:visible}
  .balances{grid-template-columns:repeat(4,1fr)}

  .card th{background:#eee!important}
  .sheet,.sheet-top,.sheet-body{overflow:visible}
  /* compact print: less empty space and more width for the description, so more rows fit per sheet */
  .sheet-top{height:20mm}
  .sheet-top img{height:7.5mm;margin-top:7mm}
  .sheet-top .chevron{width:26%;min-width:0}
  .sheet .holder{min-height:0;font-size:11px}
  .sheet-title{margin:5mm 0 3mm}
  .sheet-title h2{font-size:15px}
  .sheet-meta{font-size:10.5px;gap:10mm}
  .sheet-intro{font-size:10.5px;margin:4mm 0 3mm}
  .sheet-section{font-size:12px;margin:5mm 0 1.5mm}
  .sheet-table{font-size:10.5px}
  .sheet-table th,.sheet-table td{padding:1.1mm 1.6mm}
  .sheet-table td.rulecode{padding-top:1.3mm;font-size:9px}
  .sheet-table.moves th:nth-child(1){width:20mm}
  .sheet-table.moves th:nth-child(n+3){width:17mm}
  .sheet-table.moves th:nth-child(6){width:10mm}
  .sheet-legend{margin-top:5mm;break-inside:avoid}
  .sheet-legend dl{font-size:9.5px}
  .sheet-table.summary td:nth-child(2),.sheet-table.summary th:nth-child(2),.sheet-table.summary td:nth-child(3),.sheet-table.summary th:nth-child(3){width:30mm}
  .sheet-table .sub{font-size:9px}
  .invoice-box{margin-top:5mm;padding:3mm 4mm;font-size:10.5px;break-inside:avoid}
  .invoice-box h3{font-size:12px;margin-bottom:1.5mm}
  .sheet-foot{margin-top:5mm;font-size:9.5px}
  html,body,.shell,.main{height:auto;min-height:0}
  a{color:inherit}
}
[hidden]{display:none!important}

/* sortable headers */
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--firefly-800)}
.sortable::after{content:"↕";display:inline-block;margin-left:5px;font-size:10px;opacity:.35}
.sortable[data-dir=asc]::after{content:"▲";opacity:1;color:var(--blue-600)}
.sortable[data-dir=desc]::after{content:"▼";opacity:1;color:var(--blue-600)}
.sortable[data-dir]{color:var(--firefly-800)}
.sortable:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
@media print{.sortable::after{display:none}}

/* statement timeline */
.timeline{list-style:none;margin:14px 0 0;padding:0;border-left:2px solid var(--firefly-100);margin-left:6px}
.timeline li{position:relative;display:flex;gap:16px;padding:0 0 16px 20px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--firefly-400)}
.timeline li.done::before{background:var(--green-500);border-color:var(--green-500)}
.timeline li.pay::before{background:var(--blue-600);border-color:var(--blue-600)}
.timeline li.invoice::before{background:var(--yellow-400);border-color:var(--yellow-400)}
.timeline li.mail::before{background:var(--purple-500);border-color:var(--purple-500)}
.timeline .when{flex:0 0 86px;color:var(--firefly-500);font-size:13px}
.timeline .what .sub{display:block;color:var(--firefly-500);font-size:12px;margin-top:2px}
@media (max-width:700px){.timeline li{flex-direction:column;gap:2px}.timeline .when{flex:none}}

/* edit dialogs */
dialog.modal{border:0;border-radius:18px;padding:0;width:min(620px,calc(100% - 32px));max-height:calc(100vh - 48px);color:var(--text);text-align:left;box-shadow:0 24px 70px rgba(15,40,50,.3);overflow:hidden}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal::backdrop{background:rgba(15,40,50,.5)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:20px}
.modal-head p{margin:4px 0 0;font-size:13px}
.modal-x{border:0;background:var(--firefly-25);width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--firefly-700);flex:none}
.modal-x:hover{background:var(--firefly-50)}
dialog.modal>form{overflow:auto;margin:0}
.modal-body{padding:20px 28px 8px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.modal-grid .full{grid-column:1/-1}
.modal-grid label{white-space:normal}
.modal-grid label .muted{font-weight:400}
.modal-grid input[type=text],.modal-grid input[type=email],.modal-grid select{width:100%}
.modal-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 28px 22px;border-top:1px solid var(--line);background:var(--firefly-25)}
.modal-foot form{margin:0}
.modal-foot .spacer{flex:1}
@media (max-width:600px){.modal-grid{grid-template-columns:1fr}.modal-head,.modal-body,.modal-foot{padding-left:18px;padding-right:18px}.modal-foot .spacer{display:none}.modal-foot .btn{flex:1;justify-content:center}}

.sheet-table.compensi td:nth-child(2),.sheet-table.compensi td:nth-child(3){width:150px}
.sheet-table.compensi .rulecode{font-size:11px;color:#555}
.invoice-box p strong{font-weight:600}

/* password rules, with a tick while typing */
.pw-rules{margin:16px 0 0;background:var(--firefly-25);border-radius:10px;padding:12px 14px;text-align:left}
.pw-rules p{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--text)}
.pw-rules ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.pw-rules li{font-size:13px;color:var(--firefly-600);padding-left:24px;position:relative}
.pw-rules li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--firefly-300)}
.pw-rules li.ok{color:var(--green-700)}
.pw-rules li.ok::before{content:"✓";border:0;background:var(--green-500);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;width:14px;height:14px;left:0;top:3px}

/* statement entries: easier reading (alternating rows), description on one line, legend of the codes */
.sheet-table.moves tbody tr:not(.band):not(.countervalue):nth-child(even) td{background:#f0f3f5}
.sheet-table.moves tbody tr:not(.band):not(.countervalue):hover td{background:#eef3f6}
.sheet-table.moves td.desc{overflow:hidden}
.sheet-table.moves td.desc .one-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-legend{margin-top:22px}
.sheet-legend h3{font-size:13px;font-weight:600;margin:0 0 6px}
.sheet-legend dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 18px;margin:0;font-size:12px}
.sheet-legend dt{font-weight:600}
.sheet-legend dd{margin:0;color:#333}

/* at the top of the statement: upload the invoice (with the details to address it in the same box) */
.invoice-cta{border:1px solid var(--yellow-400);background:var(--yellow-50)}
.invoice-cta.record{border-color:var(--firefly-100);background:#fff}
.invoice-cta .cta-head h2{margin:0 0 4px;font-size:18px}
.invoice-cta .cta-head p{margin:0;color:var(--firefly-600)}
.invoice-cta .cta-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.3fr);gap:28px;margin-top:18px;align-items:start}
.invoice-cta h3{margin:0 0 8px;font-size:14px}
.invoice-cta .cta-data,.invoice-cta .cta-form{background:#fff;border-radius:12px;padding:16px 18px;border:1px solid var(--line)}
.invoice-cta.record .cta-data,.invoice-cta.record .cta-form{background:var(--firefly-25)}
.invoice-cta table.invoice-data td{font-size:13px}
@media (max-width:900px){.invoice-cta .cta-grid{grid-template-columns:1fr;gap:14px}}

/* incoming invoices */
.inv-row{border-left:4px solid var(--yellow-400)}
.inv-row.sure{border-left-color:var(--green-500)}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.inv-head .sub{display:block;color:var(--firefly-500);font-size:12px;margin-top:3px}
.inv-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:14px;margin-top:14px}
.inv-months{margin-top:14px}
.inv-checks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}
.inv-checks label.check{margin:2px 0}
.inv-row .form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.inv-row .form-actions form{margin:0}
@media (max-width:900px){.inv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.inv-grid{grid-template-columns:1fr}}

.reason-picks{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.reason-picks button{cursor:pointer;border:1px solid var(--border);font:500 12px "Poppins",sans-serif}
.reason-picks button:hover{border-color:var(--firefly-400)}
.modal-grid textarea{width:100%}
.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.row-actions form{margin:0}

/* page help */
.help-modal .modal-body{padding-bottom:18px;overflow:auto}
.help-modal h3{font-size:14px;margin:0 0 8px}
.help-points{margin:0;padding-left:20px;display:grid;gap:8px}
.help-points li{line-height:1.5}
.help-glossary{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.help-glossary summary{cursor:pointer;font-weight:600;font-size:14px}
.help-glossary dt{font-weight:600;margin-top:10px}
.help-glossary dd{margin:2px 0 0;color:var(--firefly-600)}
dialog.help-modal[open]{display:flex}

/* «Cambia profilo» dialog: today → contract, and choice by boxes */
.prof-facts{display:flex;align-items:center;gap:18px;background:var(--firefly-25);border-radius:12px;padding:14px 18px;margin-bottom:20px}
.prof-facts>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.prof-facts .k{font-size:12px;color:var(--firefly-500)}
.prof-facts .arrow{font-size:20px;color:var(--firefly-400)}
.prof-facts .sub{margin:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;margin:0;font-weight:400;white-space:normal}
.choice:has(input[type=radio]:checked){border-color:var(--blue-600);background:var(--blue-50)}
.choice input[type=radio]{margin-top:3px;flex:none}
.choice span{display:flex;flex-direction:column;gap:3px;min-width:0}
.choice small{color:var(--firefly-500);font-size:12px}
.choice input[type=month]{margin-top:10px;width:100%}
.choice:has(input[type=radio]:not(:checked)) input[type=month]{opacity:.45}
@media (max-width:600px){.choices{grid-template-columns:1fr}.prof-facts{flex-wrap:wrap}}

/* Legal, contracts to confirm: the fields of each row stay on a single line */
.legal-row{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(130px,1fr) minmax(90px,.7fr) auto minmax(130px,1fr) auto;gap:8px;align-items:center;margin:0}
.legal-row select,.legal-row input[type=text]{width:100%;min-width:0;max-width:none}
@media (max-width:1100px){.legal-row{grid-template-columns:1fr 1fr}}

/* partner page, settings: ordered sections, short labels and explanation below the field */
.form-2 .wide{grid-column:1/-1}
.form-2{align-items:start}
.field-hint{margin:5px 0 0;font-size:12px;color:var(--firefly-500);white-space:normal}
.form-section{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
form>.form-section:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.doc-list{margin:0;padding:0;list-style:none;font-size:13px}
.doc-list li{padding:6px 0;border-top:1px solid var(--line);white-space:normal}
.doc-list li:first-child{border-top:0}

/* Bonus: one rule = highlighted code, name, description and values in a readable grid */
.bonus-code{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--blue-600);background:var(--blue-50);border-radius:6px;padding:3px 9px;margin-bottom:8px}
.bonus-rule h2{margin:0}
.bonus-desc{margin:4px 0 16px;color:var(--firefly-700);max-width:900px;white-space:normal}
.bonus-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.bonus-values>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.bonus-values .k{font-size:12px;color:var(--firefly-500)}
.bonus-values strong{font-size:17px}
.bonus-values .h{font-size:11px;color:var(--firefly-500);line-height:1.35}
.bonus-preview{margin-top:16px;border-top:1px dashed var(--border);padding-top:14px}
.bonus-preview .k{font-size:12px;color:var(--firefly-500);margin-bottom:6px}
.bonus-preview table.mini th{font-size:11px;font-weight:500;color:var(--firefly-500);padding:4px 8px;background:none}

/* user's name in the menu: below, in small type, the partner (or the country) they belong to */
.nav .who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.nav .who small{font-size:11px;font-weight:400;color:var(--firefly-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Il mio profilo» page */

.avatar.big{width:64px;height:64px;border-radius:18px;font-size:22px}

.pw-fields{display:grid;gap:12px;margin-bottom:14px}
.profile-pw input[type=password]{width:100%}

/* the left menu stays still while the page scrolls: it stops below the notice strips (demo, «stai guardando come»)
   and takes up the remaining height; only if the items do not fit does the menu scroll inside itself */
.sidebar{top:var(--bars,0px);height:calc(100vh - var(--bars,0px))}
@media screen and (min-width:981px){
  /* if the items do not fit in height only the list of pages scrolls: logo at the top and user, language, logout at the bottom stay still */
  .menu-panel{overflow:hidden}
  .menu-panel>.nav:not(.nav-bottom){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-left:14px;margin-left:-14px}
  .menu-panel>.nav-bottom{flex:none;margin-top:8px}
  /* a shadow at the bottom of the list signals that there are more items below; it disappears when the bottom is reached */
  .menu-panel>.nav:not(.nav-bottom){background:linear-gradient(#fff 40%,rgba(255,255,255,0)) top/100% 22px no-repeat local,linear-gradient(rgba(255,255,255,0),#fff 60%) bottom/100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 100%,rgba(15,40,50,.22),rgba(15,40,50,0)) bottom/100% 9px no-repeat scroll}
  /* slightly more compact items, so on most screens they all fit */
  .sidebar .nav{gap:2px}
  .sidebar .nav a,.sidebar .nav button{padding-top:8px;padding-bottom:8px}
  .sidebar-inner{padding-top:16px;padding-bottom:12px}
  .country-switch{padding-bottom:10px;margin-bottom:8px}
}
.imp-bar{top:0}
@media screen and (max-width:980px){.sidebar{height:auto}}

/* statement below the minimum: coloured notice "do not issue an invoice", without invoicing details */
.invoice-box.no-invoice{border:0;border-left:6px solid #e09b00;background:#fff4d6;color:#5c4000;border-radius:0 10px 10px 0;font-size:13px}
.invoice-box.no-invoice h3{color:#5c4000}
@media print{.invoice-box.no-invoice{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* «Il mio profilo» as in the Paynt Portal: one box with the information in rows, one with the password button */
.profile-card{margin-bottom:18px}
.profile-who{display:flex;align-items:center;gap:14px;padding:16px 0 18px}
.profile-name{font-size:16px;font-weight:500;margin-top:2px}
.profile-rows{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-rows>div{padding:14px 0;border-top:1px solid var(--line);min-width:0}
.profile-rows>div:nth-child(odd){padding-right:24px}
.profile-rows dt{font-size:13px;color:var(--firefly-600);margin-bottom:4px}
.profile-rows dd{margin:0;font-weight:500;font-size:15px;overflow-wrap:anywhere}
.profile-rows dd .sub{display:block;font-weight:400;font-size:12px;color:var(--firefly-500)}
@media (max-width:700px){.profile-rows{grid-template-columns:1fr}.profile-rows>div:nth-child(odd){padding-right:0}}
.profile-rows>div:last-child:nth-child(odd){grid-column:1/-1;padding-right:0}

/* Dashboard as in the Paynt Portal: boxes with value, comparison with the previous period and line chart */
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.kpi-grid .card{margin:0}
.kpi .card-head{flex-wrap:wrap;gap:8px}
.kpi .card-head h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.kpi-value{font-size:30px;font-weight:500;letter-spacing:-.02em;margin:10px 0 14px;white-space:nowrap}
.kpi-value small{font-size:17px;color:var(--firefly-500);font-weight:500}
.kpi-chart{position:relative}
.kpi-chart svg{display:block;width:100%;height:150px;overflow:visible}
.kpi-chart .g{stroke:#b9c6cc;stroke-width:1;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.kpi-chart .b{stroke:#b9c6cc;stroke-width:1;vector-effect:non-scaling-stroke}
.kpi-chart .l{fill:none;stroke:var(--kc);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kpi-chart .a{fill:var(--kc);fill-opacity:.1}
.kpi-axis{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;pointer-events:none;font-size:12px;color:var(--firefly-600)}
.kpi-axis span{transform:translateY(-110%);background:rgba(255,255,255,.75);padding:0 2px;border-radius:4px}
.kpi-axis span:last-child{transform:translateY(-10%)}
.kpi-x{display:flex;justify-content:space-between;font-size:12px;color:var(--firefly-500);margin-top:8px}
.kpi-tpv{--kc:var(--purple-500)}.kpi-ep{--kc:var(--blue-600)}.kpi-nom{--kc:#2aa5b8}.kpi-nam{--kc:var(--green-500)}
.delta{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:500;background:var(--firefly-25);color:var(--firefly-800);white-space:nowrap}
.delta.up{background:var(--green-100);color:var(--green-700)}.delta.down{background:#fde8e6;color:#a8322b}
.delta .vs{font-weight:400;opacity:.8}
/* information «i»: the text appears on hover or on touch */
button.info{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:0;padding:0;background:var(--blue-600);color:#fff;font:600 11px/1 "Poppins",sans-serif;cursor:help;flex:none}
button.info::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:-10px;z-index:30;width:max-content;max-width:min(280px,70vw);background:var(--firefly-900,#0f2832);color:#fff;font:400 12px/1.45 "Poppins",sans-serif;text-align:left;white-space:normal;padding:9px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(15,40,50,.2);opacity:0;visibility:hidden;transition:opacity .12s}
button.info:hover::after,button.info:focus::after{opacity:1;visibility:visible}
.m-quick{display:none}
@media (max-width:700px){
  .kpi-grid{grid-template-columns:minmax(0,1fr)}.kpi-value{font-size:26px}.kpi-chart svg{height:130px}
  /* at the top, as in the Portal: profile and language next to the menu */
  .m-quick{display:flex;align-items:center;gap:6px;margin-left:auto}
  .m-quick form{margin:0}
  .m-quick a,.m-quick button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--firefly-800);cursor:pointer;text-decoration:none}
  .m-quick .avatar{width:36px;height:36px}
  /* the demo strip does not stay stuck to the top and takes up little space */
  .demo-bar{position:static;gap:8px 12px;padding:8px 12px;font-size:12px}
  .demo-bar>span{flex-basis:100%;text-align:center}
  .demo-bar form{gap:8px}.demo-bar label{font-size:12px;gap:6px}.demo-bar select{max-width:170px;height:28px;font-size:12px}
}
@media print{button.info,.m-quick{display:none!important}}

/* bell and notifications */
.notif-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d9534f;color:#fff;font-size:11px;font-weight:600;margin-left:auto}
.m-quick .notif-open{position:relative}.m-quick .notif-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;margin:0}
.notif-list{list-style:none;margin:0;padding:0}
.notif-list li+li{border-top:1px solid var(--line)}
.notif-list a{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:baseline;padding:12px 4px;color:var(--text);text-decoration:none}
.notif-list a:hover{background:var(--firefly-25)}
.notif-list .dot{width:8px;height:8px;border-radius:50%;align-self:center}
.notif-list .new .dot{background:var(--blue-600)}.notif-list .new .t{font-weight:600}
.notif-list .w{font-size:12px;color:var(--firefly-500);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:520px){.notif-list a{grid-template-columns:10px 1fr}.notif-list .w{grid-column:2}}
.notif-list a{grid-template-columns:10px 1fr auto auto}.notif-list .todo .dot{background:#e0a100}
@media (max-width:520px){.notif-list a{grid-template-columns:10px 1fr auto}}

/* Country page: one card per country, editing in a dialog */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.country-grid .card{margin:0;display:flex;flex-direction:column}
.country-card.off{opacity:.7}
.country-top{display:flex;align-items:center;gap:14px}
.country-code{display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:14px;background:var(--blue-50);color:var(--blue-700);font-weight:600;font-size:17px;letter-spacing:.02em}
.country-name{flex:1;min-width:0}.country-name h2{margin:0;font-size:18px}

.country-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.modal-section{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.modal-section h3{margin:0;font-size:15px;display:flex;align-items:center;gap:10px}
.modal-section .field-hint{margin:4px 0 0}
dialog.modal .modal-body{overflow-y:auto}

dialog.modal.wide{width:min(780px,calc(100% - 32px))}

.fin-to{margin:8px 0 0;font-size:13px;color:var(--firefly-600)}.fin-to strong{color:var(--text);font-weight:500}
.notif-list li{display:flex;align-items:center;gap:10px}.notif-list li>a{flex:1;min-width:0}
.notif-list .notif-dismiss{flex:none;white-space:nowrap}
.notif-tools{display:flex;justify-content:space-between;align-items:center;padding:0 4px 10px;border-bottom:1px solid var(--line)}
.notif-tools .link-btn{color:var(--blue-600);font-size:13px;font-weight:500}
#notif .modal-body{min-height:260px}
@media (max-width:600px){.notif-list li{flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}.notif-list .notif-dismiss{align-self:flex-start;margin-left:20px}}
.pick-table th.pick,.pick-table td.pick{width:44px;padding-right:0}.pick-table .pick input{width:18px;height:18px;margin:0;vertical-align:middle}
.ops-intro{margin:0 0 16px;max-width:900px}
#send-all select{max-width:380px}.card .field-inline input[name=to]{max-width:320px}

/* the partner's Contracts tab */
.contract-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:14px 0 0}
.contract-facts>div{padding:11px 0;border-top:1px solid var(--line);min-width:0}
.contract-facts .full{grid-column:1/-1}
.contract-facts dt{font-size:12px;color:var(--firefly-600);margin-bottom:3px}
.contract-facts dd{margin:0;font-weight:500;font-size:14px;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.contract-dates{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.vars-title{margin:18px 0 6px;font-size:14px;font-weight:600}.vars-title .muted{font-weight:400;font-size:12px}

/* registered and discarded invoices: few columns, wrapping text, actions always visible below the status */
table.inv-done td.wrap{white-space:normal;overflow-wrap:break-word;vertical-align:top}
table.inv-done td.doc{min-width:210px;max-width:300px}table.inv-done td.doc a{overflow-wrap:anywhere}
table.inv-done td.reason{min-width:220px;max-width:380px}
table.inv-done .row-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:8px}
table.inv-done .row-actions form{margin:0}
table.inv-done .row-actions .btn{white-space:nowrap}
/* notifications dialog: large, almost full height */
dialog#notif.modal{width:min(1040px,calc(100% - 32px));max-height:calc(100vh - 40px)}
#notif .modal-body{min-height:min(520px,60vh)}
#notif .notif-list a{padding:14px 6px;font-size:15px}
#notif .notif-list .w{font-size:13px}

/* menu: at the bottom one row with the name and one row of icons only (demo, notifications, language, logout), so the page items fit on short screens too */
.nav-icons{display:contents}
.nav-icons .code{display:none}
@media screen and (min-width:981px){
  .nav-icons{display:flex;gap:4px;justify-content:space-between;padding:0 2px}
  .nav-icons form{display:flex;flex:1}
  .nav-icons button,.nav-icons form button{flex:1;width:auto;justify-content:center;padding:9px 0;gap:4px}
  .nav-icons .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-icons .code{display:inline;font-size:11px;font-weight:600}
  .nav-icons .notif-badge{position:absolute;top:2px;right:calc(50% - 20px);margin:0}
}
@media screen and (min-width:981px) and (max-height:940px){
  .sidebar .nav a,.sidebar .nav button{padding-top:6px;padding-bottom:6px}
  .brand{padding-bottom:14px}
  .brand img{width:38px;height:38px}
}

/* relationship with the partners (for now only in the demo): conversations, timeline, pipeline, cockpit */
.late{color:var(--red-600)}
.chat{display:flex;flex-direction:column;gap:12px;margin:18px 0}

.kpi-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.kpi-strip.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-strip .card{margin:0;display:flex;flex-direction:column;gap:4px;padding:16px 18px}.kpi-strip .card .muted{font-size:12px;line-height:1.3;min-height:2.6em}
.kpi-strip strong{font-size:26px;font-weight:500;letter-spacing:-.02em}.kpi-strip small{color:var(--firefly-500);font-size:12px}
.timeline{padding:6px 22px}
.tl-row{display:grid;grid-template-columns:86px 26px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.tl-row:last-child{border:0}
.tl-when{font-size:12px;color:var(--firefly-700);white-space:nowrap}.tl-when span{display:block;color:var(--muted)}
.tl-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--blue-100);color:var(--blue-600)}
.tl-row.in .tl-dot{background:var(--green-50);color:var(--green-700)}.tl-row.note .tl-dot{background:var(--orange-50);color:var(--orange-700)}
.tl-body p{margin:4px 0 0;color:var(--firefly-700);white-space:normal}.tl-body .tag{margin-right:6px}
.board{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.board-col{background:var(--firefly-25);border-radius:14px;padding:12px 10px;min-height:120px}
.board-col h2{font-size:13px;font-weight:600;margin:0 4px 10px;display:flex;justify-content:space-between;gap:8px}
.board-col h2 span{background:#fff;border-radius:999px;padding:0 9px;font-weight:500;color:var(--firefly-700)}
.board-col.col-active{background:var(--green-50)}
.board-card{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--firefly-200);border-radius:10px;padding:10px 12px;margin-bottom:8px;color:var(--firefly-800);font-size:12px}
.board-card:hover{text-decoration:none;border-color:var(--blue-600)}
.board-card.stuck{border-left-color:var(--red-400)}.board-card.stuck b{color:var(--red-600)}
.board-card strong{font-size:12.5px;line-height:1.25}.board-card .meta{color:var(--firefly-500);font-size:11px}
.steps{display:flex;gap:4px}.steps i{width:9px;height:9px;border-radius:50%;background:var(--gray-100);border:1px solid var(--gray-400)}.steps i.ok{background:var(--green-400);border-color:var(--green-400)}
.board-empty{margin:4px}
.cockpit{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}

@media screen and (max-width:980px){.kpi-strip,.kpi-strip.five{grid-template-columns:1fr 1fr}.tl-row{grid-template-columns:70px 24px 1fr}}
@media screen and (min-width:981px) and (max-height:960px){.sidebar .nav{gap:1px}.sidebar .nav a,.sidebar .nav button{padding-top:5px;padding-bottom:5px;font-size:13.5px}}

/* invoice forms: the total of the chosen months does not match the invoice (invoices.js) */
.warn-text{color:var(--orange-700)}

/* ======================================================================================================
   Lists, filters, panels of every page (was preview.css). Kept after the base rules: the order is the cascade.
   ====================================================================================================== */
/* Lists, filters and panels of every page (born as the «preview» of the new interface, now the standard: <body class="pv"> is always set). */

@media print{.pv-help,.pv-filter{display:none!important}}
.pv-note{margin:0 0 14px;color:var(--firefly-600)}
.pv-lead{font-size:15px;margin:8px 0 12px}
.pv-why{margin:8px 0 0;font-size:12px;color:var(--orange-700)}

body.pv .grid.split{align-items:start}
body.pv .outlook{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* legend of the acronyms */
.pv-help{border:1px solid var(--border);background:#fff;color:var(--firefly-700);border-radius:999px;padding:7px 14px;font:500 13px "Poppins",sans-serif;cursor:pointer;white-space:nowrap}
.pv-help:hover{border-color:var(--firefly-400)}

/* search inside a table */
.pv-filter{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pv-filter input{max-width:320px}
.pv-filter .muted{font-size:12px}
.pv-select-filter{margin-bottom:6px}
/* rows per page and buttons to page through */
tr.pv-off{display:none!important}
.pv-pages{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);font-size:13px}
.pv-pages-info{color:var(--firefly-600)}
.pv-pages-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pv-pages label{display:flex;align-items:center;gap:8px;margin:0;color:var(--firefly-600);font-size:13px}
.pv-pages select{width:auto;min-width:76px;height:34px;padding:0 8px}
.pv-pages-nav{display:flex;align-items:center;gap:4px}
.pv-page-nums{display:flex;gap:4px}
.pv-page{min-width:34px;height:34px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:none;color:var(--firefly-800);font:500 13px "Poppins",sans-serif;cursor:pointer}
.pv-page:hover{background:var(--firefly-25)}
.pv-page.on{background:var(--blue-600);color:#fff}
.pv-page.arrow{border-color:var(--border);font-size:18px;line-height:1;color:var(--firefly-600)}
.pv-page:disabled{opacity:.35;cursor:default;background:none}
@media print{tr.pv-off{display:table-row!important}.pv-pages{display:none!important}}

@media screen and (max-width:700px){
  body.pv .imp-bar{font-size:11px;padding:5px 10px;gap:8px;flex-wrap:nowrap;justify-content:space-between;text-align:left}
  body.pv .imp-bar button{padding:5px 10px;white-space:nowrap}
  body.pv .btn.small,body.pv .pv-help{min-height:38px}
  /* lists: each row becomes a card, no sideways scrolling */
  body.pv table.pv-stack{display:block;min-width:0;width:100%}
  body.pv table.pv-stack thead{display:none}
  body.pv table.pv-stack tbody{display:block}
  body.pv table.pv-stack tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:12px 14px;border-top:1px solid var(--line)}
  body.pv table.pv-stack tr:first-child{border-top:0}
  body.pv table.pv-stack td{display:block;padding:0;border:0;text-align:left!important;font-size:13px;min-width:0;white-space:normal}
  body.pv table.pv-stack td:first-child{grid-column:1/-1;font-weight:600;font-size:14px;margin-bottom:2px}
  body.pv table.pv-stack td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;font-weight:400;color:var(--firefly-500)}
  body.pv table.pv-stack td.pv-empty{display:none}
  body.pv table.pv-stack td.pv-full{grid-column:1/-1}
  body.pv table.pv-stack tr.total{background:var(--firefly-25)}
  body.pv .table-wrap:has(> table.pv-stack){overflow-x:visible}
  /* hierarchy: name on one line, numbers below with their label */
  body.pv .tree-head{display:none}
  body.pv .tree-row{grid-template-columns:repeat(3,1fr);min-width:0;gap:2px 10px;padding:11px 14px}
  body.pv .tree-row>.tree-name{grid-column:1/-1}
  body.pv .tree-row>.num{text-align:left;font-size:12px}
  body.pv .tree-row>.num[data-label]::before{content:attr(data-label)" ";color:var(--firefly-500);font-size:11px}
  body.pv .tree-row>.num.pv-empty,body.pv .tree-row>span:empty{display:none}
  body.pv .tree{overflow-x:visible}
  /* statement: each entry on three readable lines */
  body.pv .sheet-table.pv-moves{display:block}
  body.pv .sheet-table.pv-moves thead{display:none}
  body.pv .sheet-table.pv-moves tbody{display:block}
  body.pv .sheet-table.pv-moves tr{display:grid;grid-template-columns:1fr auto auto;gap:2px 12px;padding:9px 8px;border-bottom:1px solid #e3e3e3}
  body.pv .sheet-table.pv-moves td{display:block;padding:0;border:0;white-space:normal;text-align:left;position:static}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(1){grid-column:1/-1;grid-row:1;font-size:11px;color:#555}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(2){grid-column:1/-1;grid-row:2;font-weight:500}
  body.pv .sheet-table.pv-moves td.desc .one-line{white-space:normal}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(3),
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(4){grid-column:1;grid-row:3;font-weight:600}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(3):not(.pv-empty)::before{content:"+"}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(5){grid-column:3;grid-row:3;text-align:right}
  body.pv .sheet-table.pv-moves tr:not(.band):not(.countervalue) td:nth-child(6){grid-column:2;grid-row:3;text-align:right}
  body.pv .sheet-table.pv-moves td[data-label]:nth-child(n+5)::before,
  body.pv .sheet-table.pv-moves tr.band td.num[data-label]::before{content:attr(data-label)" ";font-weight:400;font-size:11px;color:#555}
  body.pv .sheet-table.pv-moves tbody tr:not(.band):not(.countervalue) td{background:none}
  body.pv .sheet-table.pv-moves tbody tr:not(.band):not(.countervalue):nth-child(even){background:#f0f3f5}
  body.pv .sheet-table.pv-moves td.pv-empty{display:none}
  body.pv .sheet-table.pv-moves tr.band{display:flex;flex-wrap:wrap;gap:2px 14px;background:#efefef}
  body.pv .sheet-table.pv-moves tr.band td:nth-child(2){flex:1 1 60%}
  body.pv .sheet-table.pv-moves tr.countervalue{display:flex;justify-content:space-between;gap:12px}
  body.pv .sheet-table.pv-moves td.empty{grid-column:1/-1;text-align:center}
}

/* tables with many columns: narrower margins, so on desktop they fit without scrolling sideways */
@media screen and (min-width:701px){body.pv table.pv-dense th,body.pv table.pv-dense td{padding-left:9px;padding-right:9px}}

/* advanced filters on the lists */
.pv-fbtn.on{border-color:var(--blue-600);color:var(--blue-600);background:var(--blue-50)}
.pv-fpanel{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--firefly-25)}
.pv-fpanel[hidden]{display:none}
.pv-fgroup{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:340px}
.pv-fname{flex-basis:100%;font-size:12px;font-weight:600;color:var(--firefly-600)}
.pv-fgroup.num input{width:92px;height:34px;padding:0 8px}
.pv-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer;margin:0;font-weight:500;color:var(--firefly-700)}
.pv-chip input{position:absolute;opacity:0;pointer-events:none}
.pv-chip.on{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-700)}
.pv-chip:focus-within{outline:2px solid var(--blue-600);outline-offset:1px}
.pv-freset{color:var(--blue-600);font-size:13px;font-weight:500}.pv-freset[hidden]{display:none}
@media print{.pv-fpanel{display:none!important}}

/* easier-to-read lists: narrower rows in alternating colours */
@media screen and (min-width:701px){
  body.pv table.pv-list th{padding-top:8px;padding-bottom:8px}
  body.pv table.pv-list td{padding-top:6px;padding-bottom:6px}
  body.pv table.pv-list .tag{padding-top:1px;padding-bottom:1px}
}
body.pv table.pv-list td{border-top-color:transparent}
body.pv table.pv-list tbody tr.pv-alt td{background:#f3f6f8}
body.pv table.pv-list tbody tr:hover td{background:#e8f0f6}
body.pv table.pv-list tr.total td{background:var(--firefly-25);border-top:1px solid var(--line)}
@media (max-width:700px){body.pv table.pv-stack tr.pv-alt{background:#f3f6f8}body.pv table.pv-list tbody tr.pv-alt td,body.pv table.pv-list tbody tr:hover td{background:none}}

/* demo mode: green strip at the top and selector at the bottom left */
.demo-bar{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;background:#12804a;color:#fff;padding:8px 16px;font-size:13px;position:sticky;top:0;z-index:60}
.demo-bar form{margin:0}
.demo-bar label{display:flex;align-items:center;gap:8px;margin:0;color:#fff;font-size:13px}
.demo-bar select{width:auto;height:30px;padding:0 8px;border:0;border-radius:8px;font-size:13px}
.demo-bar button{border:0;background:#fff;color:#0d6238;border-radius:999px;padding:5px 14px;font:600 12px "Poppins",sans-serif;cursor:pointer}
.nav-bottom button.demo-switch.on{color:#0d6238;font-weight:600}
@media print{.demo-bar{display:none!important}}
.demo-bar form{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.demo-bar select{max-width:260px}

/* list toolbar as in the Portal: pills of the active filters, Columns, Export, Refresh */
.pv-pills{display:contents}
.pv-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--blue-600);background:var(--blue-50);color:var(--blue-700);border-radius:999px;padding:3px 4px 3px 12px;font-size:12px;font-weight:500;max-width:100%}
.pv-pill .k{color:var(--firefly-600);font-weight:400;border-right:1px solid #b9cdea;padding-right:6px}
.pv-pill button{border:0;background:none;color:inherit;font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0}
.pv-pill button:hover{background:#fff}
.pv-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.pv-menu-wrap{position:relative}
.pv-menu{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(15,40,50,.16);padding:8px;min-width:200px;overflow:auto}
.pv-menu[hidden]{display:none}
.pv-menu label{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:8px;font-size:13px;font-weight:400;cursor:pointer;white-space:nowrap}
.pv-menu label:hover{background:var(--firefly-25)}
.pv-menu input{width:auto;height:auto;margin:0}
.pv-col-off{display:none!important}
@media (max-width:700px){.pv-tools{margin-left:0;flex-basis:100%}.pv-filter input[type=search]{max-width:none;flex-basis:100%}}
@media (max-width:700px){body .demo-bar{position:static}}

/* ======================================================================================================
   Look of the Paynt Portal (was portal.css): touch-ups that override the rules above, so they stay last.
   ====================================================================================================== */
/* Alignment with the graphic guidelines of the Paynt Portal (document «Paynt-Portal-UI-Spec», 13 October 2026).
   Style touch-ups only, on top of app.css and preview.css: to go back just remove this file from base.html.
   Deliberately kept different from the Portal: compact list rows (the user's choice), numbers per country, no chat. */
:root{--radius:16px;--pn-line:#c7d4da;--pn-line-strong:#a6bbc4;--pn-rule:#bfc9cd;--pn-danger:#cc5050;
  --pn-tile-green:#dcf9e9;--pn-tile-grey:#e5eaf0;--pn-tile-lilac:#f3ddfe;--pn-tile-peach:#feddc8;--pn-tile-blue:#d0e0fe;--pn-tile-violet:#e3dcfe}
/* cards: radius 16, more readable border, 24 spacing */
.card{border-color:var(--pn-line);padding:24px;margin-bottom:24px}
.card.flush{padding:0}
.card.flush .card-head{padding:20px 24px 0}
.grid,.kpi-grid{gap:24px}
.kpi-grid{margin-bottom:24px}
.tiles{gap:16px;margin-bottom:24px}
/* page title with its rule line */
.page-head{padding-bottom:24px;border-bottom-color:var(--pn-rule);margin-bottom:24px}
h1{line-height:40px}
/* menu: active item with an inner blue bar and dark blue text */
.sidebar-inner{border-radius:16px}
.nav a.on{color:var(--blue-700);background:var(--blue-50);box-shadow:inset 2px 0 0 var(--blue-600)}
.nav a.on::before{display:none}
.nav a,.nav button{border-radius:8px}
/* KPI value: 32/40, with the «/n» count fainter */
.kpi-value{font-size:32px;line-height:40px;font-weight:500}
.kpi-value small{font-size:20px;color:var(--firefly-500)}
/* tables: rule lines in the Portal's colour */
td{border-top-color:var(--pn-line)}
.pv-pages{border-top-color:var(--pn-line)}
/* pills: the Portal's border; active filter as "Label | Value" with a vertical rule line */
.tag.gray,.tag.dark{border-color:var(--pn-line);background:#fff;color:var(--firefly-500)}
.tag.yellow{background:#fff8e1;border-color:#e8c447;color:#7a5c00}
.tag.red{background:#fff;border-color:var(--pn-danger);color:var(--pn-danger)}
.pv-chip{border-color:var(--pn-line)}
.pv-pill{border-color:var(--pn-line);background:#fff;color:var(--firefly-800)}
.pv-pill .k{color:var(--firefly-500);padding-right:8px;margin-right:2px;border-right:1px solid var(--pn-line)}
/* small pastel boxes, like the Portal's tiles */
.tile{border-color:transparent;padding:16px}
.tiles .tile:nth-child(4n+1){background:var(--pn-tile-blue)}
.tiles .tile:nth-child(4n+2){background:var(--pn-tile-lilac)}
.tiles .tile:nth-child(4n+3){background:var(--pn-tile-peach)}
.tiles .tile:nth-child(4n+4){background:var(--pn-tile-violet)}
.tile.accent{background:var(--pn-tile-green)}.tile.soft{background:var(--pn-tile-grey)}
.tile .label{color:var(--firefly-600)}.tile .hint{color:var(--firefly-500)}
/* input boxes: the Portal's border, blue focus */
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email],input[type=search],input[type=file],input[type=month],select,textarea{border-color:var(--pn-line-strong)}
input:focus,select:focus,textarea:focus{outline-color:var(--blue-600);border-color:var(--blue-600)}
/* helper text never below the readable grey */
.tile .hint,.muted.small{color:var(--firefly-400)}
/* dialogs and panels */
dialog.modal{border-radius:16px}
@media screen and (max-width:980px){.card{padding:18px}.card.flush{padding:0}}

/* menu collapsible to icons only, as in the Portal (on desktop only; the choice stays in the browser) */
.nav-collapse{display:none}
@media screen and (min-width:981px){
  .sidebar-inner{position:relative}
  .nav-collapse{display:grid;place-items:center;position:absolute;top:22px;right:10px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--firefly-500);cursor:pointer}
  .nav-collapse:hover{background:var(--firefly-25);color:var(--firefly-800)}
  .shell{transition:grid-template-columns .15s ease}
  html.nav-min .shell{grid-template-columns:84px minmax(0,1fr)}
  html.nav-min .sidebar-inner{padding-left:10px;padding-right:10px;align-items:stretch}
  html.nav-min .brand{justify-content:center;padding:0 0 8px}
  html.nav-min .brand span,html.nav-min .country-switch,html.nav-min .nav .who{display:none}
  html.nav-min .nav-collapse{position:static;margin:0 auto 10px}
  html.nav-min .sidebar .nav a,html.nav-min .sidebar .nav button{justify-content:center;font-size:0;gap:0;padding-left:0;padding-right:0}
  html.nav-min .menu-panel>.nav:not(.nav-bottom){padding-left:0;margin-left:0}
  html.nav-min .nav-icons{flex-direction:column;gap:2px;padding:0}
  html.nav-min .nav-icons .code{display:none}
  html.nav-min .nav-icons .notif-badge{right:8px;font-size:11px}
}
/* clickable row and detail panel on the right */
table.pv-list>tbody>tr:not(.total){cursor:pointer}
table.pv-list>tbody>tr:not(.total):hover>td{background:var(--blue-50)}
.pv-drawer-wrap{position:fixed;inset:0;z-index:60}
.pv-drawer-shade{position:absolute;inset:0;background:rgba(15,40,50,.35)}
.pv-drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(15,40,50,.18);outline:0;animation:pv-drawer-in .16s ease-out}
@keyframes pv-drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.pv-drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--pn-line)}
.pv-drawer header h2{font-size:18px;font-weight:600;margin:0;line-height:1.3;overflow-wrap:anywhere}
.pv-drawer-body{flex:1;overflow:auto;padding:8px 24px}
.pv-drawer dl{margin:0}
.pv-drawer dt{font-size:12px;font-weight:400;color:var(--firefly-400);padding-top:12px}
.pv-drawer dd{margin:0;padding:2px 0 12px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500;overflow-wrap:anywhere;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pv-drawer dd:last-child{border:0}
.pv-copy{flex:none;border:0;background:none;color:var(--blue-700);font:500 12px "Poppins",sans-serif;cursor:pointer;padding:2px 6px;border-radius:6px;opacity:0}
.pv-drawer dd:hover .pv-copy,.pv-copy:focus{opacity:1}.pv-copy:hover{background:var(--blue-50)}
.pv-drawer footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--pn-line)}
html.pv-drawer-on{overflow:hidden}
@media print{.pv-drawer-wrap{display:none!important}}
/* filters in a side panel on the right, as in the Portal (they apply immediately) */
.pv-fpanel{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(400px,100vw);background:#fff;border:0;flex-direction:column;flex-wrap:nowrap;gap:0;padding:0;align-items:stretch;overflow:auto;box-shadow:0 0 0 100vmax rgba(15,40,50,.35),-8px 0 30px rgba(15,40,50,.18);outline:0}
.pv-fhead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--pn-line);font-size:18px;position:sticky;top:0;background:#fff;z-index:1}
.pv-fhead strong{font-weight:600}
/* accordion as in the Portal (22 October 2026): one closed row per filter with its value on the right */
.pv-fsearch-wrap{padding:14px 20px 6px}
.pv-fpanel input.pv-fsearch{width:100%;max-width:none;height:38px;padding:0 12px 0 36px;border:1px solid var(--pn-line);border-radius:10px;font-size:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8f97' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px center/16px no-repeat}
.pv-fpanel input.pv-fsearch.small{height:34px;margin-bottom:8px}

.pv-fpanel .pv-fgroup{display:block;padding:0;border:0;border-bottom:1px solid var(--line)}
.pv-fpanel .pv-fgroup[hidden]{display:none}
.pv-fhd{display:flex;align-items:center;gap:10px;width:100%;padding:13px 4px;background:none;border:0;cursor:pointer;font:inherit;text-align:left;color:var(--firefly-900,#0f2832)}
.pv-fhd:hover{background:var(--firefly-25,#f6f8f9)}
.pv-fhd:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px;border-radius:6px}
.pv-fpanel .pv-fname{flex:1;min-width:0;flex-basis:auto;margin:0;font-size:13px;font-weight:600;color:inherit}
.pv-fval{font-size:12px;color:var(--blue-600);font-weight:500;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-fchev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);flex:none;margin-right:4px;transition:transform .15s}
.pv-fgroup.open .pv-fchev{transform:rotate(-135deg) translate(-1px,-1px)}
.pv-fbody{padding:2px 4px 14px}
.pv-fbody[hidden]{display:none}
.pv-fopts{display:flex;flex-direction:column;max-height:280px;overflow:auto;border:1px solid var(--pn-line);border-radius:10px;padding:4px}
.pv-fpanel label.pv-fopt{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:6px;background:none;font-size:13px;font-weight:400;color:inherit;cursor:pointer;margin:0;height:auto}
.pv-fpanel label.pv-fopt[hidden]{display:none}
.pv-fpanel label.pv-fopt:hover{background:var(--firefly-25,#f6f8f9)}
.pv-fpanel label.pv-fopt.on{color:var(--blue-600);background:var(--blue-50)}
.pv-fpanel label.pv-fopt input{position:static;opacity:1;pointer-events:auto;width:16px;height:16px;margin:0;flex:none;accent-color:var(--blue-600)}
.pv-fpanel label.pv-fopt:has(input:focus-visible){outline:0;box-shadow:inset 0 0 0 2px var(--blue-600)}
.pv-fpanel label.pv-fall{border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;font-weight:500}
.pv-fnums{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv-fnums input{width:100%;min-width:0;max-width:none}
.pv-fclear{display:inline-block;margin-top:10px;font-size:12px;color:var(--blue-600)}
.pv-fgroup:not(.set) .pv-fclear{display:none}
.pv-ffoot{margin-top:auto;display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--pn-line);position:sticky;bottom:0;background:#fff}
/* export menu */
.pv-xmenu{min-width:270px;padding:12px}
.pv-xname{font-size:12px;font-weight:500;color:var(--firefly-500);margin:6px 8px 2px}
.pv-xnote{font-size:12px;color:var(--firefly-400);margin:8px 8px 10px}
.pv-xmenu .btn{width:100%;justify-content:center}
/* empty states: never just a grey line */
.empty{padding:44px 24px;color:var(--firefly-500);font-weight:500}
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:var(--pn-tile-lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b6671' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h4'/%3E%3C/svg%3E") center/22px no-repeat}
.pv-fpanel .pv-fgroup{max-width:none;min-width:0;width:auto;align-self:stretch}

/* filter pills at the top of the pages: "Label | Value" on a single line, without the input box inside the pill */
.pill{border-color:var(--pn-line);padding:0 14px;min-height:38px;gap:10px;color:var(--firefly-800)}
.pill .k{color:var(--firefly-500);font-size:12px;font-weight:500;padding-right:10px;border-right:1px solid var(--pn-line);line-height:20px;white-space:nowrap}
.pill select,.pill input[type=text],.pill input[type=search],.pill input[type=date],.pill input[type=month],.pill input[type=number],.pill input[type=email]{border:0;border-radius:0;padding:0 2px;margin:0;width:auto;min-width:0;height:36px;background-color:transparent;outline:0;box-shadow:none;font:500 13px "Poppins",sans-serif;color:var(--blue-700)}
.pill input[type=search],.pill input[type=text]{width:180px;color:var(--firefly-800)}
.pill select{max-width:220px;padding-right:22px}
.pill:focus-within{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600)}
.pills{gap:10px}
/* time zone of the times shown, declared once (hub/clock.py) */
.nav .who small.tz{font-size:10.5px;color:var(--firefly-400,#8aa0a9)}
.m-tz{font:500 11px/1 "Poppins",sans-serif;color:var(--firefly-600,#4b6670);padding:5px 8px;border:1px solid var(--firefly-200,#dbe4e8);border-radius:999px;white-space:nowrap}
/* the hidden tooltip of the «i» must not widen the page on a phone */
button.info:not(:hover):not(:focus)::after{display:none}
/* phone and tablet tour (14 October 2026): nothing may stick out of the screen */
.kpi .card-head{min-width:0}.kpi .card-head>*{min-width:0}
@media screen and (max-width:700px){
  body.pv .tree-row{grid-template-columns:repeat(3,minmax(0,1fr));box-sizing:border-box}
  body.pv .tree-row>.tree-name{min-width:0;overflow-wrap:anywhere}
  body.pv .tree-children .tree-children .tree-name{padding-left:14px}
  body.pv .tree-children .tree-children .tree-children .tree-name{padding-left:28px}
  body.pv .tree-children .tree-children .tree-children .tree-children .tree-name{padding-left:42px}
  /* a field that spans two columns takes the only column there is */
  .form-grid>.u-94a5b46{grid-column:1/-1!important}
}
/* wide tables (merchant transactions): headers go on two lines so that the columns fit the screen */

/* row panel, compact (14 October 2026): label and value on the same line, extra sections as small tables */
.pv-drawer-body{padding:6px 20px 14px}
.pv-drawer dl{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.pv-drawer dt{padding:7px 10px 7px 0;font-size:12.5px;color:var(--firefly-500);border-bottom:1px solid var(--line);align-self:stretch}
.pv-drawer dd{padding:7px 0;font-size:13.5px;justify-content:flex-end;text-align:right;border-bottom:1px solid var(--line)}
.pv-drawer dd:last-child,.pv-drawer dt:nth-last-child(2){border-bottom:0}
.pv-drawer dd .pv-copy{order:-1}
.pv-dsec{margin-top:14px}
.pv-dsec h3{font-size:13px;font-weight:600;color:var(--firefly-800);margin:0 0 6px;text-transform:uppercase;letter-spacing:.03em}
table.pv-dtable{width:100%;border-collapse:collapse;font-size:13.5px}
table.pv-dtable th,table.pv-dtable td{padding:6px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:500}
table.pv-dtable tbody th{text-align:left;font-weight:400;color:var(--firefly-500);font-size:12.5px;padding-right:10px}
table.pv-dtable thead th{font-size:11.5px;color:var(--firefly-400);font-weight:500;text-transform:uppercase;letter-spacing:.03em}
table.pv-dtable thead th:not(:first-child){padding-left:10px}
table.pv-dtable td{padding-left:10px;font-variant-numeric:tabular-nums}
table.pv-dtable tr:last-child>*{border-bottom:0}
table.pv-dtable th,table.pv-dtable td{background:none!important}
.pv-drawer dt,.pv-drawer dd{display:flex;align-items:center}
.pv-drawer dd{justify-content:flex-end}
table.pv-dtable,table.pv-dtable tr,table.pv-dtable th,table.pv-dtable td{border-top:0!important;box-shadow:none!important}
/* dashboard charts: months under the chart at their place, cursor with date and value on hover */
.kpi-months{position:relative;display:block;height:16px;margin-top:8px}
.kpi-months span{position:absolute;top:0;transform:translateX(-50%);font-size:11px;white-space:nowrap}
.kpi-months span:first-child{transform:none}.kpi-months span:last-child:not(:first-child){transform:translateX(-100%)}
.kpi-cursor{position:absolute;top:0;width:0;border-left:1px solid rgba(15,40,50,.25);pointer-events:none}
.kpi-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;border:2px solid var(--kc,#1c478b);pointer-events:none;box-sizing:border-box}
.kpi-tip{position:absolute;top:-6px;transform:translateY(-100%);background:var(--firefly-900,#0f2832);color:#fff;border-radius:8px;padding:5px 9px;font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;display:flex;flex-direction:column;z-index:5}
.kpi-tip span{opacity:.75;font-size:11px}
@media (max-width:700px){.kpi-months span{font-size:9.5px}}
/* re-engagement pipeline (14 October 2026) */
.re-head-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.re-board{grid-template-columns:repeat(6,minmax(200px,1fr))}
.re-col{transition:background .12s,box-shadow .12s}
.re-col.drop{box-shadow:inset 0 0 0 2px var(--blue-600,#1c478b);background:var(--blue-50,#eef3fb)}
.re-col.col-won{background:var(--green-50,#eef8f1)}.re-col.col-lost{background:#f6f3f3}
.re-col-note{margin:-6px 4px 8px}
.re-card{cursor:pointer;user-select:none}
.re-card[draggable=true]{cursor:grab}.re-card.dragging{opacity:.45}
.re-card.late{border-left-color:var(--red-400,#e5534b)}.re-card.today{border-left-color:#e3a008}
.re-card .re-signal{color:var(--firefly-700)}
.re-card .re-next{font-size:11.5px;color:var(--firefly-800);line-height:1.3}
.re-card .re-date{display:inline-block;background:var(--firefly-25,#f3f6f8);border-radius:6px;padding:0 5px;margin-right:2px;font-weight:600}
.re-card.late .re-date{background:#fde8e7;color:var(--red-600,#c0392b)}.re-card.today .re-date{background:#fdf3d8;color:#8a6100}
.re-card .re-foot{display:flex;justify-content:space-between;gap:8px}
.re-card .re-owner{font-weight:500;color:var(--firefly-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-card.flash{animation:re-flash 1.6s ease-out}
@keyframes re-flash{0%{box-shadow:0 0 0 3px var(--blue-600,#1c478b)}100%{box-shadow:none}}
.re-suggest{margin-bottom:18px}
.re-suggest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;padding:0 22px 18px}
.re-suggest-item{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.re-suggest-item>div{display:flex;flex-direction:column;min-width:0}.re-suggest-item strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-suggest-item .tag{justify-self:start}.re-suggest-item button{grid-row:1/3;grid-column:2}
.re-d-signals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.re-d-signals div{background:var(--firefly-25,#f3f6f8);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.re-d-signals span{font-size:11px;color:var(--firefly-500)}.re-d-signals strong{font-size:13px}
.re-d-h{font-size:13px;font-weight:600;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.03em;color:var(--firefly-700)}
.re-history{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);max-height:260px;overflow:auto}
.re-history li{padding:2px 0 10px 14px;position:relative}.re-history li::before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--firefly-300,#b9c6cc)}
.re-history li.k-stage::before{background:var(--blue-600,#1c478b)}.re-history li.k-note::before{background:#e3a008}
.re-history p{margin:2px 0 0;font-size:13px;white-space:pre-wrap}
@media (max-width:700px){.re-suggest-list{padding:0 14px 14px}}
/* accountability tracker (14 October 2026) */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.acc-card{display:flex;flex-direction:column;gap:2px;padding:16px 18px;margin:0;color:inherit;text-decoration:none!important;border:1px solid var(--line);border-top:4px solid var(--green-500,#2f9e5b)}
.acc-card.warn{border-top-color:#e3a008}.acc-card.bad{border-top-color:var(--red-400,#e5534b)}
.acc-card.on{box-shadow:0 0 0 2px var(--blue-600,#1c478b)}
.acc-card:hover{border-color:var(--blue-600,#1c478b)}
.acc-title{font-size:13px;font-weight:600;color:var(--firefly-800)}
.acc-num{font-size:30px;line-height:36px;font-weight:500;margin-top:4px}
.acc-facts{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:12px;color:var(--firefly-600)}
.acc-facts .late{color:var(--red-600,#c0392b);font-weight:600}

.re-head-tools label{white-space:nowrap}
.acc-card.none{border-top-color:var(--firefly-200,#dbe4e8);opacity:.7}.acc-card.none .acc-num{color:var(--firefly-400)}
/* menu grouped by kind of work, administration in the ⚙ menu at the top right (15/10/2026) */
.nav-group{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--firefly-400,#8aa0a9);padding:14px 12px 4px}
.nav>.nav-group:first-child{padding-top:0}
.nav-admin{display:none}
.admin-menu{position:relative;display:inline-block}
.admin-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:7px}
.admin-menu>summary::-webkit-details-marker{display:none}
.admin-menu>summary .icon:last-child{transition:transform .15s ease}
.admin-menu[open]>summary .icon:last-child{transform:rotate(180deg)}
.admin-menu>summary.on{border-color:var(--blue-600);color:var(--blue-700);background:var(--blue-50)}
.admin-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:220px;background:#fff;border:1px solid var(--pn-rule,#C7D4DA);border-radius:12px;box-shadow:0 10px 30px rgba(15,40,50,.14);padding:6px;display:flex;flex-direction:column;gap:2px}
.admin-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--firefly-700);font-size:14px;font-weight:500;white-space:nowrap}
.admin-pop a:hover{background:var(--firefly-25);text-decoration:none;color:var(--firefly-800)}
.admin-pop a.on{background:var(--blue-50);color:var(--blue-700)}
.page-tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.page-head .pills .admin-menu,.page-head>.admin-menu{align-self:center}
.view-switch{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--firefly-25,#f1f5f7);margin-bottom:12px}
.view-switch a{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--firefly-500)}
.view-switch a:hover{text-decoration:none;color:var(--firefly-800)}
.view-switch a.on{background:#fff;color:var(--blue-700);box-shadow:0 1px 3px rgba(15,40,50,.12)}
@media screen and (min-width:981px){
  html.nav-min .nav-group{font-size:0;padding:8px 0 4px;margin:0 14px;border-top:1px solid var(--line)}
  html.nav-min .nav>.nav-group:first-child{border-top:0;padding:0}
}
@media screen and (max-width:980px){
  .nav-admin{display:block}
  div.nav-admin{display:flex;flex-direction:column;gap:2px}
  .admin-menu{display:none!important}
}
@media print{.admin-menu,.view-switch{display:none!important}}
.head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Dashboard (operations) and Cockpit (results and money), 15/10/2026 */
.goal-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-bottom:18px}
.goal-strip .t{font-weight:600}
.goal-strip .m{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.goal-strip .go{margin-left:auto;font-size:13px}
.goal-alert{display:flex;gap:10px;align-items:flex-start;background:var(--red-50);color:var(--red-600);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:13px}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.ops-grid>.card{margin-bottom:0}
.ops-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.money-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.ops-tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--firefly-800)}
a.ops-tile:hover{text-decoration:none;border-color:var(--firefly-200)}
.ops-tile span{font-size:12px;color:var(--muted)}
.ops-tile strong{font-size:24px;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}
.ops-tile strong.mid{font-size:18px}
.ops-tile em{font-style:normal;font-size:11.5px;color:var(--muted)}
.ops-tile.warn{background:var(--yellow-50);border-color:transparent}.ops-tile.warn strong{color:var(--yellow-700)}
.ops-tile.bad{background:var(--red-50);border-color:transparent}.ops-tile.bad strong,.ops-tile.bad em{color:var(--red-600)}
.ops-h{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.ops-list{list-style:none;margin:0;padding:0}
.ops-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.ops-list li>span{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.ops-list li>span.late,.goal-facts dd.late,.goal .small.late{color:var(--red-600);font-weight:600}
.goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.goal{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.goal-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.goal-name{font-weight:600}
.goal-big{font-size:28px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.goal-big .lbl{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px}
.goal-big small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:4px}
.goal-bar{position:relative;height:9px;border-radius:99px;background:var(--firefly-50);--c:var(--blue-600)}
.goal-bar.s-ahead{--c:var(--green-500)}.goal-bar.s-behind{--c:var(--red-400)}.goal-bar.s-none{--c:var(--firefly-300)}
.goal-bar>span{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--c)}
.goal-bar>.fc{opacity:.28}
.goal-bar>i{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--firefly-800);border-radius:2px}
.goal-facts{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px;margin:0}
.goal-facts dt{color:var(--muted)}.goal-facts dd{margin:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.goal-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted);margin-top:14px}
.goal-key span{display:inline-flex;align-items:center;gap:6px}
.goal-key .sw{width:18px;height:8px;border-radius:9px;background:var(--blue-600)}.goal-key .sw.fc{opacity:.28}
.goal-key .tk{width:2px;height:14px;background:var(--firefly-800)}

.share-bar{display:inline-flex;align-items:center;gap:8px}
.share-bar .bar{display:inline-block;width:70px;height:7px;border-radius:9px;background:var(--firefly-50);position:relative;overflow:hidden}
.share-bar .bar>span{position:absolute;left:0;top:0;bottom:0;background:var(--blue-600);border-radius:9px}
.share-bar>span:last-child{min-width:34px;text-align:right}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
.dot.g{background:var(--green-500)}.dot.a{background:var(--yellow-400)}.dot.r{background:var(--red-400)}
button.linkish{border:0;background:none;padding:0;font:inherit;color:var(--blue-700);cursor:pointer;text-align:left}
button.linkish:hover{text-decoration:underline}
.cockpit-table td{vertical-align:top}
@media screen and (max-width:1200px){.goals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:900px){.ops-grid{grid-template-columns:1fr}}
@media screen and (max-width:560px){.goals{grid-template-columns:1fr}}
/* Country list and country page with tabs (15/10/2026) */
a.country-link{color:inherit;gap:12px}
a.country-link:hover{text-decoration:none;border-color:var(--firefly-200);box-shadow:0 2px 10px rgba(15,40,50,.06)}
.country-line{font-size:13px;color:var(--muted)}
.country-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.country-todo li{background:var(--yellow-50);color:var(--yellow-700);border-radius:8px;padding:6px 10px;font-size:12.5px}
.country-ok{background:var(--green-50);color:var(--green-700);border-radius:8px;padding:6px 10px;font-size:12.5px;align-self:flex-start}
.country-code.inline{display:inline-grid;min-width:44px;height:44px;font-size:15px;vertical-align:middle;margin-right:6px}
.country-complete{background:var(--yellow-50);border-color:transparent;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 20px}
.country-complete ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.country-complete a{color:var(--yellow-700);text-decoration:underline}
.country-form{margin-top:16px}
.country-form .country-foot{display:flex;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.country-test{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.feature-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.feature-group{border:1px solid var(--line);border-radius:12px;padding:10px 16px 6px;margin:0;min-width:0}
.feature-group legend{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.feature-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer;font-weight:400}
.feature-group .feature-row:first-of-type{border-top:0}
.feature-row>span:last-child{display:flex;flex-direction:column;gap:2px}
@media screen and (max-width:900px){.feature-groups{grid-template-columns:1fr}}
/* targets page: months as rows, one column per measure (15/10/2026) */
.targets-card{background:#fff;border:1px solid var(--line);border-radius:16px;max-width:980px;overflow:hidden}
.targets-grid{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.targets-grid th,.targets-grid td{padding:6px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.targets-grid thead th{font-size:12px;font-weight:600;color:var(--muted);background:var(--firefly-25);padding-top:12px;padding-bottom:10px;vertical-align:bottom}
.targets-grid thead th.num{text-align:right}
.targets-grid th.m{text-align:left;font-weight:500;width:150px}
.targets-grid .copy-down{display:block;margin:4px 0 0 auto;border:0;background:none;color:var(--blue-700);font:500 11.5px inherit;font-family:inherit;cursor:pointer;padding:0}
.targets-grid .copy-down:hover{text-decoration:underline}
.targets-grid td.num{text-align:right}
.targets-grid input.t-in{width:100%;max-width:150px;text-align:right;border:1px solid var(--firefly-100);border-radius:8px;padding:6px 10px;font:inherit;background:#fff}
.targets-grid input.t-in:focus{outline:2px solid var(--blue-100);border-color:var(--blue-600)}
.targets-grid tr.locked th,.targets-grid tr.locked .ro{color:var(--firefly-400)}
.targets-grid tr.locked .tag{font-size:10.5px;margin-left:4px}
.targets-grid tr.qtot th,.targets-grid tr.qtot td{background:var(--firefly-25);font-weight:600;padding-top:8px;padding-bottom:8px;border-bottom:2px solid var(--firefly-100)}
.targets-grid tfoot th,.targets-grid tfoot td{font-weight:600;font-size:15px;padding-top:12px;padding-bottom:12px;border-bottom:0}
.targets-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--line)}
@media screen and (max-width:700px){.targets-grid th,.targets-grid td{padding:6px 8px}.targets-grid th.m{width:auto}.targets-card{overflow-x:auto}}

/* a value shown in a form that cannot be changed there: plain text, no box (security review, 16/10/2026) */
.readonly-value{padding:8px 0 2px;font-weight:600;color:var(--text);word-break:break-all}
/* Users and team lists: long sign-in emails wrap, so the last column («Gestisci») stays inside the card */
.team-card table td:nth-child(2){overflow-wrap:anywhere;word-break:break-word;min-width:150px}
.team-card table td:nth-child(7),.team-card table td:first-child{overflow-wrap:anywhere;word-break:break-word}   /* network list: person and sign-in emails */

/* second factor (security review, GH-001) */
.mfa-card{max-width:520px}
.mfa-steps{text-align:left;padding-left:20px;margin:16px 0 0}
.mfa-steps li{margin:0 0 14px}
.mfa-qr{width:200px;margin:10px auto}
.mfa-qr svg{width:200px;height:200px;display:block}
.mfa-secret{display:block;text-align:center;font-size:15px;letter-spacing:1px;margin:6px 0 2px;word-break:break-all}
.mfa-codes{list-style:none;padding:0;margin:14px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mfa-codes code{font-size:15px}
/* a list split in groups (Users: the country operators, then Paynt UAB) */
h3.list-title{margin:22px 0 10px;font-size:16px}
h3.list-title:first-child{margin-top:4px}

/* sign-in: required mark and the eye that shows the password, as on the Paynt Portal */

/* sign-in page measured on portal.paynt.com (21 October 2026): narrower card, smaller labels, grey «Log in» until filled */
.login-card:not(.mfa-card){max-width:426px;padding:32px 32px 34px;border-radius:24px}
.login-card:not(.mfa-card) img{height:48px;margin:0 auto 4px}

.login-card:not(.mfa-card) h1{font-size:20px;margin:0 0 30px}
.login-card .field{margin-top:22px}
.login-card .field label{font-size:14px;margin-bottom:6px}
.login-card .field input::placeholder{color:#7b8d95}
.login-card:not(.mfa-card) .btn{margin-top:84px}
.login-card .btn:disabled{background:#e5eaf0;color:#94a3ae;cursor:not-allowed}

@media (max-width:700px){.login-card:not(.mfa-card){padding:28px 22px 26px}.login-card:not(.mfa-card) .btn{margin-top:44px}}

/* background shapes of the sign-in pages, measured on portal.paynt.com at many screen sizes (21 October 2026): fixed sizes in
   pixels, anchored to the top-left (light blue) and bottom-right (lilac) corners, larger from 1920 px, smaller on narrow screens */
.login::before,.login::after{inset:auto}
.login::before{top:0;left:0;width:385px;height:331px;clip-path:polygon(0 0,100% 0,100% 42.6%,0 100%)}
.login::after{right:0;bottom:0;width:575px;height:525px;clip-path:polygon(100% 0,48.7% 28.6%,48.7% 72.8%,0 100%,100% 100%)}
@media (min-width:1920px){.login::before{width:464px;height:471px;clip-path:polygon(0 0,100% 0,100% 51.2%,0 100%)}.login::after{width:932px;height:851px}}
@media (max-width:1023px){.login::before{width:306px;height:269px;clip-path:polygon(0 0,100% 0,100% 43.9%,0 100%)}.login::after{width:425px;height:390px}}
@media (max-width:599px){.login::before{width:169px;height:149px;clip-path:polygon(0 0,100% 0,0 100%)}.login::after{width:326px;height:302px}}

/* date filter in the side panel (21 October 2026): one period dropdown, from/to only for a custom range */
.pv-fgroup.date .pv-fperiod{width:100%}
.pv-fgroup.date .pv-fdates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pv-ffoot .btn:last-child{min-width:140px;justify-content:center}
.pv-fgroup.date .pv-fdates[hidden]{display:none}
.pv-fgroup.date .pv-fdates input{width:100%;min-width:0}
/* bonus statement of a half-year (21 October 2026) */
.bonus-statement{padding:4px 22px 18px;max-width:720px}
.bonus-statement h3{margin:4px 0 10px;font-size:16px}
.bonus-statement table td:first-child{color:var(--muted);width:42%}
.bonus-statement table tr.total td{border-top:1px solid var(--line);padding-top:8px}

/* ---------- Onboarding pipeline as a CRM (21 October 2026) ---------- */
.ld-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:4px 0 18px}
.ld-kpi{background:#fff;border:1px solid #dde6ea;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ld-kpi span{font-size:12px;color:var(--muted);line-height:16px}
.ld-kpi strong{font-size:22px;line-height:28px;font-weight:600;color:var(--text)}
.ld-kpi.warn strong{color:#b42318}.ld-kpi.ok strong{color:#1d7a4c}
.ld-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.ld-col{background:#f1f5f8;border-radius:12px;padding:0 8px 8px;min-height:240px;border-top:3px solid #a6bbc4;transition:background-color .15s}
.ld-col-lead{border-top-color:#9aa5b8}.ld-col-prospect{border-top-color:#5b8def}.ld-col-proposal{border-top-color:#7c6cf0}
.ld-col-signed{border-top-color:#d79a1e}.ld-col-merchant{border-top-color:#2a9d8f}.ld-col-live{border-top-color:#1d7a4c;background:#eef8f2}
.ld-col-lost{border-top-color:#b42318;background:#f8f1f1}
.ld-col.drop{background:#e6eefc;box-shadow:inset 0 0 0 2px #a38aff}
.ld-board.dragging .ld-col{min-height:320px}
.ld-col-head{display:flex;align-items:center;gap:6px;padding:12px 4px 8px;position:sticky;top:0}
.ld-col-title{font-weight:600;font-size:13px;color:var(--text);flex:1}
.ld-count{font-size:12px;font-weight:600;color:#4b6671;background:#fff;border-radius:999px;padding:1px 8px}
.ld-late-badge{font-size:11px;font-weight:600;color:#fff;background:#b42318;border-radius:999px;padding:1px 7px}
.ld-col-note{font-size:11px;color:var(--muted);margin:-4px 4px 8px}
.ld-cards{display:flex;flex-direction:column;gap:8px;min-height:40px}
.ld-empty{font-size:12px;color:var(--muted);text-align:center;padding:18px 0;border:1px dashed #c7d4da;border-radius:10px;margin:0}
.ld-card{background:#fff;border:1px solid #e1e8ec;border-left:3px solid transparent;border-radius:10px;padding:10px 11px;cursor:pointer;box-shadow:0 1px 2px rgba(15,40,50,.05);transition:box-shadow .15s,transform .15s}
.ld-card:hover{box-shadow:0 4px 12px rgba(15,40,50,.10);transform:translateY(-1px)}
.ld-card:focus-visible{outline:2px solid #a38aff;outline-offset:1px}
.ld-card[draggable=true]{cursor:grab}.ld-card.dragging{opacity:.45;cursor:grabbing}
.ld-card.late{border-left-color:#b42318}.ld-card.today{border-left-color:#d79a1e}
.ld-card.flash{animation:ld-flash 1.2s}
@keyframes ld-flash{0%{box-shadow:0 0 0 3px rgba(163,138,255,.6)}100%{box-shadow:0 1px 2px rgba(15,40,50,.05)}}
.ld-card-top{display:flex;align-items:flex-start;gap:8px}
.ld-name{flex:1;font-size:13px;line-height:18px;font-weight:600;color:var(--text);word-break:break-word}
.ld-avatar{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#e3dcfe;color:#3d2a8a;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ld-sub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ld-chip{font-size:10px;font-weight:600;letter-spacing:.03em;border:1px solid #c7d4da;border-radius:4px;padding:0 4px;color:#4b6671}
.ld-next{display:flex;gap:6px;align-items:baseline;font-size:12px;color:var(--text);margin-top:8px;line-height:16px}
.ld-next.ld-none{color:#9aa5b8;font-style:italic}.ld-next.lost{color:#8a2c2c}
.ld-date{font-weight:600;font-size:11px;background:#eef3f6;border-radius:4px;padding:1px 5px;flex-shrink:0}
.ld-card.late .ld-date{background:#fdecec;color:#b42318}.ld-card.today .ld-date{background:#fff4e0;color:#8a5a00}
.ld-warn{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ld-warn span{font-size:11px;line-height:15px;color:#8a5a00;background:#fff4e0;border-radius:4px;padding:1px 6px}
.ld-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.ld-dots{display:flex;gap:3px}.ld-dots i{width:7px;height:7px;border-radius:50%;background:#dbe3e8}.ld-dots i.on{background:#2a9d8f}
.ld-src{font-size:11px;color:#9aa5b8}
.ld-days{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ld-days.stuck{color:#b42318;font-weight:600}
/* details window: data on the left, steps and history on the right */

.ld-d-warn{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ld-d-warn span{font-size:12px;color:#8a5a00;background:#fff4e0;border-radius:6px;padding:3px 8px}

.ld-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ld-steps li{display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 9px;border-radius:8px;background:#f6f8fa}
.ld-steps li.done{background:#eef8f2;color:#1d6b43}
.ld-step-mark{width:18px;height:18px;border-radius:50%;border:1.5px solid #a6bbc4;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ld-steps li.done .ld-step-mark{background:#1d7a4c;border-color:#1d7a4c;color:#fff}
.ld-step-label{flex:1}
.ld-step-act{font-size:12px;color:#1c478b;text-decoration:underline;white-space:nowrap}
.ld-history{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.ld-history li{border-left:2px solid #dbe3e8;padding:2px 0 2px 10px}.ld-history li p{margin:2px 0 0;font-size:13px}
.ld-history li.k-auto{border-left-color:#2a9d8f}.ld-history li.k-stage{border-left-color:#7c6cf0}.ld-history li.k-note{border-left-color:#5b8def}
@media (max-width:1280px){.ld-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.ld-board{grid-auto-columns:minmax(240px,82vw)}}
@media (max-width:600px){.ld-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* card of the onboarding pipeline: a side panel at full height, as in a CRM */
dialog.ld-drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100vh;max-height:100vh;width:min(600px,100vw);max-width:100vw;border:0;padding:0;background:#fff;box-shadow:-12px 0 40px rgba(15,40,50,.18);color:var(--text)}
dialog.ld-drawer[open]{display:flex;flex-direction:column;animation:ld-in .18s ease-out}
dialog.ld-drawer::backdrop{background:rgba(15,40,50,.35)}
@keyframes ld-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.ld-drawer form{display:flex;flex-direction:column;height:100%;min-height:0}
.ld-dr-head{display:flex;align-items:flex-start;gap:14px;padding:20px 24px 14px;border-bottom:1px solid #e6ecef}
.ld-dr-title{flex:1;min-width:0}.ld-dr-title h2{margin:0;font-size:20px;line-height:26px;word-break:break-word}
.ld-dr-title p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.ld-dr-owner{display:flex;align-items:center;gap:8px;font-size:12px}
.ld-dr-owner .k{display:block;color:var(--muted);font-size:11px}
.ld-dr-owner select{height:30px;padding:0 6px;font-size:13px;border:1px solid #d3dde2;border-radius:6px;max-width:170px}
.ld-avatar.lg{width:34px;height:34px;font-size:12px}
.ld-stages{display:flex;padding:12px 24px;gap:3px;border-bottom:1px solid #e6ecef;background:#fafbfc;overflow-x:auto}
.ld-stages button{flex:1;min-width:76px;border:0;background:#e6ecf0;color:#4b6671;font:inherit;font-size:11px;font-weight:600;line-height:14px;padding:8px 6px 8px 12px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%);transition:background-color .15s}
.ld-stages button:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:8px;border-radius:6px 0 0 6px}
.ld-stages button.past{background:#cfe9de;color:#1d6b43}.ld-stages button.now{background:#0f2832;color:#fff}
.ld-stages button:not(:disabled):hover{background:#d6dee3}.ld-stages button.now:hover{background:#243e48}
.ld-stages button:focus-visible{outline:2px solid #a38aff;outline-offset:1px}
.ld-dr-body{flex:1;overflow-y:auto;padding:18px 24px 24px;display:flex;flex-direction:column;gap:20px}
.ld-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ld-sec h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ld-link{border:0;background:none;color:#1c478b;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
.ld-next-box{background:#f4f7fb;border:1px solid #dfe7f3;border-radius:12px;padding:14px 16px}
.ld-next-view{display:flex;align-items:center;gap:10px}
.ld-next-date{font-size:12px;font-weight:600;background:#fff;border:1px solid #d3dde2;border-radius:6px;padding:3px 8px;white-space:nowrap}
.ld-next-date.late{background:#fdecec;border-color:#f3c4c4;color:#b42318}.ld-next-date.today{background:#fff4e0;border-color:#f1d9a6;color:#8a5a00}
.ld-next-text{flex:1;font-size:15px;line-height:21px;font-weight:500}.ld-next-text.none{color:#9aa5b8;font-weight:400;font-style:italic}
.ld-next-edit{display:grid;grid-template-columns:1fr 160px;gap:8px}
.ld-facts{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;margin:0;font-size:14px}
.ld-facts dt{color:var(--muted);font-size:13px}.ld-facts dd{margin:0;word-break:break-word}.ld-facts dd.none{color:#b5c0c7}
.ld-facts a{color:#1c478b}
.ld-composer{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ld-composer textarea{width:100%;resize:vertical;min-height:54px}
.ld-composer .btn{align-self:flex-end}
.ld-history .ld-h-meta{font-size:12px;color:var(--muted)}
.ld-history li.k-done{border-left-color:#1d7a4c}
.ld-lost-banner{display:flex;gap:10px;align-items:baseline;background:#fbeeee;border:1px solid #f0cccc;color:#8a2c2c;border-radius:10px;padding:10px 14px;font-size:14px}
.ld-dr-foot{display:flex;align-items:center;gap:10px;padding:12px 24px;border-top:1px solid #e6ecef;background:#fafbfc}
.btn.danger{color:#b42318;border-color:#f0c5c5}.btn.danger:hover{background:#fdf1f1}
@media (max-width:600px){.ld-dr-head,.ld-stages,.ld-dr-body,.ld-dr-foot{padding-left:16px;padding-right:16px}.ld-facts{grid-template-columns:1fr}.ld-facts dt{margin-top:6px}.ld-next-edit{grid-template-columns:1fr}}
/* filter pills as in the Portal (22 October 2026): «Label | value» in blue, a click opens the panel on that filter, the fifth on behind «+N more» */
.pv-pill{cursor:pointer}
.pv-pill .v{color:var(--blue-600);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.pv-pill-more{padding:4px 12px;border-color:#b9b0f0;background:var(--pn-tile-lilac,#efedff);color:var(--firefly-800);font:inherit;font-size:12px;font-weight:500}
.pv-more-menu{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;min-width:0;width:max-content}
.pv-more-menu[hidden]{display:none}
/* the filter rows sit in one bordered box, as in the Portal */
.pv-flist{margin:8px 20px 14px;padding:0 12px;border:1px solid var(--pn-line);border-radius:12px}
.pv-flist .pv-fgroup:last-child{border-bottom:0}

/* ---------- Conversations as an inbox (22 October 2026): folders | threads | open thread ---------- */
.ib-about{margin:10px 0}
.ib{display:grid;grid-template-columns:220px minmax(300px,380px) minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--pn-line);border-radius:16px;overflow:hidden;
  height:calc(100vh - var(--bars,0px) - 170px);min-height:560px;margin-top:16px}
.ib-nav{border-right:1px solid var(--pn-line);padding:12px 10px;overflow:auto;background:var(--firefly-25)}
.ib-box{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;color:var(--firefly-700);font-size:13px;text-decoration:none}
.ib-box:hover{background:#fff;text-decoration:none}
.ib-box.on{background:#fff;color:var(--blue-600);font-weight:600;box-shadow:inset 3px 0 0 var(--blue-600)}
.ib-box b{font-weight:600;font-size:11px;color:var(--firefly-500);min-width:20px;text-align:center}
.ib-box b.hot{background:var(--blue-600);color:#fff;border-radius:999px;padding:1px 7px}
.ib-sep{display:block;height:1px;background:var(--pn-line);margin:8px 6px}
.ib-navtitle{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--firefly-400);margin:16px 10px 6px}
.ib-navselect{display:none}
.ib-list{border-right:1px solid var(--pn-line);display:flex;flex-direction:column;min-height:0}
.ib-search{padding:12px;border-bottom:1px solid var(--pn-line)}
.ib-search input{width:100%;max-width:none;height:38px}
.ib-items{overflow:auto;flex:1}
.ib-item{display:flex;flex-direction:column;gap:3px;padding:11px 14px 11px 16px;border-bottom:1px solid var(--line);color:var(--firefly-700);text-decoration:none;position:relative}
.ib-item:hover{background:var(--firefly-25);text-decoration:none}
.ib-item.on{background:var(--blue-50)}
.ib-item.unread::before{content:"";position:absolute;left:6px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--blue-600)}
.ib-row1{display:flex;align-items:baseline;gap:6px}
.ib-row1 strong{flex:1;min-width:0;font-weight:500;color:var(--firefly-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.ib-item.unread .ib-row1 strong{font-weight:700}
.ib-row1 time{font-size:11px;color:var(--firefly-400);flex:none}
.ib-prio{width:8px;height:8px;border-radius:2px;flex:none;align-self:center}
.ib-prio.high{background:var(--orange-500)}.ib-prio.urgent{background:#d64545}
.ib-row2{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
.ib-org{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ib-chip{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--firefly-50);color:var(--firefly-600);white-space:nowrap}
.ib-chip.int{background:#efedff;color:#5b45c9}
.ib-chip.note{background:#fff3d6;color:#8a5a00}
.ib-snip{font-size:12.5px;color:var(--firefly-500);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ib-row3{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:2px}
.ib-st{font-weight:600}
.ib-st.us{color:#9a6a00}.ib-st.us.late{color:#c03535}.ib-st.partner{color:var(--blue-600)}.ib-st.team{color:#5b45c9}.ib-st.closed{color:var(--firefly-400)}
.ib-due{color:var(--firefly-500)}.ib-due.late{color:#c03535;font-weight:600}
.ib-at{font-weight:700;color:#fff;background:var(--blue-600);border-radius:50%;width:16px;height:16px;display:inline-grid;place-items:center;font-size:10px}
.ib-av{margin-left:auto;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:9.5px;font-weight:600;background:var(--firefly-100);color:var(--firefly-800);flex:none}
.ib-av.none{background:#fff;border:1px dashed var(--firefly-300);color:var(--firefly-400)}
.ib-av.big{margin:0;width:32px;height:32px;font-size:13px;background:var(--firefly-50)}
.ib-empty{padding:40px 20px;text-align:center;color:var(--firefly-500);font-size:13px}
.ib-thread{display:flex;flex-direction:column;min-width:0;min-height:0}
.ib-none{flex:1;display:grid;place-items:center;text-align:center;padding:30px;max-width:420px;margin:0 auto}
.ib-head{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--pn-line);flex-wrap:wrap}
.ib-back{display:none}
.ib-title{flex:1;min-width:220px}
.ib-title h2{margin:0;font-size:18px;line-height:1.3}
.ib-meta{font-size:12.5px;color:var(--firefly-500);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ib-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ib-tools form{margin:0}
.ib-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 250px;min-height:0}
.ib-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.ib-msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--firefly-25)}
.ib-msg{display:flex;gap:10px;align-items:flex-start;max-width:min(760px,92%)}
.ib-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.ib-bubble{background:#fff;border:1px solid var(--pn-line);border-radius:14px;padding:10px 14px;min-width:0}
.ib-msg.mine .ib-bubble{background:var(--blue-50);border-color:var(--blue-100)}
.ib-msg.note .ib-bubble{background:#fffaf0;border:1px dashed #e8b64c}
.ib-mhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--firefly-500);margin-bottom:4px}
.ib-mhead strong{color:var(--firefly-800)}.ib-mhead time{margin-left:auto;padding-left:10px}
.ib-text{line-height:1.5;overflow-wrap:anywhere}
.ib-mention{background:#e3ecff;color:var(--blue-700);border-radius:4px;padding:0 3px;font-weight:500}
.ib-files{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px}
.ib-files a{display:inline-flex;gap:6px;align-items:center}
.ib-event{align-self:center;font-size:11.5px;color:var(--firefly-500);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px;max-width:92%;text-align:center}
.ib-event span{color:var(--firefly-700);font-weight:500}
.ib-compose{border-top:1px solid var(--pn-line);padding:10px 14px 12px;background:#fff;position:relative}
.ib-compose.is-note{background:#fffaf0}
.ib-modes{display:flex;gap:4px;margin-bottom:8px}
.ib-modes label{white-space:nowrap;font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;cursor:pointer;color:var(--firefly-600);border:1px solid transparent}
.ib-modes label.on{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue-100)}
.ib-compose.is-note .ib-modes label.on{background:#fff3d6;color:#8a5a00;border-color:#f0d28a}
.ib-modes input{position:absolute;opacity:0;pointer-events:none}
.ib-compose textarea{width:100%;max-width:none;resize:vertical;min-height:56px}
.ib-cbar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ib-attach{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--blue-600);cursor:pointer;margin:0}
.ib-attach input{position:absolute;width:1px;height:1px;opacity:0}
.ib-attach:focus-within{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:6px}
.ib-fnames{font-size:12px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-hint{order:3;flex-basis:100%;font-size:11.5px;overflow-wrap:anywhere}
.ib-cbar .btn{margin-left:auto}
.ib-suggest{position:absolute;left:14px;bottom:calc(100% - 46px);z-index:5;background:#fff;border:1px solid var(--pn-line);border-radius:10px;box-shadow:0 8px 24px rgba(15,40,50,.16);padding:4px;min-width:240px}
.ib-suggest[hidden]{display:none}
.ib-suggest button{display:flex;justify-content:space-between;gap:16px;width:100%;border:0;background:none;padding:7px 10px;border-radius:6px;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.ib-suggest button span{color:var(--firefly-400);font-size:12px}
.ib-suggest button.on,.ib-suggest button:hover{background:var(--blue-50)}
.ib-readonly{padding:14px 18px;margin:0;border-top:1px solid var(--pn-line)}
.ib-side{border-left:1px solid var(--pn-line);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.ib-side form{margin:0}
.ib-side label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--firefly-500);margin:0}
.ib-side select,.ib-side input{width:100%;max-width:none;height:36px;font-size:13px;font-weight:400}
.ib-facts{margin:6px 0 0;font-size:12.5px;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;border-top:1px solid var(--line);padding-top:12px}
.ib-facts dt{color:var(--firefly-500)}.ib-facts dd{margin:0}
.ib-kind{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ib-kind label{display:flex;flex-direction:column;gap:2px;border:1px solid var(--pn-line);border-radius:12px;padding:10px 12px 10px 36px;position:relative;cursor:pointer;font-weight:400}
.ib-kind label input{position:absolute;left:12px;top:13px;margin:0}
.ib-kind label:has(input:checked){border-color:var(--blue-600);background:var(--blue-50)}
.ib-kind .muted{font-size:12px}
@media (max-width:1680px){.ib{grid-template-columns:200px minmax(280px,340px) minmax(0,1fr)}.ib-body{grid-template-columns:minmax(0,1fr)}
  .ib-side{border-left:0;border-top:1px solid var(--pn-line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));order:-1;padding:8px 14px;gap:6px 8px;overflow:visible}
  .ib-side select,.ib-side input{height:32px;font-size:12.5px;padding-top:0;padding-bottom:0}.ib-side label{font-size:10.5px;gap:2px}.ib-side .late.small{font-size:11px}
  .ib-facts{grid-column:1/-1;border-top:0;padding-top:0;display:flex;flex-wrap:wrap;gap:4px 14px}.ib-main{order:2}.ib-body{grid-template-rows:auto minmax(0,1fr)}}
@media (max-width:1100px){.ib{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}.ib-nav{display:none}
  .ib-list .ib-search{display:flex;flex-direction:column;gap:8px}}
@media (max-width:1100px){.ib-list::before{content:none}}
@media (max-width:820px){.ib{grid-template-columns:1fr;height:auto;min-height:0}
  .ib.has-thread .ib-list{display:none}.ib:not(.has-thread) .ib-thread{display:none}
  .ib-back{display:inline-block;width:100%;font-size:13px}
  .ib-items{max-height:none}.ib-msgs{max-height:none;min-height:240px}.ib-side{grid-template-columns:1fr 1fr}.ib-side form:first-child{grid-column:1/-1}
  .ib-kind{grid-template-columns:1fr}}
@media (max-width:1100px){.ib-navselect{display:block;padding:10px 12px 0}.ib-navselect select{width:100%;max-width:none}}
/* approvals: what the request changes, field by field (security review 22/10, GH-003) */
table.approval-lines{margin:6px 0 0;font-size:12px;width:auto;min-width:0}
table.approval-lines th{font-size:11px;padding:3px 8px;background:none}
table.approval-lines td{padding:3px 8px;white-space:normal}

/* KPI value: shrinks with its card and puts the «/count» on its own line when both do not fit (long amounts on a tablet) */
.kpi{container-type:inline-size}
.kpi-value{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;white-space:nowrap;font-size:clamp(20px,7.5cqi,32px);line-height:1.25}
.kpi-value small{font-size:clamp(14px,4.5cqi,20px)}
/* lease contracts to match: candidate, merchant ID, link, set aside (26/10/2026) */
.lease-row{display:grid;grid-template-columns:minmax(220px,2fr) minmax(120px,1fr) auto auto;gap:8px;align-items:center;margin:0}
.lease-row select,.lease-row input[type=text]{width:100%;min-width:0;max-width:none}
@media (max-width:980px){.lease-row{grid-template-columns:1fr 1fr}}
/* upfront calculator form (26/10/2026) */
.calc-partner{display:flex;gap:12px;align-items:center;margin:0 0 16px;max-width:520px}
.calc-partner select{flex:1;min-width:0}
.calc-form{display:flex;flex-direction:column;gap:12px}
.calc-form h2{margin:0}.calc-form p{margin:0}
.calc-form input{width:100%}
.calc-go{margin-top:4px}
.calc-warn{margin:0 24px 12px;padding:10px 14px;border-radius:10px;background:var(--danger-bg,#fdecec);color:var(--danger,#a32020);font-size:13px}
tr.calc-out td{color:var(--muted,#7a8691)}
/* demo-only container: who has access (30/10/2026) */
.demo-bar a.demo-link{color:#fff;font-weight:600;font-size:12px;text-decoration:underline;text-underline-offset:3px}
/* four-eyes table of the Country page (30/10/2026) */
table.matrix td{vertical-align:middle}table.matrix select{min-width:170px;width:100%}