/* Urenregistratie - same grandMA3 palette as the rest of tools.aanbeeld.com.
   Phone first: the crew fills this in on site, on a phone, often in the dark. */

:root{
  --bg:#0B0B0C;
  --panel:#161719;
  --panel-2:#202225;
  --line:#2E3135;
  --line-hi:#43474D;
  --ink:#E9EBED;
  --dim:#8B9199;
  --accent:#FFD100;
  --accent-hi:#FFE04D;
  --accent-ink:#1A1500;
  --ok:#4CAF63;
  --err:#CF3A2F;
  --warn:#E0A030;
  --phaser:#8C52D9;
  --phaser-ink:#F4EEFF;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:"Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --r:3px;
  --safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-top) + 10px) 14px 10px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.topbar__back{color:var(--dim);text-decoration:none;font-size:11px}
.topbar__back:hover{color:var(--accent)}
.topbar__title{font-size:13px;font-weight:600;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.topbar__out{background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;
  font-family:inherit}
.topbar__out:hover{color:var(--accent)}

main{max-width:900px;margin:0 auto;padding:16px 14px 64px}

h1{font-size:19px;font-weight:600;margin:0 0 2px;letter-spacing:-.01em}
h2{font-size:14px;font-weight:600;margin:0 0 10px}
h3{font-size:12px;font-weight:600;margin:18px 0 6px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em}
.sub{color:var(--dim);font-size:12px;margin:0 0 12px}
.sub--small{font-size:11px}
.err{color:var(--err);font-size:12px;margin:10px 0 0}
.warn{background:color-mix(in srgb, var(--warn) 14%, var(--panel));
  border:1px solid var(--warn);border-radius:var(--r);padding:10px 12px;
  font-size:12px;margin:0 0 16px}
.saved{color:var(--ok);font-size:12px;align-self:center}

/* ---------------------------------------------------------------- panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:16px}
.panel--narrow{max-width:400px;margin:40px auto}
.rowline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:14px;flex-wrap:wrap}
.sectionhead{margin:24px 0 10px}

/* ------------------------------------------------------------ form bits */
label.f{display:block;font-size:11px;color:var(--dim);margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.08em}
input[type=text],input[type=password],input[type=date],input[type=time],
input[type=number],select,textarea{
  width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px 10px;font-family:inherit;font-size:15px;margin:0 0 12px;
  /* A select is not a text box by default: it sizes itself from its content,
     picks its own line-height and keeps a native arrow. Without these three
     it sits a couple of pixels taller than the inputs beside it and its text
     rides high, which is what made the row look crooked. */
  height:42px;line-height:20px;vertical-align:top;
  appearance:none;-webkit-appearance:none;
}
textarea{height:auto}
select{
  padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
textarea{resize:vertical;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--dim);
  margin:0 0 12px;cursor:pointer;line-height:1.45}
.check input{margin-top:2px;flex:none}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.timefield{position:relative;margin:0 0 12px}
.timefield input[type=text]{margin:0;padding-right:38px}
.timepick{
  position:absolute;top:0;right:0;width:34px;height:42px;
  background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;
  line-height:42px;padding:0;
}
.timepick:hover{color:var(--accent)}
/* The native picker exists only to be opened by that button. */
.timenative{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;
  pointer-events:none;margin:0;padding:0;border:0}

.btn{
  display:inline-block;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line-hi);border-radius:var(--r);
  padding:10px 14px;font-family:inherit;font-size:13px;cursor:pointer;
  text-decoration:none;text-align:center;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn--go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn--go:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--accent-ink)}
.btn--danger{color:var(--err);border-color:var(--line-hi)}
.btn--danger:hover{border-color:var(--err);color:var(--err)}
.btn--file{position:relative;overflow:hidden}
.back{background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;
  padding:0;margin:0 0 12px;font-family:inherit}
.back:hover{color:var(--accent)}
.more{margin:0 0 12px}
.more summary{cursor:pointer;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.more summary:hover{color:var(--accent)}
.showarch{display:block;font-size:11px;color:var(--dim);margin-top:14px;cursor:pointer}
.showarch input{margin-right:6px}

/* ------------------------------------------------------------------ tabs */
.tabs{display:flex;gap:2px;margin:0 0 16px;flex-wrap:wrap}
.tab{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);padding:8px 12px;font-family:inherit;font-size:12px;cursor:pointer}
.tab:hover{color:var(--accent)}
.tab--on{background:var(--phaser);border-color:var(--phaser);color:var(--phaser-ink);font-weight:600}
.tab--on:hover{color:var(--phaser-ink)}

/* ---------------------------------------------------------------- totals */
.totalbox{text-align:right;font-family:var(--mono)}
.totalbox b{display:block;font-size:20px;color:var(--accent);font-weight:600}
.totalbox span{font-size:11px;color:var(--dim)}

.calcline{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--dim);margin:4px 0 12px}
.calcline b{color:var(--ink)}
.calcline .money{color:var(--accent)}
.cline{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:2px 0}
.cline span:nth-child(2){color:var(--ink);white-space:nowrap}
.cline span:nth-child(3){min-width:74px;text-align:right}
.cline--head{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:4px}

/* ----------------------------------------------------------------- cards */
.card{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--line-hi);
  border-radius:var(--r);padding:12px 14px;margin-bottom:8px;color:inherit;
  font-family:inherit;font-size:14px;cursor:pointer}
.card:hover{background:var(--panel-2);border-left-color:var(--accent)}
.card__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card__name{font-weight:600}
.card__meta{color:var(--dim);font-size:11.5px;margin-top:2px}
.card__val{font-family:var(--mono);color:var(--accent);white-space:nowrap}
.card--arch{opacity:.55}

.day{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin-bottom:6px}
.day--mine{border-left:3px solid var(--accent)}
.day__top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.day__who{font-weight:600}
.day__when{color:var(--dim);font-size:12px;font-family:var(--mono)}
.day__sum{font-family:var(--mono);font-size:12px;color:var(--dim)}
.day__sum b{color:var(--ink)}
.day__note{color:var(--dim);font-size:12px;margin-top:4px;font-style:italic}
.day__warn{color:var(--warn);font-size:12px;margin-top:4px}
.day__edit{background:none;border:none;color:var(--accent);font-size:11px;
  cursor:pointer;padding:0;font-family:inherit}
.daydate{font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin:16px 0 6px}

/* -------------------------------------------------------------- receipts */
.receipts{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 0}
.receipt{position:relative}
.receipt a{display:block;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;width:64px;height:64px;background:var(--panel-2)}
.receipt img{width:100%;height:100%;object-fit:cover;display:block}
.receipt .pdf{display:grid;place-items:center;width:100%;height:100%;
  font-size:10px;color:var(--dim);font-family:var(--mono)}
.receipt button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--line-hi);background:var(--panel);
  color:var(--err);font-size:12px;line-height:1;cursor:pointer;padding:0}

/* ------------------------------------------------------------- share/qr */
.qrbox{background:#fff;padding:12px;border-radius:var(--r);width:max-content;
  margin:0 0 12px}
.qrbox img,.qrbox canvas{display:block}
.linkrow{display:flex;gap:8px;margin-bottom:10px}
.linkrow input{margin:0;font-family:var(--mono);font-size:12px}

.exports{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}

/* --------------------------------------------------------------- people */
.person{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:6px;flex-wrap:wrap}
.person__name{font-weight:600}
.person__meta{color:var(--dim);font-size:11.5px}
.person__val{font-family:var(--mono);color:var(--accent)}

@media (max-width:520px){
  .totalbox{text-align:left}
  .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}