/* BOGS EasyBooks — My Account home (card-grid launcher) + shared footer +
   the v0.18.0 grouped sidebar + a light, client-portal-style page theme.
   Same brand tokens as assets/css/bogs-pricing.css: navy (#072542) primary,
   red (#D62026) as a highlight accent, Playfair Display headings, Inter
   body. Loaded on every My Account page (not just vendor ones) so the
   footer renders everywhere; the home-grid/tile/sidebar-group rules below
   only ever match markup this plugin only prints for vendors.

   v0.18.0 changes, per Wayne's design review:
   - The My Account page background switches from the theme's dark navy to
     a light, client-portal-style background (see the "Page theme" block).
   - The sidebar nav is restyled to match the client-portal reference
     (icon + label rows, reduced spacing) and gains three collapsible
     groups (Invoice / Billing / Settings) — see "Grouped sidebar nav".
   - The nav + content area now fills the full page width instead of
     sitting in a narrow column with empty space beside it.
   - Tool tiles get real icons (Bogs_Icons, inline SVG) in a colored
     circle instead of a plain 3/4-letter text badge, and a per-tile accent
     color for visual variety.
   - The "Powered by" footer logo is capped to a small, fixed size — see
     "Shared footer" — fixing it rendering oversized on at least one live
     theme where the old height:26px rule wasn't winning. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bogs-navy: #072542;
	--bogs-navy-deep: #04182b;
	--bogs-red: #d62026;
	--bogs-ink: #1f2a35;
	--bogs-muted: #64748b;
	--bogs-line: #e2e8f0;
	--bogs-bg-soft: #f5f6f8;
	--bogs-good: #1a7f37;
	--bogs-warn: #b8791a;
	--bogs-accent-0: #072542; /* navy */
	--bogs-accent-1: #d62026; /* red */
	--bogs-accent-2: #0f7a6f; /* teal */
	--bogs-accent-3: #b8791a; /* gold */
}

/* ---------------------------------------------------------------- */
/* Page theme — light, client-portal-style background + full-width      */
/* layout for the whole My Account area (nav + content), replacing the  */
/* theme's dark page background and narrow centered column just for     */
/* this page. Scoped to body.woocommerce-account (a WooCommerce core    */
/* body class) so nothing else on the site is touched.                  */
/* ---------------------------------------------------------------- */

html body.woocommerce-account,
html body.woocommerce-account .site-content,
html body.woocommerce-account #content,
html body.woocommerce-account #primary,
html body.woocommerce-account .content-area,
html body.woocommerce-account main,
html body.woocommerce-account main.site-main {
	background: var(--bogs-bg-soft) !important;
	background-color: var(--bogs-bg-soft) !important;
	background-image: none !important;
}

html body.woocommerce-account .woocommerce {
	display: flex !important;
	align-items: flex-start !important;
	gap: 22px !important;
	max-width: 1560px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 28px 24px 12px !important;
	box-sizing: border-box !important;
	float: none !important;
}

html body.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 250px !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

html body.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

@media (max-width: 900px) {
	html body.woocommerce-account .woocommerce {
		flex-direction: column !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-navigation {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

/* If your theme still wins this fight after v0.19.0 (a dark background or
   narrow column persisting), it's most likely setting these on a wrapper
   this list doesn't reach, or via an inline style with its own !important —
   send a screenshot with browser dev tools open on that element (right-
   click → Inspect) showing which rule/file is winning, and this list can
   target that exact selector directly rather than guessing further. */

/* ---------------------------------------------------------------- */
/* Home dashboard (card-grid launcher)                                */
/* ---------------------------------------------------------------- */

.bogs-home {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bogs-ink);
}

.bogs-home__welcome {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bogs-navy);
	margin: 0 0 18px;
}

/* v0.20.0: this banner used to be inline-styled with no explicit text
   color, so on a page where the surrounding text is white (the theme's
   dark background bleeding through — see the "Page theme" block above)
   the "Free trial: X days left" text was invisible: white text on this
   banner's own pale cream background. Moved into CSS with an explicit
   dark color so it's readable regardless of what the surrounding page
   does. Colors match the gold/cream palette Wayne pointed to as the
   reference for the tool tiles below. */
.bogs-trial-banner {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border: 1px solid #d7bd5a;
	background: #fff8e5;
	color: var(--bogs-ink);
	padding: 12px 18px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.bogs-home__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 30px;
}

.bogs-home__stat {
	position: relative;
	background: #fff;
	border: 1px solid var(--bogs-line);
	border-radius: 12px;
	padding: 18px 20px 18px 64px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bogs-home__stat-icon {
	position: absolute;
	top: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(7, 37, 66, 0.10);
	color: var(--bogs-navy);
}

.bogs-home__stat--income .bogs-home__stat-icon { background: rgba(26, 127, 55, 0.12); color: var(--bogs-good); }
.bogs-home__stat--expenses .bogs-home__stat-icon { background: rgba(214, 32, 38, 0.1); color: var(--bogs-red); }
.bogs-home__stat--receivable .bogs-home__stat-icon { background: rgba(7, 37, 66, 0.10); color: var(--bogs-navy); }

.bogs-home__stat-icon svg { width: 18px; height: 18px; }

.bogs-home__stat-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--bogs-muted);
}

.bogs-home__stat-value {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--bogs-navy);
	margin-top: 6px;
}

.bogs-home__stat-sub {
	font-size: 0.82rem;
	color: var(--bogs-muted);
	margin-top: 6px;
}

.bogs-home__stat-sub--warn {
	color: var(--bogs-warn);
	font-weight: 600;
}

.bogs-home__stat-sub--good {
	color: var(--bogs-good);
	font-weight: 600;
}

.bogs-home__launcher-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.bogs-home__launcher-head h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem;
	color: var(--bogs-navy);
	margin: 0;
}

.bogs-home__see-more {
	font-size: 0.85rem;
	color: var(--bogs-red);
	font-weight: 600;
	text-decoration: none;
}

.bogs-home__see-more:hover {
	text-decoration: underline;
}

.bogs-home__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.bogs-home__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* v0.20.0: warm cream/gold card, per Wayne's reference (the trial
	   banner's own #fff8e5/#d7bd5a palette) — replaces the plain white
	   card so the tool tiles read as one cohesive, "stylish" family
	   rather than flat white boxes. Icon circles below keep their own
	   per-tile accent color for variety on top of this shared background. */
	background: linear-gradient(180deg, #fffdf6 0%, #fdf3d7 100%);
	border: 1px solid #e8d9a0;
	border-radius: 14px;
	padding: 20px;
	text-decoration: none !important;
	color: var(--bogs-ink) !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.bogs-home__tile:hover {
	box-shadow: 0 10px 24px rgba(184, 121, 26, 0.18);
	transform: translateY(-2px);
	border-color: var(--bogs-accent-tile, #c3a512);
}

.bogs-home__tile--locked {
	opacity: 0.7;
}

.bogs-home__tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(7, 37, 66, 0.10);
	color: var(--bogs-navy);
}

.bogs-home__tile-icon svg { width: 22px; height: 22px; }

.bogs-home__tile--accent-0 { --bogs-accent-tile: var(--bogs-accent-0); }
.bogs-home__tile--accent-1 { --bogs-accent-tile: var(--bogs-accent-1); }
.bogs-home__tile--accent-2 { --bogs-accent-tile: var(--bogs-accent-2); }
.bogs-home__tile--accent-3 { --bogs-accent-tile: var(--bogs-accent-3); }

.bogs-home__tile--accent-0 .bogs-home__tile-icon { background: rgba(7, 37, 66, 0.13); color: var(--bogs-accent-0); }
.bogs-home__tile--accent-1 .bogs-home__tile-icon { background: rgba(214, 32, 38, 0.1); color: var(--bogs-accent-1); }
.bogs-home__tile--accent-2 .bogs-home__tile-icon { background: rgba(15, 122, 111, 0.1); color: var(--bogs-accent-2); }
.bogs-home__tile--accent-3 .bogs-home__tile-icon { background: rgba(184, 121, 26, 0.12); color: var(--bogs-accent-3); }

.bogs-home__tile-name {
	font-size: 0.98rem;
	font-weight: 700;
}

.bogs-home__tile-desc {
	font-size: 0.8rem;
	color: var(--bogs-muted);
	line-height: 1.45;
}

.bogs-home__tile-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--bogs-red);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- */
/* Grouped sidebar nav — v0.18.0. Replaces WooCommerce's default flat   */
/* <ul> (see templates/myaccount/navigation.php) with icon + label rows */
/* and three collapsible <details> groups (Invoice / Billing /          */
/* Settings), reduced-spacing per Wayne's request, in the client-portal */
/* reference's style: a plain white sidebar, small icon, active row     */
/* picked out with a light tint + left accent bar rather than a solid   */
/* fill block.                                                          */
/* ---------------------------------------------------------------- */

.bogs-nav {
	background: #fff;
	border: 1px solid var(--bogs-line);
	border-radius: 12px;
	overflow: hidden;
	font-size: 0.88rem;
}

.bogs-nav__list {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.bogs-nav__list--bottom {
	border-top: 1px solid var(--bogs-line);
	padding-top: 6px;
	margin-top: 0;
}

.bogs-nav__item > a,
.bogs-nav__group-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--bogs-ink);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.bogs-nav__group-toggle::-webkit-details-marker { display: none; }
.bogs-nav__group-toggle::marker { content: ''; }

.bogs-nav__item > a:hover,
.bogs-nav__group-toggle:hover {
	background: var(--bogs-bg-soft);
}

.bogs-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	color: var(--bogs-muted);
}

.bogs-nav__icon svg { width: 17px; height: 17px; }

.bogs-nav__label {
	flex: 1 1 auto;
	font-weight: 500;
	line-height: 1.3;
}

.bogs-nav__item.is-active > a {
	background: rgba(214, 32, 38, 0.07);
	color: var(--bogs-red);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--bogs-red);
}

.bogs-nav__item.is-active > a .bogs-nav__icon {
	color: var(--bogs-red);
}

/* Groups */

.bogs-nav__group {
	border-radius: 8px;
}

.bogs-nav__group[open] > .bogs-nav__group-toggle {
	background: var(--bogs-bg-soft);
}

.bogs-nav__chevron {
	display: inline-flex;
	flex: 0 0 14px;
	color: var(--bogs-muted);
	transition: transform 0.15s ease;
}

.bogs-nav__chevron svg { width: 13px; height: 13px; }

.bogs-nav__group[open] .bogs-nav__chevron {
	transform: rotate(180deg);
}

.bogs-nav__sublist {
	list-style: none;
	margin: 2px 0 4px;
	padding: 0 0 0 30px;
}

.bogs-nav__sublist li a {
	display: block;
	padding: 6px 10px;
	border-radius: 7px;
	color: var(--bogs-ink);
	text-decoration: none;
	font-size: 0.85rem;
}

.bogs-nav__sublist li a:hover {
	background: var(--bogs-bg-soft);
}

.bogs-nav__sublist li.is-active a {
	color: var(--bogs-red);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--bogs-red);
}

/* ---------------------------------------------------------------- */
/* Fallback: WooCommerce's own default (ungrouped) nav, still used for  */
/* any logged-in customer who isn't a vendor — unchanged from v0.14.0,  */
/* just re-themed for the new light background.                        */
/* ---------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--bogs-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--bogs-line);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 9px 14px;
	font-size: 0.88rem;
	color: var(--bogs-ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--bogs-navy);
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* Shared footer — every My Account page and the marketing pricing page */
/* ---------------------------------------------------------------- */

.bogs-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	text-align: center;
	margin-top: 40px;
	padding: 22px 16px 8px;
	border-top: 1px solid var(--bogs-line);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* v0.18.0: this logo was found rendering full-size (not the intended
   small footer badge) on at least one live theme — the height:26px rule
   alone wasn't reliably winning there. Pinned harder here (both
   dimensions, !important) and backed up with width/height HTML attributes
   on the <img> itself in render_footer(), so the browser reserves the
   right box even before this stylesheet loads. */
.bogs-footer__logo {
	height: 22px !important;
	width: auto !important;
	max-width: 34px !important;
	display: block;
}

.bogs-footer__text {
	font-size: 0.82rem;
	color: var(--bogs-muted);
	line-height: 1.4;
}

.bogs-footer__text strong {
	color: var(--bogs-navy);
}

.bogs-footer__tagline {
	font-style: italic;
}

/* ---------------------------------------------------------------- */
/* Create Invoice — v0.20.0 QBO-style layout. Wayne sent a QuickBooks   */
/* Online "Create Invoice" screenshot as a reference: a light band for */
/* customer/dates, a clean line-item table, notes+attachments left /   */
/* totals right in the footer, a bottom action bar. This restyles the  */
/* EXISTING single description+amount fields into that same visual     */
/* shape — it does not add multi-line itemization (several rows each   */
/* with their own qty/rate), which would be a real data-model change   */
/* (tax calc, reports, PDF generation all currently assume one amount  */
/* per invoice) — see templates/create-invoice.php's inline note.      */
/* ---------------------------------------------------------------- */

.bogs-invoice-builder {
	max-width: 900px;
}

.bogs-invoice-builder .form-row {
	margin-bottom: 0;
}

.bogs-invoice-builder__band {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	background: var(--bogs-bg-soft);
	border: 1px solid var(--bogs-line);
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 22px;
}

.bogs-invoice-builder__customer label,
.bogs-invoice-builder__dates label {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	margin: 10px 0 4px;
}

.bogs-invoice-builder__customer label:first-child,
.bogs-invoice-builder__dates label:first-child {
	margin-top: 0;
}

.bogs-invoice-builder__customer .input-text,
.bogs-invoice-builder__dates .input-text {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.bogs-invoice-builder__customer .description,
.bogs-invoice-builder__dates .description {
	display: block;
	font-size: 0.78rem;
	color: var(--bogs-muted);
	margin-top: 4px;
}

@media (max-width: 700px) {
	.bogs-invoice-builder__band {
		grid-template-columns: 1fr;
	}
}

.bogs-invoice-builder__section-label {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1rem;
	color: var(--bogs-navy);
	margin: 0 0 10px;
}

.bogs-invoice-builder__line-table {
	border: 1px solid var(--bogs-line);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 22px;
}

.bogs-invoice-builder__line-head {
	display: flex;
	background: var(--bogs-bg-soft);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bogs-muted);
	padding: 8px 16px;
	border-bottom: 1px solid var(--bogs-line);
}

.bogs-invoice-builder__line-row {
	display: flex;
	align-items: flex-start;
	padding: 14px 16px;
	gap: 16px;
}

.bogs-invoice-builder__col-desc {
	flex: 1 1 auto;
}

.bogs-invoice-builder__col-amount {
	flex: 0 0 180px;
}

.bogs-invoice-builder__line-row .input-text {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.bogs-invoice-builder__line-note {
	margin: 0;
	padding: 10px 16px;
	background: var(--bogs-bg-soft);
	border-top: 1px solid var(--bogs-line);
	font-size: 0.78rem !important;
}

.bogs-invoice-builder__footer {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
	margin-bottom: 22px;
}

.bogs-invoice-builder__notes .form-row {
	margin-bottom: 14px;
}

.bogs-invoice-builder__totals {
	background: var(--bogs-bg-soft);
	border: 1px solid var(--bogs-line);
	border-radius: 10px;
	padding: 16px 18px;
	align-self: start;
}

.bogs-invoice-builder__totals-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	padding: 6px 0;
	color: var(--bogs-ink);
}

.bogs-invoice-builder__totals-row--total {
	border-top: 1px solid var(--bogs-line);
	margin-top: 6px;
	padding-top: 10px;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bogs-navy);
}

@media (max-width: 700px) {
	.bogs-invoice-builder__footer {
		grid-template-columns: 1fr;
	}
}

.bogs-invoice-builder__actionbar {
	position: sticky;
	bottom: 0;
	background: #fff;
	border-top: 1px solid var(--bogs-line);
	padding: 14px 0;
	display: flex;
	justify-content: flex-end;
}

.bogs-invoice-builder__submit {
	background: var(--bogs-red) !important;
	border-color: var(--bogs-red) !important;
	color: #fff !important;
	padding: 10px 22px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
}

.bogs-invoice-builder__submit:hover {
	background: #b8181d !important;
}