/*
 * R02 (15 Oct): a quote's own page and My Quotes' phone cards.
 * Design: Lovable src/pages/account/QuoteDetail.tsx and Quotes.tsx.
 * Colours come from the account shell's tokens (hsl(var(--...))); no brand hex here.
 */

/* px, not rem: the site sets html{font-size:10px}. */

/* ---- My Quotes: cards below 700 px, table from 700 px ---- */
.sb-quote-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

@media (max-width: 699.98px) {
	.sb-quote-cards { display: block; }
	.sb-quote-cards > li + li { margin-top: 12px; }
	.sb-quote-table { display: none; }
}

.sb-quote-card {
	padding: 16px;
	border-color: hsl(var(--border));
}

.sb-quote-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sb-quote-card__desc,
.sb-quote-card__exp { margin: 4px 0 0; }

.sb-quote-card__actions {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-quote-card__actions > a:not(.sb-quote-card__edit) {
	width: 100%;
	height: 44px;
	justify-content: center;
}

.sb-quote-card__edit { text-align: center; }

/* ---- One quote's page ---- */
.sb-quote-page__meta { column-gap: 24px; row-gap: 4px; }

.sb-quote-page__lines { list-style: none; margin: 0; padding: 0; }

.sb-quote-page__line {
	gap: 12px;
	padding: 12px 16px;
}

.sb-quote-page__line + .sb-quote-page__line { border-top: 1px solid hsl(var(--border)); }

.sb-quote-page__line p { margin: 0; }

.sb-quote-page__summary {
	max-width: 448px;
	padding: 16px;
}

.sb-quote-page__summary dl { margin: 0 0 8px; }
.sb-quote-page__summary dl > div { padding: 2px 0; }
.sb-quote-page__summary dd { margin: 0; }
.sb-quote-page__summary p { margin: 4px 0 0; }

.sb-quote-page__total {
	border-top: 1px solid hsl(var(--border));
	margin-top: 6px;
	padding-top: 8px !important;
}

/* Round 2: own layout, no utility classes (QuoteDetail.tsx: column, row from sm). */
.sb-quote-page .sb-quote-page__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.sb-quote-page .sb-quote-page__actions > a,
.sb-quote-page .sb-quote-page__actions > button {
	width: auto;
	margin: 0;
	justify-content: center;
}

@media (min-width: 640px) {
	.sb-quote-page .sb-quote-page__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* My Quotes: "Have a quote number?" (Quotes.tsx) and the Combine form. */
.sb-quote-combine { margin: 0; }

.sb-quote-load {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
}

.sb-quote-load label { display: block; margin: 0; }

.sb-quote-load__input {
	display: block;
	width: 224px;
	max-width: 100%;
	height: 36px;
	margin-top: 4px;
	border: 1px solid hsl(var(--input, var(--border)));
	border-radius: 6px;
	padding: 0 12px;
	font-size: 14px;
	background: hsl(var(--background));
}

.sb-quote-load__btn { height: 36px; }

.sb-quote-load__msg { width: 100%; margin: 0; }

/* Email to procurement. Doubled class: the checkout preflight's `.sb-co dialog { padding: 0 }` outranked it (23 Oct). */
dialog.sb-quote-email.sb-quote-email {
	width: min(448px, calc(100vw - 32px));
	border: 1px solid hsl(var(--border));
	border-radius: 8px;
	padding: 20px;
	background: hsl(var(--card));
	color: hsl(var(--card-foreground));
}

.sb-quote-email::backdrop { background: rgb(0 0 0 / 0.5); }

.sb-quote-email__close {
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: hsl(var(--muted-foreground));
}

.sb-quote-email__input {
	display: block;
	width: 100%;
	min-height: 40px;
	border: 1px solid hsl(var(--input, var(--border)));
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 16px;
	background: hsl(var(--background));
}

.sb-quote-email__input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.sb-quote-email__err { color: hsl(var(--destructive)); margin: 0; }