/* TickTrack – dunkles, schlankes UI. Eigenständig (an sta angelehnt). */
:root{
  --bg:#12151b; --bg2:#181c24; --panel:#1e232c; --line:#2a303b;
  --fg:#e6e8ec; --dim:#9aa3b2; --accent:#4f8cff; --accent2:#2c3e63;
  --ok:#57c98a; --warn:#e0b64d; --bad:#e0655f; --radius:10px;
}
*{box-sizing:border-box}
/* WICHTIG: .gate{display:grid} / #app{display:flex} würden das UA-[hidden] sonst
   überstimmen -> das Gate bliebe nach dem Login sichtbar. Darum global erzwingen. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
button{font:inherit; cursor:pointer}
input,textarea,select{font:inherit}
a{color:var(--accent); text-decoration:none}

/* ── Buttons ─────────────────────────────────────────────── */
.primary{background:var(--accent); color:#fff; border:0; border-radius:8px; padding:.5em .9em}
.primary:hover{filter:brightness(1.08)}
.ghost{background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:.45em .8em}
.ghost:hover{border-color:var(--accent)}
.ghost.small,.primary.small{padding:.32em .6em; font-size:.9em}
.stepper{background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; width:2em; height:2em; font-size:1.15em; line-height:1; font-weight:700}
.stepper:hover{border-color:var(--accent)}

/* ── Anmelde-Gate ────────────────────────────────────────── */
.gate{position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:40; padding:1rem}
.gate .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; width:min(360px,94vw); display:flex; flex-direction:column; gap:.7rem}
.brand{margin:.1rem 0 0; font-size:1.5rem}
.gate .sub{margin:0 0 .4rem; color:var(--dim)}
.gate label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--dim)}
.gate input{background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  border-radius:8px; padding:.55em .65em}
.gate input:focus{outline:2px solid var(--accent2); border-color:var(--accent)}
.row-btns{display:flex; gap:.5rem; flex-wrap:wrap}
.row-btns .primary{flex:1}
.msg{min-height:1.1em; font-size:.85em; color:var(--warn)}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}

/* ── App-Layout ──────────────────────────────────────────── */
#app{display:flex; flex-direction:column; height:100%}
#bar{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .7rem; background:var(--bg2); border-bottom:1px solid var(--line); flex-wrap:wrap}
.day-nav{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
#day-date{background:var(--panel); border:1px solid var(--line); color:var(--fg);
  border-radius:8px; padding:.35em .5em; color-scheme:dark}
.day-label{color:var(--dim); font-size:.9em; margin-left:.2rem}
.bar-right{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.who{color:var(--dim); font-size:.85em; margin-right:.2rem}

/* ── Tabelle ─────────────────────────────────────────────── */
#sheet{flex:1; overflow:auto; padding:.5rem .6rem}
#grid{width:100%; border-collapse:collapse; min-width:720px}
#grid th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--dim); font-weight:600; padding:.3rem .4rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg)}
#grid td{padding:.2rem .35rem; border-bottom:1px solid var(--line); vertical-align:middle}
#grid tr.new td{opacity:.9}
#grid input,#grid select{width:100%; background:var(--bg2); border:1px solid transparent; color:var(--fg);
  border-radius:6px; padding:.4em .5em; color-scheme:dark}
#grid input:hover,#grid select:hover{border-color:var(--line)}
#grid input:focus,#grid select:focus{outline:none; border-color:var(--accent); background:var(--panel)}
.c-kost{width:8.5rem} .c-proj{width:8rem} .c-time{width:9.5rem} .c-diff{width:6rem} .c-del{width:2rem}
.diff-cell{white-space:nowrap; color:var(--fg); font-variant-numeric:tabular-nums}
.diff-cell small{color:var(--dim); margin-left:.35em}
.diff-cell.bad{color:var(--bad)}
.row-del{background:transparent; border:0; color:var(--dim); font-size:1.05em; padding:.1em .3em; border-radius:6px}
.row-del:hover{color:var(--bad); background:var(--panel)}
.time-in{font-variant-numeric:tabular-nums}
.time-in.warn{border-color:var(--warn)!important}

/* ── Fuß ─────────────────────────────────────────────────── */
#foot{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  padding:.5rem .7rem; background:var(--bg2); border-top:1px solid var(--line)}
.sum-day b{font-size:1.1em}
.soll-ist{display:flex; gap:1rem; flex-wrap:wrap; color:var(--dim); font-size:.92em}
.soll-ist b{color:var(--fg); font-variant-numeric:tabular-nums}
#si-saldo{color:var(--ok)} #si-saldo.neg{color:var(--warn)}
.ver{color:var(--dim); font-size:.82em}
.gate-ver{margin:.2rem 0 0; text-align:center; color:var(--dim); font-size:.8em}

/* ── Overlays / Panes ────────────────────────────────────── */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50}
.pane{position:fixed; z-index:51; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px,94vw); max-height:88vh; overflow:auto; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.5)}
.pane-head{display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .9rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel)}
.pane-x{background:transparent; border:0; color:var(--dim); font-size:1.1em}
.pane-x:hover{color:var(--fg)}
.pane-body{padding:.9rem}
.hint{margin:.1rem 0 .8rem; color:var(--dim); font-size:.86em}
.row-inline{display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap}
.row-inline input{flex:1; min-width:6rem; background:var(--bg2); border:1px solid var(--line);
  color:var(--fg); border-radius:8px; padding:.45em .6em; color-scheme:dark}
textarea{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  border-radius:8px; padding:.6em; resize:vertical; color-scheme:dark}

.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.chips li{display:flex; align-items:center; gap:.35rem; background:var(--bg2);
  border:1px solid var(--line); border-radius:999px; padding:.25em .3em .25em .7em}
.chips button{background:transparent; border:0; color:var(--dim); font-size:.95em; border-radius:999px; padding:0 .25em}
.chips button:hover{color:var(--bad)}

.soll-rows{list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.soll-rows li{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:.35em .6em}
.soll-rows b{font-variant-numeric:tabular-nums}
.soll-rows button{background:transparent; border:0; color:var(--dim); font-size:1em}
.soll-rows button:hover{color:var(--bad)}

#ver-body{font-size:.9em}
#ver-body .cl-v{color:var(--accent); font-weight:700; margin-top:.6em}
#ver-body .cl-t{color:var(--dim)}

@media (max-width:560px){
  #bar{gap:.4rem}
  .bar-right .small{padding:.3em .45em}
}