/* Hill Productions · Finanzen
   Palette taken from the workbook itself: header blue #0984E3, input yellow
   #FFEAA7 with blue figures, invoice banding #EBF5FB. Numbers are set in a
   mono face so columns line up like a timesheet. */

:root {
  --canvas: #EDF0F4;
  --panel: #FFFFFF;
  --ink: #101418;
  --muted: #6B7684;
  --line: #DDE2E8;
  --accent: #0984E3;
  --accent-dark: #0B6FBC;
  --yellow: #FFEAA7;
  --yellow-edge: #F0D67E;
  --figure-blue: #1435C8;
  --band: #EBF5FB;
  --pos: #0F7A57;
  --neg: #C0392B;
  --warn: #B7791F;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 6px;
  --shadow: 0 1px 2px rgba(16, 20, 24, .06), 0 6px 20px rgba(16, 20, 24, .05);
}

* { box-sizing: border-box; }

/* A class rule like `.gate { display: grid }` outranks the hidden attribute's
   UA style, which would leave hidden elements on screen. This settles it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.0625rem; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .85em; background: #F1F3F6; padding: .1em .35em; border-radius: 3px; }

.eyebrow {
  font-family: var(--cond);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); font-size: .875rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* --- Buttons & fields ---------------------------------------------------- */
.btn {
  font: 500 .875rem/1 var(--sans);
  padding: .6rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.btn:hover { border-color: #C3CBD4; background: #F7F9FB; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: rgba(16,20,24,.05); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input, .select {
  font: 400 .875rem/1 var(--sans);
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
}
.input--search { min-width: 15rem; }
.field { display: block; }
.field__label { display: block; font-family: var(--cond); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.field--inline { display: flex; align-items: center; gap: .5rem; }
.field--inline .field__label { margin: 0; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted); cursor: pointer; }
.inline { display: inline-flex; align-items: center; gap: .5rem; }
.inline > span { font-family: var(--cond); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Gate ----------------------------------------------------------------- */
.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 90% at 15% 0%, #16324A 0%, #0C1620 55%, #080D13 100%);
}
.gate__card {
  width: min(24rem, 100%);
  background: var(--panel);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.gate__title { font-size: 1.75rem; margin: .15rem 0 .5rem; }
.gate__sub { color: var(--muted); font-size: .875rem; margin-bottom: 1.5rem; }
.gate .field { margin-bottom: 1rem; }
.gate .input, .gate input[type=password] {
  width: 100%;
  font: 400 .9375rem/1 var(--sans);
  padding: .65rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.gate__error { margin-top: .85rem; color: var(--neg); font-size: .8125rem; }

/* --- Topbar --------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
  flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: .65rem; }
.topbar__brand strong { display: block; font-size: .9375rem; font-weight: 600; }
.topbar__brand em { display: block; font-family: var(--cond); font-style: normal; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mark { width: 22px; height: 22px; border-radius: 3px; background: var(--accent); position: relative; }
.mark::after { content: ""; position: absolute; inset: 6px 6px auto auto; width: 8px; height: 8px; background: var(--yellow); border-radius: 1px; }

.topbar__period { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.dash { color: var(--muted); }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
.sync {
  font-family: var(--mono); font-size: .75rem;
  color: var(--muted);
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
}
.sync.is-fresh { color: var(--pos); border-color: #BFE3D3; background: #F1FAF6; }
.sync.is-stale { color: var(--warn); border-color: #EBD9AE; background: #FDF8EC; }

/* --- Tabs ----------------------------------------------------------------- */
.tabs {
  display: flex; gap: .25rem;
  padding: 0 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 57px; z-index: 25;
  overflow-x: auto;
}
.tab {
  font: 500 .875rem/1 var(--sans);
  padding: .8rem .9rem;
  border: 0; background: none; color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* --- Layout --------------------------------------------------------------- */
.main { padding: 1.25rem; max-width: 96rem; margin: 0 auto; }
.view { display: none; }
.view.is-active { display: block; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1.25rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.panel__tools { display: flex; align-items: center; gap: .75rem; }
.panel__foot { padding: .9rem 1.1rem; border-top: 1px solid var(--line); }

/* --- Dropzone ------------------------------------------------------------- */
.dropzone { border-style: dashed; border-width: 2px; border-color: #C9D2DB; box-shadow: none; }
.dropzone.is-over { border-color: var(--accent); background: #F4FAFE; }
.dropzone.is-loaded .dropzone__inner { padding: .9rem 1.1rem; }
.dropzone.is-loaded h2 { font-size: .9375rem; }
.dropzone.is-loaded .muted, .dropzone.is-loaded .eyebrow { display: none; }
.dropzone__inner { padding: 1.75rem; }
.dropzone__inner h2 { margin: .2rem 0 .35rem; }
.dropzone__row { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.dropzone__meta { margin-top: .75rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); }

/* --- Grid ----------------------------------------------------------------- */
.gridwrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.grid th {
  background: var(--accent);
  color: #fff;
  font: 600 .75rem/1.2 var(--sans);
  text-align: left;
  padding: .6rem .55rem;
  position: sticky; top: 0; z-index: 5;
  white-space: nowrap;
}
.grid th.r, .grid td.r { text-align: right; }
.grid td { padding: .3rem .55rem; border-bottom: 1px solid #EEF1F4; vertical-align: middle; }
.grid tbody tr.band td { background: var(--band); }
.grid tbody tr.band td.cell-input { background: var(--yellow); }
.grid tbody tr:hover td { background: #F3F7FA; }
.grid tbody tr:hover td.cell-input { background: #FFF3C4; }
.grid .invoice-start td { border-top: 2px solid #CBD6DF; }
.grid .re { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.grid .cust { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid .cat { font-family: var(--cond); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.cell-input { background: var(--yellow); padding: 0 !important; }
.cell-input input {
  width: 100%;
  min-width: 5.5rem;
  border: 0;
  background: transparent;
  padding: .4rem .5rem;
  font: 500 .8125rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--figure-blue);
}
.cell-input input::placeholder { color: rgba(20,53,200,.28); }
.cell-input input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }

.chip {
  display: inline-block;
  font: 500 .6875rem/1 var(--mono);
  padding: .3rem .45rem;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--ok { color: var(--pos); background: #EAF7F1; border-color: #C6E7D8; }
.chip--open { color: var(--warn); background: #FDF6E7; border-color: #EBDCB4; cursor: pointer; }
.chip--over { color: var(--neg); background: #FBEDEC; border-color: #F0CFCB; }
.chip--open:hover { background: #FBEFD3; }

.split-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  font: 500 .6875rem/1 var(--sans);
  padding: .32rem .4rem;
  cursor: pointer;
  color: var(--muted);
}
.split-btn:hover { color: var(--ink); border-color: #C3CBD4; }

.gridfoot { padding: .8rem 1.1rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .75rem; color: var(--muted); }

.grid--report td { padding: .5rem .55rem; }
.grid--report tbody tr:last-child.total td { background: #1C2430; color: #fff; font-weight: 600; }
.grid--report tbody tr.total td { background: #1C2430; color: #fff; font-weight: 600; border-bottom: 0; }

/* --- Live rail ------------------------------------------------------------ */
.rail {
  position: sticky; top: 6.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 1.1rem;
}
.rail__title { margin: .1rem 0 .9rem; }
.rail__totals { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.stat { background: #F6F8FA; border-radius: var(--r); padding: .6rem .65rem; }
.stat--wide { grid-column: 1 / -1; }
.stat__label { font-family: var(--cond); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat__value { font-family: var(--mono); font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.stat__value.is-flash { animation: flash .5s ease; }
@keyframes flash { from { background: #FFF3C4; } to { background: transparent; } }

.rail__table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.rail__table th {
  font: 600 .6875rem/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  text-align: right; padding: .35rem .3rem;
  border-bottom: 1px solid var(--line);
}
.rail__table th:first-child { text-align: left; }
.rail__table td { padding: .38rem .3rem; text-align: right; border-bottom: 1px solid #F0F3F6; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rail__table td:first-child { text-align: left; font-family: var(--sans); }
.rail__open { margin-top: .9rem; font-size: .75rem; color: var(--muted); }
.rail__open strong { font-family: var(--mono); color: var(--warn); }

/* --- Charts --------------------------------------------------------------- */
.bars { padding: 1.1rem; display: grid; gap: .65rem; }
.bar { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: .7rem; font-size: .8125rem; }
.bar__label { font-family: var(--cond); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bars--h .bar { grid-template-columns: 9rem 1fr auto; }
.bars--h .bar__label { text-transform: none; font-family: var(--sans); letter-spacing: 0; color: var(--ink); }
.bar__track { height: 20px; background: #F1F4F7; border-radius: 3px; position: relative; overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.bar__fill--neg { background: var(--neg); }
.bar__fill--soft { background: #9FC9EC; }
.bar__value { font-family: var(--mono); font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 6rem; text-align: right; }

/* --- Notes & toast -------------------------------------------------------- */
.note {
  border-radius: var(--r);
  padding: .7rem .85rem;
  font-size: .8125rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.note--warn { background: #FDF8EC; border-color: #EBDCB4; color: #7A5B12; }
.note--err { background: #FBEDEC; border-color: #F0CFCB; color: #8C2F24; }
.note--ok { background: #F1FAF6; border-color: #BFE3D3; color: #0B5A40; }
.note ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.syncrow { display: flex; align-items: flex-end; gap: .9rem; padding: 1.1rem; flex-wrap: wrap; }
#syncNote:not(:empty) { padding: 0 1.1rem 1.1rem; }

.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: #1C2430; color: #fff;
  padding: .7rem 1.1rem; border-radius: 100px;
  font-size: .8125rem; z-index: 60;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.toast.is-err { background: var(--neg); }

.empty { padding: 2.5rem 1.1rem; text-align: center; color: var(--muted); font-size: .875rem; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail__totals { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { gap: .75rem; }
  .topbar__period { margin-left: 0; order: 3; width: 100%; }
  .tabs { top: auto; position: static; }
  .main { padding: .85rem; }
  .input--search { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Spaltenbericht nach dem Upload -------------------------------------- */
.cols-report {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .6rem .85rem;
  margin-bottom: 1rem;
  background: var(--panel);
  font-size: .8125rem;
}
.cols-report summary { cursor: pointer; color: var(--muted); }
.cols-report summary:hover { color: var(--ink); }
.cols-report__table { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.cols-report__table td { padding: .25rem .5rem .25rem 0; border-bottom: 1px solid #F0F3F6; }
.cols-report__table td:first-child { font-weight: 500; width: 9rem; }

/* --- Abgeleitete Zeile in den Lohnkosten --------------------------------- */
.cell-derived { background: #F4F6F8; color: var(--muted); font-size: .8125rem; }
.grid tbody tr.row-derived:hover td { background: #EDF0F3; }
.tag {
  display: inline-block;
  font: 500 .625rem/1 var(--cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: #EAF4FD;
  border: 1px solid #C7E2F7;
  border-radius: 100px;
  padding: .22rem .4rem;
  margin-left: .4rem;
  vertical-align: middle;
}
.lohnfoot { padding: .7rem .55rem; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); }

/* --- Projekte ------------------------------------------------------------- */
.projtotals { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding: 1.1rem; margin: 0; }
.submeta { font-size: .6875rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }
.submeta .split-btn { margin-right: .25rem; margin-top: .15rem; }
.grid tbody tr.row-mapped td { background: #FAFBFC; color: var(--muted); }
#projNote:not(:empty) { padding: 0 1.1rem 1rem; }
#rateTable .cell-input input { min-width: 4.5rem; }