/* WDPD base shell.
   Restrained black / grey research-platform surface. Colour is reserved for the
   two status signals defined in edit.css (verified = faint green, needs review =
   faint tan). Nothing here adds a third accent, a gradient or a decorative fill. */
:root{
  --bg:#151515; --panel:#202020; --panel-soft:#191919; --panel-raised:#242424;
  --line:#3a3a3a; --line-soft:#2c2c2c; --muted:#a9a9a9; --muted-dim:#8a8a8a; --text:#f1f1f1;
  --mono:Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:13px "Segoe UI",Arial,sans-serif}

/* ---- app bar ---- */
header{height:56px;background:#090909;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:12px;padding:0 22px}
.app-title{font-size:16px;font-weight:650;letter-spacing:-.01em}
header small{font-size:11px;color:var(--muted-dim);font-weight:400;letter-spacing:.02em}
.data-snapshot{margin-left:8px;padding-left:9px;border-left:1px solid #383838;color:#727272;
  white-space:nowrap}
.app-bar-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.admin-toggle{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid #3a3a3a;
  border-radius:3px;color:var(--muted);font-size:11px;cursor:pointer;user-select:none}
.admin-toggle:hover{border-color:#555;color:#d8d8d8}
.admin-toggle input{margin:0;cursor:pointer}
.admin-toggle.is-on{border-color:#5c5c5c;background:#1d1d1d;color:#e8e8e8}
.brand-logo{width:88px;height:34px;object-fit:contain;background:#fff;border-radius:2px;padding:2px}

/* ---- three-column shell ---- */
.layout{display:grid;grid-template-columns:258px minmax(520px,1fr) 382px;height:calc(100vh - 56px)}
aside,main{min-width:0;background:var(--panel);border-right:1px solid var(--line)}
h2{font-size:10px;margin:0;padding:16px 18px;border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted-dim);font-weight:700}

/* ---- sidebar ---- */
ul{list-style:none;margin:0;padding:0;overflow:auto;height:calc(100vh - 100px)}
li{padding:11px 18px;border-bottom:1px solid var(--line-soft);cursor:pointer}
li:hover{background:#282828}
li.active{background:#2e2e2e;box-shadow:inset 2px 0 0 #7a7a7a}
.nav-section{padding:14px 18px 6px;border:0;color:#6f6f6f;font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;cursor:default;background:none}
.nav-section:hover{background:none}
.home-menu{border-bottom:1px solid var(--line)}
.manufacturer-name{display:flex;align-items:center;gap:7px;min-width:0}
.name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-badge{display:inline-flex;align-items:center;justify-content:center;min-width:25px;
  padding:2px 5px;border:1px solid #4e4e4e;border-radius:2px;color:#b4b4b4;font-size:9px;
  font-weight:700;letter-spacing:.04em;line-height:1;flex:0 0 auto}
.stats{display:block;color:var(--muted-dim);font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}

/* ---- catalog filters ---- */
.filters{padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end}
select,input,button{color:var(--text);background:#161616;border:1px solid var(--line);
  padding:7px 9px;border-radius:3px;font:inherit;font-size:12px}
input{min-width:74px}
button{cursor:pointer}
button:hover{background:#242424;border-color:#555}
.primary-button{background:#333;border-color:#5e5e5e}
.primary-button:hover{background:#414141}
.filter-label,.filter-group{display:flex;flex-direction:column;gap:5px;color:var(--muted-dim);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.filter-group-label{display:block}
.filter-search input{min-width:230px}
.filter-range{display:flex;align-items:center;gap:6px}
.filter-range input{width:82px}
.filter-range i{color:#666;font-style:normal}
.filter-actions{display:flex;gap:8px;flex:1 0 100%;justify-content:flex-end;
  border-top:1px solid var(--line-soft);padding-top:11px;margin-top:2px}
.summary{padding:9px 16px;background:var(--panel-soft);border-bottom:1px solid var(--line);
  color:var(--muted);font-size:11px;letter-spacing:.02em}
.summary b{color:#e8e8e8;font-variant-numeric:tabular-nums}
.summary-sep{color:#4d4d4d;margin:0 8px}

/* ---- catalog table ---- */
.table-wrap{height:calc(100vh - 176px);overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th{position:sticky;top:0;z-index:1;background:#181818;text-align:left;
  border-bottom:1px solid var(--line);color:var(--muted-dim);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
/* Full words in the header ('Diameter (in)', 'Purchase status') are worth two
   header lines; the data cells still never wrap, so rows stay one line high. */
.catalog-table th{white-space:normal;line-height:1.35;vertical-align:bottom;
  font-size:9px;letter-spacing:.02em;padding-left:8px;padding-right:8px}
.catalog-table th.num{text-align:right;white-space:normal}
th,td{padding:8px 9px;border-bottom:1px solid var(--line-soft)}
/* Fixed layout: with twelve known columns this is the only way to guarantee the
   table never overflows its panel at any window width. Headers wrap, data cells
   do not, and every width below was checked against real content at 1600x1000. */
.catalog-table{min-width:960px;table-layout:fixed}
.catalog-table th:nth-child(1){width:9%}
.catalog-table th:nth-child(2){width:10%}
.catalog-table th:nth-child(3){width:10%}
.catalog-table th:nth-child(4){width:8%}
.catalog-table th:nth-child(5){width:8%}
.catalog-table th:nth-child(6){width:8%}
.catalog-table th:nth-child(7){width:7%}
.catalog-table th:nth-child(8){width:5.5%}
.catalog-table th:nth-child(9){width:8%}
.catalog-table th:nth-child(10){width:6.5%}
.catalog-table th:nth-child(11){width:10%}
.catalog-table th:nth-child(12){width:10%}
.catalog-table td{overflow:hidden;text-overflow:ellipsis}
/* Purchase status must not wrap onto two lines: uneven row heights make a
   long table much harder to scan than a horizontal scrollbar does. */
/* Data cells stay on one line so row heights are even; the HEADER may wrap.
   Applying nowrap to the th as well is what made 'Purchase status' overflow. */
.catalog-table td:nth-child(11){white-space:nowrap}
/* Short controlled vocabularies (prop type, material) must never wrap - a
   broken "Non- Folding" reads as two values. Product and Series may wrap. */
.catalog-table td:nth-child(5),.catalog-table td:nth-child(9){white-space:nowrap}
.catalog-table th[data-sort]{cursor:pointer;user-select:none}
.catalog-table th[data-sort]:hover{color:#d8d8d8}
.catalog-table th[data-sort]::after{content:"";display:inline-block;width:9px;margin-left:5px;
  color:#6f6f6f;font-size:9px}
.catalog-table th.sort-asc::after{content:"▲"}
.catalog-table th.sort-desc::after{content:"▼"}
.catalog-table th.sort-asc,.catalog-table th.sort-desc{color:#e8e8e8}
th.num,td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th.num{min-width:56px}
.col-mono,td.col-mono{font-family:var(--mono);font-size:10.5px;color:#a4a4a4;white-space:nowrap}
.col-actions{width:114px;white-space:nowrap}
.col-actions .mini-button{padding:3px 5px;font-size:10px}
tbody tr{cursor:pointer}
tbody tr:hover{background:#272727}
tbody tr.row-selected{background:#2e2e2e;box-shadow:inset 2px 0 0 #7a7a7a}
.cell-name{color:#f1f1f1}
.table-empty{padding:34px 16px;text-align:center;color:var(--muted-dim)}

/* ---- product detail ---- */
.detail{border-right:0}
.detail>div{padding:18px;overflow:auto;height:calc(100vh - 100px)}
.empty{color:var(--muted-dim);text-align:center;margin-top:42px}
/* Neutral plate, not a black slab, while the image loads or if it 404s. */
.image{width:100%;height:210px;object-fit:contain;background:#161616;border:1px solid var(--line);
  border-radius:3px;margin-bottom:12px}
.image-empty{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-bottom:12px;
  border:1px dashed #3a3a3a;border-radius:3px;background:#1a1a1a;color:#8a8a8a;font-size:11px}
.image-empty::before{content:"";width:22px;height:16px;flex:0 0 auto;border:1px solid #4a4a4a;
  border-radius:2px;background:repeating-linear-gradient(135deg,#202020 0 4px,#262626 4px 8px)}
.detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.detail-name{font-size:16px;font-weight:650;letter-spacing:-.01em}
.detail-id{font-family:var(--mono);font-size:11px;color:var(--muted-dim);letter-spacing:.02em;margin-bottom:14px}
.detail-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.section{margin:0 0 22px}
.section h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim);font-weight:700;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 10px}
.section h3 .section-hint{font-size:10px;font-weight:400;letter-spacing:.02em;text-transform:none;color:#6f6f6f}
.row{display:grid;grid-template-columns:44% 56%;gap:10px;padding:6px 0;border-bottom:1px solid #262626}
.row:last-child{border-bottom:0}
.row span:last-child{text-align:right;overflow-wrap:anywhere}
.row .num-value{font-variant-numeric:tabular-nums}
.label{color:var(--muted)}
/* Absent specification. Neutral on purpose - never a warning colour. */
.not-disclosed{color:#787878;font-style:normal;white-space:nowrap}
.row .not-disclosed,.fs-value .not-disclosed{white-space:normal}
.card{border:1px solid var(--line);border-radius:3px;padding:10px 12px;margin:8px 0;
  background:#1a1a1a;line-height:1.6}
.source-link{display:inline-block;color:#e8e8e8;background:#282828;border:1px solid #4a4a4a;
  text-decoration:none;border-radius:3px;padding:7px 11px;font-size:11px}
.source-link:hover{background:#333}

/* ---- home ---- */
.home-panel{padding:40px 40px 56px;overflow:auto;height:calc(100vh - 56px);background:var(--panel-soft)}
.home-title{max-width:720px}
.home-title .eyebrow{margin:0 0 10px;color:#8f8f8f;font-size:10px;font-weight:700;letter-spacing:.16em}
.home-title h1{font-size:25px;font-weight:650;letter-spacing:-.02em;margin:0 0 10px}
.home-title p:not(.eyebrow){color:#a9a9a9;margin:0;font-size:13px;line-height:1.6}
.home-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:28px 0 32px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:3px;max-width:860px}
.home-stats>div{padding:17px 19px;background:#1e1e1e}
.home-stats b{display:block;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.home-stats span{display:block;margin-top:7px;color:var(--muted-dim);font-size:11px;letter-spacing:.02em}
.home-section{max-width:860px}
.home-section-header{display:flex;align-items:end;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:18px}
.home-section h2{border:0;padding:0;font-size:10px;letter-spacing:.12em}
.home-section-header p{margin:7px 0 0;color:#7d7d7d;font-size:11px}
.home-catalog-button{white-space:nowrap;background:#282828;border-color:#4a4a4a}
.country-group{margin:0 0 18px}
.country-group-label{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;color:#7d7d7d;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.country-group-label span{font-weight:400;letter-spacing:.02em;text-transform:none;color:#5f5f5f;
  font-variant-numeric:tabular-nums}
.mfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
.mfg-card{display:block;width:100%;text-align:left;background:#1e1e1e;padding:15px 17px;
  border:1px solid var(--line-soft);border-radius:3px;cursor:pointer}
.mfg-card:hover{background:#262626;border-color:#454545}
.mfg-card-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0}
.mfg-card-name{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfg-card-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mfg-card-figures b{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:#ededed}
.mfg-card-figures span{display:block;margin-top:3px;color:#7d7d7d;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:1240px){.layout{grid-template-columns:236px minmax(440px,1fr) 350px}}
@media(max-width:1050px){
  .layout{grid-template-columns:220px 1fr;min-width:0}
  .detail{display:none}
  .home-panel{padding:26px}
  .home-stats{grid-template-columns:1fr}
  .filter-actions{margin-left:0}
}

/* Thirteen-column layout, used only when the Delivered to column is present.
   table-layout is fixed, so a column count change needs its own width set or the
   percentages no longer sum to 100 and the table overflows. Widths verified
   against real content at 1600x1000. */
.catalog-table.with-delivery th:nth-child(1){width:9%}
.catalog-table.with-delivery th:nth-child(2){width:9%}
.catalog-table.with-delivery th:nth-child(3){width:8%}
.catalog-table.with-delivery th:nth-child(4){width:6%}
.catalog-table.with-delivery th:nth-child(5){width:7.5%}
.catalog-table.with-delivery th:nth-child(6){width:6.5%}
.catalog-table.with-delivery th:nth-child(7){width:6.5%}
.catalog-table.with-delivery th:nth-child(8){width:5%}
.catalog-table.with-delivery th:nth-child(9){width:7%}
.catalog-table.with-delivery th:nth-child(10){width:5.5%}
.catalog-table.with-delivery th:nth-child(11){width:9%}
.catalog-table.with-delivery th:nth-child(12){width:11%}
.catalog-table.with-delivery th:nth-child(13){width:10%}
.col-delivered{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-table .not-disclosed{white-space:normal}
.catalog-table td:nth-child(5),.catalog-table td:nth-child(9){white-space:normal}