/* North Ferry portal — same palette and type as northferry.nl */
:root{
  --burgundy:#006786; --wine:#004961; --deep:#0d2641; --accent:#0088b0;
  --ink:#201e1d; --muted:#5f5b59; --paper:#f3f2f2; --white:#ffffff;
  --line:rgba(0,136,176,.35); --line-strong:rgba(0,136,176,.5); --line-soft:rgba(0,136,176,.2);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--white)}
a{color:var(--burgundy)} a:hover{color:var(--wine)}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--wine);letter-spacing:-.01em;line-height:1.15;margin:0}
h1{font-size:clamp(1.8rem,3vw,2.4rem)} h2{font-size:1.45rem} h3{font-size:1.15rem}
p{margin:0}
:focus-visible{outline:3px solid var(--burgundy);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.eyebrow{font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--burgundy)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:10px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);position:sticky;top:0;z-index:20;min-height:101px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.logo-link{display:block;line-height:0}
.logo-link img{width:246px;height:70px;display:block}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--paper);color:var(--wine);font-weight:600;font-size:.875rem}
.user{display:flex;align-items:center;gap:10px;font-weight:500}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--burgundy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--burgundy);border-radius:999px;padding:9px 18px;min-height:44px;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;background:transparent;color:var(--burgundy);transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--paper);color:var(--wine)}
.btn-primary{background:var(--burgundy);color:#fff}
.btn-primary:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.btn-sm{min-height:36px;padding:5px 14px;font-size:.875rem}
.btn-danger{border-color:#A1271B;color:#A1271B}
.btn-danger:hover{background:#FBE9E7;color:#7E1A10}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-link{border:0;background:none;padding:6px 0;color:var(--burgundy);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;align-self:flex-start}
.btn-link:hover{color:var(--wine)}

/* ---------- layout ---------- */
.layout{display:flex;flex-wrap:wrap;min-height:calc(100vh - 101px)}
.sidenav{flex:1 1 220px;max-width:260px;padding:28px 16px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.sidenav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sidenav a{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:44px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500}
.sidenav a:hover{background:var(--paper);color:var(--ink)}
.sidenav a[aria-current="page"]{background:var(--burgundy);color:#fff;font-weight:600}
.navgroup{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;min-height:44px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;font-weight:500;text-align:left;cursor:pointer}
.navgroup:hover{background:var(--paper)}
.navgroup .caret{margin-left:auto;display:inline-flex;transition:transform .15s;color:var(--muted)}
.navgroup[aria-expanded="true"] .caret{transform:rotate(90deg)}
.group.has-active>.navgroup{color:var(--burgundy);font-weight:600}
.sidenav .subnav{margin:4px 0 0 18px;padding-left:10px;border-left:2px solid var(--line-soft);gap:4px}
.sidenav .subnav a{padding:9px 12px;min-height:40px}
.helpbox{padding:16px;border-radius:12px;background:var(--paper);font-size:.9rem;color:var(--wine)}
.helpbox strong{display:block;margin-bottom:4px}
.content{flex:999 1 560px;min-width:0;padding:32px 36px 56px;display:flex;flex-direction:column;gap:24px}
.boot{flex:1;padding:48px 36px;color:var(--muted)}
@media (max-width:820px){
  .topbar{padding:10px 16px;min-height:0}
  .layout{align-content:flex-start}
  .logo-link img{width:169px;height:48px}
  .user .name{display:none}
  .sidenav{max-width:none;flex-basis:100%;border-right:0;border-bottom:1px solid var(--line-soft);padding:10px 12px;gap:0}
  .sidenav ul{flex-direction:row;flex-wrap:wrap;gap:4px}
  .sidenav a{padding:8px 12px}
  .helpbox{display:none}
  .sidenav li.group{display:contents}
  .navgroup{width:auto;padding:8px 12px}
  .sidenav .subnav{flex-direction:row;margin:0;padding-left:4px;border-left:2px solid var(--line-soft)}
  .content{padding:24px 16px 48px}
}

/* ---------- page head / cards ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.page-head p{margin-top:6px}
.card{border:1px solid var(--line-strong);border-radius:16px;background:#fff;padding:24px;display:flex;flex-direction:column;gap:16px}
.card-soft{background:var(--paper)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;align-items:start}
.block{display:flex;flex-direction:column;gap:14px}
.back{font-weight:600;text-decoration:none}

/* ---------- dashboard viewer ---------- */
.frame-wrap{border:1px solid var(--line-strong);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 24px 60px -36px rgba(13,38,65,.45)}
.frame-wrap iframe{display:block;width:100%;height:max(640px,calc(100vh - 290px));border:0;background:#fff}
.frame-wrap:fullscreen{border-radius:0;border:0}
.frame-wrap:fullscreen iframe{height:100vh}
.admin-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:12px;background:#FFF1D6;color:#5B3B00;font-weight:600}
.admin-bar a{color:#5B3B00}
.progress-card{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding:40px;border-radius:16px;background:var(--paper);border:1px solid var(--line-strong)}
.progress-card .circle{width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--burgundy)}
.progress-card .text{flex:1 1 360px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.progress-card p{max-width:62ch}
.progress-card .big{font-size:1.1rem}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
label.check{flex-direction:row;align-items:center;gap:10px;font-weight:500;font-size:.95rem}
label.check input{width:20px;height:20px;accent-color:var(--burgundy)}
input[type=text],input[type=email],input[type=password],input[type=file],select{font:inherit;font-weight:400;font-size:1rem;padding:10px 12px;min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);width:100%}
input[type=file]{padding:8px}
input:focus,select:focus{outline:2px solid var(--burgundy);outline-offset:0;border-color:var(--burgundy)}
input[readonly]{background:var(--paper);color:var(--muted)}
.hint{font-weight:400;color:var(--muted);font-size:.85rem}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.alert{padding:12px 16px;border-radius:10px;background:#FBE9E7;color:#8A1C12;border:1px solid #F3C2BC;white-space:pre-line}
.alert-ok{background:#E6F3EE;color:#1E5A45;border-color:#B9DCCD}

/* ---------- upload ---------- */
.dropzone{border:2px dashed rgba(0,103,134,.4);border-radius:16px;padding:36px 24px;text-align:center;background:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .15s,border-color .15s}
.dropzone.drag{background:var(--paper);border-color:var(--burgundy)}
.dropzone:focus-within label.btn{outline:3px solid var(--burgundy);outline-offset:3px}
.dropzone .icon-lg{color:var(--burgundy)}
.dropzone strong{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--wine)}
.upload-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.upload-queue li{padding:8px 12px;border-radius:8px;background:var(--paper);font-size:.9rem}
.upload-queue li.err{background:#FBE9E7;color:#8A1C12}
.upload-queue li.ok{background:#E6F3EE;color:#1E5A45}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;background:var(--white);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;white-space:nowrap}
td.nowrap{white-space:nowrap}
td .sub{display:block;color:var(--muted);font-size:.85rem}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.empty{padding:28px;text-align:center;color:var(--muted)}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--burgundy);cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:rgba(0,103,134,.35)}
.linkish:hover{color:var(--wine)}
td select{min-height:36px;padding:4px 8px;width:auto}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;background:var(--paper);color:var(--wine)}
.badge-ok{background:#E6F3EE;color:#1E5A45}
.badge-warn{background:#FFF1D6;color:#6B4500}
.badge-off{background:#ececeb;color:#55514f}
.badge-info{background:#E8EEF8;color:#24406E}
.kv{display:flex;flex-direction:column;gap:6px;margin:0}
.kv>div{display:grid;grid-template-columns:minmax(150px,40%) 1fr;gap:12px}
.kv dt{font-weight:600}
.kv dd{margin:0}
.warn-text{color:#8A1C12}
.stack{display:flex;flex-direction:column;gap:8px}
.stack:empty{display:none}
table.vat-boxes .vat-amount{font-variant-numeric:tabular-nums;font-weight:600;font-size:1.05rem}
table.vat-boxes tr.grand td,table tr.grand td{border-top:2px solid var(--line-strong);font-weight:600}
tr.muted-row td{color:var(--ink-soft,#777)}
.badge-bad{background:#FBE9E7;color:#8E2216}
.vies{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--paper)}
.vies-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vies-head .btn{margin-left:auto}
.vies p{margin:0;font-size:.9rem}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters label{min-width:220px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;width:min(520px,calc(100% - 32px));pointer-events:none}
.toast div{padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.4)}
.toast div.err{background:#8A1C12}

/* ---------- sign-in pages ---------- */
body.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;background:linear-gradient(180deg,var(--white),var(--paper))}
.auth-top{width:min(440px,100%);display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:.9rem}
.auth-top a{font-weight:600;text-decoration:none}
.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line-strong);border-radius:18px;padding:32px;box-shadow:0 30px 70px -40px rgba(13,38,65,.5);display:flex;flex-direction:column;gap:20px}
.auth-card .logo{width:246px;height:70px;align-self:center}
.view{display:flex;flex-direction:column;gap:16px}
.auth-card .btn-primary{width:100%}
.auth-foot{margin-top:16px;font-size:.85rem;color:var(--muted);text-align:center;max-width:440px}

/* ---------- invoices ---------- */
input[type=date],input[type=number],input[type=search],textarea{font:inherit;font-weight:400;font-size:1rem;padding:10px 12px;min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);width:100%}
textarea{resize:vertical;line-height:1.4;min-height:44px;overflow:hidden}
input:disabled,select:disabled,textarea:disabled{background:var(--paper);color:var(--ink);opacity:1;cursor:default;border-color:var(--line-soft)}
.btn-ghost{border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:#A1271B;background:#FBE9E7}
.title-badge{display:inline-block;margin-left:12px;vertical-align:middle;font-family:var(--sans,inherit)}
.title-badge .badge{font-size:.85rem}
.invoice-split{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media (max-width:980px){.invoice-split{grid-template-columns:1fr}}
.billto address{font-style:normal;display:flex;flex-direction:column;gap:2px}
.billto address strong{font-size:1.05rem}
.billto .alert{font-size:.9rem;padding:10px 12px}
.billto a{font-weight:600}
.template-note{padding:10px 12px;border-radius:10px;font-weight:600;font-size:.9rem;background:#fff;border:1px solid var(--line-soft)}
.template-note.nl{color:#24406E}
.template-note.eu{color:var(--wine)}
table.lines td{vertical-align:top;padding:8px 10px}
table.lines input,table.lines textarea{min-height:40px;padding:8px 10px}
table.lines input{text-align:right}
table.lines .col-qty{width:110px}
table.lines .col-price{width:150px}
table.lines .col-amount,table.lines td.amount{width:140px;padding-top:17px;font-variant-numeric:tabular-nums}
table.lines .col-del{width:56px}
table.lines tr.invalid textarea,table.lines tr.invalid input{border-color:#C0392B;background:#FFF6F5}
.lines-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px}
.totals{margin:0;min-width:300px;display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;gap:24px}
.totals dt{color:var(--muted)}
.totals dd{margin:0}
.totals .grand{border-top:2px solid var(--burgundy);padding-top:8px;margin-top:4px;font-weight:600;font-size:1.1rem}
.totals .grand dt{color:var(--ink)}
.pdf-frame iframe{height:min(1100px,calc(100vh - 140px));min-height:640px}
.dialog{border:1px solid var(--line-strong);border-radius:16px;padding:24px;width:min(460px,calc(100% - 32px));box-shadow:0 30px 70px -30px rgba(13,38,65,.5)}
.dialog::backdrop{background:rgba(32,30,29,.45)}
.totals{margin-left:auto}
th.num{text-align:right}
/* ---------- profit & loss ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.tile{border:1px solid var(--line-strong);border-radius:16px;background:#fff;padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.tile span{font-size:.85rem;color:var(--ink-soft,#5f5b59)}
.tile strong{font-size:1.6rem;font-variant-numeric:tabular-nums;font-weight:600}
.tile.neg strong{color:#8A1C12}
table.pl td.num,table.pl th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.pl tr.section td{font-weight:600;background:var(--paper)}
table.pl tr.sum td{font-weight:600;border-top:1px solid var(--line-strong)}
table.pl tr.profit td{font-weight:700;border-top:2px solid var(--line-strong);font-size:1.05rem}
table.pl td.indent{padding-left:28px}
/* ---------- drivers / units ---------- */
th button.sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
th button.sort:focus-visible{outline:3px solid var(--burgundy);outline-offset:2px;border-radius:4px}
th button.sort::after{content:"";width:0;height:0;border:4px solid transparent;opacity:.35;border-top-color:currentColor;margin-top:4px}
th[aria-sort="ascending"] button.sort::after{opacity:1;border-top-color:transparent;border-bottom-color:currentColor;margin-top:-4px}
th[aria-sort="descending"] button.sort::after{opacity:1}
td.code{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
td.num{font-variant-numeric:tabular-nums}
td .unit{color:var(--muted);margin-left:4px}
.dialog-wide{width:min(620px,calc(100% - 32px))}
.dialog h2{margin-bottom:4px}
.count-line{color:var(--muted);font-size:.9rem}
.seg{display:inline-flex;align-self:flex-start;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper)}
.seg button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:transparent;color:var(--wine);font:inherit;font-weight:600;padding:8px 18px;min-height:40px;cursor:pointer}
.seg button:hover{background:#fff}
.seg button[aria-pressed="true"]{background:var(--burgundy);color:#fff}
.seg .seg-count{font-size:.8rem;font-weight:600;padding:1px 8px;border-radius:999px;background:rgba(0,103,134,.12)}
.seg button[aria-pressed="true"] .seg-count{background:rgba(255,255,255,.22)}