@font-face { font-family: "IBM Plex Sans"; src: url("/brand/IBMPlexSans-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/brand/IBMPlexSans-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/brand/IBMPlexSans-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600 700; font-display: swap; }
:root {
  color-scheme: light;
  --ink: #17232d;
  --muted: #61707a;
  --line: #e3e7e8;
  --accent: #a8282c;
  --accent-dark: #8d2024;
  --paper: #fff;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  color: var(--ink);
  background: #f5f6f4;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); }
.shell { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 100vh; }
aside { background: #17232d; padding: 27px 16px; }
.brand { display: grid; justify-items: start; gap: 7px; margin: 0 5px 25px; color: white; text-decoration: none; }
.brand img { display: block; width: 156px; height: auto; }
.brand small { font-size: .79rem; color: #c0cbd2; font-weight: 400; }
nav { display: grid; gap: 4px; }
nav a { color: #dce9ef; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
nav a:hover, nav a[aria-current] { background: #2f404b; color: #fff; }
nav a[aria-current] { box-shadow: inset 3px 0 #d2666a; }
.logout { margin: 17px 12px 0; }
.login { max-width: 460px; margin: 9vh auto 0; }
.login-logo { display: block; width: min(190px, 100%); height: auto; margin-bottom: 25px; }
.login h1 { margin-bottom: 11px; }
.login label { margin-bottom: 14px; }
main { width: 100%; max-width: 1430px; padding: 38px clamp(19px, 4vw, 58px) 60px; }
header { margin-bottom: 25px; }
.eyebrow { margin: 0 0 6px; color: var(--accent); letter-spacing: .13em; font-size: .71rem; font-weight: 700; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.75rem, 4vw, 2.35rem); margin-bottom: 0; letter-spacing: -.025em; }
h2 { font-size: 1.15rem; margin-bottom: 16px; }
.panel, .stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.panel { margin-bottom: 19px; padding: 20px; }
.panel > :last-child { margin-bottom: 0; }
summary { cursor: pointer; font-weight: 650; }
details[open] summary { margin-bottom: 13px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { text-decoration: none; padding: 18px; color: var(--muted); }
.stat strong { display: block; font-size: 2rem; color: var(--ink); margin-top: 5px; }
.stat:hover { border-color: var(--accent); }
.notice { padding: 13px 15px; margin-bottom: 18px; border-radius: 9px; background: #f9eeee; color: #791e22; }
.muted, .empty { color: var(--muted); }
.toolbar, .filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 17px; }
.filters { align-items: end; }
.filters .fields { margin-bottom: 0; flex: 1 1 300px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 14px; margin-bottom: 16px; }
.invoice-line { min-width: 0; margin: 0 0 12px; padding: 12px; border: 1px solid #dce3e5; border-radius: 8px; }
.invoice-line p { margin: 0 0 10px; }
.invoice-line .fields { margin-bottom: 0; }
.invoice-line [data-remove] { margin-top: 10px; }
label { display: grid; gap: 5px; font-size: .88rem; font-weight: 600; }
input, select, textarea { border: 1px solid #b9cbd3; border-radius: 7px; font: inherit; font-weight: 400; color: var(--ink); background: white; min-height: 41px; padding: 8px 10px; width: 100%; }
textarea { resize: vertical; margin-bottom: 12px; }
input[readonly] { background: #f4f7f8; }
button, .button { display: inline-block; font: inherit; font-size: .88rem; font-weight: 650; text-decoration: none; border: 1px solid var(--accent); background: var(--accent); color: white; border-radius: 7px; padding: 9px 13px; cursor: pointer; }
button:hover, .button:hover { filter: brightness(.91); }
.secondary { color: var(--accent); background: white; }
.inline { display: inline; }
.action { display: inline-block; font-weight: 600; padding: 4px 0; margin-right: 6px; }
form > label + button { margin-top: 12px; }
small { display: block; margin-top: 3px; color: var(--muted); }
.warn { color: #815308; }
.danger { color: #a02d2d; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); background: #edf1f2; font-size: .8rem; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td:last-child { white-space: nowrap; }
:focus-visible { outline: 3px solid #c76a6d; outline-offset: 2px; }
@media (max-width: 710px) {
  .shell { grid-template-columns: 1fr; }
  aside { padding: 12px; }
  .brand { margin: 0 0 9px; }
  nav { display: flex; flex-wrap: wrap; gap: 2px; }
  nav a { padding: 7px 8px; font-size: .86rem; }
  main { padding-top: 22px; }
  .panel { padding: 14px; }
}