:root {
    /* Dark industrial control system: shared tokens for every role area. */
    --ink-950: #f1f1f1;
    --ink-800: #d2d2d2;
    --ink-700: #ababab;
    --ink-500: #7c7c7c;
    --ink-300: #414141;
    --ink-200: #2c2c2c;
    --ink-100: #202020;
    --surface: #202020;
    --surface-muted: #181818;
    --canvas: #101010;
    --navy: #d48732;
    --navy-hover: #efa653;
    --teal: #58a6d2;
    --teal-soft: #1c303b;
    --amber: #e3a24b;
    --amber-soft: #493719;
    --red: #e16c70;
    --red-soft: #472429;
    --slate-soft: #2a2a2a;
    --info: #58a6d2;
    --focus: #efb05b;
    --control-height: 44px;
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow: 0 16px 38px rgb(0 0 0 / 24%);
    --shadow-sm: 0 8px 20px rgb(0 0 0 / 20%);
    --transition: 160ms ease;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--canvas);
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink-950);
    background:
        radial-gradient(circle at 88% -8%, rgb(35 111 130 / 13%), transparent 28rem),
        linear-gradient(180deg, #f6f8fb 0, var(--canvas) 100%);
    font-family: Vazirmatn, "Vazir", "IRANSansX", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

a {
    color: var(--navy);
}

a:hover {
    color: var(--navy-hover);
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 12px max(24px, calc((100vw - 1440px) / 2));
    color: #fff;
    background: linear-gradient(115deg, #142b45, #1c5275);
    box-shadow: 0 2px 9px rgb(18 38 59 / 20%);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    letter-spacing: -.2px;
    white-space: nowrap;
}

.brand-logo {
    width: 104px;
    height: 70px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand:hover {
    color: #fff;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.nav a {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #d8e5ef;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.nav a:hover {
    border-color: rgb(255 255 255 / 15%);
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

.nav a.active {
    border-color: rgb(188 229 221 / 34%);
    color: #fff;
    background: rgb(14 124 116 / 62%);
}

.user-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

.user-nav span {
    display: grid;
    gap: 1px;
    text-align: left;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
}

.user-nav small {
    color: #c9dbe7;
    font-size: 11px;
}

.user-nav .button-secondary {
    min-height: 34px;
    padding: 6px 10px;
    border-color: rgb(255 255 255 / 25%);
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

.user-nav .button-secondary:hover {
    color: #fff;
    background: rgb(255 255 255 / 18%);
}

.auth-page {
    min-height: 100vh;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(100%, 440px);
    padding: 30px;
    border: 1px solid var(--ink-200);
    border-top: 4px solid var(--teal);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 45px rgb(17 37 58 / 14%);
}

.auth-card h1 {
    margin: 6px 0 8px;
}

.auth-brand {
    display: grid;
    justify-items: center;
    gap: 3px;
    margin-bottom: 26px;
    text-align: center;
    color: var(--navy);
}

.auth-company-logo {
    width: min(100%, 220px);
    height: 88px;
    object-fit: contain;
}

.auth-company-name {
    color: var(--ink-500);
    font-size: 15px;
    font-weight: 600;
}

.auth-company-tagline {
    margin-top: 8px;
    color: var(--teal);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.auth-form label {
    display: grid;
    gap: 6px;
}

.auth-form input,
.auth-form select,
.auth-form button {
    width: 100%;
}

.page-shell {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 30px 0 48px;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 22px;
}

.page-heading h1,
h1 {
    margin: 0;
    color: var(--ink-950);
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 780;
    line-height: 1.3;
    letter-spacing: -.8px;
}

.eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: .04em;
}

h2,
h3 {
    margin: 0;
    color: var(--ink-950);
    font-weight: 750;
    line-height: 1.45;
}

h2 {
    font-size: 19px;
}

h3 {
    font-size: 16px;
}

p {
    margin: 0 0 12px;
}

.box,
.selector {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgb(205 213 225 / 90%);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.box > h2,
.selector + .box > h2 {
    margin-bottom: 16px;
}

.selector {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    color: var(--ink-700);
    background: rgb(255 255 255 / 82%);
}

.selector strong,
.production-info strong {
    color: var(--ink-950);
}

.section-cnc .selector:first-of-type,
.section-designer .production-info {
    border-top: 3px solid var(--teal);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: var(--ink-300) transparent;
}

.production-tab {
    width: 100%;
}

/* Shared pattern for operational tables that need their own vertical scroll.
   New tables opt in with: <div class="table-wrap table-scroll">…</div>. */
.table-wrap.table-scroll {
    max-height: min(56vh, 640px);
    /* The wrapper is the sole two-axis viewport: its horizontal track stays
       at the bottom of the visible table area while rows scroll vertically. */
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: auto;
    scrollbar-color: #8fa5b8 #edf2f7;
}

.table-wrap.table-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.table-wrap.table-scroll::-webkit-scrollbar-track {
    background: #edf2f7;
}

.table-wrap.table-scroll::-webkit-scrollbar-thumb {
    border: 3px solid #edf2f7;
    border-radius: 999px;
    background: #8fa5b8;
}

.table-wrap.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #6f879c;
}

/* The generic rounded-table clipping would otherwise become the nearest
   overflow ancestor and prevent a header from sticking to table-scroll. */
.table-wrap.table-scroll > table {
    overflow: visible;
}

.table-wrap.table-scroll > .readable-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

table {
    width: 100%;
    min-width: 640px;
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: var(--surface);
}

th,
td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ink-200);
    text-align: right;
    vertical-align: middle;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--ink-700);
    background: #f4f7fb;
    font-size: 12px;
    font-weight: 780;
    letter-spacing: .01em;
    white-space: nowrap;
}

td {
    color: var(--ink-800);
}

tbody tr {
    transition: background .15s ease;
}

tbody tr:hover {
    background: #f7fafc;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* Shared readability treatment for the primary operational tables. */
.readable-table th {
    color: var(--navy);
    background: #eaf1f6;
    border-bottom-color: #c9d8e4;
}

.readable-table tbody tr:nth-child(even):not(.superseded):not(.library-inactive):not(.inactive-row):not(.completed):not(.cancelled) td {
    /* Applied on each cell so table and component backgrounds cannot mask it. */
    background: #d9e7f1;
}

.readable-table tbody tr.superseded td {
    color: #718096;
    background: #f4f6f8;
}

.readable-table tbody tr.inactive-row td,
.readable-table tbody tr.library-inactive td {
    color: var(--ink-500);
    background: var(--surface-muted);
}

.readable-table tbody tr.completed td {
    background: #e7f4ef;
}

.readable-table tbody tr.cancelled td {
    background: var(--red-soft);
}

@media (hover: hover) {
    .readable-table tbody tr:hover td,
    .readable-table tbody tr:hover input,
    .readable-table tbody tr:hover select,
    .readable-table tbody tr:hover textarea {
        background: #c7e5d6;
    }
}

td:first-child strong,
.part-code,
.production-code {
    direction: ltr;
    unicode-bidi: plaintext;
    color: var(--ink-950);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .91em;
    font-weight: 750;
}

.production-product-picker {
    display: grid;
    gap: 10px;
    width: min(100%, 900px);
    padding: 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.production-product-picker .library-search-field {
    max-width: none;
}

.production-product-groups {
    display: grid;
    gap: 12px;
    max-height: 310px;
    overflow: auto;
    padding-inline-end: 4px;
}

.production-product-group {
    display: grid;
    gap: 7px;
}

.production-product-group h3 {
    margin: 0;
    color: var(--ink-700);
    font-size: 13px;
}

.production-product-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.production-product-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 9px;
    padding: 10px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-800);
    text-align: right;
}

/* The picker filters with the semantic hidden attribute.  Its grid display
   must never override that state in a real browser. */
.production-product-option[hidden],
.production-product-group[hidden],
.production-product-search-empty[hidden] {
    display: none;
}

.production-product-option small {
    grid-column: 2;
    color: var(--ink-500);
}

.production-product-option:hover,
.production-product-option:focus-visible,
.production-product-option.is-selected {
    border-color: var(--navy);
    background: #e5f0f7;
    color: var(--navy);
}

.production-product-search-empty {
    margin: 0;
}

.production-parts-heading {
    align-items: flex-start;
}

.production-parts-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.production-parts-summary > div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.production-parts-summary span {
    color: var(--ink-500);
    font-size: 12px;
}

.production-parts-table {
    min-width: 1320px;
}

.production-parts-table-wrap {
    max-height: min(58vh, 680px);
}

.manager-snapshot-editor {
    min-width: 260px;
}

.manager-snapshot-editor summary {
    cursor: pointer;
    list-style: none;
}

.manager-snapshot-editor summary::-webkit-details-marker {
    display: none;
}

.manager-snapshot-editor[open] {
    position: relative;
    z-index: 3;
    padding: 10px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.manager-add-snapshot {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-200);
}

.manager-add-snapshot summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 750;
}

.numeric-cell,
.revision-cell {
    text-align: center;
    direction: ltr;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.part-code-input {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.table-empty-cell {
    padding: 24px 18px !important;
    color: var(--ink-500);
    background: var(--surface-muted) !important;
    text-align: center;
    font-weight: 650;
}

.table-empty-state {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-md);
    color: var(--ink-500);
    background: var(--surface-muted);
    text-align: center;
}

input,
select,
textarea,
button {
    min-height: 40px;
    border-radius: 8px;
    font: inherit;
}

input,
select,
textarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #bdc9d8;
    outline: none;
    color: var(--ink-950);
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #3481ac;
    box-shadow: 0 0 0 3px rgb(52 129 172 / 15%);
}

textarea {
    display: block;
    width: min(520px, 100%);
    min-height: 80px;
    resize: vertical;
}

input[type="number"] {
    width: 88px;
    text-align: center;
    direction: ltr;
}

label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-700);
    font-size: 14px;
    font-weight: 650;
}

button,
.button,
.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--navy);
    border-radius: 8px;
    outline: none;
    color: #fff;
    background: var(--navy);
    box-shadow: 0 1px 1px rgb(16 36 55 / 15%);
    cursor: pointer;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.2;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:hover,
.button:hover,
.action-link:hover {
    border-color: var(--navy-hover);
    color: #fff;
    background: var(--navy-hover);
    box-shadow: 0 5px 12px rgb(20 58 86 / 18%);
    transform: translateY(-1px);
}

button:focus-visible,
.button:focus-visible,
.action-link:focus-visible {
    box-shadow: 0 0 0 3px rgb(52 129 172 / 25%);
}

button:disabled,
input:disabled,
select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.button-secondary,
.action-link {
    border-color: #bdc9d8;
    color: var(--ink-700);
    background: #fff;
    box-shadow: none;
}

.button-secondary:hover,
.action-link:hover {
    border-color: #9caec2;
    color: var(--ink-950);
    background: #f5f8fb;
}

.button-danger {
    border-color: var(--red);
    background: var(--red);
}

.button-danger:hover {
    border-color: #922f32;
    background: #922f32;
}

form {
    margin: 0;
}

.inline-form,
.selector form,
td form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

details {
    margin-top: 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

summary {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    color: var(--ink-800);
    cursor: pointer;
    font-weight: 740;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    display: inline-block;
    margin-left: 8px;
    color: var(--teal);
    content: "⌄";
    transition: transform .16s ease;
}

details[open] > summary::before {
    transform: rotate(180deg);
}

details > :not(summary) {
    margin-right: 14px;
    margin-left: 14px;
}

details > form,
details > hr {
    margin-bottom: 16px;
}

hr {
    border: 0;
    border-top: 1px solid var(--ink-200);
}

.muted,
.small-text {
    color: var(--ink-500);
}

.small-text {
    font-size: 12px;
}

.status-badge,
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
}

.status-success,
.status-ready,
.status-completed,
.ready,
.completed {
    color: #08635c;
    background: var(--teal-soft);
}

.status-warning,
.status-pending,
.status-in-progress,
.in_progress,
.released {
    color: #8a5000;
    background: var(--amber-soft);
}

.status-neutral,
.status-not-started,
.not_started {
    color: var(--ink-700);
    background: var(--slate-soft);
}

.status-danger,
.cancelled {
    color: #982f31;
    background: var(--red-soft);
}

.superseded {
    color: #647184;
    background: #edf0f4;
}

tr.superseded td:first-child strong {
    color: #718096;
}

.notice-warning {
    margin-top: 14px;
    padding: 10px 12px;
    border-right: 3px solid var(--amber);
    border-radius: 7px;
    color: #805000;
    background: var(--amber-soft);
}

.production-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 14px;
}

.production-link {
    padding: 8px 11px;
    border: 1px solid #c9d4e1;
    border-radius: 8px;
    color: var(--ink-700);
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: all .16s ease;
}

.production-link:hover,
.production-link.active {
    border-color: var(--teal);
    color: #075f58;
    background: var(--teal-soft);
}

.production-info {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) repeat(3, auto);
    align-items: center;
    gap: 8px 24px;
}

.production-info h2 {
    grid-row: span 2;
    margin: 0;
}

.production-info p {
    margin: 0;
    font-size: 14px;
}

.tab-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 18px;
    padding: 5px;
    border-radius: 10px;
    background: var(--surface-muted);
}

.production-tab h3 {
    margin: 0 0 12px;
}

.tab-switcher button {
    border-color: transparent;
    color: var(--ink-700);
    background: transparent;
    box-shadow: none;
}

.tab-switcher button:hover,
.tab-switcher button.is-active {
    border-color: transparent;
    color: #fff;
    background: var(--navy);
    box-shadow: none;
    transform: none;
}

.table-actions-cell,
.actions-cell {
    vertical-align: middle;
}

.table-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.table-action-group > form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.actions-cell {
    min-width: 150px;
}

.parts-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.action-link {
    cursor: pointer;
}

.modal[hidden] {
    display: none;
}

body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(14 28 45 / 58%);
    backdrop-filter: blur(3px);
}

.modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: min(86vh, 900px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 24px 64px rgb(10 25 43 / 32%);
}

.modal-close {
    position: sticky;
    z-index: 2;
    float: left;
    width: 34px;
    min-height: 34px;
    margin: -12px -12px 0 12px;
    padding: 0;
    border-color: var(--ink-200);
    border-radius: 50%;
    color: var(--ink-700);
    background: var(--surface-muted);
    font-size: 24px;
    line-height: 1;
    box-shadow: none;
}

.modal-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 42px 20px 0;
}

.modal-heading h2 {
    font-size: 21px;
}

.modal-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.modal-field-grid label,
.modal-field-wide {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    color: var(--ink-700);
    font-size: 14px;
    font-weight: 700;
}

.modal-field-wide textarea {
    min-height: 96px;
    resize: vertical;
}

.modal-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-200);
}

.history-modal-content {
    min-width: min(760px, 100%);
}

.library-modal-dialog {
    width: min(94vw, 1680px) !important;
    max-width: 94vw !important;
}

.library-modal-content {
    width: 100%;
    min-width: 0;
}

.library-page-shell {
    width: min(94vw, 1680px);
}

.library-modal-dialog #designer-modal-content {
    width: 100%;
}

.production-bom-modal-dialog {
    width: min(94vw, 1440px);
    max-width: 94vw;
}

.production-bom-table {
    min-width: 1080px;
}

.production-draft-table-wrap {
    height: min(52vh, 560px);
}

.row-number-cell {
    width: 44px;
    min-width: 44px;
    padding-right: 8px;
    padding-left: 8px;
    text-align: center;
    direction: ltr;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.production-draft-code-preview {
    display: inline-block;
    color: var(--navy);
}

.production-draft-identity,
.production-draft-family {
    min-width: 132px;
    color: var(--ink-800);
}

.production-draft-family {
    color: var(--ink-600);
    font-size: 12px;
}

.production-draft-library-help {
    margin: 13px 0 0;
}

.production-draft-library-help a {
    font-weight: 750;
}

.production-draft-library-dialog {
    width: min(1040px, 100%);
}

.production-draft-library-search {
    display: block;
    width: min(460px, 100%);
    margin: 0 0 14px;
}

.production-draft-library-search input {
    width: 100%;
}

.production-draft-library-table-wrap {
    max-height: 52vh;
}

.production-draft-library-table {
    min-width: 780px;
}

.product-bom-selector-dialog {
    width: min(94vw, 1280px);
    max-width: 94vw;
}

.product-bom-selector-filters {
    grid-template-columns: minmax(260px, 2fr) minmax(210px, 1fr);
}

.product-bom-selector-table-wrap {
    max-height: min(52vh, 560px);
}

.product-bom-selector-table {
    min-width: 980px;
}

.product-bom-selector-add-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-200);
}

.product-bom-selector-add-form .muted {
    flex: 1 1 260px;
    margin: 0;
}

.product-bom-selector-add-form label {
    display: grid;
    gap: 6px;
}

.product-bom-selector-table tr.bom-selector-selected td {
    background: #d4ece0;
}

.product-bom-selector-table input[type="checkbox"] {
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--navy);
}

.product-bom-selector-table [data-bom-selector-quantity] {
    width: 90px;
    min-width: 90px;
}

.production-bom-table input,
.production-bom-table textarea {
    min-width: 105px;
}

.production-bom-table .production-draft-quantity input {
    width: 88px;
    min-width: 88px;
}

.production-draft-thickness,
.production-draft-material {
    white-space: nowrap;
}

.production-bom-table textarea {
    min-width: 265px;
    min-height: 42px;
}

.library-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.library-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    background: var(--surface-muted);
}

.library-filters label {
    display: grid;
    gap: 6px;
}

.library-form-step {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    background: var(--surface-muted);
}

.library-form-step h3 {
    margin: 0 0 5px;
    color: var(--navy);
}

.library-form-step > .muted {
    margin-bottom: 14px;
}

.library-family-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 14px;
}

.library-family-choice label {
    font-weight: 650;
}

.library-family-search {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
    font-weight: 700;
}

.library-family-search input {
    width: 100%;
}

.library-family-selector-wrap {
    max-height: 260px;
    border: 1px solid var(--ink-200);
    border-radius: 9px;
}

.library-family-selector-table {
    min-width: 600px;
}

.library-family-selector-table tr.is-selected td {
    background: #dcefeb;
}

.library-family-selector-table td:last-child,
.library-family-selector-table th:last-child {
    text-align: center;
}

.library-family-selection {
    margin: 9px 2px 0;
    font-size: 13px;
}

.library-auto-identity input[readonly] {
    color: var(--navy);
    font-weight: 750;
}

.library-existing-variant {
    margin-top: 16px;
}

.library-existing-variant dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 12px 0;
}

.library-existing-variant dl div {
    display: flex;
    gap: 6px;
}

.library-existing-variant dt {
    font-weight: 750;
}

.library-existing-variant dd {
    margin: 0;
}

.library-search-field {
    flex: 1;
    max-width: 420px;
}

.library-search-field input {
    width: 100%;
}

.library-table-wrap {
    width: 100%;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
}

.library-table {
    min-width: 1040px;
    font-size: 13px;
}

.library-table td {
    vertical-align: top;
}

.technical-specs {
    display: block;
    max-width: 180px;
    max-height: 46px;
    overflow: auto;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    font-size: 11px;
}

.library-actions {
    white-space: nowrap;
}

.library-actions form {
    margin: 0;
}

.library-actions button {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
}

.library-family-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    background: var(--surface-muted);
}

.library-family-panel h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.history-summary > div {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--ink-200);
    border-radius: 9px;
    background: var(--surface-muted);
}

.history-summary span:not(.status-chip) {
    color: var(--ink-500);
    font-size: 12px;
}

.history-reason {
    margin: 0 0 18px;
}

.history-section {
    margin-top: 22px;
}

.history-section h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.modal-loading {
    min-height: 100px;
    padding: 32px 10px;
    text-align: center;
}

.history-current {
    border-top: 3px solid var(--navy);
}

.admin-create-user {
    border-top: 3px solid var(--teal);
}

.admin-users-table,
.admin-audit-table {
    min-width: 980px;
}

.admin-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 310px;
}

.admin-actions details {
    margin: 0;
    min-width: 120px;
}

.admin-actions details form {
    padding: 12px;
}

.admin-json {
    max-width: 440px;
    max-height: 180px;
    padding: 8px;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: var(--surface-muted);
}

.section-cnc .revision-cell {
    color: var(--navy);
    font-weight: 750;
}

.section-cnc table td:nth-child(5) {
    min-width: 250px;
    color: var(--ink-500);
    font-size: 13px;
}

.section-cnc table tr.released td:nth-child(2),
.section-cnc table tr.in_progress td:nth-child(2) {
    border-right: 4px solid var(--amber);
}

.section-cnc table tr.completed td:nth-child(2) {
    border-right: 4px solid var(--teal);
}

.section-cnc table tr.superseded td:nth-child(2) {
    border-right: 4px solid #a9b4c2;
}

.danger-panel {
    max-width: 720px;
    margin: 0 auto;
    border-top: 4px solid var(--red);
}

.danger-panel h2 {
    color: var(--red);
}

.cancel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.product-master-panel > .muted {
    margin: 6px 0 18px;
}

.product-master-collapse {
    padding: 0;
    overflow: hidden;
}

.product-master-collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 18px;
}

.product-master-collapse[open] > .product-master-collapse-summary {
    border-bottom: 1px solid var(--ink-200);
}

.product-master-collapse-content {
    margin: 0 !important;
    padding: 0 20px 20px;
}

.product-card,
.new-product-card {
    margin: 10px 0;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.product-card > summary,
.new-product-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 700;
}

.product-card[open] > summary,
.new-product-card[open] > summary {
    border-bottom: 1px solid var(--ink-200);
    background: #fff;
}

.product-card-body,
.new-product-card > :not(summary) {
    margin-right: 16px;
    margin-left: 16px;
}

.product-card-body {
    padding: 16px 0;
}

.product-template-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 14px;
}

.product-template-heading h2,
.product-template-heading h3,
.product-template-heading p {
    margin: 0;
}

.product-template-heading p {
    margin-top: 5px;
}

.product-master-actions,
.new-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.product-master-actions details {
    flex: 1 1 360px;
}

.product-master-actions summary,
.product-part-editor summary,
.add-product-part summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.form-grid label {
    display: grid;
    gap: 5px;
    color: var(--ink-700);
    font-size: 13px;
    font-weight: 700;
}

.form-grid-wide {
    grid-column: 1 / -1;
}

.form-grid textarea {
    min-height: 78px;
    resize: vertical;
}

.product-parts-table {
    min-width: 930px;
}

.product-parts-table td:last-child {
    min-width: 110px;
}

.product-part-editor > form:last-child {
    margin-top: 10px;
}

.add-product-part {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-200);
}

.new-product-card {
    margin-top: 20px;
    background: #fff;
}

.new-product-card > p {
    margin-top: 16px;
}

.editable-new-parts-table input,
.editable-new-parts-table textarea {
    min-width: 105px;
}


.editable-new-parts-table textarea {
    min-width: 175px;
    min-height: 42px;
}

@media (max-width: 900px) {
    .production-info {
        grid-template-columns: 1fr 1fr;
    }

    .production-info h2 {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .page-shell {
        width: min(100% - 28px, 1440px);
    }
}

@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    .app-header {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 13px 16px;
    }

    .nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .user-nav {
        justify-content: space-between;
        margin-inline-start: 0;
    }

    .auth-shell {
        align-items: start;
        padding: 52px 16px 20px;
    }

    .auth-card {
        padding: 24px 20px;
    }

    .nav a {
        padding: 7px 4px;
        text-align: center;
        font-size: 12px;
    }

    .page-shell {
        width: min(100% - 20px, 1440px);
        padding-top: 20px;
    }

    .page-heading {
        align-items: start;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 16px;
    }

    .box,
    .selector {
        margin-bottom: 13px;
        padding: 14px;
        border-radius: 12px;
    }

    .selector {
        justify-content: flex-start;
        overflow-x: auto;
    }

    table {
        min-width: 620px;
    }

    th,
    td {
        padding: 10px 11px;
    }

    .production-info {
        grid-template-columns: 1fr;
    }

    .production-info h2 {
        grid-column: auto;
    }

    .tab-switcher {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tab-switcher button {
        width: 100%;
    }

    .production-buttons {
        flex-direction: column;
    }

    .production-link {
        width: 100%;
    }

    .inline-form,
    .selector form,
    td form,
    .cancel-actions {
        align-items: stretch;
        flex-direction: column;
    }

    input[type="number"] {
        width: 100%;
    }

    .product-card > summary,
    .new-product-card > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-wide {
        grid-column: auto;
    }

    .product-master-actions,
    .new-product-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .product-master-actions form,
    .new-product-actions button {
        width: 100%;
    }

    .modal {
        align-items: end;
        padding: 10px;
    }

    .modal-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 20px 16px;
        border-radius: 14px 14px 10px 10px;
    }

    .modal-heading {
        margin-left: 34px;
    }

    .modal-field-grid,
    .history-summary {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions button {
        width: 100%;
    }

    .product-master-collapse-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .product-template-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .production-product-options,
    .production-parts-summary {
        grid-template-columns: 1fr;
    }

    .production-product-option {
        width: 100%;
    }

    .library-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .library-filters {
        grid-template-columns: 1fr;
    }

    .library-page-shell {
        width: min(100% - 20px, 1440px);
    }

    .library-family-choice {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .library-existing-variant dl {
        grid-template-columns: 1fr;
    }

    .library-search-field {
        max-width: none;
    }
}

/* ========================================================================
   INDUSTRIAL MOBILE-FIRST VISUAL SYSTEM
   Presentation-only overrides. Existing markup, IDs and form contracts stay
   untouched so every role continues to use the same operational workflow.
   ======================================================================== */

html {
    color-scheme: dark;
    background: var(--canvas);
}

body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ink-950);
    background: var(--canvas);
    font-size: 15px;
    line-height: 1.7;
}

a { color: var(--teal); }
a:hover { color: var(--navy-hover); }

.app-header {
    min-height: 76px;
    padding: 10px max(24px, calc((100vw - 1540px) / 2));
    border-bottom: 1px solid #2a3d37;
    background: #111b18;
    box-shadow: 0 8px 26px rgb(0 0 0 / 22%);
}

.brand-logo {
    width: 118px;
    height: 54px;
}

.nav { gap: 4px; }

.nav a {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 9px;
    color: #a9beb7;
    font-weight: 700;
}

.nav a:hover,
.nav a:focus-visible {
    border-color: #36544b;
    color: var(--ink-950);
    background: #21322d;
}

.nav a.active {
    border-color: #2c7366;
    color: #e9fffa;
    background: #1b5148;
    box-shadow: inset 0 0 0 1px rgb(96 223 195 / 8%);
}

.user-nav span { color: var(--ink-950); }
.user-nav small { color: #8fa69e; }
.user-nav .button-secondary {
    border-color: #405b53;
    color: #d8e7e1;
    background: #1c2b27;
}
.user-nav .button-secondary:hover { background: #273b35; }

.page-shell {
    width: min(1540px, calc(100% - 48px));
    padding: 30px 0 56px;
}

.page-heading {
    align-items: center;
    margin-bottom: 22px;
}

.page-heading h1,
h1 {
    color: var(--ink-950);
    letter-spacing: -.45px;
}

h2, h3 { color: var(--ink-950); }
.eyebrow { color: var(--teal); }
.muted, .small-text { color: var(--ink-500); }

.box,
.selector,
.library-form-step,
.library-family-panel,
.product-card,
.new-product-card,
.history-summary > div,
.production-parts-summary > div {
    border-color: var(--ink-200);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.box,
.selector {
    padding: 22px;
    border-radius: var(--radius-lg);
}

.selector,
.production-product-picker,
.library-filters,
.library-form-step,
.library-family-panel,
.history-summary > div,
.production-parts-summary > div,
.product-card,
.new-product-card {
    background: var(--surface-muted);
}

.production-product-picker,
.library-filters,
.library-form-step,
.library-family-panel,
.library-family-selector-wrap {
    border-color: var(--ink-200);
    border-radius: var(--radius-md);
}

.production-product-option {
    min-height: 72px;
    border-color: #30433d;
    border-radius: 11px;
    color: var(--ink-800);
    background: #1c2925;
}

.production-product-option small,
.production-product-group h3 { color: var(--ink-500); }

.production-product-option:hover,
.production-product-option:focus-visible,
.production-product-option.is-selected {
    border-color: #2ca995;
    color: #edfffa;
    background: #1b443b;
}

input,
select,
textarea {
    min-height: var(--control-height);
    border-color: #40534d;
    border-radius: 10px;
    color: var(--ink-950);
    background: #111b18;
    font-size: 15px;
}

input::placeholder,
textarea::placeholder { color: #6f847d; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgb(114 216 201 / 18%);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    border-color: #303d38;
    color: #708079;
    background: #18221f;
    opacity: .72;
}

label { color: var(--ink-700); }

button,
.button,
.action-link {
    min-height: var(--control-height);
    padding: 10px 15px;
    border-color: #17877b;
    border-radius: 10px;
    color: #ecfffa;
    background: #167e73;
    box-shadow: 0 6px 14px rgb(0 0 0 / 18%);
}

button:hover,
.button:hover,
.action-link:hover {
    border-color: var(--navy-hover);
    color: #fff;
    background: #219f91;
    box-shadow: 0 8px 18px rgb(0 0 0 / 24%);
}

button:focus-visible,
.button:focus-visible,
.action-link:focus-visible,
.nav a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(114 216 201 / 38%);
}

.button-secondary,
.action-link {
    border-color: #40554e;
    color: #c9dad4;
    background: #23322d;
    box-shadow: none;
}

.button-secondary:hover,
.action-link:hover {
    border-color: #5a7168;
    color: #f4fffb;
    background: #30433d;
}

.button-danger {
    border-color: #b94952;
    background: #9f3943;
}

.button-danger:hover {
    border-color: #e16c70;
    background: #c6505a;
}

details {
    border-color: var(--ink-200);
    background: #192521;
}

summary { color: var(--ink-800); }
summary::before { color: var(--teal); }
details[open] > summary { background: #1d2b26; }

.table-wrap {
    border-radius: var(--radius-md);
    background: #121c19;
    scrollbar-color: #60756d #15211d;
}

.table-wrap.table-scroll {
    max-height: min(58vh, 680px);
    border: 1px solid var(--ink-200);
    scrollbar-color: #668079 #15211d;
}

.table-wrap.table-scroll::-webkit-scrollbar-track { background: #15211d; }
.table-wrap.table-scroll::-webkit-scrollbar-thumb {
    border-color: #15211d;
    background: #668079;
}
.table-wrap.table-scroll::-webkit-scrollbar-thumb:hover { background: #86a39a; }

table {
    border-color: var(--ink-200);
    background: #17221f;
}

th,
.readable-table th {
    color: #c8ddd6;
    background: #24342f;
    border-bottom-color: #40554e;
}

td { color: #cfddd8; border-bottom-color: #2b3b36; }

.readable-table tbody tr:nth-child(even):not(.superseded):not(.library-inactive):not(.inactive-row):not(.completed):not(.cancelled) td {
    background: #1c2925;
}

.readable-table tbody tr:nth-child(odd) td { background: #17221f; }
.readable-table tbody tr.superseded td { color: #9aaca6; background: #222b29; }
.readable-table tbody tr.inactive-row td,
.readable-table tbody tr.library-inactive td { color: #879790; background: #202926; }
.readable-table tbody tr.completed td { background: #19362e; }
.readable-table tbody tr.cancelled td { background: #3c2227; }

@media (hover: hover) {
    .readable-table tbody tr:hover td,
    .readable-table tbody tr:hover input,
    .readable-table tbody tr:hover select,
    .readable-table tbody tr:hover textarea {
        background: #27443b;
    }
}

.part-code,
.production-code,
td:first-child strong {
    color: #e8faf3;
}

.table-empty-cell,
.table-empty-state {
    border-color: #496259;
    color: #a5b8b1;
    background: #192622 !important;
}

.status-badge,
.status-chip {
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid transparent;
    box-shadow: none;
}

.status-success,
.status-ready,
.status-completed,
.ready,
.completed {
    border-color: #276c5c;
    color: #adf0dc;
    background: #173d35;
}

.status-warning,
.status-pending,
.status-in-progress,
.in_progress,
.released {
    border-color: #795c29;
    color: #ffd58b;
    background: #463517;
}

.status-neutral,
.status-not-started,
.not_started {
    border-color: #465851;
    color: #c2d1cc;
    background: #26332e;
}

.status-danger,
.cancelled {
    border-color: #7c3c45;
    color: #ffc0c2;
    background: #47242a;
}

.superseded { color: #a7b4b0; background: #2a3431; }

.notice-warning {
    border-right-color: var(--amber);
    color: #ffdb99;
    background: #443416;
}

.production-link {
    border-color: #3e544d;
    color: #bfd1ca;
    background: #1d2a26;
}
.production-link:hover,
.production-link.active {
    border-color: #278a7b;
    color: #d9fff4;
    background: #1b493f;
}

.tab-switcher { background: #15211d; }
.tab-switcher button { color: #a8bbb5; }
.tab-switcher button:hover,
.tab-switcher button.is-active { color: #edfffa; background: #1a776d; }

.modal-backdrop { background: rgb(3 9 7 / 78%); backdrop-filter: blur(4px); }
.modal-dialog {
    border-color: #395049;
    background: #1a2723;
    box-shadow: 0 28px 70px rgb(0 0 0 / 54%);
}
.modal-close {
    border-color: #40554e;
    color: #d9e8e3;
    background: #26352f;
}
.modal-close:hover { background: #354841; }

.product-master-collapse[open] > .product-master-collapse-summary,
.product-card[open] > summary,
.new-product-card[open] > summary { border-bottom-color: #344941; background: #20302b; }

.product-master-collapse,
.product-card,
.new-product-card { border-color: var(--ink-200); }

.admin-json,
.technical-specs {
    border-color: #3a5048;
    color: #bdd0c9;
    background: #111b18;
}

.section-cnc table tr.released td:nth-child(2),
.section-cnc table tr.in_progress td:nth-child(2) { border-right-color: var(--amber); }
.section-cnc table tr.completed td:nth-child(2) { border-right-color: var(--teal); }

.danger-panel { border-top-color: var(--red); }
.danger-panel h2 { color: #ff9ca0; }

.auth-page { background: #0e1513; }
.auth-shell {
    min-height: 100vh;
    padding: 32px 20px;
    background: #0e1513;
}
.auth-card {
    padding: 32px;
    border: 1px solid #32473f;
    border-top-color: var(--teal);
    border-top-width: 3px;
    background: #192622;
    box-shadow: 0 24px 58px rgb(0 0 0 / 42%);
}
.auth-brand { color: var(--teal); }
.auth-company-name { color: #a9beb7; }
.auth-company-tagline { color: #d7fff4; }

/* Accessible hidden controls remain available to existing JS and assistive
   technology without creating an off-canvas mobile layout. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Mobile is a deliberate composition: compact header, scrollable nav, safe
   controls and table viewports without page-level horizontal overflow. */
@media (max-width: 700px) {
    body { font-size: 15px; }

    .app-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        min-height: auto;
        padding: 10px 14px 12px;
    }

    .brand { min-width: 0; }
    .brand-logo { width: 102px; height: 46px; }

    .user-nav {
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
        margin: 0;
    }

    .user-nav span { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-nav .button-secondary { min-height: 40px; padding: 8px 10px; }

    .nav {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        padding: 2px 0 5px;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { flex: 0 0 auto; min-height: 42px; padding: 10px 12px; font-size: 13px; }

    .page-shell { width: min(100% - 24px, 1540px); padding: 20px 0 42px; }
    .page-heading { align-items: stretch; gap: 12px; margin-bottom: 18px; }
    .page-heading h1, h1 { font-size: 25px; }
    .page-heading > .button, .page-heading > a.button, .page-heading > .button-secondary { width: 100%; }

    .box, .selector { margin-bottom: 14px; padding: 16px; border-radius: 15px; }
    .production-parts-summary, .history-summary { gap: 9px; }
    .production-parts-summary > div, .history-summary > div { padding: 12px; }

    input, select, textarea { font-size: 16px; }
    input[type="number"] { width: 100%; }
    label { align-items: stretch; gap: 6px; }

    button, .button, .action-link, .production-link { min-height: 44px; }
    .production-buttons, .table-action-group, .modal-actions { gap: 9px; }
    .table-action-group > form { width: 100%; }
    .table-action-group > form > button, .table-action-group > form > .button { width: 100%; }

    .table-wrap.table-scroll { max-height: 62vh; }
    th, td { padding: 11px 12px; }

    .modal { align-items: end; padding: 8px; }
    .modal-dialog, .library-modal-dialog, .production-bom-modal-dialog, .product-bom-selector-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        padding: 20px 14px 16px;
        border-radius: 18px 18px 10px 10px;
    }
    .modal-heading { margin-left: 34px; margin-bottom: 16px; }
    .modal-heading h2 { font-size: 20px; }
    .modal-actions { position: sticky; bottom: -16px; z-index: 2; padding: 14px 0 2px; background: #1a2723; }
    .modal-actions button { min-height: 46px; }

    .production-product-picker, .library-filters { padding: 12px; }
    .production-product-groups { max-height: 280px; }
    .production-product-option { min-height: 68px; }

    .product-master-collapse-content { padding: 0 14px 14px; }
    .product-master-collapse-summary { padding: 15px 16px; font-size: 16px; }
    .product-card-body { padding: 14px 0; }
    .product-card-body, .new-product-card > :not(summary) { margin-right: 12px; margin-left: 12px; }
    .product-template-heading > .button-secondary { width: 100%; }

    .auth-shell { align-items: center; padding: 20px 14px; }
    .auth-card { padding: 26px 20px; border-radius: 18px; }
    .auth-company-logo { height: 78px; }
    .auth-company-tagline { font-size: 18px; }
    .auth-form { gap: 16px; }
    .auth-form button { min-height: 48px; }
}

@media (min-width: 701px) and (max-width: 980px) {
    .app-header { align-items: flex-start; flex-wrap: wrap; }
    .nav { order: 3; width: 100%; }
    .page-shell { width: min(100% - 32px, 1540px); }
}

/* Neutral graphite palette correction: orange is the general accent; green
   is reserved below for success semantics only. */
.app-header { border-bottom-color: #333; background: #151515; }
.nav a { color: #b7b7b7; }
.nav a:hover,
.nav a:focus-visible { border-color: #454545; color: #f4f4f4; background: #252525; }
.nav a.active { border-color: #8c5728; color: #fff3e3; background: #4a321d; }
.user-nav small { color: #909090; }
.user-nav .button-secondary { border-color: #494949; color: #dedede; background: #252525; }
.user-nav .button-secondary:hover { background: #333; }

.production-product-option { border-color: #383838; color: #d1d1d1; background: #242424; }
.production-product-option:hover,
.production-product-option:focus-visible,
.production-product-option.is-selected { border-color: #c9792b; color: #fff4e5; background: #3e2b1d; }

input,
select,
textarea { border-color: #454545; color: #f0f0f0; background: #151515; }
input::placeholder,
textarea::placeholder { color: #777; }
input:focus,
select:focus,
textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(239 176 91 / 18%); }
input:disabled,
select:disabled,
textarea:disabled,
button:disabled { border-color: #363636; color: #777; background: #1b1b1b; }

button,
.button,
.action-link { border-color: #b66b25; color: #fff6ea; background: #ad6421; }
button:hover,
.button:hover,
.action-link:hover { border-color: #e09a4a; background: #ce7e2d; }
.button-secondary,
.action-link { border-color: #4b4b4b; color: #d5d5d5; background: #292929; }
.button-secondary:hover,
.action-link:hover { border-color: #666; color: #fff; background: #383838; }

details { border-color: #303030; background: #1b1b1b; }
details[open] > summary { background: #242424; }
summary::before { color: var(--navy); }

.table-wrap { background: #151515; scrollbar-color: #686868 #191919; }
.table-wrap.table-scroll { border-color: #303030; scrollbar-color: #6c6c6c #191919; }
.table-wrap.table-scroll::-webkit-scrollbar-track { background: #191919; }
.table-wrap.table-scroll::-webkit-scrollbar-thumb { border-color: #191919; background: #6c6c6c; }
.table-wrap.table-scroll::-webkit-scrollbar-thumb:hover { background: #929292; }
table { border-color: #303030; background: #1a1a1a; }
th,
.readable-table th { color: #d9d9d9; background: #292929; border-bottom-color: #474747; }
td { color: #d0d0d0; border-bottom-color: #303030; }
.readable-table tbody tr:nth-child(even):not(.superseded):not(.library-inactive):not(.inactive-row):not(.completed):not(.cancelled) td { background: #202020; }
.readable-table tbody tr:nth-child(odd) td { background: #1a1a1a; }
.readable-table tbody tr.superseded td { color: #a0a0a0; background: #252525; }
.readable-table tbody tr.library-inactive td,
.readable-table tbody tr.inactive-row td { color: #8d8d8d; background: #232323; }
/* A completed row is intentionally neutral; its badge carries success. */
.readable-table tbody tr.completed td { background: #1d1d1d; }
.readable-table tbody tr.cancelled td { background: #392226; }
@media (hover: hover) {
    .readable-table tbody tr:hover td,
    .readable-table tbody tr:hover input,
    .readable-table tbody tr:hover select,
    .readable-table tbody tr:hover textarea { background: #303030; }
}

.status-success,
.status-ready,
.status-completed,
.ready,
.completed { border-color: #2b6a4c; color: #b9efcf; background: #173326; }
.status-warning,
.status-pending,
.status-in-progress,
.in_progress,
.released { border-color: #795b2e; color: #ffd693; background: #493719; }
.status-neutral,
.status-not-started,
.not_started { border-color: #4b4b4b; color: #d0d0d0; background: #292929; }

.production-link { border-color: #4a4a4a; color: #d1d1d1; background: #242424; }
.production-link:hover,
.production-link.active { border-color: #b8752e; color: #fff0dc; background: #3f2c1d; }
.tab-switcher { background: #191919; }
.tab-switcher button { color: #b6b6b6; }
.tab-switcher button:hover,
.tab-switcher button.is-active { color: #fff6ea; background: #ad6421; }

.modal-dialog { border-color: #444; background: #202020; }
.modal-close { border-color: #4b4b4b; color: #dedede; background: #2a2a2a; }
.modal-close:hover { background: #393939; }
.modal-actions { background: #202020; }
.product-master-collapse[open] > .product-master-collapse-summary,
.product-card[open] > summary,
.new-product-card[open] > summary { border-bottom-color: #404040; background: #292929; }
.admin-json,
.technical-specs { border-color: #444; color: #c5c5c5; background: #151515; }

.auth-page,
.auth-shell { background: #101010; }
.auth-card { border-color: #3b3b3b; border-top-color: var(--navy); background: #1d1d1d; }
.auth-brand { color: var(--navy); }
.auth-company-name { color: #b5b5b5; }
.auth-company-tagline { color: #f1f1f1; }

/* Compact Create Production selector.  The full searchable catalogue only
   exists inside its modal, while the established hidden model_id select keeps
   the backend form contract unchanged. */
.production-product-selector-trigger {
    display: grid;
    gap: 3px;
    width: min(100%, 430px);
    min-height: 54px;
    padding: 9px 13px;
    text-align: right;
}

.production-product-selector-trigger > span {
    color: #aaa;
    font-size: 12px;
}

.production-product-selector-trigger > strong {
    overflow: hidden;
    color: #ededed;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-product-selector-trigger.is-selected {
    border-color: #b8752e;
    background: #33271d;
}

.production-product-selector-dialog {
    width: min(820px, 94vw);
}

.production-product-selector-dialog .production-product-picker {
    width: 100%;
    max-width: none;
}

@media (max-width: 700px) {
    .production-product-selector-trigger {
        width: 100%;
    }

    .production-product-selector-dialog .production-product-groups {
        max-height: min(55vh, 430px);
    }
}