/* iCt Horse — single-page factuur-generator
   Palette afgestemd op DESIGN_TOKENS.md (dark, accent #5bd6ff). */

:root{
  --bg:#0b0f14; --panel:#121925; --muted:#7f90a6; --text:#e7eef8;
  --line:#233041; --accent:#5bd6ff; --danger:#ff5b7a; --ok:#61ffb0;
  --warn:#ffd36a;
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:linear-gradient(180deg,#070a0f,#0b0f14);
  color:var(--text);
  min-height:100vh;
}

header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,15,20,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wrap{max-width:1180px; margin:0 auto; padding:16px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between}
h1{font-size:18px; margin:0; letter-spacing:.2px}
.sub{font-size:12px; color:var(--muted)}

nav{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  border:1px solid var(--line);
  background:rgba(18,25,37,.65);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
}
.btn:hover{border-color:rgba(91,214,255,.5)}
.btn.primary{background:rgba(91,214,255,.18); border-color:rgba(91,214,255,.8); color:#dff7ff}
.btn.danger{background:rgba(255,91,122,.14); border-color:rgba(255,91,122,.6)}

.grid{display:grid; grid-template-columns:1fr; gap:14px; padding:16px 0}
@media (min-width: 980px){
  .grid{grid-template-columns:1fr 1fr; padding:16px 0}
  .span-all{grid-column:1/-1}
}

.card{
  border:1px solid var(--line);
  background:rgba(18,25,37,.55);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 35px rgba(0,0,0,.25);
}
.card h2{font-size:15px; margin:0 0 6px 0; color:#d8e6fb}
.card .hint{color:var(--muted); font-size:12px; margin:0 0 12px 0}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form-grid label{display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px}
.form-grid label.span2{grid-column:1/-1}
.form-grid input,
.form-grid textarea{
  background:#0c121b;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  font:14px var(--sans);
  resize:vertical;
}
.form-grid textarea{min-height:60px; line-height:1.4}
.form-grid input:focus,
.form-grid textarea:focus{outline:2px solid rgba(91,214,255,.45); outline-offset:1px}

table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em}
td input{
  width:100%;
  background:#0c121b;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 8px;
  font:13px var(--sans);
}
td input.mono{font-family:var(--mono)}
.ta-right{text-align:right}
.mono{font-family:var(--mono)}
tfoot td{border-bottom:none; padding-top:8px}
.total{color:var(--accent); font-weight:700}

.col-desc{width:42%}
.col-amount,.col-price{width:12%}
.col-vat,.col-total{width:13%; text-align:right}
.col-actions{width:40px}
.btn-icon{
  background:transparent; border:none; color:var(--muted);
  cursor:pointer; font-size:18px; line-height:1;
}
.btn-icon:hover{color:var(--danger)}

#preview-wrap{
  /* background wordt door JS gezet op page.backgroundFill — zo is buiten de
     SVG-render (zijkanten bij max-width-cap) dezelfde cream-tint te zien als
     binnen de SVG, en correspondeert de preview met de PDF-output. */
  background:#fffefa;
  border-radius:8px;
  padding:0;
  overflow:hidden;
  display:flex;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
#preview-wrap svg{
  width:100%;
  max-width:600px;
  height:auto;
  display:block;
}
/* Bidirectionele selectie: klikbare elementen krijgen een pointer + subtiele
   hover-feedback. SVG-elementen accepteren cursor via CSS in moderne browsers. */
#preview-wrap svg [data-element-name]{
  cursor:pointer;
}
#preview-wrap svg [data-element-name]:hover{
  outline:1px dashed rgba(91,214,255,.6);
  outline-offset:1px;
}

footer{
  border-top:1px solid var(--line);
  margin-top:24px;
  background:rgba(11,15,20,.6);
}

/* ───── Tabs (Data / Opmaak) ───── */
.tab-strip{
  display:flex; gap:6px; padding-bottom:6px; margin-top:8px;
  border-bottom:1px solid var(--line);
}
.tab{
  border:1px solid var(--line);
  background:rgba(18,25,37,.45);
  color:var(--text);
  padding:6px 14px;
  border-radius:999px 999px 0 0;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
}
.tab[aria-selected="true"]{
  border-color:rgba(91,214,255,.8);
  background:rgba(91,214,255,.15);
  color:#dff7ff;
  box-shadow:0 0 0 2px rgba(91,214,255,.1);
}

#tab-opmaak{padding:16px 0}
.page-settings-card{margin-bottom:14px}
.page-settings-card .props-grid{grid-template-columns:repeat(4, 1fr)}
.page-settings-card .props-grid label.span2{grid-column:1/-1}
@media (max-width: 720px){
  .page-settings-card .props-grid{grid-template-columns:1fr 1fr}
}
.opmaak-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width: 980px){
  .opmaak-grid{grid-template-columns:280px 1fr}
}

/* Element-lijst */
.element-list-card{max-height:600px; display:flex; flex-direction:column}
#elements-filter{margin-bottom:8px}
#filter-input{
  width:100%;
  background:#0c121b;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 10px;
  font:13px var(--sans);
}
#elements-list{
  overflow-y:auto;
  flex:1;
  border:1px solid var(--line);
  border-radius:6px;
}
.elem-group{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:8px 10px 4px;
  background:rgba(11,15,20,.4);
  border-top:1px solid var(--line);
}
.elem-group:first-child{border-top:none}
.elem-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px;
  font-size:13px;
  cursor:pointer;
  border-top:1px solid rgba(35,48,65,.4);
  transition:background .12s;
}
.elem-item:hover{background:rgba(91,214,255,.07)}
.elem-item[aria-selected="true"]{
  background:rgba(91,214,255,.15);
  color:#dff7ff;
  border-left:3px solid var(--accent);
  padding-left:7px;
}
.elem-item .elem-type{
  font-size:10px; color:var(--muted); font-family:var(--mono);
  padding:1px 5px; border-radius:3px; background:rgba(35,48,65,.6);
  margin-left:8px;
}
.elem-item.modified .elem-name::after{
  content:"●";
  color:var(--warn);
  margin-left:6px;
}

/* Properties-panel */
.props-card{min-height:600px}
#props-form{display:flex; flex-direction:column; gap:14px}
.props-section{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.props-section:first-child{border-top:none; padding-top:0}
.props-section h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 8px 0;
}
.props-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.props-grid label{display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px}
.props-grid label.span2{grid-column:1/-1}
.props-grid input, .props-grid select{
  background:#0c121b;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 8px;
  font:13px var(--sans);
}
.props-grid input[type="color"]{
  padding:2px;
  height:32px;
  cursor:pointer;
}
.props-grid input[type="checkbox"]{
  width:auto;
  align-self:flex-start;
}
.toggle-row{display:flex; gap:8px; flex-wrap:wrap}
.toggle-row .toggle{
  border:1px solid var(--line);
  background:rgba(18,25,37,.55);
  color:var(--text);
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
}
.toggle-row .toggle[aria-pressed="true"]{
  border-color:var(--accent);
  background:rgba(91,214,255,.15);
  color:#dff7ff;
}
.props-actions{
  display:flex; gap:8px; padding-top:8px;
}

.preview-card{margin-top:14px}

/* Toast */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:10px 16px; font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:100;
  opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.toast.show{opacity:1}
.toast.error{border-color:var(--danger); color:var(--danger)}
.toast.ok{border-color:var(--ok); color:var(--ok)}