/* ============================================================================
 * Products Design — the Product Mapper.
 *
 * Split out of app.css on 19-08-2026 (was lines 794-1095). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* ====================================================== PRODUCT MAPPER */

/* Tabs (1 · Inputs / 2 · Products) */
.tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.tabs { display: flex; gap: 0.4rem; }
.tab-btn {
    border: 1px solid var(--border-grey, #E3E4E9);
    background: #fff;
    color: var(--slate, #55648A);
    border-radius: var(--radius-btn, 8px);
    padding: 0.5rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-btn:hover { border-color: var(--cyan-ink, #0A7A97); color: var(--cyan-ink, #0A7A97); }
.tab-btn.active {
    background: var(--pale-cyan, #EAF7FA);
    color: var(--cyan-ink, #0A7A97);
    border-color: var(--soft-cyan, #C3E7F0);
    box-shadow: 0 2px 8px rgba(15,159,196,0.12);
}

/* Save status chip */
/*
 * The one save indicator, in the topbar. It sits to the left of the user menu
 * and holds its width by NOT being laid out as a chip that appears and vanishes
 * — an element that pops in and out shifts everything beside it, and a control
 * that jumps as you type is worse than no feedback at all.
 */
.save-status {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--slate, #55648A);
    white-space: nowrap;
    margin-right: 0.9rem;
}
.save-status.saving { color: var(--cyan-ink, #0A7A97); }
.save-status.saved  { color: var(--cyan-ink, #0A7A97); }
.save-status.error  { color: var(--logout-red, #e05c5c); }

/* Inputs tab: parameter rows */
.param-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.param-row {
    /* Definition on the left, test-bench value on the right. No actions column:
       the set is fixed, so there is nothing to edit or delete — which leaves
       room for the value control to show a full option label. */
    display: grid;
    grid-template-columns: 1fr 155px;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--light-silver, #E3E4E9);
}
.param-row:last-child { border-bottom: none; }
.param-row__label { font-size: 0.78rem; color: var(--text-dark, #0F1E45); font-weight: 500; }
.param-row__meta { font-size: 0.62rem; color: var(--slate, #55648A); margin-top: 1px; }
.param-row__meta .badge { margin-left: 0.3rem; vertical-align: 1px; }
/* Computed inputs: shown, never typed into. */
.param-row--derived .param-row__label { color: var(--slate, #55648A); }
.param-row__computed {
    background: var(--off-white, #F7F7F8) !important;
    color: var(--slate, #55648A) !important;
    font-weight: 600;
    text-align: right;
}
/* Proposals: whose site list is on screen (viewers with granted colleagues). */
.viewing__label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--slate, #55648A);
    white-space: nowrap;
    margin-right: 0.4rem;
}
.viewing__select { flex: 1; min-width: 0; }

.param-count {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--slate, #55648A);
    background: var(--off-white, #F7F7F8);
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 0.5rem;
    vertical-align: 2px;
}

/* "These inputs are fixed" banner at the top of the Inputs tab. */
.fixed-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--slate, #55648A);
}
.fixed-note i { color: var(--cyan-ink, #0A7A97); margin-top: 3px; }
.fixed-note strong { color: var(--text-dark, #0F1E45); }

/* Water Analysis on the Inputs tab: the wizard's 12 x 3 grid, full width. */
.param-groups > .section-block--wide { grid-column: 1 / -1; }
.wa-bench td { position: relative; }
.wa-bench input { width: 100%; }
.code-chip--cell {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.75;
    font-size: 0.58rem;
}
.icon-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--border-grey, #E3E4E9);
    background: #fff;
    border-radius: 6px;
    color: var(--slate, #55648A);
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.icon-btn:hover { color: var(--cyan-ink, #0A7A97); border-color: var(--cyan-ink, #0A7A97); }
.icon-btn--danger:hover { color: var(--logout-red, #e05c5c); border-color: var(--logout-red, #e05c5c); }

.code-chip {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--cyan-ink, #0A7A97);
    background: var(--pale-cyan, #EAF7FA);
    border: 1px solid var(--soft-cyan, #C3E7F0);
    border-radius: 4px;
    padding: 0 5px;
    cursor: pointer;
    user-select: none;
}

/* Products tab badges */
.badge--match { background: var(--pale-cyan, #EAF7FA); color: var(--cyan-ink, #0A7A97); border: 1px solid var(--soft-cyan, #C3E7F0); }
.badge--flag  { background: #f5f6f9; color: var(--slate, #55648A); }
.badge--gap   { background: #eef0f5; color: var(--text-dark, #0F1E45); }

/* Scenario card */
.scenario {
    border: 1px solid var(--light-silver, #E3E4E9);
    border-left: 3px solid var(--soft-cyan, #C3E7F0);
    border-radius: var(--radius-btn, 8px);
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.75rem;
    background: #fff;
}
.scenario--match { border-left-color: var(--cyan-ink, #0A7A97); background: linear-gradient(135deg, #fff 82%, var(--pale-cyan, #EAF7FA)); }

/* Accordion: one scenario open at a time. Collapsed rows sit tight together so
   a dozen of them can be scanned; the open one gets its breathing room back. */
.scenario { padding: 0.5rem 0.875rem; margin-bottom: 0.4rem; }
.scenario--open { padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; }

.scenario__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    cursor: pointer;             /* the whole head toggles, not just the chevron */
}
.scenario--open .scenario__head { margin-bottom: 0.5rem; }
.scenario__head input { flex: 1; cursor: text; }
.scenario__toggle { flex: none; color: var(--slate, #55648A); }
.scenario__toggle:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px rgba(10, 122, 151, 0.35)); }
.scenario--open .scenario__toggle { color: var(--cyan-ink, #0A7A97); }
.cond-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) 1fr auto;
    gap: 0.4rem;
    align-items: start;
    margin-bottom: 0.35rem;
}
.cond-row__vals { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: center; font-size: 0.75rem; color: var(--text-dark, #0F1E45); padding-top: 0.35rem; }
.cond-row__vals label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.cond-row__vals input[type="checkbox"] { width: auto; }
.cond-minmax { display: flex; gap: 0.4rem; align-items: center; font-size: 0.72rem; color: var(--slate, #55648A); }
.cond-minmax input { width: 80px; }
.cond--fail select { border-color: #d9c1c1; }
.cond-state { font-size: 0.66rem; font-weight: 700; padding-top: 0.5rem; }
.cond-state.ok { color: var(--cyan-ink, #0A7A97); }
.cond-state.no { color: var(--logout-red, #e05c5c); }

/* Formula editor */
.formula-box { margin: 0.5rem 0; }
.formula-box input { font-family: 'Courier New', monospace; }
.formula-msg { font-size: 0.7rem; margin-top: 3px; }
.formula-msg.err { color: var(--logout-red, #e05c5c); }
.formula-msg.warn { color: #7a5f16; }
.formula-msg.ok { color: var(--cyan-ink, #0A7A97); font-weight: 600; }
.palette { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.palette button {
    border: 1px solid var(--border-grey, #E3E4E9);
    background: var(--off-white, #F7F7F8);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-dark, #0F1E45);
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.palette button:hover { background: var(--pale-cyan, #EAF7FA); border-color: var(--soft-cyan, #C3E7F0); color: var(--cyan-ink, #0A7A97); }

/* The parameters nobody normally types. Sized and coloured to read as a way in
   rather than as a sixtieth button — the buttons beside it are the shortcut,
   this is the whole list. `width: auto` because the global input rule stretches
   every select to 100%, which here would push the operators onto their own row. */
.palette__more {
    width: auto;
    flex: none;
    font-size: 0.68rem;
    padding: 2px 6px;
    border: 1px dashed var(--border-grey, #E3E4E9);
    border-radius: 4px;
    background: #fff;
    color: var(--slate, #55648A);
    cursor: pointer;
    max-width: 15rem;
}
.palette__more:hover { border-color: var(--soft-cyan, #C3E7F0); color: var(--cyan-ink, #0A7A97); }

/* Active / Inactive. Narrower than the category select beside it, because it
   holds two short words and would otherwise take half the toolbar. */
.status-filter { width: auto; flex: none; min-width: 7.5rem; }

/* An inactive product is read-only until restored. The controls are genuinely
   `disabled`; this only makes that legible, so nobody clicks hopefully. */
.detail--locked .field__label { color: var(--slate, #55648A); }
.detail--locked input:disabled,
.detail--locked select:disabled,
.detail--locked textarea:disabled {
    background: var(--off-white, #F7F7F8);
    cursor: not-allowed;
}

/* Product change history, newest first. Wider than a confirm dialog because the
   detail lines are one change each and wrapping them costs the sense. */
.history-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.history-item {
    padding: 0.6rem 0.15rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
}
.history-item:last-child { border-bottom: 0; }
.history-item__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.history-item__when { font-size: 0.76rem; color: var(--text-dark, #0F1E45); font-weight: 600; }
.history-item__who { font-size: 0.76rem; color: var(--slate, #55648A); }
.history-item__detail {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-dark, #0F1E45);
    /* One change per line, as recorded — preserved rather than reflowed. */
    white-space: pre-wrap;
    line-height: 1.5;
}

/* Discloses a product's reference detail. Deliberately quiet — it is a way to
   more, not an action, and it sits between the identity fields and the scenarios
   that are the real work of the screen. */
.more-toggle {
    margin: 0.6rem 0 0.2rem;
    background: transparent;
    border: 1px dashed var(--light-silver, #E3E4E9);
    color: var(--slate, #55648A);
    font-size: 0.78rem;
}
.more-toggle:hover {
    border-color: var(--soft-cyan, #C3E7F0);
    color: var(--cyan-ink, #0A7A97);
    background: var(--pale-cyan, #EAF7FA);
}
.more-grid { margin-top: 0.4rem; }

.dose-grid { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 0.5rem; margin-top: 0.4rem; }
.scenario__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }

/* Two-step confirm button */
.btn--confirming { background: #fdeeee !important; border-color: var(--logout-red, #e05c5c) !important; color: var(--logout-red, #e05c5c) !important; }

/* Flags editor */
.flag-row { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; }