/* Add styles here */

#compareMatchDialog { width: min(1100px, 92vw); max-height: 85vh; overflow: auto; border: 0; border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px #0004; }
#compareMatchDialog::backdrop { background: #0f172a88; }
.comparison-match-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 16px 0; }
.comparison-match-row select { width: 100%; min-width: 0; }
#compareMatchError { color: #b45309; margin: 12px 0; }
#compareFileTable { width: 100%; }
@media (max-width: 700px) { .comparison-match-row { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }
nav a[aria-current="page"] { background: #1e3a5f; color: white; box-shadow: inset 3px 0 #60a5fa; }
.material-uploads { margin-top: 16px; }
.material-dropzone { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 2px dashed #b9cbe5; border-radius: 10px; background: #f5f9ff; color: #536680; cursor: pointer; transition: border-color .15s, background .15s; }
.material-dropzone > span { font-size: 12px; font-weight: 600; }
.material-dropzone:hover, .material-dropzone:focus-visible, .material-dropzone.is-drag-over { border-color: #2563eb; background: #eaf2ff; outline: none; }
.material-dropzone input[type="file"] { background: white; cursor: pointer; }
#materialPoInputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#materialPoList li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
#materialIssues:not(:empty) { padding: 16px; margin-top: 16px; background: #fff7ed; color: #9a3412; border-radius: 10px; max-height: 360px; overflow: auto; }
#materialStatus { margin-top: 16px; color: #1e40af; }
.material-metrics { background: #eff6ff; color: #1e40af; padding: 16px; border-radius: 10px; margin: 16px 0; font-weight: 600; }
.material-bom-wrap { max-height: 520px; margin-top: 12px; }
#materialBomTable td:nth-child(5) { min-width: 320px; white-space: normal; }
#materialBomTable input[type="text"] { min-width: 140px; }
#materialBomTable td:nth-child(10) { min-width: 190px; white-space: normal; }
#materials summary { cursor: pointer; color: #1e40af; font-weight: 600; padding: 12px 0; }
@media (max-width: 700px) { #materialPoInputs { grid-template-columns: 1fr; } }

/* Order operations: high contrast racing palette and a clear workspace hierarchy. */
:root { --blue:#df3034; --ink:#181a1e; --border:#e0e1e5; }
body { background:#f1f2f4; }
.sidebar { width:272px; padding:30px 18px 18px; background:#111215; border-right:1px solid #292b30; overflow-y:auto; z-index:5; }
.brand { padding:0 10px 30px; }
.brand-icon { background:#ef3d38; border-radius:4px; transform:skew(-8deg); }
.brand strong { font-size:20px; letter-spacing:-.7px; }
.brand small { color:#91949d; font-size:8px; }
.nav-label { color:#787d87; padding:16px 12px 12px; }
nav .nav-group { border-bottom:1px solid #2c2e34; padding:10px 0; }
nav .nav-main { display:flex; align-items:center; gap:12px; color:#ececf0; font-size:14px; font-weight:750; padding:14px 10px; border-radius:5px; }
.nav-main small { display:block; font-size:8px; letter-spacing:1px; color:#9296a1; margin-top:4px; font-weight:500; }
.nav-icon { display:grid; place-items:center; width:30px; height:34px; flex-shrink:0; color:#a2a5ad; background:#26282e; border-radius:4px; font-size:12px; font-style:italic; }
.nav-children { margin:6px 0 10px 25px; padding-left:19px; border-left:1px solid #454750; }
nav .nav-children a { color:#a6a9b3; font-size:11px; padding:8px 9px; margin:2px 0; border-radius:4px; }
nav a:hover, nav a:focus-visible { background:#2d2f35; }
nav a[aria-current="page"] { color:#fff; background:#393037; box-shadow:inset 3px 0 #ef3d38; }
body[data-workspace="analysis"] [data-area="analysis"] > .nav-main,
body[data-workspace="compare"] [data-area="compare"] > .nav-main,
body[data-workspace="materials"] [data-area="materials"] > .nav-main { background:#df3034; color:#fff; }
body[data-workspace="analysis"] [data-area="analysis"] .nav-icon,
body[data-workspace="compare"] [data-area="compare"] .nav-icon,
body[data-workspace="materials"] [data-area="materials"] .nav-icon { background:#ffffff24; color:#fff; }
body[data-workspace="analysis"] [data-area="analysis"] small,
body[data-workspace="compare"] [data-area="compare"] small,
body[data-workspace="materials"] [data-area="materials"] small { color:#ffdadb; }
.sidebar-note { margin-top:32px; background:#1c1e23; border-color:#30323a; color:#d1d3da; border-radius:6px; }
.sidebar-note .small { color:#989ca7; }
main { margin-left:272px; }
.page-header,.compare-intro { position:relative; overflow:hidden; padding:38px 36px; background:linear-gradient(115deg,#17181d 0%,#262830 70%,#3e242b 100%); color:#fff; border-bottom:4px solid #ef3d38; }
.page-header::after,.compare-intro::after { content:""; position:absolute; right:40px; top:-55px; width:95px; height:300px; background:#ef3d3815; transform:skew(-24deg); box-shadow:120px 0 #ef3d3810; pointer-events:none; }
.eyebrow { color:#ff766e; font-weight:750; letter-spacing:2px; font-size:10px; }
h1 { font-size:32px; font-weight:850; letter-spacing:-1.1px; position:relative; z-index:1; }
.hero-tag { display:block; margin:10px 0 15px; color:#a1a4ae; letter-spacing:3px; font-size:11px; font-weight:650; }
.page-header .sub,.compare-intro .sub { color:#c3c5ce; position:relative; z-index:1; }
.content { padding:28px 32px; }
.box { border-radius:10px; box-shadow:0 5px 18px #15171c05; }
.section-heading,.section-title { border-bottom:1px solid #e9e9ed; padding-bottom:16px; }
.step { border-radius:4px; color:#d82730; background:#fff0ef; font-style:italic; }
.upload-card { background:#fafafb; border-radius:7px; border-top:3px solid #31343c; }
.upload-card:nth-child(2) { border-top-color:#df3034; }
.upload-card:nth-child(3) { border-top-color:#8c939f; }
input[type="file"],.material-dropzone { background:#f5f5f7; border-color:#c6c8cf; border-radius:6px; }
input::file-selector-button { color:#b6222a; border-color:#e1d9db; }
.material-dropzone:hover,.material-dropzone:focus-visible,.material-dropzone.is-drag-over { border-color:#df3034; background:#fff1f0; }
.primary { background:#df3034; box-shadow:0 4px 10px #df303425; }
.primary:hover { background:#bd2029; }
button { border-radius:5px; }
:focus-visible { outline-color:#ef7973; }
.card { border-top:3px solid #b4b8c1; border-radius:7px; }
.card:first-child { background:#1e2026; border-color:#1e2026; border-top-color:#ef3d38; color:#bec1cb; }
.card:first-child b { color:#fff; }
.card:nth-child(2) { border-top-color:#059669; }
.card:nth-child(3),.card:nth-child(4) { border-top-color:#df3034; }
th { background:#292c33; color:#f0f1f4; }
#status:not(:empty),#materialStatus:not(:empty),.material-metrics { background:#fff0ee; color:#a8252c; border-left:3px solid #df3034; }
#materials summary { color:#b6222a; }
.compare-intro { display:none; margin:-24px -24px 24px; }
body[data-workspace="compare"] #poWorkspace > .page-header,
body[data-workspace="compare"] #poWorkspace > .content > :not(#comparison),
body[data-workspace="analysis"] #comparison { display:none; }
body[data-workspace="compare"] .compare-intro { display:block; }
@media(max-width:1200px) { .sidebar { width:248px; } main { margin-left:248px; } }
@media(max-width:700px) {
  .sidebar { position:static; width:100%; padding:16px; overflow:visible; }
  .brand { padding:0 4px 8px; }
  main { margin-left:0; }
  nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; overflow:visible; align-items:start; }
  nav .nav-group { border-bottom:0; padding:0; min-width:0; }
  nav .nav-main { padding:10px 8px; gap:6px; font-size:11px; white-space:normal; align-items:flex-start; min-height:68px; }
  .nav-icon { width:22px; height:25px; font-size:10px; }
  .nav-main small { display:none; }
  .nav-children { display:none; margin:6px 0 0; padding:0 0 0 6px; }
  body[data-workspace="analysis"] .nav-children { display:block; }
  nav .nav-children a { white-space:normal; font-size:10px; padding:7px 4px; }
  .page-header { padding:26px 20px; }
  h1 { font-size:26px; }
  .hero-tag { font-size:9px; letter-spacing:1.5px; }
  .content { padding:20px 12px; }
  .compare-intro { margin:-18px -18px 20px; padding:26px 20px; }
}