* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #eff5fa; color: #1e2c38; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
footer { text-align: center; color: #8fa3b5; padding: 24px; font-size: 13px; }

.topbar { background: #0b4f79; color: #fff; display: flex; align-items: center; gap: 16px; padding: 10px 16px; flex-wrap: wrap; }
.topbar .brandlogo { height: 38px; width: 38px; filter: invert(1); margin-right: -6px; }
.topbar .brand { font-weight: 700; font-size: 16px; line-height: 1.2; }
.topbar .brand .sub { font-weight: 500; font-size: 12px; color: #a8d1ec; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: #cfe7f7; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.topbar nav a:hover { background: #1467a0; color: #fff; }
.topbar nav a.active { background: #1467a0; color: #fff; }
.topbar nav a.active:hover { background: #103f61; }
.navbadge { display: inline-block; background: #d9832e; color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 2px; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topright .who { font-size: 14px; color: #bcdcf2; }
.yearform select { padding: 4px 6px; border-radius: 6px; border: none; font-size: 14px; }

h1 { font-size: 22px; margin: 12px 0; }
h2 { font-size: 17px; margin: 20px 0 8px; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 15px; }
.flash.ok { background: #d9edf9; color: #0b527e; }
.flash.bad { background: #fadbd8; color: #922b21; }

.card { background: #fff; border: 1px solid #d8e4ee; border-radius: 10px; padding: 16px; margin: 12px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: #5d7183; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 2px solid #d8e4ee; }
td { padding: 7px 8px; border-bottom: 1px solid #e6eef5; }
tr:hover td { background: #f4f9fd; }
/* Money never wraps. A figure that breaks as "-" on one line and "$12,586.86" on the next
   reads as a stray dash and a positive number — the opposite of what it says. */
td.num, th.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
a.sortcol { color: inherit; text-decoration: none; white-space: nowrap; }
a.sortcol:hover { color: #146aa5; text-decoration: underline; }

a { color: #146aa5; }

.btn { display: inline-block; background: #1a7fc4; color: #fff; border: none; padding: 9px 16px; border-radius: 8px; font-size: 15px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #146aa5; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.gray { background: #8a94a0; }
.btn.warn { background: #b3541e; }
.btn.big { width: 100%; padding: 16px; font-size: 20px; font-weight: 700; }

/* --- the practice year --------------------------------------------------
   It has to be impossible to mistake for the real books, from across a room and out of the corner
   of an eye. A banner alone isn't enough — people stop seeing banners within a day — so the page
   itself carries a violet cast that never appears anywhere else in the app. */
.practicebar { background: #6b3fa0; color: #fff; text-align: center; padding: 8px; font-size: 14px; }
body.practice { background: #f3eefb; }
body.practice .topbar { background: #4a2c7a; }
body.practice .card { border-color: #d9cbee; }
body.practice footer { color: #7a6a95; }
.viewswitch { display: inline-flex; border: 1px solid #b9cbda; border-radius: 8px; overflow: hidden; }
.viewswitch button { border: none; background: #eef4f9; color: #5d7183; font-size: 13px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; }
.viewswitch button.on { background: #146aa5; color: #fff; }

/* --- split transactions ------------------------------------------------- */
.spliteditor { margin-top: 14px; }
.splithead, .splitfoot { margin: 0 0 4px; }
.splithead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.splitfoot { margin: 8px 0 0; }
table.splittbl td { padding: 5px 6px; border-bottom: 1px solid #eef4f9; }
table.splittbl input, table.splittbl select { padding: 7px 9px; font-size: 14px; }
table.splittbl .lhead th { font-size: 11px; }
.splitamt { text-align: right; }
.rowx { color: #a33; text-decoration: none; font-weight: 700; font-size: 16px; }
.rowx:hover { color: #d33; }
/* The running total. It's the whole reason nobody has to do subtraction, so it gets real size
   and a green tick the moment it balances — the one signal that the thing is ready to save. */
.alloc { display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; margin-top: 10px;
  padding: 10px 14px; background: #f6f9fc; border: 1px solid #e2ebf3; border-radius: 8px; }
.alloc .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5d7183; font-weight: 700; }
.alloc .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.alloc .v.ok { color: #1d5a26; }
.alloc .v.bad { color: #a33; }
.splitwrap > summary.splitsum { cursor: pointer; font-weight: 600; font-size: 13px; color: #146aa5;
  padding: 6px 0; list-style: none; }
.splitwrap > summary.splitsum::-webkit-details-marker { display: none; }
.splitpill { cursor: pointer; text-decoration: none; font-size: 10px; }
/* a split's lines, unfolded under its row in the register */
tr.splitrow td { background: #fbfdff; border-bottom: 1px solid #f2f7fb; }
tr.splitrow .lmemo { padding-left: 26px; }

/* "Save and keep open" next to a save button — a plain inline label, not a form field with its own
   heading, because it's an option about the button rather than part of the transaction. */
.keeplbl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; color: #5d7183; cursor: pointer; }
.keeplbl input { margin: 0; }

/* "Already have Southern Tire Mart — did you mean that?" Deliberately shaped like the suggestion
   dropdown it follows: same width feel, floating over the page rather than pushing it around, so
   nothing under the field moves while you're reaching for the button. Amber rather than red — a
   second vendor named nearly the same thing is untidy, not an error. */
.dupenote { position: absolute; z-index: 60; max-width: 340px; background: #fffdf5;
  border: 1px solid #e6d08a; border-left: 3px solid #d9a520; border-radius: 0 8px 8px 0;
  padding: 8px 11px 9px; box-shadow: 0 6px 18px rgba(31,56,77,.16); font-size: 13px; }
.dupenote .dupehead { color: #4a3b12; line-height: 1.35; }
.dupenote .dupehead strong { color: #2c2308; }
.dupenote .duperow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dupenote .btn { font-size: 12px; padding: 4px 9px; }

input, select, textarea { padding: 9px 10px; border: 1px solid #b9cbda; border-radius: 8px; font-size: 16px; background: #fff; width: 100%; }
/* a textarea defaults to the browser's monospace and to being resizable in both directions —
   neither of which matches anything else on these pages */
textarea { font-family: inherit; resize: vertical; }
input[type=checkbox] { width: auto; }
label { display: block; font-size: 13px; color: #5d7183; font-weight: 600; margin: 10px 0 4px; }
form.inline { display: inline; }
form.inline input, form.inline select { width: auto; padding: 5px 8px; font-size: 14px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #dcefdd; color: #1d5a26; }
.badge.warn { background: #fdeacc; color: #8a5a10; }
.badge.bad { background: #fadbd8; color: #922b21; }
.badge.gray { background: #e3eaf0; color: #536270; }
.badge.blue { background: #d9e9f7; color: #0b527e; }

.bignum { font-size: 28px; font-weight: 700; }
.statrow { display: flex; gap: 12px; flex-wrap: wrap; }
.statrow .card { flex: 1; min-width: 150px; text-align: center; margin: 0; }
.muted { color: #8fa3b5; font-size: 13px; }

/* filter row — inputs and selects render at different native heights by default;
   force them to match so the whole row lines up regardless of field type */
.filterrow { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.filterrow label { white-space: nowrap; }
.filterbox {
  height: 38px;
  padding: 8px 10px;
  border: 1px solid #b9cbda;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 20px;
}
select.filterbox {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%235d7183' d='M5.5 8l4.5 5 4.5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 26px;
}
button.filterbox { font-family: inherit; }

/* grouped category dropdown (Books forms) — the select supplies its own native arrow, which is
   the whole point: it should look like a list to pick from, not a bare text box */
.catwrap { display: block; }
.catwrap select.catselect { width: 100%; }
.catwrap input.catnew { width: 100%; }
.catwrap a.catback { font-size: 12px; margin-top: 3px; }
option.catnew-opt { font-style: italic; color: #5d7183; }

/* P&L report — the detail section starts on its own printed page, right after the summary.
   Detail runs one point smaller than the summary so date | ref | name | memo | amount fits. */
.pagebreak { page-break-before: always; break-before: page; }
.pl-detail table { font-size: 13px; }
/* Every category is its own table, so by default each one sizes its own columns from its own
   content — "Neal Mayeske" and "Farm Bureau Insurance" push Memo to different places and the
   column wanders down the page. Fixed layout + a shared colgroup pins all five columns to the
   same edges in every table, so Memo runs straight from the top of the report to the bottom. */
.pl-detail table { table-layout: fixed; width: 100%; }
.pl-detail td, .pl-detail th { overflow-wrap: break-word; }

/* Driver Pay — the settled/owing side got dense once one week could hold several checks plus a
   shortfall warning plus an owner option. Each fact gets its own bounded block so they read as
   separate things rather than one run-on paragraph. */
.paychk { border-left: 3px solid #9fce9f; background: #f5faf6; border-radius: 0 6px 6px 0;
  padding: 5px 9px; margin-bottom: 5px; }
.paychk.kept { border-left-color: #7fa8cd; background: #eef5fb; }
.paychk .l1 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }
.paychk .l2 { font-size: 11.5px; color: #6b7c8b; margin-top: 2px; display: flex; gap: 7px;
  flex-wrap: wrap; align-items: center; }
.paychk .l2 a { color: #3d7ba8; }
.paychk details { display: inline; }
.paychk summary { cursor: pointer; display: inline; color: #6b7c8b; }

.payact { border: 1px solid #d8e4ee; border-radius: 8px; padding: 9px 11px; background: #fbfdff; }
.payact h4 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: #5d7183; font-weight: 700; }
.payact h4 .amt { color: #1e2c38; font-size: 14px; letter-spacing: 0; }
.payact .hint { font-size: 11px; color: #8fa3b5; margin-top: 4px; line-height: 1.35; }
/* a plain "or" rule between the two ways to settle, so they don't read as one form */
.payact .or { display: flex; align-items: center; gap: 8px; margin: 9px 0 7px; color: #a8b8c6;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.payact .or:before, .payact .or:after { content: ""; flex: 1; height: 1px; background: #e2eaf1; }

/* An amount is typed, not nudged — the spinner arrows on a money field are just clutter. */
input.money::-webkit-outer-spin-button,
input.money::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.money { -moz-appearance: textfield; appearance: textfield; }

/* Books — profit & loss by truck. A matrix, so it needs a sticky header row and a sticky first
   column: scrolling sideways past the category names would make every number meaningless. */
.mwrap { overflow: auto; max-height: 620px; border: 1px solid #e6eef5; border-radius: 8px; margin-top: 10px; }
table.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.matrix th, table.matrix td { padding: 7px 10px; white-space: nowrap; }
table.matrix thead th { position: sticky; top: 0; z-index: 3; background: #f4f9fd;
  border-bottom: 2px solid #d8e4ee; text-align: right; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: #5d7183; }
table.matrix thead th:first-child { text-align: left; left: 0; z-index: 4; }
table.matrix tbody th { position: sticky; left: 0; background: #fff; z-index: 2; text-align: left;
  font-weight: 500; border-bottom: 1px solid #eef4f9;
  /* the global th rule shouts everything in caps — category names are content, not headings */
  text-transform: none; letter-spacing: 0; font-size: 13.5px; color: #1e2c38; }
table.matrix td { text-align: right; border-bottom: 1px solid #eef4f9;
  font-variant-numeric: tabular-nums; }
table.matrix tr:hover td { background: inherit; }
table.matrix tr.sect th, table.matrix tr.sect td { background: #f7fbfd; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; color: #5d7183; font-weight: 700; padding: 6px 10px; }
table.matrix tr.sub th, table.matrix tr.sub td { font-weight: 700; border-top: 1px solid #d8e4ee;
  background: #fcfdfe; }
table.matrix tr.net th, table.matrix tr.net td { font-weight: 700; font-size: 15px;
  background: #eaf6ec; border-top: 2px solid #cfe6d2; }
table.matrix .col-oh { background: #fbfbf5; }
table.matrix thead th.col-oh { background: #f6f6ec; }
table.matrix .col-tot { background: #f4f9fd; }
table.matrix thead th.col-tot { background: #e9f2f9; }
table.matrix tr.net td.col-oh { background: #e6efdf; }
table.matrix tr.net td.col-tot { background: #dcefdd; }
table.matrix .neg { color: #a33; }
table.matrix .zero { color: #c8d4de; }
table.matrix .sml { font-size: 10px; color: #8fa3b5; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Second line of a stacked truck header ("Carl" over "Truck 01"). Same size and case as the line
   above it — it's the other half of the name, not a caption — just a shade lighter so the eye
   still reads the driver first. */
table.matrix thead th .hd2 { font-size: 11px; color: #7d92a4; font-weight: 600; letter-spacing: .04em; }

/* The running-balance column. It's a different KIND of number from the rest of the row — everything
   else describes the transaction, this describes the account after it — so it reads as its own
   narrow zone: a faint band, a hairline down its left edge, and tabular figures so the digits line
   up in a column you can run your eye down. Deliberately not louder than the row, just apart from
   it. (Colour was ruled out as the differentiator: cleared rows already fade, so a colour cue here
   would be fighting that one.) */
td.balcol, th.balcol { background: #f6f9fc; border-left: 1px solid #e2ebf3;
  color: #5d7183; font-variant-numeric: tabular-nums; }
/* the row-hover tint would otherwise wipe the band out on whichever row the mouse is over */
tr:hover td.balcol { background: #eef4fa; }

/* Faint dividers between the register's other columns, so the eye can run down one column without
   drifting. Deliberately a step lighter than the balance column's own hairline (#e2ebf3) — if they
   matched, the balance column would stop being the one vertical line that means something. */
table.reg td + td, table.reg th + th { border-left: 1px solid #f2f7fb; }
/* ...except on both edges of the balance column, which gets the stronger line so the band is
   bracketed evenly rather than firm on one side and faint on the other */
table.reg td.balcol, table.reg th.balcol,
table.reg td.balcol + td, table.reg th.balcol + th { border-left-color: #e2ebf3; }

/* Register balances. Two numbers that answer different questions, so they get equal footing and
   a plain label each rather than one figure the reader has to interpret. */
.balrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.balrow .bal { flex: 1; min-width: 210px; border: 1px solid #d8e4ee; border-radius: 8px;
  padding: 9px 12px; background: #f7fbfe; }
.balrow .bal.alt { background: #fbfdff; }
.balrow .bal.gap { background: #fdfdf7; border-color: #e6e6d4; }
.balrow .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5d7183;
  font-weight: 700; }
.balrow .fig { font-size: 23px; font-weight: 700; margin: 2px 0 3px; font-variant-numeric: tabular-nums; }
.balrow .fig.neg { color: #a33; }
.balrow .sub { font-size: 11.5px; color: #8fa3b5; line-height: 1.35; }

/* register tabs */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.tabbar a { padding: 8px 14px; border: 1px solid #d8e4ee; border-bottom: none; border-radius: 10px 10px 0 0;
  background: #dfe9f2; color: #31506a; text-decoration: none; font-size: 14px; font-weight: 600; }
.tabbar a.active { background: #fff; color: #0b4f79; position: relative; top: 1px; }
.card.tabcard { border-top-left-radius: 0; margin-top: 0; }
/* Count on a tab — same orange pill as the nav badges, so "there is work here" looks the same
   everywhere in the app rather than being a new thing to learn on this page. */
.tabbar .tabbadge { display: inline-block; margin-left: 5px; min-width: 18px; padding: 1px 6px;
  border-radius: 9px; background: #d9822b; color: #fff; font-size: 11px; font-weight: 700;
  line-height: 16px; text-align: center; vertical-align: 1px; }

/* printing: only the invoice itself comes out */
@media print {
  .topbar, footer, .flash, .noprint { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .card { border: none; margin: 0; }
  details:not([open]) { display: none; }
  a { color: inherit; text-decoration: none; }
  /* the light blue used for de-emphasized labels on screen is too faint on paper/PDF —
     darken it (same blue family, just readable) for anything that actually gets printed */
  .muted { color: #0b4f79; }
}

/* driver phone page */
.driverform { max-width: 480px; margin: 0 auto; }
.driverform input, .driverform select { font-size: 20px; padding: 14px; }
.driverform label { font-size: 15px; }
.invoice-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.right { text-align: right; }