/* Noble Merchant Dashboard — stijl
   Palet en typografie afgeleid van de Noble-merkstijl.
   Noble Green is hier een diepe bosgroen; pas de exacte hex aan zodra de
   definitieve merkkleur vaststaat (variabelen hieronder). */

:root{
  --paper:#FAF8F2;
  --ink:#16241D;
  --ink-soft:#4B5B52;
  --noble:#1E5F45;
  --noble-deep:#123A2B;
  --noble-soft:#E7F2EB;
  --spring:#38B871;
  --line:#E4DFD3;
  --card:#FFFFFF;
  --nature:#2E8B57;
  --social:#E08A3C;
  --innovation:#2F8FA8;
  --radius:18px;
  --shadow:0 1px 2px rgba(18,58,43,.04), 0 8px 28px rgba(18,58,43,.06);
  --font:'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.1}
b{font-weight:700}
a{color:inherit}

.shell{display:flex; min-height:100vh}

/* ---- Sidebar ------------------------------------------------------------- */
.side{
  width:232px; flex:0 0 232px; background:var(--noble-deep); color:#DDEBE2;
  display:flex; flex-direction:column; padding:26px 20px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:34px}
.brand-mark{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; border-radius:9px; flex:0 0 auto}
.brand-mark img{display:block; width:24px; height:24px; object-fit:contain}
.brand-name{font-weight:800; font-size:21px; color:#fff; letter-spacing:-.02em}
.nav{display:flex; flex-direction:column; gap:2px}
.nav-item{
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color:#BFD6C9; font-weight:600; font-size:14px; transition:.15s;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item.active{background:var(--noble); color:#fff}
.side-foot{margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.1)}
.merchant-name{color:#fff; font-weight:700; margin-bottom:12px}
.merchant-tier{font-size:12px; color:var(--spring); margin-bottom:12px; font-weight:600}
.logout{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#EAF6EF; text-decoration:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:9px 14px; border-radius:10px; transition:.15s}
.logout:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3)}
.logout svg{flex:0 0 auto}

/* ---- Main ---------------------------------------------------------------- */
.main{flex:1; padding:34px clamp(20px,4vw,48px); max-width:1180px}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; color:var(--noble)}
.topbar h1{font-size:30px; margin-top:4px}
.period{display:flex; gap:6px}
.chip{
  padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-soft); transition:.15s;
}
.chip:hover{border-color:var(--noble)}
.chip.on{background:var(--noble); color:#fff; border-color:var(--noble)}
.chip.sm{padding:5px 11px; font-size:12px}

.notice{
  margin:22px 0 26px; padding:12px 16px; background:var(--noble-soft);
  border-radius:12px; font-size:13px; color:var(--noble-deep);
}

/* ---- Living impact hero -------------------------------------------------- */
.hero{
  display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:center;
  background:var(--noble); color:#EAF6EF; border-radius:24px;
  padding:36px; margin-bottom:30px; position:relative; overflow:hidden;
}
.blob{display:flex; align-items:center; justify-content:center}
.blob-inner{
  width:240px; height:240px; background:var(--spring); color:var(--noble-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  border-radius:62% 38% 56% 44% / 50% 56% 44% 50%;
  animation:morph 14s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:62% 38% 56% 44% / 50% 56% 44% 50%}
  50%{border-radius:42% 58% 44% 56% / 56% 44% 56% 44%}
}
.blob-eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.8}
.blob-amount{font-size:34px; font-weight:800; letter-spacing:-.03em; margin:6px 0}
.blob-sub{font-size:12.5px; font-weight:600; opacity:.85; line-height:1.35}
.hero-copy h2{font-size:24px; color:#fff; margin-bottom:10px}
.hero-copy p{color:#CFE6D9; max-width:56ch; margin:0 0 18px}
.hero-split{display:flex; gap:26px; font-size:14px}
.hero-split b{margin-left:4px; color:#fff}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}
.dot.reserved{background:#CFE6D9}
.dot.paid{background:#fff}

/* ---- KPI's --------------------------------------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.kpi.accent{background:var(--noble-soft); border-color:#CFE3D6}
.kpi-label{font-size:12.5px; font-weight:600; color:var(--ink-soft)}
.kpi-value{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px}
.kpi-foot{font-size:12px; color:var(--ink-soft)}

/* ---- Cards --------------------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:24px}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:8px}
.card-head h3{font-size:18px}
.card-hint{font-size:13px; color:var(--ink-soft)}
.empty{color:var(--ink-soft); padding:14px 0}

/* ---- Payment mix --------------------------------------------------------- */
.mix{display:flex; flex-direction:column; gap:12px}
.mix-row{display:grid; grid-template-columns:120px 1fr 60px 130px; gap:14px; align-items:center}
.mix-name{font-weight:600; font-size:14px}
.mix-bar{height:12px; background:#EFEADD; border-radius:999px; overflow:hidden}
.mix-bar span{display:block; height:100%; background:var(--ink-soft); border-radius:999px}
.mix-row.is-noble .mix-bar span{background:var(--spring)}
.mix-row.is-noble .mix-name{color:var(--noble)}
.mix-share{font-weight:700; text-align:right}
.mix-aov{font-size:12.5px; color:var(--ink-soft); text-align:right}

/* ---- Table --------------------------------------------------------------- */
.filter{display:flex; gap:6px}
.table-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; padding:0 12px 10px}
.tbl td{padding:12px; border-top:1px solid var(--line)}
.tbl .r{text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.tag{display:inline-block; padding:3px 9px; border-radius:999px; background:#F0ECE1; font-size:12px; font-weight:600}
.tag-noble{background:var(--noble-soft); color:var(--noble)}
.bucket{display:inline-flex; align-items:center; gap:7px; font-size:13px}
.bdot{width:9px; height:9px; border-radius:50%}
.status{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px}
.sdot{display:none; width:9px; height:9px; border-radius:50%; background:currentColor; flex:0 0 auto}
.tx-time{color:var(--ink-soft); font-weight:400}
.s-reserved{background:#FBF1DF; color:#9A6A1C}
.s-paid{background:var(--noble-soft); color:var(--noble)}
.s-refunded{background:#F3E4E2; color:#9A4A40}
.s-none{background:#F0ECE1; color:var(--ink-soft)}
.table-foot{font-size:12px; color:var(--ink-soft); margin-top:14px}

.foot{color:var(--ink-soft); font-size:12.5px; margin-top:34px}

/* ---- Login --------------------------------------------------------------- */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:38px; width:100%; max-width:380px; box-shadow:var(--shadow)}
.auth .brand{justify-content:center; margin-bottom:8px}
.auth .brand-name{color:var(--noble-deep)}
.auth .brand-mark{color:var(--spring)}
.auth h1{font-size:22px; text-align:center; margin-bottom:6px}
.auth p.sub{text-align:center; color:var(--ink-soft); font-size:14px; margin:0 0 24px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.field input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font:inherit; background:var(--paper)}
.field input:focus{outline:2px solid var(--spring); outline-offset:1px; border-color:var(--spring)}
.btn{width:100%; padding:12px; border:0; border-radius:11px; background:var(--noble); color:#fff; font:inherit; font-weight:700; cursor:pointer; transition:.15s}
.btn:hover{background:var(--noble-deep)}
.err{background:#F3E4E2; color:#9A4A40; padding:10px 13px; border-radius:11px; font-size:13.5px; margin-bottom:16px}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr; text-align:center}
  .blob{justify-self:center}
  .hero-split{justify-content:center}
}
@media (max-width:760px){
  body{overflow-x:hidden}
  .side{position:fixed; bottom:0; top:auto; left:0; right:0; width:100%; height:auto; flex-direction:row;
        padding:8px 14px; z-index:20; justify-content:space-between; align-items:center; gap:8px}
  .brand{display:none}
  .nav{flex-direction:row; gap:4px}
  .nav-item{font-size:12px; padding:8px 10px}
  .side-foot{margin:0; padding:0; border:0; display:flex; align-items:center}
  .merchant-name{display:none}
  .logout{font-size:12px; padding:8px 12px}
  .main{padding:24px 16px 92px; max-width:100%}
  .topbar h1{font-size:24px}
  .period{flex-wrap:wrap}
  .mix-row{grid-template-columns:90px 1fr 50px}
  .mix-aov{display:none}
  .hero{padding:24px}
}

/* Smalle telefoons: beknopte tabel — minder belangrijke kolommen verborgen */
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr); gap:10px}
  .kpi-value{font-size:22px}
  .blob-inner{width:200px; height:200px}
  .blob-amount{font-size:28px}
  .card{padding:16px}
  .tbl{font-size:12px}
  .tbl th, .tbl td{padding:9px 5px}
  .col-order, .col-varfee, .tx-time{display:none}
  .status{background:transparent !important; padding:0; gap:0}
  .status .stext{display:none}
  .status .sdot{display:inline-block}
  .tx-detail-grid{grid-template-columns:1fr; gap:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob-inner{animation:none}
}

/* ---- Badges- & instellingen-pagina's ------------------------------------- */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.field select{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font:inherit; background:var(--paper); color:var(--ink)}
.field select:focus{outline:2px solid var(--spring); outline-offset:1px; border-color:var(--spring)}
.color-row{display:flex; gap:10px; align-items:center}
.color-row input[type=color]{width:46px; height:42px; border:1px solid var(--line); border-radius:11px; background:var(--paper); padding:3px; cursor:pointer}
.color-row input[type=text]{flex:1; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font:inherit; background:var(--paper)}
.preview-pane{display:flex; align-items:center; justify-content:center; min-height:160px; padding:24px;
  background:repeating-conic-gradient(#f3f0e8 0% 25%, #faf8f2 0% 50%) 50% / 22px 22px; border-radius:12px; transition:background .2s}
.codebox{background:#11271d; color:#cfe6d9; padding:16px 18px; border-radius:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-all; overflow-x:auto; margin:0}
.bucket-choice{display:flex; flex-direction:column; gap:10px}
.bucket-opt{display:flex; align-items:center; gap:11px; padding:13px 16px; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; font-weight:600; transition:.15s}
.bucket-opt:hover{border-color:var(--noble)}
.bucket-opt.on{border-color:var(--noble); background:var(--noble-soft)}
.bucket-opt input{accent-color:var(--noble)}
@media (max-width:900px){ .twocol{grid-template-columns:1fr} }

/* ---- Transactie-uitklap --------------------------------------------------- */
.tx-row{cursor:pointer}
.tx-row:hover{background:var(--noble-soft)}
.tx-row:focus-visible{outline:2px solid var(--spring); outline-offset:-2px}
.tx-row.open{background:var(--noble-soft)}
.chev-col{width:26px; text-align:center; color:var(--ink-soft)}
.chev{display:inline-block; transition:transform .15s}
.tx-row.open .chev{transform:rotate(90deg)}
.tx-detail > td{background:#FBFAF5; border-top:0; padding:0 12px 18px}
.tx-detail-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-top:6px}
.tx-block{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.tx-block-wide{grid-column:1 / -1}
.tx-block-h{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--noble); font-weight:700; margin-bottom:10px}
.tx-block dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px}
.tx-block dt{color:var(--ink-soft); font-size:13px}
.tx-block dd{margin:0; text-align:right; font-size:13px; font-weight:600}
@media (max-width:900px){ .tx-detail-grid{grid-template-columns:1fr} }

/* Uitklap: expliciet via klasse i.p.v. het hidden-attribuut */
.tx-detail{display:none}
.tx-detail.show{display:table-row}

/* ---- Datumpicker, grafiek, export ---------------------------------------- */
.daterange{display:inline-flex; align-items:center; gap:6px; margin-left:4px}
.daterange input[type=date]{border:1px solid var(--line); border-radius:999px; padding:6px 10px; font:inherit; font-size:13px; color:var(--ink); background:var(--paper)}
.daterange input[type=date]:focus{outline:2px solid var(--spring); outline-offset:1px; border-color:var(--spring)}
.dr-sep{color:var(--ink-soft)}
.daterange .chip{cursor:pointer; border:0}

.chart-toggle{display:inline-flex; gap:6px}
.chart-toggle .chip{cursor:pointer; border:0}
.chart-wrap{position:relative; height:300px; margin-top:4px}

.export-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.export-btn{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink); transition:.15s; background:var(--paper)}
.export-btn:hover{border-color:var(--noble); background:var(--noble-soft)}
.export-ic{display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:10px; background:var(--noble-soft); color:var(--noble); font-size:18px}
.export-txt{display:flex; flex-direction:column; gap:2px}
.export-txt small{color:var(--ink-soft); font-size:12px}
@media (max-width:760px){ .export-row{grid-template-columns:1fr} .chart-wrap{height:240px} .daterange{margin-left:0} }

/* ---- Gereserveerd vs. uitgekeerd (hero) ---------------------------------- */
.split{margin-top:6px}
.split-head{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; margin-bottom:8px}
.split-head .dot{margin-right:6px}
.split-bar{height:10px; border-radius:999px; background:#E0A030; overflow:hidden}
.split-bar span{display:block; height:100%; background:var(--noble); border-radius:999px}
.split-note{font-size:12px; color:var(--ink-soft); margin-top:8px}
.hero .split-head{color:#EAF6EF}
.hero .split-note{color:#9FBCAD}
.hero .split-bar{background:rgba(224,160,48,.85)}
.hero .split-bar span{background:var(--spring)}
.split-head .dot.paid{background:var(--spring)}
.split-head .dot.reserved{background:#E0A030}

/* ---- Mijn gegevens ------------------------------------------------------- */
.check{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); cursor:pointer; line-height:1.4}
.check input{margin-top:2px; accent-color:var(--noble); width:16px; height:16px; flex:0 0 auto}
.btn.ghost{background:#fff; color:var(--noble); border:1px solid var(--noble)}
.btn.ghost:hover{background:var(--noble-soft)}