/*
 * Column picker, new-product dialog, and the assistant panel.
 * Loaded after shell.css.
 */

/* --- column picker ------------------------------------------------------- */

.col-wrap { position: relative; }

.col-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 236px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 70;
}
.col-menu[hidden] { display: none; }

.col-menu-head {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.col-menu-list { overflow-y: auto; padding: 5px; }

.col-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 11.5px; cursor: pointer;
}
.col-option:hover { background: rgba(217, 175, 87, .08); }
.col-option.locked { opacity: .65; cursor: default; }
.col-option input { accent-color: var(--gold); }
.col-option span { flex: 1 1 auto; }
.col-lock { flex: 0 0 auto; font-size: 9px; color: var(--faint); }

.col-menu-foot {
  display: flex; gap: 6px; padding: 8px;
  border-top: 1px solid var(--line-soft);
}
.col-menu-foot .ghost-btn { flex: 1 1 auto; text-align: center; justify-content: center; }

.cell-link { color: var(--gold); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }

/* --- new product --------------------------------------------------------- */

.new-product-window { height: min(88vh, 780px); width: min(760px, 100%); }

.np-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-wide { grid-column: 1 / -1; }

.np-field { display: flex; flex-direction: column; gap: 5px; }
.np-label {
  font-size: 10px; font-weight: 680; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.np-label em { font-style: normal; color: var(--gold); text-transform: none; letter-spacing: 0; }

.np-field input, .np-field textarea, .np-field select {
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
}
.np-field input:focus, .np-field textarea:focus, .np-field select:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(217, 175, 87, .1);
}

.np-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  border: 1px solid rgba(240, 169, 66, .26);
  border-radius: 8px;
  background: rgba(240, 169, 66, .05);
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
  cursor: pointer;
}
.np-check input { margin-top: 2px; accent-color: var(--amber); }
.np-check strong { color: var(--gold-pale); }

.np-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-status { font-size: 11px; color: var(--muted); flex: 1 1 200px; }
.np-status.good { color: var(--green); }
.np-status.bad { color: var(--red); }
.np-status a { color: var(--gold); }

.danger-btn {
  border-color: rgba(240, 169, 66, .6) !important;
  background: linear-gradient(180deg, rgba(240, 169, 66, .26), rgba(240, 169, 66, .12)) !important;
  color: #ffd79a !important;
}

/* --- assistant panel ----------------------------------------------------- */

.assistant {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
  z-index: 150;
  animation: assistant-in .2s var(--ease);
}
.assistant[hidden] { display: none; }
@keyframes assistant-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.assistant-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.assistant-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.assistant-sub { margin-top: 2px; font-size: 10px; color: var(--muted); }

.assistant-log {
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}

.assistant-intro p { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.assistant-suggestions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.suggestion {
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 11.5px; text-align: left; cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.suggestion:hover { border-color: var(--gold-deep); background: rgba(217, 175, 87, .08); }

.assistant-limit {
  padding: 9px 11px;
  border-left: 2px solid var(--gold-deep);
  background: rgba(217, 175, 87, .05);
  font-size: 10.5px !important;
  line-height: 1.55 !important;
}

.assistant-turn { display: flex; flex-direction: column; gap: 6px; }
.turn-user { align-items: flex-end; }
.turn-user .turn-body {
  align-self: flex-end;
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px 12px 3px 12px;
  background: rgba(217, 175, 87, .14);
  color: var(--text);
  font-size: 12.5px; line-height: 1.55;
}
.turn-assistant .turn-body { font-size: 12.5px; line-height: 1.65; color: var(--text); }

.turn-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.tool-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--faint);
  font-size: 9.5px;
}

.assistant-thinking { color: var(--faint); font-size: 12px; font-style: italic; }

.assistant-error {
  padding: 10px 12px;
  border: 1px solid rgba(255, 102, 120, .34);
  border-radius: 8px;
  background: rgba(255, 102, 120, .06);
  font-size: 11.5px; line-height: 1.55; color: #ff97a5;
}
.assistant-error div { margin-top: 5px; color: var(--muted); }

.md-h { margin: 10px 0 5px; font-size: 12px; font-weight: 700; color: var(--gold-pale); }
.md-ul { margin: 6px 0; padding-left: 18px; }
.md-ul li { margin: 3px 0; }
.md-code {
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  font-size: 11px; font-family: ui-monospace, Menlo, monospace;
}
.md-pre {
  margin: 8px 0; padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11px; line-height: 1.5;
  overflow-x: auto; white-space: pre-wrap;
}

.proposal-card {
  margin-top: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(240, 169, 66, .34);
  border-radius: 10px;
  background: rgba(240, 169, 66, .05);
}
.proposal-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.proposal-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber);
}
.proposal-body {
  padding: 10px 12px; margin: 8px 0;
  border-radius: 8px; background: var(--surface-2);
  font-size: 11.5px; line-height: 1.6; color: var(--muted);
  max-height: 200px; overflow-y: auto;
}
.proposal-why { margin-top: 8px; font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.proposal-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.proposal-status { font-size: 10.5px; color: var(--muted); flex: 1 1 140px; }
.proposal-status.good { color: var(--green); }
.proposal-status.bad { color: var(--red); }
.proposal-status a { color: var(--gold); }
.proposal-note {
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(240, 169, 66, .18);
  font-size: 10px; line-height: 1.5; color: var(--faint);
}

.assistant-composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.assistant-composer textarea {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px; font-family: inherit; line-height: 1.5;
  resize: none; max-height: 160px;
}
.assistant-composer textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(217, 175, 87, .1);
}

.assistant-trigger { color: var(--gold); border-color: rgba(217, 175, 87, .3); }
.assistant-trigger:hover { background: rgba(217, 175, 87, .14); }

@media (max-width: 900px) {
  .assistant { width: 100vw; }
  .np-form { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Orders tracking, SEO and cost-of-operations components.
 *
 * All three pages share the same two primitives — a labelled horizontal bar
 * list and a two-column panel row — so they are defined once here rather than
 * per view.
 * ======================================================================== */

/* A view that renders tabs directly into the page body. */
.tabs-fill { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tabs-fill > .tab-host { flex: 1 1 auto; min-height: 0; }

/* The right-hand figure in a panel header. */
.panel-meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 620;
  color: var(--faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- labelled bar list ---------------------------------------------------- */

.bar-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* The rows bleed 6px either side for their hover background, so the list
   * pads by the same amount. Without this the bleed overflows horizontally and
   * the browser puts a scrollbar along the bottom of the panel, which reads as
   * a stray gold bar under the chart. */
  padding: 0 6px;
  margin: 0 -6px;
  overflow-x: hidden;
  overflow-y: auto;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(40px, 1.6fr) 58px 72px;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  font-size: 11px;
  transition: background .12s var(--ease);
}
.bar-row:hover { background: rgba(217, 175, 87, .07); }

.bar-label {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The fill lives in a span here, not the <i> the prototype used. */
.bar-row .bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}
.bar-value { text-align: right; font-weight: 640; font-variant-numeric: tabular-nums; }
.bar-side { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }

/* An ageing bucket past the service threshold. */
.bar-warn .bar-fill { background: linear-gradient(90deg, #a8701f, var(--amber)); }
.bar-warn .bar-label { color: var(--amber); }

/* --- two-panel rows ------------------------------------------------------- */

.pipeline-row,
.cost-row,
.seo-lower {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

/*
 * The Pipeline tab stacks the two summary panels over a worklist.
 *
 * The summaries hold five or six rows each; left to fill a tab panel on their
 * own they stretched to full height and left a third of the screen empty. Here
 * they take the height they need and the worklist takes the rest.
 */
.pipeline-stack {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
.pipeline-stack > .pipeline-row { flex: 0 0 auto; }
.pipeline-stack > .pipeline-row > .panel { min-height: 0; }

/* --- oldest open orders --------------------------------------------------- */

.oldest-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.oldest-row {
  display: grid;
  grid-template-columns: 56px 72px minmax(0, 1fr) 108px 92px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease);
}
.oldest-row:hover { background: rgba(217, 175, 87, .08); }
.oldest-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.oldest-age { font-weight: 660; font-variant-numeric: tabular-nums; }
.oldest-order { color: var(--muted); font-variant-numeric: tabular-nums; }
.oldest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oldest-total { text-align: right; font-weight: 640; font-variant-numeric: tabular-nums; }
.cost-row { grid-template-columns: 1.15fr minmax(0, 1fr); }

.pipeline-row > .panel,
.cost-row > .panel,
.seo-lower > .panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- table cell states ---------------------------------------------------- */

/* An open order past the 48h threshold. */
.cell-overdue { color: var(--amber); font-weight: 660; }

/* A field the upstream simply does not have set. */
.cell-missing { color: var(--faint); font-style: italic; }

/* --- SEO: scores, types and issues --------------------------------------- */

.score-pill {
  display: inline-block;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.score-good { background: rgba(88, 207, 145, .15); color: var(--green); }
.score-mid  { background: rgba(240, 169, 66, .15); color: var(--amber); }
.score-bad  { background: rgba(255, 102, 120, .15); color: var(--red); }

.type-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font-size: 9px; font-weight: 680;
  letter-spacing: .03em; text-transform: uppercase;
}

.issue-chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px; font-weight: 620;
  cursor: help;
}
.issue-critical    { background: rgba(255, 102, 120, .14); color: #ff97a5; }
.issue-warning     { background: rgba(240, 169, 66, .14); color: var(--amber); }
.issue-opportunity { background: rgba(255, 255, 255, .06); color: var(--muted); }

.issue-more { font-size: 9.5px; color: var(--faint); }

.issue-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.issue-dot.issue-critical    { background: var(--red); }
.issue-dot.issue-warning     { background: var(--amber); }
.issue-dot.issue-opportunity { background: var(--muted); }

/* --- SEO: technical checks ------------------------------------------------ */

.check-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}

.check-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  border-left: 2px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.check-pass    { border-left-color: var(--green); }
.check-fail    { border-left-color: var(--red); }
.check-unknown { border-left-color: var(--amber); }

.check-mark {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px; font-weight: 800;
}
.check-pass .check-mark    { background: rgba(88, 207, 145, .16); color: var(--green); }
.check-fail .check-mark    { background: rgba(255, 102, 120, .16); color: var(--red); }
.check-unknown .check-mark { background: rgba(240, 169, 66, .16); color: var(--amber); }

.check-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.check-label { font-size: 11.5px; font-weight: 640; }
.check-detail { font-size: 10px; color: var(--faint); line-height: 1.45; }

/* --- cost of operations --------------------------------------------------- */

/* Why a cost line is not in the totals. */
.basis-chip {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.basis-unavailable { background: rgba(240, 169, 66, .16); color: var(--amber); }
.basis-unsourced   { background: rgba(255, 255, 255, .07); color: var(--muted); }

/* A KPI footnote that is carrying a warning, not just context. */
.kpi-warn { color: var(--amber) !important; }

/* The findings list scrolls inside its panel rather than growing the page. */
.panel-fill > .findings { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* --- narrow viewports ----------------------------------------------------- */

@media (max-width: 1060px) {
  .pipeline-row,
  .cost-row,
  .seo-lower { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pipeline-stack { grid-template-rows: auto auto; overflow-y: auto; }
}

/* --- a source the audit could not read ------------------------------------ */

.source-banner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--amber);
  border-radius: 8px;
  background: rgba(240, 169, 66, .05);
}
.source-banner-error { border-left-color: var(--red); }

.source-banner-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  font-size: 10.5px;
  line-height: 1.5;
}
.source-banner-detail { color: var(--muted); }

/* The banner sits above the table inside a tab panel, so the panel keeps the
 * remaining height rather than the banner absorbing the 1fr row. */
.tab-panel > .source-banner { flex: 0 0 auto; margin-bottom: 8px; }
.tab-panel > .source-banner + .panel-fill { flex: 1 1 auto; min-height: 0; }

/* Issue chips must clip as a group, never mid-label. */
.sync-table td .issue-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- cost lines that are not in the totals -------------------------------- */

.missing-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.missing-row {
  display: grid;
  grid-template-columns: 104px 180px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.5;
}
.missing-row:nth-child(odd) { background: rgba(255, 255, 255, .015); }

.missing-row .basis-chip { margin-left: 0; justify-self: start; }
.missing-label { font-weight: 640; font-size: 11px; }
.missing-note { color: var(--faint); }

@media (max-width: 1060px) {
  .missing-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}