/* Zeiterfassung — "Ruhig hell": light ground, soft white cards, one warm
   gold accent. Same language as the Schnellzugriff panel so the whole app
   reads as one system. Single-theme by design. */

:root{
  color-scheme: light;
  --bg:#f2f2ef;
  --surface:#ffffff;
  --surface-2:#f6f6f2;
  --border:#e3e3dc;
  --border-soft:#eeeee8;
  --text:#1b1b1b;
  --dim:#71767b;
  --accent:#9a6b34;
  --accent-ink:#ffffff;
  --accent-soft:#f1e8da;
  --good:#3f7d54;
  --bad:#a23b2e;
  --font-d:'IBM Plex Mono', ui-monospace, monospace;
  --font-b:'Archivo', system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, p{ margin:0; }
table{ border-collapse:collapse; width:100%; }
a{ color:inherit; }

.page{ max-width:1600px; margin:0 auto; padding:30px 40px 80px; width:100%; }

/* ---------- top navigation ---------- */
.topnav{ border-bottom:1px solid var(--border); background:var(--surface); }
.topnav-inner{
  display:flex; align-items:center; gap:24px;
  max-width:1600px; margin:0 auto; padding:16px 40px;
}
.topnav .wordmark{
  font-family:var(--font-b); font-weight:700; font-size:15px; letter-spacing:-.01em;
  color:var(--text);
}
.topnav nav{ display:flex; gap:18px; flex-wrap:wrap; }
.topnav nav a{ color:var(--dim); font-size:13px; text-decoration:none; white-space:nowrap; }
.topnav nav a:hover{ color:var(--text); }
.topnav nav a.on{ color:var(--text); font-weight:600; }
.topnav-user{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.topnav-user .who{ font-size:12px; color:var(--dim); font-family:var(--font-d); white-space:nowrap; }
.topnav-user form{ margin:0; }

/* ---------- headings / labels ---------- */
h1{ font-family:var(--font-b); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-bottom:22px; text-wrap:balance; }
h2{ font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin:32px 0 14px; }
.label{ font-family:var(--font-d); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

/* ---------- messages ---------- */
.messages{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px; }
.messages li{
  font-size:13.5px; padding:11px 14px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
}
.messages li.success{ background:#eef5f0; border-color:#cfe6d8; color:#276046; }
.messages li.error{ background:#fbeceb; border-color:#efc9c4; color:var(--bad); }
.messages li.warning{ background:var(--accent-soft); border-color:#e6d4b8; color:#7a5323; }

/* ---------- buttons ---------- */
.btn, button[type="submit"]{
  display:inline-block; background:var(--accent); color:var(--accent-ink); border:none; border-radius:4px;
  padding:11px 18px; font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
}
.btn:hover, button[type="submit"]:hover{ opacity:.92; }
.btn-ghost, button.btn-ghost[type="submit"]{
  display:inline-block; background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:4px; padding:10px 16px; font-family:var(--font-d); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; }
button[name="action"][value="draft"]{
  background:var(--surface); border:1px solid var(--border); color:var(--dim);
}
button[name="action"][value="draft"]:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- forms ---------- */
form p{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; max-width:420px; }
form p label{ font-family:var(--font-d); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
form ul{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
form ul li label{
  font-family:var(--font-b); font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--text);
  display:flex; align-items:center; gap:8px; font-weight:400;
}
input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="email"], input[type="file"], select, textarea{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:4px; font-family:var(--font-b); font-size:14px; outline:none;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); background:var(--surface); }
input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; }
.errorlist{ list-style:none; margin:0 0 6px; padding:0; color:var(--bad); font-size:12.5px; }

/* ---------- login ---------- */
.login-page{ max-width:340px; margin:74px auto 0; }
.login-page .wordmark{
  display:block; font-family:var(--font-b); font-weight:700; font-size:18px; letter-spacing:-.01em;
  color:var(--text); margin-bottom:30px;
}
.login-page form p{ max-width:none; }
.login-page input[type="text"], .login-page input[type="password"], .login-page input[type="email"]{
  background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:11px 12px;
}
.login-page input:focus{ border-color:var(--accent); }
.login-page ul li label{ font-size:13px; color:var(--dim); }
.login-page .btn{ width:100%; text-align:center; margin-top:6px; }
.login-page .login-alt{ margin-top:18px; text-align:center; font-size:13px; }
.login-page .login-alt a{ color:var(--dim); }
.login-page .login-alt a:hover{ color:var(--accent); }

/* ---------- timer / dashboard ---------- */
.timer-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:22px 24px; margin-bottom:20px;
}
.timer-row.running{ animation:cardIn .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.timer-row .t-since{ display:block; margin-bottom:8px; }
.timer-row .t-clock{ font-family:var(--font-d); font-size:44px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1; }
.timer-row .t-money{ margin-top:10px; font-family:var(--font-b); font-weight:600; font-size:20px; color:var(--accent); font-variant-numeric:tabular-nums; }
.timer-row .t-money.muted{ color:var(--dim); font-weight:400; font-size:14px; }
.timer-row .t-money.bump{ animation:moneyBump .35s ease; }
@keyframes moneyBump{ 0%{ filter:none; } 40%{ filter:brightness(1.35); text-shadow:0 0 12px rgba(154,107,52,.45); } 100%{ filter:none; } }

.kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:30px; }
.kpis.kpis-4{ grid-template-columns:repeat(4, 1fr); }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
.kpi .label{ display:block; margin-bottom:8px; }
.kpi .num{ font-family:var(--font-b); font-weight:600; font-size:21px; font-variant-numeric:tabular-nums; }
.kpi .money{ color:var(--accent); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.rows{ font-size:13.5px; }
.rows th{
  text-align:left; font-family:var(--font-d); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); font-weight:500; padding:14px 14px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.rows td{ padding:13px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.rows tr:last-child td{ border-bottom:none; }
.rows .num, .rows th.num{ text-align:right; font-family:var(--font-d); font-variant-numeric:tabular-nums; }
.rows .actions a{ color:var(--dim); font-size:12px; text-decoration:underline; text-underline-offset:3px; margin-right:12px; }
.rows .actions a:hover{ color:var(--accent); }

.tag{
  font-family:var(--font-d); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:3px; border:1px solid var(--border); color:var(--dim); white-space:nowrap;
}
.tag.draft{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

/* ---------- filters / summary line ---------- */
.filters{ display:flex; gap:22px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.filters p{ margin:0; }
.sum-line{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
  padding:16px 0; margin-bottom:8px;
}
.sum-line .big{ font-family:var(--font-b); font-size:15px; font-weight:500; }
.sum-line .big b{ color:var(--accent); font-weight:600; }
.sum-line .actions{ display:flex; gap:14px; flex-wrap:wrap; }
.sum-line .actions a{ color:var(--dim); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.sum-line .actions a:hover{ color:var(--accent); }

/* ---------- danger button ---------- */
button.btn-danger, .btn-danger{
  background:var(--surface); border:1px solid var(--bad); color:var(--bad);
  border-radius:4px; padding:10px 16px; font-family:var(--font-d); font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer;
}
button.btn-danger:hover, .btn-danger:hover{ background:var(--bad); color:#fff; }

/* ---------- statistics charts ---------- */
.chart-block{
  margin:14px 0 34px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:20px 20px 16px;
}
.bars{
  display:flex; align-items:flex-end; gap:10px; height:200px;
  padding:14px 0 0; border-bottom:1px solid var(--border);
}
.bars .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; height:100%; justify-content:flex-end; }
.bars .bar{
  width:100%; max-width:44px; background:var(--accent); min-height:2px; border-radius:3px 3px 0 0;
  height:var(--h, 0);
  transition:height .55s cubic-bezier(.2,.7,.2,1);
}
.bars .bar.dim{ background:var(--accent-soft); border:1px solid #e6d4b8; }
.bars .bar-val{ font-family:var(--font-d); font-size:10px; color:var(--text); font-variant-numeric:tabular-nums; }
.bars .bar-val.zero{ color:var(--dim); opacity:.5; }
.bars .bar-lab{ font-family:var(--font-d); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.share-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.share-row:last-child{ border-bottom:none; }
.share-row .name{ flex:0 0 34%; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-row .track{ flex:1; height:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.share-row .fill{ height:100%; background:var(--accent); }
.share-row .val{ flex:0 0 auto; font-family:var(--font-d); font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums; }

/* ---------- per-client time split ---------- */
#alloc-panel{ margin:2px 0 18px; max-width:520px; }
.alloc-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.alloc-row .alloc-name{ flex:0 0 30%; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alloc-row input[type="range"]{ flex:1; accent-color:var(--accent); padding:0; background:transparent; border:none; }
.alloc-row input[type="range"]:disabled{ opacity:.55; }
.alloc-row .alloc-val{
  flex:0 0 auto; min-width:118px; text-align:right;
  font-family:var(--font-d); font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums;
}
#alloc-sum{ margin:8px 0 0; font-size:12.5px; }

/* ---------- misc ---------- */
.hint{ color:var(--dim); font-size:13px; line-height:1.6; margin-bottom:20px; max-width:64ch; }
.back-link{ display:inline-block; margin-bottom:22px; color:var(--dim); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.back-link:hover{ color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 760px){
  /* --- top nav: wordmark, then a scrollable link row, then user + logout --- */
  .topnav{ position:sticky; top:0; z-index:20; }
  .topnav-inner{ flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px; }
  .topnav .wordmark{ font-size:16px; }
  .topnav nav{
    order:2; flex-wrap:nowrap; overflow-x:auto; gap:16px; padding-bottom:4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .topnav nav::-webkit-scrollbar{ display:none; }
  .topnav nav a{ font-size:13.5px; padding:2px 0; }
  .topnav-user{
    order:3; margin-left:0; justify-content:space-between;
    border-top:1px solid var(--border); padding-top:8px;
  }
  .topnav-user .who{ font-size:11px; }
  .topnav-user .btn-ghost{ padding:7px 12px; font-size:11px; }

  .page{ padding:18px 14px 64px; }
  h1{ font-size:19px; margin-bottom:16px; }
  h2{ margin:26px 0 12px; }

  .kpis, .kpis.kpis-4{ grid-template-columns:1fr 1fr; gap:10px; }
  .kpi{ padding:13px 14px; }
  .kpi .num{ font-size:18px; }

  .timer-row{ flex-direction:column; align-items:stretch; gap:14px; padding:18px 16px; }
  .timer-row .t-clock{ font-size:40px; }
  .timer-row .btn-ghost{ text-align:center; }

  /* --- filters + button rows: everything full width, stacked --- */
  .filters{ gap:12px; }
  .filters p, .filters input, .filters select, .filters button{ width:100%; }
  form p{ max-width:none; }
  form .btn-row{ flex-direction:column; align-items:stretch; }
  form .btn-row > button, form .btn-row > .btn, form .btn-row > .btn-ghost,
  form .btn-row > .btn-danger{ width:100%; text-align:center; }

  .sum-line{ flex-direction:column; align-items:flex-start; gap:6px; }
  .sum-line .actions{ line-height:2; }

  /* --- month bar charts become a compact horizontal-bar list --- */
  .chart-block{ padding:16px 14px; }
  .bars{ flex-direction:column; align-items:stretch; height:auto; gap:7px; border-bottom:none; padding-top:4px; }
  .bars .bar-col{ flex-direction:row; align-items:center; height:auto; gap:10px; }
  .bars .bar-lab{ order:0; flex:0 0 36px; text-align:left; }
  .bars .bar{
    order:1; height:14px; width:var(--h, 0); max-width:none; min-height:0; min-width:2px;
    border-radius:0 3px 3px 0;
    transition:width .55s cubic-bezier(.2,.7,.2,1);
  }
  .bars .bar-val{ order:2; flex:0 0 auto; margin-left:auto; }
  .share-row .name{ flex:0 0 40%; }

  /* --- tables reflow into stacked label / value rows inside the card --- */
  .rows thead{ display:none; }
  .rows, .rows tbody, .rows tr, .rows td{ display:block; width:100%; }
  .rows tr{ padding:12px 14px; border-bottom:1px solid var(--border); }
  .rows tr:last-child{ border-bottom:none; }
  .rows td{
    border-bottom:none !important; padding:4px 0 !important;
    display:flex; justify-content:space-between; align-items:baseline; gap:14px; text-align:right;
  }
  .rows td::before{
    content:attr(data-label); color:var(--dim); font-family:var(--font-d); font-size:10px;
    letter-spacing:.07em; text-transform:uppercase; text-align:left; flex:none;
  }
  .rows td:empty{ display:none; }
  .rows td.actions{ justify-content:flex-end; gap:16px; padding-top:8px !important; }
  .rows td.actions::before{ content:none; }

  .alloc-row{ flex-wrap:wrap; gap:4px 12px; }
  .alloc-row .alloc-name{ flex:1 1 100%; }
  .alloc-row input[type="range"]{ flex:1 1 60%; }
  .alloc-row .alloc-val{ min-width:0; }
}

@media (max-width: 400px){
  .kpis, .kpis.kpis-4{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .timer-row.running{ animation:none; }
  .timer-row .t-money.bump{ animation:none; }
  .bars .bar{ transition:none; }
}