/* The Mankai invoice and quote sheet, copied from the plugin (assets/css/document-sheet.css) for the free invoice and quote makers. */

/* The deeper bottom margin holds the footer, which is fixed there on every page. */
@page {
	size: letter;
	margin: 48px 56px 40px;
}


.cp-doc-sheet {
	margin: 0;
	padding: 0;
	color: #111827;
	font-family: "Helvetica Neue", Helvetica, Arial, "DejaVu Sans", sans-serif;
	font-size: 12px;
	line-height: 1.5;
}

/* The footer is placed against the body on screen (it sits outside the card, see the footer). */
.cp-doc-sheet--screen {
	position: relative;
}

/* A browser has no @page: the card, letter height (1056px), with the page margin as padding (the 1px border included). */
.cp-doc-sheet--screen .cp-doc-sheet__card {
	box-sizing: border-box;
	min-height: 1056px;
	padding: 47px 55px 87px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
}

/* Embedded in the client's document page, which draws one outline round the sheet and its panel. */
.cp-doc-sheet--embed .cp-doc-sheet__card {
	border: 0;
	border-radius: 0;
}

.cp-doc-sheet__grid {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.cp-doc-sheet__grid td,
.cp-doc-sheet__grid th {
	padding: 0;
	vertical-align: top;
}

/*
 * PDF only. dompdf sets a line's baseline at 0.8 of its line box, and sizes the
 * box from the font's ascender and descender: Helvetica 0.925em, DejaVu Sans
 * 1.164em. Text with a DejaVu glyph (₹, Ł, see cp_portal_doc_sheet_classes())
 * gets 1.5 x 0.925 / 1.164, so its line box, and so its baseline, matches a
 * Helvetica line at 1.5 beside it. Keep it in step with the 1.5.
 */
.cp-doc-sheet--pdf .cp-doc-sheet__fallback-font {
	line-height: 1.19;
}

/* Grey caption over a block ("Bill from:", "Payment terms:"). */
.cp-doc-sheet__label {
	margin: 0 0 4px;
	color: #6b7280;
}

/* Header row: the logo (or the studio name) left, the status pill right, over a hairline. */
.cp-doc-sheet__head {
	margin: 0 0 24px;
}

.cp-doc-sheet__grid .cp-doc-sheet__brand,
.cp-doc-sheet__grid .cp-doc-sheet__status {
	padding: 0 0 18px;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: middle;
}

.cp-doc-sheet__grid .cp-doc-sheet__status {
	text-align: right;
}

.cp-doc-sheet__logo {
	max-width: 240px;
	max-height: 48px;
}

.cp-doc-sheet__brand-name {
	font-size: 18px;
	font-weight: 700;
}

/* Status pill: a solid fill with white or black text. */
.cp-doc-sheet__chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 10px;
	background: #111827;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.cp-doc-sheet__chip--paid {
	background: #15803d;
	color: #fff;
}

.cp-doc-sheet__chip--overdue {
	background: #b91c1c;
	color: #fff;
}

.cp-doc-sheet__chip--draft {
	background: #e5e7eb;
	color: #111827;
}

.cp-doc-sheet__chip--canceled {
	background: #4b5563;
	color: #fff;
}

/* Quote statuses. A sent quote wears the accent, like an open invoice. */
.cp-doc-sheet__chip--approved {
	background: #15803d;
	color: #fff;
}

.cp-doc-sheet__chip--declined,
.cp-doc-sheet__chip--expired {
	background: #b91c1c;
	color: #fff;
}

.cp-doc-sheet__chip--changes-requested {
	background: #fde68a;
	color: #111827;
}

.cp-doc-sheet__chip--archived {
	background: #4b5563;
	color: #fff;
}

/* Ink for text on the runtime accent fill (an open invoice's or a sent quote's pill). */
.cp-doc-sheet__on-accent--light {
	color: #fff;
}

.cp-doc-sheet__on-accent--dark {
	color: #111827;
}

/* "Invoice from {studio}" and its number left; dates and the amount asked for right, as wide as the totals. */
.cp-doc-sheet__intro {
	margin: 0 0 20px;
}

.cp-doc-sheet__from {
	font-size: 16px;
}

.cp-doc-sheet__ref {
	margin: 4px 0 0;
	color: #6b7280;
}

.cp-doc-sheet__grid .cp-doc-sheet__intro-main {
	padding: 0 24px 0 0;
}

.cp-doc-sheet__grid .cp-doc-sheet__intro-facts {
	width: 296px;
	text-align: right;
}

.cp-doc-sheet__fact {
	margin: 0 0 4px;
}

.cp-doc-sheet__fact-label {
	color: #6b7280;
}

.cp-doc-sheet__fact--amount {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 700;
}

.cp-doc-sheet__fact--amount .cp-doc-sheet__fact-label {
	color: #111827;
}

/* Bill from / Bill to, under a hairline. A long email wraps instead of widening its column. */
.cp-doc-sheet__parties {
	margin: 0 0 28px;
}

.cp-doc-sheet__grid .cp-doc-sheet__party {
	width: 50%;
	padding: 16px 24px 0 0;
	border-top: 1px solid #e5e7eb;
	overflow-wrap: anywhere;
}

.cp-doc-sheet__party-name {
	font-size: 13px;
}

.cp-doc-sheet__party-line {
	color: #374151;
}

/*
 * Items and payments: a rounded grey header row, borderless rows. Separate
 * borders, because a browser drops a cell's rounded corners in a collapsed table.
 */
.cp-doc-sheet__table {
	border-collapse: separate;
}

.cp-doc-sheet__grid .cp-doc-sheet__th {
	padding: 9px 12px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 11px;
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
}

.cp-doc-sheet__grid .cp-doc-sheet__th--desc {
	border-radius: 8px 0 0 8px;
	text-align: left;
}

.cp-doc-sheet__grid .cp-doc-sheet__th--qty {
	width: 48px;
}

.cp-doc-sheet__grid .cp-doc-sheet__th--rate {
	width: 104px;
}

.cp-doc-sheet__grid .cp-doc-sheet__th--amount {
	width: 104px;
	border-radius: 0 8px 8px 0;
}

.cp-doc-sheet__row {
	/* stylelint-disable-next-line property-no-deprecated -- dompdf reads only page-break-inside, not break-inside. */
	page-break-inside: avoid;
}

.cp-doc-sheet__grid .cp-doc-sheet__cell {
	padding: 10px 12px;
	color: #374151;
	text-align: right;
	white-space: nowrap;
}

.cp-doc-sheet__grid .cp-doc-sheet__cell--desc {
	padding-right: 24px;
	color: #111827;
	text-align: left;
	white-space: normal;
}

.cp-doc-sheet__grid .cp-doc-sheet__cell--amount {
	color: #111827;
}

.cp-doc-sheet__note {
	margin: 2px 0 0;
	color: #6b7280;
	font-size: 11px;
	white-space: normal;
}

.cp-doc-sheet__grid .cp-doc-sheet__cell--empty {
	color: #6b7280;
	text-align: left;
}

/* Payment terms left, totals right, under a hairline, inset like the table text above; kept on one page. */
.cp-doc-sheet__summary {
	margin: 12px 0 0;
	/* stylelint-disable-next-line property-no-deprecated -- dompdf reads only page-break-inside, not break-inside. */
	page-break-inside: avoid;
}

.cp-doc-sheet__grid .cp-doc-sheet__terms,
.cp-doc-sheet__grid .cp-doc-sheet__totals-cell {
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.cp-doc-sheet__grid .cp-doc-sheet__terms {
	padding-right: 48px;
	padding-left: 12px;
}

.cp-doc-sheet__terms-text {
	color: #374151;
}

.cp-doc-sheet__grid .cp-doc-sheet__totals-cell {
	width: 284px;
	padding-right: 12px;
}

.cp-doc-sheet__grid .cp-doc-sheet__t-label {
	padding: 3px 16px 3px 0;
	color: #6b7280;
}

.cp-doc-sheet__grid .cp-doc-sheet__t-amount {
	padding: 3px 0;
	text-align: right;
	white-space: nowrap;
}

.cp-doc-sheet__grid .cp-doc-sheet__t-total {
	padding-top: 10px;
	padding-bottom: 6px;
	border-top: 1px solid #e5e7eb;
	color: #111827;
	font-size: 15px;
	font-weight: 700;
}

/* The amount's colour is the accent (or the ink, for a pale accent), set on the element. */
.cp-doc-sheet__grid .cp-doc-sheet__t-balance {
	padding: 6px 0 0;
	font-size: 13px;
	font-weight: 700;
	vertical-align: bottom;
}

.cp-doc-sheet__grid .cp-doc-sheet__t-balance--amount {
	font-size: 16px;
	text-align: right;
	white-space: nowrap;
}

/* Payments received: the items table's pattern. Kept on one page so its header never ends a page alone. */
.cp-doc-sheet__payments {
	margin: 28px 0 0;
	/* stylelint-disable-next-line property-no-deprecated -- dompdf reads only page-break-inside, not break-inside. */
	page-break-inside: avoid;
}

/*
 * Footer, in the bottom margin: fixed there on every PDF page (dompdf places a
 * fixed element against the page's content box, and repeats it only as a child
 * of the body, so it sits outside the card), and at the foot of the card on
 * screen; 36px from the paper's edge in both, clear of printers' margins.
 * A multi-page PDF gets "Page 1 of 3" centred on its baseline, placed by
 * cp_portal_doc_sheet_pdf_page_numbers() (src/shared/document-sheet.php): move the two together.
 */
/* Browsers print a fixed element only inside the page area (the plugin's PDF engine allows the margin), so here it sits on the bottom edge of it. */
.cp-doc-sheet--pdf .cp-doc-sheet__footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

.cp-doc-sheet--screen .cp-doc-sheet__footer {
	position: absolute;
	right: 56px;
	bottom: 36px;
	left: 56px;
}

.cp-doc-sheet__grid .cp-doc-sheet__thanks {
	padding: 12px 16px 0 0;
	border-top: 1px solid #e5e7eb;
	color: #6b7280;
}

.cp-doc-sheet__grid .cp-doc-sheet__colophon {
	padding: 12px 0 0;
	border-top: 1px solid #e5e7eb;
	color: #6b7280;
	text-align: right;
}

/*
 * A phone-width screen. The client portal sizes a narrow frame to its room
 * instead of shrinking the 816px sheet to fit (assets/js/invoice-sheet-frame.js),
 * so the blocks stack here: the intro, the parties and the totals turn into
 * rows, the items keep only the description and the amount (the quantity and
 * rate move under the description), and the text is set larger. Screen only:
 * dompdf renders for print and never has the --screen class, so the PDF never
 * changes.
 */
.cp-doc-sheet__each {
	display: none;
}

@media screen and (max-width: 600px) {

	.cp-doc-sheet--screen {
		font-size: 14px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__card {
		min-height: 0;
		padding: 24px 20px 104px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__logo {
		max-width: 160px;
		max-height: 40px;
	}

	/*
	 * Tables that sit side by side on paper stack: every part of them a block,
	 * one under the other. Child combinators only, so the totals table inside
	 * the summary keeps its own label and amount columns.
	 */
	.cp-doc-sheet--screen .cp-doc-sheet__intro,
	.cp-doc-sheet--screen .cp-doc-sheet__intro > tbody,
	.cp-doc-sheet--screen .cp-doc-sheet__intro > tbody > tr,
	.cp-doc-sheet--screen .cp-doc-sheet__parties,
	.cp-doc-sheet--screen .cp-doc-sheet__parties > tbody,
	.cp-doc-sheet--screen .cp-doc-sheet__parties > tbody > tr,
	.cp-doc-sheet--screen .cp-doc-sheet__summary,
	.cp-doc-sheet--screen .cp-doc-sheet__summary > tbody,
	.cp-doc-sheet--screen .cp-doc-sheet__summary > tbody > tr,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__intro-main,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__intro-facts,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__party,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__terms,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__totals-cell {
		display: block;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__intro-main {
		padding: 0;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__intro-facts {
		width: auto;
		margin: 14px 0 0;
		text-align: left;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__from {
		font-size: 18px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__fact--amount {
		font-size: 16px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__party {
		width: auto;
		padding: 14px 0 16px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__party-name {
		font-size: 15px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__parties {
		margin: 0 0 12px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__th--qty,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__th--rate,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__cell--qty,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__cell--rate {
		display: none;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__th {
		padding: 9px 10px;
		font-size: 12px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__th--amount {
		width: auto;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__cell {
		padding: 12px 10px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__cell--desc {
		padding-right: 12px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__note {
		font-size: 13px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__each {
		display: block;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__terms,
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__totals-cell {
		width: auto;
		padding: 16px 10px 0;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__terms {
		padding-bottom: 16px;
	}

	/* No terms: no empty row with a hairline over it. */
	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__terms:empty {
		display: none;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__t-total {
		font-size: 17px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__t-balance {
		font-size: 15px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__grid .cp-doc-sheet__t-balance--amount {
		font-size: 19px;
	}

	.cp-doc-sheet--screen .cp-doc-sheet__footer {
		right: 20px;
		bottom: 28px;
		left: 20px;
		font-size: 12px;
	}
}