/* Job Shop pages. Built on the shared km- tokens so light/dark theming and density follow the rest of Kolmadia.
   Lists are compact aligned rows (not cards); wide tables scroll inside their own wrapper, never the page. */
.mfg-page { display: grid; gap: 16px; min-width: 0; }
.mfg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mfg-toolbar .mfg-grow { flex: 1 1 220px; min-width: 0; }
.mfg-toolbar input, .mfg-toolbar select { min-height: 36px; max-width: 100%; }
.mfg-notice { padding: 9px 12px; border: 1px solid var(--km-line); border-radius: 9px; font-size: .88rem; }
.mfg-notice.error { border-color: var(--km-red); color: var(--km-red); }
.mfg-notice.success { border-color: var(--mfg-ok, var(--km-green)); color: var(--mfg-ok-text, var(--km-green-dark)); }
.mfg-notice.warn { border-color: var(--km-amber); color: var(--km-amber); }

.mfg-table-wrap { overflow-x: auto; border: 1px solid var(--km-line); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); }
.mfg-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mfg-table th { padding: 8px 12px; text-align: left; white-space: nowrap; color: var(--km-muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--km-line); }
.mfg-table td { padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--km-line); }
.mfg-table tr:last-child td { border-bottom: 0; }
.mfg-table tbody tr.mfg-clickable { cursor: pointer; }
.mfg-table tbody tr.mfg-clickable:hover { background: var(--km-soft); }
.mfg-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mfg-table .mfg-actions { white-space: nowrap; text-align: right; }
/* app-polish turns every "*-actions" element into a flex row; on a table cell that collapses the column and
   stacks button labels letter by letter. Keep action cells as table cells with one-line buttons. */
.app-layout .page-content .mfg-table td.mfg-actions { display: table-cell; }
.app-layout .page-content .mfg-table td.mfg-actions .km-button { white-space: nowrap; }
/* Record numbers (J-000001, NCR-000002) must read as one token, even in narrow phone tables. */
.mfg-table td > a:not(.km-button) { white-space: nowrap; }
.mfg-table .mfg-nowrap { white-space: nowrap; }
.mfg-table .mfg-code { white-space: nowrap; }
.mfg-table .mfg-actions > * + * { margin-left: 6px; }
.mfg-table .mfg-strong { font-weight: 600; }
.mfg-empty, .mfg-table td.mfg-none { padding: 20px 14px; color: var(--km-muted); text-align: left; }

.mfg-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--km-line); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.mfg-badge.ok { border-color: var(--mfg-ok, var(--km-green)); color: var(--mfg-ok-text, var(--km-green-dark)); background: var(--mfg-ok-soft, var(--km-green-soft)); }
.mfg-badge.warn { border-color: var(--km-amber); color: var(--km-amber); }
.mfg-badge.bad { border-color: var(--km-red); color: var(--km-red); }
.mfg-badge.muted { color: var(--km-muted); }

.mfg-stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--km-line); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); }
.mfg-stat { flex: 1 1 130px; padding: 10px 14px; border-right: 1px solid var(--km-line); min-width: 0; }
.mfg-stat:last-child { border-right: 0; }
.mfg-stat .label { color: var(--km-muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.mfg-stat .value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mfg-stat.bad .value { color: var(--km-red); }

.mfg-flow { overflow: hidden; border: 1px solid var(--km-line); border-radius: 4px; background: var(--km-surface); }
.mfg-flow-heading { padding: 14px 16px; display: flex; align-items: end; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--km-line); }
.mfg-flow-heading h2 { margin: 2px 0 0; font-size: 1.05rem; }
.mfg-flow-heading p { max-width: 520px; margin: 0; color: var(--km-muted); font-size: .82rem; text-align: right; }
.mfg-flow-eyebrow { color: var(--km2-accent); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.mfg-flow-steps { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); }
.mfg-flow-steps a { min-width: 0; padding: 13px 12px; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; position: relative; border-right: 1px solid var(--km-line); color: var(--km-ink); text-decoration: none; }
.mfg-flow-steps a:last-child { border-right: 0; }
.mfg-flow-steps a:hover { background: var(--km-soft); }
.mfg-flow-steps a > span { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--km-line); border-radius: 50%; color: var(--km-muted); font-size: .7rem; font-weight: 800; }
.mfg-flow-steps a.complete > span { border-color: var(--km2-accent); background: var(--km2-accent); color: #fff; }
.mfg-flow-steps a.active { box-shadow: inset 0 -3px 0 var(--km2-accent); }
.mfg-flow-steps strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.mfg-flow-steps small { color: var(--km-muted); font-size: .69rem; }

.mfg-section-title { display: flex; align-items: center; gap: 6px; margin: 4px 0 -6px; font-size: .95rem; font-weight: 600; }
.mfg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.mfg-form label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--km-muted); min-width: 0; }
.mfg-form label > input, .mfg-form label > select, .mfg-form label > textarea { min-height: var(--km-control-height, 40px); font-weight: 400; color: var(--km-ink); min-width: 0; }
.mfg-form .wide { grid-column: 1 / -1; }
/* Form labels: a fixed-height caption row so every field lines up across columns, whether or not its caption
   carries a "?" hint. The hint sits inline after the caption instead of becoming its own grid row. */
.app-layout.mfg-shell .mfg-form label { grid-template-rows: 20px auto; align-content: start; gap: 6px !important; }
.app-layout.mfg-shell .mfg-form label:has(> .mfg-hint) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
/* Outweighs the dialog's scoped `label:has(> input...) { gap: 9px !important }`, which would push the "?" away from its caption. */
.app-layout.mfg-shell .form-dialog-content .mfg-form label:has(> .mfg-hint):has(> input:not([type="checkbox"]):not([type="radio"]), > select, > textarea) { column-gap: 0 !important; }
.app-layout.mfg-shell .mfg-form label:has(> .mfg-hint) > .mfg-hint { justify-self: start; margin-top: 0; margin-bottom: 0; }
.app-layout.mfg-shell .mfg-form label:has(> .mfg-hint) > :not(.mfg-hint) { grid-column: 1 / -1; align-self: stretch; }
/* Job Shop forms are dense (part, quote, job); give their dialogs more room than the 640px default. */
.app-layout.mfg-shell .form-dialog { width: min(820px, calc(100vw - 32px)) !important; }
.mfg-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mfg-check { display: flex !important; align-items: center; gap: 8px; }
.mfg-check input { width: auto; min-height: 0 !important; }

.mfg-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--km-line); margin-bottom: 12px; }
.mfg-tabs button { min-height: 34px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--km-muted); font-weight: 600; cursor: pointer; }
.mfg-tabs button.active { color: var(--km-ink); border-bottom-color: var(--km-green); }
.mfg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--km-muted); font-size: .85rem; }
.mfg-meta b { color: var(--km-ink); font-weight: 600; }
.mfg-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.mfg-inline-form label { display: grid; gap: 3px; font-size: .75rem; font-weight: 600; color: var(--km-muted); }
.mfg-inline-form input, .mfg-inline-form select { min-height: 36px; }
.mfg-clock { padding: 12px 14px; border: 1px solid var(--km-green); border-radius: var(--km-radius-control, 9px); background: var(--km-green-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mfg-clock strong { font-weight: 600; }

.mfg-hint { position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle; margin-left: 6px; }
.mfg-hint-btn { display: inline-grid !important; place-items: center !important; width: 19px !important; min-width: 19px !important; height: 19px !important; min-height: 19px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--km-line) !important; border-radius: 50% !important; background: transparent !important; color: var(--km-muted) !important; box-shadow: none !important; font-size: .7rem !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer; }
.mfg-hint-btn:hover, .mfg-hint-btn:focus-visible { color: var(--km-ink); border-color: var(--km-muted); }
.mfg-hint-bubble { position: absolute; z-index: 30; top: 24px; left: 0; width: max-content; max-width: min(300px, 80vw); padding: 8px 10px; border: 1px solid var(--km-line); border-radius: 8px; background: var(--km-surface); color: var(--km-ink); box-shadow: var(--km-shadow); font-size: .8rem; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; }
.app-layout.mfg-shell .mfg-page button.mfg-hint-btn,
.app-layout.mfg-shell .form-dialog button.mfg-hint-btn {
    width: 19px !important; min-width: 19px !important; height: 19px !important; min-height: 19px !important;
    display: inline-grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important; background: transparent !important; box-shadow: none !important;
    font-size: .7rem !important; line-height: 1 !important; box-sizing: border-box !important;
}

.mfg-signup { width: min(560px, 100%); margin: 0 auto; display: grid; gap: 14px; }
@media (max-width: 640px) {
    .mfg-stat { flex-basis: 45%; border-bottom: 1px solid var(--km-line); }
    .mfg-table th, .mfg-table td { padding: 7px 9px; }
}


/* Job Shop identity: a steel-and-safety-orange palette so the shop app reads as its own product,
   not the green Kolmadia workspace. Tokens are re-declared (not just the km2 ones) because the
   km- aliases are resolved at :root and would not follow a scoped km2 override. */
.mfg-shell {
    --km2-canvas: #eceff2; --km2-surface: #ffffff; --km2-surface-2: #f4f6f8; --km2-surface-3: #e6eaee;
    --km2-sidebar: #14181d; --km2-text: #1a2027; --km2-muted: #5d6874;
    --km2-border: #d3d9df; --km2-border-strong: #bcc5cd;
    --km2-accent: #d05a14; --km2-accent-hover: #ad4a0f; --km2-accent-soft: #fbe8db;
    --km-ink: var(--km2-text); --km-muted: var(--km2-muted); --km-canvas: var(--km2-canvas);
    --km-surface: var(--km2-surface); --km-line: var(--km2-border); --km-green: var(--km2-accent);
    --km-green-dark: var(--km2-accent-hover); --km-green-soft: var(--km2-accent-soft);
    --km-text: var(--km2-text); --km-border: var(--km2-border); --km-accent: var(--km2-accent);
    --km-surface-soft: var(--km2-canvas); --km-active: var(--km2-surface-3); --km-panel: var(--km2-surface);
    --km-input: var(--km2-surface-2); --km-input-bg: var(--km2-surface-2); --km-soft: var(--km2-surface-2);
    --ui-accent: var(--km2-accent);
    /* "Good" stays green: the orange accent is the brand, not a result, and an orange "OK" or success
       message reads like a warning next to a red error. */
    --mfg-ok: #1f8a5b; --mfg-ok-text: #146c46; --mfg-ok-soft: #e3f4ea;
    background: var(--km2-canvas); color: var(--km2-text);
}
html[data-theme="dark"] .mfg-shell {
    --km2-canvas: #111418; --km2-surface: #1a1e24; --km2-surface-2: #20252c; --km2-surface-3: #282e36;
    --km2-sidebar: #0b0d10; --km2-text: #eef1f4; --km2-muted: #98a3ae;
    --km2-border: #2f363f; --km2-border-strong: #3d4651;
    --km2-accent: #ff8a3d; --km2-accent-hover: #ffa262; --km2-accent-soft: #3a2416;
    --mfg-ok: #3fbf86; --mfg-ok-text: #5fd39c; --mfg-ok-soft: #15301f;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mfg-shell {
        --km2-canvas: #111418; --km2-surface: #1a1e24; --km2-surface-2: #20252c; --km2-surface-3: #282e36;
        --km2-sidebar: #0b0d10; --km2-text: #eef1f4; --km2-muted: #98a3ae;
        --km2-border: #2f363f; --km2-border-strong: #3d4651;
        --km2-accent: #ff8a3d; --km2-accent-hover: #ffa262; --km2-accent-soft: #3a2416;
    --mfg-ok: #3fbf86; --mfg-ok-text: #5fd39c; --mfg-ok-soft: #15301f;
    }
}

/* Shop nav: steel rail with an orange active marker instead of the green workspace rail. */
.app-layout.mfg-shell .nav-menu { background: var(--km2-sidebar); color: #d6dce2; }
.app-layout.mfg-shell .nav-header h2::before { background: var(--km2-accent); color: #fff; border-radius: 4px; }
.app-layout.mfg-shell .nav-role-text,
.app-layout.mfg-shell .nav-group-title { color: #8a96a2; }
.app-layout.mfg-shell .nav-item,
.app-layout.mfg-shell .nav-link { color: #c3ccd5; border-radius: 4px; }
.app-layout.mfg-shell .nav-item::before,
.app-layout.mfg-shell .nav-link::before { border-color: #6b7783; border-radius: 1px; }
.app-layout.mfg-shell .nav-item.active,
.app-layout.mfg-shell .nav-link.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 3px 0 0 var(--km2-accent); }
.app-layout.mfg-shell .topbar { border-bottom: 2px solid var(--km2-accent); }
.app-layout.mfg-shell .topbar-kicker { color: var(--km2-accent); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.app-layout.mfg-shell .topbar-context > div { display: grid; gap: 2px; min-width: 0; }
.app-layout.mfg-shell .workspace { background-image: linear-gradient(rgba(91,103,115,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(91,103,115,.055) 1px, transparent 1px); background-size: 32px 32px; }
.app-layout.mfg-shell .page-content { background: transparent; }
.mfg-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 2px 0 14px; }
.mfg-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--km2-accent); border-radius: 4px; color: var(--km2-accent); font: 900 19px/1 system-ui, sans-serif; transform: skew(-4deg); }
.mfg-brand > span:last-child { display: grid; gap: 1px; }
.mfg-brand small { color: #9aa5af; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mfg-brand strong { color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .1em; }
.mfg-shell .km-panel, .mfg-shell .mfg-table-wrap, .mfg-shell .mfg-stats { border-radius: 4px; }
.mfg-shell .km-button-primary { background: var(--km2-accent); border-color: var(--km2-accent); color: #fff; }
.mfg-shell .km-button-primary:hover { background: var(--km2-accent-hover); border-color: var(--km2-accent-hover); }
.mfg-signup-page { min-height: 100vh; padding: clamp(16px, 4vw, 48px) 16px; box-sizing: border-box; }

/* The shared workspace moves opt-in tabs into the top Back-button strip. Job Shop has no
   global Back strip, so shared pages keep tabs in their natural document position. */
@media (min-width: 901px) {
    .app-layout.mfg-shell .page-content .page-section-tabs {
        position: static !important; inset: auto !important; width: 100%;
        min-height: 42px; margin: 0 !important; padding: 0 0 6px !important;
        overflow-x: auto; overflow-y: hidden;
    }
    .app-layout.mfg-shell { grid-template-columns: 252px minmax(0, 1fr) !important; }
    .app-layout.mfg-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr) !important; }
    .app-layout.mfg-shell > .desktop-sidebar { display: block !important; width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 1050px) {
    .mfg-flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mfg-flow-steps a:nth-child(3) { border-right: 0; }
    .mfg-flow-steps a:nth-child(-n+3) { border-bottom: 1px solid var(--km-line); }
}
@media (max-width: 640px) {
    .mfg-flow-heading { align-items: start; flex-direction: column; gap: 6px; }
    .mfg-flow-heading p { text-align: left; }
    .mfg-flow-steps { grid-template-columns: 1fr 1fr; }
    .mfg-flow-steps a:nth-child(3) { border-right: 1px solid var(--km-line); }
    .mfg-flow-steps a:nth-child(even) { border-right: 0; }
    .mfg-flow-steps a:nth-child(-n+4) { border-bottom: 1px solid var(--km-line); }
}

/* Job Shop navigation uses its real glyphs, not the generic workspace's extra dot marker. */
.app-layout.mfg-shell .nav-menu .nav-item,
.app-layout.mfg-shell .nav-menu .nav-link {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 0 12px !important;
}
.app-layout.mfg-shell .nav-menu .nav-item::before,
.app-layout.mfg-shell .nav-menu .nav-link::before { display: none !important; }
.app-layout.mfg-shell .nav-item-icon { width: 22px !important; min-width: 22px; margin: 0 !important; text-align: center; }
.app-layout.mfg-shell .nav-group-title { gap: 11px !important; }
.app-layout.mfg-shell .nav-group-icon { width: 22px !important; min-width: 22px; margin: 0 !important; }
.app-layout.mfg-shell.sidebar-collapsed .mfg-brand { display: none; }
.app-layout.mfg-shell.sidebar-collapsed .nav-menu .nav-item { justify-content: center !important; gap: 0 !important; padding: 0 !important; }
.app-layout.mfg-shell.sidebar-collapsed .nav-item-icon { margin: 0 !important; }

/* Keep shared page headings and their compact help affordances aligned in the shop shell. */
.mfg-shell .km-page-heading h1,
.mfg-shell .panel-heading h2,
.mfg-shell .mfg-section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
/* The app-wide "[class$=-title]" headline tracking is for page titles; at section size it jams words together. */
.mfg-shell .mfg-page .mfg-section-title, .mfg-shell .form-dialog .mfg-section-title { letter-spacing: normal; }
.mfg-table td.mfg-notes-col { min-width: 240px; }
.app-layout.mfg-shell .km-page-heading button.km-help-icon,
.app-layout.mfg-shell .panel-heading button.km-help-icon {
    width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important;
    display: inline-grid !important; place-items: center !important; align-self: center !important;
    flex: 0 0 20px; margin: 0 0 0 8px !important; padding: 0 !important; box-sizing: border-box !important;
    border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important;
    font-size: 12px !important; line-height: 1 !important;
}

/* Job traveler: a plain, high-contrast sheet meant for paper. */
.mfg-traveler-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.mfg-traveler-head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--km-ink); padding-bottom: 12px; margin-bottom: 12px; }
.mfg-traveler-head h1 { margin: 2px 0 4px; font-size: 2rem; letter-spacing: .02em; }
.mfg-traveler-head p { margin: 0; }
.mfg-traveler-head dl { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 6px 24px; margin: 0; }
.mfg-traveler-head dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--km-muted); }
.mfg-traveler-head dd { margin: 0; font-weight: 600; }
.mfg-traveler-notes { margin: 0 0 12px; }
.mfg-traveler-instructions { margin-top: 3px; font-size: .8rem; color: var(--km-muted); white-space: pre-wrap; }
.mfg-traveler-table td.mfg-traveler-blank { min-width: 70px; height: 34px; border-left: 1px solid var(--km-line); }
.mfg-traveler-final { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 22px; font-size: .9rem; }
@media print {
    .app-layout.mfg-shell .desktop-sidebar, .app-layout.mfg-shell .mobile-menu-panel, .app-layout.mfg-shell .mobile-menu-overlay, .app-layout.mfg-shell .topbar, .app-layout.mfg-shell .mfg-traveler-actions { display: none !important; }
    .app-layout.mfg-shell, .app-layout.mfg-shell .workspace, .app-layout.mfg-shell .page-content { display: block !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .mfg-traveler, .mfg-traveler * { color: #000 !important; background: transparent !important; }
    .mfg-traveler-table { page-break-inside: auto; } .mfg-traveler-table tr { page-break-inside: avoid; }
}

/* Quality inspection */
.mfg-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mfg-char { display: grid; gap: 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--km-line); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); min-width: 0; }
.mfg-char-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mfg-char-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mfg-inspect-table td input:not([type="checkbox"]), .mfg-inspect-table td select { width: 100%; min-width: 0; max-width: 220px; min-height: 36px; }
.mfg-inspect-table .mfg-note-input { display: block; margin-top: 6px; max-width: 320px; }
.mfg-stat.warn .value { color: var(--km-amber); }
@media (max-width: 720px) {
    .mfg-inspect-table td input:not([type="checkbox"]), .mfg-inspect-table td select, .mfg-inspect-table .mfg-note-input { max-width: 100%; }
}

/* Schedule board: work centers down, working days across; each cell shaded by how full the day is. */
.mfg-board th.mfg-board-day { text-align: center; font-size: .66rem; line-height: 1.25; padding: 6px 4px; }
.mfg-board .mfg-board-center { position: sticky; left: 0; z-index: 1; background: var(--km-surface); white-space: nowrap; }
.mfg-board td.mfg-board-cell { min-width: 44px; padding: 6px 4px; text-align: center; font-size: .74rem; font-variant-numeric: tabular-nums; cursor: pointer; border-left: 1px solid var(--km-line); }
.mfg-board .week { border-left: 2px solid var(--km-muted) !important; }
.mfg-board-cell.load-low { background: var(--mfg-ok-soft, var(--km-green-soft)); color: var(--mfg-ok-text, var(--km-green-dark)); }
.mfg-board-cell.load-mid { background: color-mix(in srgb, var(--km-amber) 22%, transparent); color: var(--km-ink); }
.mfg-board-cell.load-full { background: color-mix(in srgb, var(--km-red) 20%, transparent); color: var(--km-ink); font-weight: 600; }
.mfg-board-legend { align-items: center; }
/* Operations on a picked day: drag one onto another day of the same work center to pin it there. */
.mfg-drag-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mfg-drag-op { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--km-line); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); cursor: grab; font-size: .84rem; }
.mfg-drag-op.pinned { border-color: var(--km-muted); }
.mfg-drag-op .km-button { padding: 2px 8px; min-height: 0; }
.mfg-board td.mfg-board-cell.drop-target { outline: 2px dashed var(--km2-accent, var(--km-green-dark)); outline-offset: -3px; }
.mfg-board-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; border-radius: 3px; border: 1px solid var(--km-line); }
@media print {
    .mfg-no-print { display: none !important; }
}

/* Code 39 barcodes on the traveler: scanned at the time clock. Always black on white, even in dark mode. */
.mfg-barcode { display: block; max-width: 100%; background: #fff; }
.mfg-traveler-head .mfg-barcode { margin-top: 8px; }
.mfg-traveler-code { margin-top: 4px; }
.mfg-table tr.mfg-scanned td { background: var(--km-green-soft); }
.mfg-board-cell.closed { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--km-line) 5px 6px); color: var(--km-muted); }
.mfg-board-cell { position: relative; }
.mfg-board-note { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--km-amber); }
.mfg-link { padding: 0; border: 0; background: none; color: var(--km2-accent, var(--km-green-dark)); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.mfg-docs { display: grid; gap: 8px; }
.mfg-skills td.mfg-skill-cell { min-width: 90px; text-align: center; cursor: pointer; border-left: 1px solid var(--km-line); }
.mfg-skills td.mfg-skill-cell:hover { background: var(--km-soft); }
.mfg-skills th { text-align: center; }
.mfg-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--km-amber); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); font-size: .88rem; }
.mfg-attention a.mfg-badge { text-decoration: none; }

/* A bare select in a toolbar sizes to its content instead of taking the whole row. */
.mfg-toolbar > select { width: auto; flex: 0 0 auto; }
/* Inline forms: a label's "?" sits beside its text, with the field on the row below (as in .mfg-form). */
.mfg-inline-form label:has(> .mfg-hint) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0; }
.mfg-inline-form label:has(> .mfg-hint) > .mfg-hint { justify-self: start; }
.mfg-inline-form label:has(> .mfg-hint) > :not(.mfg-hint) { grid-column: 1 / -1; }
.mfg-table td.mfg-text-col { min-width: 140px; }
.app-layout.mfg-shell .mfg-page .mfg-toolbar > select { width: auto !important; flex: 0 0 auto !important; }
.mfg-table td.mfg-label-col { min-width: 100px; }

/* Gauge calibration stickers: only show when printing the Gauges page. Sized for 2.25 x 1.25 in labels. */
.mfg-gauge-labels { display: none; }
@media print {
    .mfg-gauge-labels { display: grid; grid-template-columns: repeat(3, 2.25in); gap: .12in; }
    .mfg-gauge-label { display: grid; gap: 1px; justify-items: center; align-content: center; box-sizing: border-box; width: 2.25in; height: 1.25in; padding: .06in; overflow: hidden; border: 1px dashed #999; page-break-inside: avoid; background: #fff; text-align: center; font-size: 7.5pt; line-height: 1.2; }
    /* Black on white whatever the screen theme: the dark theme's heading color (set with !important and
       -webkit-text-fill-color) would otherwise print the gauge number pale grey. Same for badge cards. */
    .mfg-gauge-label, .mfg-gauge-label *, .mfg-badge-card, .mfg-badge-card *,
    html[data-theme] .app-layout .page-content .mfg-gauge-label, html[data-theme] .app-layout .page-content .mfg-gauge-label *,
    html[data-theme] .app-layout .page-content .mfg-badge-card, html[data-theme] .app-layout .page-content .mfg-badge-card * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
    .mfg-gauge-label strong { font-size: 11pt; }
    .mfg-gauge-label span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 7.5pt; }
    .mfg-gauge-label .due { font-weight: 700; }
    .mfg-gauge-label .mfg-barcode, .mfg-gauge-label svg { max-width: 2.1in; height: .36in; }
}

/* Badge sheet: only shows when printing the Shop employees page. */
.mfg-badge-sheet { display: none; }
@media print {
    .mfg-badge-sheet { display: grid; grid-template-columns: repeat(2, 3.4in); gap: .25in; }
    .mfg-badge-card { display: grid; gap: 4px; justify-items: center; padding: .15in; border: 1px dashed #999; page-break-inside: avoid; color: #000; }
    .mfg-badge-card strong { font-size: 16pt; }
    .mfg-badge-card small { font-family: monospace; font-size: 11pt; }
}

/* Shop-floor station: large, glove-friendly targets. */
.mfg-station { max-width: 980px; }
.mfg-station-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.mfg-station-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--km-line); border-radius: var(--km-radius-control, 9px); background: var(--km-surface); }
.mfg-station-card h2 { margin: 0; font-size: 1.35rem; }
.mfg-station-msg { font-size: 1.05rem; }
.mfg-station-input { min-height: 56px; font-size: 1.4rem; padding: 0 14px; width: 100%; box-sizing: border-box; }
.mfg-station-big { min-height: 56px !important; font-size: 1.05rem !important; padding: 0 20px !important; }
.mfg-station-pin { font-size: 2rem; letter-spacing: .3em; text-align: center; min-height: 44px; }
.mfg-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 380px; width: 100%; justify-self: center; }
.mfg-keypad .km-button { min-height: 64px !important; font-size: 1.5rem !important; }
.mfg-station-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mfg-station-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mfg-station-ops { display: grid; gap: 10px; }
.mfg-station-op { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--km-line); border-radius: 8px; }
.mfg-station-op.scanned { border-color: var(--km-green); background: var(--km-green-soft); }
.mfg-station-qty { display: flex; flex-wrap: wrap; gap: 14px; }
.mfg-station-qty label, .mfg-station-field { display: grid; gap: 4px; font-weight: 600; color: var(--km-muted); }
.mfg-station-field > span:last-child { display: flex; gap: 6px; align-items: center; }
.mfg-station-qty input { width: 90px; min-height: 52px; font-size: 1.3rem; text-align: center; }
.mfg-station-qty .km-button { min-width: 52px; min-height: 52px !important; font-size: 1.4rem !important; }
.mfg-station-qty select { min-height: 52px; }
.mfg-station-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mfg-machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mfg-machine-tile { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--km-line); border-left-width: 5px; border-radius: var(--km-radius-control, 9px); background: var(--km-surface); }
.mfg-machine-tile.state-running { border-left-color: var(--mfg-ok, var(--km-green)); }
.mfg-machine-tile.state-down { border-left-color: var(--km-red); }
.mfg-machine-tile.state-idle { border-left-color: var(--km-line); }
.mfg-machine-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.05rem; }
.app-layout.mfg-shell .mfg-station button.mfg-station-big { min-height: 56px !important; font-size: 1.05rem !important; padding: 0 22px !important; }
.app-layout.mfg-shell .mfg-station .mfg-keypad button { min-height: 64px !important; font-size: 1.5rem !important; }
.app-layout.mfg-shell .mfg-station .mfg-station-qty button { min-width: 56px !important; min-height: 52px !important; font-size: 1.4rem !important; }

/* Gauges picked on an inspection */
.mfg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mfg-chips .mfg-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: normal; font-size: .8rem; padding: 3px 4px 3px 10px; }
.mfg-chip-remove { border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; min-width: 28px; min-height: 28px; cursor: pointer; border-radius: 999px; }
.mfg-chip-remove:hover, .mfg-chip-remove:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); }

/* Status badges keep their meaning in dark mode: the theme contract forces every "*-badge" class to a grey
   pill with !important, which turned Late / Overdue / Fail / Out of tolerance into the same grey pill as OK. */
html[data-theme="dark"] .app-layout.mfg-shell .page-content .mfg-badge.ok { color: #5fd39c !important; border-color: #2f7d58 !important; background: #15301f !important; }
html[data-theme="dark"] .app-layout.mfg-shell .page-content .mfg-badge.warn { color: #f5b95a !important; border-color: #8a6420 !important; background: #33260f !important; }
html[data-theme="dark"] .app-layout.mfg-shell .page-content .mfg-badge.bad { color: #ff9b95 !important; border-color: #8f3b3b !important; background: #3a1a1a !important; }

/* On phones the shell stacks toolbars into a column, where the grow input's 220px flex-basis became its height. */
@media (max-width: 700px) {
    .app-layout.mfg-shell .mfg-page .mfg-toolbar > .mfg-grow { flex: 0 0 auto !important; width: 100%; height: auto; }
}

/* Drawings printed with the traveler: each on its own page, fitted to the sheet. */
.mfg-traveler-drawing { break-before: page; page-break-before: always; margin: 0; }
.mfg-traveler-drawing figcaption { font-weight: 600; margin-bottom: 8px; }
.mfg-traveler-drawing img { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; }

/* A plain-words line under a page title, for screens that need one. */
.km-page-heading .km-page-subtitle { margin: 6px 0 0; max-width: 72ch; color: var(--km-muted); font-size: .92rem; line-height: 1.45; font-weight: 400; }

/* ---- Departments: the tab strip above a page and the tile grid on a department home ---- */
/* Open pages as browser-style tabs. Every colour is an explicit pair so hover and active never lose contrast in light or dark. */
.mfg-open-tabs { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 14px; border-bottom: 1px solid var(--km-line); }
.mfg-open-tabs-list { display: flex; gap: 3px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: thin; }
.mfg-open-tab { display: flex; align-items: center; flex: 0 1 190px; min-width: 96px; max-width: 220px; border: 1px solid var(--km-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--km-surface-soft, var(--km-soft)); color: var(--km-muted); position: relative; top: 1px; }
.mfg-open-tab:hover { background: var(--km-active); color: var(--km-text); }
.mfg-open-tab.active { background: var(--km-surface); color: var(--km-text); border-color: var(--km-line); box-shadow: inset 0 3px 0 var(--km-accent, #d05a14); z-index: 1; }
html .app-layout .page-content .mfg-open-tab > a { display: block !important; flex: 1 1 auto; min-width: 0; padding: 9px 4px 9px 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit !important; background: transparent !important; font-size: .86rem !important; font-weight: 600 !important; text-decoration: none !important; border: 0 !important; }
html .app-layout .page-content .mfg-open-tab.active > a { font-weight: 700 !important; }
html .app-layout .page-content .mfg-open-tab > .mfg-open-tab-close { flex: none; width: 22px; height: 22px; margin-right: 6px; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: var(--km-muted) !important; font-size: .7rem !important; line-height: 1; cursor: pointer; box-shadow: none !important; }
html .app-layout .page-content .mfg-open-tab > .mfg-open-tab-close:hover { background: var(--km-active) !important; color: var(--km-text) !important; }
html .app-layout .page-content .mfg-open-tabs-clear { flex: none; margin-bottom: 4px; padding: 3px 9px !important; border: 1px solid var(--km-line) !important; border-radius: 6px !important; background: var(--km-surface) !important; color: var(--km-muted) !important; font-size: .75rem !important; cursor: pointer; box-shadow: none !important; }
html .app-layout .page-content .mfg-open-tabs-clear:hover { background: var(--km-active) !important; color: var(--km-text) !important; }
@media (max-width: 640px) { .mfg-open-tab { flex-basis: 140px; } .mfg-open-tabs-clear { display: none; } }
.mfg-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 8px 0 24px; }
html .app-layout .page-content .mfg-dept-tile { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 14px 16px !important; border: 1px solid var(--km-line) !important; border-radius: 10px !important; background: var(--km-surface) !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; }
html .app-layout .page-content .mfg-dept-tile:hover { border-color: var(--km-accent, #2563eb) !important; }
.mfg-dept-tile-icon { font-size: 1.15rem; color: var(--km-accent, #2563eb); }
.mfg-dept-tile small { color: var(--km-muted); font-size: .84rem; line-height: 1.4; }
html .app-layout .mfg-departments .mfg-department.active { background: var(--km-accent, #2563eb) !important; color: #fff !important; }

/* ---- Hover safety: Bootstrap turns every link blue on hover, which is unreadable on the dark theme and on any button that is really a link.
   Links with their own look keep their text colour (inherit), plain links go to the accent, and badges, primary buttons and tiles keep theirs. ---- */
html .app-layout.mfg-shell a:hover { color: var(--km2-accent-hover, var(--km-accent)); }
html .app-layout.mfg-shell a[class]:hover { color: inherit; }
html .app-layout.mfg-shell a.km-button:hover { color: var(--km-text); background: var(--km-active); }
html .app-layout.mfg-shell a.km-button-primary:hover, html .app-layout.mfg-shell button.km-button-primary:hover { color: #fff; background: var(--km2-accent-hover); border-color: var(--km2-accent-hover); }
html .app-layout.mfg-shell button.km-button:hover:not(.km-button-primary) { color: var(--km-text); background: var(--km-active); }
html .app-layout.mfg-shell a.mfg-badge.ok:hover { color: var(--mfg-ok-text, var(--km-green-dark)); }
html .app-layout.mfg-shell a.mfg-badge.warn:hover { color: var(--km-amber); }
html .app-layout.mfg-shell a.mfg-badge.bad:hover { color: var(--km-red); }
html .app-layout.mfg-shell a.mfg-badge.muted:hover { color: var(--km-muted); }
html .app-layout.mfg-shell a.mfg-badge:hover { filter: brightness(1.12); text-decoration: none; }
html .app-layout.mfg-shell .mfg-table tbody tr:hover td, html .app-layout.mfg-shell .mfg-table tbody tr:hover td a:not([class]) { color: var(--km-text); }
html .app-layout.mfg-shell .page-content table tbody tr:hover { background: var(--km-active) !important; }
html .app-layout.mfg-shell .mfg-table tbody tr:hover .mfg-meta, html .app-layout.mfg-shell .mfg-table tbody tr:hover .mfg-badge.muted { color: var(--km-muted); }
html .app-layout.mfg-shell .mfg-flow-steps a:hover { color: var(--km-text); background: var(--km-active); }
html .app-layout .page-content .mfg-dept-tile:hover { background: var(--km-active) !important; color: var(--km-text) !important; }
html .app-layout .page-content .mfg-dept-tile:hover small { color: var(--km-muted); }
html .app-layout.mfg-shell .mfg-stats a.mfg-stat:hover { background: var(--km-active); color: var(--km-text); }

.mfg-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mfg-week label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.mfg-week small { grid-column: 1 / -1; }
@media (max-width: 640px) { .mfg-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Find in the top bar */
.mfg-find { position: relative; margin-right: 10px; }
html .app-layout .topbar .mfg-find-input { width: min(300px, 38vw); min-height: 36px; padding: 6px 12px !important; border: 1px solid var(--km-line) !important; border-radius: 8px !important; background: var(--km-input) !important; color: var(--km-text) !important; font-size: .88rem; }
.mfg-find-results { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(420px, 92vw); max-height: 70vh; overflow-y: auto; border: 1px solid var(--km-line); border-radius: 10px; background: var(--km-surface); box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 4px; }
html .app-layout .topbar .mfg-find-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px !important; border-radius: 7px; color: var(--km-text) !important; text-decoration: none !important; background: transparent !important; }
html .app-layout .topbar .mfg-find-item:hover { background: var(--km-active) !important; color: var(--km-text) !important; }
.mfg-find-kind { grid-row: 1 / span 2; align-self: center; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--km-muted); }
.mfg-find-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfg-find-detail { grid-column: 2; font-size: .8rem; color: var(--km-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfg-find-empty { padding: 12px; color: var(--km-muted); font-size: .88rem; }
.mfg-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mfg-family-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--km-line); border-radius: 10px; background: var(--km-surface); }
.mfg-family-group { font-size: .86rem; color: var(--km-muted); }
.mfg-family-edit-group { margin: 14px 0; padding: 12px; border: 1px solid var(--km-line); border-radius: 10px; }

.mfg-flow-details { margin: 0 0 14px; }
.mfg-flow-details > summary { cursor: pointer; padding: 6px 2px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--km-muted); }
.mfg-flow-details > summary:hover { color: var(--km-text); }

.mfg-option-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--km-line); }
.mfg-option-row label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--km-muted); }
.mfg-option-row .mfg-option-name { grid-column: span 2; }
.mfg-option-remove { justify-self: end; }
@media (max-width: 640px) { .mfg-option-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }