/* Wicked Invoicing – standalone invoice styles */

/* ======================================================================
   Base container & card
   ====================================================================== */

/* Make the whole page match the invoice background and fill the screen */
html,
body.wi-invoice-body {
	background-color: #f5f5f7;
}

/* Make the main invoice container at least as tall as the viewport */
body.wi-invoice-body .wi-invoice-container {
	min-height: 100vh;
	box-sizing: border-box;
}

@supports (padding: max(0px)) {
	body.wi-invoice-body .wi-invoice-container {
		/* keep your existing padding on larger screens, but respect safe areas */
		padding-top: max(3rem, env(safe-area-inset-top));
		padding-bottom: max(3rem, env(safe-area-inset-bottom));
	}
}

.wi-invoice-container {
	/* Page background and typography */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #222;
	background: #f5f5f7;
	padding: 3rem 1rem;
}

.wi-invoice-layout {
	max-width: 900px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #e3e3e7;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* ======================================================================
   Basic block styles (we don’t have wp-block-library here)
   ====================================================================== */

.wp-block-heading {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.wp-block-group {
	margin-bottom: 1.5rem;
}

.wp-block-separator {
	border: none;
	border-bottom: 1px solid #e3e3e7;
	margin: 1.5rem 0;
}

/* Columns layout */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

/* Some column groups must stay on one row (if used) */
.wp-block-columns.is-not-stacked-on-mobile {
	flex-wrap: nowrap;
}

/* Text alignment helpers */
.has-text-align-right {
	text-align: right;
}

/* Links */
.wi-invoice-container a {
	color: inherit;
	text-decoration: underline;
}

/* ======================================================================
   Company / meta
   ====================================================================== */

.wi-company-name {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.wi-company-address,
.wi-company-email,
.wi-company-phone {
	font-size: 0.875rem;
	color: #555;
}

.wi-invoice-meta p {
	margin: 0;
	font-size: 0.875rem;
}

/* Section headings */

.wi-invoice-layout h4.wp-block-heading {
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #555;
}

.wi-invoice-layout h5.wp-block-heading {
	font-size: 0.95rem;
	font-weight: 600;
	color: #444;
}

/* ======================================================================
   Client info
   ====================================================================== */

.wi-invoice-layout .wi-client-name {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.wi-invoice-layout .wi-client-email {
	font-size: 0.875rem;
	color: #555;
}

/* ======================================================================
   Line items table
   ====================================================================== */

.wi-line-items {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

/* Desktop: Description | Qty | Rate | Discount | Tax | Total */
.wi-line-items__header,
.wi-line-items__row {
	display: grid;
	grid-template-columns: 3fr 0.75fr 1fr 1fr 1fr 1fr;
	column-gap: 1rem;
	align-items: flex-start;
}

.wi-line-items__header {
	font-weight: 600;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #e3e3e7;
}

.wi-line-items__row + .wi-line-items__row {
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: 0.5rem;
}

.wi-line-items__cell {
	padding: 0.25rem 0;
}

.wi-line-items__cell--description {
	text-align: left;
}

.wi-line-items__cell--qty,
.wi-line-items__cell--rate,
.wi-line-items__cell--discount,
.wi-line-items__cell--tax,
.wi-line-items__cell--total {
	text-align: right;
	white-space: nowrap;
}

/* ======================================================================
   Totals area
   ====================================================================== */

.wi-totals {
	font-size: 0.95rem;
}

.wi-totals p {
	margin: 0.1rem 0;
}

.wi-totals .wi-total {
	font-weight: 600;
}

.wi-amount-due {
	border-top: 1px solid #e3e3e7;
	margin-top: 0.75rem;
	padding-top: 0.5rem;
}

.wi-amount-due p {
	margin: 0;
}

/* ======================================================================
   Payment section
   ====================================================================== */

.wi-payment-section p {
	margin-top: 0;
	font-size: 0.95rem;
}

/* ======================================================================
   Mobile / narrow screens
   ====================================================================== */

/* Small screens: keep layout, just tighten spacing & text */
@media (max-width: 640px) {
	.wi-invoice-container {
		padding: 1.5rem 0.75rem;
		font-size: 14px; /* slightly smaller base font */
	}

	.wi-invoice-layout {
		max-width: 100%;
		padding: 1.5rem 1rem;
	}

	/* Stack columns (top sections) but don't touch line-item columns */
	.wp-block-columns {
		flex-direction: column;
		gap: 1rem;
	}

	/* Make line items more compact but keep the same 6-column layout */
	.wi-line-items {
		font-size: 0.8rem; /* smaller text in the grid */
	}

	.wi-line-items__header,
	.wi-line-items__row {
		column-gap: 0.25rem;  /* tighter columns */
	}

	/* Let the description wrap if it needs to, keeps layout from blowing up */
	.wi-line-items__cell--description {
		white-space: normal;
	}

	/* Numbers can still stay mostly on one line */
	.wi-line-items__cell--qty,
	.wi-line-items__cell--rate,
	.wi-line-items__cell--discount,
	.wi-line-items__cell--tax,
	.wi-line-items__cell--total {
		white-space: nowrap;
	}
}
/* Top invoice header/meta – mobile polish */
@media (max-width: 640px) {
	/* Stack the company/info columns (you already have this effect,
	   but we keep it explicit and scoped to the invoice layout) */
	.wi-invoice-layout > .wp-block-columns {
		flex-direction: column;
		gap: 1rem;
	}

	/* Make the big INVOICE heading smaller and left-aligned on phones */
	.wi-invoice-layout h2.wp-block-heading.has-text-align-right {
		text-align: left;
		font-size: 24px;
	}

	/* Invoice meta rows (Invoice #, Status, dates, etc.) */

	/* Each meta row becomes a vertical stack: label, then value */
	.wi-invoice-layout .wi-invoice-meta .wp-block-columns {
		flex-direction: column;
		gap: 2px;
	}

	.wi-invoice-layout .wi-invoice-meta .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Labels that were right-aligned look better left-aligned when stacked */
	.wi-invoice-layout .wi-invoice-meta p.has-text-align-right {
		text-align: left;
	}

	/* Give the meta text a slightly smaller size so it feels less crowded */
	.wi-invoice-layout .wi-invoice-meta p,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-invoice-id,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-status,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-start-date,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-due-date,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-po-number,
	.wi-invoice-layout .wi-invoice-meta .wp-block-wicked-invoicing-reference-number {
		font-size: 0.85rem;
	}
}
/* Totals area – mobile stacking */
@media (max-width: 640px) {
	/* Each totals row becomes label + value stacked vertically */
	.wi-invoice-layout .wi-totals .wp-block-columns {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.wi-invoice-layout .wi-totals .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Labels that were right-aligned look better left-aligned when stacked */
	.wi-invoice-layout .wi-totals p.has-text-align-right {
		text-align: left;
	}

	/* Slightly smaller text in totals rows on small screens */
	.wi-invoice-layout .wi-totals p,
	.wi-invoice-layout .wi-totals .wp-block-wicked-invoicing-subtotal,
	.wi-invoice-layout .wi-totals .wp-block-wicked-invoicing-total-discount-amount,
	.wi-invoice-layout .wi-totals .wp-block-wicked-invoicing-tax-amount,
	.wi-invoice-layout .wi-totals .wp-block-wicked-invoicing-total {
		font-size: 0.9rem;
	}
}
@media (max-width: 640px) {
	/* Amount due block: label + value stacked, left-aligned, with emphasis */
	.wi-invoice-layout .wi-amount-due {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.wi-invoice-layout .wi-amount-due p.has-text-align-right {
		text-align: left;
		font-size: 1rem;
	}

	.wi-invoice-layout .wi-amount-due .wp-block-wicked-invoicing-amount-due {
		font-size: 1.15rem;
		font-weight: 700;
	}
}




/* ======================================================================
   WPBakery CSS Blocks
   ====================================================================== */
/* Hide Description column */
.wi-li-hide-description .wi-line-items__cell--description {
	display: none;
}

/* Hide Quantity column (header uses --quantity, cells use --qty) */
.wi-li-hide-quantity .wi-line-items__cell--quantity,
.wi-li-hide-quantity .wi-line-items__cell--qty {
	display: none;
}

/* Hide Rate column */
.wi-li-hide-rate .wi-line-items__cell--rate {
	display: none;
}

/* Hide Discount column */
.wi-li-hide-discount .wi-line-items__cell--discount {
	display: none;
}

/* Hide Tax column */
.wi-li-hide-tax .wi-line-items__cell--tax {
	display: none;
}

/* Hide Total column */
.wi-li-hide-total .wi-line-items__cell--total {
	display: none;
}

/* Example compact / bordered styles if you want them: */
.wi-li-style-compact .wi-line-items__cell {
	padding: 2px 6px;
	font-size: 13px;
}

.wi-li-style-bordered .wi-line-items__cell {
	border-bottom: 1px solid #ddd;
}

/* Amount alignment helpers (assumes amount is right-most column). */
.wi-li-amount-right .wi-line-items__cell--total,
.wi-li-amount-right .wi-line-items__cell--tax {
	text-align: right;
}

.wi-li-amount-left .wi-line-items__cell--total,
.wi-li-amount-left .wi-line-items__cell--tax {
	text-align: left;
}

.wi-li-amount-center .wi-line-items__cell--total,
.wi-li-amount-center .wi-line-items__cell--tax {
	text-align: center;
}

/* Compact line items layout */
.wi-li-style-compact table.wi-line-items-table {
    border-collapse: collapse;
    font-size: 13px;
}

.wi-li-style-compact table.wi-line-items-table th,
.wi-li-style-compact table.wi-line-items-table td {
    padding: 4px 6px;
}

/* Bordered layout */
.wi-li-style-bordered table.wi-line-items-table,
.wi-li-style-bordered table.wi-line-items-table th,
.wi-li-style-bordered table.wi-line-items-table td {
    border: 1px solid #ddd;
}

/* Amount / total column alignment (example assumes last column is amount/total) */
.wi-li-amount-right table.wi-line-items-table th:last-child,
.wi-li-amount-right table.wi-line-items-table td:last-child {
    text-align: right;
}

.wi-li-amount-left table.wi-line-items-table th:last-child,
.wi-li-amount-left table.wi-line-items-table td:last-child {
    text-align: left;
}

.wi-li-amount-center table.wi-line-items-table th:last-child,
.wi-li-amount-center table.wi-line-items-table td:last-child {
    text-align: center;
}