/* TrailerBooks
   Visual direction: a yard ledger, not a SaaS dashboard. Concrete-gray paper,
   fleet-lettering condensed display type, tabular mono for every figure.
   Safety amber is used once per screen at most. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper:    #E9EAE6;
  --card:     #FDFDFC;
  --ink:      #16181A;
  --steel:    #5C6470;
  --hairline: #C9CBC5;
  --amber:    #E8A317;
  --oxide:    #A93226;
  --moss:     #2F6B4F;

  --display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 2px solid var(--ink);
  background: var(--card);
}
.masthead-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px 20px 0;
}
.biz {
  font-family: var(--display);
  font-size: 30px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1; margin: 0;
}
.biz small {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--steel);
  font-weight: 400; text-transform: uppercase; margin-top: 5px;
}

nav { display: flex; gap: 2px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
nav > .theme-toggle:first-of-type { margin-left: auto; }
nav a {
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--steel); padding: 8px 14px;
  border: 1px solid transparent; border-bottom: none;
}
nav a:hover { color: var(--ink); background: var(--paper); }
nav a.on {
  color: var(--ink); background: var(--paper);
  border-color: var(--ink);
  position: relative; top: 1px;
}
nav a .badge {
  display: inline-block; background: var(--oxide); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 0 5px; margin-left: 5px; border-radius: 2px;
  vertical-align: 1px;
}

/* ------------------------------------------- signature: the liability strip */

.placard {
  display: flex; align-items: stretch;
  background: var(--ink); color: #fff;
  margin: 22px 0 26px;
  border: 1px solid var(--ink);
}
.placard-stripe {
  width: 16px; flex: 0 0 16px;
  background: repeating-linear-gradient(
    -45deg, var(--amber) 0 6px, var(--ink) 6px 12px);
}
.placard-body {
  flex: 1; padding: 13px 18px;
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.placard-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber);
}
.placard-label span { display: block; color: #9AA0A8; letter-spacing: 0.08em; margin-top: 3px; text-transform: none; font-size: 11px; }
.placard-figure {
  font-family: var(--mono); font-size: 30px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 18px 20px 20px;
}
.card h2 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 3px; padding-bottom: 9px;
  border-bottom: 1px solid var(--hairline);
}
.card .window {
  font-family: var(--mono); font-size: 10.5px; color: var(--steel);
  letter-spacing: 0.06em; margin: 9px 0 14px;
}

/* ------------------------------------------------------------ ledger lines */

.line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 0;
  border-bottom: 1px dotted var(--hairline);
}
.line:last-child { border-bottom: none; }
.line .k { color: var(--steel); font-size: 14px; }
.line .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; white-space: nowrap;
}
.line.total {
  border-top: 2px solid var(--ink); border-bottom: none;
  margin-top: 8px; padding-top: 10px;
}
.line.total .k {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; font-size: 16px; color: var(--ink);
}
.line.total .v { font-size: 22px; font-weight: 600; }
.pos { color: var(--moss); }
.neg { color: var(--oxide); }
.muted { color: var(--steel); }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel);
  text-align: left; padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--ink);
}
tbody td {
  padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
tbody tr:hover { background: #F4F4F1; }
td.num, th.num {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; padding-right: 0; white-space: nowrap;
}
.empty {
  padding: 34px 0; text-align: center; color: var(--steel);
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 15px;
}

/* ------------------------------------------------------------------- forms */

form.stack { display: grid; gap: 14px; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: 1fr 1fr 1fr; }

label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 5px;
}
input[type=text], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--hairline); background: #fff;
  font-family: var(--body); font-size: 15px; color: var(--ink);
  border-radius: 0;
}
input.money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--ink);
}
textarea { resize: vertical; min-height: 62px; }
.check { display: flex; align-items: center; gap: 8px; }
.check label { margin: 0; }

button, .btn {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 20px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
  text-decoration: none; display: inline-block; border-radius: 0;
}
button:hover, .btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.small, button.small { font-size: 12px; padding: 5px 11px; }
.btn.danger { background: transparent; color: var(--oxide); border-color: var(--oxide); }
.btn.danger:hover { background: var(--oxide); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ------------------------------------------------------------------ flashes */

.flash {
  padding: 11px 16px; margin: 16px 0; font-size: 14px;
  border-left: 4px solid var(--moss); background: #fff;
  border-top: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.flash.error { border-left-color: var(--oxide); }

.note {
  font-size: 13px; color: var(--steel);
  border-left: 3px solid var(--hairline); padding: 3px 0 3px 12px;
  margin: 14px 0;
}
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--hairline);
  color: var(--steel); white-space: nowrap;
}
.tag.live { border-color: var(--moss); color: var(--moss); }
.tag.off  { border-color: var(--oxide); color: var(--oxide); }

h1.page {
  font-family: var(--display); font-size: 27px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 24px 0 4px;
}
.sub { color: var(--steel); font-size: 14px; margin: 0 0 20px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .grid.two, .grid.three, .row, .row.three { grid-template-columns: 1fr; }
  .placard-figure { font-size: 25px; }
  .biz { font-size: 24px; }
  table { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- dark mode
   Same industrial vocabulary, inverted. The paper goes to cold iron rather
   than pure black - pure black under white text buzzes on an LCD. Amber gets
   a touch brighter because it loses punch on a dark field. */

[data-theme="dark"] {
  --paper:    #15171A;
  --card:     #1D2024;
  --ink:      #E7E9E6;
  --steel:    #939BA5;
  --hairline: #32373D;
  --amber:    #F0B03A;
  --oxide:    #E4705E;
  --moss:     #5CB68C;
}

/* The masthead and placard both sat on dark ground already, so in dark mode
   they need lifting apart from the page rather than sinking into it. */
[data-theme="dark"] .masthead { background: #1A1D21; border-bottom-color: var(--hairline); }
[data-theme="dark"] .placard  { background: #0C0E10; border-color: #33383D; }
[data-theme="dark"] .line.total { border-top-color: var(--steel); }
[data-theme="dark"] thead th    { border-bottom-color: var(--steel); }
[data-theme="dark"] tbody tr:hover { background: #24282D; }
[data-theme="dark"] nav a.on { border-color: var(--steel); }

[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=file],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #14161A; color: var(--ink); border-color: var(--hairline);
}
[data-theme="dark"] input[type=date] { color-scheme: dark; }

[data-theme="dark"] button, [data-theme="dark"] .btn {
  background: var(--ink); color: #15171A; border-color: var(--ink);
}
[data-theme="dark"] button:hover, [data-theme="dark"] .btn:hover { background: #fff; }
[data-theme="dark"] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--steel); }
[data-theme="dark"] .btn.ghost:hover { background: var(--ink); color: #15171A; }
[data-theme="dark"] .btn.danger { background: transparent; color: var(--oxide); border-color: var(--oxide); }
[data-theme="dark"] .btn.danger:hover { background: var(--oxide); color: #15171A; }
[data-theme="dark"] .flash { background: var(--card); }
[data-theme="dark"] code { background: #14161A; padding: 1px 5px; }

/* ------------------------------------------------------------ theme toggle */

.theme-toggle {
  margin-left: 8px;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--hairline); color: var(--steel);
  padding: 6px 12px; cursor: pointer; align-self: center;
  margin-bottom: 8px;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); background: none; }
[data-theme="dark"] .theme-toggle { background: none; color: var(--steel); border-color: var(--hairline); }
[data-theme="dark"] .theme-toggle:hover { background: none; color: var(--ink); border-color: var(--ink); }
.theme-toggle .lbl-dark  { display: none; }
[data-theme="dark"] .theme-toggle .lbl-light { display: none; }
[data-theme="dark"] .theme-toggle .lbl-dark  { display: inline; }

@media (max-width: 760px) {
  .theme-toggle { margin-left: 0; }
}

/* Second cell in the placard for deposits held. Same idea as the sales tax
   figure: money in the account that isn't yours to spend. */
.placard-split {
  width: 1px; background: #3A4046; margin: 12px 0; flex: 0 0 1px;
}
@media (max-width: 760px) {
  .placard { flex-wrap: wrap; }
  .placard-split { width: 100%; height: 1px; flex: 0 0 100%; margin: 0 18px; }
  .placard-stripe { width: 100%; height: 10px; flex: 0 0 100%; }
}

/* ------------------------------------------------------------------ search */

.masthead-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

.searchbar { display: flex; gap: 6px; align-items: center; margin: 0 0 14px; }
.searchbar input[type=search] {
  flex: 1; min-width: 180px; padding: 8px 11px;
  border: 1px solid var(--hairline); background: #fff; color: var(--ink);
  font-family: var(--body); font-size: 14px; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.searchbar input[type=search]:focus {
  outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--ink);
}
.searchbar.top { margin: 6px 0 0; max-width: 300px; flex: 0 1 300px; }
.searchbar.top input[type=search] { font-size: 13px; padding: 6px 10px; }

[data-theme="dark"] .searchbar input[type=search] {
  background: #14161A; color: var(--ink); border-color: var(--hairline);
}

/* Highlight that a filtered view is not the whole list */
.filtered {
  border-left: 3px solid var(--amber); padding: 3px 0 3px 12px;
  font-size: 13px; color: var(--steel); margin: 0 0 14px;
}

@media (max-width: 760px) {
  .masthead-top { flex-direction: column; gap: 0; }
  .searchbar.top { max-width: none; flex: 1 1 auto; width: 100%; margin-bottom: 4px; }
}

/* ------------------------------------------------------------ status tabs */

.tabrow { display: flex; gap: 2px; margin: 0 0 14px; flex-wrap: wrap; }
.tabbtn {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--steel); padding: 7px 13px;
  border: 1px solid var(--hairline); background: transparent;
}
.tabbtn:hover { color: var(--ink); border-color: var(--steel); }
.tabbtn.on { color: var(--ink); border-color: var(--ink); background: var(--card); }
.tabbtn .n {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--steel); margin-left: 3px;
}
.tabbtn.on .n { color: var(--ink); }

/* A cancelled row should read as struck from the books without becoming
   unreadable - a left marker rather than greying the text out. */
tbody tr.is-cancelled td:first-child { box-shadow: inset 3px 0 0 var(--oxide); }
tbody tr.is-cancelled { background: rgba(169, 50, 38, 0.04); }
[data-theme="dark"] tbody tr.is-cancelled { background: rgba(228, 112, 94, 0.07); }

/* --------------------------------------------------- inline edit in a list */

.inline-set { margin: 0; }
.inline-set select {
  padding: 4px 6px; font-size: 13px; max-width: 190px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font-family: var(--body); border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
/* Only show it's a control on hover, so the table still reads as a table */
.inline-set select:hover { border-color: var(--hairline); background: var(--card); }
.inline-set select:focus {
  outline: 2px solid var(--amber); outline-offset: -1px;
  border-color: var(--ink); background: var(--card);
}
.inline-set select.unset { color: var(--steel); font-style: italic; }
[data-theme="dark"] .inline-set select { color: var(--ink); }
[data-theme="dark"] .inline-set select:hover,
[data-theme="dark"] .inline-set select:focus { background: #14161A; }

/* Inline text inputs, same restraint as the selects: invisible until you
   reach for them, so the table still reads as a table. */
.inline-set input[type=text] {
  padding: 4px 6px; font-size: 13px; width: 100%; min-width: 90px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font-family: var(--body); border-radius: 0;
}
.inline-set input[type=text]:hover { border-color: var(--hairline); background: var(--card); }
.inline-set input[type=text]:focus {
  outline: 2px solid var(--amber); outline-offset: -1px;
  border-color: var(--ink); background: var(--card);
}
.inline-set input.unset { color: var(--steel); font-style: italic; }
.inline-set input.num-in {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; min-width: 78px;
}
[data-theme="dark"] .inline-set input[type=text] { color: var(--ink); }
[data-theme="dark"] .inline-set input[type=text]:hover,
[data-theme="dark"] .inline-set input[type=text]:focus { background: #14161A; }

/* Briefly mark the row you just came back to, so a saved edit is obvious
   without hunting for it. */
tr:target td { box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber); }
tr:target td:first-child { box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber), inset 3px 0 0 var(--amber); }

/* --------------------------------------------------------- table breathing

   The rentals table carries a lot: numbers, dates, names, an editable
   trailer, tags and three actions. Left alone the browser gives every column
   an equal shout and the money columns end up wrapping while the buttons
   push off the right edge. */

table { table-layout: auto; }

/* Money columns should never wrap or shrink - they're what you scan for */
td.num, th.num { white-space: nowrap; }

/* Keep actions on one line and hard against the right */
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
td.actions .btn, td.actions button { margin-left: 3px; }

/* The inline trailer select gets a sensible share rather than being squeezed
   to "4 - 202" */
.inline-set select { max-width: 100%; min-width: 130px; text-overflow: ellipsis; }

/* Wide tables scroll rather than overflowing the card */
.card > table, .tablewrap { display: block; overflow-x: auto; }
.card > table > thead, .card > table > tbody { display: table; width: 100%; }

/* ------------------------------------------------------------ share bars */

.barcell { width: 26%; min-width: 110px; }
.bartrack {
  background: var(--hairline); height: 9px; width: 100%;
  position: relative; overflow: hidden;
}
.barfill { background: var(--amber); height: 9px; max-width: 100%; }
.barfill.quiet { background: var(--steel); }
.barfill.neg { background: var(--oxide); }

@media (max-width: 900px) {
  .barcell { display: none; }
}