/* TT Paysheet — app interface. Ink black, flag red, white and warm off-white; Manrope for headings, Inter for text and figures. */

:root {
  /* TT Paysheet colour stack */
  --paper: #f7f5f2;           /* warm off-white: the app canvas and alternate sections */
  --surface: #ffffff;         /* cards, tables, dialogs */
  --band: #efece7;
  --ink: #111111;
  --muted: #5b6068;           /* slate: secondary text */
  --rule: #e4e2de;            /* light stone: borders and table lines */
  --rule-strong: #c8c5bf;
  --ledger: #ce1126;          /* flag red: the accent (buttons, links, marks). Customers can replace it with their own. */
  --ledger-deep: #a00d1e;
  --ledger-tint: #fbebed;
  --rail: #111111;            /* the navigation rail */
  --rail-mark: #ff4d5e;
  --ok: #1e8e5a;              /* success: paid, approved */
  --ok-ink: #16694a;          /* the same green, dark enough for small text */
  --ok-tint: #e2f2e9;
  --amber: #8a5a0b;           /* warning: pending */
  --amber-fill: #e8a317;
  --amber-tint: #f9ebcb;
  --red: #b50e1f;
  --red-tint: #fbe3e6;
  --focus: #0b6bcb;
  --radius: 6px;
  --font-display: 'Manrope', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e0e0f; --surface: #171718; --band: #1f1f21; --ink: #f4f2ee; --muted: #a5a8ae;
    --rule: #2c2c2f; --rule-strong: #47474b; --ledger: #ff5a6b; --ledger-deep: #ff8f9b; --ledger-tint: #33161a;
    --rail: #000000; --rail-mark: #ff5a6b; --ok: #4cc38a; --ok-ink: #4cc38a; --ok-tint: #14281f;
    --amber: #e6b65c; --amber-tint: #3b2f14; --red: #ff8f9b; --red-tint: #3a1a1e; --focus: #6cb2ff;
  }
}

@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--font-body); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; max-width: 68ch; }
a { color: var(--ledger); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.num, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shell */
.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: #f4f2ee; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; }
@media (prefers-color-scheme: dark) { .rail { border-right: 1px solid var(--rule); } }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 0 .5rem; line-height: 1.1; }
.brand small { display: block; font: 400 .8rem var(--font-body); opacity: .75; margin-top: .3rem; overflow-wrap: anywhere; }
.rail nav { display: flex; flex-direction: column; gap: .15rem; }
.rail nav a { color: inherit; text-decoration: none; padding: .6rem .75rem; border-radius: var(--radius); display: block; }
.rail nav a:hover { background: rgba(255, 255, 255, .08); }
.rail nav a[aria-current='page'] { background: rgba(255, 255, 255, .16); font-weight: 600; box-shadow: inset 3px 0 0 var(--rail-mark); }
.rail .spacer { flex: 1; }
.rail button.link { color: inherit; opacity: .85; }
main { padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; max-width: 78rem; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head .sub { color: var(--muted); margin-top: .35rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 52rem) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; }
  .rail nav { flex-direction: row; flex-wrap: wrap; }
  .rail .spacer { display: none; }
}

/* controls */
button, .btn {
  font: 600 .95rem var(--font-body); padding: .55rem 1rem; border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
button:hover, .btn:hover { border-color: var(--ledger); }
button.primary { background: var(--ledger); border-color: var(--ledger); color: #fff; }
@media (prefers-color-scheme: dark) { button.primary { color: #111111; } }
button.primary:hover { background: var(--ledger-deep); border-color: var(--ledger-deep); }
@media (prefers-color-scheme: dark) { button.primary:hover { background: var(--ledger-deep); border-color: var(--ledger-deep); } }
button.danger { color: var(--red); border-color: var(--red); }
button.link { background: none; border: 0; padding: .25rem .5rem; text-decoration: underline; text-underline-offset: 3px; color: var(--ledger); }
button[disabled] { opacity: .5; cursor: not-allowed; }

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
label .hint { font-weight: 400; color: var(--muted); display: block; font-size: .82rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .5rem .6rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
input[type='number'] { font-variant-numeric: tabular-nums; text-align: right; }
input[type='checkbox'], input[type='radio'] { width: auto; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.check input { margin-top: .3rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.grid .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; background: var(--surface); }
legend { font-family: var(--font-display); font-weight: 650; padding: 0 .4rem; }

/* ledger table — the main surface of the app */
.sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; }
.ledger caption { text-align: left; padding: .75rem 1rem; color: var(--muted); }
.ledger th { text-align: left; font-weight: 650; font-size: .88rem; padding: .65rem .9rem; border-bottom: 2px solid var(--ledger); color: var(--ledger-deep); background: var(--surface); position: sticky; top: 0; }
@media (prefers-color-scheme: dark) { .ledger th { color: var(--ledger); } }
.ledger td { padding: .6rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ledger tbody tr:nth-child(4n+1):not(.trail-row), .ledger tbody tr:nth-child(4n+2):not(.trail-row) { background: transparent; }
.ledger tr.row-open > td { background: var(--ledger-tint); border-bottom-color: transparent; }
.ledger tr.clickable { cursor: pointer; }
.ledger tr.clickable:hover > td { background: var(--band); }
.ledger tfoot td { font-weight: 700; border-top: 2px solid var(--ledger); border-bottom: 3px double var(--ledger); background: var(--band); }
.net { font-weight: 700; }
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 650; background: var(--band); }
.chip.posted { background: var(--ok-tint); color: var(--ok-ink); }
.chip.draft { background: var(--amber-tint); color: var(--amber); }
.chip.off { background: var(--band); color: var(--muted); }
.warnmark { color: var(--amber); font-weight: 700; }
.errmark { color: var(--red); font-weight: 700; }

/* totals strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); margin-bottom: 1.25rem; }
.strip div { padding: .85rem 1rem; border-right: 1px solid var(--rule); }
.strip div:last-child { border-right: 0; }
.strip dt { color: var(--muted); font-size: .85rem; }
.strip dd { margin: .15rem 0 0; font: 650 1.3rem var(--font-display); font-variant-numeric: tabular-nums; }
.strip .neg dd { color: var(--red); }
.strip .final { background: var(--ledger-tint); }

/* calculation trail — an adding-machine tape for one pay line */
.trail-row > td { padding: 0; background: var(--ledger-tint); border-bottom: 1px solid var(--rule-strong); }
.trail-wrap { display: grid; grid-template-columns: minmax(18rem, 26rem) 1fr; gap: 1.5rem; padding: 1.25rem 1.25rem 1.5rem; align-items: start; }
@media (max-width: 62rem) { .trail-wrap { grid-template-columns: 1fr; } }
.tape { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.1rem; border-radius: var(--radius); position: relative; }
.tape h3 { margin-bottom: .6rem; }
.tape ol { list-style: none; margin: 0; padding: 0; }
.tape li { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .3rem 0; align-items: baseline; }
.tape li .lbl { background: linear-gradient(to right, var(--rule-strong) 45%, transparent 0) repeat-x 0 82% / 6px 1px; padding-right: .4rem; }
.tape li .lbl span { background: var(--surface); padding-right: .35rem; }
.tape li .val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tape li .why { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; margin-top: -.15rem; }
.tape li.final { border-top: 2px solid var(--ledger); margin-top: .4rem; padding-top: .55rem; }
.tape li.final .val { border-bottom: 3px double var(--ledger); }
.notice { border-left: 4px solid var(--amber); background: var(--amber-tint); padding: .6rem .85rem; border-radius: 0 var(--radius) var(--radius) 0; margin: .6rem 0; font-size: .92rem; }
.notice.error { border-color: var(--red); background: var(--red-tint); }
.notice.info { border-color: var(--ledger); background: var(--ledger-tint); }
.inputs-form .grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }

/* dialogs */
dialog { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0; background: var(--surface); color: var(--ink); width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog::backdrop { background: rgba(17, 17, 17, .55); }
.dlg-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dlg-body { padding: 1.25rem 1.4rem; overflow: auto; max-height: calc(100vh - 12rem); }
.dlg-foot { padding: .9rem 1.4rem; border-top: 1px solid var(--rule); display: flex; gap: .5rem; justify-content: flex-end; background: var(--band); border-radius: 0 0 10px 10px; }

/* toast */
#toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 50; max-width: min(40rem, 92vw); }
.toast { background: var(--ink); color: var(--surface); padding: .7rem 1.1rem; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.toast.error { background: var(--red); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .18s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } } }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(26rem, 100%); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 2rem; }
.login-card h1 { margin-bottom: .35rem; }
.login-card form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: .4rem; }
.search { max-width: 22rem; }
.edit-table input { padding: .3rem .4rem; min-width: 6.5rem; }

/* printing: payslip dialog and paysheet */
.payslip { font-size: .95rem; }
.payslip h2 { font-size: 1.3rem; }
.payslip table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.payslip td, .payslip th { padding: .35rem 0; text-align: left; border-bottom: 1px dotted var(--rule-strong); }
.payslip td.num, .payslip th.num { text-align: right; }
.payslip tr.total td { border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
@media print {
  body { background: #fff; color: #000; }
  .rail, .page-head .actions, .no-print, #toast, .dlg-foot, .dlg-head button { display: none !important; }
  .app { display: block; }
  main { padding: 0; max-width: none; }
  .sheet, .strip { border-color: #999; }
  .trail-row { display: none; }
  dialog[open] { position: static; border: 0; width: 100%; max-height: none; }
  dialog::backdrop { display: none; }
  .dlg-body { max-height: none; overflow: visible; }
  body.printing-slip main > * { display: none; }
  body.printing-slip main > dialog { display: block; }
}
.inputs-form h3 { margin-bottom: .75rem; }

/* per-company branding */
.brand-logo { display: block; max-width: 100%; max-height: 3rem; object-fit: contain; object-position: left; }
.brand-logo + small { margin-top: .5rem; }
.login-logo { display: block; max-width: 70%; max-height: 4rem; object-fit: contain; margin-bottom: 1rem; }
.slip-logo { display: block; max-height: 3rem; max-width: 12rem; object-fit: contain; margin-bottom: .5rem; }
.logo-preview { max-width: 14rem; max-height: 5rem; object-fit: contain; background: var(--band); padding: .5rem; border-radius: var(--radius); }
.colour-row { display: flex; gap: .5rem; align-items: center; }
.colour-row input[type=color] { width: 3rem; height: 2.5rem; padding: 0; flex: none; }
[hidden] { display: none !important; }
.grid h4 { margin: .5rem 0 0; font: 600 .9rem var(--font-body); }
.ledger td:first-child { white-space: nowrap; }

/* TT Paysheet credit */
.rail-foot { padding: 0 .5rem; font-size: .85rem; color: #d6d3ce; display: grid; gap: .75rem; }
.powered { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: inherit; text-decoration: none; opacity: .9; }
.powered img { display: block; border-radius: 5px; }
.login { align-content: center; justify-items: center; gap: 1.25rem; }
.login .powered { color: var(--muted); }
@media (max-width: 52rem) { .rail-foot { display: none; } }