/* ============================================================================
 * MUAG — Portal & Login design system  (Clean Light · Teal accent)
 *
 * Loaded on every website page via the `web_include_css` hook, but every rule
 * is scoped so it can only touch our own surfaces:
 *   • Partner portals  →  .muag-portal  (and body:has(.muag-portal))
 *   • Login page       →  #page-login   (and body:has(#page-login))
 * Other Frappe website pages are left untouched.
 *
 * Design tokens live in :root; components reference them so the accent colour
 * (teal) can be re-pointed in one place.
 * ========================================================================== */

:root {
	/* Brand / accent — Material Upcycling teal (#046666) */
	--muag-accent: #046666;          /* primary */
	--muag-accent-strong: #035353;   /* hover / text-on-light */
	--muag-accent-deep: #023b3b;     /* brand panel */
	--muag-accent-100: #cfe6e6;      /* chips */
	--muag-accent-50: #ecf6f6;       /* row hover / tints */

	/* Neutrals — slate */
	--muag-ink: #0f172a;             /* slate-900 — headings */
	--muag-text: #334155;            /* slate-700 — body */
	--muag-muted: #64748b;           /* slate-500 — secondary */
	--muag-faint: #94a3b8;           /* slate-400 — hints */
	--muag-line: #e2e8f0;            /* slate-200 — borders */
	--muag-line-soft: #f1f5f9;       /* slate-100 — row separators */
	--muag-surface: #f8fafc;         /* slate-50  — page background */
	--muag-card: #ffffff;

	/* Status palette */
	--muag-info: #0284c7;   --muag-info-50: #e0f2fe;
	--muag-warn: #b45309;   --muag-warn-50: #fef3c7;
	--muag-danger: #dc2626; --muag-danger-50: #fee2e2;

	/* Shape & depth */
	--muag-radius: 16px;
	--muag-radius-md: 12px;
	--muag-radius-sm: 8px;
	/* Horizontal inset of card *content* (1px border + 20px padding). Loose
	 * text (page heading, section titles, footnote) is indented by this so it
	 * lines up with the text inside the cards, not the rounded card edge. */
	--muag-content-inset: 21px;
	--muag-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--muag-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -16px rgba(15, 23, 42, .18);
	--muag-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .32);

	--muag-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
}

/* ===========================================================================
 * Shared brand atoms (used by both portal top-bar and login panel)
 * ======================================================================== */
.muag-mark {
	display: inline-block;
	width: 24px;
	height: 34px;
	flex: 0 0 auto;
	background-image: url("/assets/muag_erpnext/images/muag-logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.muag-wordmark {
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--muag-ink);
	font-size: .95rem;
}

/* ===========================================================================
 * PORTALS
 * ======================================================================== */

/* Lift the page chrome: tint the page, widen the column, drop breadcrumbs that
 * don't belong on a focused partner view. */
body:has(.muag-portal) {
	background: var(--muag-surface);
}
/* Merge Frappe's stock web navbar into the single MUAG topbar: hide it on
 * portal pages (its account/logout menu now lives in .muag-usermenu). */
body:has(.muag-portal) .navbar { display: none; }
.page-content-wrapper:has(.muag-portal) .page-breadcrumbs,
.page-content-wrapper:has(.muag-portal) .page-header-wrapper {
	display: none;
}
.page-content-wrapper:has(.muag-portal) main.container {
	max-width: 1200px;
}
/* Logistics Portal (#805) — opt out of the 1200px cap so the wide ops
 * table fills the viewport. Tables also get a sticky bottom scrollbar
 * (see .muag-logtable--sticky below). */
.page-content-wrapper:has(.muag-portal--wide) main.container {
	max-width: none;
	padding-left: 16px;
	padding-right: 16px;
}

.muag-portal {
	font-family: var(--muag-font);
	color: var(--muag-text);
	padding: 4px 0 64px;
}

/* --- Top bar ------------------------------------------------------------- */
.muag-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	margin-bottom: 26px;
	background: var(--muag-card);
	border: 1px solid var(--muag-line);
	border-radius: var(--muag-radius);
	box-shadow: var(--muag-shadow-sm);
}
.muag-topbar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.muag-topbar__right {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Logged-in partner's own logo (Supplier/Customer.portal_logo), shown next to
 * the MUAG mark so the portal feels co-branded (#764). */
.muag-topbar__partnerlogo {
	height: 40px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	border-radius: 4px;
}
.muag-topbar__portal {
	font-size: .82rem;
	font-weight: 600;
	color: var(--muag-muted);
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--muag-accent-50);
	color: var(--muag-accent-strong);
	border: 1px solid var(--muag-accent-100);
}
.muag-userchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--muag-ink);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .03em;
}
/* User menu: the chip is a button that opens an account/logout dropdown
 * (the merged-in function of the old Frappe navbar avatar). */
.muag-usermenu { position: relative; }
button.muag-userchip {
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
	transition: box-shadow .12s ease;
}
button.muag-userchip:hover,
button.muag-userchip:focus { outline: none; box-shadow: 0 0 0 3px var(--muag-accent-100); }
.muag-usermenu__menu {
	border: 1px solid var(--muag-line);
	border-radius: var(--muag-radius-md);
	box-shadow: 0 12px 30px -10px rgba(2, 6, 23, .28);
	padding: 6px;
	min-width: 210px;
	margin-top: 8px;
}
.muag-usermenu__who {
	padding: 6px 12px 8px;
	font-size: .8rem;
	color: var(--muag-muted);
	border-bottom: 1px solid var(--muag-line-soft);
	margin-bottom: 4px;
	word-break: break-all;
}
.muag-usermenu__menu .dropdown-item {
	border-radius: var(--muag-radius-sm);
	padding: 8px 12px;
	font-size: .9rem;
	color: var(--muag-text);
}
.muag-usermenu__menu .dropdown-item:hover,
.muag-usermenu__menu .dropdown-item:focus {
	background: var(--muag-surface);
	color: var(--muag-ink);
}

/* --- Page heading ------------------------------------------------------- */
.muag-pagehead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding: 0 var(--muag-content-inset);
}
.muag-pagehead__title {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--muag-ink);
	margin: 0 0 4px;
	letter-spacing: -.01em;
}
.muag-pagehead__sub {
	margin: 0;
	color: var(--muag-muted);
	font-size: .94rem;
}
.muag-pagehead__sub strong { color: var(--muag-text); }
.muag-pagehead__actions { display: flex; gap: 10px; }
/* Compact variant used by Logistics Portal (#809) — no subtitle, smaller
 * margin, partner-preview selector docked inline with the title so the
 * table starts higher up the page. */
.muag-pagehead--compact {
	margin-bottom: 12px;
	align-items: center;
}
.muag-pagehead--compact .muag-pagehead__title { font-size: 1.3rem; margin: 0; }
/* #1078 — title + small Business-Case reference stacked, kept compact. */
.muag-pagehead__titlewrap { display: flex; flex-direction: column; gap: 1px; }
.muag-pagehead__bcref {
	font-size: .72rem;
	color: var(--muag-ink-soft, #6b7280);
	letter-spacing: .01em;
}
/* #935 — drop the year/month nav's stray margins inside the compact header so
 * the selector sits on the same line as the portal title. */
.muag-pagehead--compact .muag-yearnav { margin: 0; }
.muag-pagehead__preview { flex: 1 1 auto; display: flex; justify-content: center; }
.muag-pagehead__preview .alert { margin: 0; }

/* --- Per-BCS tabs (#765) ------------------------------------------------ */
.muag-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 var(--muag-content-inset) 20px;
}
/* #1043 — business-case selector as batch-style pill chips, matching the
 * logistics portal (.muag-bc-pill): outlined when inactive, filled accent when
 * active. */
.muag-tab {
	appearance: none;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--muag-accent-strong);
	background: #fff;
	border: 1px solid var(--muag-accent, #0d9488);
	border-radius: 999px;
	padding: 4px 14px;
	cursor: pointer;
}
.muag-tab:hover { background: var(--muag-accent-50, #ecf6f6); }
.muag-tab.is-active {
	color: #fff;
	background: var(--muag-accent, #0d9488);
	border-color: var(--muag-accent, #0d9488);
}

/* --- Year selector (#766) ---------------------------------------------- */
.muag-yearnav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 var(--muag-content-inset) 18px;
}
.muag-yearnav__current {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--muag-ink);
	min-width: 3.5em;
	text-align: center;
}
.muag-yearnav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--muag-radius-sm);
	border: 1px solid var(--muag-line);
	background: var(--muag-card);
	color: var(--muag-accent-strong);
	font-weight: 700;
	text-decoration: none;
}
.muag-yearnav__arrow:hover {
	background: var(--muag-accent-50);
	border-color: var(--muag-accent-100);
	text-decoration: none;
}
.muag-yearnav__arrow--disabled,
.muag-yearnav__arrow--disabled:hover {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--muag-card);
	border-color: var(--muag-line);
}

/* --- Quarter group header (#767, non-aggregation mode) ----------------- */
.muag-quarter {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 22px var(--muag-content-inset) 8px;
	flex-wrap: wrap;
}
.muag-quarter__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--muag-ink);
	margin: 0;
}
.muag-quarter__sub {
	font-size: .86rem;
	color: var(--muag-muted);
}

/* --- Logistics ops table: full-width, scrollable, sticky header (#774) -- */
.muag-portal .muag-logtable {
	/* Bounded scroll viewport so the horizontal scrollbar sits at the bottom
	 * of the table box and is reachable without scrolling to the page end.
	 * #805 — overflow-x: scroll (not auto) forces macOS Safari to render
	 * the bar even when the user is not actively scrolling, so it's always
	 * visible without having to scroll to the page end. */
	overflow-y: auto;
	overflow-x: scroll;
	/* #1238 — fill (almost) the whole viewport height so the table uses the
	 * screen instead of leaving a large empty strip below it. The offset leaves
	 * room for the portal header + month nav above. */
	height: calc(100vh - 120px);
	max-height: calc(100vh - 120px);
	border-radius: var(--muag-radius-sm);
	scrollbar-width: auto;
}
/* Always-visible WebKit scrollbar (Safari / Chrome on macOS). */
.muag-portal .muag-logtable::-webkit-scrollbar {
	-webkit-appearance: none;
	height: 12px;
	width: 12px;
}
.muag-portal .muag-logtable::-webkit-scrollbar-thumb {
	background-color: var(--muag-faint);
	border-radius: 6px;
	border: 2px solid var(--muag-card);
}
.muag-portal .muag-logtable::-webkit-scrollbar-track {
	background: var(--muag-line-soft);
}
.muag-portal .muag-logtable table {
	/* Grow with the columns but never narrower than the card. */
	width: max-content;
	min-width: 100%;
	margin-bottom: 0;
}
.muag-portal .muag-logtable thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--muag-line-soft);
}

/* Status-coloured rows (#777) — palette mirrors the Shipment-overview dots:
 * red = forecast, orange = in progress, green = done, grey = cancelled. */
.muag-portal .muag-logrow td:first-child { border-left: 3px solid transparent; }
.muag-portal .muag-logrow--forecasted td:first-child { border-left-color: #e53e3e; }
.muag-portal .muag-logrow--active td:first-child { border-left-color: #f08c00; }
.muag-portal .muag-logrow--done td:first-child { border-left-color: #38a169; }
.muag-portal .muag-logrow--cancelled td:first-child { border-left-color: #9ca3af; }
/* #891 — neutral white rows: the status is carried by the left-border accent
 * (above) and the status badge, so the full-row reddish/orange tints are
 * dropped for a clean white table. Colour scheme for badges lives in #890. */
.muag-portal .muag-logrow--forecasted,
.muag-portal .muag-logrow--active,
.muag-portal .muag-logrow--done,
.muag-portal .muag-logrow--cancelled { background: var(--muag-card); }

/* #891 — freeze the first section (MUAG/Warehouse) columns on horizontal
 * scroll. The .muag-stickcol cells get position:sticky + a computed left
 * offset in JS (logistics.html); they need an opaque background so scrolled
 * content does not bleed through. */
.muag-portal .muag-logtable td.muag-stickcol,
.muag-portal .muag-logtable th.muag-stickcol { background: var(--muag-card); }
.muag-portal .muag-logtable thead th.muag-stickcol { background: var(--muag-line-soft); }
.muag-portal .muag-logtable thead tr.muag-secrow th.muag-stickcol { background: var(--muag-surface); }
/* #924 — mark the right edge of the frozen section so it's obvious where the
 * pinned columns end when scrolled right (a flat border alone is easy to miss
 * against the scrolled content, so add a soft drop shadow too). */
.muag-portal .muag-logtable .muag-stickcol--edge {
	border-right: 2px solid var(--muag-line);
}
/* #1090 — the drop shadow must live on the frozen divider (the rightmost
 * sticky cell), not on .muag-stickcol--edge. The divider is a sticky sibling
 * painted *after* the edge cell, so an edge-cell shadow is buried underneath it
 * (the regression from #1040). On the divider the shadow falls onto the
 * scrolled content with nothing sticky to its right to cover it. */
.muag-portal .muag-logtable .muag-divider--frozen {
	box-shadow: 6px 0 6px -5px rgba(15, 23, 42, 0.28);
}

/* #928 — loading date/time inputs sometimes inherited a light colour and read
 * as grey; force the value to render in standard near-black text. */
.muag-portal .muag-logtable input[type="date"],
.muag-portal .muag-logtable input[type="time"] {
	color: var(--muag-ink);
	-webkit-text-fill-color: var(--muag-ink);
}

/* #891 — click-to-select row highlight (teal accent + light fill), persists
 * until another row is clicked. */
.muag-portal .muag-logrow.is-selected > td,
.muag-portal .muag-logrow.is-selected td.muag-stickcol { background: #ECF6F5; }
.muag-portal .muag-logrow.is-selected td:first-child { border-left-color: var(--muag-accent, #0d9488); }

/* #884/#909 — delivery address cell: wide enough that company + address fit
 * three lines (company name on line 1, the address wrapping below). */
.muag-portal .muag-logtable td.muag-addr-cell {
	max-width: 260px;
	min-width: 220px;
	white-space: pre-line;
}

/* #909 — hard cap text cells at three lines so a single row can never grow
 * past three lines and more rows fit on one screen. */
.muag-portal .muag-logtable small.muag-clamp3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* #851 — vertical section dividers between the logistics-table column groups
 * (Section 1 MUAG/Warehouse | 2 Routes | 3 Planning | 4 Buyer ref | 5 SP comment). */
.muag-portal .muag-logtable th.muag-divider,
.muag-portal .muag-logtable td.muag-divider {
	width: 0;
	min-width: 0;
	padding: 0;
	border-left: 2px solid var(--muag-line);
	background: transparent;
}
/* Group caption row above the column headers. */
.muag-portal .muag-logtable thead tr.muag-secrow th {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muag-muted);
	background: var(--muag-surface);
	border-bottom: 1px solid var(--muag-line);
}
/* #922 — time inputs are HH:MM only (step=60 in the markup), sized to the
 * widest possible value ("00:00") with a dash between From and To. */
.muag-portal .muag-logtable td.muag-time-cell input {
	width: 4.9em;
	display: inline-block;
	padding-left: .3rem;
	padding-right: .3rem;
}
.muag-portal .muag-logtable td.muag-time-cell .muag-time-dash {
	display: inline-block;
	margin: 0 .15rem;
	color: var(--muag-muted);
}

/* #934 — status updates by clicking the badge: render the badge as a button
 * without losing the pill look, and signal clickability. */
.muag-portal .muag-logtable button.muag-status-label {
	border: 0;
	cursor: pointer;
}
.muag-portal .muag-logtable button.muag-status-label:hover { filter: brightness(0.95); }
/* #1073 — small caret marks the status badge as editable (click to change). */
.muag-portal .muag-logtable button.muag-status-label .muag-status-caret {
	margin-left: 0.25rem;
	font-size: 0.7em;
	opacity: 0.75;
}

/* #978 — truck + trailer plates side-by-side on one line in one column. */
.muag-portal .muag-logtable td.muag-plate-cell .muag-plate-row {
	display: flex;
	gap: 3px;
	align-items: center;
}
.muag-portal .muag-logtable td.muag-plate-cell .muag-plate-row input {
	width: 6em;
	min-width: 0;
	flex: 1 1 6em;
}

/* #934 — Offtaker Contract / Reference No. columns narrowed to typical content. */
.muag-portal .muag-logtable td.muag-ref-cell { max-width: 130px; }
.muag-portal .muag-logtable td.muag-ref-cell small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* #1040 — the Reference No. input must stay inside its cell so it no longer
 * overlaps the section divider. */
.muag-portal .muag-logtable td.muag-ref-cell input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
/* #929/#1040 — cap the Volume input so the column fits "999.999" with minimal
 * padding instead of stretching full width. */
.muag-portal .muag-vol-input { width: 6em; display: inline-block; }

/* #1040 — let the column headers wrap onto two lines so each column can shrink
 * its width; overrides Bootstrap's .text-nowrap on these header cells (equal
 * !important, higher specificity wins). */
.muag-portal .muag-logtable thead tr.muag-colhead th {
	white-space: normal !important;
	max-width: 7.5rem;
	line-height: 1.12;
	vertical-align: bottom;
}
/* #1040 — shrink the vertical padding of body rows so more rows fit on one
 * screen (the cells previously carried a lot of empty space top and bottom). */
.muag-portal .muag-logtable tbody td {
	padding-top: .2rem;
	padding-bottom: .2rem;
	vertical-align: middle;
}
/* #1040 — the diesel-surcharge currency selector previously rendered shorter
 * than the neighbouring yellow inputs; pin inputs and selects to one height
 * (textareas are excluded — they grow on focus, see .muag-comment-expand). */
.muag-portal .muag-logtable input.muag-inline,
.muag-portal .muag-logtable select.muag-inline {
	height: 1.85rem;
	line-height: 1.2;
}
/* #1076 — checkboxes are also input.muag-inline, so the 1.85rem height above
 * stretched them into a tall rounded rectangle. Pin them to a 1:1 square. */
.muag-portal .muag-logtable input[type="checkbox"].muag-inline {
	width: 1.15rem;
	height: 1.15rem;
	aspect-ratio: 1 / 1;
	vertical-align: middle;
}

/* #1040 — expandable comment cells. Collapsed they show one line; the editable
 * textarea grows on focus and the read-only text expands on hover, so long
 * comments are readable on demand without making every row permanently tall. */
.muag-portal .muag-logtable small.muag-clamp1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 16rem;
}
.muag-portal .muag-logtable small.muag-expandable:hover {
	-webkit-line-clamp: unset;
	overflow: visible;
	white-space: normal;
}
.muag-portal .muag-logtable textarea.muag-comment-expand {
	min-width: 12rem;
	height: 1.85rem;
	resize: none;
	overflow: hidden;
	transition: height .12s ease;
}
.muag-portal .muag-logtable textarea.muag-comment-expand:focus {
	height: 5.5rem;
	overflow: auto;
}
/* #1040 — the three frozen columns (Shipment ID · MUAG Status · Desired
 * Pick-up) should take as little width as needed; trim their horizontal
 * padding without touching the inter-column gap. */
.muag-portal .muag-logtable td.muag-stickcol,
.muag-portal .muag-logtable th.muag-stickcol {
	padding-left: .45rem;
	padding-right: .45rem;
}

/* #979 — Business Case filter pill buttons (replace <select>).
 * Multi-select: inactive = outlined chip, active = filled accent chip.
 * Scoped to .muag-portal so it never bleeds into the Frappe desk. */
.muag-portal .muag-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.muag-portal .muag-bc-pill {
	appearance: none;
	border: 1px solid var(--muag-accent-100);
	background: var(--muag-card);
	color: var(--muag-accent-strong);
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.muag-portal .muag-bc-pill:hover {
	background: var(--muag-accent-50);
	border-color: var(--muag-accent);
}
.muag-portal .muag-bc-pill.is-active {
	background: var(--muag-accent);
	border-color: var(--muag-accent);
	color: #fff;
}

/* --- #988 Business-case context bar (above the warehouse calendar) ---- */
.muag-portal .muag-bc-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 8px var(--muag-content-inset);
	font-size: .9rem;
	color: var(--muag-text);
}
.muag-portal .muag-bc-context strong {
	color: var(--muag-ink);
	font-weight: 700;
}
.muag-portal .muag-bc-context__commodity {
	margin-left: 6px;
	font-size: .82rem;
	color: var(--muag-muted);
}
.muag-portal .muag-bc-context__pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--muag-accent-50);
	border: 1px solid var(--muag-accent-100);
	color: var(--muag-accent-strong);
	font-size: .8rem;
	font-weight: 600;
}

/* --- Warehouse month-calendar (#810) ---------------------------------- */
.muag-portal .muag-warehouse-cal { font-size: .82rem; }
.muag-portal .muag-warehouse-cal thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--muag-line-soft);
	white-space: nowrap;
}
.muag-portal .muag-cal__weekhead td {
	background: var(--muag-accent-50);
	color: var(--muag-accent-strong);
	font-size: .8rem;
	padding: 4px 10px;
	border-top: 1px solid var(--muag-line);
}
.muag-portal .muag-cal__day.is-weekend td { background: var(--muag-line-soft); }
/* #1042 — Saturday and Sunday shade distinctly: Saturday is a lighter tint,
 * Sunday a darker shade of the same grey (these follow .is-weekend so they
 * win on equal specificity). */
.muag-portal .muag-cal__day.is-saturday td { background: #f1f3f5; }
.muag-portal .muag-cal__day.is-sunday td { background: #e4e8eb; }
/* #940 — today's row is marked by a coloured border around the whole row, not
 * an input-like fill, so it never reads as an editable (yellow) cell. */
.muag-portal .muag-cal__day.is-today td {
	border-top: 2px solid var(--muag-accent-strong);
	border-bottom: 2px solid var(--muag-accent-strong);
}
.muag-portal .muag-cal__day.is-today td:first-child { border-left: 2px solid var(--muag-accent-strong); }
.muag-portal .muag-cal__day.is-today td:last-child { border-right: 2px solid var(--muag-accent-strong); }
/* #937/#944 — Sunday closes the week with a bottom border before Monday. */
.muag-portal .muag-cal__day.is-sunday td { border-bottom: 2px solid var(--muag-muted); }
/* #944 — compact rows so as many days as possible fit without scrolling.
 * #1079 — tighten further: trim vertical padding and shave the editable input
 * height (warehouse-scoped, so the logistics portal is unaffected) so each row
 * is only minimally taller than its yellow inputs.
 * #1103 — push density further still: drop the row's vertical padding to 0 and
 * shave the input/select height so a plain row is barely taller than its yellow
 * input. NOTE: rows carrying multi-line Section-D actuals or an expanded
 * comment stay taller by necessity. */
/* #1238 — halve the row height so many more days fit on one screen without
 * scrolling: the row height floor is the yellow input/select, so shrink those
 * (td padding is already 0) and tighten the row line-height.
 * #1261 — #1238 went too far: 0.95rem is shorter than the control's own text
 * line box, so the "100 %" glyphs were clipped along the bottom while the row
 * stayed tall anyway. Philipp: restore the input height, shrink the *line*.
 * So the yellow controls go back to their pre-#1238 1.45rem.
 * #1261 (re-fix, browser-measured): the row was STILL ~48px because the height
 * floor was never the 23px control — it was the portal-wide cell rule
 * `.muag-portal table.table > :not(caption) > * > *` (see ~line 1047) pinning
 * EVERY portal cell to `padding: 12px 16px`. At (0,2,2) that silently beat the
 * old `.muag-cal__day td` (0,2,1), leaving a ~12px empty band above AND below
 * the yellow field in every day row. Win it back with a day-row-scoped
 * selector of higher specificity (0,3,4) and tight vertical padding, so a plain
 * day row is barely taller than its control (~27px, was ~48px) and far more
 * days fit on screen. The other portal tables (customer / logistics /
 * Section-D actual rows) keep the comfortable 12px — this is scoped to
 * `.muag-warehouse-cal` day rows only. */
.muag-portal table.muag-warehouse-cal tbody tr.muag-cal__day td {
	padding: 2px 6px;
	vertical-align: middle;
	line-height: 1;
}
.muag-portal .muag-warehouse-cal input.muag-inline,
.muag-portal .muag-warehouse-cal select.muag-inline {
	height: 1.45rem;
}
/* #1103 — trim the shared inner padding for warehouse inputs only, so the
 * yellow control itself is shorter without touching the logistics portal. */
.muag-portal .muag-warehouse-cal input.muag-inline,
.muag-portal .muag-warehouse-cal select.muag-inline,
.muag-portal .muag-warehouse-cal textarea.muag-inline {
	padding-top: 1px;
	padding-bottom: 1px;
}
.muag-portal .muag-cal__day td:first-child { white-space: nowrap; }
/* #1042 — let the column headers wrap onto two lines so each column can be
 * much narrower (matches the logistics portal). Beats the generic nowrap rule
 * on the warehouse thead by higher specificity. */
.muag-portal .muag-warehouse-cal thead tr.muag-colhead th {
	white-space: normal;
	max-width: 6rem;
	line-height: 1.12;
	vertical-align: bottom;
}
/* #1042 — freeze the first column (weekday + date) on horizontal scroll, like
 * the logistics portal. The cell keeps its row background so scrolled content
 * cannot bleed through, and a soft right shadow marks the frozen edge. */
.muag-portal .muag-warehouse-cal thead tr.muag-colhead th:first-child,
.muag-portal .muag-warehouse-cal tbody tr.muag-cal__day td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: 6px 0 6px -5px rgba(15, 23, 42, 0.2);
}
.muag-portal .muag-warehouse-cal tbody tr.muag-cal__day td:first-child { background: var(--muag-card); }
.muag-portal .muag-warehouse-cal thead tr.muag-colhead th:first-child { z-index: 3; background: var(--muag-line-soft); }
/* #938 — comment cell renders single-line, expanding only on focus so it
 * stops eating vertical space across every row.
 * #1103 — match the shorter input height so the comment cell no longer sets a
 * taller row height than its sibling coils/weight inputs (the empty strip above
 * and below the coils input the bug report flagged). */
.muag-portal .muag-warehouse-cal textarea.muag-inline {
	height: 0.95rem;   /* #1238 — match the shorter coils/weight inputs */
	min-height: 0.95rem;
	resize: none;
	overflow: hidden;
}
.muag-portal .muag-warehouse-cal textarea.muag-inline:focus {
	height: auto;
	min-height: 4rem;
	resize: vertical;
	overflow: auto;
}
/* #994 — LARGE vertical dividers between the 4 table sections.
 * Section boundaries: 1→2 at col 3 (Lager Korrektur),
 *                    2→3 at col 5 (Abholung Gewünscht),
 *                    3→4 at col 9 (Abholung geplant).
 * 3 px teal-strong so the four groups are unmissable. The sectionhead <th>
 * cells already carry border-left via .muag-cal__sectionhead (overridden here
 * to the same thick value for consistency). */
/* #1042 — section boundaries now also between section 4 and the new
 * "Lademenge" band at col 14, and the dividers are thinner (2 px) so they
 * read closer to the horizontal lines than the old 3 px rules. */
.muag-portal .muag-warehouse-cal tr > :nth-child(3),
.muag-portal .muag-warehouse-cal tr > :nth-child(5),
.muag-portal .muag-warehouse-cal tr > :nth-child(9),
.muag-portal .muag-warehouse-cal tr > :nth-child(14) {
	border-left: 2px solid var(--muag-accent-strong);
}
/* Section-head band boundaries: before sections 2…5. */
.muag-portal .muag-cal__sectionhead th:nth-child(2),
.muag-portal .muag-cal__sectionhead th:nth-child(3),
.muag-portal .muag-cal__sectionhead th:nth-child(4),
.muag-portal .muag-cal__sectionhead th:nth-child(5) {
	border-left: 2px solid var(--muag-accent-strong);
}

/* #895 forecast-sheet section bands (A=stock, B=inbound, C=outbound, D=TPSP)
   and the 2-week block separator. */
.muag-portal .muag-cal__sectionhead th {
	border-left: 2px solid var(--muag-line);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--muag-muted);
}
.muag-portal .muag-cal__sectionhead th:first-child { border-left: 0; }
.muag-portal .muag-cal__blockend td {
	height: 6px;
	padding: 0;
	background: var(--muag-line);
	border: 0;
}
.muag-portal .muag-cal__section-b { background: var(--muag-line-soft); }

/* --- Warehouse forecast calendar (#769) -------------------------------- */
.muag-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 var(--muag-content-inset);
	flex-wrap: wrap;
}
.muag-week { padding: 0; overflow: hidden; }
.muag-week__head {
	padding: 10px 16px;
	font-weight: 700;
	color: var(--muag-ink);
	background: var(--muag-line-soft);
	border-bottom: 1px solid var(--muag-line);
}
.muag-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.muag-cal-day {
	border-right: 1px solid var(--muag-line-soft);
	border-bottom: 1px solid var(--muag-line-soft);
	min-height: 96px;
	padding: 6px 8px;
}
.muag-cal-day:nth-child(7n) { border-right: 0; }
.muag-cal-day.is-today { background: var(--muag-accent-50); }
.muag-cal-day__date {
	font-size: .76rem;
	font-weight: 600;
	color: var(--muag-muted);
	margin-bottom: 6px;
}
.muag-cal-day__date span { color: var(--muag-ink); }
.muag-mv {
	border-radius: var(--muag-radius-sm);
	border: 1px solid var(--muag-line);
	padding: 5px 7px;
	margin-bottom: 6px;
	font-size: .8rem;
	background: var(--muag-card);
}
.muag-mv--in { border-left: 3px solid var(--muag-info); }
.muag-mv--out { border-left: 3px solid var(--muag-accent); }
.muag-mv__top { display: flex; justify-content: space-between; gap: 6px; }
.muag-mv__top a { font-weight: 600; text-decoration: none; }
.muag-mv__wt { color: var(--muag-muted); white-space: nowrap; }
.muag-mv__sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.muag-mv__btn {
	margin-left: auto;
	border: 1px solid var(--muag-accent-100);
	background: var(--muag-accent-50);
	color: var(--muag-accent-strong);
	border-radius: 5px;
	width: 22px; height: 20px;
	font-size: .75rem;
	cursor: pointer;
	line-height: 1;
}
.muag-mv__receipt { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.muag-mv__receipt input { font-size: .75rem; padding: 2px 6px; border: 1px solid var(--muag-line); border-radius: 5px; }
.muag-mv__receipt button {
	font-size: .75rem; padding: 3px 6px; border: 0; border-radius: 5px;
	background: var(--muag-accent); color: #fff; cursor: pointer;
}
@media (max-width: 760px) {
	.muag-cal { grid-template-columns: 1fr; }
	.muag-cal-day { border-right: 0; }
}
.muag-mv__btn--danger {
	border-color: var(--muag-danger-50);
	background: var(--muag-danger-50);
	color: var(--muag-danger);
}
/* New-arrival forecast form (#771) */
.muag-newmv { padding: 14px 16px; }
.muag-newmv__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 8px;
}
.muag-newmv__row select,
.muag-newmv__row input {
	padding: 6px 10px;
	border: 1px solid var(--muag-line);
	border-radius: var(--muag-radius-sm);
	font-size: .88rem;
}
.muag-newmv__row button {
	padding: 6px 14px;
	border: 0;
	border-radius: var(--muag-radius-sm);
	background: var(--muag-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* --- Per-shipment discussion thread (#772) ----------------------------- */
.muag-comments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.muag-comment {
	font-size: .82rem;
	background: var(--muag-surface);
	border: 1px solid var(--muag-line-soft);
	border-radius: var(--muag-radius-sm);
	padding: 5px 8px;
}
.muag-comment__meta { display: block; font-size: .72rem; color: var(--muag-muted); margin-bottom: 2px; }
.muag-mv__comments { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.muag-mv__comments textarea {
	font-size: .75rem; padding: 4px 6px;
	border: 1px solid var(--muag-line); border-radius: 5px;
}
.muag-mv__comments button {
	font-size: .75rem; padding: 3px 6px; border: 0; border-radius: 5px;
	background: var(--muag-accent); color: #fff; cursor: pointer;
}

/* --- "Ask MUAG" per-row mailto button (#768) --------------------------- */
.muag-ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--muag-radius-sm);
	border: 1px solid var(--muag-accent-100);
	background: var(--muag-accent-50);
	color: var(--muag-accent-strong);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1;
}
.muag-ask:hover {
	background: var(--muag-accent);
	color: #fff;
	text-decoration: none;
}

/* --- Stat cards --------------------------------------------------------- */
.muag-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 26px;
}
.muag-stat {
	background: var(--muag-card);
	border: 1px solid var(--muag-line);
	border-radius: var(--muag-radius);
	padding: 18px 20px;
	box-shadow: var(--muag-shadow-sm);
	position: relative;
	overflow: hidden;
}
.muag-stat::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(var(--muag-accent), var(--muag-accent-strong));
	opacity: .9;
}
.muag-stat__label {
	display: block;
	font-size: .74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muag-muted);
	margin-bottom: 8px;
}
.muag-stat__value {
	display: block;
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--muag-ink);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.muag-stat__value small {
	font-size: .9rem;
	font-weight: 600;
	color: var(--muag-faint);
}
.muag-stat__hint {
	display: block;
	margin-top: 6px;
	font-size: .8rem;
	color: var(--muag-faint);
}

/* --- Content cards ------------------------------------------------------ */
.muag-portal .card,
.muag-card {
	background: var(--muag-card);
	border: 1px solid var(--muag-line);
	border-radius: var(--muag-radius);
	box-shadow: var(--muag-shadow-sm);
	overflow: hidden;
	margin-bottom: 22px;
}
.muag-portal .card-header,
.muag-card__head {
	background: var(--muag-card);
	border-bottom: 1px solid var(--muag-line);
	padding: 15px 20px;
	font-weight: 600;
	color: var(--muag-ink);
}
.muag-card__head h3,
.muag-card__title {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--muag-ink);
	margin: 0;
}
.muag-section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--muag-ink);
	margin: 30px 0 14px;
	padding-left: var(--muag-content-inset);
	display: flex;
	align-items: center;
	gap: 9px;
}
.muag-section-title::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--muag-accent);
}

/* --- Tables ------------------------------------------------------------- */
.muag-portal .table-responsive { border-radius: var(--muag-radius); overflow-x: auto; }
.muag-portal table.table {
	margin: 0;
	color: var(--muag-text);
	font-size: .9rem;
	vertical-align: middle;
}
.muag-portal table.table > :not(caption) > * > * {
	border: 0;
	border-bottom: 1px solid var(--muag-line-soft);
	padding: 12px 16px;
	background: transparent;
	box-shadow: none;
}
.muag-portal table.table thead th {
	background: var(--muag-surface);
	border-bottom: 1px solid var(--muag-line) !important;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .045em;
	color: var(--muag-muted);
	white-space: nowrap;
}
.muag-portal table.table tbody tr { transition: background .12s ease; }
.muag-portal table.table tbody tr:hover > * { background: var(--muag-accent-50); }
.muag-portal table.table tbody tr:last-child > * { border-bottom: 0; }
/* Frappe's web bundle doesn't ship Bootstrap's text utilities, so the
 * `text-end` / `text-nowrap` classes used in the portal templates do nothing
 * on their own (numbers render left-aligned, ids/dates wrap). Define them
 * here, scoped to the portal tables. */
.muag-portal table.table td.text-end,
.muag-portal table.table th.text-end { font-variant-numeric: tabular-nums; text-align: right; }
.muag-portal table.table td.text-nowrap,
.muag-portal table.table th.text-nowrap { white-space: nowrap; }
.muag-portal table.table a {
	color: var(--muag-accent-strong);
	font-weight: 600;
	text-decoration: none;
}
.muag-portal table.table a:hover { text-decoration: underline; }

/* --- Badges (pill, soft-tint) ------------------------------------------ */
.muag-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .74rem;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px 5px 9px;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--muag-line-soft);
	color: var(--muag-text);
	border: 1px solid transparent;
}
.muag-badge::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: .85;
	flex: 0 0 auto;
}
.muag-badge.is-success { background: var(--muag-accent-50);  color: var(--muag-accent-strong); }
.muag-badge.is-info    { background: var(--muag-info-50);    color: var(--muag-info); }
.muag-badge.is-warning { background: var(--muag-warn-50);    color: var(--muag-warn); }
.muag-badge.is-danger  { background: var(--muag-danger-50);  color: var(--muag-danger); }
.muag-badge.is-neutral { background: var(--muag-line-soft);  color: var(--muag-muted); }
.muag-badge.is-dark    { background: var(--muag-ink);        color: #fff; }
.muag-badge.is-dark::before { background: var(--muag-accent); opacity: 1; }
/* #855 — unified shipment/SP status scheme: Scheduled = violet,
   Unloaded = orange (the two stages without an existing token). */
.muag-badge.is-scheduled { background: #ede9fe; color: #6d28d9; }
.muag-badge.is-unloaded  { background: #ffedd5; color: #c2410c; }

/* #890 — per-status pill badges (Option A). ONE colour scheme for every
   schedule-stage / shipment-status label across the MUAG Trading environment
   and all web portals. The green ramp (Confirmed → Unloaded) deepens as the
   shipment progresses; cancellations are red. Shared verbatim with the desk
   build in public/css/muag.css — keep the two in sync. */
.muag-badge[class*="muag-st-"] {
	padding: 3px 12px;
	font: 500 13px/1.5 system-ui, -apple-system, sans-serif;
	border: 1px solid;
}
.muag-badge[class*="muag-st-"]::before { display: none; }
.muag-st-auto-created   { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; }
.muag-st-forecasted     { background: #E2E8F0; color: #475569; border-color: #CBD5E1; }
.muag-st-confirmed      { background: #BBF7D0; color: #15803D; border-color: #86EFAC; }
.muag-st-in-planning    { background: #4ADE80; color: #14532D; border-color: #22C55E; }
.muag-st-scheduled      { background: #0E8A16; color: #FFFFFF; border-color: #0E8A16; }
.muag-st-in-transit     { background: #166534; color: #FFFFFF; border-color: #166534; }
.muag-st-unloaded       { background: #14532D; color: #FFFFFF; border-color: #14532D; }
.muag-st-cancelled-muag { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }
.muag-st-cancelled-tpsp { background: #FECACA; color: #991B1B; border-color: #FCA5A5; }
.muag-st-neutral        { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; }

/* --- Buttons ------------------------------------------------------------ */
.muag-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .86rem;
	font-weight: 600;
	line-height: 1;
	padding: 9px 15px;
	border-radius: var(--muag-radius-sm);
	border: 1px solid var(--muag-line);
	background: var(--muag-card);
	color: var(--muag-text);
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
	text-decoration: none;
}
.muag-btn:hover { background: var(--muag-surface); border-color: var(--muag-faint); color: var(--muag-ink); }
.muag-btn--primary {
	background: var(--muag-accent);
	border-color: var(--muag-accent);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(4, 102, 102, .8);
}
.muag-btn--primary:hover { background: var(--muag-accent-strong); border-color: var(--muag-accent-strong); color: #fff; }
.muag-btn--sm { padding: 6px 11px; font-size: .8rem; }

/* Map the Bootstrap buttons that survive in the templates onto the accent,
 * using Bootstrap-5 CSS variables so we never fight specificity. */
.muag-portal .btn { border-radius: var(--muag-radius-sm); font-weight: 600; }
.muag-portal .btn-primary,
.muag-portal .btn-success {
	--bs-btn-bg: var(--muag-accent);
	--bs-btn-border-color: var(--muag-accent);
	--bs-btn-hover-bg: var(--muag-accent-strong);
	--bs-btn-hover-border-color: var(--muag-accent-strong);
	--bs-btn-active-bg: var(--muag-accent-strong);
	--bs-btn-active-border-color: var(--muag-accent-strong);
	--bs-btn-disabled-bg: var(--muag-accent);
	--bs-btn-disabled-border-color: var(--muag-accent);
}
.muag-portal .btn-outline-secondary {
	--bs-btn-color: var(--muag-text);
	--bs-btn-border-color: var(--muag-line);
	--bs-btn-hover-bg: var(--muag-surface);
	--bs-btn-hover-color: var(--muag-ink);
	--bs-btn-hover-border-color: var(--muag-faint);
}
.muag-portal .btn-link { --bs-btn-color: var(--muag-muted); text-decoration: none; }

/* --- Form controls ------------------------------------------------------ */
.muag-portal .form-control,
.muag-portal .form-select {
	border-radius: var(--muag-radius-sm);
	border-color: var(--muag-line);
	color: var(--muag-text);
	font-size: .88rem;
}
.muag-portal .form-control:focus,
.muag-portal .form-select:focus {
	border-color: var(--muag-accent);
	box-shadow: 0 0 0 3px var(--muag-accent-100);
}
.muag-portal .form-control.is-valid {
	border-color: var(--muag-accent);
	background-image: none;
	box-shadow: 0 0 0 3px var(--muag-accent-100);
}
.muag-portal .form-label { color: var(--muag-muted); font-weight: 600; }

/*
 * Editable-input yellow convention (#814).
 *
 * Every portal input the user is expected to edit (text/number/date input,
 * select, checkbox, textarea) gets a soft-yellow background so portal users
 * can tell at a glance which cells are theirs to fill in. Mirrors the
 * long-standing FileMaker convention. Read-only / display cells stay
 * neutral — do NOT add this class to anything that's just being rendered.
 *
 * Scoped to .muag-portal so it never bleeds into the Frappe desk. The
 * existing .muag-sap-ref / .muag-fx-rate classes in the customer portal
 * are aliased to the same rule so the first pass already paints them.
 */
.muag-portal .muag-portal-editable,
.muag-portal input.muag-portal-editable,
.muag-portal select.muag-portal-editable,
.muag-portal textarea.muag-portal-editable,
.muag-portal .muag-sap-ref,
.muag-portal .muag-fx-rate {
	background-color: var(--muag-warn-50);
}
.muag-portal .muag-portal-editable:focus,
.muag-portal .muag-sap-ref:focus,
.muag-portal .muag-fx-rate:focus {
	background-color: var(--muag-warn-50);
}

/* #949 — SAP Reference holds up to 8 digits; widen the input so it never
 * truncates, without adding spare whitespace. */
.muag-portal .muag-sap-ref {
	min-width: 7rem;
}

/* #950/#1043 — Invoice number is a read-only display cell wide enough for a
 * 13-digit number without truncation. */
.muag-portal .muag-cust-inv {
	display: inline-block;
	min-width: 9rem;
	white-space: nowrap;
}

/* #1043 — customer table: a section divider between the identification columns
 * and the financial columns, wrapping column headers so each column can shrink,
 * and tighter rows to fit more data (uniform with the other two portals). */
.muag-portal .muag-cust-table .muag-cust-divider {
	border-left: 2px solid var(--muag-accent-strong);
}
.muag-portal .muag-cust-table thead.muag-colhead th {
	white-space: normal;
	max-width: 7rem;
	line-height: 1.12;
	vertical-align: bottom;
}
.muag-portal .muag-cust-table tbody td {
	padding-top: .2rem;
	padding-bottom: .2rem;
	vertical-align: middle;
}
/* #1083 — tense, even column spacing. Bootstrap's .table is width:100%, which
 * stretches columns to fill the container and produces the lopsided gaps
 * (large between Pick-up date / Week, tiny between Week / Upcycling ID). Let the
 * table shrink to its content so each column hugs its data, and use a single
 * small horizontal padding on every cell so the inter-column distance is
 * uniform. */
.muag-portal .muag-cust-table {
	width: auto;
	table-layout: auto;
}
.muag-portal .muag-cust-table th,
.muag-portal .muag-cust-table td {
	padding-left: .4rem;
	padding-right: .4rem;
}

/* #951 — monthly-aggregate card header: title line + summary/invoicing row. */
.muag-portal .muag-agg-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.muag-portal .muag-agg-head__invoice {
	white-space: nowrap;
}

/* Inline-editable table cells (#806) — kept compact so the row height
 * doesn't grow when an input replaces the formatted text. */
.muag-portal .muag-inline {
	display: inline-block;
	min-width: 0;
	width: 100%;
	font-size: .82rem;
	padding: 2px 6px;
}
.muag-portal .muag-inline.is-saving { opacity: .6; }

/* #939/#941 — coil/tonne inputs track whole units; drop the native number
 * spinner so the value reads cleanly with its unit label beside it. */
.muag-portal .muag-no-spin {
	-moz-appearance: textfield;
	appearance: textfield;
}
.muag-portal .muag-no-spin::-webkit-outer-spin-button,
.muag-portal .muag-no-spin::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Small grey unit label rendered immediately after an inline input. */
.muag-portal .muag-unit {
	font-size: .78rem;
	margin-left: 2px;
}

/* --- Alerts (banners) & preview bar ------------------------------------ */
.muag-portal .alert {
	border-radius: var(--muag-radius-md);
	border: 1px solid var(--muag-line);
	font-size: .9rem;
}
.muag-portal .alert-warning { background: var(--muag-warn-50);   border-color: #fde68a; color: #92400e; }
.muag-portal .alert-info    { background: var(--muag-info-50);   border-color: #bae6fd; color: #075985; }
.muag-portal .alert-secondary {
	background: var(--muag-card);
	border-color: var(--muag-line);
	color: var(--muag-text);
	box-shadow: var(--muag-shadow-sm);
	/* Bootstrap's `gap-2` utility doesn't apply here, so the badge, label and
	 * dropdown render touching — set the flex layout + gap explicitly. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/* `.badge.bg-dark` only sets a dark background; the text colour then inherits
 * the alert's dark `--muag-text`, giving unreadable dark-on-dark. Force white. */
.muag-portal .alert-secondary .badge.bg-dark {
	background: var(--muag-ink) !important;
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
	padding: 5px 10px;
}
.muag-portal .alert-secondary label { margin-bottom: 0; }

.muag-empty {
	background: var(--muag-card);
	border: 1px dashed var(--muag-line);
	border-radius: var(--muag-radius);
	padding: 28px;
	text-align: center;
	color: var(--muag-muted);
	font-size: .92rem;
}

.muag-portal .text-muted { color: var(--muag-muted) !important; }

/* --- Bootstrap-5 utility shims -----------------------------------------
 * Frappe's web/portal pages ship Bootstrap 4, but these templates use
 * Bootstrap-5 utility class names. The BS5-only ones silently no-op, so
 * flex gaps collapse (badge touches text) and start-margins disappear.
 * Re-declare the ones we use, scoped to the portal. (text-end / text-nowrap
 * are shimmed in the Tables section above.) */
.muag-portal .gap-2 { gap: .5rem; }
.muag-portal .gap-3 { gap: 1rem; }
.muag-portal .ms-1 { margin-left: .25rem; }
.muag-portal .ms-2 { margin-left: .5rem; }
.muag-foot-note {
	color: var(--muag-faint);
	font-size: .83rem;
	margin-top: 18px;
	padding-left: var(--muag-content-inset);
}

/* --- Portal responsive -------------------------------------------------- */
@media (max-width: 575.98px) {
	.muag-pagehead__title { font-size: 1.4rem; }
	.muag-topbar { padding: 12px 14px; }
}

/* ===========================================================================
 * LOGIN  —  split-screen
 * The .muag-login__grid / .muag-login__brand wrapper is injected by portal.js;
 * styling degrades to a clean centred card if JS is unavailable.
 * ======================================================================== */
body:has(#page-login) { background: var(--muag-surface); }
body:has(#page-login) .web-footer,
body:has(#page-login) .footer,
body:has(#page-login) footer.footer,
body:has(#page-login) .navbar { display: none !important; }

#page-login .page-content-wrapper,
#page-login .page-breadcrumbs,
#page-login .page-header-wrapper { padding: 0; margin: 0; }
#page-login .page-breadcrumbs { display: none; }
#page-login main.container {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
#page-login .page_content { margin: 0; }
#page-login .page-footer { display: none; }

/* The split grid */
#page-login .muag-login__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: 100vh;
	font-family: var(--muag-font);
}

/* Brand panel (left) */
.muag-login__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 56px clamp(40px, 5vw, 84px);
	color: #e8f3f3;
	background:
		radial-gradient(120% 120% at 85% 10%, rgba(13, 148, 148, .55) 0%, rgba(2, 59, 59, 0) 55%),
		radial-gradient(90% 90% at 0% 100%, rgba(4, 102, 102, .55) 0%, rgba(2, 59, 59, 0) 50%),
		linear-gradient(155deg, #045555 0%, var(--muag-accent-deep) 60%, #022e2e 100%);
	overflow: hidden;
}
.muag-login__brand::after {
	/* faint blueprint grid texture */
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 38px 38px;
	mask-image: radial-gradient(120% 80% at 70% 30%, #000 30%, transparent 80%);
	pointer-events: none;
}
.muag-login__brandtop { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.muag-login__brandtop .muag-wordmark { color: #fff; }
.muag-login__brandtop .muag-mark { box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .5); }
.muag-login__pitch { position: relative; z-index: 1; max-width: 30ch; }
.muag-login__pitch h1 {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 16px;
}
.muag-login__pitch p {
	font-size: 1.02rem;
	line-height: 1.55;
	color: rgba(232, 243, 243, .82);
	margin: 0 0 28px;
}
.muag-login__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.muag-login__features li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: .96rem;
	color: rgba(232, 243, 243, .92);
}
.muag-login__features li::before {
	content: "";
	width: 22px; height: 22px;
	flex: 0 0 auto;
	border-radius: 7px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.muag-login__foot {
	position: relative;
	z-index: 1;
	font-size: .82rem;
	color: rgba(232, 243, 243, .6);
}

/* Form panel (right) */
.muag-login__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--muag-card);
}
/* Each Frappe auth view (login / signup / forgot / email-link) */
#page-login section[class^="for-"],
#page-login section[class*=" for-"] {
	width: 100%;
	max-width: 380px;
}
#page-login .page-card {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 380px;
}
#page-login .page-card-head {
	text-align: left;
	margin-bottom: 26px;
}
/* The MUAG identity lives in the left brand panel, so drop Frappe's stock app
 * logo on the form side once the split-screen is built. If JS doesn't run the
 * layout (fallback), the logo is kept so the page still has a mark. */
#page-login .muag-login__grid .page-card-head .app-logo { display: none; }
#page-login .page-card-head .app-logo {
	height: 34px;
	margin-bottom: 18px;
}
#page-login .page-card-head h4 {
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--muag-ink);
	letter-spacing: -.01em;
	margin: 0;
}
#page-login .muag-login__hint {
	margin: 8px 0 0;
	color: var(--muag-muted);
	font-size: .92rem;
}
/* Align the auth form with the heading above it (#764). Frappe's login form
 * and its actions ship with horizontal padding/margins that push the inputs
 * inward relative to .page-card-head; zero them so heading + inputs + buttons
 * all share the card's left edge. */
#page-login .page-card-head,
#page-login .page-card form,
#page-login .page-card .login-form,
#page-login .page-card .page-card-actions,
#page-login .page-card .forgot-password-message,
#page-login .page-card .sign-up-message {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
#page-login .form-group { margin-bottom: 16px; }
#page-login .form-control {
	height: 46px;
	border-radius: 10px;
	border: 1px solid var(--muag-line);
	background: var(--muag-surface);
	color: var(--muag-ink);
	padding-left: 40px;
	font-size: .95rem;
}
#page-login .form-control:focus {
	border-color: var(--muag-accent);
	background: #fff;
	box-shadow: 0 0 0 3px var(--muag-accent-100);
}
/* Vertically center the icon on the 46px input. Frappe centers via
 * top:50% + translateY(-50%); we must keep BOTH — overriding only `top`
 * (e.g. top:15px) leaves the inherited translateY(-50%) in place and the
 * icon ends up half its height too high. */
#page-login .field-icon {
	top: 50%;
	transform: translateY(-50%);
	left: 14px;
	color: var(--muag-faint);
}
#page-login .toggle-password {
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: .82rem;
	font-weight: 600;
	color: var(--muag-accent-strong);
}
#page-login .forgot-password-message { text-align: right; margin: -4px 0 0; }
#page-login .forgot-password-message a,
#page-login .sign-up-message a {
	color: var(--muag-accent-strong);
	font-weight: 600;
	text-decoration: none;
}
#page-login .forgot-password-message a:hover,
#page-login .sign-up-message a:hover { text-decoration: underline; }

#page-login .btn-login,
#page-login .btn-forgot {
	height: 46px;
	border-radius: 10px;
	font-weight: 700;
	font-size: .95rem;
	background: var(--muag-accent);
	border-color: var(--muag-accent);
	box-shadow: 0 12px 24px -12px rgba(4, 102, 102, .85);
}
#page-login .btn-login:hover,
#page-login .btn-forgot:hover {
	background: var(--muag-accent-strong);
	border-color: var(--muag-accent-strong);
}
#page-login .page-card-actions { margin-top: 22px; }
/* Secondary action (email-link / social). Frappe ships these as .btn-default,
 * so they keep dark text — give them an outline style instead of a second
 * filled-green button, which both fixes the contrast and clears the hierarchy. */
#page-login .btn-login-option {
	height: 44px;
	border-radius: 10px;
	border: 1px solid var(--muag-line);
	background: var(--muag-card);
	color: var(--muag-text);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#page-login .btn-login-option:hover {
	background: var(--muag-surface);
	border-color: var(--muag-faint);
	color: var(--muag-ink);
}
#page-login .login-divider { color: var(--muag-faint); font-size: .82rem; margin: 18px 0; }
#page-login .sign-up-message { margin-top: 22px; color: var(--muag-muted); font-size: .9rem; }

/* Collapse to a single centred column on tablets / phones */
@media (max-width: 860px) {
	#page-login .muag-login__grid { grid-template-columns: 1fr; }
	.muag-login__brand {
		padding: 36px 28px;
		gap: 22px;
		min-height: auto;
	}
	.muag-login__pitch { max-width: none; }
	.muag-login__pitch h1 { font-size: 1.6rem; margin-bottom: 10px; }
	.muag-login__pitch p { margin-bottom: 16px; }
	.muag-login__features { grid-template-columns: 1fr 1fr; gap: 8px; }
	.muag-login__features li { font-size: .85rem; }
	.muag-login__foot { display: none; }
	.muag-login__panel { padding: 36px 20px 64px; }
}
@media (max-width: 480px) {
	.muag-login__features { grid-template-columns: 1fr; }
}

/* #874 — TPSP quotation preview modal (large, centred, not full-screen). */
.muag-quote-modal { position: fixed; inset: 0; z-index: 1050; }
.muag-quote-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.muag-quote-modal__dialog {
	position: relative;
	width: min(900px, 90vw);
	margin: 4vh auto 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	overflow: hidden;
}
.muag-quote-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-bottom: 1px solid var(--muag-line, #e5e7eb);
}
.muag-quote-modal__dialog iframe { width: 100%; height: 72vh; border: 0; display: block; }
/* #1040 — footer holding the bottom-right "Quotation not correct" action. */
.muag-quote-modal__foot {
	display: flex;
	justify-content: flex-end;
	padding: 8px 14px;
	border-top: 1px solid var(--muag-line, #e5e7eb);
}

/* #989/#993 — warehouse document upload buttons (weight slip / shipping doc).
 * Compact yellow label-as-button (muag-portal-editable) + a small preview
 * button side-by-side in each Section D cell of the warehouse calendar.
 * The hidden file input is triggered by clicking the label. */
.muag-portal .muag-whdoc-cell {
	white-space: nowrap;
	vertical-align: top;
}
.muag-portal .muag-whdoc-upload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--muag-radius-sm);
	border: 1px solid #fde68a;
	cursor: pointer;
	font-size: .9rem;
	line-height: 1;
	vertical-align: middle;
	/* yellow background from .muag-portal-editable; explicit fallback here
	 * in case the class specificity ever changes. */
	background-color: var(--muag-warn-50);
}
.muag-portal .muag-whdoc-upload:hover {
	background-color: #fde68a;
	border-color: var(--muag-warn);
}
.muag-portal .muag-whdoc-preview {
	padding: 2px 6px;
	font-size: .78rem;
	vertical-align: middle;
	margin-right: 2px;
}

/* #908 — ownership badge on the portal (squared, non-finality tint): names
 * who is responsible; "You are in charge" once MUAG confirms the handover. */
.muag-portal .muag-owner-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem .5rem;
	border-radius: 6px;
	font-size: .72rem;
	font-weight: 600;
	border: 1px solid transparent;
}
.muag-portal .muag-owner-badge--muag { background: #E7F0F0; color: #045757; border-color: #BCD9D9; }
.muag-portal .muag-owner-badge--tpsp { background: #EEF0F1; color: #44505A; border-color: #D2D8DC; }