/* =================================================================
   CUSTOMER PORTAL
   -----------------------------------------------------------------
   Loaded from each portal page's style block, so these rules ONLY
   apply on portal pages — they are not scoped under a wrapper class.

   Values mirror the webshop design system so the portal reads as the
   same product as the storefront. The shop bundle also loads on every
   page, and two of its rules are aggressive: the global button rule
   (padding, font-size and border, all flagged important) and the
   h1/h2/h3 reset. Rules that must fight those are flagged important.

   DANGER: never put a path glob or an asterisk-slash sequence in a
   CSS comment. A glob like www / double-star / star .html closes the
   comment early, which silently swallows the :root token block below
   and makes every var() reference fail — white text on a transparent
   background, i.e. invisible table headers. Keep globs out of here.
   ================================================================= */

/* -----------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------- */
:root {
	--p-navy-950: #0a1220; /* navbar */
	--p-navy-900: #0f1c30; /* table headers */
	--p-navy-800: #16263f;
	--p-navy-700: #1f3350;

	--p-slate-600: #475569;
	--p-slate-500: #64748b;
	--p-slate-400: #94a3b8;
	--p-slate-300: #cbd5e1;
	--p-slate-200: #e2e8f0;
	--p-slate-100: #f1f5f9;

	--p-orange-600: #ea580c;
	--p-orange-500: #f97316;
	--p-orange-100: #ffedd5;

	--p-green-700: #278f5e;
	--p-green-800: #16794c;
	--p-amber-600: #db7706;
	--p-red-500: #e03636;
	--p-red-800: #941f1f;

	--p-radius: 14px;
	--p-radius-lg: 20px;

	--p-shadow-sm: 0 1px 3px rgba(10, 18, 32, 0.08);
	--p-shadow-md: 0 6px 24px rgba(10, 18, 32, 0.12);

	--p-navbar-h: 70px;
}

/* -----------------------------------------------------------------
   2. LAYOUT SHELL
   ----------------------------------------------------------------- */

/* With show_sidebar the framework nests main.container inside
   .col-sm-10; the shop's `.container { width:min(1180px,92%) !important }`
   would squeeze it. Let the content fill its column. */
.main-column > .page-content-wrapper > main.container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.sidebar-column {
	padding-left: 0;
}

/* Page title — a plain h3 (no hero band), but it now lives in the
   framework's real .page-header slot instead of a duplicate wrapper. */
.page-header-wrapper {
	margin-bottom: 1.75rem;
}

.portal-title {
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: var(--p-navy-900);
	margin-bottom: 0 !important;
}

.page-header-wrapper .page-header {
	margin-bottom: 0;
}

/* Optional supporting line under the title */
.portal-lede {
	color: var(--p-slate-600);
	font-size: 0.95rem;
	margin: 6px 0 0;
}

/* -----------------------------------------------------------------
   3. TOOLBAR + FILTERS
   ----------------------------------------------------------------- */
.portal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.portal-filters {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}

.portal-filters .btn-group {
	display: inline-flex;
	gap: 8px;
}

/* Segmented pill filter rather than a Bootstrap btn-group */
.portal-filters .btn {
	padding: 8px 16px !important;
	font-size: 0.85rem !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--p-slate-300) !important;
	background: #fff;
	color: var(--p-navy-800);
	box-shadow: none !important;
}

.portal-filters .btn:hover {
	transform: none;
	border-color: var(--p-navy-800) !important;
	color: var(--p-navy-800);
}

.portal-filters .btn-primary {
	background: var(--p-navy-800, #16263f) !important;
	border-color: var(--p-navy-800, #16263f) !important;
	color: #fff !important;
}

.portal-filters .btn-primary:hover {
	background: var(--p-navy-900, #0f1c30) !important;
	color: #fff !important;
}

/* -----------------------------------------------------------------
   4. BUTTONS
   Restore sane sizing — the shop's global .btn rule is !important and
   makes every portal button a full-size storefront CTA.
   ----------------------------------------------------------------- */
.portal-page .btn,
.portal-page .btn-sm,
.portal-page .btn-md,
.portal-page .btn-block {
	padding: 10px 20px !important;
	font-size: 0.9rem !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0;
}

.portal-page .btn-sm {
	padding: 7px 14px !important;
	font-size: 0.82rem !important;
}

/* Primary = the storefront orange, not Bootstrap's near-black --primary.
   Literal fallbacks: white text on these must never resolve to transparent. */
.portal-page .btn-primary {
	background: var(--p-orange-500, #f97316) !important;
	border-color: var(--p-orange-500, #f97316) !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(249, 115, 22, 0.28);
}

.portal-page .btn-primary:hover,
.portal-page .btn-primary:focus {
	background: var(--p-orange-600, #ea580c) !important;
	border-color: var(--p-orange-600, #ea580c) !important;
	color: #fff !important;
}

/* The global rule sets `border:none !important`, which erased these */
.portal-page .btn-secondary {
	background: #fff;
	border: 1.5px solid var(--p-slate-300) !important;
	color: var(--p-navy-800) !important;
	box-shadow: none;
}

.portal-page .btn-secondary:hover {
	background: var(--p-slate-100);
	border-color: var(--p-navy-800) !important;
	color: var(--p-navy-800) !important;
}

.portal-page .btn-outline-primary {
	background: transparent;
	border: 1.5px solid var(--p-slate-300) !important;
	color: var(--p-navy-800) !important;
	box-shadow: none;
}

.portal-page .btn-outline-primary:hover {
	background: var(--p-slate-100);
	border-color: var(--p-navy-800) !important;
	color: var(--p-navy-800) !important;
}

.portal-page .btn-link {
	color: var(--p-slate-500) !important;
	text-decoration: none;
	box-shadow: none;
}

.portal-page .btn-link:hover {
	color: var(--p-navy-800) !important;
	text-decoration: underline;
}

.portal-page .btn:hover {
	transform: none;
}

.portal-page .btn-block {
	width: 100%;
}

/* -----------------------------------------------------------------
   5. CARDS
   ----------------------------------------------------------------- */
.portal-page .frappe-card,
.portal-card {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-sm);
}

.portal-page .frappe-card {
	padding: 22px 24px;
}

/* -----------------------------------------------------------------
   6. SUMMARY / STAT CARDS
   ----------------------------------------------------------------- */
.portal-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.portal-stat {
	display: block;
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	padding: 18px 20px;
	box-shadow: var(--p-shadow-sm);
	text-decoration: none !important;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

a.portal-stat:hover {
	box-shadow: var(--p-shadow-md);
	transform: translateY(-3px);
	border-color: var(--p-slate-300);
}

.portal-stat__value {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--p-navy-800);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.portal-stat__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin-top: 8px;
}

.portal-stat__hint {
	display: block;
	font-size: 0.78rem;
	color: var(--p-slate-500);
	margin-top: 4px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.portal-stat--danger .portal-stat__value { color: var(--p-red-500); }
.portal-stat--warn .portal-stat__value { color: var(--p-amber-600); }
.portal-stat--ok .portal-stat__value { color: var(--p-green-700); }
.portal-stat--info .portal-stat__value { color: #0070cc; }
.portal-stat--accent .portal-stat__value { color: var(--p-orange-600); }

.portal-stat--alert {
	background: #fff7f7;
	border-color: rgba(224, 54, 54, 0.35);
}

/* Money values are long — step the type down so they never overflow */
.portal-stat--money .portal-stat__value {
	font-size: 1.3rem;
	letter-spacing: -0.01em;
}

/* Credit usage meter (invoice list, under the AR stats). Thin bar:
   slate track, navy fill, amber at 70%+, red at 90%+. */
.portal-credit {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow-sm);
	padding: 12px 16px;
	margin-bottom: 18px;
}

.portal-credit__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.portal-credit__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
}

.portal-credit__value {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--p-navy-800);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.portal-credit__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--p-slate-100);
	overflow: hidden;
}

.portal-credit__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--p-navy-800);
	transition: width 0.3s ease;
}

.portal-credit__fill.is-warn {
	background: var(--p-amber-600);
}

.portal-credit__fill.is-danger {
	background: var(--p-red-500);
}

/* Legacy class still referenced by a couple of templates */
.portal-page .summary-value {
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Section heading above a group of cards / tables */
.portal-section-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin: 26px 0 12px;
}

/* Quick-link cards (dashboard "Browse" grid) */
.portal-quick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.portal-quick__card {
	display: block;
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	padding: 18px 20px;
	box-shadow: var(--p-shadow-sm);
	text-decoration: none !important;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.portal-quick__card:hover {
	border-color: var(--p-orange-500);
	box-shadow: var(--p-shadow-md);
	transform: translateY(-3px);
	color: inherit;
}

.portal-quick__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--p-navy-800);
}

.portal-quick__desc {
	display: block;
	font-size: 0.84rem;
	color: var(--p-slate-500);
	margin-top: 4px;
}

.portal-quick__arrow {
	color: var(--p-slate-400);
	transition: transform 0.18s ease, color 0.18s ease;
}

.portal-quick__card:hover .portal-quick__arrow {
	color: var(--p-orange-500);
	transform: translateX(3px);
}

/* -----------------------------------------------------------------
   7. TABLES
   ----------------------------------------------------------------- */
.portal-table {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-md);
	overflow: hidden;
	margin-bottom: 18px;
}

.portal-table .table {
	margin-bottom: 0;
	font-size: 0.9rem;
	color: var(--p-slate-600);
}

/* Bootstrap 4 sets .table-sm padding through a direct rule (0.3rem) and
   ignores the BS5 --bs-table-cell-padding variable, so target the cells. */
.portal-table .table > :not(caption) > * > * {
	padding: 13px 16px;
	border-bottom: 1px solid var(--p-slate-200);
}

.portal-table .table thead th {
	/* Literal fallback: if the token block is ever lost, an unresolved var()
	   makes this transparent and the white header text becomes invisible. */
	background-color: var(--p-navy-900, #0f1c30);
	color: #fff;
	border-bottom: 0;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	vertical-align: middle;
	padding: 13px 16px;
}

.portal-table .table tbody td {
	vertical-align: middle;
}

.portal-table .table tbody tr:last-child td {
	border-bottom: none;
}

/* Calmer striping than Bootstrap's rgba(0,0,0,.05) */
.portal-table .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(15, 28, 48, 0.02);
}

.portal-table .table-hover tbody tr:hover {
	background-color: var(--p-slate-100);
	color: var(--p-slate-600);
}

/* Cell helpers */
.portal-table .is-num,
.portal-table th.is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Item names wrap. With nowrap, a long description set the table's
   min-content width, so the table grew past its container and the
   .table-responsive wrapper grew a horizontal scrollbar. `anywhere` also
   lets a long unbroken part number break instead of overflowing. */
.portal-table .cell-doc {
	display: block;
	font-weight: 700;
	color: var(--p-navy-800);
	white-space: normal;
	overflow-wrap: anywhere;
}

.portal-table .cell-sub {
	display: block;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--p-slate-500);
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.portal-table .cell-date {
	white-space: nowrap;
	color: var(--p-slate-600);
	font-size: 0.86rem;
}

/* Unit of measure beside a quantity ("3 ea"). Hidden when empty so a row
   without a UOM does not gain a stray gap. */
.portal-table .cell-uom {
	margin-left: 5px;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--p-slate-500);
}

.portal-table .cell-uom:empty {
	display: none;
}

.portal-table .cell-muted {
	color: var(--p-slate-500);
}

/* Links inside tables — the shop paints these navy on hover-orange */
.portal-table a {
	color: var(--p-navy-800);
	font-weight: 700;
	text-decoration: none;
}

.portal-table a:hover {
	color: var(--p-orange-600);
	text-decoration: none;
}

/* Slim lists (the invoice list) opt out of the forced min-width used by the
   wide B2B tables and use tighter cells, so their columns can share the
   narrow content column beside the sidebar without a horizontal scrollbar. */
.portal-table--fit .table {
	/* !important beats the min-width rule further down, which is scoped to
	   the wide tables that are meant to scroll. */
	min-width: 0 !important;
	width: 100% !important;
	table-layout: auto;
}

.portal-table--fit .table > :not(caption) > * > * {
	padding: 10px 12px;
}

/* Headers wrap to a second line rather than setting a wide min-width. */
.portal-table--fit .table thead th {
	white-space: normal;
}

/* "Order again" pick-list: selection column, quantity input and the bar that
   only appears once something has been picked. */
.portal-table .is-check {
	width: 44px;
	text-align: center;
	padding-left: 12px !important;
	padding-right: 4px !important;
}

.portal-table .is-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}

/* Rows for items that are no longer published in the shop: still listed,
   but not selectable. */
.portal-table .is-unavailable .cell-doc {
	color: var(--p-slate-500);
}

.portal-qty {
	width: 84px;
	padding: 6px 8px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Bottom action bar. The explicit [hidden] rule matters: an author
   display rule beats the hidden attribute, so the bar would never hide. */
.portal-bulk {
	position: sticky;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow-md);
}

.portal-bulk[hidden] {
	display: none;
}

.portal-bulk__count {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--p-navy-800);
}

@media (max-width: 575.98px) {
	.portal-bulk {
		position: static;
		flex-direction: column;
		align-items: stretch;
	}

	.portal-bulk .btn {
		width: 100%;
	}
}

/* Icon-only action links (PDF download) */
.portal-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--p-slate-500) !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.portal-icon-link:hover {
	background: var(--p-slate-100);
	color: var(--p-orange-600) !important;
}

/* Row action buttons (Pay / Reorder) */
.portal-row-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	white-space: nowrap;
}

/* Totals footer inside a .portal-table tfoot.
   Labels span the item columns; amounts sit under the Amount column
   so they align with the line values. Inherits the table type. */
.portal-table tfoot th,
.portal-table tfoot td {
	background: var(--p-slate-100);
	color: var(--p-navy-800);
	font-weight: 400;
	font-size: 0.88rem;
	border-top: none !important;
	border-bottom: 1px solid var(--p-slate-200) !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.portal-table tfoot tr:first-child th,
.portal-table tfoot tr:first-child td {
	border-top: 1px solid var(--p-slate-200) !important;
}

.portal-table tfoot tr:last-child th,
.portal-table tfoot tr:last-child td {
	border-bottom: none !important;
}

.portal-table tfoot td:first-child {
	text-align: left;
	font-weight: 400;
	color: var(--p-slate-600);
}

.portal-table tfoot tr.is-grand th,
.portal-table tfoot tr.is-grand td {
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--p-navy-800);
	border-top: 1px solid var(--p-slate-200) !important;
	padding-top: 12px !important;
}

/* -----------------------------------------------------------------
   8. TAGS / PILLS
   ----------------------------------------------------------------- */
.portal-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	line-height: 1.5;
}

.portal-tag--ok {
	background: rgba(39, 143, 94, 0.1);
	color: var(--p-green-800);
	border-color: rgba(39, 143, 94, 0.25);
}

.portal-tag--info {
	background: rgba(0, 112, 204, 0.1);
	color: #005ca3;
	border-color: rgba(0, 112, 204, 0.25);
}

.portal-tag--warn {
	background: rgba(219, 119, 6, 0.12);
	color: #91400d;
	border-color: rgba(219, 119, 6, 0.28);
}

.portal-tag--danger {
	background: rgba(224, 54, 54, 0.1);
	color: var(--p-red-800);
	border-color: rgba(224, 54, 54, 0.28);
}

.portal-tag--neutral {
	background: var(--p-slate-100);
	color: var(--p-slate-600);
	border-color: var(--p-slate-200);
}

/* Stack a tag with a small caption underneath (status + delivery ETA) */
.portal-cell-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}

.portal-cell-note {
	font-size: 0.76rem;
	color: var(--p-slate-500);
	white-space: nowrap;
}

/* The theme already styles .indicator-pill; nudge it to match the tag scale */
.portal-page .indicator-pill {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* -----------------------------------------------------------------
   9. EMPTY STATE
   ----------------------------------------------------------------- */
.portal-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--p-slate-500);
}

.portal-empty__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--p-navy-800);
	margin-bottom: 4px;
}

.portal-empty__body {
	font-size: 0.88rem;
	color: var(--p-slate-500);
	margin: 0 0 16px;
}

/* -----------------------------------------------------------------
   10. ADDRESS LIST
   ----------------------------------------------------------------- */
.portal-list {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-sm);
	overflow: hidden;
}

.portal-list .address-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--p-slate-200);
	text-decoration: none !important;
	color: inherit;
	transition: background-color 0.15s ease;
}

.portal-list .address-row:last-child {
	border-bottom: none;
}

.portal-list .address-row:hover {
	background-color: var(--p-slate-100);
}

.portal-list .address-title {
	font-weight: 700;
	color: var(--p-navy-800);
}

.portal-list .address-meta {
	font-size: 0.8rem;
	color: var(--p-slate-500);
	margin-top: 3px;
}

.portal-list .address-details {
	text-align: right;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--p-slate-600);
}

.portal-list .address-details strong {
	font-weight: 600;
	color: var(--p-slate-600);
}

/* -----------------------------------------------------------------
   11. DOCUMENT DETAIL PAGES
   ----------------------------------------------------------------- */

/* Key/value meta grid used on order, invoice and payment detail pages */
.portal-doc {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	margin-top: 8px;
}

.portal-doc--single {
	grid-template-columns: minmax(0, 1fr);
}

.portal-doc__panel {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-sm);
	padding: 22px 24px;
}

.portal-doc__panel + .portal-doc__panel {
	margin-top: 18px;
}

/* Panels carry no bottom margin — inside a .portal-doc grid the `gap`
   supplies the spacing. On the invoice list the "no terms" panel sits
   directly above the filters outside that grid, so it needs its own gap
   (18px = the .portal-table margin-bottom it replaces in the other branch). */
.portal-doc__panel + .portal-filters {
	margin-top: 18px;
}

/* A table nested inside a panel should not look like a card inside a card */
.portal-doc__panel .portal-table {
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
}

.portal-doc__panel .portal-table .table > :not(caption) > * > * {
	padding: 10px 14px;
}

.portal-doc__panel .portal-table .table thead th {
	padding: 10px 14px;
}

.portal-doc__panel .portal-table .table thead th:first-child,
.portal-doc__panel .portal-table .table tbody td:first-child {
	padding-left: 0;
}

.portal-doc__panel .portal-table .table thead th:last-child,
.portal-doc__panel .portal-table .table tbody td:last-child {
	padding-right: 0;
}

.portal-doc__title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin-bottom: 14px;
}

.portal-doc__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}

.portal-field__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin-bottom: 4px;
}

.portal-field__value {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--p-navy-800);
	word-break: break-word;
}

.portal-field__value--muted {
	font-weight: 400;
	color: var(--p-slate-500);
}

/* Anchor number in the order meta card */
.portal-field__value--total {
	font-size: 1.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Status row pinned above the meta grid */
.portal-meta-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

/* Order timeline strip (order page). Dots + connector line: navy when
   done, orange pulse for the current step, slate for upcoming. */
.portal-timeline {
	list-style: none;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-sm);
}

.portal-timeline__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	position: relative;
	/* Dot + connector live in a rail above the text. */
	padding-top: 24px;
}

.portal-timeline__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 8px;
	top: 6px;
	height: 2px;
	background: var(--p-slate-200);
	pointer-events: none;
}

.portal-timeline__step.is-done:not(:last-child)::after {
	background: var(--p-navy-800);
}

.portal-timeline__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 2px solid var(--p-slate-300);
	background: #fff;
	z-index: 1;
}

.portal-timeline__step.is-done .portal-timeline__dot {
	border-color: var(--p-navy-800);
	background: var(--p-navy-800);
}

.portal-timeline__step.is-current .portal-timeline__dot {
	border-color: var(--p-orange-500);
	background: var(--p-orange-100);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.portal-timeline__label {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--p-navy-800);
	/* Steps are narrow beside the sidebar — wrapping beats overflowing
	   into the neighbouring step's connector line. */
	white-space: normal;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.portal-timeline__step:not(.is-done):not(.is-current) .portal-timeline__label {
	color: var(--p-slate-400);
	font-weight: 600;
}

.portal-timeline__date {
	font-size: 0.76rem;
	color: var(--p-slate-500);
	white-space: normal;
	line-height: 1.3;
	min-height: 1em;
}

/* Shipped/Billed steps link to the shipment or invoice that completed them.
   The anchor takes over the step's flex column so the layout is unchanged. */
.portal-timeline__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	color: inherit;
	text-decoration: none;
}

.portal-timeline__link:hover .portal-timeline__label,
.portal-timeline__link:focus-visible .portal-timeline__label,
.portal-timeline__link:hover .portal-timeline__date,
.portal-timeline__link:focus-visible .portal-timeline__date {
	color: var(--p-navy-700, #1f3350);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.portal-timeline__link:focus-visible {
	outline: 2px solid var(--p-orange-500, #f97316);
	outline-offset: 2px;
}

@media (max-width: 575.98px) {
	.portal-timeline {
		flex-direction: column;
		gap: 12px;
	}

	.portal-timeline__step {
		padding-top: 0;
		padding-left: 26px;
	}

	.portal-timeline__step:not(:last-child)::after {
		left: 6px;
		right: auto;
		top: 20px;
		bottom: -10px;
		width: 2px;
		height: auto;
	}

	.portal-timeline__dot {
		top: 2px;
	}
}

/* Carrier tracking link inside the meta card */
.portal-track-link {
	font-weight: 700;
	color: var(--p-navy-800);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.portal-track-link:hover {
	color: var(--p-orange-600);
}

/* Collapsible addresses block (order page). Card-styled to match the
   meta panel above and the terms block below. */
.portal-addresses {
	background: #fff;
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius-lg);
	box-shadow: var(--p-shadow-sm);
	padding: 14px 20px;
}

.portal-addresses__summary {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.portal-addresses__summary::-webkit-details-marker {
	display: none;
}

.portal-addresses__summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: var(--p-slate-100);
	border: 1px solid var(--p-slate-300);
	color: var(--p-slate-500);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 auto;
}

.portal-addresses[open] .portal-addresses__summary::before {
	content: "–";
}

.portal-addresses__summary:hover {
	color: var(--p-orange-600);
}

.portal-addresses__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px 32px;
	margin-top: 14px;
}

/* Two addresses always sit side by side on desktop; stack on phones. */
@media (min-width: 576px) {
	.portal-addresses__body {
		grid-template-columns: 1fr 1fr;
	}
}

/* ERPNext address_display / shipping_address come as <br>-separated lines */
.portal-address {
	font-size: 0.88rem;
	line-height: 1.65;
}

/* Collapsible addresses block */
.portal-details {
	margin-top: 16px;
	border-top: 1px solid var(--p-slate-200);
	padding-top: 12px;
}

.portal-details summary {
	font-size: 0.85rem;
	color: var(--p-slate-600);
	cursor: pointer;
	outline: none;
}

.portal-details summary:hover {
	color: var(--p-orange-600);
}

.portal-details__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin-top: 14px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--p-slate-600);
}

/* Collapsible terms block (order + invoice pages). Matches the
   portal-doc__title scale and keeps long legal text tucked away. */
.portal-terms {
	background: var(--p-slate-100);
	border: 1px solid var(--p-slate-200);
	border-radius: var(--p-radius);
	padding: 12px 16px;
}

.portal-terms__summary {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.portal-terms__summary::-webkit-details-marker {
	display: none;
}

.portal-terms__summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--p-slate-300);
	color: var(--p-slate-500);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 auto;
}

.portal-terms[open] .portal-terms__summary::before {
	content: "–";
}

.portal-terms__summary:hover {
	color: var(--p-orange-600);
}

.portal-terms__body {
	margin-top: 10px;
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--p-slate-600);
	white-space: pre-line;
}

.portal-terms__body p {
	margin: 0 0 8px;
}

.portal-terms__body p:last-child {
	margin-bottom: 0;
}

/* Related documents / attachments lists */
.portal-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
	margin-top: 8px;
}

.portal-links__group > strong {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin-bottom: 6px;
}

.portal-links__group a {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--p-navy-800);
	text-decoration: none;
	padding: 3px 0;
}

.portal-links__group a:hover {
	color: var(--p-orange-600);
}

/* -----------------------------------------------------------------
   12. TOTALS (native rows rendered by order.html — no ERPNext
   order_taxes.html include, whose bare col-4/col-8 blocks with no
   grid parent rendered squished).
   ----------------------------------------------------------------- */
.portal-totals {
	margin-top: 22px;
	border-top: 1px solid var(--p-slate-200);
	padding-top: 10px;
}

.portal-totals__row {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100% !important;
	max-width: 380px !important;
	margin: 0 0 0 auto !important;
	padding: 6px 0 !important;
}

.portal-totals__label {
	flex: 1 1 auto !important;
	text-align: left !important;
	font-size: 0.9rem;
	color: var(--p-slate-600);
}

.portal-totals__value {
	flex: 0 0 auto !important;
	text-align: right !important;
	font-size: 0.9rem;
	color: var(--p-slate-600);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.portal-totals__row.is-grand {
	border-top: 1px solid var(--p-slate-200);
	margin-top: 6px !important;
	padding-top: 12px !important;
}

.portal-totals__row.is-grand .portal-totals__label,
.portal-totals__row.is-grand .portal-totals__value {
	font-weight: 800;
	color: var(--p-navy-800);
	font-size: 1rem;
}

/* Legacy: keep the old ERPNext order-taxes normalisation in case any
   page still includes that partial. */
.portal-totals .order-taxes {
	margin-top: 0 !important;
}

.portal-totals .order-taxes > div {
	display: flex !important;
	align-items: baseline;
	width: 100% !important;
	max-width: 380px !important;
	margin: 0 0 0 auto !important;
	padding: 6px 0 !important;
}

.portal-totals .item-grand-total {
	font-size: 0.9rem;
	color: var(--p-slate-600);
	max-width: none !important;
	padding: 0 !important;
	border: none !important;
}

.portal-totals .item-grand-total:first-child {
	flex: 1 1 auto !important;
	text-align: left !important;
}

.portal-totals .item-grand-total:last-child {
	flex: 0 0 auto !important;
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

.portal-totals .order-taxes.font-weight-bold {
	border-top: 1px solid var(--p-slate-200);
	margin-top: 6px !important;
	padding-top: 6px;
}

.portal-totals .order-taxes.font-weight-bold .item-grand-total {
	font-weight: 800;
	color: var(--p-navy-800);
	font-size: 1rem;
}

/* -----------------------------------------------------------------
   13. FORMS
   ----------------------------------------------------------------- */
.portal-page .form-control {
	border-radius: 10px;
	border: 1px solid var(--p-slate-300);
	font-size: 0.92rem;
	color: var(--p-navy-800);
	height: auto;
	padding: 9px 12px;
}

.portal-page select.form-control {
	height: auto;
}

.portal-page .form-control:focus {
	border-color: var(--p-orange-500);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.portal-page .control-label,
.portal-page label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--p-slate-600);
	margin-bottom: 5px;
}

.portal-page .form-group {
	margin-bottom: 1rem;
}

/* The theme forces every site textarea to 120px */
.portal-page textarea.form-control {
	height: auto;
}

/* Stripe card element host */
.portal-page #card-element {
	border: 1px solid var(--p-slate-300);
	border-radius: 10px;
	padding: 12px;
	background: #fff;
}

/* Make-payment is a single narrow column */
.make-payment .frappe-card {
	max-width: 480px;
	margin: 0 auto;
}

/* -----------------------------------------------------------------
   14. SIDEBAR NAV
   ----------------------------------------------------------------- */
.web-sidebar {
	padding-top: 0;
	position: sticky;
	top: calc(var(--p-navbar-h) + 20px);
}

.web-sidebar .sidebar-item a {
	display: block;
	padding: 0.4rem 0.65rem;
	margin-bottom: 0.15rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--p-slate-600);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.web-sidebar .sidebar-item a:hover {
	color: var(--p-navy-800);
	background-color: var(--p-slate-100);
}

.web-sidebar .sidebar-item a.active {
	color: var(--p-orange-600);
	background-color: rgba(249, 115, 22, 0.1);
	font-weight: 700;
}

/* -----------------------------------------------------------------
   15. PAGER
   ----------------------------------------------------------------- */
.portal-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 24px;
}

.portal-pager__info {
	font-size: 0.82rem;
	color: var(--p-slate-500);
	font-variant-numeric: tabular-nums;
}

.portal-pager__controls {
	display: flex;
	gap: 8px;
}

/* -----------------------------------------------------------------
   16. ALERTS / MISC
   ----------------------------------------------------------------- */
/* Lead-time status banner (order detail page). Reuses the portal-tag
   palette: warn = customer action needed, info = waiting on ops,
   ok = authorised, nothing to do. */
.portal-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-radius: var(--p-radius);
	border: 1px solid transparent;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-size: 0.9rem;
}

.portal-banner__body {
	flex: 1 1 240px;
	min-width: 0;
}

.portal-banner__title {
	display: block;
	font-size: 0.95rem;
	font-weight: 800;
	margin-bottom: 2px;
}

.portal-banner__text {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.5;
}

.portal-banner__action {
	flex: 0 0 auto;
	white-space: nowrap;
}

.portal-banner--warn {
	background: rgba(219, 119, 6, 0.1);
	border-color: rgba(219, 119, 6, 0.35);
}

.portal-banner--warn .portal-banner__title {
	color: #91400d;
}

.portal-banner--warn .portal-banner__text {
	color: #91400d;
}

.portal-banner--info {
	background: rgba(0, 112, 204, 0.08);
	border-color: rgba(0, 112, 204, 0.3);
}

.portal-banner--info .portal-banner__title {
	color: #005ca3;
}

.portal-banner--info .portal-banner__text {
	color: #005ca3;
}

.portal-banner--ok {
	background: rgba(39, 143, 94, 0.08);
	border-color: rgba(39, 143, 94, 0.3);
}

.portal-banner--ok .portal-banner__title {
	color: var(--p-green-800);
}

.portal-banner--ok .portal-banner__text {
	color: var(--p-green-800);
}

.portal-page .alert {
	border-radius: var(--p-radius);
	font-size: 0.9rem;
	border: 1px solid transparent;
}

.portal-page .alert strong {
	display: block;
	margin-bottom: 2px;
}

.portal-page h5 {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--p-slate-500);
	margin-bottom: 10px;
}

.portal-page hr {
	border-top: 1px solid var(--p-slate-200);
	margin: 18px 0;
}

/* -----------------------------------------------------------------
   17. RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.web-sidebar {
		position: static;
		padding-bottom: 1rem;
	}

	/* Below the desktop breakpoint the content column is too narrow for the
	   invoice list's columns, so rows become labelled blocks instead of
	   scrolling sideways. Each cell carries its heading in data-label. */
	.portal-table--stack thead {
		display: none;
	}

	.portal-table--stack .table,
	.portal-table--stack .table tbody,
	.portal-table--stack .table tbody tr,
	.portal-table--stack .table tbody td {
		display: block;
		width: 100%;
	}

	.portal-table--stack .table tbody tr {
		padding: 8px 10px;
		border-bottom: 1px solid var(--p-slate-200);
	}

	.portal-table--stack .table tbody tr:last-child {
		border-bottom: none;
	}

	.portal-table--stack .table > tbody > tr > td {
		display: block;
		padding: 4px 2px;
		border-bottom: none;
		text-align: right;
		white-space: normal;
	}

	/* Label on its own line: some cells hold a link plus sub-lines or a
	   tag, which a side-by-side flex row would spread out badly. */
	.portal-table--stack .table > tbody > tr > td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 1px;
		font-size: 0.72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--p-slate-500);
		text-align: left;
	}

	/* The empty-state row is a single spanning cell: no label, no split. */
	.portal-table--stack .table > tbody > tr > td[colspan] {
		display: block;
		text-align: left;
	}

	.portal-table--stack .table > tbody > tr > td[colspan]::before {
		content: none;
	}

	/* Pick-list rows ("Order again"): the checkbox has no heading and the item
	   name reads best left-aligned, the numbers stay right-aligned. */
	.portal-table--stack .table > tbody > tr > td.is-check {
		text-align: left;
	}

	.portal-table--stack .table > tbody > tr > td.is-check::before {
		content: none;
	}

	.portal-table--stack .table > tbody > tr > td.is-item {
		text-align: left;
	}
}

@media (max-width: 899.98px) {
	.portal-doc {
		grid-template-columns: minmax(0, 1fr);
	}

	.portal-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Wide B2B tables stay readable by scrolling rather than crushing.
	   Slim tables (e.g. the invoice list) opt out with
	   .portal-table--fit and shrink to fit instead. */
	.portal-table .table {
		min-width: 680px;
	}

	.portal-list .address-row {
		flex-direction: column;
		gap: 8px;
	}

	.portal-list .address-details {
		text-align: left;
	}

	/* Sticky navbar eats the top of the title area on small screens */
	.page-header-wrapper {
		margin-bottom: 1.25rem;
	}
}

@media (max-width: 575.98px) {
	.portal-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.portal-toolbar {
		align-items: stretch;
	}

	.portal-toolbar .btn {
		width: 100%;
	}
}

/* -----------------------------------------------------------------
   18. PRINT (invoices / statements are what B2B actually prints)
   ----------------------------------------------------------------- */
@media print {
	.navbar,
	.web-sidebar,
	.portal-toolbar,
	.portal-filters,
	.portal-stats,
	.portal-pager,
	.portal-page .btn,
	footer {
		display: none !important;
	}

	.sidebar-column {
		display: none !important;
	}

	.main-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.portal-table,
	.portal-doc__panel,
	.portal-page .frappe-card {
		box-shadow: none !important;
		border: 1px solid #cccccc !important;
		break-inside: avoid;
	}

	.portal-table .table {
		min-width: 0 !important;
		font-size: 0.8rem;
	}

	.portal-table .table thead th {
		background: #eeeeee !important;
		color: #000 !important;
	}

	.portal-table .table > :not(caption) > * > * {
		padding: 6px 8px;
	}
}