/* Kynd Kit Ops — Work Hub suite module styles.
   Follows "WH - Work Hub Style Guide": DM Sans, the shared blue token palette, single
   bordered card app shell, 999px chips, neutral default status family, color-as-meaning.
   All tokens live on the module wrapper (.kko-fe), never :root; everything is namespaced
   under .kko-fe so there's no BuddyBoss/theme bleed. */

.kko-fe {
	/* Shared suite token palette (identical hex/roles across every module). */
	--kko-navy: #1D3040;
	--kko-blue-800: #1D4A60;
	--kko-blue-600: #347EA0;
	--kko-primary: #439BC0;
	--kko-blue-300: #7EC4D8;
	--kko-blue-200: #B3DDE9;
	--kko-blue-100: #D9EFF5;
	--kko-blue-light: #F4FBFC;
	--kko-teal: #1EC1A1;
	--kko-amber: #F5C842;
	--kko-red: #E24B4A;
	--kko-body: #5A6A7A;
	--kko-meta: #8A9BAB;
	--kko-border: #D0DCE6;
	--kko-alt: #F7FAFB;

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--kko-body);
	font-size: 14px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid var(--kko-border);
	border-radius: 16px;
	/* App shell: single bordered card = left nav rail + right content pane.
	   Padding lives on .kko-fe-main; overflow-hidden clips the rail fill into the rounded corners. */
	display: flex;
	align-items: stretch;
	overflow: hidden;
	padding: 0;
}
.kko-fe * { box-sizing: border-box; }
/* Honor the hidden attribute even on elements we give an explicit display (e.g. .kko-btn),
   so JS-toggled controls like the media "Remove" button stay hidden until needed. */
.kko-fe [hidden] { display: none !important; }
.kko-fe-main { flex: 1 1 auto; min-width: 0; padding: 26px 34px 30px; }
.kko-fe h2 { color: var(--kko-navy); font-weight: 800; font-size: 22px; margin: 0 0 4px; }
.kko-fe h3 { color: var(--kko-navy); font-weight: 800; font-size: 16px; margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--kko-border); }
.kko-fe a { color: var(--kko-primary); text-decoration: none; }
.kko-fe a:hover { color: var(--kko-blue-600); }
.kko-fe-muted { color: var(--kko-meta); font-size: 13px; }
.kko-fe code { background: var(--kko-alt); border: 1px solid var(--kko-border); padding: 1px 6px; border-radius: 6px; font-size: 12px; color: var(--kko-blue-800); }

/* Nav = persistent left rail (WH Style Guide §5): brand header, uppercase eyebrow, then
   icon + label rows. Hover = white lift; active = light-blue fill with blue-800 text and
   a primary-tinted icon (never dark text on a dark fill). */
.kko-fe-nav {
	flex: 0 0 232px; width: 232px; align-self: stretch;
	display: flex; flex-direction: column; gap: 2px;
	background: var(--kko-alt); border-right: 1px solid var(--kko-border);
	padding: 20px 14px 22px; margin: 0;
}
.kko-fe-brand { display: block; font-weight: 800; color: var(--kko-navy); font-size: 18px; letter-spacing: -.01em; margin: 0 8px 4px; }
.kko-fe-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kko-meta); margin: 14px 10px 6px; }
.kko-fe-nav ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.kko-fe-nav li a {
	display: flex; align-items: center; gap: 11px; padding: 9px 12px;
	color: var(--kko-body); font-weight: 600; font-size: 14px;
	border: 0; border-radius: 9px; transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.kko-fe-nav .kko-nav-ico { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--kko-meta); transition: color .12s ease; }
.kko-fe-nav .kko-nav-ico svg { width: 20px; height: 20px; display: block; }
.kko-fe-nav .kko-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kko-fe-nav li a:hover { color: var(--kko-navy); background: #fff; box-shadow: 0 1px 2px rgba(29,48,64,.06); }
.kko-fe-nav li a:hover .kko-nav-ico { color: var(--kko-blue-600); }
.kko-fe-nav li.active a { color: var(--kko-blue-800); background: var(--kko-blue-100); font-weight: 700; box-shadow: none; }
.kko-fe-nav li.active a .kko-nav-ico { color: var(--kko-primary); }
.kko-fe-nav li.active a:hover { color: var(--kko-blue-800); background: var(--kko-blue-100); box-shadow: none; }

/* Collapse toggle (‹ Collapse). Icon flips when collapsed; labels hide, rail narrows. */
.kko-nav-collapse {
	display: flex; align-items: center; gap: 6px; margin: 8px 6px 2px; padding: 5px 6px;
	border: 0; background: transparent; color: var(--kko-meta);
	font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px;
	transition: background .12s ease, color .12s ease;
}
.kko-nav-collapse:hover { color: var(--kko-navy); background: #fff; }
.kko-nav-collapse-ico { display: inline-flex; width: 16px; height: 16px; }
.kko-nav-collapse-ico svg { width: 16px; height: 16px; display: block; transition: transform .15s ease; }

/* Collapsed state — icon-only rail (desktop only; the mobile top-bar owns small screens). */
@media (min-width: 641px) {
	.kko-fe-nav.is-collapsed { flex-basis: 66px; width: 66px; padding-left: 10px; padding-right: 10px; }
	.kko-fe-nav.is-collapsed .kko-fe-brand,
	.kko-fe-nav.is-collapsed .kko-fe-eyebrow,
	.kko-fe-nav.is-collapsed .kko-nav-label,
	.kko-fe-nav.is-collapsed .kko-nav-collapse-txt { display: none; }
	.kko-fe-nav.is-collapsed .kko-nav-collapse { justify-content: center; margin-left: 0; margin-right: 0; }
	.kko-fe-nav.is-collapsed .kko-nav-collapse-ico svg { transform: rotate(180deg); }
	.kko-fe-nav.is-collapsed li a { justify-content: center; gap: 0; padding: 9px 0; }
}

/* Narrow screens: rail collapses back to a wrapping top bar (icons stay). */
@media (max-width: 640px) {
	.kko-fe { flex-direction: column; }
	.kko-fe-nav { flex: 0 0 auto; width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; border-right: 0; border-bottom: 1px solid var(--kko-border); padding: 14px; }
	.kko-fe-brand { width: 100%; margin-bottom: 6px; }
	.kko-fe-eyebrow, .kko-nav-collapse { display: none; }
	.kko-fe-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}

/* Notices — status colors carry meaning; success green, error red. */
.kko-fe-notice { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 700; font-size: 13px; }
.kko-fe-notice-success { background: rgba(30,193,161,.12); color: #0f7c66; }
.kko-fe-notice-error { background: #fdf1f1; color: var(--kko-red); }

/* Header row with title + actions. */
/* Every view title sits on the same rule, so a screen without sub-tabs (Dashboard,
   Reports, Shipping, Tasks) doesn't read as missing its header. Suppressed when
   sub-tabs or lens tabs follow immediately — those bring their own rule and two
   stacked lines look like a mistake. */
.kko-fe-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--kko-border); }
.kko-fe-head:has(+ .kko-subtabs), .kko-fe-head:has(+ .kko-po-modes), .kko-fe-head:has(+ .kko-lenstabs) { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; }
.kko-fe-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kko-fe-viewonly { color: var(--kko-meta); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Stat cards — clickable summary; big number navy; only the "act now" number takes red. */
.kko-fe-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.kko-fe-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--kko-border); border-radius: 12px; background: #fff; color: inherit; }
.kko-fe-card:hover { border-color: var(--kko-blue-300); }
.kko-fe-card-value { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--kko-navy); }
.kko-fe-card-label { color: var(--kko-meta); font-size: 12px; font-weight: 700; }
.kko-fe-card.warn { border-color: var(--kko-blue-200); }
.kko-fe-card.warn .kko-fe-card-value { color: var(--kko-red); }

/* Tables — hairline rows in a rounded, bordered panel (radius clips via overflow:hidden). */
.kko-fe-table {
	width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0; font-size: 13px;
	background: #fff; border: 1px solid var(--kko-border); border-radius: 12px; overflow: hidden;
}
/* Header row is tinted (matching the Programs list panel) and never wraps — a
   two-line column header reads as a rendering fault. Tables that outgrow their
   column widths scroll sideways in .kko-po-tablewrap instead. */
.kko-fe-table thead th { text-align: left; padding: 9px 10px; background: var(--kko-alt); border-bottom: 1px solid var(--kko-border); color: var(--kko-meta); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.kko-fe-table thead th:first-child { border-top-left-radius: 11px; }
.kko-fe-table thead th:last-child { border-top-right-radius: 11px; }
.kko-fe-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--kko-border); color: var(--kko-body); vertical-align: top; }
.kko-fe-table tbody tr:last-child td { border-bottom: 0; }
.kko-fe-table tbody tr:hover { background: var(--kko-blue-light); }
.kko-fe-table td strong, .kko-fe-table td a { color: var(--kko-navy); font-weight: 700; }
.kko-fe-table td a { color: var(--kko-primary); }
.kko-fe-rowact { white-space: nowrap; }
.kko-fe-rowact a { font-size: 12px; font-weight: 700; margin-right: 8px; }
.kko-fe-rowact a.kko-fe-danger, a.kko-fe-danger { color: var(--kko-red, #E24B4A); }

/* Forms — clean, airy single column like the Mail composer: label above field, generous
   spacing, and NO box. The server renders these as a <table>; we relayout every part of it to
   blocks and HARD-REMOVE borders/background on the table AND its cells — the BuddyBoss theme
   draws a border around bare <table> elements, which was the boxed-in look on every form. */
.kko-fe-form,
.kko-fe-form > tbody,
.kko-fe-form > tbody > tr,
.kko-fe-form > tbody > tr > th,
.kko-fe-form > tbody > tr > td,
.kko-fe-form > tr,
.kko-fe-form > tr > th,
.kko-fe-form > tr > td {
	display: block; width: 100%; border: 0 !important; background: transparent !important; padding: 0; margin: 0;
	box-shadow: none !important;
}
.kko-fe-form { max-width: 560px; margin: 6px 0 22px; }
/* Grouping: a big gap BETWEEN fields (input -> next label) and a tiny one WITHIN a field
   (label -> its own input), so every label clearly belongs to the input right below it. */
.kko-fe-form tr { margin-bottom: 27px; }
.kko-fe-form tr:last-child { margin-bottom: 4px; }
.kko-fe-form th { text-align: left; padding: 0 0 4px !important; font-weight: 600; color: var(--kko-navy); font-size: 12px; }
.kko-fe-form th:empty { display: none; }
/* Neutralize the BuddyBoss theme's <label> + control margins so each label hugs ITS OWN input
   (the theme was adding label margin-bottom, floating labels between fields — the spacing bug). */
.kko-fe-form label { display: block; margin: 0 !important; padding: 0 !important; line-height: 1.35; }
.kko-fe-form input, .kko-fe-form select, .kko-fe-form textarea { margin: 0 !important; }
.kko-fe-form input[type=text], .kko-fe-form input[type=number], .kko-fe-form input[type=password], .kko-fe-form input[type=email], .kko-fe-form input[type=tel], .kko-fe-form input[type=date], .kko-fe-form textarea, .kko-fe-form select {
	width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--kko-border); border-radius: 8px;
	font: inherit; color: var(--kko-navy); background: #fff;
}
.kko-fe-form input:focus, .kko-fe-form textarea:focus, .kko-fe-form select:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.12) !important; }
.kko-fe-form textarea { min-height: 5em; }
.kko-fe-form .kko-combo { max-width: 100%; }
/* Checkbox rows: keep the box + caption on one line (the block-label rule above would stack them). */
.kko-fe-form td label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--kko-body); }
.kko-fe-form td label input[type=checkbox] { width: auto; margin: 0 !important; }
/* No-JS fallback for native single selects: show a caret so they read as dropdowns. */
.kko-fe-form select:not([multiple]) {
	-webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9BAB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.kko-fe-form select[multiple] { min-height: 5.5em; }
/* Keep the repeatable line editors (Confirmed Kits, build substitutions) aligned to the column. */
.kko-repeat { max-width: 560px; }

/* ---- Combobox (JS-enhanced select): dropdown + search-and-select + tokens ---- */
/* Native control is kept in the DOM (so forms submit + required validation works) but visually
   hidden. Not display:none — that would make a `required` select non-focusable and block submit. */
.kko-combo { position: relative; max-width: 480px; }
.kko-combo-native {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.kko-combo-control {
	display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px;
	padding: 7px 10px 7px 12px; border: 1px solid var(--kko-border); border-radius: 8px;
	background: #fff; color: var(--kko-navy); font: inherit; text-align: left; cursor: pointer;
}
.kko-combo-control:hover { border-color: var(--kko-blue-300); }
.kko-combo.is-open .kko-combo-control,
.kko-combo-control:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.12); }
.kko-combo-display { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.kko-combo-multi .kko-combo-control { min-height: 40px; padding: 6px 8px 6px 10px; }
.kko-combo-placeholder { color: var(--kko-meta); }
.kko-combo-caret { flex: 0 0 auto; width: 16px; height: 16px; color: var(--kko-meta); transition: transform .15s ease; }
.kko-combo.is-open .kko-combo-caret { transform: rotate(180deg); }
.kko-combo-token {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 10px;
	background: var(--kko-blue-100); color: var(--kko-blue-800); border-radius: 999px;
	font-size: 12px; font-weight: 700; line-height: 1.6;
}
.kko-combo-token-x {
	border: 0; background: none; color: var(--kko-blue-800); cursor: pointer; font-size: 15px;
	line-height: 1; padding: 0 4px; border-radius: 999px; opacity: .7;
}
.kko-combo-token-x:hover { opacity: 1; color: var(--kko-red); }

/* Menu — standard suite menu: white, hairline, 12px radius, soft shadow, position:fixed.
   Portaled to <body> (so overflow:hidden containers can't clip it), which puts it OUTSIDE
   .kko-fe — so the design tokens + font must be restated here or every var() would be undefined
   (that bug made option text fall back to black and the multi-select checkboxes disappear). */
.kko-combo-menu {
	--kko-navy: #1D3040; --kko-blue-800: #1D4A60; --kko-blue-600: #347EA0; --kko-primary: #439BC0;
	--kko-blue-300: #7EC4D8; --kko-blue-200: #B3DDE9; --kko-blue-100: #D9EFF5; --kko-blue-light: #F4FBFC;
	--kko-teal: #1EC1A1; --kko-amber: #F5C842; --kko-red: #E24B4A; --kko-body: #5A6A7A;
	--kko-meta: #8A9BAB; --kko-border: #D0DCE6; --kko-alt: #F7FAFB;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	position: fixed; z-index: 100000; min-width: 180px; max-width: 92vw;
	background: #fff; border: 1px solid var(--kko-border); border-radius: 12px;
	box-shadow: 0 10px 30px rgba(29,48,64,.14); padding: 6px; max-height: 300px; overflow: auto;
}
.kko-combo-menu[hidden] { display: none; }
.kko-combo-search { position: sticky; top: -6px; background: #fff; padding: 2px 2px 6px; margin: -2px -2px 4px; }
.kko-combo-search input {
	width: 100%; padding: 8px 10px; border: 1px solid var(--kko-border); border-radius: 8px;
	font: inherit; color: var(--kko-navy);
}
.kko-combo-search input:focus { outline: none; border-color: var(--kko-primary); }
.kko-combo-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.kko-combo-option {
	display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
	color: var(--kko-navy); font-size: 13px; font-weight: 600; cursor: pointer;
}
.kko-combo-option:hover, .kko-combo-option.is-active { background: var(--kko-blue-light); }
.kko-combo-option.is-selected { color: var(--kko-primary); }
.kko-combo-option.is-disabled { color: var(--kko-meta); cursor: default; }
.kko-combo-check {
	flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--kko-border);
	border-radius: 5px; background: #fff; position: relative;
}
.kko-combo-option.is-selected .kko-combo-check { background: var(--kko-primary); border-color: var(--kko-primary); }
.kko-combo-option.is-selected .kko-combo-check::after {
	content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.kko-combo-empty { padding: 10px; color: var(--kko-meta); font-size: 13px; text-align: center; }

/* ---- Repeater (Add More line items, e.g. Confirmed Kits) ---- */
.kko-repeat-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kko-repeat-row { display: flex; align-items: center; gap: 8px; }
.kko-repeat-qty { flex: 0 0 96px; }
.kko-repeat-qty input { width: 100%; padding: 9px 12px; border: 1px solid var(--kko-border); border-radius: 8px; font: inherit; color: var(--kko-navy); }
.kko-repeat-pick { flex: 1 1 auto; min-width: 0; }
.kko-repeat-pick .kko-combo { max-width: none; }
.kko-repeat-x {
	flex: 0 0 auto; border: 1px solid var(--kko-border); background: #fff; color: var(--kko-meta);
	width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; padding: 0; -webkit-appearance: none; appearance: none;
}
.kko-repeat-x:hover { color: var(--kko-red); border-color: var(--kko-blue-300); background: #fdf1f1; }
.kko-repeat-add { margin-top: 2px; }

/* Buttons — 8px radius; primary = filled primary, white text.
   Prefixed with .kko-fe so these beat the generic `.kko-fe a` link color (which otherwise
   wins on specificity and paints link-based primary buttons blue-on-blue). White text is
   forced per the style guide's "buttons on colored fills always use #fff" rule. */
/* inline-flex + centering: .kko-btn-sm sets an explicit height, and inline-block would
   park the label at the top of that box instead of centring it. */
.kko-fe .kko-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--kko-border); border-radius: 8px; background: #fff; color: var(--kko-navy); font-weight: 700; font-size: 13px; line-height: 1.2; cursor: pointer; text-align: center; vertical-align: middle; }
.kko-fe .kko-btn:hover { border-color: var(--kko-blue-300); color: var(--kko-navy); }
.kko-fe .kko-btn-primary { background: var(--kko-primary); border-color: var(--kko-primary); color: #fff !important; }
.kko-fe .kko-btn-primary:hover { background: var(--kko-blue-600); border-color: var(--kko-blue-600); color: #fff !important; }

/* Badges/chips — all 999px. Default workflow states read NEUTRAL; warm colors reserved for attention. */
.kko-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--kko-alt); color: var(--kko-body); border: 1px solid var(--kko-border); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Status pills (e.g. "No Par Level") never wrap; the cell widens to fit them. */
.kko-fe-table td:has(> .kko-badge) { white-space: nowrap; }

/* Read-only detail card (e.g. a supply opened from the list). */
/* The card fills the content pane; the 720px cap moves to the metadata grid instead.
   Capping the CARD meant a wide table inside it (kit contents, receipts) was squeezed
   into 720px while the pane sat half empty. Long dt/dd pairs still want a measure. */
.kko-detail { border: 1px solid var(--kko-border); border-radius: 12px; background: #fff; padding: 20px 22px; }
.kko-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--kko-border); margin-bottom: 4px; }
.kko-detail-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kko-detail-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--kko-navy, #1D3040); }
.kko-detail-sec { margin-top: 18px; }
.kko-detail-sec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kko-meta, #8A9BAB); }
.kko-detail-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; margin: 0; max-width: 720px; }
.kko-detail-grid dt { margin: 0; font-size: 13px; color: var(--kko-meta, #8A9BAB); }
.kko-detail-grid dd { margin: 0; font-size: 14px; color: var(--kko-body, #5A6A7A); overflow-wrap: anywhere; }
.kko-detail-grid dd a { color: var(--kko-primary, #439BC0); }
.kko-detail-empty { color: var(--kko-meta, #8A9BAB); }
.kko-detail-img { margin-top: 4px; max-width: 240px; border-radius: 10px; border: 1px solid var(--kko-border); }
.kko-detail-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.kko-detail-text { margin: 0; font-size: 14px; color: var(--kko-body, #5A6A7A); line-height: 1.5; max-width: 78ch; }
/* Long links (supplier URLs): clickable but tail-clamped so they don't eat the row. */
.kko-link-clamp { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.kko-link-ext { color: var(--kko-meta, #8A9BAB); }
@media (max-width: 560px) { .kko-detail-grid { grid-template-columns: 1fr; gap: 2px 0; } .kko-detail-grid dd { margin-bottom: 8px; } .kko-link-clamp { max-width: 220px; } }

/* Destructive button — outline red, fills on hover. */
.kko-fe .kko-btn-danger { color: var(--kko-red, #E24B4A); border-color: #f0c2c1; background: #fff; }
.kko-fe .kko-btn-danger:hover { background: var(--kko-red, #E24B4A); color: #fff !important; border-color: var(--kko-red, #E24B4A); }

/* In-view sub-tabs (e.g. Purchase Orders: All POs | Low Inventory). Underline active, radius 0. */
.kko-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kko-border, #D0DCE6); margin: 4px 0 16px; }
.kko-subtab { padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--kko-meta, #8A9BAB); text-decoration: none; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px; }
.kko-subtab:hover { color: var(--kko-blue-600, #347EA0); }
.kko-subtab.active { color: var(--kko-navy, #1D3040); border-bottom-color: var(--kko-primary, #439BC0); }

/* ---------------------------- BUILDS CALENDAR ---------------------------- */
.kko-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.kko-cal-nav { display: flex; align-items: center; gap: 8px; }
.kko-cal-arrow { padding: 6px 12px; font-size: 16px; line-height: 1; }
.kko-cal-title { font-weight: 700; color: var(--kko-navy, #1D3040); font-size: 16px; margin-left: 6px; }
.kko-cal-modes { display: inline-flex; border: 1px solid var(--kko-border, #D0DCE6); border-radius: 9px; overflow: hidden; }
.kko-cal-mode { padding: 7px 16px; font-weight: 700; font-size: 13px; color: var(--kko-blue-600, #347EA0); text-decoration: none; background: #fff; }
.kko-cal-mode + .kko-cal-mode { border-left: 1px solid var(--kko-border, #D0DCE6); }
.kko-cal-mode.active { background: var(--kko-primary, #439BC0); color: #fff; }
.kko-cal-hint { margin: 0 0 10px; font-size: 13px; }

/* Grid: Mon–Fri full width, Sat/Sun slim reference columns. */
.kko-cal-grid { display: grid; grid-template-columns: minmax(0,0.5fr) repeat(5, minmax(0,1fr)) minmax(0,0.5fr); gap: 6px; }
.kko-cal-head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--kko-meta, #8A9BAB); padding: 2px 6px 4px; }
.kko-cal-head.kko-cal-weekend { color: #B7C3CE; }
.kko-cal-day { border: 1px solid var(--kko-border, #D0DCE6); border-radius: 10px; background: #fff; padding: 6px; min-height: 96px; display: flex; flex-direction: column; }
.kko-cal-week .kko-cal-day { min-height: 320px; }
.kko-cal-day.kko-cal-today { border-color: var(--kko-primary, #439BC0); box-shadow: 0 0 0 1px var(--kko-primary, #439BC0) inset; }
.kko-cal-day.kko-cal-out { background: var(--kko-alt, #F7FAFB); }
.kko-cal-day.kko-cal-out .kko-cal-dnum { color: #B7C3CE; }
/* Weekends: slim, muted, non-interactive (for reference only). */
.kko-cal-day.kko-cal-weekend { background: repeating-linear-gradient(135deg, #FAFCFD, #FAFCFD 6px, #F1F5F8 6px, #F1F5F8 12px); border-style: dashed; padding: 6px 4px; }
.kko-cal-day.kko-cal-weekend .kko-cal-dnum { color: #A9B6C1; font-size: 12px; }
.kko-cal-dnum { font-weight: 700; color: var(--kko-navy, #1D3040); font-size: 14px; margin-bottom: 4px; }
.kko-cal-dow { font-weight: 600; color: var(--kko-meta, #8A9BAB); font-size: 12px; }
.kko-cal-items { display: flex; flex-direction: column; gap: 4px; min-height: 8px; flex: 1; }
.kko-cal-day.is-over { border-color: var(--kko-primary, #439BC0); background: var(--kko-blue-100, #D9EFF5); }

/* Build chips (colored by lifecycle status; reuse the badge palette). Text wraps; the day never widens. */
.kko-cal-chip { display: flex; align-items: flex-start; gap: 5px; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.25; text-decoration: none; background: #eef1f4; color: #647686; cursor: grab; border: 1px solid transparent; }
.kko-cal-chip:hover { filter: brightness(0.97); }
.kko-cal-chip:active { cursor: grabbing; }
.kko-cal-chip .kko-cal-chip-t { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.kko-cal-chip .kko-cal-chip-q { flex: none; opacity: .8; font-weight: 700; }
.kko-cal-chip.is-dragging { opacity: .45; }
.kko-cal-chip.kko-cal-chip-ok { box-shadow: 0 0 0 2px var(--kko-teal, #1EC1A1); }
.kko-cal-chip.kko-cal-chip-err { box-shadow: 0 0 0 2px var(--kko-red, #E24B4A); }

/* Unscheduled tray. */
.kko-cal-tray { margin-top: 14px; border: 1px dashed var(--kko-border, #D0DCE6); border-radius: 10px; padding: 10px 12px; background: var(--kko-alt, #F7FAFB); }
.kko-cal-tray-h { font-weight: 700; color: var(--kko-navy, #1D3040); font-size: 13px; margin-bottom: 8px; }
.kko-cal-tray-items { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.kko-cal-tray-items .kko-cal-chip { min-width: 160px; max-width: 260px; }

/* Read-only detail card actions (e.g. Edit / Process on a build view). */
.kko-detail-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Form action bar — buttons aligned bottom-right (e.g. Save / Process on a build). */
.kko-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.kko-form-actions-note { text-align: right; margin: 6px 0 0; font-size: 12px; }

/* Kits filter — search on top, status + type filters below, then quick filters. */
.kko-fe-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.kko-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kko-filter-row input[type="search"] { min-width: 280px; }
.kko-filter-row .kko-combo, .kko-filter-row select[multiple] { min-width: 200px; }
.kko-quick-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0 14px; }
.kko-quick-label { font-size: 12px; color: var(--kko-meta, #8A9BAB); font-weight: 700; margin-right: 2px; }
.kko-quick { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--kko-border, #D0DCE6); background: #fff; color: var(--kko-blue-600, #347EA0); text-decoration: none; }
.kko-quick:hover { border-color: var(--kko-blue-300, #7EC4D8); }
.kko-quick.active { background: var(--kko-primary, #439BC0); border-color: var(--kko-primary, #439BC0); color: #fff; }

/* Program-type task template — line-by-line rows (title / due days / assignee). */
.kko-task-tpl { max-width: 640px; margin-bottom: 6px; }
.kko-task-head, .kko-repeat-row.kko-task-row { display: grid; grid-template-columns: 1fr 120px 190px 28px; gap: 8px; align-items: center; }
.kko-task-head { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kko-meta, #8A9BAB); }
.kko-repeat-row.kko-task-row { margin-bottom: 8px; }
.kko-task-row input, .kko-task-row select { width: 100%; }
@media (max-width: 620px) {
	.kko-task-head { display: none; }
	.kko-repeat-row.kko-task-row { grid-template-columns: 1fr 28px; grid-auto-rows: auto; }
	.kko-task-row .kko-task-title { grid-column: 1 / 2; }
	.kko-task-row .kko-repeat-x { grid-column: 2 / 3; grid-row: 1; }
	.kko-task-row .kko-task-due, .kko-task-row .kko-task-assignee { grid-column: 1 / 3; }
}

/* ---- Program tasks board (mirrors the Kynd Tasks project "related tasks") ---- */
.kko-tasks { border: 1px solid var(--kko-border, #D0DCE6); border-radius: 12px; overflow: hidden; margin-top: 4px; }
.kko-tasks-group { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--kko-alt, #F7FAFB); border-bottom: 1px solid #eef1f4; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--kko-meta, #8A9BAB); }
.kko-tasks-gn { background: #e7edf2; color: #5A6A7A; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.kko-ptask-row { border-bottom: 1px solid #eef1f4; }
.kko-ptask-row:last-child { border-bottom: 0; }
.kko-ptask-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.kko-ptask-check { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C4D0DB; background: #fff; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.kko-ptask-check.is-on { background: var(--kko-teal, #1EC1A1); border-color: var(--kko-teal, #1EC1A1); }
.kko-ptask-check:disabled { cursor: default; opacity: .55; }
.kko-ptask-title { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--kko-navy, #1D3040); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kko-ptask-title:hover { color: var(--kko-blue-600, #347EA0); }
.kko-ptask-row.is-done .kko-ptask-title { text-decoration: line-through; color: var(--kko-meta, #8A9BAB); }
.kko-ptask-meta { flex: none; color: var(--kko-meta, #8A9BAB); font-size: 12px; }
.kko-ptask-detail { padding: 4px 14px 14px 44px; background: #fbfdfe; }
.kko-ptask-detail .kko-detail-grid { grid-template-columns: 90px 1fr; gap: 4px 12px; margin: 8px 0; }
.kko-ptask-msg { font-size: 12px; font-weight: 700; }
.kko-ptask-msg.ok { color: #0f7c66; } .kko-ptask-msg.err { color: var(--kko-red, #E24B4A); }

/* ---- Program page: 2/3 · 1/3 view-first collapsible sections ---- */
.kko-pg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kko-pg-title { display: flex; align-items: center; gap: 10px; }
.kko-pg-title h2 { margin: 0; }
.kko-pg-tools { display: flex; gap: 8px; }
.kko-pg { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.kko-pg-main, .kko-pg-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kko-psec { border: 1px solid var(--kko-border, #D0DCE6); border-radius: 12px; background: #fff; overflow: hidden; }
.kko-psec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; }
.kko-psec-toggle { flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kko-navy, #1D3040); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.kko-psec-caret { color: var(--kko-meta, #8A9BAB); font-size: 11px; display: inline-block; transition: transform .15s ease; }
.kko-psec.is-collapsed .kko-psec-caret { transform: rotate(-90deg); }
.kko-psec-editbtn { flex: none; background: none; border: 0; color: var(--kko-blue-600, #347EA0); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.kko-psec-editbtn:hover { text-decoration: underline; }
.kko-psec-body { padding: 0 14px 14px; border-top: 1px solid #eef1f4; }
.kko-psec.is-collapsed .kko-psec-body { display: none; }
.kko-psec-view { margin: 12px 0 0; }
.kko-psec-edit { display: none; margin-top: 6px; }
.kko-psec.is-editing .kko-psec-view { display: none; }
.kko-psec.is-editing .kko-psec-edit { display: block; }
.kko-pg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kko-pg-savebar { margin-top: 16px; display: flex; justify-content: flex-end; }

/* Breadcrumb (top of the program page) */
.kko-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.kko-breadcrumb a { color: var(--kko-primary); }
.kko-breadcrumb a:hover { color: var(--kko-blue-600); }
.kko-breadcrumb-sep { color: var(--kko-meta); font-weight: 400; }
.kko-breadcrumb-current { color: var(--kko-navy); }

/* Ghost action button — outline that stands out (primary text) without a filled fill. */
.kko-fe .kko-btn-ghost { background: #fff; color: var(--kko-blue-600); border-color: var(--kko-border); }
.kko-fe .kko-btn-ghost:hover { border-color: var(--kko-blue-300); color: var(--kko-primary); background: var(--kko-blue-light); }

/* Actions section (its own titled card) */
.kko-psec-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kko-navy); }
.kko-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid #eef1f4; }
.kko-actions-delete { margin-left: auto; }
@media (max-width: 560px) { .kko-actions-delete { margin-left: 0; } }

/* Per-section "Show empty" toggle + default-hidden empty fields (view mode only) */
.kko-psec-headtools { flex: none; display: flex; align-items: center; gap: 10px; }
.kko-psec-emptybtn { background: none; border: 0; color: var(--kko-meta); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.kko-psec-emptybtn:hover { color: var(--kko-blue-600); text-decoration: underline; }
.kko-psec.kko-show-empty .kko-psec-emptybtn { color: var(--kko-primary); }
.kko-psec.is-editing .kko-psec-emptybtn { display: none; }
.kko-psec:not(.kko-show-empty) .kko-psec-view .kko-dv-empty { display: none; }

/* ---- Labels-above field grid (view mode) ---- */
.kko-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 12px 0 0; }
.kko-pg-side .kko-fgrid { grid-template-columns: 1fr; }
.kko-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kko-f-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kko-meta); }
.kko-f-v { font-size: 14px; color: var(--kko-navy); font-weight: 600; overflow-wrap: anywhere; }

/* ---- Hero summary line (compact at-a-glance strip under the title) ---- */
.kko-pg-titlewrap { min-width: 0; }
.kko-sumline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.kko-sumline-i { display: flex; flex-direction: column; }
.kko-sumline-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kko-meta); }
.kko-sumline-v { font-size: 14px; font-weight: 700; color: var(--kko-navy); }
.kko-sumline-dot { width: 1px; align-self: stretch; min-height: 20px; background: var(--kko-border); }

/* ---- Tabbed detail: section tabs + focus filtering ---- */
.kko-tabbar { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--kko-border); margin: 4px 0 16px; }
.kko-tab { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--kko-meta); padding: 9px 0 11px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kko-tab:hover { color: var(--kko-navy); }
.kko-tab:focus { outline: none; }
.kko-tab:focus-visible { outline: 2px solid var(--kko-blue-300); outline-offset: 2px; }
.kko-tab.is-on { color: var(--kko-navy); font-weight: 700; border-bottom-color: var(--kko-primary); }
.kko-tab-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--kko-teal, #1EC1A1); }
.kko-pg[data-tab="contacts"]  .kko-psec:not([data-sec~="contacts"]):not([data-sec~="always"]),
.kko-pg[data-tab="kits"]      .kko-psec:not([data-sec~="kits"]):not([data-sec~="always"]),
.kko-pg[data-tab="event"]     .kko-psec:not([data-sec~="event"]):not([data-sec~="always"]),
.kko-pg[data-tab="logistics"] .kko-psec:not([data-sec~="logistics"]):not([data-sec~="always"]),
.kko-pg[data-tab="billing"]   .kko-psec:not([data-sec~="billing"]):not([data-sec~="always"]),
.kko-pg[data-tab="ks"]        .kko-psec:not([data-sec~="ks"]):not([data-sec~="always"]) { display: none; }
.kko-pg:not([data-tab="overview"]) { grid-template-columns: 1fr; }
.kko-pg:not([data-tab="overview"]) .kko-pg-side .kko-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Full-width bottom row: Internal Tasks (2/3) + Actions (1/3) ---- */
.kko-pg-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.kko-pg-bottom .kko-actions-sec .kko-actions-row { flex-direction: column; align-items: stretch; }
.kko-pg-bottom .kko-actions-sec .kko-actions-row .kko-btn { justify-content: center; }
.kko-pg-bottom .kko-actions-delete { margin-left: 0; margin-top: 4px; }
@media (max-width: 900px) { .kko-pg-bottom { grid-template-columns: 1fr; } }

/* At a glance: drop the inner border so it doesn't double up inside the section card. */
.kko-psec .kko-summaries { border: 0; background: transparent; padding: 0; margin: 0; }

/* Confirmed Kits panel — always visible inside the Kits section (feeds PO + builds). */
.kko-ckpanel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kko-border); }
/* align-items: center, not baseline — a padded button in this row would otherwise be
   aligned on its inner text baseline and hang below the title. */
.kko-ckpanel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kko-ckpanel-title { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kko-navy); }
.kko-ckpanel-hint { font-size: 12px; font-weight: 600; color: var(--kko-primary); }
.kko-ckpanel .kko-fe-muted { margin: 4px 0 10px; }
.kko-ckpanel-actions { margin-top: 12px; }
.kko-ckpanel-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kko-ckpanel-confirm { margin-left: auto; }
.kko-ckpanel-badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #0f9d6b; background: #e7f7ef; border-radius: 999px; padding: 2px 10px; }
.kko-ckpanel-editbtn { margin-left: auto; }
.kko-ckpanel.is-locked { background: var(--kko-blue-light); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.kko-cklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kko-cklist li { display: flex; align-items: baseline; gap: 10px; }
.kko-cklist-qty { min-width: 42px; font-weight: 800; color: var(--kko-navy); font-variant-numeric: tabular-nums; }
.kko-cklist-kit { color: var(--kko-body); font-weight: 600; }

/* Programs list (redesigned) + status lens tabs */
.kko-lenstabs { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--kko-border); margin: 14px 0 4px; }
.kko-lens { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 10px; font-size: 13px; font-weight: 600; color: var(--kko-meta); border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0; }
.kko-lens:hover { color: var(--kko-navy); }
.kko-lens.is-on { color: var(--kko-navy); font-weight: 700; border-bottom-color: var(--kko-primary); }
.kko-lens-ct { font-size: 11px; font-weight: 700; color: var(--kko-meta); background: var(--kko-alt); border: 1px solid var(--kko-border); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.kko-lens.is-on .kko-lens-ct { color: var(--kko-blue-800); background: var(--kko-blue-100); border-color: var(--kko-blue-200); }

.kko-plist { border: 1px solid var(--kko-border); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.kko-plist-row { display: grid; grid-template-columns: 1.7fr .8fr 1.5fr .8fr .9fr; gap: 14px; align-items: center; padding: 13px 16px; border-top: 1px solid #eef1f4; }
.kko-plist-row:first-child { border-top: 0; }
.kko-plist-head { background: var(--kko-alt); }
.kko-plist-head span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kko-meta); }
.kko-plist-row:not(.kko-plist-head):hover { background: var(--kko-blue-light); }
.kko-pname { font-weight: 700; color: var(--kko-navy); }
.kko-pmeta { font-size: 12px; color: var(--kko-meta); margin-top: 2px; }
.kko-kits-cell { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kko-kchip { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--kko-alt); border: 1px solid var(--kko-border); color: var(--kko-body); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.kko-kmore { color: var(--kko-meta); font-size: 12px; font-weight: 600; }
.kko-plist-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.kko-fe .kko-btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
@media (max-width: 782px) { .kko-plist-row { grid-template-columns: 1fr auto auto; } .kko-plist-row .kko-hide-sm { display: none; } .kko-plist-head { display: none; } }
/* CRM contact/company search picker (Kynd Contacts). */
.kko-cpick { position: relative; }
.kko-cpick-input { width: 100%; }
.kko-cpick-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--kko-border, #D0DCE6); border-radius: 8px; box-shadow: 0 8px 24px rgba(29,48,64,.12); margin-top: 2px; max-height: 240px; overflow-y: auto; }
.kko-cpick-opt { padding: 8px 10px; cursor: pointer; font-size: 14px; color: var(--kko-navy, #1D3040); }
.kko-cpick-opt:hover, .kko-cpick-opt.is-active { background: var(--kko-blue-100, #D9EFF5); }
.kko-cpick-email { color: var(--kko-meta, #8A9BAB); font-size: 12px; }
.kko-cpick-add { border-top: 1px solid var(--kko-border, #D0DCE6); color: var(--kko-teal, #2C7A8C); font-weight: 600; }
.kko-cpick-add.is-active, .kko-cpick-add:hover { background: var(--kko-blue-100, #D9EFF5); }

.kko-addtask-bar { margin: 12px 0 0; }
.kko-addtask-wrap { margin-top: 6px; border-top: 1px dashed var(--kko-border, #D0DCE6); padding-top: 10px; }
.kko-tasks-empty { margin: 8px 0 0; }
@media (max-width: 900px) { .kko-pg { grid-template-columns: 1fr; } }

/* ---- Team chat (WH Chat Modules spec §8 — iMessage-style 2/3-width bubbles,
   own messages right via .is-mine; matches kynd-email / kynd-tasks) ---- */
.kko-chat { margin-top: 6px; border-top: 1px solid var(--kko-border, #D0DCE6); padding-top: 14px; }
.kko-chat-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kko-meta, #8A9BAB); margin-bottom: 10px; }
.kko-chat-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.kko-chat-msg { background: var(--kko-blue-light, #F4FBFC); border: 1px solid var(--kko-blue-200, #B3DDE9); border-radius: 10px; padding: 10px 12px; width: 66.666%; max-width: 66.666%; align-self: flex-start; box-sizing: border-box; }
.kko-chat-msg.is-mine { align-self: flex-end; }
.kko-chat-mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kko-chat-ava { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kko-blue-100, #D9EFF5); color: var(--kko-blue-800, #1D4A60); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.kko-chat-name { font-size: 13px; font-weight: 700; color: var(--kko-navy, #1D3040); }
.kko-chat-time { font-size: 12px; color: var(--kko-meta, #8A9BAB); flex: 1; }
.kko-chat-x { border: 0; background: none; color: var(--kko-meta, #8A9BAB); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; opacity: 0; transition: opacity .15s ease; font-size: 15px; line-height: 1; }
.kko-chat-msg:hover .kko-chat-x, .kko-chat-msg:focus-within .kko-chat-x { opacity: 1; }
.kko-chat-x:hover { color: var(--kko-red, #E24B4A); background: #fdf1f1; }
@media (hover: none) { .kko-chat-x { opacity: 1; } }
.kko-chat-body { font-size: 14px; color: var(--kko-body, #5A6A7A); overflow-wrap: break-word; white-space: pre-wrap; }
.kko-chat-mention { background: var(--kko-blue-100, #D9EFF5); color: var(--kko-blue-800, #1D4A60); border-radius: 6px; padding: 1px 5px; font-weight: 700; }
.kko-chat-mention--me { background: #F1EAFB; color: #6E3AA3; box-shadow: inset 0 0 0 1px #DCC8F2; }
.kko-chat-empty { font-size: 13px; color: var(--kko-meta, #8A9BAB); background: var(--kko-alt, #F7FAFB); border: 1px solid var(--kko-border, #D0DCE6); border-radius: 10px; padding: 12px 14px; }
.kko-chat-composer { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; background: var(--kko-blue-light, #F4FBFC); border: 1px solid var(--kko-blue-200, #B3DDE9); border-radius: 10px; padding: 8px; }
.kko-chat-input { flex: 1; border: 0; background: transparent; resize: none; outline: none; font-family: inherit; font-size: 14px; color: var(--kko-navy, #1D3040); padding: 6px; min-height: 30px; max-height: 120px; }
.kko-chat-msg-status { font-size: 12px; font-weight: 700; margin-top: 6px; display: inline-block; }
.kko-chat-msg-status.err { color: var(--kko-red, #E24B4A); }

/* Status pills (mirror Kynd Tasks: done / doing / todo / waiting / atrisk). */
.kko-tpill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #eef1f4; color: #647686; }
.kko-tpill--done { background: rgba(30,193,161,.16); color: #0f7c66; }
.kko-tpill--doing { background: var(--kko-blue-100, #D9EFF5); color: var(--kko-blue-800, #1D4A60); }
.kko-tpill--todo { background: #eef1f4; color: #647686; }
.kko-tpill--waiting { background: rgba(245,200,66,.22); color: #8a6d0c; }
.kko-tpill--atrisk { background: #fdecec; color: var(--kko-red, #E24B4A); }
@media (max-width: 620px) {
	.kko-ptask-head { flex-wrap: wrap; }
	.kko-ptask-meta { width: 100%; padding-left: 30px; }
	.kko-ptask-detail { padding-left: 14px; }
}

/* USD money input — $ prefix sits inside the field frame. */
.kko-money { display: inline-flex; align-items: center; gap: 6px; }
.kko-money-sign { color: var(--kko-meta, #8A9BAB); font-weight: 700; }
.kko-money input { width: auto; }

/* Kit builder — per-line cost + running total vs budget. */
.kko-contents-table .kko-line-col, .kko-contents-table .kko-line-cost { text-align: right; white-space: nowrap; width: 96px; }
.kko-contents-table .kko-line-cost { color: var(--kko-body, #5A6A7A); font-variant-numeric: tabular-nums; }
.kko-kit-cost { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--kko-border); border-radius: 10px; background: var(--kko-alt, #F7FAFB); font-size: 14px; color: var(--kko-body, #5A6A7A); }
.kko-kit-cost-label { color: var(--kko-meta, #8A9BAB); }
.kko-kit-cost-total { color: var(--kko-navy, #1D3040); font-size: 16px; }
.kko-kit-cost-budget { color: var(--kko-meta, #8A9BAB); }
.kko-kit-cost.kko-kit-cost-under .kko-kit-cost-total { color: #0f7c66; }
.kko-kit-cost.kko-kit-cost-over .kko-kit-cost-total { color: var(--kko-red, #E24B4A); }
.kko-kit-cost.kko-kit-cost-over .kko-kit-cost-budget { color: var(--kko-red, #E24B4A); font-weight: 700; }
.kko-badge-tracked, .kko-badge-filled, .kko-badge-good { background: rgba(30,193,161,.14); color: #0f7c66; border-color: transparent; }
.kko-badge-needs-update, .kko-badge-critical, .kko-badge-unresolved { background: #fdecec; color: var(--kko-red); border-color: transparent; }
.kko-badge-reprocess, .kko-badge-low, .kko-badge-partially-filled { background: rgba(245,200,66,.20); color: #8a6d0c; border-color: transparent; }
.kko-badge-open { background: var(--kko-blue-100); color: var(--kko-blue-800); border-color: transparent; }
/* Kit lifecycle statuses — color-coded so they read at a glance (were all neutral gray). */
.kko-badge-active, .kko-badge-in-season { background: rgba(30,193,161,.16); color: #0f7c66; border-color: transparent; }
.kko-badge-in-dev { background: var(--kko-blue-100); color: var(--kko-blue-800); border-color: transparent; }
.kko-badge-out-of-season { background: rgba(245,200,66,.22); color: #8a6d0c; border-color: transparent; }
.kko-badge-internal-active { background: rgba(146,76,216,.14); color: #6b34a8; border-color: transparent; }
.kko-badge-abandoned-in-dev { background: #fdecec; color: var(--kko-red); border-color: transparent; }
.kko-badge-retired, .kko-badge-inactive { background: #eef1f4; color: #647686; border-color: transparent; }
/* Not Tracked and other defaults keep the neutral chip. */

/* Build lifecycle statuses (computed): Not Scheduled / Scheduled / In Progress / Complete. */
.kko-badge-not-scheduled { background: #fdecec; color: var(--kko-red); border-color: transparent; }
.kko-badge-scheduled { background: rgba(245,180,80,.20); color: #a85f13; border-color: transparent; }
.kko-badge-in-progress { background: rgba(245,200,66,.22); color: #8a6d0c; border-color: transparent; }
.kko-badge-complete { background: rgba(30,193,161,.16); color: #0f7c66; border-color: transparent; }
.kko-badge-unknown { background: #eef1f4; color: #647686; border-color: transparent; }

/* Priority pills (0 Needs Product … 4 Extended), matching the Notion palette. */
.kko-prio { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #eef1f4; color: #647686; }
.kko-prio-0 { background: #fdecec; color: var(--kko-red); }
.kko-prio-1 { background: rgba(146,76,216,.14); color: #6b34a8; }
.kko-prio-2 { background: #eef1f4; color: #647686; }
.kko-prio-3 { background: rgba(245,180,80,.20); color: #a85f13; }
.kko-prio-4 { background: rgba(245,200,66,.22); color: #8a6d0c; }

/* Stacked checkbox flags on a form row. */
.kko-fe-checks { display: flex; flex-direction: column; gap: 6px; }
.kko-fe-checks label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }

/* Priority marker on a calendar chip (small round digit at the left). */
.kko-cal-chip-p { flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }

/* Log, back link, pager, gate. */
.kko-fe-log { background: var(--kko-navy); color: #E2E8F0; padding: 12px 14px; border-radius: 10px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.kko-fe-back { color: var(--kko-meta); font-weight: 700; font-size: 13px; }
.kko-fe-pager { display: flex; gap: 14px; align-items: center; margin: 12px 0; font-size: 13px; color: var(--kko-meta); }
.kko-fe-gate { padding: 40px 20px; text-align: center; color: var(--kko-body); }

/* Budget-to-cost indicator on the kit form. Over budget = warm/attention; under = neutral. */
.kko-fe-budget { display: inline-block; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; margin: 4px 0 12px; }
.kko-fe-budget-under { background: var(--kko-alt); color: var(--kko-body); border: 1px solid var(--kko-border); }
.kko-fe-budget-over { background: rgba(245,200,66,.20); color: #8a6d0c; }

/* Any menu inside the module must be viewport-positioned (containers clip absolute menus). */
.kko-fe-menu { position: fixed; }

/* Negative / oversold inventory cell (Reports). */
.kko-fe-neg { color: #b32d2e; font-weight: 600; }

/* Program summaries — computed quick-view chips (ported from the Notion formulas). */
.kko-summaries { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 22px; padding: 16px 18px; background: var(--kko-alt); border: 1px solid var(--kko-border); border-radius: 12px; }
.kko-summary-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kko-meta); margin-bottom: 6px; }
.kko-summary-val { line-height: 2; color: var(--kko-body); font-weight: 700; }
.kko-sum-chip { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; margin: 2px 2px 2px 0; }
.kko-sum-meta { color: var(--kko-body); font-weight: 700; font-size: 13px; }
.kko-sum-purple { background: #efe3fb; color: #6b2fb0; }
.kko-sum-blue   { background: #D9EFF5; color: #1D4A60; }
.kko-sum-pink   { background: #fce0ec; color: #b02463; }
.kko-sum-orange { background: #fdeacf; color: #a5641a; }
.kko-sum-green  { background: rgba(30,193,161,.16); color: #0f7c66; }
.kko-sum-red    { background: #fdecec; color: #c0342f; font-weight: 800; }
.kko-sum-gray   { background: #eef2f5; color: #5A6A7A; border: 1px solid var(--kko-border); }

/* Kitting progress bar (program summaries panel + Programs list). */
.kko-prog { display: inline-flex; align-items: center; gap: 8px; }
.kko-prog-bar { display: inline-block; width: 96px; height: 8px; background: var(--kko-alt); border: 1px solid var(--kko-border); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.kko-prog-fill { display: block; height: 100%; background: var(--kko-primary); border-radius: 999px; }
.kko-prog-fill.is-done { background: var(--kko-teal); }
.kko-prog-label { font-size: 12px; font-weight: 700; color: var(--kko-navy); white-space: nowrap; }
/* Programs-list summary columns */
.kko-sum-cell { max-width: 340px; }
.kko-sum-cell .kko-sum-chip { margin: 1px 2px 1px 0; }
.kko-prog-cell { white-space: nowrap; }

/* Collapsible form sections (program form) — each section is a bordered card with a header
   you can click to collapse. Built on native <details>/<summary>, so it works without JS. */
.kko-section { border: 1px solid var(--kko-border); border-radius: 12px; margin: 0 0 16px; background: #fff; overflow: hidden; }
.kko-section > .kko-section-head {
	list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; font-weight: 800; font-size: 15px; color: var(--kko-navy); background: var(--kko-alt);
	border-bottom: 1px solid transparent;
}
.kko-section > .kko-section-head::-webkit-details-marker { display: none; }
.kko-section > .kko-section-head::before {
	content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-left: 2px;
	border-right: 2px solid var(--kko-primary); border-bottom: 2px solid var(--kko-primary);
	transform: rotate(-45deg); transition: transform .15s ease;
}
.kko-section[open] > .kko-section-head::before { transform: rotate(45deg); }
.kko-section[open] > .kko-section-head { border-bottom-color: var(--kko-border); }
.kko-section > .kko-section-head:hover { background: var(--kko-blue-100); }
.kko-section-body { padding: 18px 18px 6px; }
.kko-section-body .kko-fe-form { max-width: 100%; margin: 0; }
.kko-section-body > .kko-fe-muted:first-child { margin-top: -4px; margin-bottom: 14px; }

/* List search box. */
.kko-fe-search { display: flex; gap: 8px; align-items: center; margin: 2px 0 16px; flex-wrap: wrap; }
.kko-fe-search input[type=search] {
	flex: 0 1 340px; min-width: 200px; padding: 9px 12px; border: 1px solid var(--kko-border); border-radius: 8px;
	font: inherit; color: var(--kko-navy); background: #fff;
}
.kko-fe-search input[type=search]:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.12); }
.kko-fe-search-clear { color: var(--kko-meta); font-weight: 700; font-size: 13px; }

/* Image fields backed by the WP media library. */
.kko-media { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kko-media-preview img { max-width: 160px; max-height: 160px; border: 1px solid var(--kko-border); border-radius: 10px; display: block; }
.kko-media-actions { display: flex; gap: 8px; }
.kko-media-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.kko-media-grid:empty { display: none; }
.kko-media-item { position: relative; display: inline-block; }
.kko-media-item img { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--kko-border); border-radius: 10px; display: block; }
.kko-media-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; border-radius: 999px; border: 1px solid var(--kko-border); background: #fff; color: var(--kko-red); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(29,48,64,.18); }
.kko-media-x:hover { background: #fdf1f1; }

/* Contents editor: wide Supply column, compact Qty + Tag (long supply names need the room). */
.kko-contents-table th, .kko-contents-table td { vertical-align: middle; }
.kko-contents-table td:first-child { width: auto; }
.kko-contents-table th:nth-child(2), .kko-contents-table td:nth-child(2) { width: 72px; }
.kko-contents-table th:nth-child(3), .kko-contents-table td:nth-child(3) { width: 168px; }
.kko-contents-table .kko-combo { max-width: 100%; width: 100%; }
.kko-contents-table select { width: 100%; }
.kko-contents-table input[type=number] {
	width: 100%; padding: 8px 6px; border: 1px solid var(--kko-border); border-radius: 8px;
	font: inherit; color: var(--kko-navy); background: #fff; text-align: center;
}
.kko-contents-table input[type=number]:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.12); }

/* =========================================================================
 * MOBILE LAYER (v1.7.0 — WH Mobile Design Guidelines §1–11 + Appendix B)
 * The server-rendered .kko-fe-nav rail collapses below 1024 into a top-left
 * grid+chevron MENU BUTTON + bottom sheet of the same page links (suite
 * standard, Calendar 1.0.1 — NOT a hamburger). The bar/sheet live in a JS
 * .kko-fe-wrap OUTSIDE the overflow:hidden .kko-fe; tokens are redefined here
 * because the originals are scoped to .kko-fe. Full-bleed + pin below 768.
 * ========================================================================= */
.kko-fe-wrap {
	--kko-navy: #1D3040; --kko-blue-800: #1D4A60; --kko-blue-600: #347EA0;
	--kko-primary: #439BC0; --kko-blue-300: #7EC4D8; --kko-blue-200: #B3DDE9;
	--kko-blue-100: #D9EFF5; --kko-body: #5A6A7A; --kko-meta: #8A9BAB;
	--kko-border: #D0DCE6; --kko-alt: #F7FAFB;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.kko-fe-wrap * { box-sizing: border-box; }
.kko-mtop { display: none; }
.kko-secsheet { display: none; }

@media (max-width: 1023.98px) {
	.kko-fe-wrap .kko-fe-nav { display: none; }

	.kko-mtop {
		display: flex; align-items: center; gap: 12px;
		position: sticky; top: var(--kko-fixed-top, 0px); z-index: 40;
		background: #fff; border-bottom: 1px solid var(--kko-border);
		padding: 8px 14px; margin: 0;
	}
	.kko-mmenu {
		display: inline-flex; align-items: center; gap: 3px;
		padding: 7px 9px; border: 1px solid var(--kko-border);
		border-radius: 10px; background: #fff; color: var(--kko-navy);
		cursor: pointer; -webkit-appearance: none; appearance: none;
	}
	.kko-mmenu:focus-visible { outline: 2px solid var(--kko-primary); outline-offset: 2px; }
	.kko-mmenu svg { width: 19px; height: 19px; }
	.kko-mmenu-c { display: inline-flex; color: var(--kko-meta); }
	.kko-mmenu-c svg { width: 15px; height: 15px; }
	.kko-mtitle { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--kko-navy); min-width: 0; }
	.kko-mtitle-ico { display: inline-flex; color: var(--kko-primary); }
	.kko-mtitle-ico svg { width: 18px; height: 18px; }
	.kko-mtitle-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.kko-secsheet {
		display: block; position: fixed; inset: 0; z-index: 100000;
		background: rgba(20, 40, 55, .38); opacity: 0; visibility: hidden;
		transition: opacity .18s ease, visibility .18s ease;
	}
	.kko-secsheet.is-open { opacity: 1; visibility: visible; }
	.kko-secsheet-card {
		position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
		border-radius: 16px 16px 0 0; padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
		transform: translateY(100%); transition: transform .22s ease; max-height: 80vh; overflow: auto;
	}
	.kko-secsheet.is-open .kko-secsheet-card { transform: translateY(0); }
	.kko-secsheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--kko-border); margin: 6px auto 10px; }
	.kko-secsheet-hd { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kko-meta); padding: 2px 2px 8px; }
	.kko-secsheet-x { display: inline-flex; padding: 6px; border: none; background: none; color: var(--kko-meta); cursor: pointer; border-radius: 8px; }
	.kko-secsheet-x svg { width: 18px; height: 18px; }
	.kko-sheet-group { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kko-meta); padding: 8px 6px 4px; }
	.kko-sheet-item {
		display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
		padding: 13px 10px; border: none; border-radius: 10px; background: transparent;
		font-family: inherit; font-size: 16px; font-weight: 600; color: var(--kko-navy);
		text-align: left; cursor: pointer; text-decoration: none;
	}
	.kko-sheet-item:hover { color: var(--kko-navy); }
	.kko-sheet-item .kko-nav-ico { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--kko-meta); }
	.kko-sheet-item .kko-nav-ico svg { width: 20px; height: 20px; }
	.kko-sheet-item .kko-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.kko-sheet-item.is-active { background: var(--kko-blue-100); color: var(--kko-blue-800); font-weight: 700; }
	.kko-sheet-item.is-active .kko-nav-ico { color: var(--kko-primary); }
}

@media (max-width: 767.98px) {
	.kko-fe-wrap {
		margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
		width: 100vw; max-width: 100vw; padding: 0; background: #fff;
	}
	.kko-fe-wrap .kko-fe { border-radius: 0; border-left: none; border-right: none; }
	.kko-mtop { padding-top: 12px; }
	.kko-fe input, .kko-fe textarea, .kko-fe select { font-size: 16px; }
}

/* ============================ PURCHASE ORDER DETAIL ============================
   Two-phase workspace: Order mode and Receive mode each expose exactly one editable
   column, so there is one thing to type per row. Numeric inputs are sized to their
   content (5 digits max) instead of stretching to the column, which is what let the
   supply names wrap to four lines in the old layout. */

.kko-po-head { margin-bottom: 14px; }
.kko-po-head h2 { margin-bottom: 6px; }
.kko-po-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--kko-meta); }
.kko-po-meta > span:not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--kko-border); }
.kko-po-head .kko-fe-muted { margin: 8px 0 0; }

/* Summary strip — the four numbers that answer "where is this PO at?". */
.kko-po-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
.kko-po-stat { border: 1px solid var(--kko-border); border-radius: 12px; padding: 10px 12px; background: var(--kko-alt); display: flex; flex-direction: column; gap: 1px; }
.kko-po-stat-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kko-meta); }
.kko-po-stat-v { font-size: 19px; font-weight: 800; color: var(--kko-navy); line-height: 1.25; font-variant-numeric: tabular-nums; }
.kko-po-stat-s { font-size: 11.5px; color: var(--kko-meta); }

/* Mode switch — same lens-tab language as the list views. */
.kko-po-modes { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--kko-border); margin: 0 0 14px; }
.kko-po-mode { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 10px; font-size: 13px; font-weight: 600; color: var(--kko-meta); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.kko-po-mode:hover { color: var(--kko-navy); }
.kko-po-mode.is-on { color: var(--kko-navy); font-weight: 700; border-bottom-color: var(--kko-primary); }
.kko-po-mode-ct { font-size: 11px; font-weight: 700; color: var(--kko-meta); background: var(--kko-alt); border: 1px solid var(--kko-border); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.kko-po-mode.is-on .kko-po-mode-ct { color: var(--kko-blue-800); background: var(--kko-blue-100); border-color: var(--kko-blue-200); }

.kko-po-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.kko-po-bar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kko-po-empty { padding: 18px 0; }

.kko-po-daterow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; background: var(--kko-blue-light); border: 1px solid var(--kko-blue-200); border-radius: 10px; }
.kko-po-daterow label { font-size: 12px; font-weight: 700; color: var(--kko-navy); }
.kko-po-daterow input[type=date] { height: 34px; padding: 0 9px; border: 1px solid var(--kko-border); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--kko-navy); background: #fff; }

.kko-po-tablewrap { overflow-x: auto; }
.kko-po-table { table-layout: auto; }
.kko-po-table tbody td { vertical-align: middle; }
.kko-po-table .kko-num, .kko-po-table th.kko-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kko-po-table .kko-po-supply { width: 38%; }
.kko-po-name { color: var(--kko-navy); font-weight: 700; line-height: 1.3; }
.kko-po-entry { width: 1%; }
.kko-po-rowact { width: 1%; text-align: right; white-space: nowrap; }

/* 5 digits is the largest quantity anyone enters, so the field is sized for 5 digits. */
.kko-fe input.kko-qty {
	width: 78px; height: 34px; padding: 0 9px; text-align: right;
	font-family: inherit; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
	border: 1px solid var(--kko-border); border-radius: 8px; color: var(--kko-navy); background: #fff;
}
.kko-fe input.kko-qty:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.14); }
/* A zero reads as "nothing entered here", so it recedes until it holds a real value. */
.kko-fe input.kko-qty.is-zero { color: var(--kko-meta); font-weight: 500; background: var(--kko-alt); }
.kko-fe input.kko-qty.is-flash { border-color: var(--kko-teal); box-shadow: 0 0 0 3px rgba(30,193,161,.18); }

/* The recommended number IS the button: no extra chrome, no extra width, and the
   column keeps a clean right edge. Dotted underline is the only affordance — do not
   remove it or the control becomes invisible. */
.kko-fe .kko-recnum {
	background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 6px;
	font-family: inherit; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--kko-blue-600); cursor: pointer; border-bottom: 1px dotted var(--kko-blue-300);
}
.kko-fe .kko-recnum:hover { background: var(--kko-blue-100); color: var(--kko-blue-800); border-bottom-color: transparent; }
.kko-fe .kko-recnum:focus-visible { outline: 2px solid var(--kko-primary); outline-offset: 2px; }

.kko-meter { display: block; position: relative; height: 6px; min-width: 78px; border-radius: 999px; background: var(--kko-blue-100); overflow: hidden; }
.kko-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--kko-primary); }
.kko-meter.is-full i { background: var(--kko-teal); }
.kko-meter-lbl { display: block; margin-top: 3px; font-size: 11px; color: var(--kko-meta); font-variant-numeric: tabular-nums; }
.kko-po-prog { width: 15%; min-width: 110px; }

.kko-po-x { color: var(--kko-meta); font-size: 18px; line-height: 1; font-weight: 700; padding: 0 4px; }
.kko-po-x:hover { color: var(--kko-red); }
.kko-po-locked { color: var(--kko-meta); font-size: 12px; cursor: help; }

/* Save bar — states what changed and what the button will do. */
.kko-po-save { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--kko-navy); border-radius: 12px; padding: 10px 14px; margin-top: 14px; }
.kko-po-save-msg { font-size: 12.5px; color: #C9DAE4; }
.kko-po-save-msg strong { color: #fff; }
.kko-po-save-acts { display: flex; gap: 8px; }

.kko-po-post { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--kko-border); border-radius: 10px; background: var(--kko-alt); }

.kko-po-addline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--kko-border); }
.kko-po-addline form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kko-po-addline-lbl { font-size: 12px; font-weight: 700; color: var(--kko-navy); }
.kko-po-addline select { height: 34px; min-width: 220px; padding: 0 9px; border: 1px solid var(--kko-border); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--kko-navy); background: #fff; }

.kko-po-receipts td { vertical-align: middle; }
.kko-po-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--kko-border); }

@media (max-width: 900px) {
	.kko-po-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.kko-po-stats { grid-template-columns: 1fr 1fr; }
	.kko-po-save, .kko-po-post, .kko-po-danger { flex-direction: column; align-items: stretch; }
	.kko-po-save-acts .kko-btn { width: 100%; }
	.kko-po-addline select { min-width: 0; flex: 1 1 100%; }
}

/* PO line + receipt statuses — colour as meaning, neutral default (Style Guide §badges). */
.kko-badge-not-ordered { background: #eef1f4; color: #647686; border-color: transparent; }
.kko-badge-ordered { background: var(--kko-blue-100); color: var(--kko-blue-800); border-color: transparent; }
.kko-badge-partially-received, .kko-badge-pending { background: rgba(245,200,66,.22); color: #8a6d0c; border-color: transparent; }
.kko-badge-received, .kko-badge-posted { background: rgba(30,193,161,.16); color: #0f7c66; border-color: transparent; }
.kko-badge-ready-to-order { background: var(--kko-blue-100); color: var(--kko-blue-800); border-color: transparent; }
.kko-badge-ordering-in-progress, .kko-badge-on-order { background: rgba(245,180,80,.20); color: #a85f13; border-color: transparent; }
.kko-badge-needs-review { background: #fdecec; color: var(--kko-red); border-color: transparent; }
.kko-badge-closed { background: rgba(30,193,161,.16); color: #0f7c66; border-color: transparent; }

/* Back link hoisted above the view content (see KKO_Frontend::back_link). */
.kko-fe-backtop { margin: 0 0 14px; }

/* PO -> Program link. The relationship existed in the data but the PO page had no
   way back to the program, so it read as a dead end. */
.kko-po-program { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 9px 12px; background: var(--kko-blue-light); border: 1px solid var(--kko-blue-200); border-radius: 10px; }
.kko-po-program-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kko-meta); }
.kko-po-program-link { font-weight: 700; color: var(--kko-primary); }
.kko-po-program-link:hover { color: var(--kko-blue-600); text-decoration: underline; }
.kko-po-program .kko-fe-muted { font-size: 12.5px; }

/* ===================== BUILD: KIT CONTENTS (production view) =====================
   The list the build floor works from. Quantity is PER KIT on purpose — the line is
   set up per station, so a builder needs "2 in each box", not the run total. */

.kko-build-contents thead th { vertical-align: bottom; }
.kko-build-contents .kko-th-sub { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--kko-meta); text-transform: none; margin-top: 1px; }
.kko-build-contents td { vertical-align: top; }
.kko-build-contents .kko-num { text-align: right; width: 1%; white-space: nowrap; }
.kko-build-qty { font-size: 17px; font-weight: 800; color: var(--kko-navy); font-variant-numeric: tabular-nums; }
.kko-build-item { color: var(--kko-navy); font-weight: 700; width: 26%; }
.kko-build-ins { color: var(--kko-body); font-size: 13px; line-height: 1.45; }
.kko-build-loc { white-space: nowrap; font-weight: 700; color: var(--kko-blue-800); font-size: 12.5px; }

/* Whole-kit instructions sit above the table; per-item notes sit on their row. */
.kko-kitting-note { background: var(--kko-blue-light); border: 1px solid var(--kko-blue-200); border-radius: 10px; padding: 10px 13px; margin: 0 0 12px; }
.kko-kitting-note-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kko-meta); margin-bottom: 3px; }
.kko-kitting-note p { margin: 0; color: var(--kko-body); font-size: 13px; line-height: 1.5; }

/* Substitutions recorded on the build change what actually goes in the box. */
.kko-build-subs { margin-top: 12px; padding: 10px 13px; border: 1px solid var(--kko-amber); border-radius: 10px; background: #FEFAEC; }
.kko-build-subs-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6d0c; margin-bottom: 5px; }
.kko-build-subs ul { margin: 0; padding-left: 18px; }
.kko-build-subs li { font-size: 13px; margin: 2px 0; color: var(--kko-body); }
.kko-build-subs-out { font-weight: 700; color: var(--kko-red); }
.kko-build-subs-in { font-weight: 700; color: #0f7c66; }

/* Per-item instructions field in the kit contents editor. */
.kko-fe textarea.kko-content-ins { width: 100%; min-width: 200px; font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--kko-border); border-radius: 8px; color: var(--kko-navy); resize: vertical; }
.kko-fe textarea.kko-content-ins:focus { outline: none; border-color: var(--kko-primary); box-shadow: 0 0 0 3px rgba(67,155,192,.12); }


@media (max-width: 640px) {
	.kko-build-item { width: auto; }
	.kko-build-contents .kko-build-loc { font-size: 12px; }
}

/* ===================== BUILDS LIST + CALENDAR (facelift) =====================
   Same language as the PO page: stat strip, lens tabs, progress meters, badges. */

.kko-builds-stats { margin-bottom: 14px; }
.kko-po-stat.is-alert { background: #FDF1F1; border-color: #F3C6C5; }
.kko-po-stat.is-alert .kko-po-stat-v { color: var(--kko-red); }

/* Give the table room and let the wrapper scroll sideways rather than compressing
   every column into an unreadable stack. */
.kko-builds-table { min-width: 1120px; }
.kko-builds-table td { vertical-align: middle; }
.kko-builds-table .kko-num, .kko-builds-table th.kko-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Keep the meter a fixed, scannable width instead of stretching across the column. */
.kko-builds-table .kko-po-prog { width: 128px; min-width: 128px; }
.kko-builds-table .kko-po-prog .kko-meter { min-width: 0; width: 100%; }
.kko-build-cell { width: 30%; min-width: 220px; }
/* Build name clamps at two lines; kit name below stays on one. Both carry the full
   text in a title tooltip. */
.kko-build-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--kko-primary); font-weight: 700; line-height: 1.3; }
.kko-build-sub { display: block; font-size: 12px; color: var(--kko-meta); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Program: fixed width, one line, ellipsis. The column exists to be clicked, not read
   in full — a wrapping name was pushing rows to five lines tall. */
.kko-build-prog { width: 200px; max-width: 200px; }
.kko-build-prog > * { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Past its in-hands date and not finished — the row that needs attention first. */
.kko-builds-table tr.is-late td { background: #FEF7F7; }
.kko-builds-table tr.is-late:hover td { background: #FDEFEF; }
.kko-late { color: var(--kko-red); font-weight: 700; }

/* The calendar chip now stacks: title row, then program, progress and meta lines,
   so the calendar carries the same facts as the list instead of a bare name. */
.kko-cal-chip { flex-direction: column; align-items: stretch; gap: 3px; }
.kko-cal-chip-top { display: flex; align-items: flex-start; gap: 5px; width: 100%; }
.kko-cal-chip-prog { font-size: 10.5px; font-weight: 600; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kko-cal-chip-bar { position: relative; display: block; height: 3px; border-radius: 999px; background: rgba(29,48,64,.14); overflow: hidden; }
.kko-cal-chip-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: currentColor; opacity: .75; }
.kko-cal-chip-meta { font-size: 10px; font-weight: 600; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kko-cal-chip-n { font-size: 10.5px; font-weight: 500; opacity: .8; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kko-cal-chip.is-late { box-shadow: inset 3px 0 0 var(--kko-red); }

/* ===================== SHARED LIST FURNITURE (all views) =====================
   stat_strip() / lens_tabs() / meter() / trunc_cell() render the same everywhere, so
   every dashboard in the plugin reads with one vocabulary. */

/* A name cell: one line, ellipsis, full value in a title tooltip. Columns exist to be
   scanned and clicked; wrapping a long name to five lines helps nobody. */
.kko-name-cell { max-width: 260px; }
.kko-trunc { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kko-trunc > a, .kko-trunc > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rows needing attention — overdue, unmatched, out of stock. One treatment, one meaning. */
.kko-fe-table tr.is-late td { background: #FEF7F7; }
.kko-fe-table tr.is-late:hover td { background: #FDEFEF; }

.kko-fe-table .kko-num, .kko-fe-table th.kko-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.kko-supplies-table, .kko-orders-table, .kko-unkitting-table, .kko-shipping-table, .kko-tasks-table { min-width: 900px; }
.kko-completed-table { min-width: 560px; }
.kko-supplies-table .kko-po-prog { width: 128px; min-width: 128px; }
.kko-supplies-table .kko-po-prog .kko-meter { min-width: 0; width: 100%; }

/* Dashboard: section rules between the two stat strips, then plain nav cards. */
.kko-fe-card-nav { min-height: 0; padding: 14px 16px; }
.kko-fe-card-nav .kko-fe-card-label { font-size: 14px; font-weight: 700; color: var(--kko-navy); }

/* Inventory statuses not previously styled (KKO_Compute::inventory_status). */
.kko-badge-overstocked { background: var(--kko-blue-100); color: var(--kko-blue-800); border-color: transparent; }
.kko-badge-no-par-level { background: #eef1f4; color: #647686; border-color: transparent; }

/* ===================== BUILD DAY CAPACITY (calendar) =====================
   A day's scheduled work against the time available. Capacity is measured in time
   because kits aren't comparable — 250 Pixel kits and 250 Max kits are different days. */

.kko-cal-load { margin: 2px 0 4px; }
.kko-cal-load-bar { position: relative; display: block; height: 3px; border-radius: 999px; background: var(--kko-blue-100); overflow: hidden; }
.kko-cal-load-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--kko-primary); }
.kko-cal-load-lbl { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--kko-meta); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kko-cal-load.is-over .kko-cal-load-bar { background: #F6D6D5; }
.kko-cal-load.is-over .kko-cal-load-bar i { background: var(--kko-red); }
.kko-cal-load.is-over .kko-cal-load-lbl { color: var(--kko-red); }
/* Over-capacity days are tinted, not blocked — a full day is a judgement call. */
.kko-cal-day.is-over { background: #FEF7F7; }

/* PO list + Requests tables — same widths and truncation rules as the others. */
.kko-pos-table, .kko-requests-table { min-width: 1000px; }
.kko-requests-table .kko-po-prog { width: 128px; min-width: 128px; }
.kko-requests-table .kko-po-prog .kko-meter { min-width: 0; width: 100%; }

/* Kits list — wide enough that no column header has to wrap; scrolls sideways instead. */
.kko-kits-table { min-width: 980px; }
.kko-kits-table .kko-name-cell { max-width: 300px; }
.kko-kits-table td:nth-child(3) .kko-trunc { max-width: 220px; }