/* Sourcing — full screen restyle (/qmob/sourcing): body header, filter bar,
   buttons and the kanban board. Traits mirror the Comex kanban board 1:1
   where Comex actually has something to mirror
   (code/public/css/comex/controle.css:47-102 — .cx-board/.cx-col/.cx-card:
   264px columns, 12px column radius, 10px card radius, same paddings/gaps,
   same shadow/hover/focus treatment, chip-style meta, mono accents) and
   follows the intranet's own body-header doctrine everywhere else
   (PADRAO_VISUAL.md, code/public/css/style.css:2074-2168 — .painel-title,
   .painel-subtitle, .btn-primary following the active BU).

   Two things from Comex have NOTHING to copy, verified in the source:
     - Comex's board has no filter bar at all (boardHTML() in
       comex-controle.js only renders header + columns).
     - Comex's per-column color (--pc) is set in JS (PHASES[].cor) but never
       applied to the DOM — every column renders the same BU accent. This
       sheet gives Sourcing columns real color instead (via --kanban-accent).

   NOT part of the qmob Tailwind bundle, and deliberately so: this repo has
   no build tool for it (package.json only ships playwright), and even the
   page-scoped partial (partials/pages/sourcing-list.css) is NOT safely
   page-scoped — it's baked into the single compiled qmob.css on the next
   rebuild, at which point it stops being "just this screen". So every rule
   here lives in its own standalone file, loaded after the bundle. Rules that
   actually contend with a bundle rule for the same element (header, filters,
   buttons) chain enough classes to match or exceed the bundle's
   `html.qmob-scope :is(main.content,.topbar-actions)` prefix (specificity
   (0,2,2)) and win by load order (code/template/main.html) — never by
   !important. The kanban board rules don't need that: nothing in the bundle
   targets `.sourcing-kanban__*`, and the only unscoped bundle rule that
   reaches them is Tailwind's own `*{border:0 solid ...}` reset (specificity
   (0,0,0)), already beaten by a plain single-class selector. When a Tailwind
   toolchain exists again, this file's content is meant to migrate into
   partials/pages/sourcing-list.css and this file to be deleted.

   Namespace is BEM (sourcing-kanban__*) for the board, plain descendant
   selectors under .page-qmob-sourcing for the header/filters/buttons —
   matching the module's own convention (sourcing-stepper__*,
   multi-select__*), not a kebab prefix like Comex's cx-* (that prefix only
   exists because the source used ctrl-* and collided with Controladoria's
   ctrl-*, code/controller/comex/CONTEXT.md — a descriptive class avoids the
   whole class of problem instead of picking a new short prefix that could
   collide again later). */

/* ============================================================
   HEADER — .painel-title/.painel-subtitle adopted for this screen only
   (code/controller/qmob/CONTEXT.md, "Single header" exception, 2026-09-10).
   ============================================================ */

/* qmob's Tailwind preflight resets heading font-size/font-weight to inherit
   (qmob.css, generated from tailwindcss/base, specificity (0,2,2)), which
   beats the intranet's own .painel-title rule (style.css:2075, specificity
   (0,1,0)) because the qmob bundle loads after style.css in main.html.
   Without this override the H1 renders as a plain, body-sized line. */
html.qmob-scope main.content .page-qmob-sourcing .painel-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.8px;
}

.page-qmob-sourcing .sourcingTop {
	margin-bottom: 4px;
}

.page-qmob-sourcing .sourcingTop__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/* ============================================================
   FILTER BAR — a work surface between the tabs and the board/table,
   instead of a bare border-top; same radius/border language as the board.
   ============================================================ */

html.qmob-scope main.content .sourcingContent .sourcingTabsWrap {
	padding: 8px 12px 0;
}

html.qmob-scope main.content .sourcingContent .sourcingTabsActions {
	margin: 0 -12px;
	padding: 10px 12px 12px;
	gap: 10px 12px;
	background: var(--bg);
	border-top: 1px solid var(--card-border);
	border-bottom: 1px solid var(--card-border);
}

html.qmob-scope main.content .sourcingContent .sourcingTabsActions--stacked .filters {
	gap: 10px 12px;
	padding: 0;
	border: 0;
	background: transparent;
	min-width: 0;
}

html.qmob-scope main.content .sourcingContent .filters label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
	margin-bottom: 5px;
}

html.qmob-scope main.content .sourcingContent .filters input[type="text"],
html.qmob-scope main.content .sourcingContent .filters input[type="number"],
html.qmob-scope main.content .sourcingContent .filters input[type="search"],
html.qmob-scope main.content .sourcingContent .filters select {
	height: 32px;
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid var(--card-border);
	border-radius: 6px;
	background: var(--column-bg);
}

html.qmob-scope main.content .sourcingContent .filters input:focus,
html.qmob-scope main.content .sourcingContent .filters select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

html.qmob-scope main.content .sourcingContent .multi-select-horizontal .multi-select__control {
	border: 1px solid var(--card-border);
	border-radius: 6px;
	background: var(--column-bg);
	padding: 0 8px;
}

html.qmob-scope main.content .sourcingContent .multi-select-horizontal.is-open .multi-select__control {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

html.qmob-scope main.content .sourcingContent .multi-select-horizontal .multi-select__chip {
	border-radius: 6px;
	background: var(--card-bg);
	border-color: var(--card-border);
}

/* ============================================================
   FILTER DROPDOWN — native <details>/<summary> collapsing the non-standard
   filter fields (2026-09-10 evening round, owner decision: <details> over a
   JS toggle — same precedent/motivation as comex/controle.css:134-151 and
   template/agentes/agente.html:192-207, "avoid vertical growth", no script).
   Server decides the initial open/closed state (order.Query.DrawerFilterCount
   → FilterBar.ActiveFilters / byproduct.pageData.ActiveFilters) because the
   filter form sits outside the HTMX swap target and is never re-rendered by
   a filter request — only a full page render can know whether to open it.
   ============================================================ */

/* Closed: sits in the standard row's leftover tracks (Ref+Client+Status use 9 of 12
   on Kanban/By order, 7 of 12 on By product — span 3 fits both) so the collapsed bar
   is a single line. Open: needs the full 12 tracks so .sourcing-filters__drawer's own
   nested grid has real width for its fields — grid auto-placement then pushes it to a
   new row on its own, same as before. */
html.qmob-scope main.content .sourcingContent .sourcing-filters {
	grid-column: span 3;
	align-self: end; /* the standard fields' visible input sits at the row's bottom (label above it) — match that instead of top-aligning with the label row */
}

html.qmob-scope main.content .sourcingContent .sourcing-filters[open] {
	grid-column: 1 / -1;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	padding: 4px 6px;
	margin-left: -6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	border-radius: 6px;
	list-style: none;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__summary::-webkit-details-marker {
	display: none;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__summary:hover {
	color: var(--accent-dark);
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__caret {
	transition: transform 0.2s ease;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters[open] .sourcing-filters__caret {
	transform: rotate(180deg);
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--accent-dark);
	border-radius: 20px;
}

html.qmob-scope main.content .sourcingContent .sourcing-filters__drawer {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 10px 12px; /* matches .filters' own gap (above) so col--wN tracks line up with the standard row */
	margin-top: 8px;
}

@media (max-width: 1023px) {
	html.qmob-scope main.content .sourcingContent .sourcing-filters {
		flex: 1 0 100%;
	}

	html.qmob-scope main.content .sourcingContent .sourcing-filters__drawer {
		display: flex;
		flex-wrap: wrap;
	}
}

/* ============================================================
   BUTTONS — geometry only. Color (the green/purple → --accent-dark remap)
   and :focus-visible moved to qmob-buttons.css (2026-09-14, repo-wide button
   unification) — that file covers every qmob área including the ones this
   block never reached (modals, row actions, other áreas entirely). This
   block keeps only what's genuinely specific to Sourcing's header/filter
   bar: the taller 32px touch target and 6px corner (Sourcing's own choice,
   not a native value — buttons.css's/qmob-buttons.css's shared radius stays
   3px everywhere else on purpose, so this screen's buttons are intentionally
   a bit rounder than the module average, not a drift to fix).
   ============================================================ */

html.qmob-scope main.content .page-qmob-sourcing .sourcingTop .btn,
html.qmob-scope main.content .sourcingContent .sourcingTabsActions .btn {
	height: 32px;
	padding: 0 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
}

html.qmob-scope main.content .page-qmob-sourcing .sourcingTop .btn.il,
html.qmob-scope main.content .sourcingContent .sourcingTabsActions .btn.il {
	padding-left: 10px;
}

/* ============================================================
   VIEW SWITCHER — Kanban/By order/By product share one landing card
   (owner decision 2026-09-10, 2nd round); this segmented control lets
   the user swap between them from inside any of the three screens.
   ============================================================ */

/* border needs the scope prefix — same Tailwind preflight trap as .sourcing-kanban__*
   below (html.qmob-scope :is(main.content,.topbar-actions) *{border:0 solid #e5e7eb},
   specificity (0,2,2), beats a plain single class). Found 2026-09-12. */
html.qmob-scope :is(main.content, .topbar-actions) .sourcingViewSwitcher {
	display: flex;
	gap: 4px;
	background: var(--column-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 3px;
	flex-shrink: 0;
}

.sourcingViewSwitcher__item {
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* html.qmob-scope main.content prefix: the bundle's preflight sets a{color:inherit}
   at (0,2,3), beating a plain .sourcingViewSwitcher__item rule (0,1,0) — same
   trap documented at the top of this file for the header/filters/buttons. */
html.qmob-scope main.content .sourcingViewSwitcher__item {
	color: var(--text-secondary);
}

html.qmob-scope main.content .sourcingViewSwitcher__item:hover {
	color: var(--text-primary);
}

html.qmob-scope main.content .sourcingViewSwitcher__item.isActive {
	background: var(--card-bg);
	color: var(--text-primary);
	box-shadow: var(--shadow);
}

.sourcingViewSwitcher__item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ============================================================
   KANBAN BOARD (/qmob/sourcing/kanban)
   ============================================================ */

/* the board stays inside .box (owner decision) — paint its own area instead
   of leaving white-on-white against the column/card backgrounds */
html.qmob-scope main.content .sourcingContent:has(#sourcingKanbanRoot) #sourcingTableWrap {
	background: var(--bg);
	border-radius: 0 0 12px 12px;
}

.sourcing-kanban {
	padding: 10px;
}

.sourcing-kanban__board {
	display: flex;
	gap: 12px;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.sourcing-kanban__board::-webkit-scrollbar {
	height: 9px;
}

.sourcing-kanban__board::-webkit-scrollbar-thumb {
	background: var(--card-border);
	border-radius: 6px;
}

/* border/border-* on .sourcing-kanban__col, __col-head, __col-count, __card,
   __card:hover and __chip need the html.qmob-scope :is(main.content,.topbar-actions)
   prefix: the compiled bundle's Tailwind preflight resets `border` on the SAME scoped
   universal selector (html.qmob-scope :is(main.content,.topbar-actions) *{border:0 solid
   #e5e7eb}, specificity (0,2,2)) — a plain single class (0,1,0) always loses that
   property regardless of source order, so every one of these borders was silently 0px
   (background-color contrast alone made the column/card edges look intact — found only
   by diffing computed style against the real comex modal, 2026-09-12). Properties this
   reset doesn't touch (background, border-radius, box-shadow, layout) don't need it. */
html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__col {
	--kanban-accent: var(--accent-dark);
	flex: 0 0 264px;
	width: 264px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 640px; /* classic/medium kanban column (~6 cards before its own scrollbar) — fixed, not viewport-relative, so it doesn't grow into "fills the whole page" nor shrink into "boxed to one screen" */
	background: var(--column-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}

.sourcing-kanban__col--success {
	--kanban-accent: var(--success);
}

.sourcing-kanban__col--danger {
	--kanban-accent: var(--danger);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--card-border);
	border-top: 3px solid var(--kanban-accent);
	border-radius: 12px 12px 0 0;
	background: var(--card-bg);
}

.sourcing-kanban__col-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kanban-accent);
	flex-shrink: 0;
}

.sourcing-kanban__col-name {
	flex: 1;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__col-count {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary);
	background: var(--column-bg);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: 1px 8px;
}

.sourcing-kanban__col-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
}

.sourcing-kanban__col-body::-webkit-scrollbar {
	width: 8px;
}

.sourcing-kanban__col-body::-webkit-scrollbar-thumb {
	background: var(--card-border);
	border-radius: 6px;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__card {
	display: block;
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-left: 3px solid var(--kanban-accent);
	border-radius: 10px;
	box-shadow: var(--shadow);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__card:hover {
	box-shadow: var(--shadow-hover);
	border-color: var(--accent);
}

.sourcing-kanban__card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.sourcing-kanban__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px 6px;
}

.sourcing-kanban__card-ref {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
}

.sourcing-kanban__card-progress {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--kanban-accent);
}

.sourcing-kanban__card-client {
	padding: 0 10px;
	font-weight: 600;
	font-size: 13px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sourcing-kanban__card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	padding: 6px 10px 9px;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__chip {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--text-secondary);
	background: var(--column-bg);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 2px 6px;
	white-space: nowrap;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-kanban__col-more {
	display: block;
	flex-shrink: 0;
	padding: 9px 12px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
	text-decoration: none;
	background: var(--card-bg);
	border-top: 1px solid var(--card-border);
	border-radius: 0 0 12px 12px;
	transition: color 0.15s ease, background 0.15s ease;
}

.sourcing-kanban__col-more:hover {
	background: var(--column-bg);
	color: var(--kanban-accent);
}

.sourcing-kanban__col-more:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
	color: var(--kanban-accent);
}

.sourcing-kanban__empty {
	padding: 16px 10px;
	text-align: center;
	font-size: 12px;
	color: var(--text-secondary);
}

@media (max-width: 720px) {
	.sourcing-kanban__col {
		flex-basis: 240px;
		width: 240px;
	}
}

/* ============================================================
   CARD QUICK-VIEW MODAL (2026-09-12) — opened from a kanban card, reusing
   .catalog-modal (partials/pages/sourcing-list.css) as the shell; these rules
   only size the dialog and style the split (email placeholder | summary),
   mirroring the comex card modal's layout (code/public/css/comex/controle.css
   .cx-modal-split, 340px + 1fr) without its real email integration — the left
   column is a placeholder on purpose (owner decision 2026-09-12: porting the
   comex mailagent integration is a separate project, not part of this modal).
   ============================================================ */

/* .catalog-modal__dialog/__content are ALSO defined scoped in the compiled bundle
   (html.qmob-scope :is(main.content,.topbar-actions) .catalog-modal__dialog{max-width:700px},
   specificity (0,3,2) — qmob.css, from partials/pages/sourcing-list.css) — a plain
   .sourcing-card-modal__dialog{...} (0,1,0) loses to that regardless of load order, so
   the override silently never applied (dialog stuck at 700px, ruler squeezed into
   letter-stacked labels, horizontal scrollbar). Chaining the same scope prefix matches
   that specificity and wins by source order (sourcing-screen.css loads after qmob.css) —
   same rule the file's own header comment already documents for the header/filters/buttons,
   just missed here because .sourcing-kanban__* (unscoped-safe) was the precedent at hand. */
html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__dialog {
	/* 1280px verified against the real .cx-modal-dialog.is-wide computed style
	   (confirmed by the user pasting the actual element + computed CSS) —
	   an earlier pass guessed ~1600px by measuring a screenshot, which was
	   wrong (browser zoom/DPR skews pixel measurements; the CSS source and
	   the live computed style are the ground truth, not a picture of it). */
	max-width: 1280px;
	/* .catalog-modal__dialog's own background is --column-bg (white); the real
	   comex dialog is --card-bg (cream, rgb(250,250,245)) — confirmed by computed
	   style diff, 2026-09-12. */
	background-color: var(--card-bg);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__content {
	padding: 0;
}

.sourcing-card-modal__split {
	display: grid;
	/* 340px matches the real .cx-mail width (controle.css). */
	grid-template-columns: 340px 1fr;
	min-height: 460px;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__mail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 16px;
	background: var(--column-bg);
	border-right: 1px solid var(--card-border);
}

.sourcing-card-modal__mail-head {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
}

.sourcing-card-modal__mail-empty {
	margin: auto 0;
	text-align: center;
	font-size: 12px;
	color: var(--inactive-text);
}

.sourcing-card-modal__main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 24px 28px;
}

.sourcing-card-modal__code {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
}

/* h3 needs the scope prefix too: qmob's Tailwind base resets h1-h6
   font-size/font-weight to inherit at html.qmob-scope :is(main.content,
   .topbar-actions) h1,h2,...,h6 (specificity (0,2,2)) — a plain single-class
   selector (0,1,0) loses that fight regardless of load order. */
html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__client {
	margin: 0;
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}

/* Ruler color/font, scoped to just this modal (not update.html's stepper, which
   deliberately stays on theme tokens per kanban/CONTEXT.md) — matches the real
   comex .cx-ruler exactly: pending is white (blends into the cream dialog, not a
   gray box), current is the fixed purple #6c4cd6, completed is the fixed green
   #dcf1e5/#2f9e6a, labels are 8.5px monospace, all confirmed by computed-style
   diff against the live comex modal, 2026-09-12.
   These need the full html.qmob-scope :is(main.content,.topbar-actions) prefix
   too: .sourcing-ruler__step/.sourcing-ruler__label are Tailwind SOURCE classes
   (partials/table.css), and the compiled qmob.css bundle already carries that
   exact prefix on them (e.g. `html.qmob-scope :is(main.content,.topbar-actions)
   .sourcing-ruler__step.is-pending{...}`, specificity (0,4,2)) — a descendant
   selector without it, however many classes, was still losing (0,3,0 at best). */
html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__main .sourcing-ruler__label {
	font-family: var(--font-mono);
	font-size: 8.5px;
	letter-spacing: 0.02em;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__main .sourcing-ruler__step.is-pending {
	background: var(--column-bg);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__main .sourcing-ruler__step.is-completed {
	background: #dcf1e5;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__main .sourcing-ruler__step.is-completed .sourcing-ruler__label {
	color: #2f9e6a;
	font-weight: 600;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__main .sourcing-ruler__step.is-current {
	background: #6c4cd6;
}

/* General-info fields, styled as read-only input boxes (label above, boxed
   value below) — visually mirrors the comex modal's .cx-gfields, but every
   value here is plain text (no <select>/<input>): editing still happens only
   on the full /update screen. */
.sourcing-card-modal__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}

.sourcing-card-modal__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sourcing-card-modal__field span {
	font-family: var(--font-mono);
	font-size: 8.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__field b {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 10px 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Body columns — current stage (with its totals) | dates, mirroring the
   comex modal's .cx-modal-cols (phase accordion | dates aside). The other
   sourcing stages aren't listed here: the ruler above already shows their
   order/state, and this modal is read-only, so an accordion row with nothing
   to expand would just be decoration pretending to be interactive. */
.sourcing-card-modal__cols {
	display: grid;
	/* 264px matches the real .cx-modal-dates aside width (controle.css). */
	grid-template-columns: 1fr 264px;
	gap: 18px;
	align-items: start;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__stage {
	border: 1px solid var(--card-border);
	border-radius: 8px;
	overflow: hidden;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__stage-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--card-bg);
	border-bottom: 1px solid var(--card-border);
}

.sourcing-card-modal__stage-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sidebar-bg);
	flex-shrink: 0;
}

.sourcing-card-modal__stage-name {
	flex: 1;
	font-weight: 700;
	font-size: 13px;
	color: var(--text-primary);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__stage-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary);
	background: var(--column-bg);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: 1px 8px;
}

.sourcing-card-modal__stage-body {
	display: flex;
	gap: 20px;
	padding: 12px 14px;
}

.sourcing-card-modal__value {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sourcing-card-modal__value span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
}

.sourcing-card-modal__value b {
	font-size: 15px;
	color: var(--text-primary);
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__dates {
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--card-bg);
}

.sourcing-card-modal__dates-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.sourcing-card-modal__date-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 0;
	font-size: 12px;
}

html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__date-row + .sourcing-card-modal__date-row {
	border-top: 1px solid var(--card-border);
}

.sourcing-card-modal__date-step {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--inactive-border);
	color: var(--card-bg);
	font-size: 9px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	flex-shrink: 0;
}

.sourcing-card-modal__date-lbl {
	flex: 1;
	color: var(--text-secondary);
}

.sourcing-card-modal__date-row b {
	font-size: 11px;
	color: var(--text-primary);
	white-space: nowrap;
}

.sourcing-card-modal__actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

@media (max-width: 1024px) {
	.sourcing-card-modal__split {
		grid-template-columns: 300px 1fr;
	}
	.sourcing-card-modal__cols {
		grid-template-columns: 1fr 240px;
	}
}

@media (max-width: 640px) {
	.sourcing-card-modal__split {
		grid-template-columns: 1fr;
	}
	.sourcing-card-modal__cols {
		grid-template-columns: 1fr;
	}
	html.qmob-scope :is(main.content, .topbar-actions) .sourcing-card-modal__mail {
		border-right: none;
		border-bottom: 1px solid var(--card-border);
		min-height: 0;
	}
	.sourcing-card-modal__fields {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   LANDING (/qmob/sourcing) — card grid, cards-refactor 2026-09-10.
   Reuses the intranet's global .painel-item/.painel-grupo-grid
   (public/css/style.css), same "-item-big" modifier pattern as
   Compras (.compras-item-big) and Dashboards (.dashboards-item-big);
   only the parts that don't already come from those global rules.
   ============================================================ */

.page-qmob-sourcing-home .painel-item.sourcing-home__card {
	align-items: flex-start;
	padding: 18px 20px;
}

.page-qmob-sourcing-home .sourcing-home__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--accent-dark, var(--accent));
}

.page-qmob-sourcing-home .sourcing-home__icon svg {
	width: 100%;
	height: 100%;
}

.page-qmob-sourcing-home .sourcing-home__content {
	flex: 1;
	min-width: 0;
}

.page-qmob-sourcing-home .sourcing-home__desc {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-top: 4px;
}

.page-qmob-sourcing-home .painel-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* qmob's Tailwind preflight resets <p> margins to 0 (specificity (0,2,2)),
   beating style.css's .painel-subtitle rule (0,1,0) — same mechanism as the
   .painel-title override earlier in this file. Without this the subtitle
   collapses against the box below on every Sourcing screen, not just the
   landing (pre-existing bug on the tab-bar version of this screen, fixed
   here as a side effect). The landing carries both .page-qmob-sourcing and
   .page-qmob-sourcing-home, so this one selector covers it too. */
html.qmob-scope main.content .page-qmob-sourcing .painel-subtitle {
	margin-bottom: 30px;
}