*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F8F7F4;--bg2:#F0EDE8;--bg3:#E8E4DC;
  --brd:#D8D3C8;--brd2:#EAE6E0;
  --tx:#1A1916;--tx2:#6B6660;--tx3:#6F6A63;
  --gn-bg:#E5F2D8;--gn-fg:#2A5C0A;
  --am-bg:#FEF0D0;--am-fg:#7A4300;
  --rd-bg:#FDEAEA;--rd-fg:#8B1F1F;
  --bl-bg:#E4EEF9;--bl-fg:#1A4A8A;
  --pu-bg:#EEEDFE;--pu-fg:#3C3489;
  --r:6px;--r2:10px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;color:var(--tx);background:var(--bg)
}
body{min-height:100vh}
/* Layout */
.shell{display:flex;flex-direction:column;min-height:100vh}
.topnav{background:#fff;border-bottom:1px solid var(--brd2);padding:0 24px;display:flex;align-items:center;gap:0;height:52px;position:sticky;top:0;z-index:100}
.nav-logo{font-size:16px;font-weight:700;letter-spacing:-.3px;margin-right:24px;color:var(--tx)}
.nav-logo span{color:var(--tx2);font-weight:400}
.nav-link{display:flex;align-items:center;gap:6px;padding:0 14px;height:52px;cursor:pointer;font-size:13px;color:var(--tx2);border-bottom:2px solid transparent;text-decoration:none;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit}
.nav-link:hover{color:var(--tx)}
.nav-link.active{color:var(--tx);border-bottom-color:var(--tx);font-weight:600}
.nav-badge{font-size:11px;background:var(--bg2);border-radius:20px;padding:1px 7px;color:var(--tx2)}
.nav-badge.warn{background:var(--am-bg);color:var(--am-fg)}
.nav-right{margin-left:auto;font-size:11px;color:var(--tx2)}
.main{flex:1;padding:24px;overflow-x:auto}
/* Shared */
input,select,textarea{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--brd);border-radius:var(--r);background:#fff;color:var(--tx);width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:#888;box-shadow:0 0 0 2px rgba(0,0,0,.06)}
button:focus-visible, a:focus-visible, .nav-link:focus-visible, .detail-tab:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--bl-fg);
  outline-offset: 2px;
}
button{font-family:inherit;cursor:pointer;border-radius:var(--r);font-size:13px;font-weight:500;transition:opacity .15s}
button:hover{opacity:.82}
button:disabled,button:disabled:hover{cursor:default;opacity:.55}
.btn-primary{background:var(--tx);color:#fff;border:none;padding:7px 16px}
.btn-secondary{background:none;border:1px solid var(--brd);color:var(--tx);padding:7px 16px}
.btn-danger{background:none;border:1px solid #E24B4A;color:var(--rd-fg);padding:7px 16px}
.btn-sm{padding:5px 12px;font-size:12px}
.icon-btn{background:none;border:none;color:var(--tx2);padding:4px 6px;font-size:14px;border-radius:var(--r)}
.icon-btn:hover{background:var(--bg2);color:var(--tx)}
.icon-btn.danger:hover{color:var(--rd-fg);background:var(--rd-bg)}
/* Badges */
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 9px;border-radius:20px;white-space:nowrap}
.catbadge{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;font-family:monospace}
.pill-sm{display:inline-block;font-size:11px;padding:1px 7px;border-radius:4px;border:1px solid var(--brd2);color:var(--tx2);margin-left:4px;vertical-align:middle}
/* List page */
.list-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.list-header h2{font-size:20px;font-weight:700}
.subhead{font-size:12px;color:var(--tx2);margin-top:2px}
.hdr-actions{display:flex;gap:8px;flex-shrink:0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat-card{background:var(--bg2);border-radius:var(--r2);padding:12px 16px}
.stat-n{display:block;font-size:22px;font-weight:700}
.stat-l{display:block;font-size:12px;color:var(--tx2);margin-top:2px}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar input{max-width:260px;min-width:160px}
.toolbar select{width:auto;min-width:120px}
/* Table */
.table-wrap{border:1px solid var(--brd2);border-radius:var(--r2);overflow-x:auto;overflow-y:hidden}
table{width:100%;min-width:max-content;border-collapse:collapse;font-size:13px;table-layout:fixed}
thead th{font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em;padding:8px 14px;border-bottom:1px solid var(--brd2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--bg2);position:relative}
/* Items 45/46: per-column resize handle and filter row, shared by any register
   that adopts attachColumnResizers()/a filter row — item register today. */
.col-resizer{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;user-select:none;z-index:1}
.col-resizer:hover{background:var(--bl-fg)}
table.col-resizing{user-select:none}
.col-filter-row th{padding:4px 8px;background:var(--bg2);text-transform:none;letter-spacing:normal}
.col-filter-row input,.col-filter-row select{font-size:12px;padding:3px 6px}
tbody tr{border-bottom:1px solid var(--brd2)}
tbody tr:last-child{border-bottom:none}
.row-click{cursor:pointer}
.row-click:hover{background:var(--bg2)}
td{padding:8px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.mono{font-family:monospace;font-size:12px}
.aud-t{width:100%;font-size:12px}
.aud-t td,.aud-t th{padding:2px 8px 2px 0;vertical-align:top;text-align:left;white-space:normal}
.aud-k{width:180px}
.aud-j{font-family:monospace;font-size:11px;white-space:pre-wrap;word-break:break-all}
.aud-d{background:var(--bg2);padding:10px 12px;white-space:normal}
.aud-h{font-weight:600;margin:8px 0 4px}
.aud-n{font-size:11px;margin:6px 0 0}
.aud-s{font-size:11px;white-space:nowrap}
.aud-f{display:flex;flex-direction:column;font-size:11px;color:var(--tx2)}
.aud-f input{width:130px}
.aud-b{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.muted{color:var(--tx2)}
.rev-cell{font-family:monospace;font-size:12px;text-align:center;color:var(--tx2)}
.actions-cell{text-align:right}
.empty-cell{text-align:center;padding:32px!important;color:var(--tx2);white-space:normal!important}
.total-row td{font-size:13px;border-top:2px solid var(--brd2)!important}
/* Item 56: `.muted`/`.rev-cell` at --tx2 (#6B6660) sit close to WCAG AA's
   4.5:1 floor on this app's light backgrounds — reported as marginally hard
   to read in item-detail tables. Scoped to tables (register lists and
   item-detail tabs alike, since both wrap their tables in .table-wrap)
   rather than to --tx2 itself, which also drives nav links, form labels and
   help text nobody reported a problem with. Same warm-gray family as
   --tx2/--tx3, just a darker point on it — not a new hue. */
.table-wrap .muted, .table-wrap .rev-cell { color: #55514B; }
/* Item detail */
.detail-header-bar{display:flex;align-items:flex-start;gap:16px;margin-bottom:0;flex-wrap:wrap}
.detail-title-area{flex:1;min-width:0}
.detail-num{font-family:monospace;font-size:12px;color:var(--tx2);margin-bottom:4px}
.detail-title-area h2{font-size:22px;font-weight:700;line-height:1.2}
.detail-sub{font-size:13px;color:var(--tx2);margin-top:4px}
.detail-status{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.detail-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--brd2);margin:16px 0 0}
.detail-tab{padding:8px 16px;cursor:pointer;font-size:13px;color:var(--tx2);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-family:inherit}
.detail-tab.active{color:var(--tx);border-bottom-color:var(--tx);font-weight:600}
.tab-content{padding:16px 0}
/* Overview tab */
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--brd2);border-radius:var(--r2);overflow:hidden}
.ov-row{padding:12px 16px;border-bottom:1px solid var(--brd2);border-right:1px solid var(--brd2)}
.ov-row:nth-child(3n){border-right:none}
.ov-row:nth-last-child(-n+3){border-bottom:none}
.ov-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);margin-bottom:4px}
.ov-value{display:block;font-size:13px;font-weight:500}
/* BOM tab */
.bom-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.bom-cost{font-size:13px;color:var(--tx2)}
/* Item 62: native number-input spinner arrows were reported partially cut off
   and hard to click. Best-effort CSS only (no custom JS spinner): more overall
   width and vertical padding so the browser has room to draw the up/down
   buttons at a normal size; the Qty column itself is widened to match (see the
   "Qty" <th> in renderBomTab) so a wider input is not clipped by the table
   cell's own overflow:hidden. Native spinner rendering still varies by browser
   and OS zoom level — this narrows the gap, it does not guarantee pixel-perfect
   rendering everywhere. */
.qty-input{width:64px;text-align:center;padding:4px 6px}
.note-input{font-size:12px;padding:3px 7px}
/* Where used */
/* Files tab */
.files-section{display:flex;flex-direction:column;gap:8px}
.file-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid var(--brd2);border-radius:var(--r2)}
.file-icon{font-size:20px;flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-info a{color:var(--bl-fg);font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.file-info a:hover,.file-preview:hover{text-decoration:underline}
.file-meta{font-size:11px;color:var(--tx2);display:block;margin-top:2px}
.upload-zone{border:1.5px dashed var(--brd);border-radius:var(--r2);padding:16px;text-align:center;cursor:pointer;font-size:13px;color:var(--tx2);margin-top:4px}
.upload-zone:hover{background:var(--bg2)}
/* Drag-over affordance (item 47). Toggled by the inline ondragover/ondragleave
   handlers on the zone itself, so it is rebuilt with the markup on every render
   rather than left behind as stale state. */
.upload-zone.drag-over{border-color:var(--bl-fg);border-style:solid;background:var(--bl-bg);color:var(--tx)}
.file-thumb{width:40px;height:40px;object-fit:cover;border-radius:var(--r);border:1px solid var(--brd2);flex-shrink:0;cursor:zoom-in}
.file-preview{font-size:11px;color:var(--bl-fg);text-decoration:none}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;align-items:center;justify-content:center;padding:32px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r2);background:#fff}
.file-cat,.file-cat-select{font-size:11px;color:var(--tx2);margin-top:2px}
.file-cat-select{padding:1px 4px}
.file-cat-filter{font-size:12px;padding:3px 7px;align-self:flex-start}
.upload-row{display:flex;align-items:flex-start;gap:8px}
.upload-row .upload-zone{flex:1;margin-top:0}
.file-upload-cat{font-size:12px;padding:3px 7px;flex-shrink:0}
/* Global input,select,textarea{width:100%} (line 41) would otherwise stretch these
   selects to fill their row, crushing the adjacent upload zone / list to nothing. */
.file-upload-cat,.file-cat-filter,.file-cat-select{width:auto;min-width:130px}
/* History */
.history-list{display:flex;flex-direction:column;gap:0}
.hist-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--brd2);align-items:flex-start}
.hist-row:last-child{border-bottom:none}
.hist-dot{width:28px;height:28px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:var(--tx2)}
.hist-note{font-size:13px;font-weight:500}
.hist-meta{font-size:12px;color:var(--tx2);margin-top:2px}
/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--tx2)}
.empty-state p{margin-bottom:12px;font-size:14px}
/* ECR detail */
.wf-bar{display:flex;align-items:center;gap:4px;margin:16px 0 20px}
.wf-step{display:flex;flex-direction:column;align-items:center;gap:3px}
.wf-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.wf-dot.done{background:var(--gn-bg);color:var(--gn-fg)}
.wf-dot.active{background:var(--am-bg);color:var(--am-fg)}
.wf-dot.pend{background:var(--bg3);color:var(--tx2)}
.wf-label{font-size:10px;color:var(--tx2);white-space:nowrap}
.wf-line{flex:1;height:1px;background:var(--brd2);margin-bottom:13px}
.ecr-body{display:flex;flex-direction:column;gap:16px}
.ecr-section{background:#fff;border:1px solid var(--brd2);border-radius:var(--r2);padding:16px}
.ecr-section h3{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--tx)}
.ecr-fields{display:flex;flex-direction:column;gap:10px}
.ecr-field{display:flex;flex-direction:column;gap:3px}
.approver-row{display:flex;align-items:center;gap:12px;padding:10px;background:var(--bg2);border-radius:var(--r);margin-bottom:6px}
.approver-row:last-child{margin-bottom:0}
.approver-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.approver-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.approver-info em{font-style:italic}
/* Matrix */
.matrix-box{background:var(--bg2);border-radius:var(--r2);padding:14px;margin-bottom:18px}
.matrix-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);margin-bottom:10px}
.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.matrix-cell{background:#fff;border:1px solid var(--brd2);border-radius:var(--r);padding:8px 10px}
.mc-type{font-size:12px;font-weight:700;margin-bottom:3px}
.mc-info{font-size:11px;color:var(--tx2);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:12px;border:1px solid var(--brd);padding:24px;width:560px;max-width:100%}
.modal-box.wide{width:700px}
.modal-title{font-size:15px;font-weight:700;margin-bottom:18px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--brd2)}
.modal-hint{font-size:13px;color:var(--tx2);margin-bottom:10px}
.num-pill{font-family:monospace;font-size:14px;font-weight:700;background:var(--bg2);border-radius:var(--r);padding:7px 12px;margin-bottom:14px;display:inline-block}
.hint-box{font-size:12px;color:var(--am-fg);background:var(--am-bg);border-radius:var(--r);padding:7px 11px;margin-bottom:12px}
.sign-context{background:var(--bg2);border-radius:var(--r);padding:12px;margin-bottom:14px}
.sign-context strong{display:block;margin-bottom:4px}
/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:12px;font-weight:600;color:var(--tx2)}
.pw-field{position:relative}
.pw-field input{padding-right:36px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;line-height:1;color:var(--tx2);padding:5px 7px;border-radius:var(--r)}
.pw-toggle:hover{color:var(--tx);background:var(--bg2)}
/* Picker */
.picker-list{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.picker-item{padding:8px 10px;border-radius:var(--r);border:1px solid var(--brd2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff}
.picker-item:hover,.picker-item.picked{background:var(--bg2)}
.picker-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.picker-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.added-tick{font-size:12px;color:var(--gn-fg);font-weight:700}
/* Back button */
.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2);cursor:pointer;background:none;border:none;padding:0;margin-bottom:16px;font-family:inherit}
.back-btn:hover{color:var(--tx)}
@media(max-width:700px){.stats-row{grid-template-columns:1fr 1fr}.matrix-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr 1fr}}

/* ECO / ECR specific */
.disp-select{font-size:12px;padding:3px 6px;width:auto;min-width:140px}
.ecr-body .ecr-section h3{color:var(--tx);font-size:13px;font-weight:700}
.sign-context strong{display:block}
.ecr-fields .ecr-field{padding:10px 0;border-bottom:1px solid var(--brd2)}
.ecr-fields .ecr-field:last-child{border-bottom:none}
.ecr-field .ov-label{display:inline-block;min-width:160px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2)}



/* TUAL Brand Theme */
:root {
  --tual-red:    #E2062C;
  --tual-black:  #1A1818;
  --tual-white:  #FFFFFF;
  --tual-crayon: #DAD7CE;
  --tual-grey:   #5C504B;
  --tual-midgrey:#948D87;
  --tual-gold:   #BA9765;

  /* Override system vars with TUAL brand */
  --bg:    #F5F4F1;
  --bg2:   #EDEAE4;
  --bg3:   #DAD7CE;
  --brd:   #C8C4BB;
  --brd2:  #E0DDD6;
  --tx:    #1A1818;
  --tx2:   #5C504B;
  --tx3:   #6F6A63;
  --gn-bg: #E5F2D8; --gn-fg: #2A5C0A;
  --am-bg: #FEF0D0; --am-fg: #7A4300;
  --rd-bg: #FDEAEA; --rd-fg: #8B1F1F;
  --bl-bg: #E4EEF9; --bl-fg: #1A4A8A;
  --pu-bg: #EEEDFE; --pu-fg: #3C3489;
}

/* Topnav — TUAL brand black */
.topnav {
  background: var(--tual-black);
  border-bottom: none;
}
.nav-logo { color: var(--tual-white) !important; }
.nav-logo span { color: var(--tual-midgrey) !important; }
.nav-link { color: var(--tual-midgrey) !important; }
.nav-link:hover { color: var(--tual-white) !important; }
.nav-link.active {
  color: var(--tual-white) !important;
  border-bottom-color: var(--tual-red) !important;
}
.nav-badge { background: #333; color: var(--tual-midgrey); }
.nav-badge.warn { background: #E2062C22; color: var(--tual-red); }
.nav-right { color: var(--tual-midgrey); }
#saving { color: var(--tual-midgrey); }

/* Buttons */
.btn-primary { background: #E2062C; color: #FFFFFF; border: none; }
.btn-primary:hover { background: #c00525; opacity:1; }
.btn-primary:disabled, .btn-primary:disabled:hover { background: var(--tx2); opacity: 1; }

/* Logo in nav */
.nav-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* BOM view toggle */
.view-toggle {
  display: flex;
  border: 1px solid var(--brd);
  border-radius: var(--r);
  overflow: hidden;
}
.view-toggle button {
  padding: 4px 12px;
  font-size: 12px;
  border: none;
  background: none;
  color: var(--tx2);
  cursor: pointer;
  border-right: 1px solid var(--brd);
}
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: var(--tx); color: #fff; }
.view-toggle button:hover:not(.active) { background: var(--bg2); }

/* BOM child rows */
.bom-child { background: #FAFAF8; }

/* Sourcing layout */
.sourcing-layout { display: flex; flex-direction: column; gap: 20px; }
.src-card { background: #fff; border: 1px solid var(--brd2); border-radius: var(--r2); padding: 16px; }
.src-field-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin-bottom: 10px; }
.sourcing-alts .section-label { margin-bottom: 0; }

/* Red accent line on stat cards */
.stat-card { border-left: 3px solid transparent; }
.stat-card:first-child { border-left-color: #E2062C; }

/* Table header background */
thead th { background: #1A1818; color: #DAD7CE; }

@media(max-width:700px){ .src-field-grid { grid-template-columns: 1fr 1fr; } }


/* Revision selector — clear visual hierarchy */
.rev-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--brd2);
  margin-bottom: 0;
}
.rev-selector-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rev-selector-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx2);
  margin-right: 4px;
  white-space: nowrap;
}
/* Base chip */
.rev-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--brd);
  background: #fff;
  gap: 2px;
  transition: border-color .12s, box-shadow .12s;
}
.rev-chip:hover { border-color: #1A1818; }

/* Past released revisions — muted grey */
.rev-chip--past {
  background: var(--bg2);
  opacity: .75;
}
.rev-chip--past:hover { opacity: 1; }

/* Current revision — Preliminary / In work: green emphasis */
.rev-chip--prelim {
  background: #F0FAF0;
  border-color: #2A5C0A55;
}
.rev-chip--prelim:hover { border-color: #2A5C0A; }

/* Current revision — Released (no working rev yet) */
.rev-chip--released-current {
  background: #fff;
  border-color: var(--brd);
}

/* Active / selected chip: bold outline */
.rev-chip--active {
  border-width: 2px;
  border-color: #1A1818 !important;
  box-shadow: 0 0 0 2px rgba(26,24,24,.08);
  opacity: 1 !important;
}
.rev-chip--prelim.rev-chip--active {
  border-color: #2A5C0A !important;
  box-shadow: 0 0 0 2px rgba(42,92,10,.12);
}

.rev-chip-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #1A1818;
}

/* Status badges inside chips */
.rev-chip-badge {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 3px;
  padding: 1px 5px;
}
.rev-chip-badge--released {
  background: #E5E2DB;
  color: #5C504B;
}
.rev-chip-badge--prelim {
  background: #D4EDDA;
  color: #2A5C0A;
}
.rev-chip-badge--locked {
  background: #FDEAEA;
  color: #C0182A;
}

/* Guidance note below chips */
.rev-selector-guidance { font-size: 12px; padding-left: 2px; }
.rev-note { display: inline-flex; align-items: center; gap: 6px; }
.rev-note--info  { color: var(--tx3); }
.rev-note--ok    { color: #2A5C0A; font-weight: 600; }
.rev-note--warn  { color: #7A4300; background: #FEF3E2; padding: 4px 10px; border-radius: var(--r); border: 1px solid #E8C27055; }
.rev-note--locked { color: #C0182A; background: #FDEAEA; padding: 4px 10px; border-radius: var(--r); border: 1px solid #E2062C33; }
.rev-note-link {
  background: none; border: none; cursor: pointer;
  color: #E2062C; font-weight: 700; font-size: 12px;
  text-decoration: underline; padding: 0;
}
.rev-note-link:hover { color: #a00420; }

/* Snapshot (read-only past revision) banner */
.snapshot-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff8e1;
  border: 1px solid #E2062C33;
  border-radius: var(--r2);
  margin: 8px 0 0;
  font-size: 13px;
}
.snapshot-banner strong { display: block; font-weight: 700; }
.snapshot-banner span { color: var(--tx2); font-size: 12px; }
.snapshot-banner a { color: #E2062C; }
.snapshot-icon { font-size: 18px; flex-shrink: 0; }
.snapshot-ro {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #E2062C;
  background: #fde;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #E2062C44;
}


/* Change indicator pills on item list / BOM */
.change-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: default;
  white-space: nowrap;
}
.eco-pill {
  background: #E2062C18;
  color: #E2062C;
  border: 1px solid #E2062C44;
}
.ecr-pill {
  background: var(--bl-bg);
  color: var(--bl-fg);
  border: 1px solid #1A4A8A44;
}
/* hide ECR pills from change indicator (ECO only) */
.ecr-pill { display: none; }
.no-click { cursor: default !important; }
td.no-click:hover { background: inherit !important; }


/* Item lock state */
.locked-btn {
  opacity: 0.7;
  border-style: dashed !important;
}
.locked-btn:hover {
  opacity: 1;
  border-color: #E2062C !important;
  color: #E2062C !important;
}


/* New item manual number entry */
.num-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.manual-num-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--tx2);
  cursor: pointer;
  user-select: none;
}
.manual-num-toggle input[type=checkbox] {
  width: auto;
  margin: 0;
  cursor: pointer;
}


/* BOM rev status badges */
.bom-rev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.bom-rev-unreleased { background:#FEF0D0; color:#7A4300; }
.bom-rev-inwork     { background:#E5F2D8; color:#2A5C0A; }
.bom-rev-released   { background:#E5E2DB; color:#5C504B; }

/* Redline dot — item has In work changes since last release */
.bom-redline-dot {
  color: #E2062C;
  font-size: 10px;
  margin-left: 4px;
  cursor: default;
  vertical-align: middle;
}


/* Login screen */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1818;
  background-image: url('/assets/hero.webp');
  background-size: cover;
  background-position: center;
}
.login-box {
  width: 380px;
  background: rgba(255,255,255,0.97);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-logo {
  text-align: center;
  margin-bottom: 20px;
  background: #1A1818;
  border-radius: 8px;
  padding: 12px;
}
.login-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx2);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.login-setup-notice {
  background: #FEF3E2;
  border: 1px solid #E8C27055;
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 13px;
  color: #7A4300;
  margin-bottom: 12px;
}


/* Help section */
.help-body { max-width: 820px; padding: 0 0 40px; }
.help-toc {
  background: var(--bg2); border: 1px solid var(--brd2); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 28px;
}
.help-toc h2 {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx2); margin-bottom: 8px;
}
.help-toc ul { list-style: none; padding: 0; columns: 2; column-gap: 26px; }
.help-toc li { margin-bottom: 3px; break-inside: avoid; }
.help-toc a {
  color: var(--tx2); text-decoration: none; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.help-toc a:hover { color: #E2062C; border-bottom-color: #E2062C; }
.help-section { scroll-margin-top: 16px; }
.help-note {
  background: var(--bg2); border-left: 3px solid #E2062C;
  padding: 10px 14px; margin: 10px 0; font-size: 13px; line-height: 1.7; color: var(--tx2);
}
.help-section { margin-bottom: 28px; }
.help-section h2 {
  font-size: 14px; font-weight: 700; color: var(--tx);
  border-bottom: 2px solid #E2062C; padding-bottom: 6px;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.help-section ol, .help-section ul { padding-left: 20px; line-height: 1.9; color: var(--tx2); }
.help-section li { margin-bottom: 4px; }
.help-section li strong { color: var(--tx); }
.help-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px;
}
.help-table th { background: #1A1818; color: #DAD7CE; padding: 7px 12px; text-align: left; font-size: 11px; letter-spacing: .04em; }
.help-table td { padding: 7px 12px; border-bottom: 1px solid var(--brd2); vertical-align: top; }
.help-table tr:last-child td { border-bottom: none; }

/* Guided tour / first-login welcome */
#tour-layer { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
#tour-layer.on { pointer-events: auto; }
.tour-dim {
  position: fixed; inset: 0; background: rgba(20,18,18,0.62);
  /* The cut-out is drawn as a box-shadow spread from the highlight box, so no
     four-rectangle geometry is needed and it follows the target exactly. */
}
.tour-hole {
  position: fixed; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20,18,18,0.62), 0 0 0 2px #E2062C;
  transition: all .18s ease;
}
.tour-pop {
  position: fixed; width: 340px; max-width: calc(100vw - 24px);
  /* A long step must scroll inside the box rather than grow past the viewport.
     An over-tall popover fits nowhere, and "fits nowhere" is what used to force
     it on top of the very thing it was pointing at. Capping the height here
     means the measured size the placement math sees is already placeable. */
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--bg1, #fff); border: 1px solid var(--brd, #e0d9cf);
  border-radius: 10px; padding: 16px 18px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35); font-size: 13px; color: var(--tx2, #4a4643);
}
.tour-pop h3 { font-size: 15px; font-weight: 700; color: var(--tx, #1A1818); margin-bottom: 6px; }
.tour-pop p { line-height: 1.6; margin-bottom: 10px; }
.tour-pop ul { margin: 0 0 10px 18px; line-height: 1.6; }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour-progress { font-size: 11px; color: #948D87; letter-spacing: .04em; }
.tour-foot .tour-spacer { flex: 1; }
.tour-welcome {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 460px; max-width: calc(100vw - 32px);
  background: var(--bg1, #fff); border: 1px solid var(--brd, #e0d9cf);
  border-radius: 12px; padding: 26px 28px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.42);
}
.tour-welcome h2 { font-size: 19px; color: var(--tx, #1A1818); margin-bottom: 8px; }
.tour-welcome .tour-lead { font-size: 13px; color: var(--tx2, #4a4643); line-height: 1.65; margin-bottom: 12px; }
.tour-welcome ul { margin: 0 0 16px 18px; font-size: 13px; color: var(--tx2, #4a4643); line-height: 1.8; }
.tour-demo-flag {
  display: inline-block; background: #FEF0D0; color: #7A4300;
  border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; margin-bottom: 12px;
}