/* Portfolio Builder (ex Universe Builder) — node page. Loaded globally by Dash: scoped under .ub-app. The
   universe input itself is styled by shared_assets/universe/universe.css (.uni).
   The page does not scroll by itself: the idea overlay scrolls, so the scrollbar sits at the screen's right edge
   (EN-03; it used to scroll inside a 100%-high box, drawing a second scrollbar inside the page). */

.ub-app { color: #e8e8e8; font-size: 13px; overflow-x: hidden; padding-bottom: 20px; }
.ub-app * { box-sizing: border-box; }
.ub-top { padding: 0 200px 12px 0; display: flex; gap: 12px; align-items: center; }
.ub-logo { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; display: flex; align-items: center;
           justify-content: center; font-size: 1.15rem; color: #0b1016;
           background: linear-gradient(135deg, #ffc46b, #f0a030 55%, #c77d1c); box-shadow: 0 0 18px rgba(240,160,48,0.35); }
.ub-top h3 { margin: 0; font-size: 1.3rem; color: #cfefff; font-weight: 600; letter-spacing: .2px; }
.ub-top h3 + div { color: #9fb3c8; font-size: .76rem; max-width: 900px; }

.ub-cols { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 12px; align-items: start; }
.ub-left { position: sticky; top: 0; }
.ub-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 26px; }
.ub-name { color: #f2f7fb; font-size: 1.1rem; font-weight: 600; }
.ub-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-badge { font-size: .68rem; color: #cfefff; background: rgba(57,135,229,0.14); border: 1px solid rgba(57,135,229,0.35);
            border-radius: 10px; padding: 1px 9px; }
.ub-badge.warn { color: #f5d6a3; background: rgba(240,160,48,0.12); border-color: rgba(240,160,48,0.45); }
.ub-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ub-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ub-bottom { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }

.ub-sec { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
          padding: 10px 12px 8px; min-width: 0; }
.ub-sec-h { margin-bottom: 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ub-sec-t { color: #cfefff; font-weight: 600; font-size: .95rem; }
.ub-sec-s { color: #9fb3c8; font-size: .68rem; }

.ub-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 56px; }
.ub-chip { display: flex; gap: 10px; align-items: center; min-width: 0; border-radius: 10px; padding: 8px 12px;
           background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.45));
           border: 1px solid rgba(255,255,255,0.07); border-top: 2px solid rgba(240,160,48,0.55); }
.ub-chip > i { color: #f0a030; font-size: .95rem; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
               display: flex; align-items: center; justify-content: center; background: rgba(240,160,48,0.12); }
.ub-chip > div { min-width: 0; }
.ub-chip-k { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; }
.ub-chip-v { color: #f2f7fb; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-chip-s { color: #9fb3c8; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ub-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; margin-bottom: 6px; }
.ub-kv { display: flex; flex-direction: column; }
.ub-kv-k { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; }
.ub-kv-v { color: #e8e8e8; font-size: .8rem; }
.ub-notes { margin: 0; padding-left: 18px; color: #c8d4df; font-size: .76rem; line-height: 1.45; }

.ub-exp { display: flex; flex-wrap: wrap; gap: 8px; }
.ub-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e8e8e8;
          border-radius: 14px; padding: 4px 14px; font-size: .78rem; cursor: pointer; }
.ub-btn:hover { border-color: #f0a030; color: #f0a030; }
.ub-btn i { color: #f0a030; margin-right: 3px; }

@media (max-width: 1300px) { .ub-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .ub-cols { grid-template-columns: minmax(0, 1fr); }
  .ub-left { position: static; }
  .ub-charts, .ub-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ub-top { padding-right: 0; padding-top: 34px; }
  .ub-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* EN-03: save bar, holdings editor, performance */
.ub-savebar { background: rgba(0,0,0,0.45); border: 1px solid rgba(240,160,48,0.35); border-radius: 10px;
              padding: 8px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.ub-saverow, .ub-loadrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.ub-loadrow { align-items: center; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }
.ub-f { display: flex; flex-direction: column; gap: 2px; }
.ub-f.w-name { flex: 1 1 200px; } .ub-f.w-desc { flex: 2 1 260px; } .ub-f.w-cap { width: 170px; }
.ub-k { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.ub-in { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
         color: #e8e8e8; height: 32px; padding: 0 10px; font-size: .82rem; outline: none; width: 100%; }
.ub-in:focus { border-color: #f0a030; }
.ub-in.sm { width: 64px; height: 28px; }
.ub-date .SingleDatePickerInput, .ub-date .DateInput, .ub-date .DateInput_input { background: rgba(255,255,255,0.06) !important;
         color: #e8e8e8 !important; border-radius: 8px; border: none; font-size: .82rem; height: 30px; width: 120px; }
.ub-date .SingleDatePickerInput { border: 1px solid rgba(255,255,255,0.14) !important; }
.ub-check { color: #e8e8e8; font-size: .8rem; padding-top: 6px; }
.ub-savebtns { display: flex; gap: 6px; margin-left: auto; }
.ub-btn.acc { background: rgba(240,160,48,0.18); border-color: #f0a030; color: #ffd79a; font-weight: 600; }
.ub-btn.warn:hover { border-color: #e06a6a; color: #e06a6a; }
.ub-bm { color: #f0a030; }
.ub-dd { min-width: 260px; flex: 0 1 380px; font-size: .8rem; }
.ub-app .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important;
                          border-radius: 8px !important; }
.ub-app .Select-value-label, .ub-app .Select-input > input { color: #e8e8e8 !important; }
.ub-app .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important; z-index: 10050; }
.ub-app .VirtualizedSelectOption { color: #e8e8e8; }
.ub-app .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.15); }
.ub-msg { font-size: .78rem; margin-left: 6px; }
.ub-msg-ok { color: #5fcf8f; } .ub-msg-err { color: #f0a0a0; } .ub-msg-info { color: #cfefff; }
.ub-badge.ok { color: #bff0cf; background: rgba(95,207,143,0.12); border-color: rgba(95,207,143,0.4); }
.ub-chip.warn { border-top-color: #e06a6a; }

.ub-htools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ub-addw { width: 240px; }
.ub-addw .ub-dd { min-width: 0; width: 100%; }
.ub-expo { display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 2px 6px; }
.ub-totals { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 2px 0 6px; font-size: .8rem; }
.ub-tot b { color: #f2f7fb; font-variant-numeric: tabular-nums; }
.ub-tot.ok b { color: #5fcf8f; } .ub-tot.warn b { color: #f0a030; }
.ub-hint { color: #f5d6a3; font-size: .72rem; }
.ub-cashline { color: #9fb3c8; font-size: .74rem; margin-top: 6px; }
.ub-perf-note { color: #9fb3c8; font-size: .72rem; line-height: 1.4; margin-top: 4px; }
.ub-pills { display: flex; gap: 4px; }
.ub-pills label { margin: 0; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
                  border-radius: 12px; padding: 1px 9px; font-size: .72rem; color: #e8e8e8; }
.ub-pills label:has(input:checked) { border-color: #f0a030; color: #f0a030; }
.ub-pills input { display: none; }
.ub-btn { white-space: nowrap; }
.ub-loadrow .ub-dd { flex: 0 1 480px; }
.ub-hold .dash-spreadsheet-container td.cell--selected, .ub-hold .dash-spreadsheet-container td.focused {
    background-color: rgba(240,160,48,0.18) !important; color: #ffd79a !important; }

/* "Define by": positions or trades (2026-10-04) */
.ub-define { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 2px 0 10px; padding: 8px 12px;
             border-radius: 10px; background: rgba(255,255,255,0.06); }
.ub-define .ub-k { margin: 0; }
.ub-define .ub-pills label i { color: #f0a030; margin-right: 3px; }
.ub-define-s { flex: 1 1 320px; color: #9fb3c8; font-size: .74rem; line-height: 1.35; }
.ub-sec.ub-trades { margin-bottom: 10px; }
.ub-app #ub_trades input { color: #ffd79a !important; background: transparent !important; }