/* widgets.css -- GridStack overrides, widget handle/body, stat widgets */

/* ── Stat widgets + page title (JS queries these classes) ────────────── */
.stat-label { font-size: 0.875rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15rem; text-align: center; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); text-align: center; }

/* Container queries: stat-widget text scales with widget width.
   Default (240-319px) keeps the existing 1.65rem value. Shrink below 240px, grow above 320px.
   Height exception: if widget is shorter than 80px (gs-h=2), force the smallest size
   regardless of width -- body doesn't have room for larger text. */
.stat-widget { container-type: size; }
@container (max-width: 240px) {
  .stat-widget .stat-value { font-size: 1.25rem; }
  .stat-widget .stat-label { font-size: 0.75rem; }
}
@container (min-width: 320px) {
  .stat-widget .stat-value { font-size: 2rem; }
}
@container (min-width: 440px) {
  .stat-widget .stat-value { font-size: 2.75rem; line-height: 1; }
  .stat-widget .stat-label { font-size: 0.9375rem; }
}
@container (min-width: 560px) {
  .stat-widget .stat-value { font-size: 3.5rem; }
}
@container (max-height: 80px) {
  .stat-widget .stat-value { font-size: 1.25rem; line-height: 1.1; }
  .stat-widget .stat-label { font-size: 0.75rem; }
}
.page-title { font-size: clamp(1.75rem, 2vw + 0.75rem, 2.25rem); font-weight: 700; color: var(--text-primary); letter-spacing: -0.025em; margin-bottom: 1.75rem; }
.pnl-pos { color: var(--green); font-weight: 600; }
.pnl-neg { color: var(--red); font-weight: 600; }

/* ── Quill overrides ─────────────────────────────────────────────────── */
.ql-toolbar { background: var(--bg-surface); border-color: var(--border) !important; border-radius: 0; flex-shrink: 0; }
.ql-container { background: var(--bg-surface); border-color: var(--border) !important; border-radius: 0 0 var(--rm) var(--rm); color: var(--text-secondary); font-size: 1rem; height: calc(100% - 42px); overflow-y: auto; }
.ql-editor { min-height: 100%; line-height: 1.6; }
.ql-editor.ql-blank::before { color: var(--text-ph); font-style: normal; }
.ql-stroke { stroke: var(--text-muted) !important; }
.ql-fill { fill: var(--text-muted) !important; }
.ql-picker-label { color: var(--text-muted) !important; }
.ql-editor li[data-list="checked"], .ql-editor li[data-list="unchecked"] { padding-left: 0.5em; }
.ql-editor li[data-list="checked"] > .ql-ui, .ql-editor li[data-list="unchecked"] > .ql-ui { color: var(--text-muted); width: 0.5em; margin-left: -0.5em; font-size: 1.3em; line-height: 1; }
.ql-editor li[data-list="checked"] > .ql-ui:before { color: var(--green, #22c55e); }
.ql-editor li[data-list="checked"] { text-decoration: line-through; color: var(--text-muted); }

/* ── GridStack 24-column layout ────────────────────────────────────── */
.gs-24 > .grid-stack-item[gs-w="1"] { width: 4.16667% }
.gs-24 > .grid-stack-item[gs-w="2"] { width: 8.33333% }
.gs-24 > .grid-stack-item[gs-w="3"] { width: 12.5% }
.gs-24 > .grid-stack-item[gs-w="4"] { width: 16.66667% }
.gs-24 > .grid-stack-item[gs-w="5"] { width: 20.83333% }
.gs-24 > .grid-stack-item[gs-w="6"] { width: 25% }
.gs-24 > .grid-stack-item[gs-w="7"] { width: 29.16667% }
.gs-24 > .grid-stack-item[gs-w="8"] { width: 33.33333% }
.gs-24 > .grid-stack-item[gs-w="9"] { width: 37.5% }
.gs-24 > .grid-stack-item[gs-w="10"] { width: 41.66667% }
.gs-24 > .grid-stack-item[gs-w="11"] { width: 45.83333% }
.gs-24 > .grid-stack-item[gs-w="12"] { width: 50% }
.gs-24 > .grid-stack-item[gs-w="13"] { width: 54.16667% }
.gs-24 > .grid-stack-item[gs-w="14"] { width: 58.33333% }
.gs-24 > .grid-stack-item[gs-w="15"] { width: 62.5% }
.gs-24 > .grid-stack-item[gs-w="16"] { width: 66.66667% }
.gs-24 > .grid-stack-item[gs-w="17"] { width: 70.83333% }
.gs-24 > .grid-stack-item[gs-w="18"] { width: 75% }
.gs-24 > .grid-stack-item[gs-w="19"] { width: 79.16667% }
.gs-24 > .grid-stack-item[gs-w="20"] { width: 83.33333% }
.gs-24 > .grid-stack-item[gs-w="21"] { width: 87.5% }
.gs-24 > .grid-stack-item[gs-w="22"] { width: 91.66667% }
.gs-24 > .grid-stack-item[gs-w="23"] { width: 95.83333% }
.gs-24 > .grid-stack-item[gs-w="24"] { width: 100% }
.gs-24 > .grid-stack-item[gs-x="1"] { left: 4.16667% }
.gs-24 > .grid-stack-item[gs-x="2"] { left: 8.33333% }
.gs-24 > .grid-stack-item[gs-x="3"] { left: 12.5% }
.gs-24 > .grid-stack-item[gs-x="4"] { left: 16.66667% }
.gs-24 > .grid-stack-item[gs-x="5"] { left: 20.83333% }
.gs-24 > .grid-stack-item[gs-x="6"] { left: 25% }
.gs-24 > .grid-stack-item[gs-x="7"] { left: 29.16667% }
.gs-24 > .grid-stack-item[gs-x="8"] { left: 33.33333% }
.gs-24 > .grid-stack-item[gs-x="9"] { left: 37.5% }
.gs-24 > .grid-stack-item[gs-x="10"] { left: 41.66667% }
.gs-24 > .grid-stack-item[gs-x="11"] { left: 45.83333% }
.gs-24 > .grid-stack-item[gs-x="12"] { left: 50% }
.gs-24 > .grid-stack-item[gs-x="13"] { left: 54.16667% }
.gs-24 > .grid-stack-item[gs-x="14"] { left: 58.33333% }
.gs-24 > .grid-stack-item[gs-x="15"] { left: 62.5% }
.gs-24 > .grid-stack-item[gs-x="16"] { left: 66.66667% }
.gs-24 > .grid-stack-item[gs-x="17"] { left: 70.83333% }
.gs-24 > .grid-stack-item[gs-x="18"] { left: 75% }
.gs-24 > .grid-stack-item[gs-x="19"] { left: 79.16667% }
.gs-24 > .grid-stack-item[gs-x="20"] { left: 83.33333% }
.gs-24 > .grid-stack-item[gs-x="21"] { left: 87.5% }
.gs-24 > .grid-stack-item[gs-x="22"] { left: 91.66667% }
.gs-24 > .grid-stack-item[gs-x="23"] { left: 95.83333% }

/* ── Gridstack overrides ─────────────────────────────────────────────── */
/* ── Dashboard tabs ──────────────────────────────────────────────── */
.dash-tab { background: transparent; border: none; color: var(--text-muted); font-size: 1.125rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: var(--rm); cursor: pointer; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.dash-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.dash-tab-active { color: var(--text-primary); }
.dash-tab-add { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); width: 1.75rem; height: 1.75rem; border-radius: var(--rm); cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; }
.dash-tab-add:hover { color: var(--text-primary); border-color: var(--text-muted); }
.dash-tab { cursor: grab; }
.dash-tab:active { cursor: grabbing; }
/* Dashboard tab inline rename — replaces .dash-tab on click. matches the
   tab's font metrics so the strip doesn't reflow. STYLE-GUIDE §7 inline-in-
   menu pattern (bg-base + neutral border, no green focus halo per §15.4). */
.dash-tab-rename-input { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm); padding: 0.25rem 0.625rem; font-family: inherit; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); outline: none; }
.dash-tab-rename-input:focus { outline: none; border-color: var(--border); }
.dash-tab-rename-input::selection { background: rgba(74, 222, 128, 0.25); }


.grid-stack { background: transparent; min-height: calc(100vh - 8rem); }
#dashboard-grid, #review-grid { margin-left: calc(-1 * var(--widget-gap)); margin-right: calc(-1 * var(--widget-gap)); }
.grid-stack-placeholder > .placeholder-content { background: rgba(255,255,255,0.02); border: 1.5px dashed rgba(255,255,255,0.1); border-radius: var(--rm); }
#dashboard-grid .grid-stack-item-content, #review-grid .grid-stack-item-content { margin: var(--widget-gap); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--rm); display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
#dashboard-grid .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, #review-grid .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content { box-shadow: 0 24px 72px rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.12); }

/* ── Trade Log sortable list ──────────────────────────────────────── */
.tl-sortable { display: flex; flex-direction: column; gap: 0.5rem; }
.tl-widget-content { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--rm); display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.tl-widget .widget-handle { cursor: default; }
.tl-widget .widget-handle:active { cursor: default; }
.ui-resizable-handle { display: none; }
#dashboard-grid .ui-resizable-se { display: block; position: absolute; width: 20px; height: 20px; right: 4px; bottom: 4px; cursor: se-resize; opacity: 0; transition: opacity 0.15s; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='15' cy='15' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='11' cy='15' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='11' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='7' cy='15' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='7' r='1.5' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; }
#dashboard-grid .grid-stack-item:hover .ui-resizable-se { opacity: 0.35; }
#dashboard-grid .grid-stack-item.ui-resizable-resizing .ui-resizable-se { opacity: 0.8; }

/* ── Notes widget (multi-instance) ────────────────────────────────── */
.notes-quill-host { display: flex; flex-direction: column; height: 100%; border: none !important; }
[id^="widget-notes-"] .ql-toolbar { flex-shrink: 0; padding: 0.1rem 0.75rem; background: var(--bg-surface); border-radius: 0; border-bottom: 1px solid var(--border-sub) !important; border-top: none !important; border-left: none !important; border-right: none !important; }
[id^="widget-notes-"] .ql-container { flex: 1; min-height: 0; border: none !important; }
[id^="widget-notes-"] .ql-editor { height: 100%; padding-top: 0.25rem; }
.notes-handle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.05rem 0.5rem 0.05rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; cursor: grab; user-select: none; }
.notes-handle:active { cursor: grabbing; }
.notes-title { flex: 0 1 auto; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.notes-title:hover { color: var(--text-primary); }
.notes-settings-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: none; cursor: pointer; color: var(--text-faint); border-radius: var(--rm); padding: 0; flex-shrink: 0; transition: color 0.1s, background 0.1s; }
.notes-settings-btn:hover { color: var(--text-secondary); background: var(--bg-elevated); }
.notes-settings-dropdown { position: fixed; z-index: 999; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); min-width: 220px; max-width: 320px; padding: 0.375rem 0; overflow-y: auto; max-height: 22rem; }
/* Seamless mode: hide the header bar; the Quill toolbar (visible on widget click)
   becomes the only chrome and doubles as the drag handle via .widget-handle-drag. */
.notes-widget--seamless .notes-handle { display: none; }
.notes-widget--seamless .ql-toolbar { display: flex; align-items: center; cursor: grab; user-select: none; -webkit-user-select: none; pointer-events: none; position: relative; z-index: 1; background: transparent; padding: 0.4rem 0.5rem 0.4rem 0.75rem; }
.notes-widget--seamless .ql-toolbar:active { cursor: grabbing; }
.notes-widget--seamless .ql-toolbar .notes-settings-btn { margin-left: auto; }
.notes-widget--seamless .ql-toolbar button,
.notes-widget--seamless .ql-toolbar .ql-picker,
.notes-widget--seamless .ql-toolbar .notes-settings-btn { pointer-events: auto; }
.notes-widget--seamless .ql-editor { padding-top: 0.75rem; }
/* Drag strip: invisible by default, active only in seamless mode. Catches
   mousedown on the toolbar's empty space (toolbar has pointer-events:none in
   seamless, interactive children re-enable). Sits OUTSIDE .ql-toolbar so
   Quill's mousedown preventDefault never fires on it. */
.notes-drag-strip { display: none; }
.notes-widget--seamless .widget-body { position: relative; }
.notes-widget--seamless .notes-drag-strip { display: block; position: absolute; top: 0; left: 0; right: 0; height: 38px; z-index: 0; cursor: grab; user-select: none; -webkit-user-select: none; }
.notes-widget--seamless .notes-drag-strip:active { cursor: grabbing; }
/* Seamless toggle row in the settings dropdown.
   Pill switch follows the canonical .col-toggle pattern from table.css. */
.notes-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary); }
.notes-toggle-row:hover { background: var(--bg-surface); }
.notes-toggle-pill { width: 2rem; height: 1.125rem; border-radius: 9999px; background: var(--bg-elevated); border: 1px solid var(--border-sub); position: relative; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.notes-toggle-pill::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--text-faint); transition: transform 0.15s, background 0.15s; }
.notes-toggle-pill.on { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); }
.notes-toggle-pill.on::after { transform: translateX(0.875rem); background: var(--green); }
.notes-settings-sep { border: none; border-top: 1px solid var(--border); margin: 0.25rem 0; }
.notes-library-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.75rem; cursor: default; min-width: 0; }
.notes-library-row:hover { background: var(--bg-surface); }
.notes-new-row { cursor: pointer; color: var(--text-faint); font-size: 0.8125rem; }
.notes-new-row:hover { color: var(--text-secondary); }
.notes-row-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text-faint); }
.notes-row-title { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.notes-row-title:hover { color: var(--text-primary); }
.notes-row-active .notes-row-title { color: var(--text-primary); font-weight: 600; }
.notes-row-active::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.notes-row-actions { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; }
.notes-library-row:hover .notes-row-actions { opacity: 1; }
.notes-row-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: none; border: none; cursor: pointer; color: var(--text-faint); border-radius: var(--rm); padding: 0; transition: color 0.1s, background 0.1s; }
.notes-row-action-btn:hover { color: var(--text-secondary); background: var(--bg-base); }
.notes-row-trash-btn:hover { color: var(--red); background: var(--red-bg); }
.notes-trash--armed { color: var(--red) !important; background: var(--red-bg) !important; }
.notes-row-rename-input { flex: 1; min-width: 0; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm); padding: 0.125rem 0.375rem; font-family: inherit; font-size: 0.8125rem; color: var(--text-primary); outline: none; }
.notes-row-rename-input:focus { border-color: var(--border); }
/* Header-context override: match the .notes-title span footprint exactly so
   entering edit mode doesn't shift the title or push the toolbar down. */
.notes-handle .notes-row-rename-input { background: transparent; border: none; padding: 0; font-weight: 600; line-height: inherit; }
.notes-row-empty { padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--text-faint); }

/* ── Widget handle + grip states ──────────────────────────────────────── */
.widget-handle { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: none; background: var(--bg-surface); cursor: grab; flex-shrink: 0; user-select: none; }
.widget-handle:active { cursor: grabbing; }
.widget-label { font-size: 0.75rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.widget-handle-drag { cursor: grab; user-select: none; }
.widget-handle-drag:active { cursor: grabbing; }
.stat-widget .widget-handle { position: absolute; top: 0; right: 0; left: 0; background: transparent; border-bottom: none; padding: 0.2rem 0.75rem; z-index: 10; }
.widget-body { flex: 1; min-height: 0; padding: 1rem; overflow: visible; display: flex; flex-direction: column; }
.widget-body--row { flex-direction: row; gap: 1.25rem; }

/* ── Grid right-click context menu ────────────────────────────────── */
#grid-ctx-menu { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); width: fit-content; padding: 0.375rem 0; overflow: visible; }
#grid-ctx-list { max-height: 22rem; overflow-y: auto; }
.ctx-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary); transition: background 0.1s; border: none; background: none; text-align: left; white-space: nowrap; }
.ctx-item:hover { background: var(--bg-surface); }
.ctx-item:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.ctx-item-danger { color: var(--red); }
.ctx-item-danger:hover { background: var(--red-bg); }
.ctx-item-has-submenu .ctx-chevron { margin-left: auto; opacity: 0.7; }
.ctx-submenu { display: none; position: fixed; width: 280px; max-height: 320px; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--rm); padding: 0.25rem; box-shadow: var(--shadow-sm); z-index: 10000; }
.ctx-submenu:empty { display: none !important; }
.ctx-submenu-wrapper:has(.ctx-submenu:empty) .ctx-chevron { display: none; }
.ctx-item-note-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-submenu-wrapper:hover .ctx-submenu,
.ctx-submenu:hover { display: block; }
.ctx-item-note-pick { display: flex; align-items: center; gap: 0.5rem; }
.ctx-item-note-actions { display: inline-flex; align-items: center; gap: 0.125rem; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; }
.ctx-item-note-pick:hover .ctx-item-note-actions { opacity: 1; }
.ctx-item-note-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; color: var(--text-faint); border-radius: var(--rm); transition: color 0.1s, background 0.1s; }
.ctx-item-note-action-btn:hover { color: var(--text-primary); background: var(--bg-surface); }
.ctx-item-note-trash-btn:hover { color: var(--red); background: var(--red-bg); }
.ctx-item-note-action-btn.notes-trash--armed { color: var(--red); background: var(--red-bg); }
.ctx-submenu-wrapper.ctx-submenu-sticky .ctx-submenu { display: block; }
.ctx-layout-row { justify-content: space-between; }
.ctx-layout-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-layout-actions { display: flex; gap: 0.125rem; flex-shrink: 0; }
.ctx-layout-action { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--text-faint); border-radius: var(--rm); transition: color 0.1s, background 0.1s; }
.ctx-layout-action svg { width: 14px; height: 14px; }
.ctx-layout-action:hover { color: var(--green); background: var(--bg-surface); }
.ctx-layout-action-danger:hover { color: var(--red); background: var(--red-bg); }
.ctx-layout-rename-input { flex: 1; min-width: 0; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm); padding: 0.125rem 0.375rem; font-family: inherit; font-size: 0.8125rem; color: var(--text-primary); outline: none; }
.ctx-layout-rename-input:focus { outline: none; border-color: var(--border); }
.ctx-layout-rename-input::selection { background: rgba(74, 222, 128, 0.25); }
/* Save current layout. inline-input-in-menu pattern, replaces the Save button */
.ctx-save-input { display: block; width: calc(100% - 1rem); margin: 0 0.5rem; padding: 0.4rem 0.75rem; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm); font-family: inherit; font-size: 0.8125rem; color: var(--text-primary); outline: none; box-sizing: border-box; }
.ctx-save-input:focus { outline: none; border-color: var(--border); }
.ctx-save-input::selection { background: rgba(74, 222, 128, 0.25); }
.ctx-separator { border-top: 1px solid var(--border); margin: 0.25rem 0; }
.ctx-section { padding: 0.375rem 1rem 0.25rem; font-size: 0.6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ctx-empty { padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--text-faint); text-align: center; }

/* Equity Curve widget: tight top/bottom, label sits higher */
#widget-equity-curve .widget-handle { padding: 0.5rem 1rem 0.35rem; }

/* ── Equity curve empty state ──────────────────────────────────────── */
.equity-curve-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* ── P&L by Hour empty state ────────────────────────────────────────── */
.pnl-by-hour-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--text-faint); }

/* ── P&L by Hour list ───────────────────────────────────────────────── */
.pbh-list { display: flex; flex-direction: column; gap: 0; }
.pbh-row { display: grid; grid-template-columns: 3.75rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.15rem 0.5rem; }
.pbh-time { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pbh-track { height: 12px; background: var(--bg-elevated); border-radius: 2px; position: relative; overflow: hidden; }
.pbh-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.pbh-fill.pos { background: var(--green); }
.pbh-fill.neg { background: var(--red); }
.pbh-val { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pbh-val.pos { color: var(--green); }
.pbh-val.neg { color: var(--red); }

.pbh-gear-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 0.2rem; display: inline-flex; align-items: center; border-radius: 4px; }
.pbh-gear-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.pbh-dropdown { position: fixed; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; min-width: 12rem; max-height: 20rem; overflow-y: auto; z-index: 1000; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.pbh-dropdown-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.25rem 0.4rem; }
.pbh-radio { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.25rem; font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; border-radius: 4px; }
.pbh-radio:hover { background: var(--bg-elevated); color: var(--text-primary); }
.pbh-radio input { accent-color: var(--green); }
.pbh-dropdown-divider { border-top: 1px solid var(--border); margin: 0.4rem -0.25rem; }
.pbh-hours-list { display: flex; flex-direction: column; gap: 1px; max-height: 11rem; overflow-y: auto; }
.pbh-hour-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.25rem; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pbh-hour-row:hover { background: var(--bg-elevated); color: var(--text-primary); }
.pbh-hour-row input { accent-color: var(--green); }
.pbh-hour-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.pbh-hour-dot--pos { background: var(--green); }
.pbh-hour-dot--neg { background: var(--red); }

/* ── Table header drag rules ───────────────────────────────────────── */
#recent-trades-table th { cursor: grab; user-select: none; }
#recent-trades-table th.drag-over { }

/* ── Image thumb button ────────────────────────────────────────────── */
.img-thumb-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; display: inline-flex; align-items: center; border-radius: var(--rm); transition: color 0.15s, background 0.15s; }
.img-thumb-btn:hover { color: var(--text-secondary); background: var(--bg-elevated); }
.img-thumb-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }