:root {
  --bg:           #161e30;
  --sidebar-bg:   #1a2540;
  --panel-bg:     #1a2540;
  --header-bg:    #223060;
  --border:       #2a3d6a;
  --border-light: rgba(42,61,106,0.5);
  --accent:       #4d80f0;
  --accent-dim:   rgba(77,128,240,0.12);
  --text:         #c2ceea;
  --text-dim:     #6b7fa8;
  --text-bright:  #e8eeff;
  --green:        #2ecc8e;
  --red:          #f05a65;
  --amber:        #f0b84d;

  /* Type, in one place. Every font-family and the base size below point at these, so matching a
     house style is a four-line change rather than a hunt through the stylesheet. */
  --font-ui:      'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --font-size:    12px;
  --font-size-grid: 11px;      /* dense number grids: matrix, blotter, positions */

  /* Numbers on a dark ground do not need the brightness a badge needs. These are the muted
     versions used for figures; --green / --red stay as they are for pills, toasts and errors. */
  --num-pos:      #6fbf9b;
  --num-neg:      #d48189;
  --num-zero:     rgba(194,206,234,0.24);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
body { font-family:var(--font-ui); background:var(--bg); color:var(--text); font-size:var(--font-size); }
button { font-family: inherit; }

/* ── SCREENS ── */
.screen { display:none; height:100%; }
.screen.active { display:flex; }

/* ── LOGIN ── */
.login-screen { align-items:center; justify-content:center; position:relative; overflow:hidden; }
.login-screen::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle, rgba(77,128,240,0.08) 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.login-card { width:380px; background:var(--panel-bg); border:1px solid var(--border); border-radius:10px; padding:40px 36px 32px; position:relative; z-index:1; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo-text { font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--text-bright); letter-spacing:0.06em; }
.login-logo-sub { font-size:11px; color:var(--text-dim); margin-top:4px; }
.login-logo-bar { width:40px; height:2px; background:var(--accent); margin:14px auto 0; border-radius:1px; }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.form-input, .form-select { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text-bright); font-family:var(--font-mono); font-size:12px; padding:9px 12px; outline:none; transition:border-color .2s, box-shadow .2s; }
.form-input::placeholder { color:var(--text-dim); }
.form-input:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(77,128,240,0.12); }
.login-btn { width:100%; padding:11px; background:var(--accent); border:none; border-radius:5px; color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; margin-top:4px; }
.login-btn:hover { background:#5a8cf5; transform:translateY(-1px); box-shadow:0 4px 16px rgba(77,128,240,0.3); }
.login-btn:disabled { opacity:.6; cursor:default; transform:none; }
.login-error { background:rgba(240,90,101,0.1); border:1px solid rgba(240,90,101,0.25); border-radius:5px; color:var(--red); font-size:11px; padding:8px 12px; margin-bottom:14px; display:none; text-align:center; }
.login-error.show { display:block; }
.login-footer { text-align:center; margin-top:18px; font-size:10px; color:var(--text-dim); }
.remember-me { display:flex; align-items:center; gap:6px; margin:-4px 0 10px 2px; font-size:11px; color:var(--text-dim); cursor:pointer; user-select:none; }
.remember-me input { accent-color:var(--accent); }

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 18px; background:var(--bg); border-bottom:1px solid var(--border); flex-shrink:0; height:44px; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-title { font-size:14px; font-weight:600; color:var(--text-bright); letter-spacing:0.03em; }
.company-badge { font-family:var(--font-mono); font-size:10px; padding:3px 8px; border-radius:4px; font-weight:500; letter-spacing:0.04em; color:var(--text-dim); background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.company-switcher { background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text-bright); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.06em; padding:3px 8px; cursor:pointer; outline:none; }
.role-badge { font-family:var(--font-mono); font-size:9px; padding:3px 8px; border-radius:3px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; background:rgba(240,90,101,0.12); color:var(--red); border:1px solid rgba(240,90,101,0.25); }
.topbar-right { display:flex; align-items:center; gap:10px; }
.data-updated { font-size:10px; font-family:var(--font-mono); color:var(--text-dim); padding:3px 8px; background:rgba(255,255,255,0.03); border-radius:4px; border:1px solid var(--border); white-space:nowrap; }
.recon-chip { font-size:10px; font-family:var(--font-mono); padding:3px 8px; border-radius:4px; border:1px solid var(--border); white-space:nowrap; cursor:pointer; }
.recon-chip:empty { display:none; }
.recon-chip.ok { color:#2ecc8e; border-color:rgba(46,204,142,0.45); }
.recon-chip.bad { color:var(--amber); border-color:rgba(245,158,11,0.55); background:rgba(245,158,11,0.08); }
.refresh-btn { background:none; border:1px solid var(--border); border-radius:4px; padding:3px 8px; cursor:pointer; font-size:10px; line-height:1.4; color:var(--text-dim); font-family:var(--font-mono); transition:all .2s; }
.refresh-btn:hover { background:rgba(77,128,240,0.1); color:var(--accent); border-color:var(--accent); }
.user-chip { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text); }
.user-avatar { width:24px; height:24px; border-radius:50%; background:var(--header-bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--accent); }
.logout-btn { background:rgba(240,90,101,0.1); border:1px solid rgba(240,90,101,0.2); border-radius:4px; color:var(--red); font-size:10px; padding:4px 10px; cursor:pointer; transition:all .15s; }
.logout-btn:hover { background:rgba(240,90,101,0.2); border-color:rgba(240,90,101,0.4); }
.logout-btn.blue { background:rgba(77,128,240,0.15); color:#7aa3f5; border-color:rgba(77,128,240,0.25); }

/* ── ADMIN ── */
.admin-screen { flex-direction:column; }
.admin-layout { display:flex; flex:1; overflow:hidden; min-height:0; }
.admin-sidebar { width:200px; flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--border); overflow-y:auto; padding:10px 0; }
.admin-sidebar-group { margin-bottom:4px; }
.admin-sidebar-hdr { display:flex; align-items:center; gap:6px; padding:8px 12px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); cursor:pointer; user-select:none; }
.admin-sidebar-hdr:hover { color:var(--text-bright); }
.admin-sidebar-hdr .arrow { font-size:8px; transition:transform .15s; }
.admin-sidebar-hdr.collapsed .arrow { transform:rotate(-90deg); }
.admin-sidebar-hdr.collapsed + .admin-sidebar-items { display:none; }
.admin-sidebar-items { padding:0 6px; }
.admin-sidebar-item { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); font-size:11px; padding:6px 14px 6px 20px; border-radius:4px; cursor:pointer; transition:all .15s; }
.admin-sidebar-item:hover { background:rgba(77,128,240,0.08); color:var(--text-bright); }
.admin-sidebar-item.active { background:rgba(77,128,240,0.15); color:var(--accent); font-weight:600; border-left:2px solid var(--accent); padding-left:18px; }
.admin-main { flex:1; overflow-y:auto; padding:20px 28px; min-height:0; }
.admin-section { display:none; flex-direction:column; gap:16px; flex:1; }
.admin-section.active { display:flex; }
.admin-section-title { font-size:16px; font-weight:600; color:var(--text-bright); margin-bottom:4px; }
.admin-sub { font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.admin-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; }
.admin-tab { padding:8px 16px; font-size:11px; font-weight:500; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none; }
.admin-tab:hover { color:var(--text-bright); }
.admin-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.admin-tab-panel { display:none; flex-direction:column; gap:16px; }
.admin-tab-panel.active { display:flex; }
.admin-form { display:flex; flex-direction:column; gap:12px; max-width:520px; }
.admin-form-row { display:flex; flex-direction:column; gap:4px; }
.admin-btn-primary { align-self:flex-start; background:var(--accent); border:none; border-radius:4px; color:#fff; font-size:11px; font-weight:600; padding:7px 16px; cursor:pointer; }
.admin-btn-primary:hover { background:#5a8cf5; }
.admin-btn-secondary { align-self:flex-start; background:none; border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:11px; padding:6px 14px; cursor:pointer; }
.admin-btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.admin-card { background:var(--panel-bg); border:1px solid var(--border); border-radius:6px; padding:14px 16px; }
.stats-row { display:flex; gap:12px; flex-wrap:wrap; }
.stat-tile { background:var(--panel-bg); border:1px solid var(--border); border-radius:6px; padding:12px 16px; min-width:140px; }
.stat-tile .k { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.stat-tile .v { font-size:20px; font-weight:700; color:var(--text-bright); font-family:var(--font-mono); margin-top:4px; }
.panel-access-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px; margin-top:4px; }
.panel-access-item { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:4px; background:rgba(255,255,255,0.03); border:1px solid var(--border-light); font-size:10px; color:var(--text); cursor:pointer; transition:all .15s; user-select:none; }
.panel-access-item:hover { border-color:var(--accent); }
.panel-access-item input[type="checkbox"] { accent-color:var(--accent); }
.panel-access-item .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.panel-access-item.meta { border-style:dashed; }
.admin-table { width:100%; border-collapse:collapse; font-size:11px; }
.admin-table th { text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:6px 8px; border-bottom:1px solid var(--border); }
.admin-table td { padding:6px 8px; border-bottom:1px solid var(--border-light); }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }
.action-btn { background:none; border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:10px; padding:3px 8px; cursor:pointer; margin-right:4px; }
.action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.action-btn.delete:hover { border-color:var(--red); color:var(--red); background:rgba(240,90,101,0.1); }
.mono { font-family:var(--font-mono); }
.dim { color:var(--text-dim); }
.small { font-size:10px; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; padding:24px 28px; width:560px; max-width:95vw; box-shadow:0 16px 48px rgba(0,0,0,0.4); }
.modal-title { font-size:14px; font-weight:600; color:var(--text-bright); margin-bottom:18px; }
.modal-row { display:flex; gap:12px; }
.modal-row .form-group { flex:1; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.btn-cancel { background:none; border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:11px; padding:7px 14px; cursor:pointer; }
.btn-save { background:var(--accent); border:none; border-radius:4px; color:#fff; font-size:11px; font-weight:600; padding:7px 16px; cursor:pointer; }
.btn-save:disabled { opacity:.5; cursor:default; }
.modal-error { font-size:10px; color:var(--red); display:none; margin-top:6px; }

/* ── TOAST ── */
.toast { position:fixed; bottom:20px; right:20px; z-index:20000; padding:10px 16px; border-radius:5px; font-size:11px; font-weight:600; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }
.toast.success { background:var(--green); color:#111; }
.toast.error { background:var(--red); color:#fff; }

/* ── DASHBOARD: TABS ── */
.dash-screen { flex-direction:column; }
.view-tabs-bar { display:flex; align-items:center; background:#121a2a; border-bottom:1px solid var(--border); padding:0 16px; flex-shrink:0; gap:0; overflow-x:auto; }
.view-tab { display:flex; align-items:center; gap:6px; padding:8px 16px; font-size:11px; font-weight:500; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap; user-select:none; }
.view-tab * { pointer-events:none; }
.view-tab .tab-close, .view-tab .tab-name-input { pointer-events:auto; }
.view-tab:hover { color:var(--text-bright); background:rgba(255,255,255,0.03); }
.view-tab.active { color:var(--text-bright); border-bottom-color:var(--accent); background:rgba(77,128,240,0.05); }
.view-tab .tab-close { font-size:10px; color:var(--text-dim); cursor:pointer; opacity:0; transition:opacity .15s; margin-left:4px; width:14px; height:14px; display:flex; align-items:center; justify-content:center; border-radius:3px; }
.view-tab:hover .tab-close { opacity:1; }
.view-tab .tab-close:hover { background:rgba(240,90,101,0.2); color:var(--red); }
.tab-add { padding:8px 12px; font-size:16px; color:var(--text-dim); cursor:pointer; transition:color .15s; }
.tab-add:hover { color:var(--accent); }
.tab-name-input { background:transparent; border:none; border-bottom:1px dashed var(--accent); color:var(--text-bright); font-size:11px; font-weight:500; font-family:inherit; outline:none; width:100px; padding:0; }

/* ── DASHBOARD: LAYOUT + SIDEBAR ── */
.layout { display:flex; flex:1; min-height:0; }
.sidebar { width:210px; flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--border); overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:12px; transition:width .2s, padding .2s; }
.sidebar.collapsed { width:36px; padding:12px 6px; overflow:hidden; }
.sidebar.hidden { display:none; }
.sidebar.collapsed .sb-content, .sidebar.collapsed .sb-section-title { display:none; }
.sb-header { display:flex; align-items:center; justify-content:space-between; }
.sidebar.collapsed .sb-header { justify-content:center; }
.sb-toggle { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; padding:2px 4px; border-radius:3px; }
.sb-toggle:hover { color:var(--text-bright); }
.sb-section-title { font-size:10px; font-weight:600; color:var(--text-bright); text-transform:uppercase; letter-spacing:.07em; }
.field-label { font-size:10px; color:var(--text-dim); margin:8px 0 4px; font-weight:500; }
.strat-toolbar { display:flex; gap:4px; margin-bottom:4px; }
.icon-btn { background:none; border:1px solid var(--border); border-radius:3px; color:var(--text-dim); font-size:10px; padding:2px 7px; cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.book-group { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin:6px 0 2px; }
.book-item { display:flex; align-items:center; gap:6px; font-size:11px; padding:3px 4px; border-radius:3px; cursor:pointer; user-select:none; }
.book-item:hover { background:rgba(255,255,255,0.03); }
.book-item input { accent-color:var(--accent); }
.main { flex:1; overflow-y:auto; padding:12px 14px; min-width:0; }
.panels { display:flex; flex-direction:column; gap:10px; }

/* ── PANELS ── */
.panel-sortable-item { position:relative; }
.panel-sortable-ghost { opacity:.35; }
.panel-sortable-ghost .panel { border-color:var(--accent); box-shadow:0 0 0 2px rgba(77,128,240,0.25); }
.panel { background:var(--panel-bg); border:1px solid var(--border); border-radius:6px; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.panel-accent-bar { height:2px; }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; border-bottom:1px solid var(--border); flex-shrink:0; cursor:pointer; user-select:none; }
.panel-header:hover { background:rgba(255,255,255,0.02); }
.panel-title { font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-bright); }
.panel-chevron { font-size:18px; color:var(--text-dim); transition:transform .2s; margin-right:6px; cursor:pointer; line-height:1; }
.panel.collapsed .panel-chevron { transform:rotate(-90deg); }
.panel.collapsed .panel-body { display:none; }
.panel.collapsed .panel-header { border-bottom:none; }
.panel-body { padding:0; overflow-x:auto; }
/* dragged height: the panel is a fixed box, the body fills it and scrolls; a grid's own scroll box
   takes the space instead so its sticky header rows keep working */
.panel-resize-v { height:12px; margin:0; cursor:row-resize; flex:0 0 auto; position:relative; z-index:6; display:flex; align-items:center; justify-content:center; }
.panel-resize-v::after { content:''; width:48px; height:3px; border-radius:2px; background:rgba(255,255,255,0.12); }
.panel-resize-v:hover { background:rgba(77,128,240,0.18); }
.panel-resize-v:hover::after { background:var(--accent); }
.panel.panel-sized .panel-body { flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; }
.panel.panel-sized .panel-body > * { flex:0 0 auto; }
/* the table's own scroll box fills a dragged panel — every grid, not only the matrix (Marius, 2026-09-27: the recon panel grew, the table inside did not) */
.panel.panel-sized .panel-body > .matrix-scroll, .panel.panel-sized .panel-body > .blotter-scroll, .panel.panel-sized .panel-body > .entry-scroll { flex:1 1 auto; min-height:0; max-height:none; }
.panel.collapsed.panel-sized { height:auto !important; }
.panel.collapsed.panel-sized .panel-body { display:none; }   /* v627: a resized panel collapses too (the sized body's display:flex came later and won) */
/* an unsized panel never runs past the screen: the body caps at ~70% of the viewport and scrolls inside,
   so the grip strip at the panel's end is always in reach (a 37-month prices grid used to push it off screen) */
.panel:not(.panel-sized):not(.collapsed) .panel-body { max-height:72vh; overflow:auto; display:flex; flex-direction:column; }
.panel:not(.panel-sized):not(.collapsed) .panel-body > * { flex:0 0 auto; }
.panel:not(.panel-sized):not(.collapsed) .panel-body > .matrix-scroll { flex:1 1 auto; min-height:0; max-height:none; }
.panel-drag-handle { cursor:grab; color:var(--text-dim); opacity:.4; margin-right:8px; font-size:13px; }
.panel-sortable-item:hover .panel-drag-handle { opacity:.8; }
.panel-close-btn { background:none; border:1px solid transparent; border-radius:3px; color:var(--text-dim); font-size:10px; padding:2px 6px; cursor:pointer; opacity:0; transition:all .15s; }
.panel-sortable-item:hover .panel-close-btn { opacity:.6; }
.panel-close-btn:hover { opacity:1 !important; background:rgba(240,90,101,0.15); border-color:rgba(240,90,101,0.3); color:var(--red); }
.panel-status { font-size:9px; color:var(--text-dim); margin-left:8px; }
.dl-btn { background:none; border:1px solid var(--border); border-radius:3px; color:var(--text-dim); font-size:9px; padding:2px 7px; cursor:pointer; font-family:var(--font-mono); margin-left:6px; }
.dl-btn:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.hdr-sel { background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-family:var(--font-mono); font-size:9px; padding:2px 4px; outline:none; cursor:pointer; margin-left:6px; }
.panel-add-row { display:flex; justify-content:center; padding:6px 0 14px; }
.panel-add-btn { background:none; border:1px dashed var(--border); border-radius:5px; color:var(--text-dim); font-size:11px; padding:7px 18px; cursor:pointer; }
.panel-add-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.panel-picker-overlay { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; }
.panel-picker-menu { background:var(--panel-bg); border:1px solid var(--border); border-radius:6px; padding:8px; min-width:220px; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.panel-picker-title { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; padding:4px 8px 8px; }
.panel-picker-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:4px; font-size:11px; cursor:pointer; }
.panel-picker-item:hover { background:var(--accent-dim); color:var(--text-bright); }
.panel-picker-dot { width:8px; height:8px; border-radius:50%; }
.panel-empty { padding:24px; text-align:center; color:var(--text-dim); font-size:11px; }

/* Per-type accent colours (mirror PANEL_TYPES) */
.panel-var-book .panel-accent-bar { background:#8b5cf6; } .panel-var-book .panel-title { color:#a78bfa; }
.panel-exposure .panel-accent-bar { background:#5b9cf5; } .panel-exposure .panel-title { color:#5b9cf5; }
.panel-limits   .panel-accent-bar { background:#f0b84d; } .panel-limits   .panel-title { color:#f0b84d; }
.panel-drawdown .panel-accent-bar { background:#f05a65; } .panel-drawdown .panel-title { color:#f05a65; }
.panel-pnl-attr .panel-accent-bar { background:#ec4899; } .panel-pnl-attr .panel-title { color:#f472b6; }
.panel-corr     .panel-accent-bar { background:#0ea5e9; } .panel-corr     .panel-title { color:#38bdf8; }
.panel-stress   .panel-accent-bar { background:#10b981; } .panel-stress   .panel-title { color:#34d399; }

/* ── DATA TABLES ── */
.data-table { border-collapse:collapse; font-family:var(--font-mono); font-size:10px; width:100%; }
.data-table th { position:sticky; top:0; background:var(--header-bg); color:var(--text-dim); font-weight:600; font-size:9px; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); }
.data-table th.text, .data-table td.text { text-align:left; }
.data-table td { padding:4px 10px; text-align:right; border-bottom:1px solid var(--border-light); white-space:nowrap; }
.data-table tr:hover td { background:rgba(255,255,255,0.02); }
.data-table tr.total td { font-weight:700; color:var(--text-bright); background:var(--header-bg); border-top:1px solid var(--border); }
.neg { color:var(--red); } .pos { color:var(--green); }
/* In a table of figures the same two colours at full strength turn the page into a christmas tree.
   A number only needs enough colour to say which way it points. */
td.num.pos, td.pos { color:var(--num-pos); }
td.num.neg, td.neg { color:var(--num-neg); }
.status-pill { display:inline-block; padding:1px 7px; border-radius:3px; font-size:9px; font-weight:700; letter-spacing:.04em; }
.status-OK { background:rgba(46,204,142,0.15); color:var(--green); }
.status-WARN { background:rgba(240,184,77,0.15); color:var(--amber); }
.status-BREACH { background:rgba(240,90,101,0.18); color:var(--red); }
.util-bar { display:inline-block; width:54px; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; vertical-align:middle; margin-left:6px; overflow:hidden; }
.util-bar i { display:block; height:100%; background:var(--green); }
.lim-in { width:110px; text-align:right; background:var(--input-bg,rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.12); border-radius:4px; color:inherit; padding:3px 6px; font-family:inherit; font-size:12px; }
.lim-in:focus { outline:none; border-color:var(--accent); }
/* The VaR preset strip: one row of controls, all the same height, each only as wide as it needs. */
/* The tab row and the action that belongs to it, on one line. When a screen has no sub-tabs
   the button still sits here, at the left edge of where the table begins. */
/* The grip that says a row can be dragged onto a strategy. On the inbox the first cell is a
   checkbox, and a browser will not start a row drag from inside one — which is why the inbox rows
   felt dead while the blotter's worked. */
/* Position matrix: months down the side, instruments across. The first column stays put while the
   instruments scroll, because a row of numbers with no month against it is unreadable. */
/* A value the clearer restated, with what it was before beside it. */
/* When the clearer restated it, and which run picked that up (on hover). */
.amended-when { font-size:10px; color:var(--amber); opacity:.85; margin-right:6px; white-space:nowrap; cursor:help; }

.cell-changed { position:relative; background:rgba(240,184,77,0.16); border-bottom:1px dashed var(--amber);
                padding:1px 3px; border-radius:2px; }
.cell-was { margin-left:6px; font-size:10px; opacity:.75; color:var(--amber); text-decoration:line-through; }

.matrix-scroll { overflow:auto; max-height:70vh; }
/* ── The other dashboard's grid (.dt), applied here: fixed layout, one width for every product
   column (--mx-col), one for the month column (--mx-month), 11px Plex Mono, 10px dim headers,
   right-aligned figures, hairline borders, a bright bold Total row. Resizing a column resizes
   them all, because the widths are variables and not per-cell. */
:root { --mx-col: 96px; --mx-month: 92px; --total-bg: rgba(77,128,240,0.10); }
.matrix { border-collapse:collapse; table-layout:fixed; font-family:var(--font-mono); font-size:11px;
          font-variant-numeric:tabular-nums; }
.matrix th, .matrix td { width:var(--mx-col); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                         border-right:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
.matrix th { background:var(--header-bg); color:var(--text-dim); font-weight:500; font-size:10px; text-align:left;
             padding:5px 8px; border-bottom:1px solid var(--border); border-right:1px solid var(--border);
             letter-spacing:.05em; position:sticky; z-index:2; }
.matrix td { text-align:right; padding:4px 8px; }
.matrix thead tr.mx-r1 th { top:0; }
.matrix thead tr.mx-r2 th { top:25px; }
.matrix thead tr.mx-r3 th { top:50px; }
.matrix-corner, .matrix-rowhead { position:sticky; left:0; z-index:3; width:var(--mx-month); text-align:left;
                                  background:var(--panel-bg); color:var(--text-dim); font-size:10px; }
.matrix thead .matrix-corner { z-index:4; text-transform:uppercase; }
.matrix tbody .matrix-rowhead { text-transform:uppercase; }
.matrix tbody tr:hover td { background:rgba(77,128,240,0.05); }
.matrix .vz { color:var(--text-dim); }
.matrix .vp { color:var(--green); }
.matrix .vn { color:var(--red); }
.matrix tfoot tr.matrix-total td, .matrix tfoot tr.matrix-total th {
  background:var(--total-bg) !important; font-weight:600; color:var(--text-bright);
  border-top:1px solid var(--border); position:sticky; bottom:0; z-index:3; }
.matrix tfoot tr.matrix-total th { z-index:4; text-transform:none; }
/* header rows: what it is (dim, truncates), the code line (the one you read), the unit */
.matrix-name { font-weight:400; }
.matrix-venue { font-weight:600; color:var(--text); }
.matrix-venue .matrix-exch { opacity:.6; font-weight:400; }
.matrix-venue .matrix-unit { opacity:.4; font-size:9px; }
.matrix-unitrow { font-weight:400; font-size:9.5px; opacity:.55; }
.matrix-unitrow.matrix-mixed { color:var(--amber); opacity:1; }
.matrix-month.open .matrix-rowhead { color:var(--accent); }
.matrix-day td, .matrix-day th { background:rgba(255,255,255,0.022); }
.matrix-dayhead { padding-left:24px !important; text-transform:none !important; }
.matrix-exp { width:13px; height:13px; line-height:11px; margin-right:5px; padding:0; border:1px solid rgba(255,255,255,0.20);
              background:transparent; color:inherit; border-radius:2px; cursor:pointer; font-size:10px; }
.matrix-exp:hover { border-color:var(--accent); color:var(--accent); }
.matrix-exp-gap { display:inline-block; width:13px; margin-right:5px; }
/* the resize handle: a thin strip on the right edge of every product header */
.matrix th.matrix-name { position:sticky; }
.mx-resize { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:5; }
.mx-resize:hover { background:rgba(77,128,240,0.35); }
.hdr-chk { font-size:11px; opacity:.85; display:inline-flex; align-items:center; gap:4px; }

.drag-cell { width:18px; text-align:center; color:var(--dim); cursor:grab; user-select:none; opacity:.55; }
tr:hover .drag-cell { opacity:1; color:var(--accent); }
tr[draggable="true"] { cursor:grab; }
tr.drag-src { opacity:.5; }
.admin-tab-row { display:flex; align-items:center; gap:12px; margin:4px 0 2px; }
.admin-tab-row .admin-tabs { flex:1 1 auto; min-width:0; display:none; }
.admin-tab-row .admin-tabs[style*="flex"], .admin-tab-row .admin-tabs:not([style*="none"]) { display:flex; }
.admin-tab-row #tblAddBtn { flex:0 0 auto; margin-left:auto; }
.vp-strip { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.vp-lab { display:flex; flex-direction:column; gap:4px; font-size:9px; color:var(--dim);
          letter-spacing:.06em; text-transform:uppercase; line-height:1.4; }
.vp-lab > select, .vp-lab > input {
  width:100%; height:30px; box-sizing:border-box; padding:0 8px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:4px;
  color:var(--text, inherit); font-family:inherit; font-size:12px;
  text-transform:none; letter-spacing:0;
}
.vp-lab > select:focus, .vp-lab > input:focus { outline:none; border-color:var(--accent); }
.vp-add { height:30px; align-self:flex-end; }
.demo-tag { font-size:8px; color:var(--amber); border:1px solid rgba(240,184,77,0.4); border-radius:3px; padding:0 5px; margin-left:8px; letter-spacing:.06em; }

/* CSV export gate: hidden unless the user has the 'export' permission */
html.no-csv .csv-btn { display:none !important; }

#loadingOverlay { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--text-dim); font-size:12px; }

/* ── v002 ADMIN: generic grids, editor, four-eyes, product groups ── */
.admin-sidebar-item.top { font-weight:600; padding-left:14px; }
.nav-badge { display:inline-block; min-width:16px; padding:0 5px; border-radius:8px; background:var(--amber); color:#111; font-size:9px; font-weight:700; text-align:center; margin-left:4px; }
.fe-badge { font-family:var(--font-mono); font-size:9px; padding:3px 8px; border-radius:3px; border:1px solid var(--border); color:var(--text-dim); }
.fe-badge.on { color:var(--amber); border-color:rgba(240,184,77,0.4); background:rgba(240,184,77,0.08); }
.fe-badge.off { color:var(--text-dim); }
.tbl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.tbl-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tbl-search { width:200px; padding:6px 10px; font-size:11px; }
.grid-card { max-height:calc(100vh - 260px); }
.admin-table.grid th { position:sticky; top:0; background:var(--header-bg); cursor:pointer; user-select:none; white-space:nowrap; z-index:1; }
.admin-table.grid th:hover { color:var(--text-bright); }
.admin-table.grid tbody tr { cursor:pointer; }
.admin-table.grid td { white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; }
.admin-table td.num, .admin-table th.num { text-align:right; font-family:var(--font-mono); }
.admin-table.small td, .admin-table.small th { padding:3px 8px; font-size:10px; }
.row-pending td { background:rgba(240,184,77,0.06) !important; }
.row-selected td { background:rgba(77,128,240,0.12) !important; }
.pend-pill { display:inline-block; padding:1px 6px; border-radius:3px; background:rgba(240,184,77,0.15); color:var(--amber); font-size:9px; font-weight:700; }
.fe-mark { color:var(--amber); font-size:8px; }
.row-form { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.row-form .form-group { margin-bottom:6px; }
.row-form .form-group.wide { grid-column:1 / -1; }
.row-form .form-label { margin-bottom:3px; }
.row-form .form-input, .row-form .form-select { padding:6px 10px; font-size:11px; }
textarea.form-input { resize:vertical; font-family:var(--font-ui); }
.tree { display:flex; flex-direction:column; gap:2px; font-size:11px; }
.tree-node.l1 { font-weight:700; color:var(--text-bright); margin-top:6px; }
.tree-node.l2 { padding-left:18px; font-weight:600; }
.tree-node.l3 { padding-left:36px; }
.tree-node.l4 { padding-left:54px; margin-bottom:4px; display:flex; flex-wrap:wrap; gap:4px; }
.chip { display:inline-block; padding:2px 8px; border-radius:10px; background:rgba(77,128,240,0.12); color:var(--text); font-size:10px; font-family:var(--font-mono); }
.chip.closed { opacity:.45; text-decoration:line-through; }
.chip.unalloc { background:rgba(240,184,77,0.12); color:var(--amber); border:1px dashed rgba(240,184,77,0.4); }
.pg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.pg-box { background:var(--panel-bg); border:1px solid var(--border); border-radius:6px; padding:8px; min-height:60px; }
.pg-title { font-size:11px; font-weight:700; color:var(--text-bright); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.pg-list { min-height:28px; display:flex; flex-direction:column; gap:4px; }
.pg-chip { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:4px; background:rgba(255,255,255,0.04); border:1px solid var(--border-light); font-size:10px; cursor:grab; }
.pg-chip:active { cursor:grabbing; }
.pg-star { margin-left:auto; color:var(--border); cursor:pointer; font-size:12px; }
.pg-star.on { color:var(--amber); }
.pg-star:hover { color:var(--amber); }
.sortable-ghost { opacity:.4; }
.pick-group { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:6px 10px 2px; background:rgba(255,255,255,0.02); }
.pick-item { display:flex; align-items:center; gap:8px; padding:4px 10px; font-size:11px; cursor:pointer; }
.pick-item:hover { background:rgba(77,128,240,0.08); }
.pick-item input { accent-color:var(--accent); }
.pend-card { margin-bottom:10px; }
.pend-card .tbl-head { margin-bottom:6px; }

/* ── v003: property-sheet editor, tree editing, wide grids ── */
.prop-sheet { display:grid; grid-template-columns:220px 1fr; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.prop-sheet .ps-section { grid-column:1 / -1; background:var(--header-bg); color:var(--text-dim); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; }
.prop-sheet .ps-label { padding:7px 12px; font-size:11px; color:var(--text); border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.02); }
.prop-sheet .ps-value { padding:4px 8px; border-bottom:1px solid var(--border-light); }
.prop-sheet .ps-value .form-input, .prop-sheet .ps-value .form-select { padding:5px 8px; font-size:11px; border-color:transparent; background:transparent; }
.prop-sheet .ps-value .form-input:focus, .prop-sheet .ps-value .form-select:focus { border-color:var(--accent); background:var(--bg); }
.prop-sheet .ps-value .form-input:disabled { color:var(--text-dim); }
.prop-sheet .ps-hint { color:var(--text-dim); font-size:9px; cursor:help; }
.tree-edit { font-size:11px; }
.tree-row { display:flex; align-items:center; gap:8px; padding:3px 6px; border-radius:4px; }
.tree-row:hover { background:rgba(255,255,255,0.03); }
.tree-row .t-type { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; width:64px; }
.tree-row .t-name { font-weight:600; color:var(--text-bright); cursor:pointer; }
.tree-row .t-name:hover { color:var(--accent); }
.tree-row .t-ccy { font-family:var(--font-mono); font-size:9px; color:var(--amber); }
.tree-row .t-closed { opacity:.45; text-decoration:line-through; }
.tree-row .t-actions { margin-left:auto; display:flex; gap:4px; opacity:.85; }
.tree-row:hover .t-actions { opacity:1; }
.wide-grid td.cell-edit { cursor:pointer; }
.wide-grid td.cell-edit:hover { background:rgba(77,128,240,0.1); }
.wide-grid td.inherited { color:var(--text-dim); font-style:italic; }
.member-cell { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; background:rgba(77,128,240,0.12); font-family:var(--font-mono); font-size:10px; margin:2px; cursor:pointer; }
.member-cell:hover { background:rgba(77,128,240,0.25); }
.member-add { display:inline-block; padding:2px 8px; border-radius:10px; border:1px dashed var(--border); font-size:10px; color:var(--text-dim); cursor:pointer; margin:2px; }
.member-add:hover { border-color:var(--accent); color:var(--accent); }
.match-hint { font-size:9px; color:var(--amber); margin-left:4px; }

/* v003 fix: the editor body is a single column now (property sheet), not the v002 two-column form */
#rowModalForm.row-form { display:block; }
.prop-sheet { width:100%; }
.prop-sheet .ps-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* v003 fix: editor body must be allowed to shrink so its own scrollbar works inside the flex modal */
#rowModalForm { min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#rowModal .modal { overflow:hidden; }
.prop-sheet .ps-value .form-input, .prop-sheet .ps-value .form-select { width:100%; min-width:0; }
/* v003: wider editor, roomier property sheet */
#rowModal .modal { width:min(960px, 92vw); padding:22px 26px; }
.prop-sheet { grid-template-columns:280px 1fr; }
.prop-sheet .ps-label { padding:8px 14px; font-size:12px; }
.prop-sheet .ps-value { padding:4px 10px; }
.prop-sheet .ps-value .form-input, .prop-sheet .ps-value .form-select { font-size:12px; padding:6px 10px; }
.prop-sheet .ps-section { padding:6px 14px; font-size:10px; }

/* ── tree: badges, account chips, icon actions ── */
.tree-row { padding:5px 8px; border-bottom:1px solid var(--border-light); }
.tree-row .t-badge { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 6px; border-radius:3px; width:64px; text-align:center; color:var(--text-dim); background:rgba(255,255,255,0.05); }
.tree-row .t-company { color:var(--text-bright); background:rgba(77,128,240,0.25); }
.tree-row .t-entity { color:#c4b5fd; background:rgba(139,92,246,0.18); }
.tree-row .t-desk { color:#7dd3fc; background:rgba(14,165,233,0.18); }
.tree-row .t-trader { color:#6ee7b7; background:rgba(16,185,129,0.18); }
.tree-row .t-book { color:#fcd34d; background:rgba(240,184,77,0.18); }
.tree-row .t-strategy { color:var(--text); background:rgba(255,255,255,0.06); }
.tree-row .t-accts { display:flex; gap:4px; flex-wrap:wrap; margin-left:6px; }
.acct-chip { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:10px; background:rgba(46,204,142,0.12); color:var(--green); font-family:var(--font-mono); font-size:10px; }
.acct-chip .acct-x { cursor:pointer; color:var(--text-dim); margin-left:2px; }
.acct-chip .acct-x:hover { color:var(--red); }
.tree-row .t-actions { opacity:1; gap:2px; }
.t-btn { background:none; border:1px solid transparent; border-radius:4px; color:var(--text-dim); font-size:12px; width:26px; height:24px; cursor:pointer; line-height:1; }
.t-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.t-menu { position:relative; display:inline-block; }
.t-menu .t-btn { font-weight:700; font-size:14px; }
.t-menu-list { display:none; position:absolute; right:0; top:26px; background:var(--panel-bg); border:1px solid var(--border); border-radius:5px; padding:4px; z-index:50; min-width:120px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.t-menu.open .t-menu-list { display:block; }
.t-menu-item { display:block; padding:5px 10px; font-size:11px; border-radius:3px; cursor:pointer; white-space:nowrap; }
.t-menu-item:hover { background:var(--accent-dim); color:var(--text-bright); }

/* ── v004: feed + product codes ── */
.feed-log { margin:8px 0 0; max-height:180px; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:6px 8px; font-size:10px; color:var(--text-dim); white-space:pre-wrap; }
.admin-select { background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:11px; padding:3px 6px; }
.stat-row .stat-tile { min-width:120px; }

.tree-row[draggable="true"] { cursor:grab; }
.tree-row.drop-ok { outline:1px dashed var(--green); background:rgba(46,204,142,0.10); }
.tree-row.drop-no { outline:1px dashed var(--red); }

.t-btn.t-del:hover { border-color:var(--red); color:var(--red); background:rgba(240,90,101,0.12); }

.t-menu.open .t-btn { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ── v004: blotter + inbox ── */
.panel-blotter .panel-accent-bar { background:#4d80f0; } .panel-blotter .panel-title { color:#7ea2f5; }
.panel-inbox .panel-accent-bar { background:#f0b84d; } .panel-inbox .panel-title { color:#f0b84d; }
.blotter-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 10px; border-bottom:1px solid var(--border-light); font-size:10px; }
.blotter-scroll { max-height:520px; overflow:auto; }
.blotter-scroll .data-table th { top:0; }
.ib-grp { background:none; border:1px solid var(--border); border-radius:10px; color:var(--text-dim); font-size:10px; padding:1px 9px; cursor:pointer; font-family:var(--font-mono); }
.ib-grp.active, .ib-grp:hover { border-color:var(--amber); color:var(--amber); }
.unmapped { color:var(--amber); border-bottom:1px dashed var(--amber); cursor:help; }
.row-amended td { background:rgba(240,184,77,0.05); }
.row-cancelled td { opacity:.45; text-decoration:line-through; }
.status-confirmed { background:rgba(46,204,142,0.15); color:var(--green); }
.status-amended { background:rgba(240,184,77,0.15); color:var(--amber); }
.status-cancelled { background:rgba(240,90,101,0.15); color:var(--red); }
.status-pending { background:rgba(148,163,184,0.15); color:var(--text-dim); }
.demo-panel-label { font-size:8px; color:var(--amber); border:1px solid rgba(240,184,77,0.4); border-radius:3px; padding:0 4px; margin-left:6px; }
.dl-btn:disabled { opacity:.4; cursor:default; }
/* sidebar: scope dropdowns + strategy list */
.scope-row { display:flex; align-items:center; gap:6px; margin:3px 0; }
.scope-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; width:40px; flex-shrink:0; }
.scope-sel { flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:11px; padding:3px 4px; outline:none; }
.book-group .grp-trader { color:#6ee7b7; } .book-group .grp-book { color:#fcd34d; } .book-group .grp-desk { color:#7dd3fc; } .book-group .grp-entity { color:#c4b5fd; }
.book-item .t-num { font-family:var(--font-mono); font-size:9px; color:var(--text-dim); }
.book-item .t-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-item.leaf-unallocated .t-label { color:var(--amber); font-style:italic; }
.sidebar { width:240px; }
/* drag & drop allocation */
tr[draggable="true"] { cursor:grab; }
tr.drag-src td { opacity:.5; }
body.dragging-trade .book-item.leaf-strategy { outline:1px dashed var(--border); outline-offset:-1px; }
.book-item.drop-ok { outline:1px dashed var(--green) !important; background:rgba(46,204,142,0.15) !important; }
.book-item.drop-no { outline:1px dashed var(--red) !important; background:rgba(240,90,101,0.10) !important; cursor:not-allowed; }

/* ── v005: entry grid, inbox sections, awaiting pill ── */
.panel-entry .panel-accent-bar { background:#2ecc8e; } .panel-entry .panel-title { color:#6ee7b7; }
.entry-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 10px; border-bottom:1px solid var(--border-light); font-size:10px; }
.entry-scroll { overflow:auto; max-height:420px; }
.entry-grid { border-collapse:collapse; width:100%; table-layout:fixed; font-family:var(--font-mono); font-size:11px; }   /* v350: column widths come from the header, never from what is typed */
.entry-grid th { position:sticky; top:0; background:var(--header-bg); color:var(--text-dim); font-size:9px; text-transform:uppercase; letter-spacing:.04em; padding:5px 6px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.entry-grid td { padding:2px 3px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.entry-grid tr.row-err td { background:rgba(240,90,101,0.06); }
.ecell { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-family:inherit; font-size:11px; padding:4px 6px; outline:none; }
.ecell:focus { border-color:var(--accent); background:rgba(77,128,240,0.08); }
.ecell.bad { border-color:var(--red); }
.ecell.side-B { color:var(--green); font-weight:700; } .ecell.side-S { color:var(--red); font-weight:700; }
.einfo { color:var(--text-dim); white-space:normal; overflow-wrap:anywhere; font-family:var(--font-ui); line-height:1.35; }   /* v350: wraps inside its column instead of pushing the others */
.entry-errs { padding:6px 10px; color:var(--red); border-top:1px solid var(--border-light); }
.book-btn { border-color:var(--green); color:var(--green); font-weight:700; }
.book-btn:hover { background:rgba(46,204,142,0.15); }
.entry-sugg { position:fixed; z-index:400; display:none; max-height:280px; overflow:auto; background:var(--panel-bg); border:1px solid var(--border); border-radius:5px; box-shadow:0 10px 30px rgba(0,0,0,0.5); padding:3px; font-size:11px; }
.sg-item { display:flex; gap:8px; align-items:center; padding:4px 8px; border-radius:3px; cursor:pointer; white-space:nowrap; }
.sg-item.sel, .sg-item:hover { background:var(--accent-dim); color:var(--text-bright); }
.sg-tag { font-size:8px; font-weight:700; text-transform:uppercase; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,0.08); color:var(--text-dim); min-width:34px; text-align:center; }
.sg-sub { color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.sg-right { margin-left:auto; color:var(--text-dim); font-family:var(--font-mono); font-size:10px; }
.inbox-sec { display:flex; justify-content:space-between; align-items:center; padding:5px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-top:1px solid var(--border); border-left:3px solid var(--border); background:rgba(255,255,255,0.02); }
.inbox-sec.sec-accept { border-left-color:var(--green); color:var(--green); }
.inbox-sec.sec-await { border-left-color:var(--amber); color:var(--amber); }
.inbox-sec.sec-broker { border-left-color:#7dd3fc; color:#7dd3fc; }
.inbox-sec.sec-rej { border-left-color:var(--red); color:var(--red); }
.inbox-sec.sec-unalloc { border-left-color:var(--text-dim); color:var(--text-dim); }
.inbox-sec.sec-amended { border-left-color:#ec4899; color:#ec4899; }
.inbox-sec.sec-whatif { border-left-color:#a78bfa; color:#a78bfa; }
.row-acts { white-space:nowrap; width:118px; min-width:118px; box-sizing:border-box; }   /* v358: fixed, so the inbox sections' columns line up whatever a row's buttons */
.row-acts .t-btn { width:22px; height:20px; font-size:11px; }
/* v723 (Andrea / Alessandro, 27 Oct: 'the X to delete a trade line disappeared'): the entry grid scrolls sideways and its
   ✓ Book / ✕ column sat beyond the right edge on a narrower panel - it is pinned to the right, on an opaque ground */
.entry-grid td.row-acts { position:sticky; right:0; z-index:1; background:var(--panel-bg); box-shadow:inset 1px 0 0 var(--border); }
.entry-grid th.row-acts-h { position:sticky; right:0; top:0; z-index:3; background:var(--header-bg); }
.entry-grid tr.row-err td.row-acts { background:linear-gradient(rgba(240,90,101,0.08), rgba(240,90,101,0.08)), var(--panel-bg); }
.await-pill { display:none; margin-left:10px; padding:2px 9px; border-radius:10px; background:rgba(240,184,77,0.15); color:var(--amber); font-size:10px; border:1px solid rgba(240,184,77,0.4); cursor:pointer; }
.status-rejected { background:rgba(240,90,101,0.15); color:var(--red); }
.status-awaiting, .status-to { background:rgba(240,184,77,0.15); color:var(--amber); }
.status-not { background:rgba(125,211,252,0.15); color:#7dd3fc; }

/* ── v006: positions + recon ── */
.panel-positions .panel-accent-bar { background:#0ea5e9; } .panel-positions .panel-title { color:#7dd3fc; }
.panel-recon .panel-accent-bar { background:#ec4899; } .panel-recon .panel-title { color:#f9a8d4; }
.hdr-chk { display:inline-flex; align-items:center; gap:3px; font-size:9px; color:var(--text-dim); margin-left:6px; font-family:var(--font-mono); }
.hdr-chk input { accent-color:var(--accent); margin:0; }
tr.grp-first td { border-top:1px solid var(--border); }
tr.row-break td { background:rgba(240,90,101,0.05); }
.status-ok { background:rgba(46,204,142,0.15); color:var(--green); }
.status-break, .status-ledger-only, .status-clearer-only { background:rgba(240,90,101,0.15); color:var(--red); }
th[data-col] { cursor:grab; }
th.col-over { border-left:2px solid var(--accent) !important; }
.col-menu { position:fixed; z-index:500; background:var(--panel-bg); border:1px solid var(--border); border-radius:5px; box-shadow:0 10px 30px rgba(0,0,0,0.5); padding:6px; min-width:200px; max-height:360px; overflow:auto; font-size:11px; }
.col-menu label { display:flex; align-items:center; gap:6px; padding:2px 6px; cursor:pointer; }
.col-menu label:hover { background:var(--accent-dim); }

/* ── v007: P&L + booking ── */
.panel-pnl .panel-accent-bar { background:#22c55e; } .panel-pnl .panel-title { color:#86efac; }
.book-big { background:rgba(46,204,142,0.18); border:1px solid var(--green); color:var(--green); font-weight:700; font-size:12px; padding:6px 14px; border-radius:4px; cursor:pointer; margin-right:10px; }
.book-big:hover { background:rgba(46,204,142,0.32); color:#fff; }
.t-btn.book-row { width:auto; padding:0 6px; color:var(--green); border-color:rgba(46,204,142,0.4); font-size:10px; }
.t-btn.book-row:hover { background:rgba(46,204,142,0.18); }
tr.total td { font-weight:700; border-top:2px solid var(--border); }
input[type=date].hdr-sel { color-scheme:dark; }
tr.add-row td { padding:4px 6px; border-bottom:none; }
.add-row-btn { background:none; border:1px dashed var(--border); border-radius:4px; color:var(--text-dim); font-size:11px; padding:4px 12px; cursor:pointer; width:100%; text-align:left; }
.add-row-btn:hover { border-color:var(--accent); color:var(--accent); }
.entry-foot { display:flex; align-items:center; gap:8px; padding:6px 10px; border-top:1px solid var(--border-light); font-size:10px; }
.booked-note { color:var(--green); font-weight:600; }

/* ── sign-in stages: two-factor set-up, code entry, forced password change ── */
.stage-title { font-size:15px; font-weight:600; color:var(--text-bright); margin:4px 0 10px; }
.stage-text { font-size:12px; color:var(--text-dim); line-height:1.5; margin:0 0 14px; }
.qr-box { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; background:#fff; border-radius:6px; padding:10px; margin-bottom:12px; }
.qr-box img { display:block; }
.secret-key { font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:9px; margin-bottom:14px; color:var(--text-bright); user-select:all; }
.code-input { text-align:center; font-family:var(--font-mono); font-size:22px; letter-spacing:.35em; }
.recovery-codes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 16px; }
.recovery-codes code { font-family:var(--font-mono); font-size:12px; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:6px; text-align:center; color:var(--text-bright); user-select:all; }

/* Marked rows in the inbox: a range you built with Shift+arrows has to be readable at a glance,
   including over the amber amended tint and the greyed-out cancelled rows. */
.data-table tbody tr[tabindex] { cursor:default; }
.data-table tbody tr[tabindex]:focus { outline:none; }
.data-table tbody tr.row-sel > td { background:rgba(90,150,255,0.16); }
.data-table tbody tr.row-sel.row-amended > td { background:rgba(150,150,120,0.20); }
.data-table tbody tr.row-cursor > td { box-shadow:inset 0 -1px 0 var(--accent, #5a96ff), inset 0 1px 0 var(--accent, #5a96ff); }
.data-table tbody tr.row-cursor > td:first-child { box-shadow:inset 1px 0 0 var(--accent, #5a96ff), inset 0 -1px 0 var(--accent, #5a96ff), inset 0 1px 0 var(--accent, #5a96ff); }
.data-table tbody tr.row-cursor > td:last-child { box-shadow:inset -1px 0 0 var(--accent, #5a96ff), inset 0 -1px 0 var(--accent, #5a96ff), inset 0 1px 0 var(--accent, #5a96ff); }

/* A clearer code with no instrument mapping yet: the position is real, the product name is not. */
.matrix th.matrix-unmapped { color:var(--amber); }
.matrix tbody tr:hover > th { background-color:rgba(77,128,240,0.10); }
.matrix td.num.zero { color:var(--num-zero); }
.matrix tfoot tr.matrix-total > td, .matrix tfoot tr.matrix-total > th {
  border-top:1px solid rgba(255,255,255,0.28); font-weight:500;
  background:var(--header-bg); position:sticky; bottom:0; z-index:3;
}
.matrix tfoot tr.matrix-total > th { z-index:4; text-transform:none; opacity:1; }

/* Column banding. Light, dark, light, dark, straight down the sheet, so one column can be
   followed across twenty months without losing the line. A merged column takes a single band like
   every other column — that, and nothing louder, is what shows the merge.
   Painted as a background-image so it layers over the sticky header's own colour and over the
   row-hover tint instead of fighting them. */
.matrix .mx-b2 { background-image:linear-gradient(rgba(255,255,255,0.018), rgba(255,255,255,0.018)); }
.matrix tbody tr:hover > td { background-color:rgba(77,128,240,0.10); }
.matrix th.matrix-drop { outline:2px solid var(--accent); outline-offset:-2px; }
/* inside a merged header, make the pairing obvious without colouring the whole column */
.matrix th.mx-grouped .mx-plus { color:var(--accent); opacity:.9; }
.matrix th.mx-grouped.matrix-name { border-top:2px solid var(--accent); }

/* Row 3 doubles as the unit control: one selector at the head sets every column, each column can
   then pin its own. A pinned column is marked so "why is this one in tonnes" has a visible answer. */
.mx-unitsel { background:transparent; border:0; color:inherit; font:inherit; letter-spacing:inherit;
              text-transform:inherit; cursor:pointer; padding:0; outline:none; max-width:100%; }
.mx-unitsel option { background:var(--panel-bg); color:var(--text); text-transform:none; letter-spacing:0; }
.matrix-unithead { text-align:left; }
.matrix-unithead .mx-unitsel { color:var(--accent); opacity:.85; }
.matrix th.mx-unit-own .mx-unitsel { color:var(--accent); opacity:1; }
.matrix th.mx-unit-own { border-bottom:2px solid var(--accent); }
.mx-warn { color:var(--amber); }
.mx-pastrow th, .mx-pastrow td { background-image:linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)); }
.mx-pastcell { text-align:left; font-size:10px; letter-spacing:.04em; text-transform:uppercase; opacity:.5; }
.matrix tbody tr.matrix-month.mx-past th, .matrix tbody tr.matrix-month.mx-past td { opacity:.55; }
.mx-clr { margin-left:6px; padding:0 4px; border-radius:2px; font-size:9px; letter-spacing:.05em;
          text-transform:uppercase; background:rgba(255,255,255,0.07); opacity:.75; font-weight:600; }
.mx-acct { background:rgba(240,184,77,0.14); color:var(--amber); }

/* Sortable headers on the generic table: the whole row travels with the value. */
.data-table th.th-sort { cursor:pointer; user-select:none; }
.data-table th.th-sort:hover { color:var(--text-bright); background:rgba(255,255,255,0.04); }
.data-table th.th-sorted { color:var(--accent); }
.mx-base { color:var(--accent); }
.mx-view { padding:1px 7px; border-radius:3px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.mx-view-live   { background:rgba(46,204,142,0.16); color:var(--green); }
.mx-view-asof   { background:rgba(77,128,240,0.18); color:var(--accent); }
.mx-view-change { background:rgba(240,184,77,0.18); color:var(--amber); }

/* Drop targets on a matrix header: the middle merges, the edges move. */
.matrix th.mx-drop-before { box-shadow:inset 3px 0 0 var(--accent); }
.matrix th.mx-drop-after  { box-shadow:inset -3px 0 0 var(--accent); }

.tbl-tools { display:flex; align-items:center; gap:8px; padding:4px 0 6px; }
.tbl-tools input { background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text-bright);
                   font-family:var(--font-mono); font-size:11px; padding:3px 8px; width:220px; outline:none; }
.tbl-tools input:focus { border-color:var(--accent); }
/* v734 (Marius: "make the filter more visible"): a labelled box with the accent border; amber while a filter is active */
.tbl-filter-wrap { position:relative; display:inline-flex; align-items:center; }
.tbl-filter-ico { position:absolute; left:7px; color:var(--text-dim); pointer-events:none; }   /* v735: a small search bar again (Marius) */
input.tbl-filter, .tbl-tools input.tbl-filter { padding:3px 8px 3px 23px; font-size:11px; border:1px solid var(--border); background:var(--bg); color:var(--text-bright); border-radius:4px; }
input.tbl-filter:focus { border-color:var(--accent); outline:none; }
.tbl-tools input.tbl-filter { width:180px; }
input.tbl-filter-on { border-color:var(--amber) !important; box-shadow:0 0 0 1px var(--amber); }
/* v504: a filter button in every column header and its dropdown (Unallocated Inbox, Trade Blotter) */
.cf-btn { display:inline-flex; align-items:center; margin-left:5px; padding:1px 3px; border-radius:3px; cursor:pointer; opacity:1; color:var(--accent); vertical-align:middle; }   /* v735: always visible */
.cf-btn:hover { opacity:1; background:var(--accent-dim); }
.cf-btn.cf-on { opacity:1; color:#fff; background:var(--accent); }
.cf-menu { min-width:230px; max-width:320px; }
.cf-menu #cfSearch { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text-bright);
                     font-family:var(--font-mono); font-size:11px; padding:3px 6px; outline:none; }
.cf-menu #cfSearch:focus { border-color:var(--accent); }
.cf-list { max-height:260px; overflow:auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:2px 0; }
.cf-list label { display:flex; align-items:center; gap:6px; padding:2px 8px; font-size:11px; cursor:pointer; white-space:nowrap; }
.cf-list label:hover { background:rgba(255,255,255,0.05); }
.cf-list label.cf-all { color:var(--text-dim); border-bottom:1px solid var(--border); margin-bottom:2px; padding-bottom:4px; }
.cf-list .cf-v { overflow:hidden; text-overflow:ellipsis; flex:1; }
.cf-list .cf-n { color:var(--text-dim); font-size:10px; }
.cf-foot { padding:6px; display:flex; gap:6px; }
.cf-clear { cursor:pointer; color:var(--accent); font-size:10px; white-space:nowrap; }
.cf-clear:hover { text-decoration:underline; }

/* ── Type, unified to the other dashboard's rule: IBM Plex Mono on everything data-like — tables,
   grids, chips, pills, controls, status lines — and IBM Plex Sans only for prose and titles. Both
   dashboards load the same two fonts; the difference was that this one mixed them within a panel. */
.data-table, .matrix, .blotter-bar, .inbox-bar, .inbox-sec, .tbl-tools,
.hdr-sel, .hdr-chk, .dl-btn, .t-btn, .admin-btn-secondary, .mx-unitsel,
.acct-chip, .status-pill, .t-badge, .chip, .mx-clr, .mx-view, .demo-tag,
.stat-tile, .panel-status, .panel-header .hdr-sel, .form-input, .form-select, .entry-grid,
.tree-row, .admin-card table, pre, code { font-family:var(--font-mono); }
.panel-header .panel-title, .admin-card h2, .admin-card h3, .panel-empty, .login-logo-sub { font-family:var(--font-ui); }

/* Sticky cells must never be translucent: anything scrolling underneath shows through. Every tint
   on the month column and the header rows is layered over a solid base, and these rules win. */
.matrix thead th { background:var(--header-bg) !important; }
.matrix thead th.mx-b2 { background:linear-gradient(rgba(255,255,255,0.018), rgba(255,255,255,0.018)), var(--header-bg) !important; }
.matrix th.matrix-corner, .matrix th.matrix-rowhead { background:var(--panel-bg) !important; }
.matrix tbody tr.matrix-day th.matrix-rowhead { background:linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--panel-bg) !important; }
.matrix tbody tr.mx-pastrow th.matrix-rowhead { background:linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--panel-bg) !important; }
.matrix tbody tr:hover th.matrix-rowhead { background:linear-gradient(rgba(77,128,240,0.08), rgba(77,128,240,0.08)), var(--panel-bg) !important; }
.matrix tfoot tr.matrix-total th.matrix-rowhead { background:linear-gradient(var(--total-bg), var(--total-bg)), var(--panel-bg) !important; }
.matrix tfoot tr.matrix-total td { background:linear-gradient(var(--total-bg), var(--total-bg)), var(--panel-bg) !important; }
.matrix th.matrix-rowhead, .matrix th.matrix-corner { box-shadow:1px 0 0 var(--border); }

/* company bridge: the two sides of one contract, opened under its line */
.bridge-jump { color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent); }
.bridge-detail td { background:rgba(77,128,240,0.05); padding:6px 10px 8px 34px !important; }
.bridge-side { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; padding:2px 0; }
.bridge-side > .dim.small { min-width:130px; text-transform:uppercase; letter-spacing:.05em; font-size:9.5px; }
.bridge-part { font-family:var(--font-mono); font-size:11px; }
.bridge-part b { font-weight:600; margin-left:4px; }

.recon-excluded { background:rgba(240,184,77,0.14); border:1px solid rgba(240,184,77,0.45); color:var(--amber);
                  padding:6px 10px; margin:6px 0; font-family:var(--font-mono); font-size:11px; }

.add-strat { color:var(--accent); text-decoration:none; font-size:10px; margin-left:6px; opacity:.7; }
.add-strat:hover { opacity:1; text-decoration:underline; }

/* ── Scrollbars (v105): thin and quiet, everywhere. The browser default is a bright grey bar that
   dominates every panel on a dark page. Track is transparent; the thumb is a faint translucent
   pill that brightens a little on hover so it can still be found. Firefox via scrollbar-color,
   WebKit/Chromium via the pseudo-elements; both apply to every scrolling box. ── */
* { scrollbar-width: thin; scrollbar-color: rgba(120,140,190,0.28) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(120,140,190,0.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(140,160,210,0.45); border: 2px solid transparent; background-clip: padding-box; }
*:hover { scrollbar-color: rgba(140,160,210,0.40) transparent; }

/* ── Pricing month by day (v110). Weekend rows and holiday cells are blank and tinted, so a wrong
   holiday calendar shows at a glance; the tints layer over the column banding and the sticky
   month column's solid base. ── */
.mx-pricing-tag { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-left:6px; opacity:.85; }
.matrix tbody tr.mx-dayrow th.matrix-dayhead { padding-left:22px !important; text-transform:none !important; color:var(--text-dim); }
.matrix tbody tr.mx-we th, .matrix tbody tr.mx-we td { background-image:linear-gradient(rgba(120,140,190,0.10), rgba(120,140,190,0.10)) !important; }
.matrix tbody tr.mx-we th.matrix-dayhead { color:rgba(120,140,190,0.75); }
.matrix tbody td.mx-holcell { background-image:linear-gradient(rgba(240,180,60,0.16), rgba(240,180,60,0.16)) !important; }
.mx-leg { display:inline-block; padding:0 6px; border-radius:3px; font-size:10px; line-height:16px; margin-left:4px; }
.mx-leg-we { background:rgba(120,140,190,0.18); color:var(--text-dim); }
.mx-leg-hol { background:rgba(240,180,60,0.22); color:var(--amber); }
/* days already priced: dimmed but readable; the viewed day: lit */
.matrix tbody tr.mx-priced td.num { opacity:.42; }
.matrix tbody tr.mx-priced th.matrix-dayhead { color:rgba(120,140,190,0.6); }
.matrix tbody tr.mx-today th.matrix-dayhead { color:var(--accent); font-weight:600; }
.matrix tbody tr.mx-today th, .matrix tbody tr.mx-today td { background-image:linear-gradient(rgba(77,128,240,0.10), rgba(77,128,240,0.10)) !important; }
.matrix tbody tr.mx-nobase th.matrix-dayhead { font-style:italic; opacity:.6; }
.mx-autotag { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-left:4px; opacity:.8; }
.t-btn.book-row:disabled { opacity:.35; cursor:default; color:var(--text-dim); border-color:transparent; }
.t-btn.book-row:disabled:hover { background:none; }
.mx-autotag.mx-warn { color:var(--amber); border-color:var(--amber); }

/* The matrix name header is a flex row: the name truncates, the tags and the split mark never
   leave the column. Before, a long family name pushed the X past the cell's edge and the cell's
   overflow:hidden swallowed it (Marius, 2026-09-26). */
.matrix th.matrix-name .mx-headrow { display:flex; align-items:center; gap:3px; min-width:0; width:100%; }
.matrix th.matrix-name .mx-namewrap { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matrix th.matrix-name .mx-autotag { flex:0 0 auto; }
.mx-unmerge { flex:0 0 auto; background:none; border:none; padding:0 2px; margin:0; font-size:10px; line-height:1; color:var(--text-dim); opacity:.45; cursor:pointer; }
.mx-unmerge:hover { opacity:1; color:var(--red); }
.pill { display:inline-block; padding:1px 7px; border-radius:9px; font-size:11px; border:1px solid var(--border); }
.pill-ok { color:var(--green); border-color:var(--green); }
.pill-warn { color:var(--amber); border-color:var(--amber); }
.pill-bad { color:var(--red); border-color:var(--red); }
.panel-prices .panel-head { border-top-color:#0ea5e9; }
.mx-src-other { text-decoration:underline dotted; text-underline-offset:2px; }
.mx-stale { color:var(--amber); font-size:9px; margin-left:1px; }
/* Settlement Prices: source chips in the venue row — the exchanges in the column plus each clearer */
.mx-pick { border:1px solid transparent; background:transparent; color:var(--text-dim); opacity:.7; font:inherit; font-size:10px; font-weight:400; padding:0 4px; border-radius:3px; cursor:pointer; line-height:15px; }
.mx-pick:hover { color:var(--text); border-color:var(--text-dim); opacity:1; }
.mx-pick.mx-pick-on { color:var(--text); border-color:#0ea5e9; background:rgba(14,165,233,.12); font-weight:600; opacity:1 !important; }
.mx-pick.mx-pick-off { opacity:.45; cursor:default; }
.hdr-link { margin-left:6px; font-size:11px; padding:0 4px; }
.var-add-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:6px 10px; font-size:10px; font-family:var(--font-mono); color:var(--text-dim); border-bottom:1px solid var(--border); }
.var-add-bar select { background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-family:var(--font-mono); font-size:10px; padding:2px 4px; }
.var-add-bar button { background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.5); color:var(--text); border-radius:3px; font-family:var(--font-mono); font-size:10px; padding:2px 8px; cursor:pointer; }
.var-remove { color:var(--text-dim); cursor:pointer; padding:0 4px; } .var-remove:hover { color:var(--red); }
.var-portfolio { font-weight:700; color:var(--red); }
.matrix td.mx-cmp { padding:0; }
.matrix td.mx-cmp .mx-cmp-a, .matrix td.mx-cmp .mx-cmp-b { display:inline-block; width:50%; box-sizing:border-box; padding:3px 4px; text-align:right; }
.matrix td.mx-cmp .mx-cmp-b { border-left:1px dotted var(--border); }
.matrix td.mx-cmp .mx-cmp-3 { display:inline-block; width:33.33%; box-sizing:border-box; padding:3px 3px; text-align:right; }
.matrix td.mx-cmp .mx-cmp-3 + .mx-cmp-3 { border-left:1px dotted var(--border); }
.mx-cmp-lbl .mx-cmp-3 { display:inline-block; width:33.33%; text-align:right; padding-right:3px; box-sizing:border-box; }
.price-pending { color:var(--amber); font-weight:600; }
#tblSpecialTop table.admin-table.grid thead th { cursor:pointer; user-select:none; }
.mx-fwd { font-style:italic; opacity:.75; }
.mx-live { color:var(--green); }
.mx-autotag.mx-fixed { color:var(--text); }
.mx-cmp-lbl { font-size:9px; color:var(--text-dim); display:flex; }
.mx-cmp-lbl > span { flex:1 1 50%; text-align:right; padding:0 4px; box-sizing:border-box; }
.mx-cmp-lbl > .mx-cmp-b { border-left:1px dotted var(--border); }
.matrix tr.mx-dayrow th.matrix-rowhead { padding-left:26px; font-weight:400; }
.matrix tr.matrix-total td, .matrix tr.matrix-total th { font-weight:700; border-top:1px solid var(--border); }
/* v737 (Marius): no resting band on trader rows - only the row under the mouse lights up */
.pnl-tree tr.pnl-l3 td { color:var(--text-dim); }
.pnl-tree td.num { text-align:right; white-space:nowrap; }
/* P&L Matrix: the Total column stays at the right edge while the grid scrolls */
.matrix .mx-totcol { position:sticky; right:0; z-index:3; border-left:2px solid var(--accent); background:var(--panel-bg) !important; font-weight:600; }
/* v529: the VaR panel's pinned totals, each at its own offset (Skew stress at the edge, Mirrored next, Portfolio next) */
.matrix { --mx-totw: 118px; }
.matrix .var-tot { min-width:var(--mx-totw); max-width:var(--mx-totw); width:var(--mx-totw); box-sizing:border-box; }
.matrix .mx-totcol.mx-tot-r1 { right:var(--mx-totw); }
.matrix .mx-totcol.mx-tot-r2 { right:calc(2 * var(--mx-totw)); }
.matrix tbody tr:hover > td.mx-totcol { background:linear-gradient(rgba(77,128,240,0.10), rgba(77,128,240,0.10)), var(--panel-bg) !important; }
.matrix tbody tr.matrix-total td.mx-totcol { background:var(--panel-bg) !important; }
.matrix thead th.mx-totcol { z-index:4; background:var(--header-bg) !important; }
.matrix td.mx-totcol.mx-grand { font-weight:800; color:var(--text-bright); }
.matrix th.matrix-unit { font-weight:400; }

/* v245: grouped action rows (Prices → Curves): a small label over each group, controls of one height */
.act-groups { display:flex; gap:28px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px solid var(--border-light); }
.act-group { display:flex; flex-direction:column; gap:5px; }
.act-label { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.act-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.act-row .admin-btn-secondary { align-self:center; height:28px; padding:0 12px; white-space:nowrap; }
.act-join { display:inline-flex; align-items:center; }
.act-date { height:28px; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-right:none; border-radius:4px 0 0 4px; color:var(--text-bright); font-family:var(--font-mono); font-size:11px; padding:0 8px; width:128px; color-scheme:dark; }
.act-join .admin-btn-secondary { border-radius:0 4px 4px 0; }

/* v253: the inbox's sections share one scrolling area; each has its own height and a drag strip.
   (As direct flex children of a sized panel body they squeezed each other to nothing.) */
.inbox-wrap { overflow:auto; }
.panel.panel-sized .panel-body > .inbox-wrap { flex:1 1 auto; min-height:0; }
.inbox-secbody { overflow:auto; }
.inbox-resize { height:9px; cursor:row-resize; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.inbox-resize::after { content:''; width:40px; height:3px; border-radius:2px; background:rgba(255,255,255,0.12); }
.inbox-resize:hover { background:rgba(77,128,240,0.18); }
.inbox-resize:hover::after { background:var(--accent); }

/* v263: a tab keeps the width of its name (never squeezed by its neighbours), up to a cap; past
   the cap the name ends in an ellipsis and the tab's tooltip carries it whole */
.view-tab { flex:0 0 auto; max-width:280px; }
.view-tab .tab-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.view-tabs-bar { scrollbar-width:thin; }

/* v395: the Performance panel (ported from the Tron dashboard) */
.panel-perf .panel-accent-bar { background: linear-gradient(90deg, #0ea5e9, #38bdf8); } .panel-perf .panel-title { color: #38bdf8; }
.panel-perf .dl-btn { color: #0ea5e9; border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.08); }
.panel-perf .dl-btn:hover { background: rgba(14,165,233,0.2); border-color: #0ea5e9; }
.perf-row-y:hover, .perf-row-q:hover, .perf-row-m:hover, .perf-row-d:hover { background: rgba(255,255,255,0.03); }
.perf-arrow { display: inline-block; font-size: 8px; margin-right: 6px; transition: transform 0.15s; color: var(--text-dim); }
.perf-expanded > td > .perf-arrow { transform: rotate(90deg); }
.perf-metric-btn { font-family: inherit; font-size: 10px; padding: 3px 10px; border-radius: 3px; cursor: pointer; transition: all 0.1s; border: 1px solid rgba(148,163,184,0.2); background: rgba(148,163,184,0.05); color: var(--text-dim); white-space: nowrap; }
.perf-metric-btn.active { background: rgba(148,163,184,0.12); }
.perf-metric-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* v406 / v407: overview trees — the P&L panel's look (matrix-exp, pnl-l1..3) */
.tree-table td.text { white-space:nowrap; }
.tree-table tr.tree-unalloc td.text { font-style:italic; }

/* ── v521: VaR Evolution panel (Tron's .var-evo-* styles) ── */
.panel-var-evo .panel-accent-bar { background: linear-gradient(90deg, #6366f1, #818cf8); } .panel-var-evo .panel-title { color: #818cf8; }
.panel-var-evo .dl-btn { color: #6366f1; border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.08); }
.panel-var-evo .dl-btn:hover { background: rgba(99,102,241,0.2); border-color: #6366f1; }
.var-evo-period-bar { display:flex; align-items:center; gap:4px; padding:5px 10px; border-bottom:1px solid var(--border); font-size:10px; flex-wrap:wrap; }
.var-evo-period-btn { font-family: inherit; font-size:9px; padding:2px 8px; border-radius:3px; border:1px solid rgba(99,102,241,0.25); background:transparent; color:#9ca3af; cursor:pointer; font-weight:500; }
.var-evo-period-btn:hover { color:#6366f1; border-color:rgba(99,102,241,0.5); }
.var-evo-period-btn.active { background:rgba(99,102,241,0.18); color:#6366f1; border-color:rgba(99,102,241,0.5); font-weight:600; }
.var-evo-date-input { font-family: inherit; font-size:9px; padding:2px 4px; border-radius:3px; border:1px solid var(--border); background:rgba(0,0,0,0.2); color:inherit; width:110px; }
.var-evo-add-bar { display:flex; align-items:center; gap:6px; padding:5px 10px; border-bottom:1px solid var(--border); font-size:10px; flex-wrap:wrap; }
.var-evo-add-bar select { font-family: inherit; font-size:10px; padding:2px 4px; border-radius:4px; border:1px solid var(--border); background:rgba(0,0,0,0.2); color:inherit; max-width:320px; }
.var-evo-add-bar select option { background:#1e1e2e; color:#e0e0e0; }
.var-evo-add-btn { font-family: inherit; font-size:10px; padding:3px 10px; border-radius:4px; border:1px solid rgba(99,102,241,0.4); background:rgba(99,102,241,0.15); color:#6366f1; cursor:pointer; font-weight:600; }
.var-evo-add-btn:hover { background:rgba(99,102,241,0.3); }
.var-evo-chart { position:relative; width:100%; height:300px; cursor:crosshair; }
.var-evo-tooltip { position:absolute; pointer-events:none; background:rgba(22,30,48,0.95); border:1px solid var(--border); border-radius:4px; padding:5px 8px; font-size:9px; font-family:'IBM Plex Mono',monospace; color:#e0e0e0; z-index:10; white-space:nowrap; display:none; }
.var-evo-tooltip-date { font-weight:600; color:#6366f1; margin-bottom:3px; }
.var-evo-tooltip-row { display:flex; align-items:center; gap:4px; margin:1px 0; }
.var-evo-tooltip-swatch { width:8px; height:2px; border-radius:1px; display:inline-block; }
.var-evo-legend { display:flex; flex-wrap:wrap; gap:8px; padding:6px 10px; font-size:9px; font-family:'IBM Plex Mono',monospace; }
.var-evo-legend-item { display:flex; align-items:center; gap:4px; cursor:pointer; opacity:0.9; }
.var-evo-legend-item.hidden { opacity:0.3; text-decoration:line-through; }
.var-evo-legend-swatch { width:12px; height:3px; border-radius:1px; }
.var-evo-legend-remove { font-size:8px; color:#666; margin-left:2px; cursor:pointer; }
.var-evo-legend-remove:hover { color:#ef4444; }

/* v551: a full-width block inside a property sheet (the API keys of a user) */
.prop-sheet .ps-block { grid-column:1 / -1; padding:12px 14px 14px; border-bottom:1px solid var(--border-light); white-space:normal; overflow:visible; }
.ak-intro { font-size:11px; color:var(--text-dim); margin-bottom:10px; }
.ak-intro a { color:var(--accent); }
.ak-create { display:grid; grid-template-columns:minmax(200px, 1fr) auto auto; gap:10px 14px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:var(--header-bg); margin-bottom:12px; }
.ak-create .form-input { width:100%; }
.ak-scopes { display:flex; flex-direction:column; gap:6px; }
.ak-scopes label { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text); font-family:inherit; margin:0; }
.ak-scopes input { accent-color:var(--accent); }
.ak-create .admin-btn-primary { align-self:center; white-space:nowrap; }
.ak-new { margin-bottom:12px; padding:10px 12px; border:1px solid var(--amber); border-radius:6px; background:rgba(245,158,11,0.08); font-size:11px; }
.ak-new code { display:inline-block; margin:6px 8px 6px 0; padding:5px 8px; background:var(--panel-bg, #11162a); border:1px solid var(--border); border-radius:4px; font-size:12px; user-select:all; word-break:break-all; }
.ak-table { width:100%; border-collapse:collapse; font-size:11px; }
.ak-table th { text-align:left; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:6px 8px; border-bottom:1px solid var(--border); }
.ak-table td { padding:6px 8px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.ak-table td.num, .ak-table th.num { text-align:right; }
.ak-table tr.ak-revoked td { opacity:.5; }
.ak-empty { font-size:11px; color:var(--text-dim); padding:6px 0; }
.ak-pick { width:100%; border-collapse:collapse; font-size:12px; }
.ak-pick th { text-align:left; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:6px 10px; border-bottom:1px solid var(--border); }
.ak-pick td { padding:7px 10px; border-bottom:1px solid var(--border-light); }
.ak-pick tr:hover td { background:var(--header-bg); }
.ak-pick td.num { text-align:right; }
/* v589: the grids' ⚙ columns menu (the entry grid's Columns menu, per panel) */
.hdr-gear { margin-left:4px; }

/* v593: a clearer's per-lot lines folded into one fill row; the lots under an expander */
.fold-btn { background:none; border:1px solid var(--border); color:var(--fg-dim); border-radius:3px; cursor:pointer; font-size:11px; line-height:1; padding:1px 4px; margin-left:4px; vertical-align:middle; }
.fold-btn:hover { color:var(--fg); border-color:var(--fg-dim); }
.data-table tbody tr.lot-row > td { opacity:0.8; font-size:0.95em; background:rgba(255,255,255,0.025); }
.data-table tbody tr.lot-row > td.text:first-of-type { padding-left:18px; }
/* v595: a book under its trader in the sidebar */
.book-group.book-sub { padding-left:12px; }
.book-group.book-sub + label.book-item, .book-group.book-sub ~ label.book-item { }

/* v649: Data readiness live cell — status left, slim order pill right, one row */
.lo-cell { display:flex; align-items:center; gap:10px; justify-content:space-between; min-width:260px; }
.lo-used { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lo-btn { background:transparent; border:1px solid currentColor; border-radius:3px; font:inherit; font-size:11px; padding:1px 7px; cursor:pointer;
          max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.lo-btn:hover { opacity:1; background:rgba(255,255,255,0.05); }
.lo-sel { flex:0 0 auto; appearance:none; -webkit-appearance:none; background-color:transparent; color:var(--text-dim);
          border:1px solid var(--border); border-radius:10px; font-family:var(--font-mono); font-size:10px; padding:1px 18px 1px 8px; cursor:pointer;
          outline:none; opacity:.55; transition:opacity .12s, border-color .12s;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238a93a6'/%3E%3C/svg%3E");
          background-repeat:no-repeat; background-position:right 7px center; }
tr:hover .lo-sel, .lo-sel:focus { opacity:1; border-color:var(--accent); color:var(--text); }
.lo-sel.custom { opacity:1; color:var(--amber); border-color:var(--amber); }
.lo-sel option { background:var(--panel-bg); color:var(--text); }

/* v661: a live cell that moved since the last render flashes for a moment */
@keyframes tick-up-flash { 0% { background: rgba(34,197,94,0.45); } 100% { background: transparent; } }
@keyframes tick-down-flash { 0% { background: rgba(239,68,68,0.45); } 100% { background: transparent; } }
td.tick-up { animation: tick-up-flash 1.2s ease-out; }
td.tick-down { animation: tick-down-flash 1.2s ease-out; }

/* v707: the Risk Assistant, in the style of a Claude chat */
.asst { display:flex; flex-direction:column; min-height:320px; max-width:820px; margin:0 auto; font-size:14px; }
.asst-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.asst-threads { background:transparent; border:1px solid transparent; color:var(--text-dim, #8a9bbf); font-size:12px; padding:4px 6px; border-radius:6px; max-width:60%; }
.asst-threads:hover { border-color:var(--border); }
.asst-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--border); margin-right:6px; vertical-align:middle; }
.asst-dot.on { background:#3ddc84; }
.asst-chat { flex:1; max-height:560px; overflow:auto; display:flex; flex-direction:column; gap:18px; padding:14px 6px 10px; }
.asst-row { display:flex; gap:12px; align-items:flex-start; }
.asst-row-user { justify-content:flex-start; }
.asst-avatar { flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; margin-top:2px; }
.asst-user { flex:1; min-width:0; background:var(--panel-bg); border:1px solid var(--border-light); border-radius:14px; padding:10px 16px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.asst-mark { flex:none; width:26px; height:26px; border-radius:50%; background:#d97757; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:2px; }
.asst-mark.pulse { animation:asstPulse 1.4s ease-in-out infinite; }
@keyframes asstPulse { 0%, 100% { opacity:0.45; transform:scale(0.9); } 50% { opacity:1; transform:scale(1.05); } }
.asst-bot { flex:1; min-width:0; }
.asst-body { line-height:1.6; color:var(--text-bright); }
.asst-body p { margin:0 0 10px; } .asst-body p:last-child { margin-bottom:0; }
.asst-body ul, .asst-body ol { margin:4px 0 10px 20px; padding:0; } .asst-body li { margin:3px 0; }
.asst-body code { background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; font-size:12.5px; }
.asst-pre { background:rgba(0,0,0,0.28); border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow:auto; font-size:12.5px; margin:6px 0 10px; }
.asst-h1, .asst-h2, .asst-h3 { font-weight:600; margin:12px 0 6px; } .asst-h1 { font-size:16px; } .asst-h2 { font-size:15px; } .asst-h3 { font-size:14px; }
.asst-table { border-collapse:collapse; margin:6px 0 10px; font-size:12.5px; }
.asst-table th, .asst-table td { border-bottom:1px solid var(--border-light); padding:5px 10px; text-align:left; } .asst-table th { font-weight:600; color:var(--text-dim, #8a9bbf); }
.asst-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.asst-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; font-size:11px; color:var(--text-dim, #8a9bbf); }
.asst-tool { border:1px solid var(--border); border-radius:10px; padding:1px 7px; } .asst-tool.bad { border-color:var(--red); color:var(--red); }
.asst-check.bad { color:var(--red); }
.asst-thinking { color:var(--text-dim, #8a9bbf); padding-top:4px; }
.asst-empty { margin:auto; text-align:center; max-width:560px; padding:36px 8px 24px; }
.asst-empty-mark { width:40px; height:40px; border-radius:50%; background:#d97757; color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 14px; }
.asst-empty-title { font-size:19px; font-weight:500; margin-bottom:16px; color:var(--text-bright); }
.asst-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.asst-chip { border:1px solid var(--border); border-radius:12px; padding:7px 12px; font-size:12.5px; cursor:pointer; color:var(--text-dim, #8a9bbf); }
.asst-chip:hover { border-color:var(--accent); color:var(--text-bright); background:var(--accent-dim); }
.asst-composer { margin-top:10px; border:1px solid var(--border); border-radius:18px; padding:12px 14px 8px; background:var(--panel-bg); box-shadow:0 6px 24px rgba(0,0,0,0.25); }
.asst-composer:focus-within { border-color:var(--accent); }
.asst-composer.off { opacity:0.6; }
.asst-composer textarea { width:100%; border:none; background:transparent; resize:none; outline:none; color:var(--text-bright); font:inherit; font-size:14px; line-height:1.5; max-height:200px; padding:0; display:block; }
.asst-composer-bar { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.asst-send { width:32px; height:32px; border-radius:50%; border:none; background:#d97757; color:#fff; cursor:pointer; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.asst-send:disabled { opacity:0.3; cursor:default; }

/* v711: VaR rows dragged to reorder */
.matrix th.var-grab { cursor: grab; }
.matrix tr.var-drop-before > th, .matrix tr.var-drop-before > td { box-shadow: inset 0 3px 0 var(--accent); }
.matrix tr.var-drop-after > th, .matrix tr.var-drop-after > td { box-shadow: inset 0 -3px 0 var(--accent); }

/* v711: the tree tables' first column frozen on the left */
.tree-table td.tree-first, .tree-table th.tree-first { position:sticky; left:0; background-color:var(--panel-bg); box-shadow:inset -1px 0 0 var(--border); }
.tree-table td.tree-first { z-index:1; }
.tree-table th.tree-first { z-index:4; background-color:var(--header-bg); }
.tree-table tr.total td.tree-first { z-index:2; background-color:var(--header-bg); }   /* v712: the total row's label stays frozen too */
/* v721 (Marius, 27 Oct): the row hover (.data-table tr:hover td) painted the frozen first cell with a see-through colour, so the
   numbers scrolled underneath showed through on hover - the frozen cell keeps an opaque ground under the hover tint */
.data-table.tree-table tr:hover td.tree-first { background:linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--panel-bg); }
.data-table.tree-table tr.total:hover td.tree-first { background:var(--header-bg); }

/* v734: column widths - the grip on a header's right edge */
/* (a sticky header is already a positioned box, so the grip sits on its edge - no position:relative, which would undo the sticky header) */
.col-grip { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:2; }
.col-grip:hover, body.col-resizing .col-grip { background:var(--accent); opacity:0.5; }
body.col-resizing, body.col-resizing * { cursor:col-resize !important; user-select:none; }

/* v737 (Marius): the whole row lights up under the mouse - every cell, the frozen first one included */
.data-table tbody tr:not(.total):hover > td { background:rgba(77,128,240,0.10); }
.data-table.tree-table tbody tr:not(.total):hover > td.tree-first { background:linear-gradient(rgba(77,128,240,0.10), rgba(77,128,240,0.10)), var(--panel-bg); }