/* ============================================================================
   ALGOM danger zone - spread / sell-deviation controls.

   Loaded after report.css and built entirely on its tokens, so the two pages
   share one palette and one set of components (.card, .btn, .sheet, .toast).
   What is different here is the accent: this page writes to live trading, so
   the primary action is red rather than blue and the page says so at the top.
   ========================================================================== */

body.controls-body {
    padding-bottom: 84px;   /* room for the sticky action bar */
}

.pill-danger { background: var(--negative-soft); color: var(--negative); }
.pill-danger .dot { background: var(--negative); }

/* ------------------------------------------------------------ warn strip -- */
.warn-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--pad);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}

.warn-strip svg { flex: none; }

/* ------------------------------------------------------------------ page -- */
.page {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--gap) var(--pad);
    align-items: start;
}

/* ----------------------------------------------------------------- chips -- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.chip-count { font-size: 10.5px; opacity: 0.75; font-family: var(--font-num); }

/* An exchange with selected4trading false is still reachable - the bot just is
   not quoting on it - so it is marked rather than hidden. */
.chip-idle::after {
    content: "idle";
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--warning-soft);
    color: var(--warning);
}

/* ------------------------------------------------------------- segmented -- */
.seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    padding: 3px;
    margin-bottom: 8px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.seg-btn {
    height: 32px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    white-space: nowrap;
}

.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] {
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Six choices do not fit one row on a phone, and a select would hide the one
   thing that decides what the rest of the card does. */
.seg-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Turn on / Turn off carry their own colour when chosen: this is the control
   that starts or stops the bot trading a market, not a neutral tab. */
.seg-on[aria-pressed="true"] { color: var(--positive); }
.seg-off[aria-pressed="true"] { color: var(--negative); }

/* ------------------------------------------------------------ value row -- */
.value-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
}

.step-btn {
    height: 40px;
    min-width: 46px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    font-family: var(--font-num);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.step-btn:hover { border-color: var(--accent); color: var(--accent); }
.step-btn:active { transform: translateY(1px); }

.value-input {
    height: 40px;
    width: 100%;
    padding: 0 10px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}

.value-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.value-input[aria-invalid="true"] { border-color: var(--negative); color: var(--negative); }

.hint {
    margin: 9px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.hint b { color: var(--text); font-family: var(--font-num); }
.hint[data-tone="error"] { color: var(--negative); }

/* --------------------------------------------------------------- filter -- */
.chips-sm { margin-bottom: 8px; }
.chips-sm .chip { height: 26px; padding: 0 10px; font-size: 11px; }

/* A flag chip cycles any -> on -> off. "any" is the resting state and stays
   neutral; the other two take the colour of what they are showing, so a glance
   at the row says which way the list is filtered. */
.flag-chip { gap: 4px; }
.flag-state { font-size: 9px; font-weight: 700; }

.flag-chip[data-state="on"] {
    background: var(--positive-soft);
    border-color: var(--positive);
    color: var(--positive);
}

.flag-chip[data-state="off"] {
    background: var(--negative-soft);
    border-color: var(--negative);
    color: var(--negative);
}

.table-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.table-actions .btn { height: 30px; padding: 0 10px; font-size: 11.5px; }

/* A column filter box lives in the same grid cell as its column, so it has to
   fit a 56px numeric column - hence ">2" rather than a labelled control. */
.col-filter {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 7px;
    font-size: 11.5px;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}

.col-filter.num { font-family: var(--font-num); text-align: right; padding: 0 5px; }
.col-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.col-filter[aria-invalid="true"] { border-color: var(--negative); color: var(--negative); }
.col-filter[data-active="1"] { border-color: var(--accent); }

/* --------------------------------------------------------- market table -- */
/* One grid template shared by the header and every row, so the columns line up
   without a <table> that would not reflow on a phone. */
.market-head,
.market-filters,
.market-row {
    display: grid;
    /* Narrow enough that the name column still has room for four flag letters
       plus a readable symbol at 360px. */
    grid-template-columns: minmax(0, 1fr) 48px 48px 76px;
    gap: 6px;
    align-items: center;
}

.market-head { padding: 0 8px 5px; }
.market-filters { padding: 0 8px 8px; }

.market-row .cell-num { text-align: right; }

/* -------------------------------------------------------------- sorting -- */
.sort-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

/* The numeric columns are read from the right, so their header sits there too
   and the caret leads into the numbers below it. */
.market-head .sort-btn:not(:first-child) { justify-content: flex-end; }

.sort-btn:hover { color: var(--text); }
.sort-btn[data-active="1"] { color: var(--accent); }

.sort-mark { font-size: 8px; opacity: 0; }
.sort-btn[data-active="1"] .sort-mark { opacity: 1; }

.market-list {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

.market-row {
    width: 100%;
    padding: 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font-size: 12.5px;
    color: var(--text);
    text-align: left;
}

.market-row:last-child { border-bottom: 0; }
.market-row:hover { background: var(--bg-elevated); }

.market-row[aria-pressed="true"] {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* A row that cannot be written is not selectable, and says why. */
.market-row[disabled] {
    opacity: 0.55;
    background: transparent;
    cursor: not-allowed;
}

.cell-name { display: flex; align-items: center; gap: 7px; min-width: 0; }

.cell-sym {
    font-weight: 700;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-num { font-family: var(--font-num); font-size: 12px; color: var(--text-muted); }
.cell-num.strong { color: var(--text); font-weight: 600; }

/* All four switches at a glance: whether a market is quoting, and whether it is
   allowed to cross the spread, both matter before touching it.

   Letters rather than boxes. Four bordered pills would eat the market name on a
   360px screen, and colour alone carries the state perfectly well at this size
   - each one also has a title for the reading that colour cannot give. */
.flags {
    display: inline-flex;
    gap: 4px;
    flex: none;
    font-family: var(--font-num);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
}

.flag { color: var(--text-faint); }
.flag[data-on="1"] { color: var(--positive); }
.flag[data-on="0"] { color: var(--negative); opacity: 0.75; }

/* The ding pair is the aggressive one, so it reads as a modifier of the pair
   before it rather than as two more equals. */
.flag-ding { opacity: 0.85; }

.row-reason {
    font-size: 10px;
    color: var(--warning);
    font-weight: 600;
    white-space: nowrap;
}

.list-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--text-faint); }

/* ----------------------------------------------------------------- undo -- */
.undo-text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.undo-text b { color: var(--text); font-family: var(--font-num); }

/* ------------------------------------------------------------ actionbar -- */
.actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--pad);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.actionbar-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.actionbar-text b { color: var(--text); font-weight: 700; }

/* The one button on this page that writes. Solid red, never a hover-only tint,
   so it can never be mistaken for the neutral buttons beside it. */
.btn-apply {
    background: var(--negative);
    border-color: var(--negative);
    color: #fff;
    min-width: 116px;
}

.btn-apply:hover { background: var(--negative); border-color: var(--negative); color: #fff; filter: brightness(1.08); }
.btn-apply:disabled { opacity: 0.45; filter: none; cursor: not-allowed; }
.btn-apply[data-busy="1"] { opacity: 0.7; pointer-events: none; }

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

/* ---------------------------------------------------------------- sheet -- */
.sheet-wide { max-width: 620px; }

#previewSummary { margin: 0 0 14px; }
#previewSummary b { color: var(--text); font-family: var(--font-num); }

.diff-head,
.diff-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 108px;
    gap: 8px;
    align-items: center;
}

.diff-head {
    padding: 0 6px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.diff-head span:not(:first-child) { text-align: right; }

.diff-list {
    max-height: 34vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

.diff-row {
    padding: 7px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.diff-row:last-child { border-bottom: 0; }
.diff-sym { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.diff-change { text-align: right; font-family: var(--font-num); white-space: nowrap; }
.diff-from { color: var(--text-faint); }
.diff-arrow { color: var(--text-faint); margin: 0 3px; }
.diff-to { font-weight: 700; }
.diff-to[data-dir="up"] { color: var(--positive); }
.diff-to[data-dir="down"] { color: var(--negative); }

.diff-price { text-align: right; font-family: var(--font-num); font-size: 11px; color: var(--text-muted); }

.blocked { margin-top: 10px; font-size: 11.5px; }
.blocked summary { cursor: pointer; color: var(--warning); font-weight: 600; }
.blocked div { margin-top: 6px; color: var(--text-muted); line-height: 1.6; }

.pin-field { margin: 16px 0 0; }
.pin-field input { letter-spacing: 0.25em; }
.pin-note { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-faint); letter-spacing: 0; }

/* Dots without type="password".
 *
 * A password input is what every manager - Chrome and Safari's built-in ones
 * included - watches for, and they offer to fill or save it however
 * autocomplete is set. This PIN is a second factor typed once, not a stored
 * credential, so the box is a plain text input that only looks masked.
 *
 * controls.js checks at load whether the browser can actually do this and
 * switches the field back to type="password" if it cannot: an autofill prompt
 * is a nuisance, a PIN legible over someone's shoulder is not. */
.masked {
    -webkit-text-security: disc;
    text-security: disc;
}

/* ------------------------------------------------------------ responsive -- */
@media (min-width: 600px) {
    :root { --pad: 16px; --gap: 12px; }

    .market-head,
    .market-filters,
    .market-row { grid-template-columns: minmax(0, 1fr) 70px 70px 110px; }
}

@media (min-width: 900px) {
    .page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

    /* The market list is the tall element; the controls stack beside it. */
    .page > section:nth-child(3) { grid-row: 1 / span 3; grid-column: 2; }

    .market-list { max-height: 66vh; }

    .actionbar { justify-content: flex-end; }
    .actionbar-text { flex: none; }
}