/* Melbourne Access & Forklift Hire - CRM.
   Industrial palette: charcoal steel + safety amber on a neutral grey.
   Variable NAMES are kept from the Mkista HQ design system so every
   component class below keeps working; only the values changed. */

:root {
  --navy:        #1C2024;
  --navy-deep:   #13161A;
  --navy-soft:   #2E353C;
  --ink:         #101623;
  --gold:        #A35C00;
  --gold-soft:   #D98E04;
  --gold-light:  #F0A202;
  --gold-wash:   #FFF3DC;
  --cream:       #F3F4F6;
  --paper:       #FFFFFF;
  --tint:        #EBEEF2;
  --muted:       #5D6675;
  --muted-2:     #9AA3B2;
  --line:        #E2E5EA;
  --line-strong: #C9CED6;
  --good:        #1E8E3E;
  --good-wash:   #E8F5EC;
  --bad:         #B23C3C;
  --bad-wash:    #FBECEC;
  --warn:        #9A6B12;
  --warn-wash:   #FDF3E0;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 22, 35, .06);
  --shadow:    0 2px 8px rgba(16, 22, 35, .07), 0 1px 2px rgba(16, 22, 35, .04);
  --shadow-lg: 0 12px 32px rgba(28, 32, 36, .14);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-family: var(--sans); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* ---------- Layout ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--navy-deep);
  color: #DCE4F0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand-mark {
  font-family: var(--sans);
  font-size: 21px;
  color: #fff;
  letter-spacing: -0.02em;
}
.brand-mark span { color: var(--gold-light); }
.brand-sub {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 3px;
}

.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-label {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #64748B;
  padding: 14px 10px 6px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: #C4CFE0;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 1px;
}
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.on {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
}
.nav a .ico { width: 16px; text-align: center; opacity: .85; font-size: 13px; }
.nav a .pill {
  margin-left: auto;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
}
.nav a.on .pill { background: rgba(15, 43, 76, .22); color: var(--navy-deep); }

.sidebar-foot {
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: var(--muted-2);
}
.sidebar-foot a { color: var(--gold-light); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .eyebrow {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}
.topbar .spacer { flex: 1; }

.content { padding: 24px 28px 56px; max-width: 1440px; width: 100%; }

/* ---------- Cards / panels ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---------- KPI tiles ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
}
.kpi.navy::before { background: var(--navy); }
.kpi.good::before { background: var(--good); }
.kpi.bad::before  { background: var(--bad); }

.kpi-label {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.kpi-value {
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 600;
  color: var(--navy);
  margin: 6px 0 2px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* Several currencies shown side by side, all of equal standing. No currency is
   demoted to small print just because its number happens to be smaller. */
.kpi-value.multi { font-size: 21px; letter-spacing: -0.01em; }
.kpi-value.multi.three { font-size: 17px; line-height: 1.25; }
.kpi-meta { font-size: 12px; color: var(--muted); }
a.kpi { display: block; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--gold-soft); box-shadow: var(--shadow); }

/* ---------- Badges & chips ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--tint);
  color: var(--navy);
  white-space: nowrap;
}
.badge.good { background: var(--good-wash); color: var(--good); }
.badge.bad  { background: var(--bad-wash);  color: var(--bad); }
.badge.warn { background: var(--warn-wash); color: var(--warn); }
.badge.gold { background: var(--gold-wash); color: var(--gold); }
.badge.mute { background: #EFF1F5; color: var(--muted); }
.badge.navy { background: var(--navy); color: #fff; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.good { background: var(--good); }
.dot.warn { background: var(--gold); }
.dot.bad  { background: var(--bad); }

.trend { font-weight: 600; font-size: 12.5px; }
.trend.up   { color: var(--good); }
.trend.down { color: var(--bad); }
.trend.flat { color: var(--muted); }

/* ---------- Tables ---------- */

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #FAFBFD;
  white-space: nowrap;
}
table.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: #FAFBFD; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .primary { font-weight: 600; color: var(--navy); }
.tbl .sub { font-size: 12px; color: var(--muted); }

.table-wrap { overflow-x: auto; }

/* ---------- Buttons & forms ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: #F4F6FA; border-color: var(--muted-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-primary:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: #fff; }
.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-deep); }
.btn-sm { font-size: 12.5px; padding: 5px 11px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--tint); color: var(--navy); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}
.field .hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }
/* Every text-ish control, however it is written in the markup. Listing types
   one by one silently missed <input> with no type attribute and newer types
   like datetime-local, which then rendered at the browser's default width and
   made every form look ragged. Excluding the handful of non-text types is the
   reliable way round. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=range]):not([type=color]),
select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 132, 40, .13);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- Flash ---------- */

.flash {
  padding: 11px 16px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid;
}
.flash.ok   { background: var(--good-wash); border-color: #BFE3CA; color: #14652C; }
.flash.err  { background: var(--bad-wash);  border-color: #F0CACA; color: #8E2F2F; }
.flash.info { background: var(--tint);      border-color: #D3DEEE; color: var(--navy); }

/* ---------- Health bar ---------- */

.health { display: flex; align-items: center; gap: 8px; }
.health-bar {
  width: 54px;
  height: 5px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.health-bar i { display: block; height: 100%; border-radius: 4px; }
.health-bar i.good { background: var(--good); }
.health-bar i.warn { background: var(--gold); }
.health-bar i.bad  { background: var(--bad); }

/* ---------- Empty state ---------- */

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
}
.empty .big { font-size: 30px; margin-bottom: 8px; opacity: .35; }
.empty h3 { color: var(--navy); margin-bottom: 5px; }
.empty p { margin: 0 auto 16px; max-width: 380px; font-size: 13.5px; }

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(176, 132, 40, .16), transparent 60%),
    var(--navy-deep);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 390px;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow-lg);
}
.login-card h1 { text-align: center; margin-bottom: 4px; color: var(--navy); }
.login-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 24px; }

/* ---------- Misc ---------- */

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono  { font-family: var(--mono); font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; } .mb16 { margin-bottom: 16px; }
.mt24 { margin-top: 24px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.sec-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.spend-meter { height: 5px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.spend-meter i { display: block; height: 100%; background: var(--gold); }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3, .grid.side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .shell { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: env(safe-area-inset-top);
  }
  .brand { padding: 12px 16px 10px; }
  .brand-sub { display: none; }

  /* One horizontal, swipeable strip instead of a wrapped grid of links. */
  .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-label { display: none; }
  .nav a {
    margin: 0;
    white-space: nowrap;
    min-height: 40px;
    padding: 9px 14px;
    flex: 0 0 auto;
  }
  .sidebar-foot { display: none; }

  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 21px; }
  .topbar .btn { padding: 8px 12px; }
  .content { padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }

  .kpis, .grid.c2, .grid.c3, .grid.c4, .grid.side { grid-template-columns: minmax(0, 1fr); }
  .row2, .row3 { grid-template-columns: 1fr; }

  .kpi { padding: 13px 15px; }
  .kpi-value { font-size: 23px; }

  .card-body { padding: 15px; }
  .card-head { padding: 12px 15px; }

  /* iOS zooms the page when a focused input is under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
  select, textarea {
    font-size: 16px;
    padding: 10px 12px;
  }
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn-sm { min-height: 34px; }

  table.tbl { font-size: 13px; }
  table.tbl th, table.tbl td { padding: 10px 11px; }

  /* Checkboxes are hard to hit at their native size. */
  input[type=checkbox] { width: 20px; height: 20px; }
}

/* Standalone (added to home screen) - reclaim the browser chrome. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

@media print {
  .sidebar, .topbar, .btn { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
}

/* ---- Foundry (sites control room) ---- */
.fsection { margin-bottom: 34px; }
.fsection-head { margin: 4px 2px 14px; }
.fsection-head h2 { font-family: var(--sans); font-size: 21px; font-weight: 600; }
.fsection-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 640px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; }
.fcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fcard-shot { position: relative; aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; border-bottom: 1px solid var(--line); }
.fcard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s ease; }
.fcard:hover .fcard-shot img { transform: scale(1.035); }
.fcard-noshot { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--sans); font-size: 52px; color: var(--muted-2); }
.fchip { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.fchip-good { background: rgba(232, 245, 236, .95); color: var(--good); }
.fchip-gold { background: rgba(247, 238, 218, .95); color: var(--warn); }
.fchip-info { background: rgba(237, 242, 249, .95); color: var(--navy); }
.fcard-body { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.fcard-body h3 { font-size: 15.5px; font-weight: 600; }
.fmeta { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.fmeta a { color: var(--navy); }
.fmeta2 { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard-foot { display: flex; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.fcard-foot .btn { flex: 1; justify-content: center; text-align: center; }

/* editor slots */
.fgrid-slots { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fslot { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.fslot-thumb { aspect-ratio: 4 / 3; background: repeating-conic-gradient(var(--tint) 0% 25%, var(--paper) 0% 50%) 50% / 22px 22px; display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.fslot-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fslot-none { color: var(--muted-2); font-size: 12.5px; background: var(--paper); padding: 4px 10px; border-radius: 6px; }
.fslot-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fslot-body h3 { font-size: 13.5px; font-weight: 600; }
.fslot-form { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; }
.fslot-form input[type=file] { font-size: 11.5px; min-width: 0; flex: 1; }

/* editor text slots */
.ftexts { display: grid; gap: 14px; max-width: 760px; }
.ftext label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ftext label span { color: var(--muted-2); font-weight: 400; }
.ftext-row { display: flex; gap: 10px; align-items: flex-start; }
.ftext-row input, .ftext-row textarea { flex: 1; }

@media (max-width: 640px) {
  .fgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fgrid-slots { grid-template-columns: 1fr 1fr; }
  .fcard-foot { flex-direction: column; }
}

/* Add-client billing type picker */
.plan-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #e3e0d8); border-radius: 10px; cursor: pointer; background: #fff; }
.plan-opt input { margin-top: 3px; accent-color: #A35C00; }
.plan-opt span { display: flex; flex-direction: column; gap: 2px; }
.plan-opt strong { font-size: 14px; }
.plan-opt small { font-size: 12px; color: var(--muted, #6b7280); font-weight: 400; }
.plan-opt.on { border-color: #A35C00; background: #fbf6e8; box-shadow: 0 0 0 1px #A35C00 inset; }
@media (max-width: 760px) { .plan-pick { grid-template-columns: 1fr; } }

.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid #A35C00; background: #fbf6e8; color: #5a4310; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.chip:hover { background: #f3e7c4; }

/* ============================================================== CRM extras
   Added for the hire office: line-item editors, status colouring and a few
   layout utilities. Everything above is the shared design system. */

.bad-text  { color: var(--bad); font-weight: 600; }
.good-text { color: var(--good); font-weight: 600; }
.warn-text { color: var(--warn); font-weight: 600; }
.muted     { color: var(--muted); }
.nowrap    { white-space: nowrap; }
.mono      { font-family: var(--mono); font-size: 12.5px; }
.right     { text-align: right; }
.mt0 { margin-top: 0 !important; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }

/* document line-item editor */
.lines { display: flex; flex-direction: column; gap: 8px; }
.line {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 92px 86px 96px 104px 34px;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.line input, .line select { width: 100%; }
.line .amt {
  padding-top: 9px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.line-head {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 92px 86px 96px 104px 34px;
  gap: 8px;
  padding: 0 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.line-head .r { text-align: right; }
.drop-line {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 7px 4px;
  border-radius: var(--r-sm);
}
.drop-line:hover { color: var(--bad); background: var(--bad-wash); }

/* running totals under the editor */
.doc-totals { display: flex; justify-content: flex-end; margin-top: 14px; }
.doc-totals table { border-collapse: collapse; min-width: 280px; }
.doc-totals td { padding: 6px 0 6px 22px; font-variant-numeric: tabular-nums; }
.doc-totals td.num { text-align: right; font-weight: 600; }
.doc-totals tr.grand td {
  border-top: 2px solid var(--navy);
  padding-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

/* two-up form rows */
.row2, .row3 { display: grid; gap: 14px; }
.row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* a strip of small facts on a detail page */
.facts { display: flex; flex-wrap: wrap; gap: 20px 34px; }
.facts > div { min-width: 120px; }
.facts .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.facts .v { font-weight: 600; }

/* inline single-action forms sitting in a row of buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { display: inline; }

/* dispatch board columns */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.board-col { background: var(--tint); border-radius: var(--r); padding: 12px; min-height: 120px; }
.board-col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.jobcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 9px;
  box-shadow: var(--shadow-sm);
}
.jobcard .t { font-weight: 600; font-size: 13px; }
.jobcard .m { font-size: 12px; color: var(--muted); margin-top: 2px; }

@media (max-width: 900px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .line, .line-head { grid-template-columns: 1fr 1fr; }
  .line-head { display: none; }
  .line .amt { text-align: left; }
  .board { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .facts { gap: 14px 20px; }
}

/* A label with two controls under it (State + postcode): the first is fixed,
   the second takes the rest of the cell so the row lines up with its neighbours. */
.pair { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }

/* ---- the How-to page: numbered steps and a plain Q&A ---- */
.guide { display: flex; flex-direction: column; gap: 22px; }
.step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
.step .n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.step h3 { font-size: 16px; margin-bottom: 6px; color: var(--navy); }
.step p { margin: 0 0 8px; line-height: 1.65; }
.step p:last-child { margin-bottom: 0; }
.step .tip {
  background: var(--gold-wash); border-left: 3px solid var(--gold-light);
  padding: 8px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.qa h3 { font-size: 14.5px; margin-bottom: 5px; color: var(--navy); }
.qa p { margin: 0 0 7px; line-height: 1.62; font-size: 13.5px; }
.qa p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .qa { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .topbar, .btn { display: none !important; }
  .card { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; }
  .step, .qa > div { break-inside: avoid; }
}

/* ---- logo card in Settings ---- */
.logo-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.logo-prev {
  width: 168px; min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
}
.logo-prev img { max-width: 100%; max-height: 120px; object-fit: contain; }
.logo-prev .wordmark { text-align: center; }
.logo-prev .wordmark .w1 {
  display: block; font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.01em; color: var(--navy);
}
.logo-prev .wordmark .w2 {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin-top: 3px;
}
input[type=file] { font-size: 13px; }

/* ---- logo in the sidebar and on the sign-in card ---- */
.brand-logo {
  display: block;
  max-width: 128px; max-height: 64px;
  margin: 0 auto 10px;
  object-fit: contain;
}
.login-card .brand-logo { max-width: 130px; max-height: 110px; margin-bottom: 14px; }

/* ---- condition photos on a hire ---- */
.photo-block { padding: 14px 0; border-top: 1px solid var(--line); }
.photo-block:first-of-type { border-top: 0; padding-top: 4px; }
.photo-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.photo-head h3 { font-size: 14px; color: var(--navy); }
.photo-head .spacer { flex: 1; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
}
.shot img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--tint);
}
.shot figcaption { padding: 7px 9px; font-size: 11.5px; line-height: 1.45; }
.shot .cap { display: block; font-weight: 600; color: var(--ink); }
.shot .meta { display: block; color: var(--muted); }
.shot .tools { display: flex; gap: 10px; margin-top: 5px; align-items: center; }
.shot .tools a, .shot .tools button {
  font: inherit; font-size: 11.5px; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.shot .tools a:hover { color: var(--navy); }
.shot .tools button:hover { color: var(--bad); }
.shot .tools form { display: inline; }

.photo-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-form input[type=file] { flex: 1 1 220px; min-width: 0; }
.photo-form input[name=caption] { flex: 1 1 180px; min-width: 0; }
.photo-form select { flex: 0 1 190px; }

@media (max-width: 680px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .photo-form input[type=file], .photo-form input[name=caption],
  .photo-form select, .photo-form .btn { flex: 1 1 100%; }
}

/* ---- inventory / stocktake list ---- */
.print-head { display: none; }
.inventory .catrow td {
  background: var(--tint);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.inventory tfoot th { background: #fff; border-top: 2px solid var(--line-strong); }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  .sidebar, .topbar, .card-head .actions, .grid.c4 { display: none !important; }
  .print-head {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .content { padding: 0 !important; }
  .card { border: 0; box-shadow: none; }
  .card-body { padding: 0 !important; }
  table.tbl { font-size: 10.5px; }
  table.tbl th, table.tbl td { padding: 5px 6px; }
  .inventory .catrow td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr { break-inside: avoid; }
}

/* ---- paperwork checklist on a hire ---- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  position: relative; padding: 0 0 12px 26px; margin: 0;
  border-left: 2px solid var(--line); margin-left: 7px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: ''; position: absolute; left: -8px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong);
}
.steps li.doing::before { border-color: var(--warn); background: var(--warn-wash); }
.steps li.done::before {
  border-color: var(--good); background: var(--good);
  box-shadow: inset 0 0 0 2px #fff;
}
.steps li strong { font-size: 13.5px; }
.sig-thumb {
  display: block; max-width: 220px; max-height: 80px; margin-top: 12px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}

/* ---- agreement page thumbnails in Settings ---- */
.apage-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.apage-strip a {
  position: relative; display: block; width: 86px;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff;
}
.apage-strip img { display: block; width: 100%; height: 112px; object-fit: cover; object-position: top; }
.apage-strip span {
  position: absolute; bottom: 0; right: 0;
  background: rgba(28,32,36,.82); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px 0 0 0;
}
.apage-strip a.is-sign { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold-wash); }
.apage-strip a.is-sign span { background: var(--gold); }