/* ============================================================================
   HINOVEST bridge — maps the Django app's JS-generated DOM (workspace tabs,
   alerts, backdrop, mobile sidebar) onto the Claude Design prototype's
   component look. The prototype CSS (tokens/components/views/screens) stays
   pristine; this file only styles the dynamic hooks the app's JS emits.
   ============================================================================ */

/* ---- Workspace tabs (app-shell.js injects <a class="workspace-tab">) ------- */
.tabs-bar, .tabs { gap: var(--space-1); }
.tabs .workspace-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-3);
    /* Chrome's strip, both directions: a few tabs spread out to fill the bar
       (up to a tab's own maximum, which is why three of them still stop short
       of the far edge), and as they multiply they give up that width again
       rather than running off the end. The floor is a tab you can still read
       -- icon, about eight characters, close button. Squeezing past that
       turned eight journals into eight single-letter stubs, which is worse
       than scrolling for them; below the floor the bar scrolls instead, which
       is what the wheel handler in app-shell.js is for. */
    /* basis 0, so every tab is the same width as its neighbour rather than
       keeping a share of its own label's length. */
    flex: 1 1 0;
    min-width: 120px;
    max-width: 220px;
    /* A tab looks like a tab before you touch it: its own faint box on the
       bar, which hover and the open tab then brighten. The line is always
       there — only its colour changes — so nothing beside it moves. */
    border: 1px solid var(--color-border-subtle);
    border-bottom: 0;
    background: var(--color-surface-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    text-decoration: none;
    transition: color 110ms ease, background 110ms ease, border-color 110ms ease;
}
/* The label is the only part that may be cut; the icon and the close button
   keep their size all the way down. It also takes the tab's spare width rather
   than leaving it as a gap, so a wide tab is a wide label with the close button
   at the far end, not a short label adrift in the middle. */
.tabs .workspace-tab > span {
    flex: 1; min-width: 0; text-align: start;
    overflow: hidden; text-overflow: ellipsis;
}
.tabs .workspace-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-2);
    border-color: var(--color-border-mid);
}
.tabs .workspace-tab.is-active {
    color: var(--color-text-primary);
    background: var(--color-surface-1);
    border-color: var(--color-border-mid);
}
.tabs .workspace-tab.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    /* Flush with the tab's own bottom edge, not a pixel past it: the strip
       clips its overflow now, and that pixel was outside the clip. */
    bottom: 0;
    height: 2px;
    background: var(--color-accent-primary);
    border-radius: 2px 2px 0 0;
}
.tabs .workspace-tab .ico { font-size: 14px; opacity: 0.7; flex: 0 0 auto; }
.tabs .workspace-tab.is-active .ico { opacity: 1; color: var(--color-accent-glow); }
.tabs .workspace-tab.is-dragging { opacity: 0.5; }
.tabs .workspace-tab.is-drop-target { background: var(--color-surface-2); }
.tabs .workspace-tab__close {
    position: relative;
    width: 16px;
    height: 16px;
    /* The UA gives buttons padding: 1px 6px. With border-box that shrinks the content
       area to 4x14, so place-items: center centred the glyph in the padding box rather
       than the button. */
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-tertiary);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    opacity: 0;
    transition: opacity 110ms ease, background 110ms ease;
}
/* The visible glyph stays 16px so the tab strip keeps its density; the actual
 * target grows to the WCAG 2.5.8 minimum of 24x24 via a pseudo-element. */
.tabs .workspace-tab__close::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}
.tabs .workspace-tab__close .bi { display: block; }
.tabs .workspace-tab:hover .workspace-tab__close,
.tabs .workspace-tab.is-active .workspace-tab__close { opacity: 1; }
.tabs .workspace-tab__close:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

/* ---- Data tables: force the prototype .dt graphite palette ----------------
   The legacy theme.css shell rules (.trade-management-shell--dark …) are more
   specific than table.dt and still carry slate/navy tints. Re-assert the exact
   prototype colors with a higher-specificity selector (adds .dt) so the trades
   and reports tables read as clean graphite. ------------------------------- */
.trade-management-shell .trade-management-table.dt thead th,
.reports-page table.dt thead th {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border-mid);
}
.trade-management-shell .trade-management-table.dt tbody td,
.reports-page table.dt tbody td {
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-subtle);
}
.trade-management-shell .trade-management-table.dt tbody tr:hover td,
.reports-page table.dt tbody tr:hover td {
    background: var(--color-surface-2);
}
.trade-management-shell .trade-management-table.dt tbody tr.is-row-selected td {
    background: var(--color-accent-muted);
}
.trade-management-shell .trade-management-table.dt tbody tr:nth-child(even) td {
    background: var(--color-surface-1);
}
.trade-management-shell .trade-management-table.dt tbody tr:nth-child(even):hover td {
    background: var(--color-surface-2);
}
/* sticky action column */
.trade-management-shell .trade-management-table.dt .is-sticky-end {
    background: var(--color-surface-inset);
    border-inline-start: 1px solid var(--color-border-subtle);
}
.trade-management-shell .trade-management-table.dt thead .is-sticky-end {
    background: var(--color-surface-2);
}
.trade-management-shell .trade-management-table.dt tbody tr:hover .is-sticky-end {
    background: var(--color-surface-2);
}
/* surrounding shell + wrap = flat graphite, no legacy navy gradient */
.trade-management-shell,
.trade-management-shell--dark {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}
.trade-management-shell .trade-management-table-wrap {
    background: var(--color-surface-inset);
    border-color: var(--color-border-subtle);
}
.trade-management-shell .trade-management-table-head,
.trade-management-shell .trade-management-toolbar {
    background: transparent;
}

/* ---- Mobile sidebar drawer + backdrop ------------------------------------- */
.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}
.app-shell.is-sidebar-open ~ .app-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
    .shell .sidebar {
        transform: translateX(-100%);
        transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    html[dir="rtl"] .shell .sidebar { transform: translateX(100%); }
    /* The RTL rule above is (0,3,1) and outweighed the plain open rule (0,3,0),
       so in Persian the drawer never left its off-canvas position. */
    .app-shell.is-sidebar-open .sidebar,
    html[dir="rtl"] .app-shell.is-sidebar-open .sidebar { transform: translateX(0); }
    .shell .main { margin-inline-start: 0; }
}

/* ---- Server-rendered alerts ----------------------------------------------- */
.app-alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--color-border-mid);
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}
.app-alert--success { border-color: var(--color-profit-muted); background: var(--color-profit-muted); }
.app-alert--error, .app-alert--danger { border-color: var(--color-loss-muted); background: var(--color-loss-muted); color: var(--color-loss); }
.app-alert--warning { border-color: var(--color-warning-muted); background: var(--color-warning-muted); }
.app-alert.is-dismissing { opacity: 0; transition: opacity 320ms ease; }

/* Collapsed sidebar: hide labels/text (prototype parity for app hooks) */
.shell.is-collapsed .nav__label,
.shell.is-collapsed .userpill__meta,
.shell.is-collapsed .userpill__logout { display: none; }
.shell.is-collapsed .userpill { justify-content: center; padding-inline: 0; }

.mobile-only { display: none; }
@media (max-width: 900px) { .mobile-only { display: inline-grid; } .desktop-only { display: none; } }

/* ---- Topbar: keep on one row, never overflow horizontally ----------------- *
 * overflow-x: clip rather than hidden — `hidden` on one axis forces the other to
 * become a scroll container, which vertically clipped the global-search dropdown at
 * the topbar's bottom edge. `clip` constrains only the axis it names. */
.topbar { overflow-x: clip; overflow-y: visible; }
.crumb { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar__search { width: auto; flex: 0 1 280px; min-width: 0; }
.topbar__theme,
.topbar__language { flex: 0 0 auto; }

/* Persian text renders in Vazirmatn everywhere, not just where body's font-family
   wins: headings, buttons and cards resolve --font-display, so the token itself
   has to switch or Inter falls back to a system Arabic face mid-page. */
html[dir="rtl"] {
    --font-display: "Vazirmatn", "Inter", system-ui, -apple-system, sans-serif;
}

/* Inter carries no Persian glyphs, so anything reaching for --font-display in RTL
   fell back to a system font. Retarget the token instead of the body element. */
html[dir="rtl"] {
    --font-display: "Vazirmatn", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Vazirmatn goes BEHIND JetBrains Mono, never in front of it: digits still
       come from the mono face, so tabular-nums holds in every price column, and
       only the glyphs it lacks — the Persian ones — fall through. Mono boxes
       that sometimes hold a word instead of a figure ("محقق‌شده" under a KPI)
       were otherwise assembled letter by letter out of a last-resort face. */
    --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Vazirmatn", monospace;
}

/* Set by the head script, cleared once main.js has translated the page. Keeps a
   load from flashing the server's English markup before the Persian pass runs. */
html.i18n-pending body { visibility: hidden; }

/* SVG text-anchor is direction-aware: under an inherited RTL direction, "end"
   anchors on the left and "start" on the right, so every axis label rendered
   mirrored and the edge ones spilled out of the card. Plot geometry is drawn
   left-to-right in all languages, so the drawing surface stays LTR. */
html[dir="rtl"] .chart-svg,
html[dir="rtl"] .reports-chart,
html[dir="rtl"] .jtile__spark { direction: ltr; }

/* A figure is a left-to-right run whatever the surrounding language: without
   this, bidi reordering pushes a leading "-" or "$" to the right-hand end of
   the number. isolate keeps the number from reordering its neighbours too. */
html[dir="rtl"] .mono,
html[dir="rtl"] .num,
html[dir="rtl"] .chart-stat .v,
html[dir="rtl"] .chart-tip b,
html[dir="rtl"] .metric-row__v,
html[dir="rtl"] .kpi__value,
html[dir="rtl"] .calc-hero__v,
html[dir="rtl"] .calc-cell .v,
html[dir="rtl"] .acct-stat .v:not(.v--text),
html[dir="rtl"] .preview-strip .pv .v,
html[dir="rtl"] .ref-stat-card__value,
html[dir="rtl"] .cal-day__pnl,
html[dir="rtl"] .radar__value,
html[dir="rtl"] .range-val,
html[dir="rtl"] .toolbar__count b,
html[dir="rtl"] table.dt td.num,
html[dir="rtl"] .cell-mono,
html[dir="rtl"] .cell-pnl {
    direction: ltr;
    unicode-bidi: isolate;
}

/* A number column's header carries .num too, but it holds a Persian phrase, not
   a figure — left-to-right it reads back to front. */
html[dir="rtl"] table.dt thead th.num { direction: inherit; unicode-bidi: normal; }

html[dir="rtl"] body {
    font-family: var(--font-display);
}

html[dir="rtl"] .bi-arrow-right::before { transform: scaleX(-1); }

/* Bootstrap ships .bi::before { vertical-align: -0.125em } to sit icons on the
   Latin descent; Vazirmatn text centers on its own box, so in Persian every
   icon in a flex row rode ~2px low. Move the compensation from the glyph
   (::before, which shifts inside flex items too) onto the <i> itself, which
   only matters in inline flow — flex rows now center the glyph exactly, and
   plain inline icons keep their old position. */
html[dir="rtl"] .bi::before { vertical-align: 0; }
html[dir="rtl"] .bi { vertical-align: -0.125em; }

/* Pure-Latin runs lose their vertical center in Vazirmatn: it reserves a deep
   descent for Persian, so descender-less Latin caps ride ~2px high in their
   box. Elements whose text is always Latin render in Inter instead; the فا
   toggle stays Vazirmatn, which centers Persian correctly. */
html[dir="rtl"] .brand__mark,
html[dir="rtl"] .brand__word,
html[dir="rtl"] [data-lang-option="en"] {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}
html[dir="rtl"] .topbar__search input { text-align: right; }
html[dir="rtl"] .auth-shell { direction: rtl; }

.auth-language-switch {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 10;
}

.topbar__language button,
.auth-language-switch button {
    min-width: 42px;
    justify-content: center;
}

/* Free up room on narrower viewports instead of overflowing */
@media (max-width: 1180px) {
    .topbar__theme button span { display: none; }      /* theme switch → icon-only */
    .topbar__theme button,
    .topbar__language button { padding-inline: 9px; }
}
@media (max-width: 1000px) {
    .topbar__search { display: none; }                 /* drop the decorative search */
}
@media (max-width: 820px) {
    .crumb .sep:first-of-type, .crumb span:nth-of-type(1) { display: none; } /* trim "HINOVEST /" prefix */
}
/* The language switch used to be dropped below 700px: two labelled segments
   were ~70px of non-shrinkable topbar, and at 320px the staff row overflowed
   and clipped the bell. It is one 34px icon button now, the same size as the
   three beside it, so it fits and stays. */

/* ---- Trades ledger ------------------------------------------------------- */
.trades-page {
    min-width: 0;
}

.trades-page .page-head {
    margin-bottom: var(--space-6);
}

.trades-page .page-head h1 {
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.trades-page .page-head__sub {
    max-width: 620px;
}

.trades-page .page-head__actions {
    align-self: end;
}

/* Height and min-width now come from .page-head__actions in components.css, so
   every page's header row is one row of controls rather than three sizes. */
.trades-page .page-head__actions .btn {
    justify-content: center;
}

.trades-page .trade-management-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    background: var(--color-surface-1);
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.trades-page .trade-management-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 16px 8px;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-1);
}

.trades-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(290px, 30vw);
    height: 36px;
    padding: 0 12px;
    color: var(--color-text-tertiary);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.trades-search:focus-within {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.trades-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: 500 var(--text-xs)/1 var(--font-display);
}

.trades-search input::placeholder {
    color: var(--color-text-tertiary);
}

.trade-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.trade-filter-group > span {
    margin: 0 2px 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.trade-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.trade-filter-chip:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-2);
}

.trade-filter-chip.is-active {
    color: var(--color-accent-glow);
    background: var(--color-accent-muted);
    border-color: var(--color-accent-border);
}

.trade-management-toolbar__spacer {
    flex: 1;
}

.trade-view-switch {
    display: flex;
    padding: 3px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
}

.trade-view-switch button {
    display: grid;
    width: 32px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
}

.trade-view-switch button.is-active {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.trade-management-subtoolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.trades-page .column-visibility__menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.trades-page .trade-management-bulk-bar {
    margin: 10px 16px 0;
}

.trades-page .trade-management-table-wrap {
    max-height: min(64vh, 720px);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-surface-inset);
}

/* The outer .trade-management-table-wrap (max-height + overflow:auto) is the sole
   scroll container, so the sticky <thead> freezes against it on vertical scroll. */
.trades-page .trade-management-table-wrap .table-responsive {
    overflow: visible;
}

.trades-page .trade-management-table {
    width: 100%;
    min-width: 990px;
    table-layout: auto;
}

.trades-page .trade-management-table.dt thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 40px;
    padding-inline: 14px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

/* Frozen leading row-number column (sticky on horizontal scroll). */
.trades-page .trade-management-table.dt .trade-rownum-cell {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    width: 44px;
    min-width: 44px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-surface-inset);
}
.trades-page .trade-management-table.dt thead .trade-rownum-cell {
    z-index: 4;
    background: var(--color-surface-2);
}
.trades-page .trade-management-table.dt tbody tr:hover .trade-rownum-cell {
    background: var(--color-surface-2);
}

.trades-page .trade-management-table.dt tbody td {
    height: 44px;
    padding: 8px 14px;
    font-size: var(--text-sm);
    background: var(--color-surface-inset);
}

.trades-page [data-density="compact"] .trade-management-table.dt tbody td {
    height: 36px;
    padding-block: 4px;
}

/* Numeric columns right-align with tabular mono digits (matches HTML reference .num). */
.trades-page .trade-management-table [data-column="entry_price"],
.trades-page .trade-management-table [data-column="take_profit"],
.trades-page .trade-management-table [data-column="win_pip"],
.trades-page .trade-management-table [data-column="rr"],
.trades-page .trade-management-table [data-column="commission"],
.trades-page .trade-management-table [data-column="pnl_pure"],
.trades-page .trade-management-table [data-column="balance"] {
    text-align: end;
}

/* Profit/loss tint on P&L and pip cells — must out-specify the generic
   `.trade-management-shell .trade-management-table.dt tbody td` color rule. */
.trades-page .trade-management-table.dt tbody td.cell-pnl.is-pos {
    color: var(--color-profit);
}
.trades-page .trade-management-table.dt tbody td.cell-pnl.is-neg {
    color: var(--color-loss);
}

/* Sort indicators on sortable headers (matches HTML reference .sort-ind). */
.trades-page .trade-management-table.dt thead th.is-sortable {
    cursor: pointer;
}
.trades-page .trade-management-table.dt thead th.is-sortable:hover {
    color: var(--color-text-primary);
}
.trades-page .trade-management-table.dt thead th.is-sortable::after {
    content: "";
    margin-inline-start: 4px;
    font-size: 10px;
    opacity: 0;
}
.trades-page .trade-management-table.dt thead th.is-sorted-asc,
.trades-page .trade-management-table.dt thead th.is-sorted-desc {
    color: var(--color-text-primary);
}
.trades-page .trade-management-table.dt thead th.is-sorted-asc::after {
    content: "▲";
    opacity: 1;
    color: var(--color-accent-primary);
}
.trades-page .trade-management-table.dt thead th.is-sorted-desc::after {
    content: "▼";
    opacity: 1;
    color: var(--color-accent-primary);
}

.trades-page .trade-management-table.dt tbody tr:nth-child(even) td {
    background: var(--color-surface-inset);
}

.trades-page .trade-management-table.dt tbody tr:hover td,
.trades-page .trade-management-table.dt tbody tr:nth-child(even):hover td {
    background: var(--color-surface-2);
}

.trades-page .trade-management-table [data-column="date_open"] {
    min-width: 220px;
}

.trades-page .trade-management-table [data-column="status"] {
    min-width: 110px;
}

.trades-page .trade-management-table [data-column="entry_price"],
.trades-page .trade-management-table [data-column="take_profit"],
.trades-page .trade-management-table [data-column="balance"] {
    min-width: 112px;
}

.trades-page .trade-management-table [data-column="actions"] {
    min-width: 76px;
    width: 76px;
}

.trade-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 26px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

/* Same rule as .badge--long/--short: direction never borrows the money colors. */
.trade-direction--long {
    color: var(--color-info);
    background: var(--color-info-muted);
}

.trade-direction--short {
    color: var(--color-warning);
    background: var(--color-warning-muted);
}

.trade-identity__copy {
    display: grid;
    gap: 3px;
}

.trade-identity__copy strong {
    color: var(--color-text-primary);
    font: 600 14px/1.1 var(--font-mono);
}

.trade-identity__copy small {
    color: var(--color-text-tertiary);
    font-size: 11px;
}

.trade-setup {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

.trades-page .cell-mono,
.trades-page .cell-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.trades-page .cell-pnl {
    font-weight: var(--weight-semibold);
}

.trade-cost {
    color: var(--color-text-tertiary) !important;
}

/* Add-trade modal: the card itself never scrolls (head + footer always visible);
   only the inputs column scrolls internally, like the HTML reference. The card
   height is bounded by capping the inputs column, so the whole popup never grows
   past the viewport. */
.trade-editor-modal .modal-dialog-scrollable { height: auto; }
.trade-editor-modal .modal-dialog-scrollable .modal-content {
    max-height: 90vh;
    overflow: hidden;
}
.trade-editor-modal .modal__body { padding: 0; }
.trade-editor-modal .trade-form__inputs { max-height: calc(90vh - 172px); }
.trade-editor-modal .trade-form__calc { max-height: calc(90vh - 172px); overflow-y: auto; }

/* Strategy #-autocomplete under the comment field. */
.strategy-suggest {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    min-width: 180px;
    margin-top: 2px;
    padding: 4px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Cap to ~5 rows and scroll the rest so long strategy lists stay usable. */
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.strategy-suggest[hidden] { display: none; }
.strategy-suggest button { flex: 0 0 auto; }
.strategy-suggest button {
    text-align: start;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
}
.strategy-suggest button:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

/* The HTML `hidden` attribute must always win — several components (.btn, .empty,
   .jtile__chart, wizard step buttons) set their own display and were overriding it,
   leaving "hidden" elements visible (e.g. the wizard Create button on every step). */
[hidden] { display: none !important; }

/* Journal colour swatch picker. */
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: border-color 110ms ease; }
.color-swatch:hover { border-color: var(--color-border-strong); }
.color-swatch.is-on { border-color: var(--color-text-primary); box-shadow: 0 0 0 2px var(--color-surface-1); }

/* Trade detail spec grid. */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.spec-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-inset); }
.spec-cell .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.spec-cell .v { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.spec-cell .v.mono { font-family: var(--font-mono); }

/* Global toast stack (success/error/info feedback for user actions). */
.app-toast-host {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-mid);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(8px);
    /* 160ms matches the modal enter — one duration family for transients. */
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: auto;
}
.app-toast.is-in { opacity: 1; transform: none; }
.app-toast i { font-size: 15px; }
.app-toast--success i { color: var(--color-profit); }
.app-toast--error i { color: var(--color-loss); }
.app-toast--info i { color: var(--color-accent-primary); }

.trade-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 100ms ease;
}

.trade-management-table tbody tr:hover .trade-row-actions,
.trade-row-actions:focus-within,
.trade-management-table tbody tr.is-row-selected .trade-row-actions {
    opacity: 1;
}

.trade-row-actions a {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: var(--radius-xs);
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.trade-row-actions a:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.trade-row-actions a.is-danger:hover {
    color: var(--color-loss);
}

.trades-page .trade-management-table.dt .is-sticky-end {
    background: var(--color-surface-inset);
}

.trades-page .trade-management-pagination {
    min-height: 58px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-surface-1);
}

.trades-page .trade-management-pagination__summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
}

.trades-page .trade-management-pagination__nav {
    gap: 16px;
}

.trade-management-pagination__total {
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.trade-management-pagination__total strong {
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}

.trades-page .pagination {
    gap: 5px;
}

.trades-page .pagination .page-link {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
    font: 500 12px/1 var(--font-mono);
}

.trades-page .pagination .page-item.active .page-link {
    color: var(--color-accent-glow);
    background: var(--color-accent-muted);
    border-color: var(--color-accent-border);
}

.trades-page .pagination .page-item.disabled .page-link {
    opacity: 0.38;
}

@media (max-width: 1180px) {
    .trades-page .trade-management-toolbar {
        flex-wrap: wrap;
    }
    .trades-search {
        width: min(360px, 100%);
        flex: 1 1 280px;
    }
    .trade-management-toolbar__spacer {
        display: none;
    }
    .trade-view-switch {
        margin-inline-start: auto;
    }
}

@media (max-width: 720px) {
    .trades-page .page-head {
        align-items: flex-start;
    }
    .trades-page .page-head h1 {
        font-size: 30px;
    }
    .trades-page .page-head__actions {
        width: 100%;
    }
    .trades-page .page-head__actions .btn {
        flex: 1;
    }
    .trades-search {
        flex-basis: 100%;
        width: 100%;
    }
    .trade-filter-group {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .trade-filter-group > span {
        min-width: 38px;
    }
    .trade-view-switch {
        display: none;
    }
    .trades-page .trade-management-pagination {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .trades-page .trade-management-pagination__nav {
        width: 100%;
        justify-content: space-between;
    }
}

/* ---- Site settings ------------------------------------------------------- */
.site-settings-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.site-settings-page .settings-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 30px;
}

.site-settings-page .settings-nav {
    top: calc(var(--topbar-h) + 20px);
    gap: 3px;
}

.site-settings-page .settings-nav a {
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px;
    text-decoration: none;
}

.site-settings-page .settings-nav a.is-active {
    background: var(--color-accent-muted);
    color: var(--color-accent-glow);
}

.site-settings-page .settings-main {
    padding-bottom: 40px;
}

.site-settings-page .settings-section {
    scroll-margin-top: calc(var(--sticky-h) + var(--space-4));
}

.site-settings-page .settings-section__head .eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-tertiary);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.site-settings-page .settings-section__head h2 {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.site-settings-page .settings-section__head p {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.site-settings-page .theme-grid {
    gap: 12px;
}

.site-settings-page .theme-card {
    min-height: 142px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--color-surface-1);
}

.site-settings-page .theme-card__swatch {
    height: 62px;
    margin-bottom: 12px;
    border-radius: var(--radius);
}

.site-settings-page .theme-card__name {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .theme-card__desc {
    margin-top: 3px;
    font-size: 11px;
}

.site-settings-page .theme-card__check {
    top: 12px;
    inset-inline-end: 12px;
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.site-settings-form {
    display: block;
}

.site-settings-page .settings-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.site-settings-page .list-editor {
    min-height: 162px;
    padding: 16px;
    gap: 12px;
    border-radius: var(--radius);
    background: var(--color-surface-1);
}

.site-settings-page .list-editor__head .name {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .list-editor__head .name .ico {
    color: var(--color-text-tertiary);
}

.site-settings-page .list-editor__count {
    color: var(--color-text-tertiary);
    font-size: 10px;
}

.site-settings-page .searchable-multi-select__control {
    min-height: 64px;
    padding: 7px;
    border-color: var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
    box-shadow: none;
}

.site-settings-page .searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    background: var(--color-surface-inset);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.site-settings-page .searchable-multi-select__selected {
    align-content: flex-start;
    gap: 5px;
    min-height: 48px;
}

.site-settings-page .searchable-multi-select__chip {
    min-height: 28px;
    padding-block: 3px; padding-inline: 10px 7px;
    border-color: var(--color-border-subtle);
    border-radius: 7px;
    background: var(--color-surface-2);
    font-size: 11px;
}

.site-settings-page .searchable-multi-select__chip i {
    color: var(--color-text-tertiary);
}

.site-settings-page .searchable-multi-select__search {
    flex: 1 1 68px;
    min-width: 68px;
    min-height: 27px;
    padding-inline: 3px;
    font-size: 11px;
}

.site-settings-page .searchable-multi-select__search::placeholder {
    color: var(--color-text-tertiary);
}

.site-settings-page .searchable-multi-select__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: 190px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-float);
}

.site-settings-page .searchable-multi-select__option,
.site-settings-page .searchable-multi-select__option-remove,
.site-settings-page .searchable-multi-select__no-results {
    min-height: 30px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-1);
    font-size: 11px;
}

.site-settings-page .settings-behavior {
    display: grid;
    gap: 12px;
}

.site-settings-page .toggle-row {
    min-height: 82px;
    padding: var(--space-4);
    border-radius: var(--radius);
}

.site-settings-page .toggle-row__copy strong {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .toggle-row__copy span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
}

.site-settings-page .switch {
    width: 45px;
    height: 25px;
    flex-basis: 45px;
}

.site-settings-page .switch::after {
    width: 19px;
    height: 19px;
}

.site-settings-page .switch.is-on::after {
    transform: translateX(20px);
}

html[dir="rtl"] .site-settings-page .switch.is-on::after {
    transform: translateX(-20px);
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

@media (max-width: 1050px) {
    .site-settings-page .settings-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 820px) {
    .site-settings-page .settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* One row of chips above the content: a vertical rail would eat the screen. */
    .site-settings-page .settings-nav {
        position: sticky;
        top: var(--topbar-h);
        z-index: 12;
        max-height: none;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 8px 0;
        overflow-x: auto;
        overflow-y: visible;
        background: var(--color-void);
    }
    .site-settings-page .settings-nav a {
        flex: 0 0 auto;
    }
    .site-settings-page .settings-nav__label {
        flex: 0 0 auto;
        align-self: center;
        margin-block: 0; margin-inline: var(--space-3) var(--space-1);
    }
    .site-settings-page .settings-filter {
        flex: 0 0 200px;
        margin-bottom: 0;
    }
}

@media (max-width: 620px) {
    .site-settings-page .theme-grid,
    .site-settings-page .settings-lists {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-settings-page .toggle-row {
        align-items: flex-start;
    }
    .settings-section__head { padding: var(--space-3) var(--space-4); }
    .settings-section__body { padding: var(--space-4); }
}

/* ============================================================================
   JOURNAL BUILDER WIZARD  (jb-*)
   Moved here from views.css so views.css stays as the verbatim prototype file.
   ============================================================================ */

/* Modal override — remove default padding so our layout fills edge-to-edge */
.journal-create-modal .modal-content { padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
.journal-create-modal .modal-dialog { max-width: 820px; }

/* ── XLSX drop zone ── */
.jb-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 200px; border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-lg); cursor: pointer; text-align: center;
    padding: var(--space-8); margin-top: var(--space-2);
    background: var(--color-surface-inset);
    transition: border-color 150ms, background 150ms;
}
.jb-drop:hover, .jb-drop.is-over { border-color: var(--color-accent-glow); background: var(--color-accent-muted); }
.jb-drop__input { display: none; }
.jb-drop__icon { font-size: 42px; color: var(--color-text-tertiary); margin-bottom: var(--space-3); display: block; }
.jb-drop:hover .jb-drop__icon, .jb-drop.is-over .jb-drop__icon { color: var(--color-accent-glow); }
.jb-drop__primary { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-primary); margin: 0 0 var(--space-1); }
.jb-drop__secondary { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.jb-drop__link { color: var(--color-accent-glow); text-decoration: underline; }
.jb-drop__hint { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0; }
.jb-drop__picked { display: flex; align-items: center; gap: var(--space-3); }
.jb-drop__name { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--weight-medium); }
.jb-drop__clear {
    background: none; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--color-text-tertiary); font-size: var(--text-base);
    line-height: 1; padding: 2px 8px;
    transition: color 120ms, border-color 120ms;
}
.jb-drop__clear:hover { color: var(--color-loss); border-color: var(--color-loss); }

/* ============================================================================
   BOOTSTRAP COMPATIBILITY — views.css defines .modal-backdrop with opacity:0
   and display:grid. Bootstrap appends its backdrop/modal as direct body children,
   so body > selectors restore the correct Bootstrap behavior.
   ============================================================================ */

/* Bootstrap's dimming backdrop (body child, NOT our views.css modal-backdrop wrapper) */
body > .modal-backdrop {
    position: fixed; top: 0; left: 0;
    z-index: 1050; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.56);
    display: block !important;
    opacity: 0;
    pointer-events: auto;
    backdrop-filter: none;
    padding: 0; transform: none; grid-template-columns: unset;
    transition: opacity 0.15s linear;
}
body > .modal-backdrop.show { opacity: 1; }

/* Bootstrap's outer .modal container (hoisted to body by main.js) */
body > .modal {
    position: fixed; top: 0; left: 0;
    z-index: 1055; width: 100%; height: 100%;
    max-height: none; overflow-x: hidden; overflow-y: auto; outline: 0;
    display: none !important;
    background: transparent; border: none; border-radius: 0;
    box-shadow: none; transform: none; flex-direction: unset;
    padding: 0; transition: opacity 0.15s linear;
}
body > .modal.show { display: block !important; }

/* Bootstrap modal inner structure */
.modal-dialog {
    position: relative; width: auto;
    margin: 1.75rem auto; pointer-events: none;
}
@media (min-width: 576px) { .modal-dialog { max-width: 500px; } }
.modal-xl { max-width: 1140px; }
.modal-dialog-scrollable { height: calc(100% - 3.5rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow-y: auto; }
body > .modal.show .modal-dialog { pointer-events: auto; }

.modal-content {
    position: relative; display: flex; flex-direction: column; width: 100%;
    pointer-events: auto;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-lg);
    outline: 0;
}
.modal-header {
    display: flex; flex-shrink: 0; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.modal-title {
    margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}
.modal-body { position: relative; flex: 1 1 auto; padding: var(--space-4) var(--space-5); overflow-y: auto; }
.modal-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--space-2); padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

/* Bootstrap close button (used in trade modal and journal modal) */
.btn-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa1ab'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0; border-radius: var(--radius); opacity: 0.6; cursor: pointer; color: transparent;
}
.btn-close:hover { opacity: 1; }

/* Bootstrap pagination structure (JS in trade-editor.js generates these) */
.pagination { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }

/* Legacy button classes used in trade_modal_content.html */
.outline-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 38px; padding: 0 var(--space-4);
    border: 1px solid var(--color-border-mid); border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-secondary);
    font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
    transition: background 110ms ease, color 110ms ease, scale 110ms ease;
}
.outline-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.primary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 38px; padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-accent-primary); color: var(--color-accent-ink);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    transition: background 110ms ease, scale 110ms ease;
}
.primary-btn:hover { background: var(--color-accent-glow); }
/* Same press feedback as .btn, so the legacy modal buttons feel like the rest. */
.outline-btn:active, .primary-btn:active { scale: 0.96; }
@media (prefers-reduced-motion: reduce) { .outline-btn:active, .primary-btn:active { scale: none; } }

/* Bootstrap utility classes used in templates */
.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.table-responsive { overflow-x: auto; }
.align-middle td, .align-middle th { vertical-align: middle; }

/* form-control: remap Bootstrap's input class to the new design tokens */
.form-control {
    display: block; width: 100%;
    height: 38px; padding: 0 var(--space-3);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--text-sm); font-family: inherit;
    outline: none; transition: border-color 110ms ease, box-shadow 110ms ease;
}
.form-control:focus {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    color: var(--color-text-primary); background: var(--color-surface-inset);
    outline: none;
}
.form-control::placeholder { color: var(--color-text-tertiary); }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }
/* A textarea inherits the 38px input height above and then fights its own rows
   attribute: a five-line block renders one line tall with two scrollbars and a
   resize grip on top of them. One rule here instead of a per-page override,
   because every textarea in the app is a .form-control. */
textarea.form-control {
    height: auto;
    min-height: 82px;
    padding-block: var(--space-3);
    line-height: 1.6;
    resize: vertical;
}
.form-control[type="date"], .form-control[type="time"] {
    font-family: var(--font-mono); cursor: pointer;
}
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button { opacity: 0; }

/* ---- Enhanced form controls ---------------------------------------------- */
.custom-select {
    position: relative;
    width: 100%;
}
.custom-select__native,
.searchable-multi-select__source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}
.custom-select__trigger {
    width: 100%;
    min-height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: start;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.custom-select__trigger:hover,
.custom-select.is-open .custom-select__trigger {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    background: var(--color-surface-2);
}
.custom-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Option text is often mixed — "Zephyr — زن، روشن و سریع" — and one base
       direction gets one of the two halves wrong. */
    unicode-bidi: plaintext;
}
.custom-select__trigger i {
    color: var(--color-text-tertiary);
    transition: transform 120ms ease;
}
.custom-select.is-open .custom-select__trigger i {
    transform: rotate(180deg);
}
.custom-select__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 45;
    display: none;
    gap: 4px;
    max-height: 190px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-lg);
}
.custom-select.is-open .custom-select__menu {
    display: grid;
}
/* An editable list: every option carries an × and the menu ends in a row you
   can type into. The × only appears on the row under the cursor — eighteen
   little crosses down an open menu is a list that looks like it is asking to be
   emptied. */
.custom-select__option { display: flex; align-items: center; gap: var(--space-2); }
.custom-select__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.custom-select__remove {
    flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: var(--radius-xs);
    display: grid; place-items: center;
    color: var(--color-text-tertiary); font-size: 14px; line-height: 1;
    opacity: 0; transition: opacity 110ms ease, background 110ms ease, color 110ms ease;
}
.custom-select__option:hover .custom-select__remove,
.custom-select__remove:focus-visible { opacity: 1; }
.custom-select__remove:hover { background: var(--color-loss-muted); color: var(--color-loss); }
.custom-select__add {
    display: flex; align-items: center; gap: 4px;
    margin-top: 4px; padding-top: 6px;
    border-top: 1px solid var(--color-border-subtle);
}
.custom-select__add input {
    flex: 1; min-width: 0; height: 30px; padding: 0 var(--space-2);
    border: 1px solid var(--color-border-mid); border-radius: var(--radius-xs);
    background: var(--color-surface-inset); color: var(--color-text-primary);
    font-size: var(--text-xs); outline: none;
}
.custom-select__add input:focus { border-color: var(--color-accent-border); }
.custom-select__add-btn {
    flex: 0 0 30px; height: 30px;
    border: 1px solid var(--color-accent-border); border-radius: var(--radius-xs);
    background: var(--color-accent-muted); color: var(--color-accent-primary);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.custom-select__add-btn:hover { background: var(--color-accent-primary); color: var(--color-accent-ink); }

.custom-select__option {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
    text-align: start;
    cursor: pointer;
    unicode-bidi: plaintext;
}
.custom-select__option:hover,
.custom-select__option.is-selected {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}
.custom-select__option:disabled {
    opacity: 0.5;
    cursor: default;
}

.searchable-multi-select {
    position: relative;
    width: 100%;
}
/* The whole control is the click target — it opens the menu and focuses the
   search box — so it says so: a pointer, a hover edge, and the accent ring while
   the menu is open. Surface-1 rather than the inset well, because the typing box
   inside it is the sunken thing now. */
.searchable-multi-select__control {
    position: relative;
    min-height: 52px;
    padding: 8px;
    padding-inline-end: 34px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.searchable-multi-select__control:hover { border-color: var(--color-border-strong); }
.searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
/* The chevron every other dropdown on the page has, so this reads as one. */
.searchable-multi-select__control::after {
    content: "";
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 12px;
    width: 8px; height: 8px;
    border-inline-end: 2px solid var(--color-text-tertiary);
    border-block-end: 2px solid var(--color-text-tertiary);
    transform: rotate(45deg);
    transition: transform 160ms ease;
    pointer-events: none;
}
.searchable-multi-select.is-open .searchable-multi-select__control::after {
    transform: rotate(225deg);
    border-color: var(--color-accent-primary);
}
.searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.searchable-multi-select__selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
}
.searchable-multi-select__empty {
    padding: 5px 2px;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}
.searchable-multi-select__chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.searchable-multi-select__chip i {
    color: var(--color-text-tertiary);
}
/* A box, not a hint. This used to be a borderless transparent input floating
   among the chips, so the one part of the control you are meant to type in was
   the only part that did not look like anything. */
.searchable-multi-select__search {
    flex: 1 1 150px;
    min-width: 120px;
    min-height: 30px;
    padding: 3px var(--space-3);
    border: 1px dashed var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    outline: 0;
    transition: border-color 120ms ease, background 120ms ease;
}
.searchable-multi-select__search::placeholder { color: var(--color-text-tertiary); }
.searchable-multi-select__search:hover { border-color: var(--color-border-strong); }
.searchable-multi-select__search:focus {
    border-style: solid;
    border-color: var(--color-accent-border);
    background: var(--color-surface-2);
}
.searchable-multi-select__menu {
    max-height: 190px;
    overflow-y: auto;
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-subtle);
}
.searchable-multi-select__menu[hidden] {
    display: none;
}
.searchable-multi-select__option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}
.searchable-multi-select__option,
.searchable-multi-select__option-remove,
.searchable-multi-select__no-results {
    min-height: 32px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    text-align: start;
}
.searchable-multi-select__option {
    width: 100%;
}
/* The "add what you just typed" row. It is the one row in the menu that is an
   action rather than a choice, so it says so: accent-tinted, with the plus in
   front of the words. */
.searchable-multi-select__option--add {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-accent-muted);
    color: var(--color-accent-primary);
    font-weight: var(--weight-semibold);
}
.searchable-multi-select__option--add .aico { width: 15px; height: 15px; flex: none; }
.searchable-multi-select__option--add:hover { background: var(--color-accent-primary); color: var(--color-accent-ink); }
.searchable-multi-select__option-remove {
    width: 34px;
    color: var(--color-loss);
}
.searchable-multi-select__option:hover,
.searchable-multi-select__option-remove:hover {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}
.searchable-multi-select__option.is-selected,
.searchable-multi-select__option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Journal settings ---------------------------------------------------- */
.journal-settings-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.journal-settings-page .page-head__sub a {
    color: var(--color-accent-glow);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.journal-settings-page .journal-banner__dot {
    background: var(--color-accent-primary);
    box-shadow: 0 0 0 5px var(--color-accent-muted);
}
.journal-banner__stats {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* The journal group is a stretch of sections inside the settings page now, not
   a page of its own — it no longer carries a rail. */
.settings-nav a { text-decoration: none; }
.settings-nav a.is-danger { color: var(--color-loss); }
.journal-settings-page {
    display: flex; flex-direction: column; gap: var(--space-3);
}
.journal-settings-page .acct-stat-strip {
    margin-bottom: var(--space-5);
}
.journal-settings-fields {
    margin-top: var(--space-5);
}
.journal-settings-page .col-span-2 > .field {
    width: 100%;
}
.journal-settings-page .searchable-multi-select__control {
    min-height: 76px;
}
.journal-settings-page .symbol-pricing-builder {
    width: 100%;
}
@media (max-width: 760px) {
    .journal-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .journal-banner__stats {
        width: 100%;
        margin-inline-start: 30px;
        justify-content: flex-start;
    }
}

/* ---- Reports ------------------------------------------------------------- */
.reports-page,
.reports-explorer,
.reports-charts-grid,
.reports-chart-card {
    min-width: 0;
}
.reports-page .reports-explorer > *,
.reports-page .report-grid > *,
.reports-page .report-chart-card,
.reports-page .reports-trades-panel,
.reports-page .ref-stat-card {
    min-width: 0;
}
.reports-explorer,
.reports-charts-grid,
.report-grid {
    display: grid;
    gap: var(--space-5);
}
.reports-page .reports-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reports-charts-grid {
    margin-top: var(--space-5);
}
.reports-chart-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-0);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.reports-chart-card.is-active {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.reports-chart-card__head,
.reports-chart-card__head-actions,
.reports-chart-card__axes,
.reports-trades-panel__tools,
.reports-per-page {
    display: flex;
    align-items: center;
}
.reports-chart-card__head {
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.reports-chart-card__head strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
.reports-chart-card__head small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}
.reports-chart-card__head-actions,
.reports-chart-card__axes {
    gap: var(--space-2);
    flex-wrap: wrap;
}
.reports-builder__controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.reports-builder__controls .field-group {
    min-width: 0;
}
.reports-chart-card__axes {
    margin-bottom: var(--space-4);
}
.reports-chart-card__axis-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.reports-chart-card__axis-copy {
    display: grid;
    gap: 2px;
}
.reports-chart-card__axis-copy small {
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
}
.reports-chart-card__axis-copy strong {
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.reports-chart-card__axis-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--color-accent-muted);
}
.reports-chart-card__axis-icon::before,
.reports-chart-card__axis-icon::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-pill);
    background: var(--color-accent-primary);
}
.reports-chart-card__axis-icon--horizontal::before {
    width: 14px;
    height: 2px;
    inset: 11px 5px auto;
}
.reports-chart-card__axis-icon--horizontal::after {
    width: 2px;
    height: 8px;
    inset: 8px auto auto 5px;
}
.reports-chart-card__axis-icon--vertical::before {
    width: 2px;
    height: 14px;
    inset: 5px auto auto 11px;
}
.reports-chart-card__axis-icon--vertical::after {
    width: 8px;
    height: 2px;
    inset: auto auto 5px 8px;
}
/* ---- Journal comparison: legend, per-journal columns --------------------- */
.reports-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}
.reports-chart-legend__item,
.reports-compare-card__name,
.reports-trade-column__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.reports-chart-legend__item i,
.reports-compare-card__name i,
.reports-trade-column__name i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}
.reports-compare-card__name,
.reports-trade-column__name {
    color: var(--color-text-primary);
    font-weight: 600;
}
.reports-trades-compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    overflow-x: auto;
    scrollbar-width: thin;
}
.reports-trade-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
    overflow: hidden;
}
.reports-trade-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}
.reports-trade-column__head small {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    white-space: nowrap;
}
.reports-trade-column__rows {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.reports-trade-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-xs);
}
.reports-trade-row:last-child {
    border-bottom: 0;
}
.reports-trade-column__more,
.reports-trades-compare__empty {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    text-align: center;
    margin: 0;
}
.reports-chart-stage {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
}
.reports-chart-viewport,
.reports-chart-scroll,
.reports-chart-xaxis-scroll {
    min-width: 0;
    overflow-y: hidden;
}
.reports-chart-viewport {
    overflow-x: hidden;
}
.reports-chart-shell,
.reports-chart-xaxis-shell {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
}
.reports-chart-xaxis-shell {
    min-height: 64px;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-inset);
}
.reports-chart-xaxis-spacer {
    min-height: 64px;
}
/* The divider down the y-axis column is drawn twice — once beside the plot,
   once beside the x-axis labels — and the two halves have to meet. They did
   not: an <svg> computes direction:ltr whatever the page does, so the plot
   half's border-inline-end landed on the opposite side from the strip's. Both
   halves take a physical side, picked off the page direction. */
html[dir="ltr"] .reports-chart--axis,
html[dir="ltr"] .reports-chart-xaxis-spacer {
    border-right: 1px solid var(--color-border-subtle);
}
html[dir="rtl"] .reports-chart--axis,
html[dir="rtl"] .reports-chart-xaxis-spacer {
    border-left: 1px solid var(--color-border-subtle);
}
.reports-chart-scroll,
.reports-chart-xaxis-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.reports-chart-xaxis-scroll {
    scrollbar-width: none;
}
/* The plot SVG is drawn left-to-right regardless of UI language. Under RTL the
   scroll box put its start edge on the right, so the overflow ran the opposite
   way from every scroll gesture and scrollLeft = 0 landed mid-chart — reachable
   with arrow keys only. Pin the scrollers to LTR; the shell grid keeps the
   y-axis on the correct side. */
html[dir="rtl"] .reports-chart-scroll,
html[dir="rtl"] .reports-chart-xaxis-scroll {
    direction: ltr;
}
.reports-chart-xaxis-scroll::-webkit-scrollbar {
    display: none;
}
.reports-chart {
    display: block;
    max-width: none;
}
.reports-chart--axis {
    width: 82px;
    min-width: 82px;
}
.reports-chart-stage.is-axis-hidden .reports-chart-shell {
    grid-template-columns: minmax(0, 1fr);
}
.reports-chart-stage.is-axis-hidden .reports-chart-xaxis-shell {
    display: none;
}
.reports-chart__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    color: var(--color-text-tertiary);
    text-align: center;
    pointer-events: none;
}
.reports-chart__empty[hidden],
.reports-chart__scroll-hint[hidden],
.reports-chart__tooltip[hidden] {
    display: none;
}
.reports-chart__scroll-hint {
    min-height: 36px;
    padding: 8px var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    text-align: center;
}
.reports-chart__tooltip {
    position: absolute;
    z-index: 4;
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-3);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    pointer-events: none;
}
.reports-chart__tooltip strong {
    display: block;
    color: var(--color-text-primary);
}
.reports-chart__grid-line {
    stroke: var(--chart-grid);
    stroke-width: 1;
}
.reports-chart__baseline,
.reports-chart__line {
    fill: none;
    stroke: var(--color-accent-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.reports-chart__bar {
    transition: fill 120ms ease;
}
.reports-chart__bar.is-positive {
    fill: var(--color-profit);
}
.reports-chart__bar.is-negative {
    fill: var(--color-loss);
}
.reports-chart__bar.is-accent {
    fill: var(--color-accent-primary);
}
.reports-chart__bar:hover {
    filter: brightness(1.08);
}
/* On-chart value labels above bars / line points (matches HTML reference .rc-barlabel). */
.reports-chart__value-label {
    fill: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-anchor: middle;
}
.reports-chart__value-label.is-negative {
    fill: var(--color-loss);
}
.reports-chart__point {
    fill: var(--color-surface-1);
    stroke: var(--color-accent-primary);
    stroke-width: 2;
}
.reports-chart__x-label,
.reports-chart__y-label {
    fill: var(--chart-axis);
    font-family: var(--font-mono);
    font-size: 11px;
}
.reports-chart__y-label {
    text-anchor: end;
}
.reports-trades-panel__tools {
    justify-content: flex-end;
    gap: var(--space-4);
}
.reports-per-page {
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.reports-per-page .custom-select { width: 84px; }
.reports-per-page .custom-select__trigger {
    min-height: 30px;
    padding-inline: 8px;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.reports-trades-panel__meta {
    min-width: 94px;
    text-align: end;
}
.reports-trades-panel__meta strong,
.reports-trades-panel__meta small {
    display: block;
}
.reports-trades-panel__meta small {
    margin-top: 3px;
    color: var(--color-text-tertiary);
}
.reports-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}
.reports-pagination__current {
    min-width: 34px;
    text-align: center;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}
.report-card__body {
    padding: 0;
}
.report-card__table {
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.report-empty-cell {
    padding: var(--space-5) !important;
    text-align: center;
}
.cell-pnl.is-pos {
    color: var(--color-profit);
}
.cell-pnl.is-neg {
    color: var(--color-loss);
}
@media (max-width: 900px) {
    .reports-page .reports-summary-grid,
    .reports-page .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .reports-builder__controls {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .reports-page .reports-summary-grid,
    .reports-page .report-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .reports-page .report-chart-card {
        padding: var(--space-3);
        overflow: hidden;
    }
    .reports-chart-card__head,
    .reports-trades-panel .card__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .reports-chart-card__head-actions,
    .reports-trades-panel__tools {
        width: 100%;
        justify-content: space-between;
    }
    .reports-chart-shell,
    .reports-chart-xaxis-shell {
        grid-template-columns: 70px minmax(0, 1fr);
    }
    .reports-chart--axis {
        width: 70px;
        min-width: 70px;
    }
}

/* ---- EA Bridge settings section (journal-workspace.js initializeEaBridgeSection) --- */
.ea-key-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* The download button follows the text it belongs to: in Persian the block
   reads right to left and ends on the left, so the button ends there too. */
html[dir="rtl"] .ea-key-row { justify-content: flex-end; }
.ea-key-value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-mid);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
}
.ea-todo-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.ea-todo-row:last-child { border-bottom: 0; }
.ea-todo-row__text { flex: 1; font-size: var(--text-sm); color: var(--color-text-primary); }
.todo-gate { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
/* Hidden rather than dimmed when the feature is off — see the template. */
.todo-gate[hidden] { display: none !important; }

/* The two expert switches. They decide what MetaTrader does on the chart, so
   they are rows with room around them rather than checkboxes tucked into the
   end of a field grid. */
.ea-switch-row {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
}
.ea-switch-row .field { gap: 6px; }
.ea-switch-row .field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.ea-switch-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent-primary); }
.ea-todo-row__del { width: 26px; height: 26px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.ea-todo-row__del:hover { background: var(--color-loss-muted); color: var(--color-loss); }

/* ---- Signal Bot settings section (journal-workspace.js initializeSignalBotSection) --- */
.signal-bot { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.signal-bot__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.signal-bot__sep { width: 1px; height: 20px; background: var(--color-border-subtle); margin: 0 4px; }
.signal-bot__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.signal-bot__chip {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
}
.signal-bot__chip:hover { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-bot__chip--emoji { font-family: inherit; font-size: var(--text-sm); }
.signal-bot__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.signal-bot__editor textarea { min-height: 190px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; }
.signal-bot__preview { display: flex; flex-direction: column; gap: var(--space-2); }
.tg-bubble {
    min-height: 190px;
    padding: 12px 14px;
    border-radius: 14px 14px 14px 4px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
    word-break: break-word;
}
.tg-bubble code { font-family: var(--font-mono); font-size: var(--text-xs); }
.tg-bubble tg-spoiler { background: var(--color-text-tertiary); border-radius: 3px; color: transparent; }
@media (max-width: 900px) {
    .signal-bot__split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Signal Bot event checklist (journal-workspace.js initializeSignalBotSection) --- */
.signal-events { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-4); }
.signal-events__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.signal-events__head p { margin: 4px 0 0; max-width: 60ch; }
.signal-events__count { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }
.signal-event { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-1); }
.signal-event.is-on { border-color: var(--color-accent-border); }
.signal-event__row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; }
.signal-event__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.signal-event__label { font-size: var(--text-sm); color: var(--color-text-primary); }
.signal-event__hint { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.signal-event__edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
}
.signal-event__edit:hover { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-event__edit[aria-expanded="true"] { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-event__editor { padding: 0 12px 12px; border-top: 1px solid var(--color-border-subtle); }
.signal-event__editor .signal-bot__bar { margin: 10px 0 8px; }

/* ---- Signal Bot: Dev options message editors (site-settings.js) --- */
.signal-wrap { margin-top: var(--space-5); }
.signal-simple { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.signal-simple .tg-bubble { min-height: 40px; }
.dev-options { margin-top: var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--color-surface-1); }
.dev-options > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-options > summary::marker { color: var(--color-text-tertiary); }
.dev-options[open] > summary { margin-bottom: var(--space-3); color: var(--color-text-primary); }
.signal-template { border-top: 1px solid var(--color-border-subtle); }
.signal-template:first-of-type { border-top: 0; }
.signal-template__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 2px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
}
.signal-template__head:hover { color: var(--color-accent-glow); }
.signal-template.is-open .signal-template__head { color: var(--color-accent-glow); }
.signal-template.is-open .signal-template__head .ico { transform: rotate(90deg); }
.signal-template__head .ico { transition: transform .15s ease; }
.signal-template__body { padding-block: 0 14px; padding-inline: 20px 0; }