*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  background: #f0f2f5;
  color: #222;
}

/* ══════════════════════════════════════════════
   App Shell
   ══════════════════════════════════════════════ */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shell-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0e1f33;   /* the lit gradient is applied in the override block at the end */
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.shell-logo {
  background: linear-gradient(#3b82f6, #2563eb);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 7px;
  letter-spacing: 0.6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .15s;
}

.shell-logo:hover {
  filter: brightness(1.12);
}

/* Two tones, because these are two different things: the document standard this app
   produces, and whose plant it is. One flat grey made the app's own name the quietest
   thing on its own bar. */
.shell-title {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13px;
  color: #e2e8f0;
  letter-spacing: .01em;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shell-title b {
  font-weight: 600;
}

/* Separated by a middot drawn in CSS, so the markup carries only the two names. */
.shell-title-org {
  position: relative;
  padding-left: 12px;
  color: #8aa4c0;
  font-weight: 400;
}

.shell-title-org::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

.shell-bom-id {
  color: #93c5fd;
  font-size: 11px;
  font-family: monospace;
  background: rgba(37, 99, 235, .3);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
  border: none;
}

/* The part no. chip is also the switcher between the BOMs of one model
   (one imported file = several BOMs, one per product key). */
.shell-bom-switch { position: relative; display: inline-flex; margin-left: 4px; }
.shell-bom-switch .shell-bom-id { margin-left: 0; }
.shell-bom-id--btn { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.shell-bom-id--btn:hover { background: rgba(59, 130, 246, .55); color: #dbeafe; }
.shell-bom-caret { font-size: 8px; opacity: .85; }

.shell-bom-backdrop { position: fixed; inset: 0; z-index: 60; }
.shell-bom-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 61;
  min-width: 268px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  padding: 5px;
}
/* Anchored to a trigger sitting at the right end of a bar. Must come after the
   base rule — same specificity, so source order decides. */
.shell-bom-menu--right { left: auto; right: 0; }
.shell-bom-menu-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}
.shell-bom-menu-n {
  margin-left: auto;
  background: #eef2f9;
  color: #475569;
  border-radius: 99px;
  padding: 1px 7px;
}
.shell-bom-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.shell-bom-item:hover { background: #f1f5fb; }
.shell-bom-item--cur { background: #eff6ff; }
.shell-bom-item-pn { font-family: monospace; font-size: 12px; font-weight: 700; color: #1e293b; }
.shell-bom-item-meta { font-size: 11px; color: #94a3b8; margin-left: auto; white-space: nowrap; }
.shell-bom-item-ok { color: #16a34a; font-size: 11px; font-weight: 800; }
.shell-bom-item-here {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #2563eb;
  background: #dbeafe;
  border-radius: 99px;
  padding: 1px 6px;
}

/* Approval state of the open BOM, on the dark top bar */
.shell-approved,
.shell-sup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 6px;
  white-space: nowrap;
}

.shell-approved {
  color: #bbf7d0;
  background: rgba(22, 163, 74, .25);
  border: 1px solid rgba(134, 239, 172, .45);
}

/* SUP. signs no cell on the sheet — blue keeps it apart from the sheet's own state */
.shell-sup {
  color: #bfdbfe;
  background: rgba(37, 99, 235, .25);
  border: 1px solid rgba(147, 197, 253, .45);
}

.shell-back {
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}

.shell-back:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

.shell-userbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.shell-username {
  color: #cbd5e1;
  font-size: 12px;
}

/* ── Login page ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

/* Sheet mark above the wordmark on the sign-in card. Sized against the 32px
   wordmark below it so the pair reads as one lockup. */
.login-mark {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
}

.login-logo {
  font-size: 32px;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: -1px;
  text-align: center;
}

.login-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  margin-top: 4px;
}

.login-sub {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-bottom: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.login-input {
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}

.login-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.login-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.login-error {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
}

.login-btn {
  padding: 11px;
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-btn:hover:not(:disabled) {
  background: #1d4ed8;
}

.login-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* aliases used by LoginPage.jsx */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

.login-card {
  display: flex;
  flex-direction: column;
}

.login-card .login-input {
  margin-bottom: 2px;
}

.login-card .login-label {
  margin-top: 12px;
}

.login-err {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 12px;
}

.login-card .login-btn {
  margin-top: 18px;
}

/* Login error popup (toast) — slides down from the top */
.login-toast {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  z-index: 9999;
  max-width: 92vw;
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  padding: 13px 16px;
  border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  font-size: 14px;
  font-weight: 600;
  animation: login-toast-in .28s cubic-bezier(.2, .9, .3, 1.3);
}

.login-toast-icon {
  font-size: 17px;
  line-height: 1;
}

.login-toast-msg {
  flex: 1;
  white-space: nowrap;
}

.login-toast-close {
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
  transition: all .15s;
}

.login-toast-close:hover {
  color: #64748b;
  background: #f1f5f9;
}

@keyframes login-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -22px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ── Topbar user chip ── */
/* When grouped in the right-hand topbar cluster, the user chip sits next to the
   action buttons (no auto-margin gap). */
.shell-topbar-right .shell-user { margin-left: 0; }

.shell-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shell-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.shell-user-admin {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.shell-user-admin:hover {
  background: rgba(255, 255, 255, .22);
}

.role-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.role-admin {
  background: #fee2e2;
  color: #b91c1c;
}

.role-engineering {
  background: #dbeafe;
  color: #1d4ed8;
}

.role-purchase {
  background: #dcfce7;
  color: #15803d;
}

/* ── Admin users dialog ── */
.admin-add {
  background: linear-gradient(180deg, #f8fbff, #f1f6fc);
  border: 1px solid #e3eaf3;
  border-radius: 14px;
  padding: 18px 20px;
}

.admin-add-title {
  font-size: 12px;
  font-weight: 800;
  color: #2d5277;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-add-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr .9fr auto;
  gap: 10px;
  align-items: center;
}

.admin-mini {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #9aa7b8;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-mini svg {
  display: block;
}

.admin-mini:hover {
  transform: translateY(-1px);
}

.admin-mini--edit:hover {
  background: #eef4ff;
  color: #2563eb;
}

.admin-mini--key:hover {
  background: #fff8eb;
  color: #d97706;
}

.admin-mini--del:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Admin full page */
.admin-page {
  padding: 36px 24px;
  background: linear-gradient(180deg, #e9eef5, #f1f5f9 240px);
  min-height: 100%;
}

.admin-card {
  background: #fff;
  border: 1px solid #e6ecf4;
  border-radius: 18px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: 0 10px 36px rgba(15, 23, 42, .10);
  overflow: hidden;
}

.admin-page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
  background: linear-gradient(100deg, #1e3a5f, #2f5982);
}

.admin-page-hdr .bdv-btn--secondary {
  background: #fff;
  color: #1e3a5f;
  font-weight: 600;
  border: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: all .15s ease;
}

.admin-page-hdr .bdv-btn--secondary:hover {
  background: #e8f0fa;
  color: #16304d;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

/* Admin table + inputs (scoped — doesn't touch BOM tables) */
.admin-card .comp-dialog-input,
.admin-card .comp-select {
  border: 1px solid #d8e1ec;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  background: #fff;
  transition: all .15s;
}

.admin-card .comp-dialog-input:focus,
.admin-card .comp-select:focus {
  border-color: #2f5982;
  box-shadow: 0 0 0 3px rgba(47, 89, 130, .14);
  outline: none;
}

.admin-card .comp-tbl {
  font-size: 13px;
}

.admin-card .comp-tbl th {
  background: transparent;
  padding: 11px 14px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #e6ecf4;
}

.admin-card .comp-tbl td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-card .comp-tbl tbody tr {
  transition: background .12s;
}

.admin-card .comp-tbl tbody tr:hover td {
  background: #f6faff;
}

.admin-card .comp-tbl tbody tr:last-child td {
  border-bottom: none;
}

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid #e2e8f0;
}

.admin-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.admin-tab:hover {
  color: #1e3a5f;
}

.admin-tab.active {
  color: #1e3a5f;
  border-bottom-color: #1e3a5f;
}

/* Activity timeline */
.act-timeline {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.act-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}

.act-row:hover {
  background: #f8fafc;
}

.act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.act-dot.act-login {
  background: #3b82f6;
}

.act-dot.act-add {
  background: #16a34a;
}

.act-dot.act-edit {
  background: #d97706;
}

.act-dot.act-del {
  background: #dc2626;
}

.act-dot.act-out {
  background: #64748b;
}

.act-dot.act-approve {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .25);
}

/* ── Floating toast notifications (top-right) ── */
.toast-stack {
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.toast {
  background: #fff;
  border-radius: 12px;
  padding: 13px 16px 13px 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  cursor: pointer;
  border-left: 4px solid #94a3b8;
  animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2);
}

.toast:hover {
  filter: brightness(.99);
}

.toast--approve {
  border-left-color: #22c55e;
  background: #f0fdf4;
}

.toast-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

.toast-body {
  font-size: 12px;
  color: #475569;
  margin-top: 3px;
  font-family: monospace;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* User online/offline dot */
.u-status {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

.u-on {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

.u-off {
  background: #cbd5e1;
}

/* Activity drawer (right slide-out) */
/* Activity button in the topbar (left side, next to the title) */
.shell-topbar-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.shell-topbar-act:hover {
  background: rgba(255, 255, 255, .22);
}

/* Icon-only topbar action (Notifications, Activity). It sits ON the bar rather than in
   a box of its own: a filled panel and a border made each one read as a raised chip
   floating above the header. Transparent at rest, so the bar stays one surface and the
   icon is the only mark on it; the background appears only under the pointer, which is
   where a button has to say it is a button. `position: relative` carries the badge. */
.shell-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.shell-icon-btn:hover,
.shell-icon-btn:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  outline: none;
}

/* Signing out is the one irreversible thing on this bar, so it is the one control that
   changes colour rather than just brightness. */
.shell-icon-btn--danger:hover,
.shell-icon-btn--danger:focus-visible {
  background: rgba(220, 38, 38, .9);
  color: #fff;
}

/* Hairline between what you can DO and who you ARE. */
.shell-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, .14);
  flex-shrink: 0;
}

/* Name + role as one button: they mean the same thing and go to one place. */
.shell-account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px;
  border: none;
  border-radius: 99px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}

.shell-account:hover,
.shell-account:focus-visible {
  background: rgba(255, 255, 255, .10);
  outline: none;
}

/* The role on a DARK bar. The .role-badge fills are built for white pages, and on this
   background the light one turned a piece of static metadata into the brightest thing
   here — louder than the document being worked on. Outlined and lower-case instead:
   present, legible, and quieter than everything that actually changes. */
.shell-role-chip {
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  color: #9fb6d0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: capitalize;
  white-space: nowrap;
}

/* The count sits ON the icon rather than beside it, so the strip keeps its width no
   matter how many decisions are waiting. Ringed in the bar's own colour so it reads as
   attached to the button and not as loose text floating over the header. */
.shell-icon-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: #dc2626;
  box-shadow: 0 0 0 2px #0e1f33;   /* the topbar's own colour — see .shell-topbar */
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* Activity popup (centered modal) */
.act-popup {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, .3);
  /* Wide on purpose: an approval entry carries a part no., a capacity and an email
     address, and at 700px all of that wrapped into unreadable slivers. */
  width: 1080px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: alert-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}

.act-drawer-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
}

/* Activity filters */
.act-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.act-filter {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}

.act-filter:hover {
  background: #e2e8f0;
}

.act-filter.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.act-when {
  color: #94a3b8;
  font-family: monospace;
  white-space: nowrap;
}

.act-user {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.act-action {
  color: #475569;
  white-space: nowrap;
}

.act-target {
  font-family: monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.act-detail {
  color: #94a3b8;
  font-size: 11px;
}

/* ── Timeline rows: time column | dot | (action · actor · target / detail) ──
   Grouped under a day header, since the date repeats on every record. */
.act-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 6px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.act-day-date {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #1e3a5f;
  font-family: monospace;
}
.act-day-n { font-size: 11px; color: #94a3b8; margin-left: auto; }

.act-row2 {
  display: grid;
  grid-template-columns: 74px 10px 1fr;
  align-items: start;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 1px solid #f1f5f9;
}
.act-row2:hover { background: #f8fafc; }

.act-time {
  font-family: monospace;
  font-size: 12px;
  color: #64748b;
  text-align: right;
  padding-top: 1px;
}
.act-row2 .act-dot { margin-top: 5px; }

.act-body { min-width: 0; }
.act-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.act-action2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.act-user2 { font-size: 13px; font-weight: 700; color: #0f172a; }

/* The ECI the activity happened on. Recorded with the record = solid; taken from the
   BOM's current value because the record has none = outlined, with a trailing *. */
.act-eci {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.act-eci--current {
  color: #94a3b8;
  background: #fff;
  border: 1px dashed #cbd5e1;
  font-weight: 600;
}
.act-target--link { cursor: pointer; }
.act-target--link:hover { background: #dbeafe; text-decoration: underline; }

/* The line that carries the capacity signed in, the address the link went to, or the
   rejection reason — the reason this panel is open at all. */
.act-detail2 {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  word-break: break-word;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.shell-nav {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  position: sticky;
  top: 48px;
  z-index: 40;
}

.shell-tab {
  flex: 1;
  padding: 12px 8px 11px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: color .15s, border-color .15s, background .15s;
}

.shell-tab:hover {
  color: #2563eb;
  background: #f8fafc;
}

.shell-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.shell-tab--home {
  flex: 0 0 auto;
  padding: 12px 16px 11px;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
}

.shell-tab--home:hover {
  color: #1d4ed8;
  background: #eff6ff;
}

.shell-nav-sep {
  width: 1px;
  background: #e2e8f0;
  align-self: stretch;
  margin: 6px 4px;
}

.shell-content {
  flex: 1;
  overflow: auto;
}

/* ── Home ────────────────────────────────────── */
.home-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
  background: linear-gradient(160deg, #fdf4ff 0%, #f0f4ff 45%, #f0f9ff 100%);
}

/* Hero */
.home-hero {
  background: transparent;
  padding: 64px 56px 0px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-hero::before,
.home-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .4;
}

.home-hero::before {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #c7d2fe, transparent 70%);
  top: -200px;
  left: -180px;
}

.home-hero::after {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #fbcfe8, transparent 70%);
  bottom: -180px;
  right: -140px;
}

/* Sized in em so the mark tracks the hero type rather than needing its own
   breakpoints; the slight lift puts its optical centre on the cap height. */
.home-hero-mark {
  height: .72em;
  width: .72em;
  margin-right: .16em;
  vertical-align: -.06em;
}

.home-hero-title {
  font-size: 88px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px;
  letter-spacing: -2px;
  line-height: 1.05;
  position: relative;
  z-index: 1;
}

.home-hero-sub {
  font-size: 22px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 36px;
  position: relative;
  z-index: 1;
}

/* two-column hero: text/options on the left, dropzone on the right — on a light-blue panel */
.home-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: none;
  margin: 0 0 40px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #e9f1fe 0%, #eef4ff 100%);
  border: 1px solid #dbe6fb;
  border-radius: 32px;
  padding: 64px 72px;
  box-shadow: 0 16px 56px rgba(37, 99, 235, .09);
}

.home-hero-left {
  text-align: left;
}

.home-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-hero-points li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  color: #334155;
  font-weight: 500;
}

.home-hero-points li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.home-hero-left .home-group-selector {
  justify-content: flex-start;
  margin: 8px 0 22px;
}

.home-hero-right {
  min-width: 0;
}

/* clean white upload card on the blue panel — formal look */
.home-hero-right .home-dropzone {
  max-width: none;
  width: 100%;
  margin: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 20px;
  padding: 48px 40px 40px;
  text-align: center;
  cursor: pointer;
  max-width: 640px;
  width: 100%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  transition: border-color .2s, box-shadow .2s, background .2s;
  position: relative;
  overflow: hidden;
  /* clips hidden <input> */
  user-select: none;
}

.home-hero-right .home-dropzone:hover,
.home-hero-right .home-dropzone--drag {
  border-color: #3b82f6;
  border-style: solid;
  box-shadow: 0 8px 32px rgba(59, 130, 246, .14);
  background: #f8fbff;
}

@media (max-width: 820px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-hero-left {
    text-align: center;
  }

  .home-hero-points {
    align-items: center;
  }

  .home-hero-left .home-group-selector {
    justify-content: center;
  }
}

/* Dropzone */
.home-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 20px;
  padding: 48px 40px 40px;
  text-align: center;
  cursor: pointer;
  max-width: 640px;
  width: 100%;
  margin: 0 auto 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  transition: border-color .2s, box-shadow .2s, background .2s;
  position: relative;
  overflow: hidden;
  /* clips hidden <input> */
  user-select: none;
}

.home-dropzone:hover,
.home-dropzone--drag {
  border-color: #3b82f6;
  border-style: solid;
  box-shadow: 0 8px 32px rgba(59, 130, 246, .14);
  background: #f8fbff;
}

.home-dropzone--drag {
  background: #eff6ff !important;
}

.home-dropzone-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: #94a3b8;
  display: block;
  transition: color .2s, transform .2s;
}

.home-dropzone:hover .home-dropzone-icon,
.home-dropzone--drag .home-dropzone-icon {
  color: #3b82f6;
  transform: translateY(-3px);
}

.home-dropzone-title {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 18px;
}

.home-dropzone-btn {
  display: inline-block;
  padding: 11px 36px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(37, 99, 235, .35);
  transition: box-shadow .15s, transform .1s;
  margin-bottom: 14px;
  pointer-events: none;
  /* label handles click */
}

.home-dropzone:hover .home-dropzone-btn {
  box-shadow: 0 6px 20px rgba(37, 99, 235, .45);
  transform: translateY(-1px);
}

.home-dropzone-hint {
  font-size: 11px;
  color: #94a3b8;
}

.home-paste-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 6px 14px;
  font-size: 12px;
  color: #6b7280;
  background: none;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.home-paste-btn:hover {
  color: #4338ca;
  border-color: #a5b4fc;
  background: #eef2ff;
}

.home-upload-progress {
  margin: 10px auto 0;
  padding: 6px 14px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .4
  }
}

/* Paste DSI Text modal */
.paste-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.paste-modal {
  background: #fff;
  border-radius: 12px;
  width: 680px;
  max-width: 96vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.paste-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.paste-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  flex: 1;
  overflow: auto;
}

.paste-modal-hint {
  font-size: 12px;
  color: #6b7280;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
}

.paste-modal-group-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.paste-modal-group-label {
  font-size: 12px;
  color: #6b7280;
  margin-right: 2px;
}

.paste-modal-textarea {
  width: 100%;
  min-height: 280px;
  max-height: 50vh;
  font-size: 11px;
  font-family: 'Consolas', monospace;
  color: #1e293b;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.paste-modal-textarea:focus {
  border-color: #6366f1;
  background: #fff;
}

.paste-modal-error {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
}

.paste-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
}

/* Line icons (Components/BomApp/Icon.razor) — they replaced emoji, so they have to
   sit on the text baseline the emoji used to occupy and never stretch in a flex row. */
.icn {
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* BOM Group picker — the raised card the home stats strip used to occupy, reused for
   the choice that actually has to be made before an import. Segments share one surface
   with hairline dividers, so it reads as a single control rather than five buttons. */
.grp-pick {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  padding: 5px;
  margin-bottom: 12px;
  max-width: 100%;
  flex-wrap: wrap;
}

.grp-pick-lead {
  display: flex;
  align-items: center;
  padding: 0 14px 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.grp-pick-sep {
  width: 1px;
  background: #e8edf4;
  margin: 9px 0;
  flex-shrink: 0;
}

.grp-pick-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: none;
  background: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.grp-pick-item:hover {
  color: #1e40af;
  background: #f1f5f9;
}

/* Selected reads as filled, not merely coloured — this is the state the upload uses. */
.grp-pick-item.active {
  color: #1d4ed8;
  background: #eff6ff;
}

/* List section */
.home-list-section {
  background: transparent;
  flex: 1;
  padding: 0px 56px 64px;
  max-width: none;
  width: 100%;
  margin: 0;
}

.home-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 16px;
}

.home-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.home-list-title {
  font-size: 15px;
  font-weight: 700;
  color: #374151;
}

/* The count belongs to the title it counts, so it sits right beside it and takes the
   spare room — anything after it (the Create button) is pushed to the far end. */
.home-list-count {
  font-size: 12px;
  color: #94a3b8;
  background: #e2e8f0;
  padding: 3px 10px;
  border-radius: 10px;
  margin-right: auto;
}

.home-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.home-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.home-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.home-search-clear:hover {
  color: #374151;
}

.home-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #94a3b8;
}

.home-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}

.home-empty-sub {
  font-size: 12px;
}

/* ── Skeleton UI ── */
@keyframes sk-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes sk-progress {
  0% {
    transform: scaleX(0);
  }

  60% {
    transform: scaleX(0.75);
  }

  90% {
    transform: scaleX(0.9);
  }

  100% {
    transform: scaleX(0.95);
  }
}

.sk-block {
  background: #e8edf3;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.sk-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #f4f6f9 50%, transparent 100%);
  animation: sk-shimmer 1.4s infinite linear;
  will-change: transform;
}

/* ── Skeleton BOM Document ── */
.sk-doc-wrap {
  padding: 12px 0 24px;
}

.sk-doc-paper {
  background: #fff;
  border: 1px solid #d0d7e3;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  padding: 12px 14px 10px;
  position: relative;
  overflow: hidden;
}

/* shimmer overlay sweeping across whole paper */
.sk-doc-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  animation: sk-shimmer 1.6s infinite linear;
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

/* base skeleton block */
.sk-b {
  background: #e4e9f0;
  border-radius: 2px;
  flex-shrink: 0;
}

.sk-b--xs {
  height: 7px;
}

.sk-b--sm {
  height: 9px;
}

.sk-b--pn {
  height: 8px;
}

.sk-b--thead {
  height: 18px;
}

.sk-b--title {
  height: 20px;
  width: 55%;
}

/* header 3-column layout */
.sk-doc-hdr {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 10px;
  margin-bottom: 8px;
  align-items: start;
  min-height: 80px;
}

.sk-doc-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sk-doc-hdr-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

.sk-doc-hdr-right {}

.sk-doc-sign-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #d0d7e3;
  border-radius: 2px;
  overflow: hidden;
}

.sk-doc-sign-cell {
  height: 18px;
  border: 1px solid #e4e9f0;
  background: #f5f7fa;
}

.sk-doc-sign-cell--tall {
  height: 30px;
  border: 1px solid #e4e9f0;
  background: #f5f7fa;
}

/* meta rows below header */
.sk-doc-meta {
  border-top: 1px solid #d0d7e3;
  margin-bottom: 0;
}

.sk-doc-meta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #edf0f5;
}

/* thead bar */
.sk-doc-thead {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 2px solid #d0d7e3;
  border-top: 1px solid #d0d7e3;
  margin-bottom: 0;
}

/* body rows */
.sk-doc-tbody {}

.sk-doc-row {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 3px 2px;
  border-bottom: 1px solid #edf0f5;
}

.sk-doc-row-pn {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
}

/* footer */
.sk-doc-footer {
  display: flex;
  gap: 10px;
  border-top: 2px solid #d0d7e3;
  padding-top: 8px;
  margin-top: 2px;
}

.sk-doc-note {
  flex: 0 0 26%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sk-doc-revtbl {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sk-doc-rev-hdr {
  display: flex;
  gap: 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid #d0d7e3;
}

.sk-doc-rev-row {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid #edf0f5;
  min-height: 18px;
}

/* scanning label with bouncing dots */
.sk-doc-scanning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  color: #8898aa;
  font-size: 12px;
}

@keyframes sk-dot {

  0%,
  80%,
  100% {
    transform: scale(.6);
    opacity: .4
  }

  40% {
    transform: scale(1);
    opacity: 1
  }
}

.sk-scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0078d4;
  animation: sk-dot 1.2s infinite ease-in-out;
  will-change: transform;
}

/* Shared column grid: header row + every card use the same template so fields line up */
.home-list-section {
  --home-grid: minmax(210px, 1.5fr) 100px 64px 50px 74px 88px minmax(100px, 1fr) minmax(190px, 1fr) 34px;
}

.home-list-cols {
  display: grid;
  grid-template-columns: var(--home-grid);
  gap: 12px;
  padding: 2px 18px 7px 22px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Model section header in the BOM list. One imported file becomes several BOMs
   (one per product key), so the list is grouped by model and each group folds. */
.home-model-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 5px 12px 5px 10px;
  background: #eef2f9;
  border: 1px solid #dde4ee;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.home-model-hdr:hover { background: #e5ebf5; border-color: #cbd5e6; }
.home-model-caret { font-size: 10px; color: #64748b; width: 10px; }
.home-model-code {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #1e3a5f;
}
.home-model-name { font-size: 11.5px; color: #64748b; }
.home-model-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  background: #fff;
  border: 1px solid #dde4ee;
  border-radius: 99px;
  padding: 1px 8px;
}

.home-card {
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 13px 18px 13px 22px;
  margin-bottom: 8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--home-grid);
  align-items: center;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  position: relative;
  overflow: hidden;
}

.home-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 18px rgba(37, 99, 235, .12);
  transform: translateY(-1px);
}

/* card cells */
.hc-part {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.hc-icon {
  font-size: 15px;
  flex-shrink: 0;
  opacity: .65;
}

.hc-pn {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.hc-avatar-more {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}

.hc-cell {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* initials of whoever is currently working on the BOM — side by side, not overlapping */
.hc-live-avatars {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: 6px;
  gap: 3px;
}

.hc-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .45);
}

.hc-added {
  color: #64748b;
}

.hc-updated {
  color: #94a3b8;
}

/* Skeleton placeholder cards while the BOM list first loads (keep simple flex) */
.home-card--sk {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: default;
  pointer-events: none;
}

.home-card--sk:hover {
  border-color: #e8edf4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  transform: none;
}

.home-card--sk .home-card-body {
  flex: 1;
  min-width: 0;
  padding-right: 32px;
}

.home-card--sk::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%);
  animation: sk-shimmer 1.6s infinite linear;
  will-change: transform;
}

.bdv-audit {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: #64748b;
  margin-right: 10px;
}

.bdv-audit span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.hc-approved-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 1px 8px;
  flex-shrink: 0;
}

/* SUP.'s review — blue, because it is not one of the sheet's signatures */
.hc-sup-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 1px 8px;
  flex-shrink: 0;
}

/* Sent for review, awaiting a decision → amber pill */
.hc-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 1px 8px;
  flex-shrink: 0;
}

/* Someone is working on this BOM → left accent bar turns green and gently glows */
.home-card--live {
  border-color: #86efac;
  animation: card-live-glow 1.9s ease-in-out infinite;
}

@keyframes card-live-glow {

  0%,
  100% {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 0 0 0 rgba(34, 197, 94, .3);
  }

  50% {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 0 14px 1px rgba(34, 197, 94, .45);
  }
}

/* Key tabs (document view). Base styling — restored after it was removed alongside
   the deleted BomTree CSS (shared "tree-" prefix). The .key-group--active rules below
   refine only the ACTIVE tab; every tab still needs this base look. */
.tree-keys {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 12px;
  align-self: flex-start;
}

.tree-key-btn {
  padding: 6px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.tree-key-btn:hover {
  background: rgba(255, 255, 255, .7);
  color: #1e293b;
}

.tree-key-btn.active {
  background: #fff;
  color: #1e3a5f;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .04);
}

/* Part No. view selector */
.view-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* keys scroll horizontally (one row) when there are many; create button stays put */
.tree-keys-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.tree-keys-scroll::-webkit-scrollbar {
  height: 6px;
}

.tree-keys-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.tree-keys>.bdv-btn {
  flex-shrink: 0;
}

/* Key tabs: only the ACTIVE key fuses with its Part No. dropdown into one pill.
   Inactive keys are plain compact tabs, so the bar stays tidy with many keys. */
.key-group {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* Export/print page-select dialog rows */
.exp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}

.exp-row:last-child {
  border-bottom: none;
}

.exp-row:hover {
  background: #f8fafc;
}

.exp-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.exp-row--all {
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 2px;
}

.exp-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-key-btn {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.key-group--active {
  overflow: hidden;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .06);
}

.key-group--active .tree-key-btn {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: #eef4ff;
  color: #1e3a5f;
  font-weight: 600;
  flex-shrink: 1;
  min-width: 0;
}

.key-group--active .view-bar {
  margin-left: 0;
  gap: 0;
  border-left: 1px solid #e6ebf2;
  flex-shrink: 0;
}

.key-group--active .comp-select {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 4px 0px 6px 4px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
}

.key-group--active .comp-select:focus {
  outline: none;
  box-shadow: none;
}

.key-group--active .view-del {
  border: none;
  border-radius: 0;
  width: 28px;
}

.view-del {
  background: none;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 13px;
}

.view-del:hover {
  background: #fef2f2;
}

.home-card-tag {
  background: #f1f5f9;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  color: #334155;
}

.home-card-group {
  background: #dbeafe;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 700;
  color: #1d4ed8;
  font-size: 11px;
}

.home-card-arrow {
  font-size: 20px;
  color: #93c5fd;
  flex-shrink: 0;
}

/* BOM Group selector (upload) */
.home-group-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.home-group-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.home-group-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
}

.home-group-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.home-group-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* Filter tabs */
.home-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.home-filter-tab {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}

.home-filter-tab:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.home-filter-tab.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.home-filter-count {
  background: rgba(0, 0, 0, .1);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
}

.home-filter-tab.active .home-filter-count {
  background: rgba(255, 255, 255, .25);
}

.home-card-del {
  /* Always the last grid column: the Matrix card has fewer cells than the BOM
     card, so without this it lands mid-row instead of at the right edge. */
  grid-column: -2 / -1;
  justify-self: center;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 7px;
  /* Always on screen, so it is findable without hunting and works on a touch screen —
     but grey. A red icon repeated down every row would make the most destructive
     action the loudest thing in the list, and invites the mis-click it deserves least. */
  color: #cbd5e1;
  opacity: 1;
  transition: color .15s, background .15s;
}

/* Approaching the row lifts it to a readable grey: you are near it, not at it. */
.home-card:hover .home-card-del {
  color: #94a3b8;
}

/* Red only once the pointer is on the button itself — the moment it can actually be
   clicked is the moment it should say what it does. */
.home-card-del:hover,
.home-card-del:focus-visible {
  color: #ef4444;
  background: #fef2f2;
  outline: none;
}

/* ── Import preview: rows marked for removal ──────────────────────────────────
   A delete on this screen is staged, not done — the row stays visible, struck out and
   locked, until Confirm applies it. Nothing here is destructive on its own. */
.imp-row--del > td {
  background: #fff7ed;
}

.imp-row--del .comp-input {
  color: #b45309;
  text-decoration: line-through;
  background: transparent;
  border-color: transparent;
  opacity: .75;
}

.imp-undo-btn {
  border: 1px solid #fdba74;
  background: #fff;
  color: #c2410c;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}

.imp-undo-btn:hover { background: #fff7ed; }

.imp-del-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.imp-undo-all {
  border: none;
  background: none;
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.imp-undo-all:disabled { opacity: .5; cursor: not-allowed; }

.home-savemsg {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* ── BomCompletion ───────────────────────────── */
.comp-wrap {
  padding: 16px;
}

.comp-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.comp-hdr-info {
  font-size: 13px;
  font-weight: 600;
}

.comp-hdr-note {
  font-size: 11px;
  color: #e07a00;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  padding: 4px 10px;
}

.comp-hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-row--edit td {
  background: #fffdf0 !important;
}

.comp-row--edit:hover td {
  background: #fffae0 !important;
}

.comp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.comp-tbl th {
  background: #f5f7fa;
  padding: 6px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
}

.comp-tbl td {
  padding: 3px 5px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.comp-tbl tr:hover td {
  background: #f9fbff;
}

.comp-th-fix {
  min-width: 120px;
}

.comp-th-wide {
  min-width: 200px;
  width: 20%;
}

.comp-td-c {
  text-align: center;
}

.comp-td-pn {
  font-family: monospace;
  font-size: 11px;
  color: #0078d4;
}

.comp-row.comp-lv1 td {
  font-weight: 600;
  background: #f8f9fa;
}

.comp-input {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  width: 100%;
  min-width: 60px;
  font-family: inherit;
  box-sizing: border-box;
}

.comp-input:focus {
  outline: none;
  border-color: #0078d4;
}

.comp-input-sm {
  width: 52px !important;
  min-width: 52px;
}

.comp-select {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 11px;
  font-family: inherit;
}

.comp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* Search bars */
.home-search {
  display: block;
  width: 100%;
  padding: 10px 36px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.home-search:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.comp-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 4px;
}

.comp-search-input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 12px;
  outline: none;
  transition: border-color .15s;
}

.comp-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.comp-search-count {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.comp-msg {
  font-size: 12px;
}

.comp-msg--ok {
  color: #1a8a1a;
}

.comp-msg--err {
  color: #c00;
}

/* clickable part number */
.comp-pn-link {
  color: #0078d4;
  cursor: pointer;
  text-decoration: underline;
  font-family: monospace;
}

.comp-pn-link:hover {
  color: #005a9e;
}

/* + button in each row */
.comp-add-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #0078d4;
  background: #fff;
  color: #0078d4;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.comp-add-btn:hover {
  background: #0078d4;
  color: #fff;
}

/* Resting opacity is high enough to read as a control. At 0.3 the icon was
   effectively invisible against the row, so the only way to find it was to
   already know it was there and hover the cell. */
.comp-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  opacity: 0.55;
  padding: 3px 5px;
  border-radius: 4px;
  transition: opacity .15s, background .15s;
}

.comp-row:hover .comp-del-btn {
  opacity: 0.85;
}

.comp-del-btn:hover {
  opacity: 1 !important;
  background: #fef2f2;
}

/* Add Part dialog */
.comp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Import progress popup ── */
.imp-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, .28);
  width: 360px;
  max-width: 92vw;
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: alert-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}

.imp-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background .28s ease;
}

.imp-ring-inner {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .05);
}

.imp-pct {
  font-size: 30px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -1px;
}

.imp-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
}

.imp-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.imp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.imp-step-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  transition: all .2s;
}

.imp-step--wait {
  color: #cbd5e1;
}

.imp-step--wait .imp-step-box {
  border: 1.5px solid #e2e8f0;
}

.imp-step--active {
  color: #2563eb;
}

.imp-step--active .imp-step-box {
  border: 1.5px solid #3b82f6;
  animation: imp-blink 1s ease-in-out infinite;
}

.imp-step--done {
  color: #475569;
}

.imp-step--done .imp-step-box {
  background: #22c55e;
  color: #fff;
  border: 1.5px solid #22c55e;
}

@keyframes imp-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

/* ── Alert popup (upload duplicate / errors) ── */
.alert-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28);
  width: 400px;
  max-width: 92vw;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: alert-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes alert-pop {
  from {
    opacity: 0;
    transform: scale(.9) translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.alert-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  animation: aa-pop .4s cubic-bezier(.2, .9, .3, 1.35) both;
}

.alert-icon--warn {
  background: #fef3c7;
}

.alert-icon--err {
  background: #fee2e2;
  animation: aa-pop .4s cubic-bezier(.2, .9, .3, 1.35) both, aa-shake .45s .34s both;
}

@keyframes aa-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes aa-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  18% {
    transform: translateX(-5px);
  }

  38% {
    transform: translateX(5px);
  }

  58% {
    transform: translateX(-3px);
  }

  78% {
    transform: translateX(3px);
  }
}

/* animated mark (drawn in) inside the icon */
.alert-anim {
  width: 38px;
  height: 38px;
}

.aa-mark {
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: aa-draw .26s .3s ease forwards;
}

.alert-icon--err .aa-mark {
  stroke: #dc2626;
}

.aa-x2 {
  animation-delay: .46s;
}

.aa-bang-line {
  stroke: #d97706;
}

.aa-mark-dot {
  fill: #d97706;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: aa-dot .22s .54s cubic-bezier(.2, .9, .3, 1.6) forwards;
}

@keyframes aa-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aa-dot {
  to {
    transform: scale(1);
  }
}

.alert-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.alert-msg {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 22px;
}

.alert-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.alert-actions .bdv-btn {
  min-width: 96px;
  justify-content: center;
}

.comp-dialog {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .2);
  width: 480px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.comp-dialog-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.comp-dialog-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
}

.comp-dialog-badge {
  margin: 10px 20px 0;
  padding: 7px 12px;
  background: #e8f0fe;
  border-radius: 6px;
  font-size: 12px;
  color: #1a3a6b;
}

.comp-dialog-body {
  padding: 16px 20px;
  overflow-y: auto;
}

.comp-dialog-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px 12px;
  align-items: center;
  font-size: 13px;
}

.comp-dialog-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
}

.comp-dialog-input:focus {
  outline: none;
  border-color: #0078d4;
}

/* Native selects render their own arrow at their own size and ignore the border
   radius on some engines, so the control is stripped and given one caret drawn as a
   background SVG. `max-width` matters: a long option must never let the box push out
   past the dialog that contains it. */
.comp-dialog-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
  padding-right: 34px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.comp-dialog-select:hover:not(:disabled) {
  border-color: #94a3b8;
}

.comp-dialog-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.comp-dialog-select:disabled {
  background-color: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Detail about the current choice, under its control. Clamped so a long list stays a
   caption instead of growing the dialog; the full text is on the title attribute. */
.comp-dialog-hint {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #64748b;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Dropdown (Components/BomApp/Dropdown.razor) — the app's one <select> ──────
   Everything here is plain markup on purpose: a native select's list is drawn by the
   operating system, so it looked different on every machine, ignored the radius and
   padding of the form around it, and widened itself to fit its longest option. */
.dd {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #d5dbe4;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .12s;
}

.dd-btn:hover:not(:disabled) { border-color: #94a3b8; }

.dd-btn--open,
.dd-btn:focus-visible {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
  outline: none;
}

.dd-btn:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

/* The label must be the part that shrinks — the caret has to stay put. */
.dd-btn-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-btn-text--ph { color: #94a3b8; }
.dd-caret { color: #94a3b8; }
.dd-btn:disabled .dd-caret { color: #cbd5e1; }

.dd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
}

/* Position and size come from an inline style computed when the menu opens — the
   values here are only the fallback for when that measurement could not run. The high
   z-index is what lets a fixed menu sit above dialogs (.bdv-overlay is 9999). */
.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  min-width: 100%;
  max-width: min(360px, 92vw);
  max-height: 300px;
  overflow-y: auto;
  /* Reaching the end of the list must not hand the scroll on to the page behind —
     that would move the page under a fixed menu, which closes it mid-read. */
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 6px;
  animation: ddIn .12s ease;
}

@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}

.dd-item:hover { background: #f1f5f9; }

.dd-check {
  flex: 0 0 auto;
  width: 14px;
  color: #2563eb;
  font-weight: 800;
  text-align: center;
}

.dd-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-item-text--ph { color: #94a3b8; }

.dd-empty {
  padding: 10px;
  color: #94a3b8;
  font-size: 12.5px;
}

/* Position pickers sit in a row next to an email field and must not out-grow it. */
.dd--sign .dd-btn {
  padding: 8px 10px;
  font-size: 12.5px;
}

/* Inside the completion table every cell is one line high, so the control has to give
   up its padding rather than push the row taller. */
.dd--cell .dd-btn {
  padding: 3px 6px;
  font-size: 12px;
  border-color: #e2e8f0;
  border-radius: 5px;
}

.comp-dialog-err {
  color: #c00;
  font-size: 12px;
  margin-top: 10px;
}

.comp-dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid #eee;
}

.comp-img-btn {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f8f8f8;
  cursor: pointer;
  font-size: 12px;
}

.comp-img-btn:hover {
  background: #eee;
}

.comp-img-preview {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  max-height: 120px;
  border-radius: 6px;
  border: 1px solid #ddd;
  object-fit: contain;
}

/* ── BomExport ───────────────────────────────── */
.exp-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

.exp-preview-hdr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.exp-hdr-cell {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 8px 12px;
}

.exp-hdr-label {
  font-size: 10px;
  color: #888;
  margin-bottom: 2px;
}

.exp-hdr-val {
  font-size: 12px;
  font-weight: 600;
  color: #111;
}

.exp-section-title {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.exp-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.exp-btn-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.exp-btn-card:hover {
  border-color: #0078d4;
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.12);
}

.exp-btn-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.exp-btn-label {
  font-size: 13px;
  font-weight: 500;
  color: #111;
}

.exp-btn-sub {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   Photos tab (replaces Export)
   ══════════════════════════════════════════════ */
.ph-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

.ph-bom-hdr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ph-bom-cell {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 8px 12px;
}

.ph-bom-label {
  font-size: 10px;
  color: #888;
  margin-bottom: 2px;
}

.ph-bom-val {
  font-size: 12px;
  font-weight: 600;
  color: #111;
}

.ph-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-count {
  background: #e8f0fe;
  color: #1a56db;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.ph-empty {
  padding: 32px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #ddd;
  margin-bottom: 20px;
}

/* ── Toast notifications (top-right) ── */
.toast-stack {
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.toast {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 13px 38px 13px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  border: 1px solid #e2e8f0;
  cursor: pointer;
  border-left: 4px solid #94a3b8;
  animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.2);
}

.toast--approve {
  border-left-color: #22c55e;
}

.toast-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

.toast-body {
  font-size: 12px;
  color: #475569;
  margin-top: 3px;
}

.toast-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 5px;
}

.toast-x:hover {
  background: #f1f5f9;
  color: #334155;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Version history cards ── */
.ver-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ver-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ver-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #cbd5e1;
}

.ver-card--latest::before {
  background: #22c55e;
}

.ver-card--clickable {
  cursor: pointer;
}

.ver-card--clickable:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 18px rgba(37, 99, 235, .12);
  transform: translateY(-1px);
}

.ver-badge {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.ver-badge-tri {
  color: #d97706;
  font-weight: 800;
  font-size: 15px;
}

.ver-badge-first {
  color: #2563eb;
  font-weight: 800;
  font-size: 20px;
}

.ver-badge-doc {
  font-size: 20px;
}

/* read-only old-version viewer overlay */
.ver-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ver-overlay-card {
  background: #eef1f6;
  border-radius: 14px;
  width: 96vw;
  max-width: 1500px;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.ver-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #0f2942;
  color: #e7ecf3;
  flex-shrink: 0;
}

.ver-overlay-title {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ver-overlay-title b {
  color: #fff;
}

.ver-overlay-sub {
  color: #94a3b8;
  font-size: 12.5px;
}

.ver-overlay-ro {
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 6px;
}

.ver-overlay-close {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}

.ver-overlay-close:hover {
  background: rgba(255, 255, 255, .25);
}

.ver-overlay-body {
  flex: 1;
  overflow: auto;
}

.ver-body {
  flex: 1;
  min-width: 0;
}

.ver-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.ver-record {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.ver-current {
  font-size: 10px;
  font-weight: 800;
  color: #15803d;
  background: #dcfce7;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: .04em;
}

.ver-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
}

.ver-meta b {
  color: #334155;
}

.ver-approved {
  color: #16a34a;
  font-weight: 600;
}

.ver-pending {
  color: #d97706;
  font-weight: 600;
}

.ver-action {
  flex-shrink: 0;
}

.ver-open {
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  white-space: nowrap;
}

.ver-nopdf {
  font-size: 11px;
  color: #cbd5e1;
  font-style: italic;
}

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.ph-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.ph-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.ph-img-wrap {
  position: relative;
  cursor: zoom-in;
  background: #f5f7fa;
  height: 150px;
}

.ph-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ph-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  font-size: 22px;
  opacity: 0;
  transition: all 0.15s;
}

.ph-img-wrap:hover .ph-img-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.18);
}

.ph-card-body {
  padding: 10px 12px;
}

.ph-pn {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0078d4;
}

.ph-name {
  font-size: 12px;
  font-weight: 500;
  color: #111;
  margin: 2px 0 4px;
  line-height: 1.4;
}

.ph-spec {
  font-size: 10px;
  color: #777;
  margin-bottom: 4px;
}

.ph-meta {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
}

.ph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.ph-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}

.ph-tag--price {
  background: #e8f5e9;
  color: #2e7d32;
}

.ph-tag--sup {
  background: #e3f2fd;
  color: #1565c0;
}

.ph-tag--lead {
  background: #fff3e0;
  color: #e65100;
}

.ph-remark {
  font-size: 10px;
  color: #999;
  font-style: italic;
}

.ph-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

.ph-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
}

.ph-list-lv {
  font-size: 10px;
  color: #aaa;
  width: 28px;
  flex-shrink: 0;
}

.ph-list-pn {
  font-family: monospace;
  font-size: 11px;
  color: #0078d4;
  font-weight: 600;
  width: 120px;
  flex-shrink: 0;
}

.ph-list-name {
  flex: 1;
  color: #333;
}

.ph-list-meta {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}

.ph-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.ph-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: zoom-in;
  transition: box-shadow 0.15s;
}

.ph-history-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}

.ph-history-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 5px;
  background: #f5f7fa;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.ph-history-info {
  flex: 1;
  min-width: 0;
}

.ph-history-date {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
}

.ph-event-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.ph-event-badge--added {
  background: #e8f5e9;
  color: #2e7d32;
}

.ph-event-badge--revised {
  background: #fff3e0;
  color: #e65100;
}

.ph-event-badge--image_replaced {
  background: #e3f2fd;
  color: #1565c0;
}

.ph-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-zoom-box {
  position: relative;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.ph-zoom-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.ph-zoom-img {
  max-width: 80vw;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.ph-zoom-info {
  padding: 10px 16px;
  color: #eee;
  font-size: 13px;
  display: flex;
  align-items: center;
}

/* Photo gallery (legacy — keep for reference) */
.exp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.exp-photo-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.exp-photo-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

.exp-photo-img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
  display: block;
}

.exp-photo-body {
  padding: 10px 12px;
}

.exp-photo-pn {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0078d4;
  margin-bottom: 2px;
}

.exp-photo-name {
  font-size: 12px;
  font-weight: 500;
  color: #111;
  margin-bottom: 4px;
  line-height: 1.4;
}

.exp-photo-meta {
  font-size: 11px;
  color: #777;
  margin-bottom: 6px;
}

.exp-photo-completion {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.exp-photo-tag {
  font-size: 10px;
  background: #e8f0fe;
  color: #1a56db;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.exp-photo-remark {
  font-size: 10px;
  color: #888;
  font-style: italic;
}

.exp-photo-empty {
  padding: 32px 16px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #ddd;
}

/* ══════════════════════════════════════════════
   BomTree (spreadsheet view — existing)
   ══════════════════════════════════════════════ */
.bom-tree {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.bom-tree__title {
  font-size: 12px;
  color: #666;
  padding: 4px 0 6px;
  flex-shrink: 0;
}

.bom-tree__scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.bom-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.bom-table th,
.bom-table td {
  border: 1px solid #dde2ea;
  padding: 3px 6px;
  vertical-align: middle;
}

.bom-table th {
  background: #eef1f7;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.bom-table tr:hover td {
  background: #f5f7fc;
}

.row--lv1 td {
  background: #e8edf8;
  font-weight: 700;
}

.row--key2 td {
  background: #fffef0;
}

.row--key-header td {
  background: #1c3f6e;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  letter-spacing: .5px;
}

.part-name-cell {
  text-align: left;
}

.part-name-indent {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  color: #555;
}

.toggle-placeholder {
  display: inline-block;
  width: 16px;
}

.soc-badge {
  display: inline-block;
  background: #e53935;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   Upload / Landing screen
   ══════════════════════════════════════════════ */
.app-upload {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c3f6e 0%, #2d6aad 100%);
  padding: 24px;
}

.upload-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 48px;
  width: min(560px, 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.upload-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.upload-logo-mark {
  width: 52px;
  height: 52px;
  background: #1c3f6e;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.upload-title {
  font-size: 18px;
  font-weight: 700;
  color: #1c3f6e;
}

.upload-company {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.upload-dropzone {
  border: 2px dashed #b8c8e8;
  border-radius: 10px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: #f7f9fd;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-dropzone:hover {
  border-color: #1c3f6e;
  background: #edf2fb;
}

.upload-dropzone--loading {
  cursor: default;
  border-color: #b8c8e8;
}

.upload-icon {
  font-size: 40px;
}

.upload-drop-main {
  font-size: 15px;
  font-weight: 600;
  color: #1c3f6e;
}

.upload-drop-sub {
  font-size: 12px;
  color: #888;
}

.upload-drop-hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}

.upload-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #dde4f0;
  border-top-color: #1c3f6e;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.upload-drop-text {
  font-size: 14px;
  color: #555;
}

.upload-error {
  background: #fff0f0;
  border: 1px solid #fcc;
  color: #c00;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
}

.upload-manual {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-manual__label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

.upload-manual__row {
  display: flex;
  gap: 8px;
}

.upload-manual__input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
}

.upload-manual__input:focus {
  border-color: #1a56db;
  box-shadow: 0 0 0 2px #1a56db22;
}

.upload-manual__btn {
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.upload-manual__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.upload-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.upload-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #666;
}

.step-no {
  width: 20px;
  height: 20px;
  background: #1c3f6e;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upload-arrow {
  color: #bbb;
  font-size: 16px;
}

/* ══════════════════════════════════════════════
   BOM view layout (after import)
   ══════════════════════════════════════════════ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 44px;
  background: #1c3f6e;
  color: #fff;
}

.app-bar__title {
  font-size: 15px;
  font-weight: 600;
}

.app-bar__sub {
  font-size: 11px;
  opacity: .7;
}

.app-bar__spacer {
  flex: 1;
}

.app-bar__btn {
  padding: 4px 14px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.app-bar__btn:hover {
  background: rgba(255, 255, 255, .25);
}

.app-bar__btn--active {
  background: rgba(255, 255, 255, .3);
  border-color: #fff;
  font-weight: 700;
}

.main-full {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px;
}

/* ══════════════════════════════════════════════
   BOM Document View  —  matches BOM 3GJ HE.pdf
   A3 landscape 420 × 297 mm
   ══════════════════════════════════════════════ */
/* wrapper */
.bdv-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.bdv-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 9px 20px;
  background: #fff;
  border-bottom: 1px solid #e8ecf0;
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  position: sticky;
  top: 0;
  z-index: 30;
}

.bdv-toolbar-sep {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  flex-shrink: 0;
  margin: 0 8px;
}

.bdv-toolbar-spacer {
  flex: 1;
}

/* ── Base button — ghost/outlined (PDF, Refresh …) ── */
.bdv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  height: 34px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 7px;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
  background: #fff;
  color: #374151;
}

.bdv-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.bdv-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* outlined blue — บันทึก (header save) */
.bdv-btn--secondary {
  background: #fff;
  color: #2563eb;
  border-color: #93c5fd;
}

.bdv-btn--secondary:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #3b82f6;
}

.bdv-btn--secondary:disabled {
  color: #9ca3af;
  border-color: #e5e7eb;
}

/* filled blue — the committing action in a dialog footer (Import BOM, Save).
   This modifier was referenced by three buttons before it existed, so they all
   fell through to the plain .bdv-btn base and read as LESS important than the
   outlined-blue Cancel sitting next to them. */
.bdv-btn--primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}

.bdv-btn--primary:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}

/* The shared .bdv-btn:disabled rule fades to 35% opacity, which turns a filled
   button into washed-out blue on white. Flat grey reads as "not yet" instead. */
.bdv-btn--primary:disabled {
  opacity: 1;
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #94a3b8;
}

/* borderless — a dismiss that must not compete with the action beside it */
.bdv-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: #64748b;
}

.bdv-btn--quiet:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: transparent;
  color: #334155;
}

/* filled navy — primary revision/update action */
.bdv-btn--rev {
  background: #1e3a5f;
  color: #fff;
  border-color: #1e3a5f;
  font-weight: 600;
}

.bdv-btn--rev:hover:not(:disabled) {
  background: blue;
  border-color: #162d49;
  box-shadow: 0 2px 8px rgba(30, 58, 95, .3);
}

/* ghost danger — Reset (destructive but not dominant) */
.bdv-btn--danger {
  background: transparent;
  color: #b91c1c;
  border-color: #fca5a5;
}

.bdv-btn--danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}

/* red minimal — PDF */
.bdv-btn--pdf {
  background: #fff;
  color: #dc2626;
  border-color: #fca5a5;
  font-weight: 600;
}

.bdv-btn--pdf:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

/* ghost + green hover — Excel */
.bdv-btn--excel {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.bdv-btn--excel:hover:not(:disabled) {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

/* ghost + indigo hover — Matrix */
.bdv-btn--matrix {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.bdv-btn--matrix:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #4338ca;
}

/* Custom Excel template button + indicator */
.bdv-btn--tpl {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.bdv-btn--tpl:hover:not(:disabled) {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #b45309;
}

.bdv-tpl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 7px;
  padding: 5px 8px 5px 10px;
}

.bdv-tpl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
}

.bdv-tpl-x {
  background: none;
  border: none;
  color: #b45309;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  border-radius: 4px;
}

.bdv-tpl-x:hover {
  background: #fde68a;
}

/* ghost — Print */
.bdv-btn--print {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.bdv-btn--print:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* filled teal-navy — ส่งขออนุมัติ (workflow CTA) */
.bdv-btn--approval {
  background: #0f4c81;
  color: #fff;
  border-color: #0f4c81;
  font-weight: 600;
  letter-spacing: .01em;
}

.bdv-btn--approval:hover:not(:disabled) {
  background: #0a3a63;
  border-color: #0a3a63;
  box-shadow: 0 2px 8px rgba(15, 76, 129, .3);
}

/* Hand-off to the next stop on the sheet's ROUTE, shown once Pro. Eng. is complete */
.bdv-btn--purchase {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
  font-weight: 600;
}

.bdv-btn--purchase:hover:not(:disabled) {
  background: #116632;
  border-color: #116632;
  box-shadow: 0 2px 8px rgba(21, 128, 61, .3);
}

.bdv-save-msg {
  font-size: 12px;
  font-weight: 500;
  padding: 0 8px;
}

.bdv-save-msg--ok {
  color: #16a34a;
}

.bdv-save-msg--err {
  color: #dc2626;
}

/* ── Overlay (shared) ── */
.bdv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fadeIn .15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ── Legacy dialog (kept for other uses) ── */
.bdv-dialog {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

.bdv-dialog-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.bdv-dialog-sub {
  font-size: 12px;
  color: #666;
  margin-bottom: 18px;
}

.bdv-dialog-label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.bdv-dialog-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 6px;
}

.bdv-dialog-input:focus {
  outline: none;
  border-color: #1a3a6b;
}

.bdv-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.bdv-dialog-ok {
  color: #1a6b3c;
  font-weight: 600;
  padding: 10px 0;
}

.bdv-dialog-err {
  color: #c00;
  font-weight: 600;
  padding: 10px 0;
}

/* ── Approval dialog (new) ── */
.apv-dialog {
  background: #fff;
  border-radius: 16px;
  /* Wide enough for a recipient row to sit on ONE line: email box + permission menu +
     position select + remove button. At 480px the position select was squeezed against
     the edge (and wrapped on the Mastrix dialog). Shared by the BOM and Mastrix sends. */
  width: 640px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  animation: slideUp .2s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* header */
.apv-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, #1a3a6b 0%, #2e5fa3 100%);
  color: #fff;
  position: relative;
}

.apv-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.apv-header-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px;
}

.apv-header-sub {
  font-size: 11px;
  opacity: .8;
  line-height: 1.4;
}

.apv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, .2);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.apv-close:hover {
  background: rgba(255, 255, 255, .35);
}

/* context chip */
.apv-context {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: #f8f9fc;
  border-bottom: 1px solid #e8edf5;
  font-size: 12px;
}

.apv-context-label {
  font-weight: 600;
  color: #666;
}

.apv-context-val {
  color: #1a3a6b;
  font-weight: 600;
  font-family: monospace;
}

.apv-context-dot {
  color: #bbb;
}

/* form area */
.apv-form {
  padding: 22px 24px 24px;
}

.apv-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.apv-required {
  color: #e53e3e;
  margin-left: 3px;
}

.apv-input-wrap {
  display: flex;
  align-items: center;
  /* A text input's intrinsic width (~20 chars) stops flex from shrinking it, which
     pushed the position select past the dialog edge. */
  min-width: 0;
  border: 1.5px solid #d0d7e3;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  /* visible so the permission dropdown menu can extend below the box */
  overflow: visible;
}

.apv-input-wrap:focus-within {
  border-color: #2e5fa3;
  box-shadow: 0 0 0 3px rgba(46, 95, 163, .12);
}

.apv-input-wrap--err {
  border-color: #e53e3e;
}

.apv-input-wrap--err:focus-within {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, .12);
}

/* One recipient row: email · permission select · remove */
.apv-recip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  /* An email box + permission menu + position select is wider than the dialog at
     intrinsic size; without this the position select was clipped off the edge. */
  flex-wrap: wrap;
}

/* Permission chooser lives INSIDE the email box — a custom Google-style menu. */
.apv-perm { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; }

.apv-perm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-left: 1px solid #e5e9f0;
  border-radius: 0 7px 7px 0;
  padding: 0 12px;
  background: #fff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s;
}

.apv-perm-btn:hover { background: #f4f7fb; }
.apv-perm-caret { color: #94a3b8; font-size: 9px; }

/* Transparent full-screen catcher: a click anywhere closes the menu. */
.apv-perm-backdrop { position: fixed; inset: 0; z-index: 60; }

.apv-perm-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 61;
  min-width: 170px;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 6px;
}

.apv-perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #1e293b;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}

.apv-perm-item:hover { background: #f1f5f9; }

.apv-perm-check {
  flex: 0 0 auto;
  width: 14px;
  color: #2563eb;
  font-weight: 800;
  text-align: center;
}

.apv-recip-del {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.apv-recip-del:hover {
  color: #e53e3e;
  border-color: #fca5a5;
  background: #fef2f2;
}

.apv-recip-del--hidden {
  display: none;
}

.apv-add-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 14px;
  border: 1.5px dashed #c3cfe0;
  border-radius: 8px;
  background: #f8fafc;
  color: #2e5fa3;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.apv-add-email:hover {
  border-color: #2e5fa3;
  background: #eef4fc;
}

.apv-input-icon {
  padding: 0 12px;
  color: #999;
  font-size: 15px;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}

.apv-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 10px 12px 10px 0;
  font-size: 14px;
  background: transparent;
}

.apv-input-hint {
  font-size: 11px;
  color: #e53e3e;
  margin-top: 5px;
}

/* Which Pro. Eng. box this recipient signs — the name is typed on the emailed page */
.apv-sign-select {
  /* Fits "PE · CHECK (SUP)" — the longest position — without clipping, and may still
     shrink (or wrap to its own line) rather than run off the dialog. */
  flex: 0 1 152px;
  min-width: 120px;
  max-width: 100%;
  align-self: stretch;
  border: 1.5px solid #d0d7e3;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  padding: 8px 10px;
  color: #1e293b;
  cursor: pointer;
}

/* The same slot when the box is fixed by a "Send to …" button — stated, not chosen */
.apv-sign-fixed {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}

.apv-sign-select:focus {
  border-color: #2e5fa3;
  box-shadow: 0 0 0 3px rgba(46, 95, 163, .12);
  outline: none;
}

.apv-sign-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
}

/* actions */
.apv-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.apv-btn {
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}

.apv-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.apv-btn--primary {
  background: #1a3a6b;
  color: #fff;
}

.apv-btn--primary:not(:disabled):hover {
  background: #2e5fa3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 58, 107, .3);
}

.apv-btn--secondary {
  background: #f1f3f8;
  color: #444;
  border: 1px solid #d0d7e3;
}

.apv-btn--secondary:not(:disabled):hover {
  background: #e4e8f0;
}

/* success state */
.apv-success {
  padding: 32px 24px 28px;
  text-align: center;
}

.apv-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ebf8f0;
  color: #1a6b3c;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: popIn .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popIn {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.apv-success-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a6b3c;
  margin-bottom: 6px;
}

.apv-success-sub {
  font-size: 13px;
  color: #555;
}

/* error state */
.apv-error-body {
  padding: 28px 24px;
  text-align: center;
}

.apv-error-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff5f5;
  color: #c53030;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.apv-error-title {
  font-size: 15px;
  font-weight: 700;
  color: #c53030;
  margin-bottom: 8px;
}

.apv-error-msg {
  font-size: 11px;
  color: #888;
  word-break: break-all;
  margin-bottom: 4px;
}

/* spinner */
.apv-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ── Part No. revision display ── */
.bp-pn-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
  text-align: left;
}

.bp-pn-line {
  display: flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.bp-pn-struck {
  text-decoration: line-through;
  color: #555;
}

.bp-tri-mark {
  font-size: 6px;
  color: #b30000;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 1px;
}

.bp-tri-hdr {
  font-size: 8px;
  color: #b30000;
  font-weight: 700;
  margin-right: 2px;
}

/* ── Revision dialog ── */
.rev-dlg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding-top: 40px;
}

.rev-dlg {
  background: #fff;
  border-radius: 6px;
  width: 860px;
  max-width: 95vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.rev-dlg__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dde;
  font-weight: 700;
  font-size: 14px;
  color: #1c3f6e;
  background: #f4f6fb;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}

.rev-dlg__close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  line-height: 1;
}

.rev-dlg__body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rev-dlg__grid {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr;
  gap: 8px 12px;
  align-items: center;
}

.rev-dlg__grid label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

.rev-dlg__grid input {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  width: 100%;
}

.rev-dlg__section-title {
  font-size: 11px;
  font-weight: 700;
  color: #1c3f6e;
  border-top: 1px solid #e0e4ef;
  padding-top: 10px;
}

.rev-dlg__items {
  border: 1px solid #dde;
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
  overflow-y: auto;
}

.rev-dlg__items-hdr {
  display: grid;
  grid-template-columns: 28px 140px 1fr 150px;
  gap: 6px;
  padding: 5px 8px;
  background: #eef2fb;
  font-size: 11px;
  font-weight: 700;
  color: #1c3f6e;
  border-bottom: 1px solid #dde;
}

.rev-dlg__item-row {
  display: grid;
  grid-template-columns: 28px 140px 1fr 150px;
  gap: 6px;
  padding: 4px 8px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
}

.rev-dlg__item-row:last-child {
  border-bottom: none;
}

.rev-dlg__item-row:nth-child(even) {
  background: #fafbff;
}

.rev-dlg__lv {
  color: #888;
  font-weight: 700;
}

.rev-dlg__cur-pn {
  font-family: monospace;
  font-size: 10px;
  color: #333;
}

.rev-dlg__name {
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rev-dlg__new-pn {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  width: 100%;
}

.rev-dlg__new-pn:focus {
  border-color: #1c3f6e;
  outline: none;
}

/* ── Expanded item card (revision dialog manual mode) ── */
.rev-dlg__item-card {
  padding: 6px 8px 8px;
  border-bottom: 1px solid #eef0f5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background .1s;
}

.rev-dlg__item-card:last-child {
  border-bottom: none;
}

.rev-dlg__item-card:nth-child(even) {
  background: #fafbff;
}

.rev-dlg__item-card--active {
  background: #f0f6ff !important;
  border-left: 3px solid #2563eb;
}

.rev-dlg__item-current {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.rev-dlg__item-inputs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 32px;
}

.rev-dlg__input-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.rev-dlg__input-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.rev-dlg__input-field--pn {
  flex: 0 0 160px;
}

.rev-dlg__input-field--spec {
  flex: 1;
}

.rev-dlg__input-field--sm {
  flex: 0 0 80px;
}

.rev-dlg__input-field>label {
  font-size: 10px;
  color: #888;
  font-weight: 600;
}

.rev-dlg__inp {
  padding: 3px 6px;
  border: 1px solid #d0d5dd;
  border-radius: 3px;
  font-size: 11px;
  width: 100%;
  background: #fff;
}

.rev-dlg__inp:focus {
  border-color: #1c3f6e;
  outline: none;
  background: #f8faff;
}

.rev-dlg__inp--mono {
  font-family: monospace;
}

.rev-dlg__error {
  font-size: 12px;
  color: #c00;
  padding: 6px 10px;
  background: #fff5f5;
  border-radius: 3px;
  border: 1px solid #fcc;
}

.rev-dlg__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

/* ── Revision dialog — choose / pdf mode ── */
.rev-dlg__back {
  background: none;
  border: none;
  cursor: pointer;
  color: #0078d4;
  font-size: 15px;
  padding: 0 0 10px;
  display: block;
}

.rev-dlg__back:hover {
  text-decoration: underline;
}

.rev-dlg__choose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0 16px;
}
@media (max-width: 640px) { .rev-dlg__choose { grid-template-columns: 1fr; } }

.rev-dlg__choose-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 12px;
  border: 1.5px solid #dce3ec;
  border-radius: 8px;
  background: #f9fbff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}

.rev-dlg__choose-btn:hover {
  border-color: #0078d4;
  background: #eef4ff;
}

.rev-dlg__choose-icon {
  font-size: 28px;
}

.rev-dlg__choose-title {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.rev-dlg__choose-sub {
  font-size: 11px;
  color: #777;
}

.rev-dlg__dropzone {
  border: 1.5px dashed #b0bec5;
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  color: #555;
  font-size: 13px;
  background: #f9fbff;
  margin-bottom: 12px;
  transition: border-color .15s;
}

.rev-dlg__dropzone:hover {
  border-color: #0078d4;
}

.rev-dlg__dropzone--loading {
  cursor: default;
  opacity: .7;
}

.rev-dlg__preview-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e9f0;
}

.rev-dlg__preview-label {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.rev-dlg__preview-section {
  margin-bottom: 12px;
}

.rev-dlg__preview-none {
  text-align: center;
  color: #888;
  font-size: 13px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 6px;
  margin-bottom: 12px;
}

.rev-dlg__diff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #f9fbff;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.rev-dlg__diff-lv {
  font-size: 10px;
  background: #e3eaf7;
  color: #234;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.rev-dlg__diff-old {
  text-decoration: line-through;
  color: #c00;
  font-family: monospace;
  flex-shrink: 0;
}

.rev-dlg__diff-arrow {
  color: #888;
  flex-shrink: 0;
}

.rev-dlg__diff-new {
  color: #007a30;
  font-family: monospace;
  font-weight: 600;
  flex-shrink: 0;
}

.rev-dlg__diff-name {
  color: #555;
  font-size: 11px;
}

.bdv-save-msg--err {
  color: #c62828;
}

/* scroll area (grey background like print preview) */
.bdv-scroll {
  flex: 1;
  overflow: auto;
  background: #dde3ea;
  padding: 24px 20px;
  min-height: 0;
}

@keyframes bdv-blink {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 0.15;
  }

  100% {
    opacity: 1;
  }
}

.bdv-scroll--refreshing {
  animation: bdv-blink 0.5s ease-in-out;
}

/* ── white paper ── */
.bdv-paper {
  background: #fff;
  /* Wider than an A3 pixel width on purpose: printing scales the sheet to fit the
     page anyway, and the extra room stops the right-hand headers ("Reciever",
     "Internal Code", "Q'ty/kanban") from wrapping the way the paper form never does. */
  width: 1750px;
  min-width: 1750px;
  max-width: 1750px;
  margin: 0 auto 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .12);
  border-radius: 2px;
}

.bdv-paper:last-child {
  margin-bottom: 0;
}

/* ── page body ── */
.bp {
  padding: 7px 10px;
  font-family: Arial, sans-serif;
  font-size: 7.5px;
  color: #000;
}

/* ─── Document header table ─── */
.bp-view-tag {
  font-size: 8px;
  font-weight: 600;
  color: #1d4ed8;
  margin-top: 3px;
  letter-spacing: 0;
  line-height: 1.3;
}

.bp-hdr-tbl {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.bp-hdr-tbl td {
  border: 1px solid #000;
  padding: 2px 4px;
  /*font-size: 7.5px; */
  vertical-align: middle;
}

.bp-event {
  vertical-align: top !important;
  padding: 2px 4px !important;
}

.bpe-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 1px;
}

/* ── event issue inner table ── */
.bp-evt-tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: 7.5px;
}

.bp-evt-tbl td {
  padding: 1px 3px;
  vertical-align: middle;
  line-height: 1.6;
  white-space: nowrap;
  border: none !important;
}

.bp-evt-hd {
  font-weight: 700;
  text-align: left;
  padding: 0 3px 3px;
  font-size: 7.5px;
  text-decoration: underline;
}

.bp-evt-hd--right {
  border-left: 1px solid #aaa;
  padding-left: 6px;
}

/* ── Callout boxes ("Refer to BOM of PU INJ.") ──────────────────────────────
   Absolutely positioned at the top right of the parts table so they never add
   height to it — the paginator derives rows-per-page from that table. The top
   offset clears the two fixed header rows rather than covering the column
   titles. Page 1 only: these annotate the document, not every sheet. */
.bp-bom-wrap {
  position: relative;
}

/* Each box carries its own left/top from the saved percentage, so it stays put
   across screen sizes and in the PDF. */
/* Tail layer sits UNDER the box so the box's own fill and border close off the
   triangle's base — no seam to hide, and the tip can point from any edge. */
.bp-notebox-tail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.bp-notebox-tip {
  position: absolute;
  z-index: 5;
  transition: transform .12s ease, box-shadow .12s ease;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #3b82f6;
  cursor: move;
}

.bp-notebox {
  position: absolute;
  z-index: 2;
  /* No border or fill of its own: the SVG path below draws the box AND the tail as
     one outline. Keeping them here painted a second border over the shape. */
  border: none;
  background: transparent;
  min-width: 92px;
  max-width: 150px;
  padding: 3px 5px;
  font-size: 7.5px;
  line-height: 1.25;
}

.bp-notebox-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.bp-notebox-input {
  width: 100%;
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
}

.bp-notebox-del {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  line-height: 6px;
  font-size: 5.5px;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
}

.bp-notebox-del:hover {
  color: #ef4444;
  border-color: #fca5a5;
}

.bp-notebox-size {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
  cursor: nwse-resize;
}

.bp-notebox-size:hover {
  border-color: #3b82f6;
}

.bp-notebox-tip:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .25);
}

/* The handles stay out of the way until the box is hovered, so the sheet reads
   like the printed form while you are not editing it. */
.bp-notebox-del,
.bp-notebox-size,
.bp-notebox-grip {
  opacity: 0;
  transition: opacity .14s ease;
}

.bp-notebox:hover .bp-notebox-del,
.bp-notebox:hover .bp-notebox-size,
.bp-notebox:hover .bp-notebox-grip,
body.bp-dragging .bp-notebox-del,
body.bp-dragging .bp-notebox-size,
body.bp-dragging .bp-notebox-grip {
  opacity: 1;
}

.bp-notebox {
  transition: box-shadow .14s ease;
}

.bp-notebox:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .18);
}

.bp-notebox-grip {
  position: absolute;
  top: 0;
  left: 1px;
  cursor: grab;
  color: #94a3b8;
  font-size: 5.5px;
  line-height: 1;
  padding-right: 3px;
  user-select: none;
}

body.bp-dragging,
body.bp-dragging .bp-notebox-grip {
  cursor: grabbing;
  user-select: none;
}

.bp-notebox-add {
  border: 1px dashed #cbd5e1;
  background: #fff;
  color: #64748b;
  font-size: 7px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.bp-notebox-add:hover {
  border-color: #3b82f6;
  border-style: solid;
  color: #1e40af;
}

/* Editing affordances for the Event-issue boxes. Both are screen-only: the sheet
   that prints must look exactly like the paper form, so they are hidden in the
   @media print block below as well as whenever the document is read-only. */
.bp-evt-del {
  border: none;
  background: none;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 7px;
  line-height: 1;
  padding: 1px 2px;
  margin-left: 3px;
  border-radius: 3px;
  vertical-align: 1px;
}

.bp-evt-del:hover {
  color: #ef4444;
  background: #fef2f2;
}

.bp-evt-restore {
  padding-top: 3px !important;
}

.bp-evt-chip {
  border: 1px dashed #cbd5e1;
  background: none;
  cursor: pointer;
  color: #64748b;
  font-size: 7px;
  line-height: 1;
  padding: 2px 5px;
  margin: 0 3px 2px 0;
  border-radius: 8px;
}

.bp-evt-chip:hover {
  border-color: #3b82f6;
  border-style: solid;
  color: #1e40af;
}

.bp-evt-tbl td:last-child {
  border-left: 1px solid #aaa !important;
  padding-left: 6px;
}

.bp-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-family: Georgia, serif;
  letter-spacing: 3px;
  padding: 6px 8px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.bp-page-cell {
  vertical-align: top !important;
}

.bp-sign-outer {
  padding: 0 !important;
  vertical-align: top !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.bp-sign-tbl {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.bp-sign-tbl td {
  border: 1px solid #333;
  text-align: center;
  vertical-align: middle;
  font-size: 7.5px;
  padding: 2px 4px;
}

.bp-sign-tbl tr:first-child td {
  border: none !important;
}

.bp-lbl {
  font-size: 7.5px;
  white-space: nowrap;
  background: #fff;
}

.bp-val {
  font-size: 7.5px;
}

/* ─── Main BOM table ─── */
.bp-bom-tbl {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin-top: -1px;
}

/* Data rows are given a floor height so the sheet on screen is close to what the
   PDF export produces — the exporter stretches the rows to fill A3, which used to
   leave callouts roomy on paper but pinched on screen, since their size is a
   percentage of the table. Editing now matches the printed result. */
.bp-bom-tbl tbody tr {
  height: 15px;
}

.bp-bom-tbl th,
.bp-bom-tbl td {
  border: 1px solid #000;
  padding: 1px 3px;
  font-size: 7.5px;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  vertical-align: middle;
  text-align: center;
}

.bp-th {
  background: #fff;
  font-weight: 700;
}

.bp-th-group {
  background: #fff;
  font-weight: 700;
}

.bp-th-pn {
  background: #fff;
  min-width: 85px;
}

.bp-th-name {
  background: #fff;
  font-weight: 700;
  min-width: 140px;
}

.bp-th-spec {
  background: #fff;
  font-weight: 700;
  min-width: 130px;
}

.bp-th-sm {
  background: #fff;
  font-weight: 700;
  font-size: 7px;
  min-width: 38px;
}

.bp-th-xs {
  background: #fff;
  font-size: 7px;
  min-width: 32px;
}

.bp-th-remark {
  background: #fff;
  font-weight: 700;
  min-width: 80px;
}

/* data rows — no color by default; colors only appear on revised/edited rows */
.bp-row td {
  min-height: 13px;
  height: auto;
  text-align: center;
  vertical-align: middle;
  color: #000;
}

.bp-row-lv1 td {
  font-weight: 700;
}

.bp-row-revised-out td,
.bp-row-revised-out .bp-pn-cell,
.bp-row-revised-out .bp-pn-line,
.bp-row-revised-out .bp-pn-line span {
  text-decoration: line-through;
  color: #cc0000 !important;
}

.bp-row-empty td {
  height: 12px;
  border: 1px solid #000 !important;
}

.bp-td {}

.bp-td-pn {
  font-family: 'Courier New', monospace;
  font-size: 7.5px;
  text-align: center;
}

.bp-td-pn1 {
  padding-left: 2px;
}

.bp-td-pn2 {
  padding-left: 4px;
}

.bp-td-pn3 {
  padding-left: 4px;
}

.bp-td-pn4 {
  padding-left: 4px;
}

.bp-td-pn5 {
  padding-left: 4px;
}

.bp-td-name,
.bp-bom-tbl td.bp-td-name {
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.bp-td-spec,
.bp-bom-tbl td.bp-td-spec {
  text-align: left;
  font-size: 7.5px;
  color: inherit;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.bp-td-c {
  text-align: center;
}

.bp-td-remark {
  text-align: center;
  font-size: 7px;
}

.bp-td-empty {
  border: 1px solid #000 !important;
  height: 11px;
}

/* key separator row */
.bp-row-key-sep td {
  height: 14px;
  border: 1px solid #555;
}

.bp-td-key-col {
  background: #ffffff;
  color: #fff;
  font-weight: 700;
  font-size: 7.5px;
  padding: 2px 5px;
  white-space: nowrap;
  text-align: center;
}

.bp-td-key-col-empty {
  background: #dde5f0;
}

/* group separator row inside tbody */
.bp-row-sep td {
  background: #ffffff;
  color: #000;
  font-weight: 700;
  font-size: 7.5px;
  padding: 2px 6px;
  text-align: center;
  border: 1px solid #555;
  height: 14px;
  letter-spacing: .4px;
}

/* ─── Mark row (tfoot inside bp-bom-tbl) ─── */
.bp-bom-tbl tfoot tr td.bp-mark {
  border: 1px solid #000;
  padding: 1px 2px;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  height: 13px;
  background: #fff;
}

/* ─── Bottom section ─── */
.bp-bot-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
  margin-top: 10.5px;
}

.bp-note-cell {
  border: none;
  padding: 2px 4px 0 0;
  vertical-align: top;
  font-size: 7.5px;
}

.bp-note-cell-inner {
  border: 1px solid #333;
  padding: 2px 4px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.bp-bot-spacer {
  border: none;
  padding: 0;
}

.bp-route-cell {
  border: none;
  padding: 2px 4px;
  vertical-align: middle;
}

.bp-note-line {
  line-height: 1.7;
}

/* Revision header cells */
.bp-rev-th {
  background: #fff;
  font-weight: 700;
  text-align: center;
  height: 12px;
  line-height: 1;
  border: 1px solid #333;
  padding: 0px 4px;
  font-size: 7.5px;
}

/* Revision data cells */
.bp-rev-td {
  height: 12px;
  line-height: 1;
  border: 1px solid #333;
  padding: 0px 4px;
  font-size: 7.5px;
  vertical-align: middle;
}

.bp-route {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 7.5px;
  flex-wrap: wrap;
}

.bp-route-lbl {
  font-weight: 700;
}

.bp-route-box {
  border: 1px solid #333;
  padding: 2px 8px;
  white-space: nowrap;
}

.bp-route-note {
  font-size: 6.5px;
  color: #000;
  line-height: 1.4;
  text-align: center;
}

.bp-route-arr {
  font-size: 8px;
  color: #000;
  padding: 0 1px;
}

.bp-footer {
  font-size: 6.5px;
  color: #666;
  padding: 2px 0;
}

/* ── interactive checkbox ── */
.bp-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  border: 1px solid #444;
  margin-right: 3px;
  vertical-align: middle;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.bp-chk-on {
  font-size: 8px;
  line-height: 1;
  color: #000;
  font-weight: 700;
}

.bp-chk-off {
  display: inline-block;
  width: 5px;
  height: 5px;
}

/* ── editable text in revision table ── */
.bp-rev-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 7.5px;
  color: #000;
  padding: 0;
  cursor: text;
}

.bp-rev-input:focus {
  background: #f0f5ff;
}

.bp-rev-input::placeholder {
  color: #bbb;
}

/* Pro. Eng. signature cell (CO-OR / AGM / Mgr.) — signed by an approval, or typed.
   Set a notch larger than the 7.5px the rest of the box uses: this is a signature,
   and it has a tall empty cell to itself. */
.bp-sign-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  text-align: center;
  color: #000;
  padding: 0;
  cursor: text;
}

.bp-sign-input:focus {
  background: #f0f5ff;
}

/* Date under the signature — smaller than the name, the way a signed form reads */
.bp-sign-input--date {
  font-size: 7px;
  color: #333;
}

/* Same signature, on a read-only sheet (shared link / print of a locked BOM) */
.bp-sign-text {
  font-size: 9.5px;
}

/* ══════════════════════════════════════════════
   Print — A3 landscape
   ══════════════════════════════════════════════ */
@media print {
  @page {
    size: A3 landscape;
    margin: 5mm;
  }

  /* Screen chrome that must never reach paper. The tab strip and key bar are only
     hidden while printing THROUGH the button (body.bom-printing); a plain Ctrl+P
     still shows them, which is useful when checking a page. */
  /* The app frame around the sheet. These are the real class names — an earlier
     guess at .shell-tabs matched nothing, so the menu bar printed on the page. */
  body.bom-printing .shell-topbar,
  body.bom-printing .shell-nav,
  body.bom-printing .tree-keys,
  /* Belt and braces: even if a modal is still mounted, it must never print. */
  .comp-overlay,
  .paste-overlay,
  .app-bar,
  .bdv-toolbar,
  .bp-evt-del,
  .bp-evt-restore,
  .bp-notebox-del,
  .bp-notebox-add,
  .bp-notebox-grip,
  .bp-notebox-size,
  .bp-notebox-tip {
    display: none !important;
  }

  /* Editable-field affordances are screen-only. The dotted rule under a label says
     "click to change this"; on paper it just looks like a stray line. !important is
     required because the dotted border is set inline on the element. */
  .bp-rev-input,
  .bp-sign-input,
  .bp-notebox-input,
  .comp-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
  }

  .main-full {
    padding: 0;
    overflow: visible;
  }

  .bdv-wrap {
    gap: 0;
  }

  .bdv-scroll {
    background: none;
    padding: 0;
    overflow: visible;
  }

  .bdv-paper {
    min-width: 0;
    width: 100%;
    box-shadow: none;
    margin: 0;
    page-break-after: always;
  }

  .bdv-paper:last-child {
    page-break-after: auto;
  }

  .bp-row {
    page-break-inside: avoid;
  }
}

/* Hidden file input — covers the entire label so clicking anywhere triggers picker */
.bom-hidden-input,
.home-dropzone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
}
/* Approval "sending" indeterminate progress bar */
.apv-bar {
  position: absolute; top: 0; height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  animation: apv-bar-move 1.1s ease-in-out infinite;
}
@keyframes apv-bar-move { 0% { left: -40%; } 100% { left: 100%; } }

/* ══════════════════════════════════════════════════════════════════
   Modern polish layer — minimal, refined, world-class feel.
   Cosmetic-only overrides (colour / shadow / radius / motion); no layout
   changes, so it can't shift the existing structure.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --mp-ease: cubic-bezier(.4, 0, .2, 1);
  --mp-ring: 0 0 0 3px rgba(37, 99, 235, .16);
  --mp-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --mp-md: 0 6px 16px rgba(15, 23, 42, .07), 0 2px 5px rgba(15, 23, 42, .05);
  --mp-lg: 0 18px 44px rgba(15, 23, 42, .16), 0 6px 12px rgba(15, 23, 42, .07);
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #f6f7f9;
}

::selection { background: rgba(37, 99, 235, .16); }

/* Refined keyboard-focus ring (doesn't touch mouse clicks) */
:where(button, a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--mp-ring);
}

/* Minimal scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Micro-interaction transitions on interactive surfaces */
.home-card, .shell-topbar-act, .home-paste-btn, .apv-btn, .bdv-btn,
.home-group-btn, .home-dropzone, .home-card-del, .shell-user-admin {
  transition: transform .18s var(--mp-ease), box-shadow .18s var(--mp-ease),
              background .18s var(--mp-ease), border-color .18s var(--mp-ease), color .18s var(--mp-ease);
}

/* Topbar — cleaner dark surface + modern ghost buttons (Linear/Vercel feel).
   Lit along its top edge rather than filled flat: at 52px tall that one hairline is
   what separates a surface from a coloured rectangle. The badge ring in
   .shell-icon-badge is matched to the BOTTOM of this gradient. */
.shell-topbar {
  background: linear-gradient(#12253c, #0e1f33);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 0 rgba(255, 255, 255, .04),
    0 6px 20px rgba(2, 8, 20, .35);
}
.shell-topbar-act,
.shell-user-admin {
  background: transparent;
  border: 1px solid transparent;
  color: #a7b4c6;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 500;
  letter-spacing: .1px;
}
.shell-topbar-act:hover,
.shell-user-admin:hover {
  background: rgba(255, 255, 255, .08);
  border-color: transparent;
  color: #fff;
  transform: none;
}
/* Cards — softer, layered depth */
.home-card { border-radius: 14px; border-color: #edf0f4 !important; box-shadow: var(--mp-sm); }
.home-card:hover { transform: translateY(-2px); box-shadow: var(--mp-md); }

/* Buttons — subtle lift + primary depth */
.home-paste-btn:hover, .apv-btn:hover, .bdv-btn:hover { transform: translateY(-1px); }
.apv-btn--primary, .home-dropzone-btn { box-shadow: 0 2px 10px rgba(37, 99, 235, .26); }
.apv-btn--primary:hover, .home-dropzone:hover .home-dropzone-btn { box-shadow: 0 8px 20px rgba(37, 99, 235, .32); }

/* Modals & overlays — deeper shadow, gentle backdrop blur */
.paste-modal, .act-popup, .apv-dialog { border-radius: 16px; box-shadow: var(--mp-lg); border: 1px solid #edf0f4; }
.paste-overlay, .bdv-overlay { background: rgba(15, 23, 42, .34); backdrop-filter: blur(3px); }

/* Inputs — clean blue focus */
.apv-input:focus, .paste-modal-textarea:focus, .home-search:focus,
.apv-form input:focus, .apv-form select:focus {
  border-color: #2563eb; box-shadow: var(--mp-ring); outline: none;
}

/* ── Auth-aware /approve page ── */
.apv-page { min-height: 100vh; background: #f4f6f9; display: flex; justify-content: center; padding: 24px; }
.apv-page-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 16px rgba(0,0,0,.12); padding: 32px; max-width: 1100px; width: 100%; align-self: flex-start; }
.apv-page-muted { color: #94a3b8; text-align: center; padding: 24px; }
.apv-page-warn { color: #c0392b; text-align: center; }
.apv-page-info { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; background: #f8f9ff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.apv-page-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #eef1f7; font-size: 13px; }
.apv-page-info span { color: #888; }
.apv-page-doclabel { font-size: 13px; font-weight: 600; color: #1a3a6b; margin-bottom: 8px; }
.apv-page-frame { width: 100%; height: 680px; border: 1px solid #e2e8f0; border-radius: 8px; display: block; margin-bottom: 16px; }

/* Read-only BOM tree — selectable/copyable text */
.apv-tree-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 16px; }
.apv-tree { border-collapse: collapse; width: 100%; font-size: 12px; }
.apv-tree th {
  position: sticky; top: 0;
  background: #1a3a6b; color: #fff; font-weight: 600;
  text-align: left; padding: 7px 9px; white-space: nowrap; border: 1px solid #24457a;
}
.apv-tree td { padding: 4px 9px; border: 1px solid #eef1f6; vertical-align: middle; }
.apv-tree tbody tr:nth-child(even) { background: #f8f9ff; }
.apv-tree-lv1 { font-weight: 700; background: #eaf0f9 !important; }
.apv-tree-pn { font-family: "Courier New", monospace; white-space: nowrap; }
.apv-page-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 20px; }
.apv-page-reason { margin-top: 12px; font-size: 14px; color: #7f1d1d; background: #fef2f2; border-radius: 6px; padding: 10px 14px; display: inline-block; }
/* Which Pro. Eng. box this link signs, shown above the reviewer-name field */
.apv-page-signas { font-size: 13px; color: #166534; background: #dcfce7; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }

/* Reviewer fields on the /approve page. They need their own rule: .apv-input is
   deliberately borderless because in the send dialog it sits inside .apv-input-wrap,
   which draws the box — standalone on the green panel it read as bare text. */
.apv-page-input {
  display: block;
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #0f172a;
  transition: border-color .15s, box-shadow .15s;
}

.apv-page-input::placeholder { color: #9aa5b4; }

.apv-page-input:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
  outline: none;
}

/* The signature itself — the one field that must be filled, so it carries the weight */
.apv-page-input--name { font-size: 16px; font-weight: 600; padding: 13px 14px; }

textarea.apv-page-input { font-size: 14px; font-weight: 400; resize: vertical; min-height: 82px; }

/* Signature pad — the reviewer draws here and the drawing is stamped into the sheet's
   signature cell. `touch-action: none` so a finger draws instead of scrolling the page. */
.apv-sign-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.apv-sign-clear {
  border: 1px solid #d0d7e3; background: #fff; color: #64748b;
  font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 6px; cursor: pointer;
}
.apv-sign-clear:hover { background: #f8fafc; color: #334155; }
.apv-sign-pad {
  display: block;
  width: 100%;
  height: 150px;
  /* A faint baseline to sign on: it also gives the eye somewhere to aim, which the
     bare white box did not. */
  background:
    linear-gradient(to right, transparent 24px, #e8eef7 24px, #e8eef7 calc(100% - 24px), transparent calc(100% - 24px))
      0 108px / 100% 1px no-repeat,
    #fdfdff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  touch-action: none;
  /* The system crosshair is a 1px black-and-white cross that disappears against the
     white pad. This one is the same cross with a white halo, so it stays visible. */
  cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='4.5'%20stroke-linecap='round'%3E%3Cpath%20d='M13%202.5v7M13%2016.5v7M2.5%2013h7M16.5%2013h7'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%230f172a'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M13%202.5v7M13%2016.5v7M2.5%2013h7M16.5%2013h7'/%3E%3C/g%3E%3Ccircle%20cx='13'%20cy='13'%20r='1.8'%20fill='%230f172a'/%3E%3C/svg%3E") 13 13, crosshair;
  margin-bottom: 6px;
}
.apv-sign-pad:hover { border-color: #94a3b8; }

/* EN / 日本語 switch — the page opens in the language of the box it was sent to */
.apv-lang { display: flex; justify-content: flex-end; gap: 0; margin-bottom: 14px; }
.apv-lang-btn {
  border: 1px solid #d0d7e3; background: #fff; color: #64748b;
  font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer;
}
.apv-lang-btn:first-child { border-radius: 7px 0 0 7px; }
.apv-lang-btn:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.apv-lang-btn:hover { background: #f1f5f9; }
.apv-lang-btn--on { background: #1a3a6b; border-color: #1a3a6b; color: #fff; }
.apv-lang-btn--on:hover { background: #14305a; }

/* "Awaiting review" chip in the BOM document toolbar */
.bdv-pending {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: 20px; padding: 3px 10px;
}

/* All three Pro. Eng. cells signed — the document is approved */
.bdv-approved {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: #15803d;
  background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 20px; padding: 3px 10px;
}

/* Excel sheet picker — one row per worksheet (each worksheet is its own BOM) */
.home-sheet-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.home-sheet-pick:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .10);
}

.home-sheet-pick-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.home-sheet-pick-pn {
  font-family: monospace;
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
}

.home-sheet-pick-count {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.home-sheet-pick-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

/* Merge-into-one-BOM option + the Key badge it puts on each ticked sheet */
.home-sheet-merge {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 18px 4px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}

.home-sheet-merge input {
  margin-top: 2px;
  flex: none;
}

.home-sheet-merge-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
}

.home-sheet-pick-key {
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #f3e8ff;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* Excel sheet picker — selection + per-sheet import result */
.home-sheet-pick--on {
  border-color: #93c5fd;
  background: #f8fbff;
}

.home-sheet-cb {
  flex-shrink: 0;
  cursor: pointer;
}

.home-sheet-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  padding: 4px 2px 10px;
  cursor: pointer;
}

.home-sheet-res {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 7px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
}

.home-sheet-res-icon {
  font-weight: 800;
  flex-shrink: 0;
}

.home-sheet-res-msg {
  color: #64748b;
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-sheet-res--ok {
  border-color: #86efac;
  background: #f0fdf4;
}

.home-sheet-res--ok .home-sheet-res-icon {
  color: #16a34a;
}

.home-sheet-res--duplicate {
  border-color: #fde68a;
  background: #fffbeb;
}

.home-sheet-res--duplicate .home-sheet-res-icon {
  color: #d97706;
}

.home-sheet-res--error {
  border-color: #fecaca;
  background: #fef2f2;
}

.home-sheet-res--error .home-sheet-res-icon {
  color: #dc2626;
}

/* ── /callout-test scratch page ─────────────────────────────────────────────── */
.co-page { padding: 24px 28px; font-family: system-ui, sans-serif; color: #0f172a; }
.co-page h1 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.co-hint { font-size: 13px; color: #64748b; margin: 0 0 16px; }

.co-canvas {
  position: relative;
  width: 900px;
  max-width: 100%;
  height: 460px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}

.co-svg { position: absolute; inset: 0; }

.co-text {
  position: absolute;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: 13px/1.3 system-ui, sans-serif;
  color: #0f172a;
  padding: 0;
  overflow: hidden;
}

.co-grip {
  position: absolute;
  cursor: grab;
  font-size: 10px;
  line-height: 1;
  color: #94a3b8;
  user-select: none;
}

.co-size {
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  cursor: nwse-resize;
}

.co-tip {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #3b82f6;
  cursor: move;
  transition: transform .12s ease;
}

.co-tip:hover { transform: scale(1.25); }

/* Handles are editing chrome, not part of the drawing — they stay out of sight
   until the shape is pointed at, so the sheet reads like the printed form. */
.co-grip,
.co-size,
.co-tip {
  opacity: 0;
  transition: opacity .14s ease, transform .12s ease;
  pointer-events: none;
}

.co-canvas.co-show .co-grip,
.co-canvas.co-show .co-size,
.co-canvas.co-show .co-tip,
body.co-dragging .co-grip,
body.co-dragging .co-size,
body.co-dragging .co-tip {
  opacity: 1;
  pointer-events: auto;
}

body.co-dragging { cursor: grabbing; user-select: none; }

.co-debug {
  margin-top: 12px;
  font: 12px ui-monospace, Consolas, monospace;
  color: #64748b;
}

/* Level-column stepper on the document toolbar. */
.bdv-tool-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.bdv-tool-num input {
  width: 46px;
  height: 34px;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  padding: 0 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: #fff;
}

.bdv-tool-num input:focus {
  outline: none;
  border-color: #3b82f6;
}