/* Portal-only styles.
   Loaded on account and auth surfaces only, so the public pages never pay for
   them (PERF-05). Everything shared lives in the theme's style.css. */

.schsbm-dashboard > :first-child { margin-top: 0; }

/* WooCommerce owns the account page markup; these rules dress its shell in the
   portal design from the mockup without overriding its templates wholesale. */
/* WooCommerce ships a floated two-column account layout at a fixed percentage
   width. The portal uses the mockup's CSS grid instead, so the float and the
   percentage widths are unwound here rather than by editing WooCommerce. */
.woocommerce-account .woocommerce { max-width: none !important; width: 100%; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}
/*
 * The navigation itself is styled once, in the theme, on .schsbm-portal__nav —
 * the class the WooCommerce navigation template also carries. A second copy
 * lived here, scoped to WooCommerce's own class names, and being both later in
 * the cascade and more specific it quietly won: editing the theme's rule
 * changed nothing on any account page, which is exactly the "two systems for
 * one thing" this pass exists to remove.
 *
 * What stays here is only what is genuinely WooCommerce's — the float reset
 * above, which undoes its two-column shell so our grid can lay the page out.
 * The active state included: WooCommerce marks it with li.is-active while our
 * own template uses aria-current, so the theme carries both selectors.
 */

.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }

/* WooCommerce's own tables and buttons, in the school's language. */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-orders,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	border: 1px solid var(--wp--preset--color--ink-200);
	border-radius: var(--schsbm-radius);
}
.woocommerce table.shop_table th {
	text-align: left;
	font-size: .71875rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--schsbm-text-muted, #616579);
	padding: 10px 12px;
	border-bottom: 2px solid var(--wp--preset--color--ink-200);
}
.woocommerce table.shop_table td { padding: 12px; border-bottom: 1px solid var(--wp--preset--color--ink-200); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid var(--wp--preset--color--blue-core);
	border-radius: var(--schsbm-radius-sm);
	background: var(--wp--preset--color--blue-core);
	color: var(--wp--preset--color--white);
	font-family: inherit; font-size: .875rem; font-weight: 600;
	text-decoration: none;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--wp--preset--color--blue-deep);
	border-color: var(--wp--preset--color--blue-deep);
	color: var(--wp--preset--color--white);
}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--wp--preset--color--orange-deep);
	border-color: var(--wp--preset--color--orange-deep);
	color: var(--wp--preset--color--white);
}

.woocommerce form .form-row label { display: block; font-size: .84375rem; font-weight: 600; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%; min-height: 44px; padding: 11px 12px;
	border: 1px solid var(--wp--preset--color--ink-300); border-radius: 4px;
	font-family: inherit; font-size: .90625rem;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border: 1px solid; border-radius: var(--schsbm-radius); padding: 14px 18px; list-style: none;
	font-size: .875rem; margin-bottom: 20px;
}
.woocommerce-message { background: #dcfce7; border-color: #15803d; color: #14532d; }
.woocommerce-info { background: var(--wp--preset--color--blue-tint); border-color: var(--wp--preset--color--blue-core); color: var(--wp--preset--color--ink-900); }
.woocommerce-error { background: #fee2e2; border-color: #b91c1c; color: #7f1d1d; }

@media (max-width: 900px) {
	/* Same treatment as the standalone portal nav: a scrollable row rather than
	   five stacked full-width links, which pushed the dashboard itself below the
	   fold on a 360px screen. */
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--wp--preset--color--ink-200);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; padding-inline: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL LISTS — one compact table system

   Orders, applications, statements and documents are the same kind of object:
   a short list of records with a status and an action. They should read the
   same. These rules are written against .schsbm-portal so every portal list
   picks them up, not against the orders page.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Scoped by table class, not by container.
 *
 * Written as `.schsbm-portal table` first, which also caught .schsbm-table —
 * the statement, the pipeline, the staff application view — and, loading after
 * the theme at equal specificity, quietly won. Narrowing it to
 * `.woocommerce-MyAccount-content` did not help either: the portal dashboard
 * renders its own statement inside that very wrapper, so the container says
 * nothing about who owns the table.
 *
 * The table's own class does. WooCommerce marks its account tables shop_table;
 * ours are .schsbm-table and belong to the theme. Two systems, two selectors,
 * no overlap.
 */
.schsbm-portal table.shop_table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.schsbm-portal table.shop_table thead th {
	padding: 8px 12px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-700);
	border-bottom: 1px solid var(--wp--preset--color--ink-200);
	text-align: left;
}
.schsbm-portal table.shop_table tbody td,
.schsbm-portal table.shop_table tbody th {
	padding: 10px 12px;
	vertical-align: middle;
	border-bottom: 1px solid var(--wp--preset--color--ink-100, #f0f0f3);
	text-align: left;
}
.schsbm-portal table.shop_table tbody tr:last-child td,
.schsbm-portal table.shop_table tbody tr:last-child th { border-bottom: 0; }

/* Amounts line up on their last digit or they are not worth tabulating. */
.schsbm-portal .woocommerce-orders-table__cell-order-total { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schsbm-orders__total { display: block; font-weight: 600; }
.schsbm-orders__items { display: block; font-size: .78125rem; color: var(--wp--preset--color--ink-700); }

/* Actions are inline and quiet. They used to be two full-width buttons that
   set the height of the entire row — 144px of order to hold two links. */
/* One line on desktop, separated rather than boxed. The cell is sized to its
   contents, so the actions no longer decide how tall an order is. */
.schsbm-orders__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.schsbm-orders__action + .schsbm-orders__action::before {
	content: "·";
	margin-right: 10px;
	color: var(--wp--preset--color--ink-300, #b9bcc7);
	font-weight: 400;
}
.schsbm-orders__action {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue-core);
	text-decoration: none;
	white-space: nowrap;
}
.schsbm-orders__action:hover { text-decoration: underline; }
.schsbm-orders__action:focus-visible { outline: 2px solid var(--schsbm-accent-fill, #b85d00); outline-offset: 2px; border-radius: 2px; }
.schsbm-portal .woocommerce-orders-table__cell-order-actions { width: 1%; white-space: nowrap; }

/* WooCommerce's own notice banner, brought down to the size of the message it
   carries. Informational, not a warning: it keeps the is-info colours and the
   role="status" WooCommerce already gives it. The action is moved after the
   text with flex order, because the markup puts the button first and reading
   "Confirm email address" before being told why is backwards. */
.schsbm-portal .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: var(--schsbm-radius-sm, 3px);
}
.schsbm-portal .wc-block-components-notice-banner > svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
}
.schsbm-portal .wc-block-components-notice-banner__content {
	display: flex;
	align-items: center;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}
/* WooCommerce declares `padding: 0 !important` on
   `.wc-block-components-notice-banner > …__content .wc-forward`, which flattened
   this to a borderless sliver that read as a cramped input rather than a
   button. No amount of specificity beats !important, so this one declaration
   answers in kind — deliberately narrow, on padding alone, and noted here so it
   reads as a reply rather than a habit. Everything else below wins on
   specificity. */
.schsbm-portal .wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .button {
	order: 2;
	/* WooCommerce sets display:flex on .button, which with min-height:0 left a
	   22px sliver that read as a cramped input rather than an action. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px 14px !important;
	min-height: 32px;
	line-height: 1.2;
	font-size: .8125rem;
	font-weight: 600;
	background: transparent;
	color: var(--wp--preset--color--blue-core);
	border: 1px solid currentColor;
	border-radius: var(--schsbm-radius-sm, 3px);
	text-decoration: none;
}
.schsbm-portal .wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .button:hover {
	background: var(--wp--preset--color--blue-core);
	color: var(--wp--preset--color--white);
}
.schsbm-portal .wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .button:focus-visible {
	outline: 3px solid var(--schsbm-accent-fill, #b85d00);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	/* WooCommerce stacks its own responsive table using the data-title
	   attributes on each cell; nothing here fights that. */
	.schsbm-portal .wc-block-components-notice-banner { align-items: flex-start; }
	.schsbm-portal .wc-block-components-notice-banner__content { flex-direction: column; align-items: flex-start; }
	/* Matched selector-for-selector against WooCommerce's own
   `.wc-block-components-notice-banner > …__content .wc-forward { padding: 0 }`,
   which is three classes deep and was flattening this to a borderless sliver.
   Specificity, not !important — the next rule that needs to win should be able
   to, and a stylesheet full of !important is one nobody can override. */
.schsbm-portal .wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .button { order: 2; }
	.schsbm-portal .woocommerce-orders-table__cell-order-total { text-align: right; }
	/* Narrow enough that two actions on one line would clip; let them wrap and
	   drop the separator, which only makes sense inline. */
	.schsbm-orders__actions { flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }
	.schsbm-orders__action + .schsbm-orders__action::before { content: none; }
}