/* Spreadsheet look: Excel green ribbon, thin grey gridlines, grey headers, green/red fills for paid/late. */
:root {
  --green: #217346;
  --grid: #d4d4d4;
  --head: #f3f3f3;
  --head-text: #444;
  --paid-bg: #c6efce;
  --paid-text: #006100;
  --late-bg: #ffc7ce;
  --late-text: #9c0006;
  --current: #fff8d6;
  --input-bg: #fffdf2;
  font-family: Aptos, Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #222;
}

* { box-sizing: border-box; }
body { margin: 0; background: #e9ecef; }

.ribbon {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--green); color: #fff; padding: .6rem 1rem;
  position: sticky; top: 0; z-index: 5;
}
.ribbon h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
.save-status { font-size: .85rem; opacity: .9; }
.save-status.bad { background: var(--late-bg); color: var(--late-text); padding: .1rem .5rem; border-radius: 3px; opacity: 1; }

.loading { padding: 2rem; text-align: center; color: #666; }

.layout {
  display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 1rem;
  padding: 1rem; align-items: start;
}
.left { display: flex; flex-direction: column; gap: 1rem; }
.right { min-width: 0; background: #fff; border: 1px solid var(--grid); padding: .5rem; }
.hint { margin: .25rem .25rem .6rem; color: #555; font-size: .85rem; }

/* ---- sheet tables ---- */
.sheet { border-collapse: collapse; background: #fff; width: 100%; }
.sheet th, .sheet td { border: 1px solid var(--grid); padding: 0; height: 30px; }
.sheet thead th { background: var(--head); color: var(--head-text); font-weight: 600; padding: .25rem .5rem; text-align: left; }
.sheet .rowhead { background: var(--head); color: var(--head-text); font-weight: 500; text-align: left; padding: .25rem .5rem; white-space: nowrap; }
.sheet td.calc, .sheet td.num { padding: .25rem .5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet td.calc.bad { color: var(--late-text); background: var(--late-bg); font-size: .85rem; }
.sheet input, .sheet select {
  width: 100%; height: 100%; min-height: 30px; border: 0; background: var(--input-bg);
  font: inherit; color: inherit; padding: .25rem .5rem;
}
.sheet input:focus, .sheet select:focus { outline: 2px solid var(--green); outline-offset: -2px; background: #fff; }
.sheet input.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .x { width: 32px; text-align: center; background: #fff; }
.sheet .money { width: 110px; }

.holiday thead .title { background: var(--green); padding: 0; }
.holiday thead .title input { background: transparent; color: #fff; font-weight: 600; font-size: 1rem; }
.holiday thead .title input::placeholder { color: #d6eadd; }
.holiday thead .title input:focus { background: #1a5c38; outline-color: #fff; }
.holiday thead th.x { background: var(--green); }
.holiday thead th.x .icon { color: #fff; }
.holiday tr.total th, .holiday tr.total td { font-weight: 700; border-top: 2px solid #888; }
.holiday tr.remaining th, .holiday tr.remaining td { font-weight: 700; }
.holiday tr.person td.calc { font-weight: 700; color: var(--green); }
.settings thead tr:first-child th { background: var(--green); color: #fff; }
.settings td:last-child { width: 80px; }

.btn { font: inherit; border: 1px solid var(--grid); background: #fff; padding: .5rem .9rem; border-radius: 3px; cursor: pointer; }
.btn.add { border-style: dashed; color: var(--green); font-weight: 600; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.icon { border: 0; background: none; cursor: pointer; font-size: 1rem; color: #888; padding: .25rem; }
.icon:hover { color: var(--late-text); }
.link { border: 0; background: none; color: var(--green); cursor: pointer; font: inherit; padding: .3rem .5rem; }

/* ---- monthly grid ---- */
.grid-wrap { overflow: auto; max-height: calc(100vh - 140px); }
.grid { width: auto; min-width: 100%; }
.grid thead th { text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.grid thead tr:nth-child(2) th { top: 31px; }
.grid thead th.hol { background: #e2efda; color: #1e4d2b; }
.grid th.tot, .grid td.tot { border-left: 2px solid #888; }
.grid th.tot ~ th.tot, .grid td.tot ~ td.tot { border-left: 1px solid var(--grid); }
.grid thead th.hol.tot { background: var(--green); color: #fff; }
.grid th.month { background: var(--head); color: var(--head-text); text-align: left; padding: .25rem .6rem; white-space: nowrap; font-weight: 500; }
.grid .sticky { position: sticky; left: 0; z-index: 1; }
.grid thead .sticky { z-index: 3; }
.grid td.off { background: #fafafa; }
.grid td.num { min-width: 84px; }
.grid tr.current th.month { background: var(--current); font-weight: 700; }
.grid tr.current td { background: var(--current); }
.grid td.tot { padding: 0; font-weight: 600; }
.grid td.tot .tick {
  width: 100%; min-height: 30px; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: right; padding: .25rem .5rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.grid td.tot .tick:hover { outline: 2px solid var(--green); outline-offset: -2px; }
.grid td.paid, .grid tr.current td.paid { background: var(--paid-bg); color: var(--paid-text); }
.grid td.late, .grid tr.current td.late { background: var(--late-bg); color: var(--late-text); }
.grid tfoot th, .grid tfoot td { font-weight: 700; border-top: 2px solid #888; }
.grid tfoot tr + tr th, .grid tfoot tr + tr td { border-top: 1px solid var(--grid); }
.grid tfoot td.tot { padding: .25rem .5rem; }
.grid .empty { padding: 2rem; color: #666; text-align: center; border: 0; }

/* ---- dialog / toast ---- */
dialog { border: 1px solid var(--grid); border-radius: 6px; padding: 1.25rem; max-width: 320px; width: 90vw; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
dialog input { width: 100%; font-size: 1.2rem; padding: .5rem; margin: .5rem 0; border: 1px solid #aaa; border-radius: 3px; }
dialog .btn { width: 100%; }
.error { color: var(--late-text); margin: .25rem 0 .5rem; }
.toast {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10;
  background: #333; color: #fff; padding: .6rem 1rem; border-radius: 4px; max-width: 90vw;
}

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; padding: .5rem; }
  .right { order: -1; }
  /* Totals come first here, so the thick divider goes after them instead. */
  .grid th.tot, .grid td.tot { border-left: 1px solid var(--grid); }
  .grid tr > .tot:last-of-type, .grid thead tr:first-child th.tot { border-right: 2px solid #888; }
  .grid-wrap { max-height: none; }
}