.bogs-form .form-row { margin-bottom: 14px; }
.bogs-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.bogs-form .input-text,
.bogs-form textarea { width: 100%; max-width: 420px; padding: 8px; }
.bogs-form .description { display: block; font-size: 0.85em; color: #666; margin-top: 4px; }
.bogs-form .bogs-receipt-scan-review { color: #2271b1; font-weight: 600; }
.bogs-form .required { color: #c00; }
.bogs-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	position: relative;
	margin: 0 4px 0 0;
	background-color: #fff;
	border: 2px solid #b3261e;
	border-radius: 3px;
	cursor: pointer;
}
.bogs-form input[type="checkbox"]:checked { background-color: #b3261e; }
.bogs-form input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bogs-dashboard-cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 24px; }
.bogs-dashboard-card { background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 6px; padding: 16px 20px; min-width: 160px; }
.bogs-dashboard-card .label { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: .03em; }
.bogs-dashboard-card .value { font-size: 1.6em; font-weight: 700; margin-top: 4px; }
.bogs-dashboard-card.income .value { color: #1a7f37; }
.bogs-dashboard-card.expenses .value { color: #b3261e; }
.bogs-dashboard-card .description { font-size: 0.8em; margin-top: 4px; }
.bogs-dashboard-trend-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.bogs-dashboard-trend-table th,
.bogs-dashboard-trend-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #eee; }
.bogs-dashboard-trend-table td.amount, .bogs-dashboard-trend-table th.amount { text-align: right; }

/* ---- Dashboard header + "how this works" callout (v0.40.0) ---- */
.bogs-dash-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.bogs-dash-header h3 { margin: 0; }
.bogs-info-callout { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 8px 12px; max-width: 360px; }
.bogs-info-callout-icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-style: normal; }
.bogs-info-callout-text { font-size: 12px; line-height: 1.5; color: #1e3a5f; }
.bogs-info-callout-text strong { display: block; font-size: 12.5px; margin-bottom: 2px; color: #1e3a5f; }

/* ---- Hand-rolled CSS "month by month" bar chart (v0.40.0, shared look   */
/* with the Reports-page trend chart — same blue/amber palette so the two */
/* screens read as one product). No charting library. ---- */
.bogs-trend-card { margin: 16px 0 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; }
.bogs-trend-legend { display: flex; gap: 16px; font-size: 12px; color: #374151; margin-bottom: 10px; }
.bogs-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bogs-trend-legend .bogs-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.bogs-trend-chart { display: flex; align-items: flex-end; gap: 16px; height: 190px; overflow-x: auto; padding-bottom: 2px; }
.bogs-trend-month { display: flex; flex-direction: column; align-items: center; min-width: 40px; flex-shrink: 0; }
.bogs-trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.bogs-trend-bar { width: 14px; border-radius: 3px 3px 1px 1px; min-height: 2px; }
.bogs-trend-bar.income { background: #2563eb; }
.bogs-trend-bar.expenses { background: #f59e0b; }
.bogs-trend-net { font-size: 10.5px; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.bogs-trend-net.positive { color: #1a7f37; }
.bogs-trend-net.negative { color: #b3261e; }
.bogs-trend-net.zero { color: #9ca3af; }
.bogs-trend-label { font-size: 10.5px; color: #6b7280; margin-top: 3px; white-space: nowrap; }
.bogs-empty-chart-note { color: #6b7280; font-size: 13px; padding: 20px 0; text-align: center; }

/* ---- Compact "month by month" mini-table, above the bar chart (v0.40.2) */
/* Months run across as columns rather than down as rows, so a full       */
/* year reads as 4 tight rows instead of 12 long ones. ---- */
.bogs-mini-table-wrap { overflow-x: auto; margin-bottom: 18px; border: 1px solid #e5e7eb; border-radius: 8px; }
.bogs-mini-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bogs-mini-table th, .bogs-mini-table td { padding: 7px 12px; font-size: 11.5px; text-align: right; white-space: nowrap; }
.bogs-mini-table thead th { color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 600; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.bogs-mini-table th:first-child, .bogs-mini-table td:first-child {
	text-align: left;
	position: sticky;
	left: 0;
	background: #fff;
	font-weight: 600;
	color: #374151;
	box-shadow: 1px 0 0 #e5e7eb;
}
.bogs-mini-table thead th:first-child { background: #f9fafb; }
.bogs-mini-table .bogs-mini-row-label { display: flex; align-items: center; gap: 6px; }
.bogs-mini-table .bogs-mini-row-label .bogs-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.bogs-mini-table tbody tr:not(:last-child) td { border-bottom: 1px solid #f1f2f4; }
.bogs-mini-table tbody tr:nth-child(odd) td { background: #fafbfc; }
.bogs-mini-table tbody tr:nth-child(odd) td:first-child { background: #fafbfc; }
.bogs-mini-table .bogs-mini-net.positive { color: #1a7f37; font-weight: 700; }
.bogs-mini-table .bogs-mini-net.negative { color: #b3261e; font-weight: 700; }
.bogs-mini-table .bogs-mini-net.zero { color: #9ca3af; font-weight: 700; }

@media (max-width: 680px) {
	.bogs-dash-header { flex-direction: column; }
	.bogs-info-callout { max-width: 100%; }
}

/* ---- Log an Expense — fancy card redesign (v0.40.3/.4) ------------------
   Presentation only; no field names/ids/JS touched (see templates/log-
   expense.php). Reuses the brand tokens (--bogs-navy/--bogs-red/etc.) and
   the Playfair Display + Inter Google Fonts already loaded site-wide by
   assets/css/bogs-account-home.css on every My Account page — nothing is
   re-declared or re-imported here, with literal fallbacks in case this
   page is ever reached without it.

   v0.40.5 — the same card/banner language is reused on Log Income (see
   templates/log-income.php): every selector below is shared across
   `.bogs-expense-*`/`.bogs-income-*` so the look only has to be maintained
   once, even though the two pages keep their own template-local class
   names (easier to read in each template than a generic shared name).

   v0.42.0 — extended a third time to Mileage Tracker (see templates/
   mileage-tracker.php), via `.bogs-mileage-*` added to every combined
   selector below. No new rules needed — same approach that required zero
   CSS changes when Log Income's card was added in v0.41.0.

   v0.40.6 — the two icon-sizing rules below (`.bogs-*-card-icon` and
   `.bogs-forward-banner-icon`) gained `!important`, after Wayne reported
   these icons rendering huge and stacked on Log Income's live site —
   almost certainly a stale-CSS-cache issue (this site has hit that before:
   see SETUP.md's "Header icon cleanup" entry) rather than a real
   cascade/specificity conflict, but `!important` here is cheap insurance
   either way. The real fix is in the templates: every icon <svg> now also
   carries explicit width/height HTML attributes, so it renders correctly
   sized even if this stylesheet doesn't load or apply at all — verified by
   rendering both templates with no stylesheet linked.

   v0.40.7 — a further compaction pass (Wayne: still "too spacy" after
   v0.40.4's first tightening). Card/banner padding and margins cut again;
   explicit h3 margins added below (the page titles and the "Recent
   expenses"/"Recent income entries" headings were both still relying on
   the theme's own default heading margins — likely the single biggest
   remaining source of extra whitespace, since nothing here had ever
   touched them); the WooCommerce `.woocommerce-message`/`-info`/`-error`
   notice boxes above the form (e.g. "Expense logged.") get the same
   tightened treatment Log Income's province-setup tip already had,
   extended to both pages and all three notice types; and the previously-
   unstyled pending-receipts list (Log an Expense only) gets a compact
   bordered box instead of a plain bulleted list. Log an Expense also
   gained the same top-right info callout Log Income already had, and Log
   Income's callout copy was corrected — see both templates' v0.40.7
   notes. ---- */

.bogs-expense-page h3,
.bogs-income-page h3,
.bogs-mileage-page h3,
.bogs-invoice-page h3 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--bogs-navy, #072542);
	letter-spacing: -.01em;
	margin: 0 0 10px;
}
.bogs-expense-page .bogs-dash-header h3,
.bogs-income-page .bogs-dash-header h3,
.bogs-mileage-page .bogs-dash-header h3,
.bogs-invoice-page .bogs-dash-header h3 { margin: 0; }
.bogs-expense-page .bogs-section-heading,
.bogs-income-page .bogs-section-heading,
.bogs-mileage-page .bogs-section-heading,
.bogs-invoice-page .bogs-section-heading { margin-top: 22px; }
.bogs-mileage-page h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--bogs-navy, #072542);
	font-size: 14px;
	letter-spacing: -.005em;
	margin: 0 0 6px;
}

/* Forward-receipts-by-email banner — repurposes the little "triangular
   flag" notice motif as a literal envelope-with-folded-flap icon. */
.bogs-forward-banner {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: linear-gradient(135deg, #fff 0%, var(--bogs-bg-soft, #f5f6f8) 100%);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-left: 4px solid var(--bogs-red, #d62026);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 12px;
}
.bogs-forward-banner-icon {
	flex-shrink: 0;
	width: 38px !important;
	height: 38px !important;
	margin-top: 1px;
}
.bogs-forward-banner-text {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bogs-ink, #1f2a35);
}
.bogs-forward-banner-text .bogs-forward-heading {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--bogs-navy, #072542);
	margin-bottom: 3px;
}
.bogs-forward-banner-text .bogs-forward-address {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 6px;
	padding: 2px 8px;
	font-family: 'Courier New', monospace;
	font-size: 12.5px;
	color: var(--bogs-red, #d62026);
	font-weight: 600;
}

/* Rectangular "card" groupings for the form's input sections. v0.40.4 —
   tightened padding/spacing throughout (Wayne: the first pass read "too
   spacy and unprofessional"); values below are deliberately compact. */
.bogs-expense-card,
.bogs-income-card,
.bogs-mileage-card,
.bogs-invoice-card {
	background: #fff;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 10px;
	padding: 10px 14px 11px;
	margin: 0 0 9px;
}
.bogs-expense-card-title,
.bogs-income-card-title,
.bogs-mileage-card-title,
.bogs-invoice-card-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--bogs-navy, #072542);
	margin: 0 0 7px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--bogs-line, #e2e8f0);
}
.bogs-expense-card-title .bogs-expense-card-icon,
.bogs-income-card-title .bogs-income-card-icon,
.bogs-mileage-card-title .bogs-mileage-card-icon,
.bogs-invoice-card-title .bogs-invoice-card-icon {
	flex-shrink: 0;
	width: 16px !important;
	height: 16px !important;
	color: var(--bogs-red, #d62026);
}

/* Compact form rows inside a card — overrides .bogs-form's roomier
   defaults (14px row margin, 8px input padding) just within these cards. */
.bogs-expense-card .form-row,
.bogs-income-card .form-row,
.bogs-mileage-card .form-row,
.bogs-invoice-card .form-row { margin-bottom: 6px; }
.bogs-expense-card .form-row:last-child,
.bogs-income-card .form-row:last-child,
.bogs-mileage-card .form-row:last-child,
.bogs-invoice-card .form-row:last-child { margin-bottom: 0; }
.bogs-expense-card label,
.bogs-income-card label,
.bogs-mileage-card label,
.bogs-invoice-card label {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	color: var(--bogs-ink, #1f2a35);
	font-size: 12.5px;
	margin-bottom: 2px;
}
.bogs-expense-card .input-text,
.bogs-expense-card textarea,
.bogs-income-card .input-text,
.bogs-income-card textarea,
.bogs-mileage-card .input-text,
.bogs-mileage-card textarea,
.bogs-invoice-card .input-text,
.bogs-invoice-card textarea {
	padding: 5px 7px;
	font-size: 13px;
}
.bogs-expense-card textarea,
.bogs-income-card textarea,
.bogs-mileage-card textarea,
.bogs-invoice-card textarea { max-width: 100%; }
.bogs-expense-card .description,
.bogs-income-card .description,
.bogs-mileage-card .description,
.bogs-invoice-card .description {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 11px;
	line-height: 1.35;
	margin-top: 1px;
}
.bogs-expense-card #bogs-split-preview { margin-top: 1px; }
.bogs-income-card #bogs-sale-total-row { margin: 6px 0 0; }
.bogs-mileage-card .woocommerce-orders-table,
.bogs-mileage-card .bogs-modern-table { margin-top: 2px; }

/* Mileage Tracker radio-button option lists (usage type / ownership type) —
   plain stacked <label> rows before v0.42.0; same label/description font
   treatment as every other field in these cards so they don't look like a
   different, unstyled page section. */
.bogs-mileage-card .bogs-radio-option {
	display: block;
	font-weight: normal;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	color: var(--bogs-ink, #1f2a35);
	margin-bottom: 5px;
}
.bogs-mileage-card .bogs-radio-option:last-child { margin-bottom: 0; }

.bogs-expense-submit-row,
.bogs-income-submit-row,
.bogs-mileage-submit-row,
.bogs-invoice-submit-row { display: flex; justify-content: flex-end; margin-top: 2px; gap: 10px; }
.bogs-expense-submit-row .woocommerce-Button,
.bogs-income-submit-row .woocommerce-Button,
.bogs-mileage-submit-row .woocommerce-Button,
.bogs-invoice-submit-row .woocommerce-Button {
	background: var(--bogs-red, #d62026);
	border-color: var(--bogs-red, #d62026);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 10px 28px;
	border-radius: 8px;
	color: #fff;
}
.bogs-expense-submit-row .woocommerce-Button:hover,
.bogs-expense-submit-row .woocommerce-Button:focus,
.bogs-income-submit-row .woocommerce-Button:hover,
.bogs-income-submit-row .woocommerce-Button:focus,
.bogs-mileage-submit-row .woocommerce-Button:hover,
.bogs-mileage-submit-row .woocommerce-Button:focus,
.bogs-invoice-submit-row .woocommerce-Button:hover,
.bogs-invoice-submit-row .woocommerce-Button:focus {
	background: #b81b21;
	border-color: #b81b21;
	color: #fff;
}

/* WooCommerce's own notice boxes (the plain "Expense logged."/"Income
   logged." success message, the province-setup tip, any error list) —
   tightened and put in the brand font to match the rest of the page.
   v0.40.7 — widened from Log Income's province-tip-only rule to both
   pages and all three notice types, since the theme's own default
   padding on these (set via its own `.woocommerce-message`/`-info`/
   `-error` styles, not anything here) was a real contributor to the
   "too spacy" feel and nothing here had touched it before. */
.bogs-expense-page .woocommerce-message,
.bogs-expense-page .woocommerce-info,
.bogs-expense-page .woocommerce-error,
.bogs-income-page .woocommerce-message,
.bogs-income-page .woocommerce-info,
.bogs-income-page .woocommerce-error,
.bogs-mileage-page .woocommerce-message,
.bogs-mileage-page .woocommerce-info,
.bogs-mileage-page .woocommerce-error,
.bogs-invoice-page .woocommerce-message,
.bogs-invoice-page .woocommerce-info,
.bogs-invoice-page .woocommerce-error {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 9px 14px !important;
	margin: 0 0 10px !important;
}

/* Pending email-captured receipts list (Log an Expense only) — was plain
   unstyled <h4>/<ul> markup before v0.40.7, relying entirely on the
   theme's own defaults. */
.bogs-pending-receipts {
	background: var(--bogs-bg-soft, #f5f6f8);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 10px;
}
.bogs-pending-receipts h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--bogs-navy, #072542);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 6px;
}
.bogs-pending-receipts ul { margin: 0; padding: 0; list-style: none; }
.bogs-pending-receipts li {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 0;
	border-top: 1px solid var(--bogs-line, #e2e8f0);
}
.bogs-pending-receipts li:first-child { border-top: none; padding-top: 0; }
.bogs-pending-receipts .button { padding: 2px 10px; font-size: 11.5px; }

@media (max-width: 680px) {
	.bogs-forward-banner { flex-direction: column; }
	.bogs-expense-submit-row,
	.bogs-income-submit-row,
	.bogs-mileage-submit-row,
	.bogs-invoice-submit-row { justify-content: stretch; flex-direction: column; }
	.bogs-expense-submit-row .woocommerce-Button,
	.bogs-income-submit-row .woocommerce-Button,
	.bogs-mileage-submit-row .woocommerce-Button,
	.bogs-invoice-submit-row .woocommerce-Button { width: 100%; text-align: center; }
}

/* ---- Modern pill-badge table (v0.40.8) ---------------------------------
   "Recent expenses" (Log an Expense) and "Recent income entries" (Log
   Income) now use the same modern transaction-table look Reports got in
   v0.40.0 — colored category pills, signed/colored amounts — instead of
   the plain WooCommerce orders table they'd kept until now. These rules
   are a deliberate, value-for-value copy of reports.php's own inline
   `.bogs-modern-table`/`.bogs-pill`/`.bogs-amount-income`/
   `.bogs-amount-expense` (not re-derived), so all three screens read as
   one visual language. Reports' own copy is left as-is for now — the
   project tracker already flags consolidating that page's inline styles
   into this shared file as a tidiness fast-follow; this is a step toward
   that, not a full migration. ---- */
.bogs-modern-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.bogs-modern-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; background: #f9fafb; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.bogs-modern-table td { padding: 10px 14px; border-bottom: 1px solid #f1f2f4; font-size: 13.5px; vertical-align: middle; }
.bogs-modern-table tr:last-child td { border-bottom: none; }
.bogs-modern-table tbody tr:hover { background: #fafafa; }
.bogs-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.bogs-amount-income { color: #0f8a5f; font-weight: 600; }
.bogs-amount-expense { color: #b42318; font-weight: 600; }
/* Status pill color modifiers — used on "Your invoices" (v0.43.0, see that
   section below) and anywhere else a Sent/Viewed/Paid status badge is
   shown. Paired with the base .bogs-pill class above. */
.bogs-pill--sent { background: #6b7280; }
.bogs-pill--viewed { background: #2563eb; }
.bogs-pill--paid { background: #0f8a5f; }
/* v0.44.0 — "Draft" status (not yet sent). Light fill needs its own
   dark-text override since the base .bogs-pill class above sets white
   text, meant for the darker solid-color pills above. */
.bogs-pill--draft { background: #e5e7eb; color: #374151; }

/* ---- Create Invoice — multi-line itemized rebuild + View Invoice page
   (v0.43.0) ------------------------------------------------------------
   Wayne: "subtotal and GST not populated, not looking professional —
   borrow concept from the second image [Financial Cents]. View invoice
   should be like the third image, same place as the audit log." This
   page previously had NO dedicated CSS at all — `.bogs-invoice-builder`
   never existed in this file, so even once v0.42.0 fixed the missing
   wp_enqueue_style() call, the form still rendered with zero custom
   styling. It now uses the same `.bogs-invoice-page`/`.bogs-invoice-card`
   language as Log an Expense/Log Income/Mileage Tracker (extended into
   the combined selectors above), plus the rules below for the parts
   those pages don't have: a real multi-row line-items table, a
   Subtotal/Discount/Tax/Total summary box, and the new View Invoice
   detail page (header, tabs, right-hand Details panel, audit log list).
   ---- */

.bogs-invoice-band { display: flex; gap: 18px; flex-wrap: wrap; }
.bogs-invoice-band > div { flex: 1 1 240px; min-width: 0; }

.bogs-invoice-lines-table {
	width: 100%;
	border-collapse: collapse;
	margin: 2px 0 4px;
	/* Fixed layout + explicit widths on the .bogs-col-* classes below is the
	   fix for Wayne's "first table column and row do not align" report: with
	   the browser's default auto layout, each <input>'s own intrinsic width
	   (not its CSS width:100%, which only resolves against a column width
	   auto layout hasn't settled on yet) was feeding into the column-width
	   calculation, so the Qty/Rate/Amount header cells (narrow text) and
	   their body cells (wide default-sized inputs) disagreed on how wide
	   each column should be — headers and inputs visibly didn't line up.
	   Fixed layout makes every cell in a column honor one explicit width. */
	table-layout: fixed;
}
.bogs-invoice-lines-table th {
	text-align: left;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #6b7280;
	padding: 0 6px 5px;
	border-bottom: 1px solid var(--bogs-line, #e2e8f0);
}
.bogs-invoice-lines-table th.bogs-col-qty,
.bogs-invoice-lines-table th.bogs-col-rate,
.bogs-invoice-lines-table th.bogs-col-amount { text-align: right; }
.bogs-invoice-lines-table .bogs-col-desc { width: 48%; }
.bogs-invoice-lines-table .bogs-col-qty { width: 12%; }
.bogs-invoice-lines-table .bogs-col-rate { width: 16%; }
.bogs-invoice-lines-table .bogs-col-amount { width: 18%; }
.bogs-invoice-lines-table .bogs-col-remove { width: 28px; }
.bogs-invoice-lines-table td { padding: 5px 6px; vertical-align: top; border-bottom: 1px solid #f1f2f4; }
.bogs-invoice-lines-table tr:last-child td { border-bottom: none; }
.bogs-invoice-lines-table .input-text { width: 100%; max-width: none; padding: 5px 7px; font-size: 13px; }
.bogs-invoice-lines-table .bogs-col-qty .input-text,
.bogs-invoice-lines-table .bogs-col-rate .input-text {
	text-align: right;
	max-width: 90px;
	/* display:block + margin-left:auto pushes the (narrower-than-column)
	   input to the column's right edge, under the right-aligned Qty/Rate
	   headers above it — without this it sits flush left in its cell,
	   which still reads as misaligned even once the column widths match. */
	display: block;
	margin-left: auto;
}
.bogs-invoice-lines-table .bogs-col-amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--bogs-ink, #1f2a35);
	white-space: nowrap;
	padding-top: 10px;
}
.bogs-invoice-line-remove {
	background: none;
	border: none;
	color: #9ca3af;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 6px 2px 0;
}
.bogs-invoice-line-remove:hover { color: var(--bogs-red, #d62026); }
.bogs-invoice-add-line {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	color: var(--bogs-red, #d62026);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 2px;
}
.bogs-invoice-add-line:hover { text-decoration: underline; }

.bogs-invoice-footer { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; margin-top: 4px; }
.bogs-invoice-footer-notes { flex: 1 1 260px; min-width: 0; }
.bogs-invoice-totals { flex: 0 1 260px; min-width: 220px; }
.bogs-invoice-totals-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; color: var(--bogs-ink, #1f2a35); font-variant-numeric: tabular-nums; }
.bogs-invoice-totals-row--total { border-top: 1px solid var(--bogs-line, #e2e8f0); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--bogs-navy, #072542); }
.bogs-invoice-discount-toggle {
	background: none;
	border: none;
	color: var(--bogs-red, #d62026);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}
.bogs-invoice-discount-toggle:hover { text-decoration: underline; }
.bogs-invoice-discount-field { display: flex; align-items: center; gap: 6px; }
.bogs-invoice-discount-field .input-text { max-width: 100px; padding: 4px 6px; font-size: 13px; text-align: right; }

@media (max-width: 680px) {
	/* flex-basis (240px/260px on the desktop column widths above) acts as
	   a MINIMUM main-size once flex-direction switches to column here — a
	   short "Due date" column was stretching to a tall empty box to match
	   its 240px basis even though its real content is much shorter.
	   Resetting to auto lets each stacked section size to its own content. */
	.bogs-invoice-band { flex-direction: column; }
	.bogs-invoice-band > div { flex-basis: auto; }
	.bogs-invoice-footer { flex-direction: column; }
	.bogs-invoice-footer-notes,
	.bogs-invoice-totals { flex-basis: auto; min-width: 0; }
	.bogs-invoice-lines-table thead { display: none; }
	.bogs-invoice-lines-table td { display: block; width: 100%; border-bottom: none; padding: 3px 4px; }
	/* The desktop .bogs-col-* width percentages above (table-layout: fixed)
	   outrank the plain "td { width: 100% }" rule on specificity alone, so
	   without this reset each stacked mobile row would stay pinned to its
	   desktop column width (e.g. the description field stuck at 48%)
	   instead of filling the full stacked row. */
	.bogs-invoice-lines-table .bogs-col-desc,
	.bogs-invoice-lines-table .bogs-col-qty,
	.bogs-invoice-lines-table .bogs-col-rate,
	.bogs-invoice-lines-table .bogs-col-amount,
	.bogs-invoice-lines-table .bogs-col-remove { width: 100%; }
	.bogs-invoice-lines-table tr { display: block; padding: 8px 0; border-bottom: 1px solid #f1f2f4; }
	.bogs-invoice-lines-table .bogs-col-qty .input-text,
	.bogs-invoice-lines-table .bogs-col-rate .input-text { max-width: 100%; }
	.bogs-invoice-lines-table .bogs-col-amount { text-align: left; padding-top: 2px; }
}

/* ---- View Invoice detail page (v0.43.0) -------------------------------- */
.bogs-view-invoice-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.bogs-view-invoice-heading h3 { margin: 0 0 4px; }
.bogs-view-invoice-billedto { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #6b7280; }
.bogs-view-invoice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bogs-view-invoice-actions .button { font-size: 12.5px; padding: 6px 14px; }

.bogs-view-invoice-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--bogs-line, #e2e8f0); margin-bottom: 16px; }
.bogs-view-invoice-tabs a {
	display: inline-block;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	text-decoration: none;
	padding: 8px 14px;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.bogs-view-invoice-tabs a:hover { color: var(--bogs-ink, #1f2a35); }
.bogs-view-invoice-tabs a.active { color: var(--bogs-red, #d62026); border-bottom-color: var(--bogs-red, #d62026); }

.bogs-view-invoice-layout { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.bogs-view-invoice-main { flex: 1 1 420px; min-width: 0; }
.bogs-view-invoice-side { flex: 0 1 260px; min-width: 220px; }

.bogs-view-invoice-details-panel { background: #fff; border: 1px solid var(--bogs-line, #e2e8f0); border-radius: 10px; padding: 14px 16px; }
.bogs-view-invoice-details-panel h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--bogs-navy, #072542);
	font-size: 13px;
	margin: 0 0 10px;
}
.bogs-view-invoice-detail-row { padding: 7px 0; border-top: 1px solid #f1f2f4; }
.bogs-view-invoice-detail-row:first-of-type { border-top: none; padding-top: 0; }
.bogs-view-invoice-detail-row .label { display: block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #9ca3af; margin-bottom: 2px; }
.bogs-view-invoice-detail-row .value { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: var(--bogs-ink, #1f2a35); word-break: break-word; }
.bogs-view-invoice-detail-row .value a { color: var(--bogs-red, #d62026); }

.bogs-audit-log { list-style: none; margin: 0; padding: 0; }
.bogs-audit-log li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f1f2f4; }
.bogs-audit-log li:first-child { border-top: none; padding-top: 0; }
.bogs-audit-log .bogs-audit-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bogs-red, #d62026); margin-top: 5px; }
.bogs-audit-log .bogs-audit-event { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--bogs-ink, #1f2a35); }
.bogs-audit-log .bogs-audit-meta { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11.5px; color: #9ca3af; margin-top: 1px; }
.bogs-audit-empty { color: #9ca3af; font-size: 13px; padding: 10px 0; }

@media (max-width: 680px) {
	.bogs-view-invoice-layout { flex-direction: column; }
	.bogs-view-invoice-main,
	.bogs-view-invoice-side { flex-basis: auto; min-width: 0; }
	.bogs-view-invoice-tabs { overflow-x: auto; }
}

/* ---- Payments / Stripe Connect screen (v0.49.2) -------------------------
   Replaces the inline one-off colours (#d3c6b8 / #faf7f2) the v0.48.0
   template shipped with, which matched nothing else in the product and
   were most of why the screen read as "too basic". Same brand tokens,
   same Playfair/Inter pairing and same card language as Log an Expense /
   Log Income / Mileage Tracker, so Payments now reads as one product
   with them.

   NOTE on what this fixes: the fee box used to reuse `.bogs-info-callout`
   (line ~46 above), which is a two-slot flexbox expecting an icon span
   and a text span. Given two bare <p> elements instead, flexbox made the
   heading its own narrow column — the squashed "What this costs you"
   strip Wayne screenshotted. `.bogs-pay-cost` below is its own component
   and shares nothing with that callout. ---- */

.bogs-payments-page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--bogs-ink, #1f2a35);
}
.bogs-payments-page h3 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--bogs-navy, #072542);
	letter-spacing: -.01em;
	margin: 0 0 3px;
}
.bogs-pay-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.bogs-pay-sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bogs-muted, #64748b);
	max-width: 68ch;
}

/* Notice banners — the same left-rule motif as .bogs-forward-banner. */
.bogs-pay-banner {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: linear-gradient(135deg, #fff 0%, var(--bogs-bg-soft, #f5f6f8) 100%);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-left: 4px solid var(--bogs-navy, #072542);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bogs-ink, #1f2a35);
}
.bogs-pay-banner strong { color: var(--bogs-navy, #072542); }
.bogs-pay-banner.is-good  { border-left-color: var(--bogs-good, #1a7f37); background: linear-gradient(135deg, #fff 0%, #f2f8f4 100%); }
.bogs-pay-banner.is-warn  { border-left-color: var(--bogs-warn, #b8791a); background: linear-gradient(135deg, #fff 0%, #fdf8ef 100%); }
.bogs-pay-banner.is-error { border-left-color: var(--bogs-red, #d62026);  background: linear-gradient(135deg, #fff 0%, #fdf3f3 100%); }

/* The main card: one per state, never more than one on screen. */
.bogs-pay-card {
	background: #fff;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 12px;
	padding: 15px 18px 16px;
	margin: 0 0 16px;
}
.bogs-pay-status {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--bogs-navy, #072542);
	margin: 0 0 5px;
}
.bogs-pay-dot {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bogs-muted, #64748b);
}
.bogs-pay-dot.is-good { background: var(--bogs-good, #1a7f37); box-shadow: 0 0 0 3px rgba(26, 127, 55, .14); }
.bogs-pay-dot.is-warn { background: var(--bogs-warn, #b8791a); box-shadow: 0 0 0 3px rgba(184, 121, 26, .14); }
.bogs-pay-dot.is-bad  { background: var(--bogs-red, #d62026);  box-shadow: 0 0 0 3px rgba(214, 32, 38, .14); }
.bogs-pay-lede {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	max-width: 62ch;
}
.bogs-pay-error-text { color: var(--bogs-red, #d62026); }

/* Three-step strip — replaces two paragraphs of "here's what happens". */
.bogs-pay-steps {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.bogs-pay-step {
	flex: 1 1 170px;
	min-width: 0;
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: var(--bogs-bg-soft, #f5f6f8);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 9px;
	padding: 9px 11px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--bogs-muted, #64748b);
}
.bogs-pay-step-n {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bogs-navy, #072542);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.bogs-pay-step strong {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bogs-ink, #1f2a35);
	margin-bottom: 1px;
}

/* Connected-account facts — replaces a full-width WooCommerce shop_table
   for four short values. Hairline grid: the 1px gap IS the rule. */
.bogs-pay-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	gap: 1px;
	background: var(--bogs-line, #e2e8f0);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 9px;
	overflow: hidden;
	margin: 0 0 13px;
}
.bogs-pay-fact { background: #fff; padding: 9px 11px; min-width: 0; }
.bogs-pay-fact .k {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .045em;
	color: var(--bogs-muted, #64748b);
	margin-bottom: 2px;
}
.bogs-pay-fact .v {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--bogs-ink, #1f2a35);
	overflow-wrap: break-word;
}
.bogs-pay-fact .v.is-good { color: var(--bogs-good, #1a7f37); }
.bogs-pay-fact .v.is-warn { color: var(--bogs-warn, #b8791a); }

.bogs-pay-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.bogs-pay-actions form { margin: 0; }
.bogs-payments-page .button.bogs-pay-cta {
	background: var(--bogs-red, #d62026);
	border-color: var(--bogs-red, #d62026);
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
}
.bogs-payments-page .button.bogs-pay-quiet {
	background: transparent;
	color: var(--bogs-muted, #64748b);
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 8px;
}
.bogs-pay-meta { font-size: 12px; color: var(--bogs-muted, #64748b); }

/* The fee disclosure. Narrow and bottom-left on purpose: reference, not
   the action on the page. Figures right-aligned and tabular so the three
   numbers line up and can be read without parsing a paragraph. */
.bogs-pay-cost {
	max-width: 330px;
	background: #fff;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-top: 3px solid var(--bogs-navy, #072542);
	border-radius: 10px;
	padding: 12px 14px 13px;
}
.bogs-pay-cost h4 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bogs-navy, #072542);
	margin: 0 0 9px;
}
.bogs-pay-cost dl {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 5px 14px;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.4;
}
.bogs-pay-cost dt { margin: 0; color: var(--bogs-muted, #64748b); font-weight: 400; }
.bogs-pay-cost dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bogs-ink, #1f2a35);
	white-space: nowrap;
}
.bogs-pay-cost dd.is-free { color: var(--bogs-good, #1a7f37); }
.bogs-pay-cost-eg {
	margin: 0;
	padding-top: 9px;
	border-top: 1px solid var(--bogs-line, #e2e8f0);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--bogs-muted, #64748b);
}

@media (max-width: 600px) {
	.bogs-pay-cost { max-width: 100%; }
	.bogs-pay-step { flex-basis: 100%; }
	.bogs-pay-actions .button { width: 100%; text-align: center; }
	.bogs-pay-actions form { width: 100%; }
}

/* ============================================================
   v0.51.0 — long-list screens: the Invoices tab and the Reports
   page's new Transactions tab.

   Wayne, 2026-10-09: "in a situation when the transactions get so
   much, thats too much to display." Both screens now page, search
   and filter, and both use the components below so they look like
   one feature rather than two.

   Everything here follows the brand tokens already established by
   the v0.43.0/v0.49.2 work (--bogs-navy / --bogs-red / --bogs-line
   / --bogs-ink / --bogs-muted, Playfair Display + Inter) rather
   than introducing new one-off colours.
   ============================================================ */

/* The invoicing area's own tab strip reuses .bogs-view-invoice-tabs
   (see View Invoice) — this only adds the breathing room a page-level
   strip needs that an in-card one doesn't. */
.bogs-invoice-area-tabs { margin-bottom: 20px; }

.bogs-list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.bogs-list-search { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 280px; }
.bogs-list-search .input-text {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 340px;
	padding: 7px 10px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 7px;
}
.bogs-list-search .button { flex: 0 0 auto; }
.bogs-list-clear {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	color: var(--bogs-muted, #64748b);
	text-decoration: underline;
	white-space: nowrap;
}

.bogs-list-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.bogs-list-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bogs-muted, #64748b);
	text-decoration: none;
	padding: 5px 11px;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 999px;
	background: #fff;
	line-height: 1.4;
}
.bogs-list-filter:hover { color: var(--bogs-ink, #1f2a35); border-color: #cbd5e1; }
.bogs-list-filter.is-active {
	color: #fff;
	background: var(--bogs-navy, #072542);
	border-color: var(--bogs-navy, #072542);
}
.bogs-list-filter-count {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: #9ca3af;
}
.bogs-list-filter.is-active .bogs-list-filter-count { color: rgba(255,255,255,0.75); }

.bogs-list-count {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	color: var(--bogs-muted, #64748b);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}

/* A red "Overdue" flag under the status pill. Deliberately not a second
   pill: overdue is a cut across Sent and Viewed, not a status of its own,
   and two pills side by side would read as two statuses. */
.bogs-overdue-flag {
	display: inline-block;
	margin-top: 3px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bogs-red, #d62026);
}

/* One Actions cell instead of five button columns — thirteen columns did
   not fit a laptop, and most were an em dash on any given row. */
.bogs-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bogs-row-actions form { display: inline; margin: 0; }
.bogs-row-actions a,
.bogs-row-actions button {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--bogs-navy, #072542);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.6;
}
.bogs-row-actions a:hover,
.bogs-row-actions button:hover { color: var(--bogs-red, #d62026); text-decoration: underline; }
.bogs-row-actions .bogs-row-action-danger { color: #b42318; }

.bogs-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 14px 0 4px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.bogs-pager a,
.bogs-pager .bogs-pager-current {
	display: inline-block;
	min-width: 30px;
	text-align: center;
	padding: 5px 9px;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 7px;
	text-decoration: none;
	color: var(--bogs-navy, #072542);
	background: #fff;
}
.bogs-pager a:hover { border-color: #cbd5e1; color: var(--bogs-red, #d62026); }
.bogs-pager .bogs-pager-current {
	background: var(--bogs-navy, #072542);
	border-color: var(--bogs-navy, #072542);
	color: #fff;
	font-weight: 700;
}
.bogs-pager .bogs-pager-gap { padding: 5px 2px; color: #9ca3af; }
.bogs-pager-perpage {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--bogs-muted, #64748b);
}
.bogs-pager-perpage a,
.bogs-pager-perpage strong {
	min-width: 0;
	padding: 2px 5px;
	border: none;
	background: none;
	font-size: 12px;
}
.bogs-pager-perpage strong { color: var(--bogs-ink, #1f2a35); }

@media (max-width: 680px) {
	.bogs-list-toolbar { flex-direction: column; align-items: stretch; }
	.bogs-list-search .input-text { max-width: none; }
	.bogs-pager-perpage { margin-left: 0; width: 100%; }
}

/* Reports' own tab strip — same component as the invoicing one, just its
   own spacing inside the filter card above it. */
.bogs-report-tabs { margin: 18px 0 0; }
.bogs-report-tabs .bogs-list-filter-count { margin-left: 4px; }

/* The Transactions toolbar carries two dropdowns alongside its search
   box; without this they inherit the full-width .bogs-form rule and each
   one takes a line of its own. */
.bogs-list-search select.input-text {
	flex: 0 0 auto;
	width: auto;
	max-width: 200px;
	padding: 7px 10px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-radius: 7px;
	margin: 0;
}
.bogs-list-search label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The save-as-contact offer on Create Invoice: quiet until it appears,
   then clearly a suggestion rather than another required field. */
.bogs-save-customer-row {
	background: #f8fafc;
	border: 1px solid var(--bogs-line, #e2e8f0);
	border-left: 3px solid var(--bogs-red, #d62026);
	border-radius: 7px;
	padding: 10px 12px;
}
.bogs-save-customer-row label {
	display: flex;
	align-items: center;
	gap: 2px;
	font-weight: 600;
	margin: 0;
	cursor: pointer;
}
.bogs-save-customer-row .description { margin-top: 4px; }

/* ============================================================
   v0.51.1 — the Invoices table, decrowded.

   Wayne, after seeing v0.51.0 on staging: "the page is crowding,
   take out GST from this page, use total amount alone, allow for
   scrolling so the row is not crowded."

   Two problems in that screenshot. The GST column was redundant
   (the Amount column was already the total WITH tax), and the
   action controls were wrapping onto three lines because the
   theme was rendering them as full-size buttons despite the
   v0.51.0 rules — WooCommerce's own button styling is more
   specific than a bare `.bogs-row-actions button` selector, so it
   won. Hence `.bogs-row-action` with !important below: the same
   specificity fight the v0.45.x payment page lost four times
   before the cause was found. Not elegant, documented instead.

   v0.51.2 adds a third selector tier prefixed `body.woocommerce-
   account` (0,3,1), for the case where the theme uses !important
   too — then !important no longer decides it and specificity does.
   That is the same escalation the portal background needed in
   October 2026, and it is why `appearance: none` is in the list:
   some themes paint a button through the native control appearance
   rather than through `background`, so clearing the background
   alone leaves it looking like a button anyway.

   The row now stays on ONE line and the table scrolls sideways
   when it has to, which is what Wayne asked for.
   ============================================================ */

.bogs-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Nothing in the action or reminder cells may wrap — wrapping is what
   made each row three lines tall. Let the table overflow instead; the
   container above scrolls. */
.bogs-invoice-table .bogs-cell-reminders,
.bogs-invoice-table td:last-child,
.bogs-invoice-table th:last-child { white-space: nowrap; }

.bogs-invoice-table .bogs-cell-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bogs-invoice-table .bogs-cell-opened { white-space: nowrap; }

/* "25×" instead of "Opened 25 times, last October 6, 2026 10:52 PM" —
   the sentence is on the hover title now. */
.bogs-open-count {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 5px;
	border-radius: 999px;
	background: #eef2f7;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--bogs-muted, #64748b);
	cursor: help;
}

.bogs-row-actions { flex-wrap: nowrap; }

/* The !important list is deliberately exactly the properties a theme
   button sets. Everything else is left alone. */
.bogs-row-actions a.bogs-row-action,
.bogs-row-actions button.bogs-row-action,
.woocommerce .bogs-row-actions a.bogs-row-action,
.woocommerce .bogs-row-actions button.bogs-row-action,
body.woocommerce-account .bogs-row-actions a.bogs-row-action,
body.woocommerce-account .bogs-row-actions button.bogs-row-action {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline !important;
	width: auto !important;
	min-width: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--bogs-navy, #072542) !important;
	cursor: pointer;
	white-space: nowrap;
}
.bogs-row-actions a.bogs-row-action:hover,
.bogs-row-actions button.bogs-row-action:hover,
.woocommerce .bogs-row-actions a.bogs-row-action:hover,
.woocommerce .bogs-row-actions button.bogs-row-action:hover {
	color: var(--bogs-red, #d62026) !important;
	background: none !important;
	text-decoration: underline !important;
}
.bogs-row-actions .bogs-row-action-danger,
.woocommerce .bogs-row-actions .bogs-row-action-danger,
body.woocommerce-account .bogs-row-actions .bogs-row-action-danger { color: #b42318 !important; }

/* Stripping the button chrome also strips the focus ring a keyboard user
   relies on to see where they are. Put one back explicitly — these are
   now links in appearance but still real buttons that delete invoices. */
.bogs-row-actions a.bogs-row-action:focus-visible,
.bogs-row-actions button.bogs-row-action:focus-visible,
.woocommerce .bogs-row-actions a.bogs-row-action:focus-visible,
.woocommerce .bogs-row-actions button.bogs-row-action:focus-visible {
	outline: 2px solid var(--bogs-red, #d62026) !important;
	outline-offset: 2px !important;
	text-decoration: underline !important;
}

/* ============================================================================
   v0.52.0 — PHONE LAYOUT FOR THE WHOLE PORTAL

   Wayne, 2026-10-10: "the mobile view is really bad and not mobile friendly
   for the whole page."

   It was. Three things were wrong, and they compounded:

   1. The left menu is ~20 items with icons. On a phone it took the entire
      first screen, so every page began with a wall of navigation and the
      content started below the fold.
   2. Every data table kept its desktop column count, so a nine-column
      invoice row either squeezed into unreadable slivers or pushed the
      whole page sideways.
   3. Two-column bands, card grids and toolbars sat side by side at any
      width, because most were written with flex-basis but no breakpoint.

   The approach here is deliberately global rather than screen-by-screen.
   Nearly everything in this product is built from the same handful of
   components — .bogs-modern-table, .bogs-invoice-card, .bogs-invoice-band,
   .bogs-reports-grid, .bogs-form — so fixing the components fixes every
   screen at once, including ones nobody has looked at on a phone yet.

   Breakpoints: 782px (WordPress's own admin-bar breakpoint, reused so the
   portal switches at the same width the rest of WordPress does) for layout,
   600px for the table card-stacking.
   ============================================================================ */

/* ---------- Form controls size themselves honestly ---------- */

/* `.bogs-form .input-text { width: 100%; padding: 8px }` overflows its
   container by the padding and border unless the box model includes them.
   On desktop that is a harmless 4px; at 390px it is a page that scrolls
   sideways, which is how it was found — two date inputs on Reports were
   the entire horizontal overflow of that screen. */
.bogs-form .input-text,
.bogs-form textarea,
.bogs-form select,
.bogs-list-search .input-text,
.bogs-invoice-lines-table .input-text { box-sizing: border-box; }

/* ---------- The collapsible menu ---------- */

/* Ships hidden. assets/js/bogs-portal-mobile.js adds .bogs-nav--collapsible,
   which is what turns the pair on — so no-JS keeps the full menu. */
.bogs-nav__toggle { display: none; }

.bogs-nav__toggle-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
.bogs-nav__toggle-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }

@media (max-width: 782px) {
	/* Collapse whatever two-column layout the theme uses for My Account.
	   Setting a width on the children is not enough on its own: a flex or
	   grid parent sizes them from flex-basis / grid-template-columns and
	   ignores it, which is exactly what happened on the first pass here —
	   the sidebar obeyed `width: 100%` and still sat in a 260px flex
	   track. Killing the parent's display handles flex and grid together,
	   and `flex: none` on the children covers a parent this doesn't
	   match. */
	.woocommerce-account .woocommerce,
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-navigation { box-sizing: border-box; }
	body.woocommerce-account .woocommerce,
	.woocommerce-account .woocommerce { display: block !important; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		flex: none !important;
		grid-column: 1 / -1 !important;
	}

	/* Beat the live-site Additional CSS that makes this sticky and
	   full-height on desktop — on a phone a sticky sidebar is just a
	   permanent obstruction.
	
	   v0.53.1 — the `body.woocommerce-account` prefix is load-bearing, not
	   tidiness. Wayne's Customizer CSS says:
	
	       body.woocommerce-account .woocommerce-MyAccount-navigation {
	           position: sticky !important; top: 80px !important;
	           max-height: calc(100vh - 100px); overflow-y: auto; }
	
	   That is one element plus two classes. v0.52.0's
	   `.woocommerce-MyAccount-navigation.bogs-nav` is two classes and no
	   element — LOWER specificity. Both carry !important, so !important
	   stops being the tiebreak and specificity decides, and his rule won:
	   the sidebar stayed sticky and height-capped on a phone. Adding the
	   body prefix makes this three classes plus an element, which wins.
	
	   This is the fourth time a theme-or-Customizer specificity fight has
	   produced a visible bug here (the payment page, the portal
	   background, the invoice row actions). The rule that keeps emerging:
	   !important only settles it when one side has it. */
	body.woocommerce-account .woocommerce-MyAccount-navigation.bogs-nav,
	.woocommerce-MyAccount-navigation.bogs-nav {
		position: static !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		float: none !important;
		margin: 0 0 14px !important;
		padding: 0 !important;
		overflow: visible !important;
		overflow-y: visible !important;
		align-self: auto !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* !important on the visual properties for the reason the invoice row
	   actions needed it in v0.51.1: WooCommerce's own button rules are
	   more specific than a plain class selector, and without this the
	   Menu button inherits the theme's button styling instead. */
	.bogs-nav--collapsible .bogs-nav__toggle {
		display: flex !important;
		align-items: center;
		gap: 10px;
		width: 100% !important;
		min-height: 48px;
		padding: 11px 14px !important;
		background: var(--bogs-navy, #072542) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 9px !important;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		letter-spacing: normal !important;
		text-transform: none !important;
		text-align: left;
		cursor: pointer;
	}
	.bogs-nav--collapsible .bogs-nav__panel { display: none; }
	.bogs-nav--collapsible.is-open .bogs-nav__panel {
		display: block;
		margin-top: 8px;
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--bogs-line, #e2e8f0);
		border-radius: 9px;
		background: #fff;
	}

	/* A 44px minimum tap target on every menu row — below that, people miss. */
	.bogs-nav__item > a,
	.bogs-nav__group-toggle,
	.bogs-nav__sublist a { min-height: 44px; display: flex; align-items: center; }
}

@media (min-width: 783px) {
	/* The panel is a plain wrapper on desktop; the sidebar is unchanged. */
	.bogs-nav__panel { display: block !important; }
}

/* ---------- Data tables become cards on a phone ---------- */

@media (max-width: 600px) {
	/* Only tables the script has labelled. An unlabelled one keeps its
	   normal layout and side-scrolls, which is the pre-v0.52.0 behaviour
	   and a perfectly acceptable fallback — stacking a table whose cells
	   have no labels would produce an unreadable column of bare values. */
	table.bogs-modern-table[data-bogs-labelled] { display: block; width: 100%; border: none; }
	table.bogs-modern-table[data-bogs-labelled] thead { display: none; }
	table.bogs-modern-table[data-bogs-labelled] tbody { display: block; }

	table.bogs-modern-table[data-bogs-labelled] tbody tr {
		display: block;
		margin: 0 0 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid var(--bogs-line, #e2e8f0);
		border-radius: 10px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	}
	table.bogs-modern-table[data-bogs-labelled] tbody tr:hover { background: #fff; }

	table.bogs-modern-table[data-bogs-labelled] tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 14px;
		width: auto;
		padding: 5px 0;
		border: none;
		border-top: 1px solid #f1f2f4;
		text-align: right;
		white-space: normal;
	}
	table.bogs-modern-table[data-bogs-labelled] tbody td:first-child {
		border-top: none;
		padding-top: 0;
		font-weight: 700;
		font-size: 15px;
	}

	table.bogs-modern-table[data-bogs-labelled] tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #9ca3af;
		white-space: nowrap;
	}
	/* A cell whose column had no heading (an actions column, say) gets the
	   full width instead of a blank gutter where a label would be. */
	table.bogs-modern-table[data-bogs-labelled] tbody td[data-label=""] { justify-content: flex-end; }
	table.bogs-modern-table[data-bogs-labelled] tbody td[data-label=""]::before { display: none; }

	/* The row's actions get their own full-width line, wrapping freely —
	   the one-line nowrap rule from v0.51.1 exists for a wide table and is
	   exactly wrong here. */
	.bogs-invoice-table[data-bogs-labelled] tbody td:last-child,
	.bogs-invoice-table[data-bogs-labelled] .bogs-cell-reminders { white-space: normal; }
	.bogs-invoice-table[data-bogs-labelled] tbody td:last-child { display: block; text-align: left; padding-top: 10px; }
	.bogs-invoice-table[data-bogs-labelled] tbody td:last-child::before { display: block; margin-bottom: 6px; }
	table.bogs-modern-table[data-bogs-labelled] .bogs-row-actions { flex-wrap: wrap; gap: 6px 16px; }
	table.bogs-modern-table[data-bogs-labelled] .bogs-row-actions a.bogs-row-action,
	table.bogs-modern-table[data-bogs-labelled] .bogs-row-actions button.bogs-row-action {
		font-size: 14px !important;
		line-height: 2 !important;
	}

	/* The scroll container has nothing left to scroll once rows are cards. */
	.bogs-table-scroll { overflow-x: visible; }
}

/* ---------- Everything else, at phone width ---------- */

@media (max-width: 782px) {
	/* Side-by-side bands and grids go to one column. Most of these were
	   written with a flex-basis and no breakpoint, so they sat in two
	   squeezed columns at any width. */
	.bogs-invoice-band,
	.bogs-reports-grid,
	.bogs-dashboard-cards,
	.bogs-view-invoice-layout { display: block; }
	.bogs-invoice-band > div,
	.bogs-reports-grid > div,
	.bogs-dashboard-cards > div,
	.bogs-view-invoice-main,
	.bogs-view-invoice-side {
		width: auto;
		max-width: none;
		min-width: 0;
		margin-bottom: 14px;
	}
	.bogs-fs-card, .bogs-badge-card { flex-basis: auto; }

	/* Tab strips scroll rather than wrap into a two-line stack that looks
	   like two separate rows of navigation. */
	.bogs-view-invoice-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.bogs-view-invoice-tabs::-webkit-scrollbar { display: none; }
	.bogs-view-invoice-tabs a { white-space: nowrap; flex: 0 0 auto; }

	/* Form fields use the full width; 420px was a desktop reading measure
	   and on a phone it just left the field looking half-finished. */
	.bogs-form .input-text,
	.bogs-form textarea,
	.bogs-form select { max-width: none; width: 100%; }

	/* 16px is the threshold below which iOS Safari zooms the page on focus,
	   which then leaves the viewport scrolled sideways. Every text input in
	   the portal has to clear it. */
	.bogs-form input[type="text"],
	.bogs-form input[type="email"],
	.bogs-form input[type="number"],
	.bogs-form input[type="search"],
	.bogs-form input[type="date"],
	.bogs-form input[type="tel"],
	.bogs-form input[type="password"],
	.bogs-form textarea,
	.bogs-form select,
	.bogs-list-search .input-text,
	.bogs-list-search select.input-text { font-size: 16px; }

	/* WooCommerce's own two-up form rows. */
	.bogs-form .form-row-first,
	.bogs-form .form-row-last { width: 100%; float: none; margin-right: 0; }

	/* Buttons go full width and get a real tap target. A row of three
	   half-width buttons is the single most-missed control on a phone. */
	.bogs-invoice-page .woocommerce-Button,
	.bogs-invoice-page .button,
	.bogs-form .woocommerce-Button,
	.bogs-form .button {
		display: block;
		width: 100%;
		min-height: 44px;
		margin: 0 0 8px;
		text-align: center;
	}
	/* …except where they are deliberately a row of small controls. */
	.bogs-row-actions .button,
	.bogs-list-search .button,
	.bogs-pager a,
	.bogs-pager .bogs-pager-current { display: inline-block; width: auto; margin: 0; }
	.bogs-list-search .button { min-height: 44px; }

	/* The search field and its button share one row — giving the input
	   100% pushed the button onto a line of its own with a dead strip of
	   whitespace beside it. The dropdowns below then take half-widths. */
	/* `flex: 1 1 280px` sizes the MAIN axis, and the toolbar is a column at
	   this width — so that 280px was being read as a height, leaving two
	   dead strips of whitespace around a 44px-tall search box. */
	.bogs-list-search { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
	.bogs-list-search .input-text[type="search"] { flex: 1 1 60%; min-width: 0; max-width: none; }
	/* `flex: 1 1 auto` rather than a fixed size: next to the search field
	   on the Invoices tab it stays a small button, and on the Transactions
	   tab — where two dropdowns push it onto a line of its own — it
	   stretches to fill that line instead of sitting there stranded. */
	.bogs-list-search .button { flex: 1 1 auto; min-width: 88px; }
	.bogs-list-search select.input-text { flex: 1 1 45%; min-width: 0; max-width: none; }
	.bogs-list-search .bogs-list-clear { flex: 0 0 auto; }
	.bogs-list-toolbar { gap: 10px; }

	.bogs-list-filters { gap: 6px; }
	.bogs-list-filter { min-height: 36px; }

	.bogs-pager { justify-content: center; }
	.bogs-pager-perpage { margin-left: 0; width: 100%; justify-content: center; }

	/* Card padding comes down — on a 390px screen, 20px of chrome on each
	   side is a tenth of the width spent on nothing. */
	.bogs-invoice-card, .bogs-fs-card, .bogs-badge-card, .bogs-pay-card { padding: 14px; }
	.bogs-invoice-page { padding-left: 0; padding-right: 0; }

	h3 { font-size: 20px; }
	h4 { font-size: 16px; }
}

@media (max-width: 600px) {
	/* The line-items table on Create Invoice is an input grid, not a data
	   table, so it stacks differently: each line becomes its own small
	   card with the fields full width. */
	.bogs-invoice-lines-table,
	.bogs-invoice-lines-table tbody,
	.bogs-invoice-lines-table tr,
	.bogs-invoice-lines-table td { display: block; width: auto; }
	.bogs-invoice-lines-table thead { display: none; }
	.bogs-invoice-lines-table tr.bogs-invoice-line-row {
		border: 1px solid var(--bogs-line, #e2e8f0);
		border-radius: 9px;
		padding: 10px 12px;
		margin-bottom: 10px;
	}
	.bogs-invoice-lines-table td { padding: 4px 0; }
	.bogs-invoice-lines-table .input-text { width: 100%; font-size: 16px; }
	.bogs-invoice-lines-table .bogs-col-qty::before { content: 'Qty'; }
	.bogs-invoice-lines-table .bogs-col-rate::before { content: 'Rate'; }
	.bogs-invoice-lines-table .bogs-col-amount::before { content: 'Amount'; }
	/* The remove "×" is a 28px target on desktop, where there's a mouse.
	   On a phone it becomes a proper labelled control at the foot of the
	   line's card — a bare × in a corner is both hard to hit and hard to
	   recognise. */
	.bogs-invoice-lines-table .bogs-col-remove { width: 100%; text-align: right; }
	.bogs-invoice-lines-table .bogs-invoice-line-remove {
		min-height: 36px;
		padding: 0 10px;
		font-size: 14px;
	}
	.bogs-invoice-lines-table .bogs-invoice-line-remove::after {
		content: ' Remove';
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
		font-size: 13px;
		font-weight: 600;
	}

	.bogs-invoice-lines-table .bogs-col-qty::before,
	.bogs-invoice-lines-table .bogs-col-rate::before,
	.bogs-invoice-lines-table .bogs-col-amount::before {
		display: block;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #9ca3af;
		margin-bottom: 2px;
	}

	/* The fee card and the numbered steps on the Payments screen. */
	.bogs-pay-cost { max-width: none; }
	.bogs-pay-steps { display: block; }
	.bogs-pay-step { margin-bottom: 10px; }

	/* Charts and the month-by-month strip scroll rather than compress into
	   bars one pixel wide. */
	.bogs-trend-chart, .bogs-dashboard-trend-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================================================
   v0.52.1 — THE SIDEBAR, AT FINANCIAL CENTS DENSITY

   Wayne, 2026-10-10, with a Financial Cents screenshot attached: "the space
   between each menu is too much for the mobile view. I also want to reduce
   the space between the menu on the web menu page […] also my sub menu
   should be like the fincent sub menu page."

   The reference was measured rather than eyeballed — colours sampled and
   row pitch counted off that screenshot:

     row height        42px   (top-level items)
     submenu row       32px   (and no icon, indented under the label)
     group separation  ~28px
     ground            #1f2937
     active row        #111827
     label             #d1d5db        active label   #ffffff
     submenu label     #9ca3af        active submenu #ffffff

   Until now none of the sidebar was styled by this plugin at all — it came
   from the theme plus the Additional CSS pasted into the Customizer in
   October. That is why it drifted: the markup ships here and the styling
   ships somewhere else. This block brings it into the plugin, which is also
   why several rules carry !important — the Customizer's CSS loads after
   every plugin stylesheet, so source order alone will not win. Once this is
   in, that old snippet can be deleted.

   TWO VARIANTS. The base is the current light sidebar at the new density.
   Adding `bogs-nav--dark` to the <nav> switches it to the navy treatment
   above. Both are built so the choice stays a one-line change.
   ============================================================================ */

.bogs-nav {
	--bogs-nav-row: 42px;
	--bogs-nav-sub-row: 32px;
	--bogs-nav-pad-x: 14px;
	--bogs-nav-gap: 11px;
	--bogs-nav-indent: 26px; /* submenu nesting, before its own small icon. */
	--bogs-nav-sub-icon: 14px;
}

.bogs-nav .bogs-nav__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px !important;
}
.bogs-nav .bogs-nav__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bogs-nav .bogs-nav__list li::before,
.bogs-nav .bogs-nav__list li::marker { content: none !important; }

/* A top-level row. */
.bogs-nav .bogs-nav__item > a,
.bogs-nav .bogs-nav__group-toggle {
	display: flex !important;
	align-items: center;
	gap: var(--bogs-nav-gap);
	min-height: var(--bogs-nav-row);
	padding: 0 var(--bogs-nav-pad-x) !important;
	border-radius: 7px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none !important;
	border: none !important;
}
.bogs-nav .bogs-nav__icon {
	flex: 0 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}
.bogs-nav .bogs-nav__icon svg { width: 18px; height: 18px; display: block; }
.bogs-nav .bogs-nav__label { flex: 1 1 auto; min-width: 0; }

/* The group header. <details>/<summary> is unchanged — still no JS, still
   opens itself when it contains the current page. */
.bogs-nav .bogs-nav__group { margin: 0; }
.bogs-nav .bogs-nav__group-toggle { cursor: pointer; list-style: none; }
.bogs-nav .bogs-nav__group-toggle::-webkit-details-marker { display: none; }
.bogs-nav .bogs-nav__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	transition: transform .15s ease;
	opacity: .55;
}
.bogs-nav .bogs-nav__chevron svg { width: 13px; height: 13px; }
.bogs-nav .bogs-nav__group[open] > .bogs-nav__group-toggle .bogs-nav__chevron { transform: rotate(90deg); }

/* The submenu: indented under the parent's LABEL, no icons, smaller and
   tighter than a top-level row. This is the part Wayne pointed at. */
.bogs-nav .bogs-nav__sublist {
	list-style: none !important;
	margin: 1px 0 4px !important;
	padding: 0 !important;
}
.bogs-nav .bogs-nav__sublist li { margin: 0 !important; }
.bogs-nav .bogs-nav__sublist a {
	display: flex !important;
	align-items: center;
	gap: 9px;
	min-height: var(--bogs-nav-sub-row);
	padding: 0 var(--bogs-nav-pad-x) 0 var(--bogs-nav-indent) !important;
	border-radius: 6px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none !important;
}

/* v0.52.1 — the submenu's own icon: 14px against the top level's 18px, so
   it still reads as a child row rather than a second top-level list. The
   span is rendered even when an endpoint has no icon mapped, which is what
   keeps every label in the submenu on the same left edge. */
.bogs-nav .bogs-nav__icon--sub {
	flex: 0 0 var(--bogs-nav-sub-icon);
	width: var(--bogs-nav-sub-icon);
	height: var(--bogs-nav-sub-icon);
	opacity: .85;
}
.bogs-nav .bogs-nav__icon--sub svg {
	width: var(--bogs-nav-sub-icon);
	height: var(--bogs-nav-sub-icon);
}

/* The bottom list (Log out) sits apart, the way the reference separates its
   groups — with space rather than a rule. */
.bogs-nav .bogs-nav__list--bottom { margin-top: 18px !important; }

/* ---------- Variant A: the current light sidebar, new density ---------- */

.bogs-nav .bogs-nav__item > a,
.bogs-nav .bogs-nav__group-toggle { color: var(--bogs-ink, #1f2a35); }
.bogs-nav .bogs-nav__icon { color: #8a94a3; }
.bogs-nav .bogs-nav__item > a:hover,
.bogs-nav .bogs-nav__group-toggle:hover { background: #f1f3f6; }
.bogs-nav .bogs-nav__item.is-active > a,
.bogs-nav .woocommerce-MyAccount-navigation-link.is-active > a {
	background: #eef1f5;
	color: var(--bogs-navy, #072542);
	font-weight: 700;
}
.bogs-nav .bogs-nav__sublist a { color: #6b7280; }
.bogs-nav .bogs-nav__sublist a:hover { background: #f1f3f6; color: var(--bogs-ink, #1f2a35); }
.bogs-nav .bogs-nav__sublist li.is-active a { color: var(--bogs-red, #d62026); font-weight: 700; }

/* ---------- Variant B: the Financial Cents navy ---------- */

.bogs-nav--dark {
	background: #1f2937 !important;
	border: none !important;
	border-radius: 10px;
}
.bogs-nav--dark .bogs-nav__item > a,
.bogs-nav--dark .bogs-nav__group-toggle { color: #d1d5db !important; }
.bogs-nav--dark .bogs-nav__icon { color: #9ca3af; }
.bogs-nav--dark .bogs-nav__item > a:hover,
.bogs-nav--dark .bogs-nav__group-toggle:hover { background: #374151 !important; color: #fff !important; }
.bogs-nav--dark .bogs-nav__item.is-active > a,
.bogs-nav--dark .woocommerce-MyAccount-navigation-link.is-active > a {
	background: #111827 !important;
	color: #fff !important;
	font-weight: 600;
}
.bogs-nav--dark .bogs-nav__item.is-active > a .bogs-nav__icon { color: #fff; }
.bogs-nav--dark .bogs-nav__sublist a { color: #9ca3af !important; }
.bogs-nav--dark .bogs-nav__sublist a:hover { background: #374151 !important; color: #fff !important; }
.bogs-nav--dark .bogs-nav__sublist li.is-active a { color: #fff !important; font-weight: 600; }
.bogs-nav--dark .bogs-nav__list--bottom { border-top: 1px solid #374151; padding-top: 8px !important; }

/* ---------- The same density on a phone ---------- */

@media (max-width: 782px) {
	/* v0.52.0 gave every row a 44px minimum for touch. Wayne: "the space
	   between each menu is too much for the mobile view." 40px still clears
	   the usual 38–40px comfortable-tap floor on a phone and fits four more
	   items on screen; the submenu rows come down with them. The 44px rule
	   stays everywhere it isn't a menu row. */
	.bogs-nav {
		--bogs-nav-row: 40px;
		--bogs-nav-sub-row: 32px;
	}
	.bogs-nav .bogs-nav__item > a,
	.bogs-nav .bogs-nav__group-toggle,
	.bogs-nav .bogs-nav__sublist a { min-height: var(--bogs-nav-row); }
	.bogs-nav .bogs-nav__sublist a { min-height: var(--bogs-nav-sub-row); }

	.bogs-nav--collapsible.is-open .bogs-nav__panel { padding: 2px 0; }
	.bogs-nav--dark.bogs-nav--collapsible.is-open .bogs-nav__panel {
		background: #1f2937;
		border-color: #374151;
	}
}