/* ============================================================
   Arbeitszeitnachweis – Stundenzettel
   Schlicht & seriös (Behörden-Look). Nur HEX-Farben
   (wichtig für PDF-Export via html2canvas – kein oklch).
   ============================================================ */

:root{
  --bg:#E7E6E0;
  --paper:#FFFFFF;
  --ink:#1B1B19;
  --muted:#6B6B64;
  --faint:#9A9A90;
  --line:#DEDDD6;
  --line-strong:#C3C2B9;
  --accent:#234B73;
  --accent-deep:#1B3B5C;
  --field-bg:#FAFAF8;
  --field-border:#CECEC5;
  --field-focus:#234B73;
  --ok:#1F9D55;
  --ok-deep:#157A41;
  --danger:#A93A36;
  --shadow:0 1px 2px rgba(27,27,25,.05), 0 8px 28px rgba(27,27,25,.07);
  --radius:5px;
  --maxw:880px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}

#root{min-height:100vh;}

/* ---------- Sheet switch (Tabs) ---------- */
.sheetnav{
  max-width:var(--maxw);
  margin:0 auto 16px;
  display:flex; gap:8px;
}
.sheetnav a{
  text-decoration:none;
  font-size:13px; font-weight:600;
  color:var(--muted);
  border:1px solid var(--line-strong);
  background:#fff;
  padding:8px 14px; border-radius:5px;
  transition:.12s; display:flex; align-items:center; gap:7px;
}
.sheetnav a:hover{ border-color:var(--accent); color:var(--accent); }
.sheetnav a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.sheetnav a svg{ width:15px; height:15px; }

/* ---------- App shell ---------- */
.app{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 18px 132px;
}
@media (min-width:720px){
  .app{padding:34px 24px 120px;}
}

/* ---------- Paper sheet ---------- */
.sheet{
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---------- Sheet header ---------- */
.doc-head{
  padding:24px 22px 20px;
  border-bottom:2px solid var(--ink);
  position:relative;
}
@media (min-width:720px){ .doc-head{padding:30px 32px 24px;} }

.doc-head .eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin:0 0 6px;
}
.doc-head h1{
  font-size:clamp(22px,4.6vw,30px);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 2px;
  line-height:1.05;
}
.doc-head .sub{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.head-meta{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:560px){
  .head-meta{grid-template-columns:1fr 1fr; gap:14px 26px;}
}

/* ---------- Field primitives ---------- */
.field{display:flex; flex-direction:column; gap:5px;}
.field > label,
.lbl{
  font-size:10.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.input, .ta{
  width:100%;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:4px;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  padding:9px 11px;
  transition:border-color .12s, box-shadow .12s, background .12s;
  appearance:none;
}
.ta{resize:vertical; min-height:42px; line-height:1.4;}
.input:focus, .ta:focus{
  outline:none;
  border-color:var(--field-focus);
  background:#fff;
  box-shadow:0 0 0 3px rgba(35,75,115,.14);
}
.input::placeholder, .ta::placeholder{color:var(--faint);}
.input:read-only{background:#F2F2EE; color:var(--ink);}

/* big header inputs (firma/name) get an underline style */
.head-meta .input{font-size:16px;}

/* ---------- Entries ---------- */
.entries{ padding:8px 14px 4px; }
@media (min-width:720px){ .entries{padding:12px 22px 4px;} }

.entry{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin:14px 0;
  background:#fff;
  overflow:hidden;
}
.entry-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:#F6F6F2;
  border-bottom:1px solid var(--line);
}
.entry-badge{
  font-size:10.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
  white-space:nowrap;
}
.entry-date{ margin-left:auto; }
.entry-date .input{ padding:7px 10px; font-size:15px; min-width:150px;}
.entry-hours{
  text-align:right;
  padding-left:6px;
  border-left:1px solid var(--line-strong);
  min-width:88px;
}
.entry-hours .num{ font-size:20px; font-weight:600; line-height:1; }
.entry-hours .cap{ font-size:9.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px;}

.btn-del{
  flex:none;
  width:30px; height:30px;
  border:1px solid var(--field-border);
  background:#fff;
  border-radius:4px;
  color:var(--muted);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:grid; place-items:center;
  transition:.12s;
}
.btn-del:hover{ border-color:var(--danger); color:var(--danger); background:#FBF2F1;}

.entry-body{ padding:14px; display:grid; gap:13px; }
@media (min-width:720px){ .entry-body{padding:16px 16px 18px;} }

.grid-time{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
@media (max-width:519px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
}

.time-pause .input{ font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; }

/* add entry */
.add-row{ padding:6px 14px 18px; }
@media (min-width:720px){ .add-row{padding:6px 22px 22px;} }
.btn-add{
  width:100%;
  border:1.5px dashed var(--line-strong);
  background:#FBFBF9;
  color:var(--accent);
  font:inherit;
  font-weight:600;
  font-size:14.5px;
  padding:13px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:.12s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-add:hover{ border-color:var(--accent); background:#F3F6FA; }

/* ---------- Suggest (T9) ---------- */
.suggest{ position:relative; }
.suggest-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  margin:0; padding:4px; list-style:none;
  background:#fff; border:1px solid var(--line-strong);
  border-radius:5px; box-shadow:0 8px 24px rgba(27,27,25,.14);
  z-index:30; max-height:208px; overflow:auto;
}
.suggest-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 9px; border-radius:4px; cursor:pointer;
  font-size:14.5px; color:var(--ink);
}
.suggest-item svg{ color:var(--faint); flex:none; }
.suggest-item.hi, .suggest-item:hover{ background:#F1F5F9; }
.suggest-item.hi svg{ color:var(--accent); }
.suggest-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Quick capture (Zeit + GPS) ---------- */
.quickcap{ display:flex; flex-wrap:wrap; gap:8px; }
.qc{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #C7D6E6; background:#F1F6FB; color:var(--accent);
  font:inherit; font-weight:600; font-size:13px;
  padding:8px 11px; border-radius:5px; cursor:pointer; transition:.12s; white-space:nowrap;
}
.qc:hover{ border-color:var(--accent); background:#E6EEF7; }
.qc svg{ width:15px; height:15px; flex:none; }
.qc.ghost{ background:#fff; border-color:var(--field-border); color:var(--muted); }
.qc.ghost:hover{ color:var(--accent); border-color:var(--accent); background:#F1F6FB; }
.geo-chip{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  border:1px solid #CBD8E6; background:#F2F6FA;
  border-radius:6px; padding:7px 11px; font-size:13px; width:fit-content;
}
.geo-chip svg{ width:15px; height:15px; color:var(--accent); flex:none; }
.geo-chip .co{ font-weight:600; color:var(--ink); }
.geo-chip .acc{ color:var(--muted); font-size:12px; }
.geo-chip .src{ color:var(--faint); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.geo-chip a{ color:var(--accent); font-weight:600; text-decoration:none; }
.geo-chip a:hover{ text-decoration:underline; }
.geo-chip .gx{ border:none; background:none; color:var(--faint); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.geo-chip .gx:hover{ color:var(--danger); }

/* ---------- Material positions ---------- */
.matpos-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:11px; }
.matpos-head{
  display:grid; grid-template-columns:70px 96px 1fr 30px; gap:8px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:0 2px;
}
.matpos-head span:last-child{ display:none; }
.matpos-row{ display:grid; grid-template-columns:70px 96px 1fr 30px; gap:8px; align-items:start; }
.matpos-row .input{ font-size:15px; padding:8px 9px; }
.matpos-row select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B64' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; padding-right:24px; }
.btn-del.sm{ width:30px; height:38px; align-self:start; }
@media (max-width:519px){
  .matpos-head{ grid-template-columns:56px 78px 1fr 28px; }
  .matpos-row{ grid-template-columns:56px 78px 1fr 28px; gap:6px; }
  .btn-del.sm{ width:28px; }
}
.btn-matpos{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--field-border); background:#fff; color:var(--accent);
  font:inherit; font-weight:600; font-size:13.5px;
  padding:8px 12px; border-radius:5px; cursor:pointer; transition:.12s; white-space:nowrap;
}
.btn-matpos:hover{ border-color:var(--accent); background:#F3F6FA; }

/* ---------- Photos ---------- */
.foto-block{ }
.foto-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-foto{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--field-border); background:#fff; color:var(--accent);
  font:inherit; font-weight:600; font-size:13.5px;
  padding:8px 12px; border-radius:5px; cursor:pointer; transition:.12s; white-space:nowrap;
}
.btn-foto:hover{ border-color:var(--accent); background:#F3F6FA; }
.btn-foto svg{ width:16px; height:16px; }
.foto-count{ font-size:12px; color:var(--muted); }
.foto-grid{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:11px;
}
.foto-thumb{
  position:relative; width:84px; height:84px; border-radius:5px; overflow:hidden;
  border:1px solid var(--line-strong); background:#F2F2EE;
}
.foto-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-rm{
  position:absolute; top:3px; right:3px; width:21px; height:21px;
  border:none; border-radius:4px; background:rgba(27,27,25,.72); color:#fff;
  font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.foto-rm:hover{ background:var(--danger); }

/* ---------- Summary ---------- */
.summary{
  border-top:2px solid var(--ink);
  padding:20px 22px;
  background:#FBFBF9;
}
@media (min-width:720px){ .summary{padding:24px 32px;} }
.totals{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:22px;
}
@media (min-width:560px){ .totals{grid-template-columns:repeat(4,1fr);} }
.total-cell{
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
  padding:13px 14px;
}
.total-cell.lead{ border-color:var(--accent); background:#F2F6FA; }
.total-cell .num{ font-size:24px; font-weight:700; line-height:1; letter-spacing:-.01em;}
.total-cell .cap{ font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); display:block; margin-top:6px;}

/* ---------- Signatures ---------- */
.sign-row{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:560px){ .sign-row{grid-template-columns:1fr 1fr; gap:26px;} }

.sign-block .lbl{ margin-bottom:7px; display:block; }
.sigpad-wrap{ position:relative; }
.sigpad{
  width:100%;
  height:120px;
  background:#fff;
  border:1px solid var(--field-border);
  border-radius:4px;
  border-bottom:1.5px solid var(--ink);
  touch-action:none;
  display:block;
  cursor:crosshair;
}
.sigpad-clear{
  position:absolute; top:7px; right:7px;
  font-size:11px; color:var(--muted);
  background:#fff; border:1px solid var(--field-border);
  border-radius:3px; padding:3px 8px; cursor:pointer;
}
.sigpad-clear:hover{ color:var(--danger); border-color:var(--danger);}
.sig-empty-hint{
  position:absolute; left:0; right:0; bottom:30px;
  text-align:center; color:var(--faint); font-size:13px;
  pointer-events:none;
}
.sign-static{
  height:120px; border:1px solid var(--field-border);
  border-bottom:1.5px solid var(--ink); border-radius:4px; background:#fff;
}
.sign-cap{ margin-top:7px; font-size:12px; color:var(--muted); }
.sign-cap .nm{ color:var(--ink); font-weight:600; }

/* ---------- Footer reset ---------- */
.sheet-foot{
  padding:16px 22px 22px; text-align:center;
}
.linkbtn{
  background:none; border:none; cursor:pointer;
  color:var(--faint); font:inherit; font-size:12.5px;
  text-decoration:underline; text-underline-offset:2px;
}
.linkbtn:hover{ color:var(--danger); }

/* ---------- Action bar ---------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -4px 20px rgba(27,27,25,.07);
  z-index:40;
}
.actionbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
@media (min-width:720px){
  .actionbar-inner{ padding:13px 24px; grid-template-columns:auto auto auto 1fr; justify-content:flex-end; }
}
.btn{
  font:inherit; font-weight:600; font-size:14.5px;
  border-radius:5px; padding:12px 14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--field-border); background:#fff; color:var(--ink);
  transition:.12s; white-space:nowrap;
}
.btn:hover{ border-color:var(--line-strong); background:#F6F6F2; }
.btn svg{ width:17px; height:17px; flex:none; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-wa{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-wa:hover{ background:var(--ok-deep); border-color:var(--ok-deep); }
.btn-mail{ background:#fff; border-color:var(--accent); color:var(--accent); }
.btn-mail:hover{ background:#F1F6FB; border-color:var(--accent-deep); color:var(--accent-deep); }
@media (min-width:720px){ .btn{padding:11px 18px;} }
.btn .lbl-full{ display:none; }
@media (min-width:480px){ .btn .lbl-full{display:inline;} }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; font-size:13.5px;
  padding:11px 16px; border-radius:6px; max-width:88vw;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;
  text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* spinner */
.spin{ width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ---------- Print ---------- */
@media print{
  @page{ size:A4 portrait; margin:14mm; }
  body{ background:#fff; }
  .app{ max-width:none; margin:0; padding:0; }
  .actionbar, .toast, .btn-del, .btn-add, .add-row, .sheet-foot, .sigpad-clear, .sig-empty-hint, .suggest-list, .btn-foto, .foto-rm, .btn-matpos, .quickcap, .geo-chip .gx, .sheetnav{ display:none !important; }
  .sheet{ border:none; box-shadow:none; border-radius:0; }
  .entry{ break-inside:avoid; }
  .input, .ta{ background:#fff !important; border:none; border-bottom:1px solid #999; border-radius:0; padding:3px 0; box-shadow:none !important; }
  .entry-top{ background:#fff; }
}