/* AlgoLab — Data page (dp-), Report page (rp-), report builder (rb-) and shared bits (pk-).
   Loaded globally by Dash from /assets: every rule is scoped under .pk-scope (the page roots
   and the drawers) or uses a page prefix. Same tokens as the connect-nodes editor
   (agx_style.css) and the Deep Learning Studio: panels rgba(0,0,0,0.6), chips
   rgba(255,255,255,0.06), radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff,
   accent #f0a030; node colours Data #5b8def, Custom #3fb6c9, Features #f0a030,
   Models #9a6ee0, Rules #5fbf6a. */

.pk-scope { color: #e8e8e8; font-size: 13px; }
.pk-scope * { box-sizing: border-box; }

/* ---------- shared --------------------------------------------------------- */
.pk-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pk-card-title { color: #cfefff; font-weight: 600; font-size: .88rem; margin-bottom: 2px; }
.pk-card-sub { color: #9fb3c8; font-size: .72rem; margin-bottom: 8px; line-height: 1.4; }
.pk-role { display: inline-block; font-size: .6rem; text-transform: uppercase; letter-spacing: .7px; padding: 0 7px; border-radius: 8px;
           margin-bottom: 5px; border: 1px solid currentColor; }
.pk-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pk-chip { font-size: .66rem; border: 1px solid; border-radius: 8px; padding: 0 7px; line-height: 1.7; white-space: nowrap; }
.pk-chip.soft { border-color: rgba(255,255,255,0.15); color: #cfdcea; background: rgba(255,255,255,0.05); }
.pk-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.pk-kpi { flex: 1 1 110px; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 7px 10px; }
.pk-kv { font-size: 1.12rem; font-weight: 600; color: #cfefff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-kl { font-size: .66rem; color: #9fb3c8; }
.pk-muted { color: #9fb3c8; }
.pk-scope .pk-btn, .pk-scope .dp-btn, .pk-scope .rp-btn, .pk-scope .rb-btn {
  background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 4px 10px; font-size: .78rem; white-space: nowrap; cursor: pointer; }
.pk-scope .pk-btn:hover, .pk-scope .dp-btn:hover, .pk-scope .rp-btn:hover, .pk-scope .rb-btn:hover { border-color: #f0a030; }
.pk-scope .acc { border-color: rgba(240,160,48,0.65); color: #f5d6a3; background: rgba(240,160,48,0.08); }
.pk-scope .on { border-color: rgba(95,191,106,0.7); color: #bfe8c4; background: rgba(95,191,106,0.10); }
.pk-scope .danger:hover { border-color: #ff7b72; color: #ffb4ac; }
.pk-scope button:disabled { opacity: .35; cursor: not-allowed; }

/* dark form controls inside the new pages */
.pk-scope input[type=text], .pk-scope input[type=password], .pk-scope input[type=number], .pk-scope input[type=search], .pk-scope textarea {
  background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 4px 9px; font-size: .8rem; outline: none; width: 100%; }
.pk-scope input:focus, .pk-scope textarea:focus { border-color: #f0a030; }
.pk-scope .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important;
                            border-radius: 8px !important; min-height: 30px; }
.pk-scope .Select-value-label, .pk-scope .Select-input > input, .pk-scope .Select-multi-value-wrapper { color: #e8e8e8 !important; font-size: .8rem; }
.pk-scope .Select--multi .Select-value { background: rgba(240,160,48,0.12) !important; border-color: rgba(240,160,48,0.45) !important; color: #f5d6a3 !important; border-radius: 6px; }
.pk-scope .Select--multi .Select-value-icon { border-right-color: rgba(240,160,48,0.45) !important; }
.pk-scope .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 8px !important; z-index: 10060 !important; }
.pk-scope .VirtualizedSelectOption { color: #e8e8e8; font-size: .8rem; }
.pk-scope .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.18) !important; }
.pk-scope .Select-arrow { border-top-color: #9fb3c8 !important; }
.pk-scope .Select-placeholder { color: #6f8295 !important; font-size: .8rem; }
.pk-scope .form-check-input:checked { background-color: #f0a030; border-color: #f0a030; }

/* chip-style checklists / radios (dcc.Checklist / RadioItems with className pk-pills) */
.pk-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pk-pills > label, .pk-pills label { display: inline-flex !important; align-items: center; margin: 0 !important; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 1px 9px;
  font-size: .72rem; color: #cfdcea; transition: all .1s; }
.pk-pills > label:hover { background: rgba(255,255,255,0.09); }
.pk-pills > label:has(input:checked) { border-color: #f0a030; background: rgba(240,160,48,0.12); color: #f5d6a3; }
.pk-pills input { display: none; }

/* tiles (RadioItems styled as cards) */
.pk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.pk-tiles > label { display: block; margin: 0; cursor: pointer; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 7px 9px; transition: all .12s; }
.pk-tiles > label:hover { background: rgba(255,255,255,0.085); }
.pk-tiles > label:has(input:checked) { border-color: #f0a030; background: rgba(240,160,48,0.10); }
.pk-tiles > label:has(input:disabled) { opacity: .3; cursor: not-allowed; }
.pk-tiles input { display: none; }
.pk-tt { font-weight: 600; color: #cfefff; font-size: .8rem; }
.pk-tt i { margin-right: 6px; color: #f0a030; width: 14px; }
.pk-td { color: #9fb3c8; font-size: .68rem; line-height: 1.35; margin-top: 2px; }

/* drawers (dbc.Offcanvas with className pk-drawer) */
.offcanvas.pk-drawer { color: #e8e8e8; background: linear-gradient(160deg, rgb(8,12,17) 0%, rgb(14,22,30) 100%);
  border-color: rgba(255,255,255,0.08) !important; }
.offcanvas.pk-drawer .offcanvas-header { padding: 12px 16px 6px; }
.offcanvas.pk-drawer .offcanvas-title { color: #cfefff; font-size: 1rem; font-weight: 600; }
.offcanvas.pk-drawer .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.offcanvas.pk-drawer .offcanvas-body { padding: 4px 16px 16px; }

/* ---------- Data page -------------------------------------------------------- */
.dp-page { height: calc(100vh - 84px); padding: 6px 1.2vw 8px; }
.dp-main { display: flex; gap: 12px; height: 100%; }
.dp-rail { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.dp-center { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; }
.dp-side { width: 330px; flex: 0 0 330px; overflow-y: auto; }
.dp-page.shifted .dp-rail { visibility: hidden; width: 426px; flex-basis: 426px; }
.dp-rail-h { color: #cfefff; font-weight: 600; font-size: .92rem; padding: 2px 4px 0; }
.dp-rail-s { color: #9fb3c8; font-size: .7rem; padding: 0 4px 4px; }
.dp-group { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.07); border-left: 4px solid; border-radius: 10px; padding: 9px 10px; color: #e8e8e8; cursor: pointer; }
.dp-group:hover { background: rgba(255,255,255,0.06); }
.dp-group.active { box-shadow: 0 0 0 1px #f0a030; background: rgba(240,160,48,0.07); }
.dp-group i { font-size: 1.05rem; width: 22px; text-align: center; }
.dp-gt { font-weight: 600; color: #cfefff; font-size: .84rem; }
.dp-gs { color: #9fb3c8; font-size: .68rem; line-height: 1.3; }
.dp-gn { margin-left: auto; color: #6f8295; font-size: .66rem; white-space: nowrap; }
.dp-coverage { margin-top: auto; }
.dp-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); display: flex; overflow: hidden; margin: 5px 0 4px; }
.dp-bar > span { height: 100%; }
.dp-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .64rem; color: #9fb3c8; }
.dp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }

/* browser drawer */
.dp-ds-tabs { margin: 2px 0 8px; }
.dp-fields { margin: 6px 0 4px; }
.dp-lbl { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 3px; }
.dp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: .76rem; margin: 8px 0 6px; }
.dp-crumbs button { border: none; background: none; color: #f0a030; padding: 0 2px; cursor: pointer; font-size: .76rem; }
.dp-crumbs button:hover { text-decoration: underline; }
.dp-crumbs span { color: #6f8295; }
.dp-list { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow-y: auto; max-height: calc(100vh - 290px); background: rgba(0,0,0,0.35); }
.dp-dir { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; color: #e8e8e8; text-align: left;
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: .8rem; cursor: pointer; }
.dp-dir:hover { background: rgba(255,255,255,0.05); }
.dp-dir i { color: #6f8295; }
.dp-dir .dp-n { margin-left: auto; color: #6f8295; font-size: .68rem; }
.dp-leaf { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dp-leaf.focus { background: rgba(240,160,48,0.07); }
.dp-leaf-b { flex: 1; min-width: 0; border: none; background: none; color: #e8e8e8; text-align: left; padding: 5px 6px 5px 10px; cursor: pointer; }
.dp-leaf-b:hover { background: rgba(255,255,255,0.05); }
.dp-leaf-t { font-size: .8rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-leaf-m { font-size: .66rem; color: #9fb3c8; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dp-pick { flex: 0 0 34px; border: none; border-left: 1px solid rgba(255,255,255,0.05); background: none; color: #9fb3c8;
  font-size: 1rem; cursor: pointer; }
.dp-pick:hover { color: #f0a030; background: rgba(240,160,48,0.08); }
.dp-pick.on { color: #5fbf6a; }
.dp-more { color: #9fb3c8; font-size: .72rem; padding: 7px 10px; }
.dp-foot { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .72rem; color: #9fb3c8; }
.dp-foot .dp-btn { font-size: .72rem; padding: 2px 8px; }
.dp-facet { margin-bottom: 4px; }

/* doc viewer */
.dp-doc { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 14px 16px; min-height: 100%; }
.dp-doc-head { margin-bottom: 10px; }
.dp-title-row { display: flex; align-items: baseline; gap: 12px; }
.dp-title { color: #cfefff; font-size: 1.25rem; font-weight: 600; margin: 2px 0 2px; }
.dp-code-big { font-family: Consolas, monospace; color: #f0a030; font-size: .85rem; }
.dp-lead { color: #cfdcea; font-size: .86rem; line-height: 1.5; margin: 2px 0 10px; max-width: 980px; }
.dp-center { container-type: inline-size; }
.dp-doc-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: 14px; }
@container (max-width: 820px) { .dp-doc-grid { grid-template-columns: 1fr; } }
.dp-example { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; }
.dp-example.empty { padding: 14px; }
.dp-graph { width: 100%; }
.dp-caption { color: #9fb3c8; font-size: .72rem; margin-top: 4px; line-height: 1.4; }
.dp-sec { margin-bottom: 12px; }
.dp-sec-t { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.dp-sec ul { padding-left: 17px; margin: 0; }
.dp-sec li { font-size: .8rem; line-height: 1.5; margin-bottom: 3px; color: #dfe7ee; }
.dp-sec li b { color: #cfefff; font-weight: 600; }
.dp-note { color: #9fb3c8; font-size: .78rem; line-height: 1.5; }
.dp-overview { color: #cfdcea; font-size: .84rem; line-height: 1.6; max-width: 980px; margin: 4px 0 12px; }
.dp-kv { width: 100%; font-size: .74rem; border-collapse: collapse; }
.dp-kv td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.dp-k { color: #9fb3c8; white-space: nowrap; width: 38%; }
.dp-v { color: #e8e8e8; word-break: break-word; }
.dp-params { width: 100%; font-size: .74rem; border-collapse: collapse; }
.dp-params th { color: #9fb3c8; font-weight: 500; font-size: .66rem; text-transform: uppercase; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dp-params td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; color: #dfe7ee; }
.dp-code { font-family: Consolas, monospace; color: #f0a030; white-space: nowrap; }
.dp-pre { font-family: Consolas, monospace; font-size: .7rem; color: #cfdcea; background: rgba(255,255,255,0.04); border-radius: 8px;
  padding: 8px 10px; white-space: pre-wrap; margin: 0; max-height: 260px; overflow-y: auto; }
.dp-links { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-linkbtn { background: rgba(255,255,255,0.05); color: #cfefff; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 2px 10px; font-size: .74rem; cursor: pointer; }
.dp-linkbtn:hover { border-color: #f0a030; }
.dp-welcome h3 { color: #cfefff; font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; }
.dp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.dp-step { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; }
.dp-step b { color: #f0a030; font-size: 1.1rem; display: block; }
.dp-step div { color: #cfdcea; font-size: .78rem; line-height: 1.45; }

/* selection basket */
.dp-basket-ds { border-top: 1px solid rgba(255,255,255,0.06); padding: 6px 0; }
.dp-basket-ds:first-of-type { border-top: none; }
.dp-basket-h { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #cfefff; font-weight: 600; margin-bottom: 3px; }
.dp-basket-h .dp-n { margin-left: auto; color: #6f8295; font-weight: 400; font-size: .68rem; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 0 3px 0 8px;
  font-size: .7rem; color: #e8e8e8; max-width: 100%; }
.dp-tag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.dp-tag button { border: none; background: none; color: #6f8295; cursor: pointer; padding: 0 3px; font-size: .8rem; }
.dp-tag button:hover { color: #ff9b92; }
.dp-fieldline { font-size: .66rem; color: #f0a030; margin-top: 3px; }
.dp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dp-actions .dp-btn { flex: 1 1 auto; }
.dp-toast { background: rgba(95,191,106,0.10); border: 1px solid rgba(95,191,106,0.45); color: #cfeecf; border-radius: 10px;
  padding: 8px 10px; font-size: .76rem; margin-bottom: 10px; line-height: 1.45; }
.dp-toast.bad { background: rgba(255,90,80,0.10); border-color: rgba(255,90,80,0.45); color: #ffc9c3; }
.dp-toast b { color: #fff; }

/* custom data panel */
.dp-upload { border: 1px dashed rgba(240,160,48,0.55); border-radius: 10px; padding: 14px; text-align: center; color: #cfdcea;
  background: rgba(240,160,48,0.04); cursor: pointer; font-size: .82rem; }
.dp-upload:hover { background: rgba(240,160,48,0.09); }

/* ---------- Report page ------------------------------------------------------- */
.rp-page { height: calc(100vh - 84px); overflow-y: auto; padding: 6px 1.4vw 30px; }
.rp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-title { color: #cfefff; font-size: 1.2rem; font-weight: 600; }
.rp-sub { color: #9fb3c8; font-size: .74rem; }
.rp-head .rp-btn { font-size: .8rem; padding: 5px 12px; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1150px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-card { grid-column: span 2; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 14px 12px; min-width: 0; }
.rp-card.half { grid-column: span 1; }
@media (max-width: 1150px) { .rp-card.half { grid-column: span 1; } .rp-card { grid-column: span 1; } }
.rp-card-h { display: flex; align-items: flex-start; gap: 10px; }
.rp-card-t { color: #e8f4ff; font-weight: 600; font-size: .95rem; }
.rp-card-d { color: #9fb3c8; font-size: .78rem; margin: 2px 0 6px; white-space: pre-line; line-height: 1.45; }
.rp-tools { margin-left: auto; display: flex; gap: 3px; flex: 0 0 auto; }
.rp-tool { border: 1px solid transparent; background: none; color: #6f8295; border-radius: 7px; padding: 1px 6px; font-size: .76rem; cursor: pointer; }
.rp-tool:hover { color: #e8e8e8; border-color: rgba(255,255,255,0.15); }
.rp-tool.del:hover { color: #ff9b92; border-color: rgba(255,90,80,0.5); }
.rp-tool.armed { color: #ffb4ac; border-color: rgba(255,90,80,0.6); background: rgba(255,90,80,0.12); }
.rp-body { min-width: 0; }
.rp-tool.off { opacity: .25; pointer-events: none; }
.rp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-card.half .rp-grid2, .rb-right .rp-grid2.narrow { grid-template-columns: 1fr; }
@media (max-width: 1150px) { .rp-grid2 { grid-template-columns: 1fr; } }
.rp-cell { min-width: 0; }
.rp-stack > * { margin-bottom: 4px; }
.rp-graph { width: 100%; }
.rp-md { color: #dfe7ee; font-size: .88rem; line-height: 1.6; }
.rp-md h1, .rp-md h2, .rp-md h3, .rp-md h4 { color: #cfefff; font-weight: 600; margin: 4px 0 6px; }
.rp-md h3 { font-size: 1.05rem; } .rp-md a { color: #f0a030; }
.rp-md code { color: #f0a030; background: rgba(255,255,255,0.05); border-radius: 4px; padding: 0 4px; }
.rp-page .dash-table-container .export { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 2px 10px; font-size: .72rem; margin: 0 0 6px; }
.rb-right .dash-table-container .export { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 2px 10px; font-size: .72rem; margin: 0 0 6px; }
.pk-scope .dash-spreadsheet .previous-next-container, .pk-scope .dash-table-container .previous-next-container { color: #9fb3c8; }
.pk-scope .dash-table-container .page-number input { background: rgba(255,255,255,0.06) !important; color: #e8e8e8 !important; }
@media print {
  .rp-head .rp-btn, .rp-tools, #main_tab_controls { display: none !important; }
  .rp-page { height: auto !important; overflow: visible !important; }
  .rp-card { break-inside: avoid; }
}
.rp-body.collapsed { display: none; }
.rp-legacy { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 4px; }
.rp-empty { text-align: center; padding: 70px 20px; color: #9fb3c8; border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; }
.rp-empty h4 { color: #cfefff; font-weight: 600; }
.rp-broken { color: #ffb4ac; font-size: .8rem; padding: 8px; }
.rp-table-wrap { max-height: 420px; overflow: auto; border-radius: 8px; }

/* ---------- Report builder (drawer) -------------------------------------------- */
.rb-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; height: calc(100vh - 70px); }
.rb-left { overflow-y: auto; padding-right: 4px; }
.rb-right { overflow-y: auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-right > * { flex-shrink: 0; }
.rb-step { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 9px 11px; margin-bottom: 9px; }
.rb-step-t { display: flex; align-items: center; gap: 7px; color: #cfefff; font-weight: 600; font-size: .82rem; margin-bottom: 6px; }
.rb-step-t b { display: inline-flex; width: 19px; height: 19px; border-radius: 50%; background: rgba(240,160,48,0.18); color: #f0a030;
  align-items: center; justify-content: center; font-size: .68rem; }
.rb-ctl { margin-bottom: 8px; }
.rb-ctl-l { color: #9fb3c8; font-size: .68rem; margin-bottom: 3px; }
/* series picker: one filter per dimension (assets, features); an empty filter = everything */
.rb-dims { border-left: 2px solid rgba(240,160,48,0.35); padding-left: 8px; }
.rb-dim { margin-bottom: 6px; }
.rb-dim:last-child { margin-bottom: 0; }
.rb-dim-l { display: flex; justify-content: space-between; gap: 8px; color: #cfefff; }
.rb-dim-n { color: #9fb3c8; }
.rb-dim .Select-control { max-height: 132px; overflow-y: auto; }
/* tables with a filter row (type under a header) */
.rp-table-filter .dash-filter input { color: #e8e8e8 !important; text-align: left !important; font-size: .74rem; }
.rp-table-filter .dash-filter input::placeholder { color: #6f8295 !important; }
.rp-table-filter .dash-filter .dash-filter--case { display: none; }
.rb-preview { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 14px; min-height: 380px; }
.rb-preview-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: #9fb3c8; font-size: .72rem; }
.rb-save { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; }
.rb-save-row { display: flex; gap: 10px; align-items: flex-start; }
.rb-save-row > div { flex: 1; }
.rb-msg { font-size: .76rem; color: #bfe8c4; margin-top: 6px; }
.rb-msg.bad { color: #ffb4ac; }
.rb-hint { color: #9fb3c8; font-size: .76rem; line-height: 1.5; padding: 30px; text-align: center; }
.rb-src { font-size: .7rem; color: #9fb3c8; margin-top: 4px; }

/* items of the previous report builder: tame their fixed vw / vh sizes inside a card */
.rp-legacy { overflow-x: hidden; }
.rp-legacy .div-hyperpar { height: auto !important; border: none !important; padding: 0 !important; }
.rp-legacy .dash-graph { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
.rp-legacy .dash-graph[style*="91vh"] { height: 520px !important; }
.rp-legacy .dash-table-container { max-width: 100%; }
.rp-legacy .accordion-button { font-size: .8rem; }
.rp-tool { color: #9fb3c8; border-color: rgba(255,255,255,0.08); font-size: .8rem; min-width: 26px; }
/* dcc.DatePickerSingle / Range (legacy Performance item) in the dark pages */
.pk-scope .SingleDatePickerInput, .pk-scope .DateRangePickerInput, .pk-scope .DateInput, .pk-scope .DateInput_input {
  background: rgba(255,255,255,0.06) !important; color: #e8e8e8 !important; border-radius: 8px; border-color: rgba(255,255,255,0.12) !important; }
.pk-scope .DateInput_input { font-size: .8rem !important; padding: 4px 8px !important; }

/* ---------- Data page: hide / restore side panels, maximise the centre ------------ */
.dp-panel-h { display: flex; align-items: flex-start; gap: 6px; }
.dp-panel-h > div { flex: 1; }
.pk-scope .dp-min { background: rgba(255,255,255,0.05); color: #9fb3c8; border: 1px solid rgba(255,255,255,0.1); border-radius: 7px;
  width: 24px; height: 24px; padding: 0; font-size: .85rem; line-height: 1; cursor: pointer; flex: 0 0 24px; }
.pk-scope .dp-min:hover { color: #f0a030; border-color: #f0a030; }
.dp-center { position: relative; }
.dp-center-tools { position: sticky; top: 0; height: 0; display: flex; justify-content: flex-end; z-index: 6; }
.dp-center-tools .dp-min { margin: 8px 10px 0 0; }
.dp-side-tools { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.pk-scope .dp-restore { display: none; flex: 0 0 22px; width: 22px; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(0,0,0,0.6); color: #9fb3c8; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0; font-size: .9rem; }
.pk-scope .dp-restore:hover { color: #f0a030; border-color: #f0a030; }
.dp-main.no-rail .dp-rail, .dp-main.no-side .dp-side { display: none; }
.dp-main.no-rail .dp-restore.left, .dp-main.no-side .dp-restore.right { display: flex; }
.dp-page.shifted .dp-main.no-rail .dp-rail { display: flex; }          /* the drawer needs the rail's room */
.dp-page.shifted .dp-main.no-rail .dp-restore.left { display: none; }

/* ---------- node panels (parameters drawer + input mapping): the node modules render
   their own controls with inline styles; bring them to the app look ---------------- */
.pk-nodepanel { color: #e8e8e8; font-size: 13px; }
.pk-nodepanel [style*="color: white"], .pk-nodepanel [style*="color: rgb(250, 250, 250)"],
.pk-nodepanel [style*="color: rgb(240, 240, 240)"] { color: #dfe7ee !important; }
.pk-nodepanel .div-hyperpar { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important; padding: 10px 12px !important; margin: 0 0 10px 0 !important; }
.pk-nodepanel h3 { font-size: 1rem; color: #cfefff !important; font-weight: 600; margin: 0 0 4px; }
.pk-nodepanel h4, .pk-nodepanel h5 { font-size: .86rem; color: #cfefff !important; font-weight: 600; margin: 2px 0 6px; }
.pk-nodepanel input[type=number], .pk-nodepanel input[type=text], .pk-nodepanel input:not([type]), .pk-nodepanel textarea {
  background: rgba(255,255,255,0.06) !important; color: #e8e8e8 !important; border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important; height: 32px !important; padding: 4px 9px !important; margin-left: 0 !important;
  margin-top: 4px !important; width: min(240px, 100%) !important; font-size: .82rem !important; outline: none; }
.pk-nodepanel textarea { height: auto !important; min-height: 60px; }
.pk-nodepanel input:focus, .pk-nodepanel textarea:focus { border-color: #f0a030 !important; }
.pk-nodepanel .dash-dropdown { width: min(260px, 100%) !important; height: auto !important; margin-left: 0 !important;
  margin-top: 4px !important; background: transparent !important; border: none !important; }
.pk-nodepanel .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important; min-height: 32px; height: 32px; }
.pk-nodepanel .Select-value-label, .pk-nodepanel .Select-input > input, .pk-nodepanel .Select-placeholder { color: #e8e8e8 !important; font-size: .82rem; }
.pk-nodepanel .Select-value-label > div, .pk-nodepanel .VirtualizedSelectOption > div, .pk-nodepanel .Select-option > div {
  font-size: .82rem !important; background: transparent !important; margin-left: 0 !important; color: inherit !important; }
.pk-nodepanel .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important; z-index: 10060 !important; }
.pk-nodepanel .VirtualizedSelectOption { color: #e8e8e8 !important; background: transparent !important; }
.pk-nodepanel .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.18) !important; }
.pk-nodepanel .Select-arrow { border-top-color: #9fb3c8 !important; }
.pk-nodepanel .Select--multi .Select-value { background: rgba(240,160,48,0.12) !important; border-color: rgba(240,160,48,0.45) !important;
  color: #f5d6a3 !important; border-radius: 6px; }
.pk-nodepanel input[type=checkbox], .pk-nodepanel input[type=radio] { accent-color: #f0a030; margin-right: 6px; }
.pk-nodepanel label { color: #dfe7ee; font-size: .82rem; }
.pk-nodepanel .accordion, .pk-nodepanel .accordion-item { background: transparent !important; border: none !important; }
.pk-nodepanel .accordion-button { background: rgba(255,255,255,0.035) !important; color: #cfefff !important; font-size: .86rem;
  font-weight: 600; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; box-shadow: none !important; padding: 9px 12px; }
.pk-nodepanel .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); }
.pk-nodepanel .accordion-body { background: rgba(255,255,255,0.02) !important; border-radius: 0 0 10px 10px; padding: 8px 12px 10px; }
.pk-nodepanel .accordion-body > div > div, .pk-nodepanel .accordion-item > div > div > div > div { margin-bottom: 8px; }
.pk-nodepanel button.btn { background: rgba(255,255,255,0.06) !important; color: #e8e8e8 !important; border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important; font-size: .8rem !important; }
.pk-nodepanel button.btn:hover { border-color: #f0a030 !important; }
/* full-page parameters drawer: the node's cards flow in a grid */
#node_parameters > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
#node_parameters > div > * { margin: 0 !important; min-width: 0; }
#node_parameters > div > [style*="display: none"] { display: none !important; }
.rp-pdf { border: none; border-radius: 8px; background: #fff; display: block; }
/* a plot never spills into the neighbouring card while it is being re-fitted */
.rp-body .dash-graph, .rb-preview .dash-graph, .dp-example .dash-graph { overflow: hidden; max-width: 100%; }
/* node modules indent their controls with inline vw margins: align them to the card */
.pk-nodepanel #node_parameters [style*="margin-left"], .pk-nodepanel#ag_inputs_card [style*="margin-left"] { margin-left: 0 !important; }

/* ---------- idea apps: direct-access shell (toolbar + documentation panel) --------- */
.idea-toolbar { position: fixed; top: 10px; right: 14px; z-index: 10001; display: flex; gap: 6px; align-items: center; }
.idea-tool, .btn.idea-tool { background: rgba(12,17,22,0.85) !important; color: #e8e8e8 !important; border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important; padding: 4px 10px !important; font-size: .78rem !important; line-height: 1.4 !important; cursor: pointer;
  box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
.idea-tool:hover, .btn.idea-tool:hover { border-color: #f0a030 !important; color: #f5d6a3 !important; }
.idea-tool.acc, .btn.idea-tool.acc { border-color: rgba(240,160,48,0.6) !important; color: #f5d6a3 !important; }
.idea-tool.close { font-size: .9rem !important; padding: 3px 10px !important; }
.idea-tool i { color: #f0a030; }
.idea-docs { position: fixed; top: 0; right: 0; height: 100vh; width: min(980px, 62vw); z-index: 10003; transform: translateX(102%);
  transition: transform .28s ease; background: linear-gradient(160deg, rgb(8,12,17) 0%, rgb(14,22,30) 100%);
  border-left: 1px solid rgba(255,255,255,0.1); box-shadow: -6px 0 24px rgba(0,0,0,.5); display: flex; flex-direction: column; color: #e8e8e8; }
.idea-docs.open { transform: none; }
.idea-docs-h { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px 8px; }
.idea-docs-k { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; }
.idea-docs-t { color: #cfefff; font-size: 1.05rem; font-weight: 600; }
.idea-docs-b { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.idea-docs-empty { color: #9fb3c8; font-size: .85rem; padding: 20px 0; }
.idea-docs .accordion, .idea-docs .accordion-item { background: transparent !important; border: none !important; }
.idea-docs .accordion-item { margin-bottom: 8px; }
.idea-docs .accordion-button { background: rgba(255,255,255,0.05) !important; color: #cfefff !important; font-weight: 600; font-size: .86rem;
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; box-shadow: none !important; }
.idea-docs .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); }
.idea-docs .accordion-body { padding: 8px 0 0; }
.idea-docs iframe { border: none; border-radius: 8px; background: #fff; }
/* apps with their own full-width header make room for the toolbar */
.idea-app .dls-top { padding-right: 190px; }

/* ---------- Market (public algos) ------------------------------------------------ */
.mk-page { height: calc(100vh - 84px); overflow-y: auto; padding: 6px 1.4vw 30px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mk-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; height: 440px; transition: border-color .15s, transform .15s; }
.mk-card:hover { border-color: rgba(240,160,48,0.55); transform: translateY(-2px); }
.mk-img { height: 160px; flex: 0 0 160px; background-size: cover; background-position: center; background-color: #0c1116;
  box-shadow: inset 0 -40px 40px -20px rgba(0,0,0,0.75); }
.mk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 12px; }
.mk-title { color: #cfefff; font-weight: 600; font-size: .98rem; margin-bottom: 6px; line-height: 1.3; }
.mk-text { flex: 1; min-height: 0; overflow-y: auto; color: #cfdcea; font-size: .78rem; line-height: 1.5; white-space: pre-line;
  padding-right: 4px; margin-bottom: 10px; }
.pk-scope .mk-btn { width: 100%; padding: 6px 10px; font-size: .82rem; }
.pk-scope .mk-btn i { margin-right: 4px; }
.pk-chip.mk-app { border-color: rgba(240,160,48,0.7); color: #f5d6a3; }

/* ---------- Research canvas ------------------------------------------------------- */
.cv-page { height: calc(100vh - 84px); display: flex; flex-direction: column; padding: 6px 1.4vw 12px; }
.cv-page .rp-head { margin-bottom: 4px; }
.cv-legend { display: flex; gap: 16px; font-size: .72rem; color: #9fb3c8; margin: 0 0 8px 2px; }
.cv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cv-holder, .cv-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cv-canvas { position: relative; flex: 1; min-height: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden;
  background-color: rgba(0,0,0,0.6); background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px; }
.cv-panel { display: flex; flex-direction: column; gap: 10px; }
.cv-title { color: #cfefff; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.cv-img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,0.04); }
.cv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-text { color: #dfe7ee; font-size: .84rem; line-height: 1.6; text-align: justify; white-space: pre-line; }
.cv-refbox { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: 4px; }
.cv-refs { display: flex; flex-direction: column; gap: 5px; }
.pk-scope .cv-ref { text-align: left; background: rgba(255,255,255,0.045); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; padding: 6px 10px; font-size: .78rem; cursor: pointer; }
.pk-scope .cv-ref:hover { border-color: #f0a030; }
.pk-scope .cv-ref i { color: #e66767; margin-right: 4px; }

/* canvas toolbar (same look as the Deep Learning Studio ⤢ Fit / Auto-layout buttons) */
.cv-tools { position: absolute; top: 10px; left: 12px; z-index: 5; display: flex; gap: 6px; }
.cv-tb { background: rgba(0,0,0,0.6); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 3px 10px; font-size: .76rem; cursor: pointer; backdrop-filter: blur(4px); }
.cv-tb:hover { border-color: #f0a030; }
.cv-tb i { margin-right: 4px; font-size: .7rem; }

/* canvas switcher = the page title: one tab per canvas, the open one highlighted */
.cv-tabs { display: flex; gap: 22px; margin-bottom: 4px; }
.cv-tabs label { display: inline-flex !important; margin: 0 !important; cursor: pointer; padding: 2px 0 5px;
  color: #7f93a8; font-size: 1.2rem; font-weight: 600; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; }
.cv-tabs label:hover { color: #cfefff; }
.cv-tabs label:has(input:checked) { color: #cfefff; border-bottom-color: #f0a030; }
.cv-tabs input { display: none; }

/* Data page: central data repository status (overview) */
.dp-repo { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 6px; }
.dp-repo th { color: #cfefff; text-align: left; font-weight: 600; padding: 4px 8px; background: rgba(255,255,255,0.06); }
.dp-repo td { color: #e8e8e8; padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dp-repo code { color: #f0a030; background: transparent; font-size: .74rem; }