/* ============================================================================
   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 { 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);
    border: 0;
    background: transparent;
    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;
}
.tabs .workspace-tab:hover { color: var(--color-text-primary); background: var(--color-surface-1); }
.tabs .workspace-tab.is-active { color: var(--color-text-primary); }
.tabs .workspace-tab.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    bottom: -1px;
    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 {
    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: 4px;
    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;
}
.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%); }
    .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;
    --font-mono: "Vazirmatn", "JetBrains Mono", monospace;
}

/* 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;
}

/* 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,
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"] table.dt th.num,
html[dir="rtl"] .cell-mono,
html[dir="rtl"] .cell-pnl {
    direction: ltr;
    unicode-bidi: isolate;
}

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

html[dir="rtl"] .bi-arrow-right::before { transform: scaleX(-1); }
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) {
    .topbar__bell { display: none; }
    .crumb .sep:first-of-type, .crumb span:nth-of-type(1) { display: none; } /* trim "HINOVEST /" prefix */
}

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

.trades-page .page-head {
    margin-bottom: 26px;
}

.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;
}

.trades-page .page-head__actions .btn {
    min-width: 108px;
    height: 42px;
    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: 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: 5px;
    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: 0.03em;
}

/* 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);
}

.trade-direction--long {
    color: var(--color-profit-strong);
    background: var(--color-profit-muted);
}

.trade-direction--short {
    color: var(--color-loss-strong);
    background: var(--color-loss-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: 6px;
    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: transform 110ms ease; }
.color-swatch:hover { transform: scale(1.1); }
.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: .04em; }
.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);
    transition: opacity 200ms ease, transform 200ms 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-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: 6px;
    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: 8px;
    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(--topbar-h) + 18px);
}

.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: 0.09em;
    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: 12px;
    background: var(--color-surface-1);
}

.site-settings-page .theme-card:hover {
    transform: translateY(-1px);
}

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

.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: 11px;
    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: 8px;
    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: 3px 7px 3px 10px;
    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: 8px;
    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: 6px;
    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: 17px 18px;
    border-radius: 11px;
}

.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: 22px;
    }
}

@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: 0 var(--space-1) 0 var(--space-3);
    }
    .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; }

/* Split layout */
.jb-layout {
    display: flex;
    min-height: 560px;
    max-height: min(80vh, 720px);
    overflow: hidden;
}

/* ── Sidebar ── */
.jb-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    background: var(--color-surface-inset);
    border-right: 1px solid var(--color-border-subtle);
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
}
.jb-sidebar__head {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}
.jb-sidebar__eyebrow {
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--color-accent-glow);
}
.jb-sidebar__title {
    font-size: var(--text-base); font-weight: var(--weight-semibold);
    color: var(--color-text-primary); line-height: 1.3; margin: 0;
}

/* Step nav */
.jb-steps { display: flex; flex-direction: column; gap: 2px; }
.jb-step {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: transparent; border: 0; border-radius: var(--radius-sm);
    text-align: left; cursor: pointer;
    transition: background 120ms ease;
    width: 100%;
}
.jb-step:hover { background: var(--color-surface-1); }
.jb-step__num {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    background: var(--color-surface-2); color: var(--color-text-tertiary);
    border: 1.5px solid var(--color-border-subtle);
    transition: background 150ms, color 150ms, border-color 150ms;
}
.jb-step__label {
    font-size: var(--text-sm); color: var(--color-text-secondary);
    transition: color 120ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jb-step.is-active .jb-step__num {
    background: var(--color-accent-glow); border-color: var(--color-accent-glow); color: #000;
}
.jb-step.is-active .jb-step__label { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.jb-step.is-complete .jb-step__num {
    background: var(--color-accent-muted); border-color: var(--color-accent-border); color: var(--color-accent-glow);
}

/* ── Main (right) area ── */
.jb-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--color-surface-0);
    position: relative;
    overflow: hidden;
}
.jb-close {
    position: absolute; top: var(--space-3); right: var(--space-4); z-index: 10;
}

/* Progress bar */
.jb-progress-track { height: 3px; background: var(--color-border-subtle); flex-shrink: 0; }
.jb-progress-fill { height: 100%; background: var(--color-accent-glow); transition: width 280ms ease; }

/* Form fills remaining height */
.jb-form { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Scrollable panels area */
.jb-panels { flex: 1; overflow-y: auto; padding: var(--space-7) var(--space-6) var(--space-4); }
.jb-panel { display: none; }
.jb-panel.is-active { display: block; }

.jb-panel__head { margin-bottom: var(--space-6); }
.jb-panel__eyebrow {
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--color-text-tertiary);
}
.jb-panel__title {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--color-text-primary); margin: var(--space-1) 0 var(--space-2);
}
.jb-panel__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

/* ── Per-symbol pricing table ── */
.jb-pricing-table {
    width: 100%; border-collapse: collapse; margin-top: var(--space-3);
    font-size: var(--text-sm);
}
.jb-pricing-table th {
    text-align: left; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide);
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle);
}
.jb-pricing-table td {
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}
.jb-pricing-table tr:last-child td { border-bottom: 0; }
.jb-pricing-table .jb-sym { font-weight: var(--weight-semibold); font-family: var(--font-mono); color: var(--color-text-primary); }
.jb-pricing-table .form-control { height: 32px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.jb-pricing-empty { font-size: var(--text-sm); color: var(--color-text-tertiary); text-align: center; padding: var(--space-6); }

/* ── 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); }

/* ── Footer ── */
.jb-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    flex-shrink: 0;
}
.jb-footer__end { display: flex; align-items: center; gap: var(--space-2); }

/* Responsive: stack on narrow modals */
@media (max-width: 640px) {
    .jb-layout { flex-direction: column; max-height: none; }
    .jb-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--color-border-subtle); }
    .jb-sidebar__head { display: none; }
    .jb-steps { flex-direction: row; flex-wrap: wrap; }
    .jb-step__label { display: none; }
    .jb-panels { padding: var(--space-5) var(--space-4); }
    .jb-footer { padding: var(--space-3) var(--space-4); }
}

/* ============================================================================
   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: 0.375rem; 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;
}
.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;
}
.primary-btn:hover { background: var(--color-accent-glow); }

/* 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;
}
.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;
}
.custom-select__option {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    text-align: start;
    cursor: pointer;
}
.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%;
}
.searchable-multi-select__control {
    min-height: 52px;
    padding: 8px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
}
.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);
}
.searchable-multi-select__search {
    flex: 1 1 120px;
    min-width: 90px;
    min-height: 28px;
    padding: 3px;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    outline: 0;
}
.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: 6px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    text-align: start;
}
.searchable-multi-select__option {
    width: 100%;
}
.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;
}
.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;
    border-inline-end: 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;
    border-inline-end: 1px solid var(--color-border-subtle);
}
.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: 9px 11px;
    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__x-axis-line {
    stroke: var(--color-border-mid);
    stroke-width: 1;
}
.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 .select {
    width: 76px;
}
.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; }
.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); }
.ea-todo-row.is-inactive .ea-todo-row__text { color: var(--color-text-tertiary); text-decoration: line-through; }
.ea-todo-row__del { width: 26px; height: 26px; border: 0; border-radius: 6px; 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); color: var(--color-accent); }
.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); }
.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); color: var(--color-accent); }
.signal-event__edit[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.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: left;
    cursor: pointer;
}
.signal-template__head:hover { color: var(--color-accent); }
.signal-template.is-open .signal-template__head { color: var(--color-accent); }
.signal-template.is-open .signal-template__head .ico { transform: rotate(90deg); }
.signal-template__head .ico { transition: transform .15s ease; }
.signal-template__body { padding: 0 0 14px 20px; }