/* Orders & Trend page fixes (2026-10-22). Page-scoped and loaded AFTER style.css, so it survives a rewrite of the main stylesheet. */

/* header KPI strip */
#page-trend .kpis { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
#page-trend .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; min-width: 104px; }
#page-trend .kpi .k { color: var(--muted); font-size: 11px; white-space: nowrap; }
#page-trend .kpi .v { font-size: 19px; font-weight: 800; line-height: 1.2; }
#page-trend .kpi.bull .v { color: var(--good); } #page-trend .kpi.bear .v { color: var(--bad); }
#page-trend .kpis-inline { display: flex; gap: 6px; flex-wrap: wrap; }
#page-trend .page-head { align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* the three cards: order + trend on the left, the taller dual entry (with its ladder) on the right, so neither column ends early */
#page-trend .otgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "order dual" "trend dual"; gap: 16px; align-items: start; margin-bottom: 16px; }
#page-trend .otgrid > .stack { display: contents; }
#page-trend #ot-order { grid-area: order; } #page-trend #ot-dual { grid-area: dual; } #page-trend #ot-trend { grid-area: trend; }
@media (max-width: 1180px) { #page-trend .otgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "order" "dual" "trend"; } }

/* trend rows: symbol, call and buttons on one line, the comment under them at full width */
#tx-table .callrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "sym chip btn" "note note note"; gap: 6px 12px; align-items: center; padding: 11px 0; }
#tx-table .callrow > .csym { grid-area: sym; } #tx-table .callrow > div:nth-child(2) { grid-area: chip; }
#tx-table .callrow > .cnote { grid-area: note; } #tx-table .callrow > .cbtn { grid-area: btn; display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
#tx-table .callrow .cbtn button { padding: 4px 9px; font-size: 11.5px; }
@media (max-width: 760px) { #tx-table .callrow { grid-template-columns: 1fr auto; grid-template-areas: "sym chip" "note note" "btn btn"; } #tx-table .callrow > .cbtn { justify-content: flex-start; flex-wrap: wrap; } }

/* the day chips: a little air after the "For" label */
#page-trend .or-days .lab { margin-right: 6px; }
#page-trend .or-days button { padding: 5px 11px; }

/* order-type buttons carry a long label now */
#ot-order .segctl button { white-space: nowrap; font-size: 12px; padding-left: 8px; padding-right: 8px; }

/* order type: the long "Range · wait for rejection" label gets a full row */
#ot-order .fld:has(#or-type) { grid-column: 1 / -1; }
#ot-order .segctl { width: 100%; }

/* bullish / bearish balance and the order status mix */
#page-trend .balance { min-width: 190px; } #page-trend .bal-t { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
#page-trend .bal-t .pos { color: var(--good); } #page-trend .bal-t .neg { color: var(--bad); }
#page-trend .bal-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #262d38; } #page-trend .bal-bar .u { background: var(--good); } #page-trend .bal-bar .d { background: var(--bad); }
#page-trend .mix { margin-top: 8px; min-width: 240px; } #page-trend .mixbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #262d38; gap: 2px; } #page-trend .mixbar i { display: block; }
#page-trend .m-info { background: #4da3ff; } #page-trend .m-warn { background: #d29922; } #page-trend .m-ok { background: #3fb950; } #page-trend .m-bad { background: #f85149; } #page-trend .m-mute { background: #6b7686; }
#page-trend .mixleg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* board: distance to the next trigger, empty states */
#ot-board .nx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ot-board .nx b { font-size: 15px; } #ot-board .bnext { min-width: 0; }
#page-trend .emptystate { color: var(--muted); text-align: center; padding: 30px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; }
#page-trend .ltpbadge { text-align: right; }
#page-trend .tx-msg-bad { color: var(--bad) !important; }

/* queue tables: left-aligned, roomy rows */
#ot-queue th, #ot-queue td { text-align: left; }
#ot-queue th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; }
#ot-queue td { padding: 10px; vertical-align: middle; white-space: normal; }
#ot-queue td.emptyrow { text-align: center; color: var(--muted); padding: 26px 10px; }
#ot-queue .symcell b { font-size: 14px; color: #fff; } #ot-queue .symcell .sid { color: var(--muted); font-size: 11px; margin-left: 6px; }
#ot-queue .or-bot { max-width: 320px; font-size: 11.5px; margin-top: 4px; white-space: normal; }
#ot-queue table { min-width: 0; width: 100%; }