/* Revbuild Finance — self-contained stylesheet (no external fonts/CDNs; CSP-safe). */
:root {
  --rb-red: #c8102e;
  --rb-dark: #12203a;
  --bg: #f4f6fa;
  --card: #ffffff;
  --border: #e3e8f0;
  --text: #1a2233;
  --text-muted: #6b7688;
  --accent: #12203a;
  --green: #16794c;
  --amber: #b7791f;
  --red: #c8102e;
  --blue: #2159c4;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(18,32,58,.08), 0 6px 20px rgba(18,32,58,.05);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--rb-dark); margin: 0 0 .5em; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; background: var(--rb-dark); color: #cdd6e6; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-logo {
  padding: 20px 18px; font-weight: 800; font-size: 19px; color: #fff;
  letter-spacing: .5px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo span { color: var(--rb-red); }
.sidebar-tag { font-size: 10.5px; font-weight: 600; color: #7f8ca6; letter-spacing: 1.5px; text-transform: uppercase; display:block; margin-top:3px;}
.nav { padding: 10px 0; overflow-y: auto; flex: 1; }
.nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #6b7794; padding: 14px 20px 5px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cdd6e6;
  font-size: 13.5px; border-left: 3px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(200,16,46,.14); color: #fff; border-left-color: var(--rb-red); font-weight: 600; }
.nav .ico { width: 18px; text-align: center; }
.sidebar-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #8a97b0; }
.sidebar-foot a { color: #cdd6e6; }

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 13px 26px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.topbar .who { font-size: 13px; color: var(--text-muted); }
.topbar .who b { color: var(--text); }
.topbar-title { flex: 1; min-width: 0; }
.language-switch {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 12px;
  padding: 3px; border: 1px solid var(--border); border-radius: 9px;
  background: #f5f7fb;
}
.language-switch button {
  border: 0; border-radius: 6px; background: transparent; color: var(--text-muted);
  padding: 5px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.language-switch button.active { background: var(--rb-dark); color: #fff; }
.role-pill { display: inline-block; background: var(--rb-dark); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; margin-left: 6px; }
/* Use the full width of the main area on every page (sidebar aside). Wide data
   tables scroll inside their own .table-wrap; readable forms sit inside .card. */
.content { padding: 24px 26px; width: 100%; max-width: none; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.card h2, .card h3 { margin-top: 0; }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; gap:12px; flex-wrap: wrap;}
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: 1fr; } }

/* Stat tiles */
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.stat .value { font-size: 24px; font-weight: 700; color: var(--rb-dark); margin-top: 4px; }
.stat .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat.alert .value { color: var(--red); }
.payment-summary-box {
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f8fafc;
}
.payment-summary-box b { font-size: 17px; color: var(--rb-dark); }
/* Outstanding money the client still owes — flagged red for follow-up */
.payment-summary-box.owed { border-color: var(--red); background: #fff5f5; }
.payment-summary-box.owed b { color: var(--red); }
.amount-owed { color: var(--red); font-weight: 700; }
/* Simple pager for paginated tables */
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; }
.pager .btn.disabled { opacity: .45; pointer-events: none; }
.month-group-row td {
  padding: 9px 12px;
  background: #f1f4f8;
  border-top: 2px solid var(--border);
}
.month-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rb-dark);
  text-align: left;
  cursor: pointer;
}
.month-toggle [data-payment-month-arrow] {
  display: inline-block;
  width: 14px;
  color: var(--rb-red);
  font-size: 16px;
}
a.stat-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.stat-link:hover { border-color: var(--rb-red); box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); }
a.stat-link:hover .sub { color: var(--rb-red); }
a.stat-link .sub { font-weight: 600; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 600; background: #fafbfd; }
tbody tr:hover { background: #fafbff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.money-display {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  vertical-align: middle;
}
.money-primary { white-space: nowrap; }
.money-aud {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.money-accounting {
  gap: 2px;
  font-variant-numeric: tabular-nums lining-nums;
}
.money-accounting .money-primary {
  letter-spacing: .01em;
}
.money-accounting.is-negative .money-primary {
  color: var(--red);
}
.fx-rate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 14px;
  padding: 7px 11px;
  border: 1px solid #cbd9eb;
  border-radius: 7px;
  background: #f5f9ff;
  color: #42526a;
  font-size: 11px;
}
.fx-rate-bar a { white-space: nowrap; }
.fx-rate-bar.fx-stale {
  border-color: #ead6aa;
  background: #fff9ed;
}
@media (max-width: 720px) {
  .fx-rate-bar { align-items: flex-start; flex-direction: column; gap: 4px; }
}
.table-wrap { overflow-x: auto; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge.gray { background: #eef1f6; color: #56617a; }
.badge.green { background: #e2f4ec; color: var(--green); }
.badge.amber { background: #fdf1dd; color: var(--amber); }
.badge.red { background: #fbe4e7; color: var(--red); }
.badge.blue { background: #e5edfb; color: var(--blue); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #f4f6fa; text-decoration: none; }
.btn-primary { background: var(--rb-dark); color: #fff; border-color: var(--rb-dark); }
.btn-primary:hover { background: #1b2f52; }
.btn-accent { background: var(--rb-red); color: #fff; border-color: var(--rb-red); }
.btn-accent:hover { background: #a50d26; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-danger { color: var(--red); border-color: #f0c4cb; }
.btn-danger:hover { background: #fbe4e7; }

/* Forms */
.form-group { margin-bottom: 14px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: #45506a; margin-bottom: 5px; }
.form-control, input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
.form-control:focus, input:focus, select:focus, textarea:focus { outline: 2px solid rgba(33,89,196,.25); border-color: var(--blue); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hint { font-size: 12px; color: var(--text-muted); }

/* Alerts */
.alert { padding: 11px 14px; border-radius: 9px; margin-bottom: 16px; font-size: 13.5px; }
.alert-danger { background: #fbe4e7; color: #8a0f22; border: 1px solid #f0c4cb; }
.alert-success { background: #e2f4ec; color: #0f5c38; border: 1px solid #bfe6d3; }
.alert-warn { background: #fdf1dd; color: #7a5310; border: 1px solid #f2ddb4; }
.alert-info { background: #e5edfb; color: #16388a; border: 1px solid #c6d7f5; }

/* Read-only "from CRM" banner */
.crm-ref { background: #f0f4fb; border: 1px dashed #c6d3ea; border-radius: 10px; padding: 12px 15px; font-size: 12.5px; color: #45506a; }
.crm-ref b { color: var(--rb-dark); }
.readonly-badge { font-size: 10.5px; background:#e5edfb; color:#16388a; padding:1px 7px; border-radius:20px; font-weight:700; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 9px 15px; font-size: 13.5px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--rb-dark); border-bottom-color: var(--rb-red); font-weight: 600; }

/* Login / centered */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #12203a, #1b2f52); padding: 20px; }
.auth-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 34px 32px; width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand h1 { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.auth-brand h1 span { color: var(--rb-red); }
.auth-brand p { color: var(--text-muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 4px 0 0; }
.mini { font-size: 11.5px; color: #9aa5b8; }
.right { text-align: right; }
.muted { color: var(--text-muted); }
.empty { padding: 30px; text-align: center; color: var(--text-muted); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; }
.inline-form { display: inline; }

/* Staff/client reference tables — spreadsheet-style table controls. */
.reference-table { min-width: 780px; }
.reference-table.rb-cols-frozen { table-layout: fixed; }
.reference-table th,
.reference-table td {
  border-right: 1px solid var(--border);
  white-space: normal;
  overflow-wrap: anywhere;
}
.reference-table th:last-child,
.reference-table td:last-child { border-right: 0; }
.reference-table th.rb-th {
  position: relative;
  padding-right: 19px;
  user-select: none;
}
.reference-table th[data-column][draggable="true"] { cursor: grab; }
.reference-table th.reference-header-dragging { opacity: .55; }
.reference-table th.reference-drop-before { box-shadow: inset 4px 0 var(--rb-red); }
.reference-table th.reference-drop-after { box-shadow: inset -4px 0 var(--rb-red); }
.reference-table [data-column="rownum"] {
  width: 58px;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.reference-table tbody tr.rb-zebra-odd > td { background: #fff; }
.reference-table tbody tr.rb-zebra-even > td { background: #f5f7fb; }
.reference-table tbody tr.reference-row:hover > td { background: #edf3ff; }

.rb-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.rb-col-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 2px;
  height: 100%;
  background: transparent;
}
.rb-col-resizer:hover::after,
body.rb-col-resizing .rb-col-resizer::after { background: var(--rb-red); }
.reference-table th.rb-last-visible .rb-col-resizer { display: none; }
body.rb-col-resizing { cursor: col-resize !important; user-select: none; }

/* Standard tables use the same drag-to-resize interaction as the CRM app.
   Reference tables already receive equivalent controls from reference_tables.js. */
.rb-resizable.rb-cols-frozen { table-layout: fixed; }
.rb-resizable:not(.reference-table) th,
.rb-resizable:not(.reference-table) td {
  border-right: 1px solid var(--border);
}
.rb-resizable:not(.reference-table) th:last-child,
.rb-resizable:not(.reference-table) td:last-child { border-right: 0; }
.rb-resizable:not(.reference-table) th.rb-th {
  position: relative;
  padding-right: 19px;
}
.rb-resizable:not(.reference-table) th.rb-col-fixed {
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  line-height: 1.25;
}
.rb-resizable:not(.reference-table).rb-cols-frozen td {
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rb-resizable:not(.reference-table).rb-cols-frozen td input:not([type="checkbox"]):not([type="radio"]),
.rb-resizable:not(.reference-table).rb-cols-frozen td select,
.rb-resizable:not(.reference-table).rb-cols-frozen td textarea {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.rb-resizable:not(.reference-table) th.rb-last-visible .rb-col-resizer {
  display: none;
}

.reference-column-menu {
  position: fixed;
  z-index: 1000;
  min-width: 230px;
  max-height: 70vh;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(18, 32, 58, .20);
}
.reference-column-menu[hidden] { display: none; }
.reference-column-menu-title {
  padding: 5px 8px 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reference-column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.reference-column-option:hover { background: #f3f5f9; }
.reference-column-option[draggable="true"] { cursor: grab; }
.reference-column-option.dragging { opacity: .55; }
.reference-column-option.drag-over { box-shadow: inset 0 2px var(--rb-red); }
.reference-column-option input { width: auto; margin: 0; }
.reference-column-grip {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: -2px;
}
.reference-column-hint {
  margin-top: 5px;
  padding: 7px 8px 3px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}

/* Unified Salary workspace */
.salary-tabs {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
  margin: -8px 0 18px;
  overflow-x: auto;
}
.salary-tabs a {
  flex: 0 0 auto;
  padding: 12px 16px;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.salary-tabs a.active { color: var(--rb-dark); border-bottom-color: var(--rb-red); }
.salary-tabs a span {
  display: inline-block;
  min-width: 20px;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  background: #1e2638;
  color: #fff;
  text-align: center;
  font-size: 10px;
}
.salary-period-nav, .salary-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.salary-calculator-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
  gap: 18px;
}
.salary-calculator-grid .card { margin-bottom: 16px; }
.statutory-card { background: #fbfcfe; }
.kv.compact { grid-template-columns: 180px 1fr; }
.salary-breakdown {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  margin: 0;
}
.salary-breakdown dt, .salary-breakdown dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.salary-breakdown dt { color: #49546a; }
.salary-breakdown dd { text-align: right; font-weight: 600; }
.salary-result {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
}
.salary-result.net { background: #1767c4; }
.salary-result.cost { background: #c91f25; }
.salary-table-card { padding: 0; }
.salary-table-card .card-head { padding: 15px 18px; margin: 0; }
.salary-wide { min-width: 1180px; }
.zebra-table tbody tr:nth-child(even) td { background: #f6f8fb; }
.zebra-table tbody tr:hover td { background: #eef4ff; }
.success-text { color: #187b35; }
.danger-text { color: #c51e2d; }
.link-blue { color: #1767c4; }
.salary-period-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.salary-period-picker select { width: min(480px, 100%); }
.card-actions { padding: 14px 18px; border-top: 1px solid var(--border); }
.overtime-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.overtime-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.client-bulk-actions select,
.client-bulk-actions input {
  width: auto;
  min-width: 150px;
  margin: 0;
}
.client-bulk-actions input[type="date"] { min-width: 145px; }
.client-bulk-actions input[type="text"] { min-width: 260px; flex: 1 1 260px; }
.client-list-bulk-actions {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}
.expense-bulk-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.expense-bulk-actions select {
  width: auto;
  min-width: 210px;
  margin: 0;
}
.expense-month-total {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.expense-month-total-value {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(255, 255, 255, .55);
  font-size: 14px;
}
.expense-month-total-note {
  opacity: .84;
}
.expense-no-col {
  width: 48px;
  min-width: 48px;
}
.expense-table-totals td {
  background: #f8fafc;
  border-top: 1px solid var(--border);
}
.expense-table-totals .expense-total-row td {
  border-top: 2px solid var(--rb-dark);
}
.expense-table-totals .expense-remaining-row td {
  border-top: 2px solid #1767c4;
  background: #edf6ff;
  color: #123f73;
  font-size: 14px;
}
.client-reference-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.client-delete-control {
  position: relative;
  flex: 0 0 auto;
}
.client-delete-control > summary {
  list-style: none;
  cursor: pointer;
}
.client-delete-control > summary::-webkit-details-marker { display: none; }
.client-delete-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(430px, 82vw);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(22, 32, 51, 0.2);
}
.client-delete-panel h3 { margin: 0 0 10px; }
.client-delete-panel form { display: grid; gap: 10px; margin-top: 12px; }
.client-delete-panel .form-group { margin: 0; }
.client-delete-panel .btn { justify-self: end; }
.select-col { width: 42px; text-align: center; }
.select-col input { width: auto; margin: 0; }
.zebra-table tbody tr.row-selected td { background: #dceaff; }
/* Per-entry payroll approval: plain (non-zebra) tables also need selected /
   approved row shading. */
tbody tr.row-selected td { background: #dceaff; }
tbody tr.row-approved td { background: #f3f8f2; }
.period-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.period-bar .inline-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.period-bar select { width: 76px; }
.period-bar input[type="number"] { width: 92px; }
.expense-amount-row { grid-template-columns: .7fr .7fr 1.6fr; }
.compact-table { margin-top: 16px; }
.expense-use-options {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f8faff;
}
.expense-use-editor { position: relative; display: inline-block; margin-top: 6px; }
.expense-use-editor > summary { list-style: none; }
.expense-use-editor > summary::-webkit-details-marker { display: none; }
.expense-use-editor[open] form {
  position: absolute;
  z-index: 20;
  width: 230px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 32, 51, .18);
}
.expense-use-editor form .check-label { margin-bottom: 9px; }
.expense-table td { vertical-align: top; }
.allowance-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.allowance-add-details { position: relative; }
.allowance-add-details[open] {
  width: min(900px, 100%);
}
.allowance-add-details summary,
.allowance-row-editor summary { list-style: none; }
.allowance-editor {
  min-width: min(760px, 80vw);
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8faff;
}
.allowance-row-editor .allowance-editor { min-width: min(680px, 72vw); }
.allowance-editor .check-label,
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 18px 12px 0;
}
.check-label input { width: auto; margin: 0; }
.rule-help {
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f7f9fc;
  color: #4a566c;
  font-size: 12.5px;
}
.allow-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.badge-exempt { color: #0d6b43; background: #d9f7e8; }
.badge-taxable { color: #a01c28; background: #fde0e3; }
.badge-partial { color: #80580a; background: #fff0c9; }
.badge-bhxh { color: #1456a0; background: #dcecff; }
.allowance-description { max-width: 380px; margin-top: 5px; line-height: 1.4; }
.allowance-staff-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.allowance-staff-picker label { margin: 0; white-space: nowrap; }
.staff-search-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(900px, 100%);
}
/* Bigger, easier-to-click staff picker (was small and hard to hit). */
.staff-search-input {
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.3;
  border-radius: 8px;
}
.staff-search-control .btn { padding: 11px 20px; font-size: 15px; }
.allowance-staff-picker label b { font-size: 15px; }
.allowance-all-btn { white-space: nowrap; padding: 11px 16px; font-size: 15px; }
.allowance-all-mode-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: #f4f8ff;
}
.contract-allowance-table { min-width: 960px; }
.contract-allowance-table input { min-width: 170px; text-align: right; }
.allowance-save-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-top: 1px solid var(--border);
}
.allowance-save-bar .form-group { margin: 0; }
.section-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.subheading { font-size: 15px; }

.payroll-reject {
  position: relative;
}
.payroll-reject > summary {
  list-style: none;
  cursor: pointer;
}
.payroll-reject > summary::-webkit-details-marker { display: none; }
.payroll-reject > form {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(340px, 80vw);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 32, 51, 0.18);
}
.payroll-reject > form label { margin: 0; font-size: 12px; }
.payroll-reject > form .btn { justify-self: end; }

@media (max-width: 1050px) {
  .salary-calculator-grid { grid-template-columns: 1fr; }
  .allowance-editor { min-width: 0; width: 100%; }
  .allowance-staff-picker { align-items: stretch; flex-direction: column; }
  .staff-search-control { width: 100%; }
}

/* ---- Dashboard: colourful stat cards + funds ---- */
.dash-stats .stat {
  position: relative; overflow: hidden;
  border-top: 3px solid var(--accent-c, var(--rb-dark));
  background:
    linear-gradient(180deg, var(--accent-wash, rgba(18,32,58,.05)) 0%, #fff 62%);
}
.dash-stats .stat .value { color: var(--accent-c, var(--rb-dark)); }
.dash-stats .stat-ico {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: var(--accent-soft, rgba(18,32,58,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.dash-stats .stat .label { padding-right: 42px; }
.dash-stats a.stat-link:hover { border-color: var(--border); border-top-color: var(--accent-c, var(--rb-dark)); }
.dash-stats a.stat-link:hover .sub { color: var(--accent-c, var(--rb-dark)); }
.stat--blue   { --accent-c:#2159c4; --accent-soft:#e5edfb; --accent-wash:rgba(33,89,196,.09); }
.stat--violet { --accent-c:#6d3bd1; --accent-soft:#ece2fb; --accent-wash:rgba(109,59,209,.09); }
.stat--amber  { --accent-c:#b7791f; --accent-soft:#fdf1dd; --accent-wash:rgba(183,121,31,.11); }
.stat--teal   { --accent-c:#0e8a74; --accent-soft:#d8f3ee; --accent-wash:rgba(14,138,116,.10); }
.stat--red    { --accent-c:#c8102e; --accent-soft:#fbe4e7; --accent-wash:rgba(200,16,46,.09); }
.stat--slate  { --accent-c:#42506b; --accent-soft:#e7ebf3; --accent-wash:rgba(66,80,107,.09); }
.dash-stats .stat.alert .value { color: var(--red); }

/* Available-fund panels */
.fund-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius); padding: 18px 20px;
  color: #fff; position: relative; overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 6px 18px rgba(18,32,58,.14);
}
.fund-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18,32,58,.22); text-decoration: none; }
.fund--internal { background: linear-gradient(135deg, #0e8a74 0%, #12203a 130%); }
.fund--external { background: linear-gradient(135deg, #2159c4 0%, #12203a 130%); }
.fund-card.is-negative { background: linear-gradient(135deg, #c8102e 0%, #6a0716 130%); }
.fund-top { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.fund-ico {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 16px; background: rgba(255,255,255,.18);
}
.fund-card .label { color: rgba(255,255,255,.82); text-transform: uppercase; font-size: 11.5px; letter-spacing: .5px; }
.fund-value { font-size: 24px; font-weight: 800; margin: 2px 0 3px; }
.fund-value .money-aud { color: rgba(255,255,255,.82); font-weight: 600; }
.fund-card .sub { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; }

/* Inter-fund lending pill + note */
.lend-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
}
.lend-pill b { font-weight: 800; }
.lend-pill--owed    { background: #fdf1dd; color: #7a5310; border: 1px solid #f2ddb4; }
.lend-pill--over    { background: #e5edfb; color: #16388a; border: 1px solid #c6d7f5; }
.lend-pill--settled { background: #e2f4ec; color: #0f5c38; border: 1px solid #bfe6d3; }
.lend-note {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  padding: 12px 16px; border-radius: 11px;
  background: linear-gradient(90deg, #fff8ec 0%, #fdfcff 100%);
  border: 1px solid #f0e2c4;
}
.lend-note-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; font-weight: 800;
  background: #fbeacb; color: #8a5a10;
}
.lend-note-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; }
.lend-note-body { font-size: 13.5px; color: var(--text); margin-top: 1px; }
.lend-note-body b { color: var(--rb-dark); }
.lend-out { margin-left: 4px; color: #8a5310; font-weight: 700; }
.lend-settled { margin-left: 4px; color: #0f5c38; font-weight: 700; }

/* ======================================================================
   Site-wide colour system — applied to every page via shared components,
   so data tables, section titles and KPI cards read with the same accents
   as the dashboard and the eye lands on the important figures first.
   ====================================================================== */

/* Data-table header rows: tinted band + brand underline so each table
   reads as a distinct block instead of dissolving into the white page. */
thead th {
  background: linear-gradient(180deg, #eef2f9 0%, #e6ecf6 100%);
  color: #34405a;
  border-bottom: 2px solid #cfd9ec;
}
tbody tr:hover { background: #f1f6ff; }

/* Card / section titles get a small brand accent bar on the left edge. */
.card-head :is(h2, h3),
.card > h2:first-child,
.card > h3:first-child {
  position: relative; padding-left: 13px;
}
.card-head :is(h2, h3)::before,
.card > h2:first-child::before,
.card > h3:first-child::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--rb-red) 0%, var(--rb-dark) 100%);
}

/* KPI stat cards on ordinary pages (reports, expenses, profiles, …) pick up
   a rotating accent so a row of figures is scannable. The dashboard keeps its
   own richer treatment and is excluded. Cards with an inline emphasis border
   (totals) override this and stay as-is. */
.grid:not(.dash-stats) > .stat {
  border-top: 3px solid var(--s-c, var(--rb-dark));
  background: linear-gradient(180deg, var(--s-wash, rgba(18,32,58,.045)) 0%, #fff 60%);
}
.grid:not(.dash-stats) > .stat:nth-child(6n+1) { --s-c:#2159c4; --s-wash:rgba(33,89,196,.07); }
.grid:not(.dash-stats) > .stat:nth-child(6n+2) { --s-c:#0e8a74; --s-wash:rgba(14,138,116,.08); }
.grid:not(.dash-stats) > .stat:nth-child(6n+3) { --s-c:#b7791f; --s-wash:rgba(183,121,31,.09); }
.grid:not(.dash-stats) > .stat:nth-child(6n+4) { --s-c:#6d3bd1; --s-wash:rgba(109,59,209,.07); }
.grid:not(.dash-stats) > .stat:nth-child(6n+5) { --s-c:#c8102e; --s-wash:rgba(200,16,46,.07); }
.grid:not(.dash-stats) > .stat:nth-child(6n+6) { --s-c:#42506b; --s-wash:rgba(66,80,107,.07); }

/* The FX estimate strip reads as an intentional brand element, not a note. */
.fx-rate-bar { border-left: 3px solid var(--rb-red); }

/* Bank-statement inline edit / add-row popover forms. */
.row-edit { position: relative; }
.row-edit > summary { list-style: none; }
.edit-pop {
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px 12px; padding: 12px; margin-top: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(18,32,58,.16);
}
.row-edit .edit-pop {
  position: absolute; right: 0; z-index: 30; width: 360px; max-width: 86vw;
}
.edit-pop label { font-size: 11.5px; color: var(--text-muted); }
.edit-pop input { width: 100%; }
.edit-pop .edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ======================================================================
   Mobile / responsive — the desktop rail becomes a slide-in drawer with a
   hamburger, and dense pages get phone-friendly spacing. Wide data tables
   already scroll inside their own .table-wrap.
   ====================================================================== */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }
.topbar-title { min-width: 0; }

@media (max-width: 900px) {
  /* Sidebar: off-canvas drawer instead of an always-on rail. */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 264px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60; box-shadow: 2px 0 26px rgba(8,14,26,.34);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(9,15,27,.5);
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* Hamburger sits at the left of the topbar. */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: 10px;
    background: #fff; color: var(--rb-dark); font-size: 19px; line-height: 1;
    cursor: pointer;
  }
  .nav-toggle:active { background: #eef2f9; }

  .topbar { padding: 9px 13px; gap: 10px; }
  .topbar-title h2 { font-size: 16px !important; }
  .language-switch { margin: 0; }
  .topbar .who { font-size: 11.5px; text-align: right; line-height: 1.35; }
  .content { padding: 15px 13px; }
  .card { padding: 15px 14px; }
  .fx-rate-bar { font-size: 10.5px; }
}

/* Phone-narrow tuning. */
@media (max-width: 560px) {
  .topbar .role-pill { display: none; }   /* keep the name, drop the pill */
  .topbar .who { display: none; }
  .card-head { gap: 8px; }
  /* Let form controls fill the row rather than overflow the viewport. */
  .content form select,
  .content form input[type="text"],
  .content form input[type="number"],
  .content form input[type="date"],
  .content form input:not([type]) { max-width: 100%; }
  .btn { padding: 9px 13px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15px; }
  .stat .value { font-size: 21px; }
  .fund-value { font-size: 21px; }
}