/* static/scenario.css */

/* ---------------------------------------------------------
   Keep your existing ui-select / ui-checkbox styles if you want,
   but DO NOT override td input/contenteditable styling here.
   --------------------------------------------------------- */

/* -------------------------
   Header
------------------------- */
.sc-head { margin-bottom: 16px; }
.sc-head .scenario-title { margin: 0 0 10px 0; letter-spacing: 0.2px; }
.sc-head .scenario-status { opacity: 0.78; font-size: 18px; }

/* -------------------------
   Cards
------------------------- */
.sc-card {
  padding: 16px;
  border-radius: 18px;
}

.sc-card-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sc-card-title{ font-size: 15px; font-weight: 650; opacity: 0.95; }
.sc-card-hint{ font-size: 12px; opacity: 0.55; }

/* Give Outputs its own “sheet” feel */
.sc-output-card{
  padding-top: 14px;
}

/* -------------------------
   Dashboard subbar
------------------------- */
.sc-subbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 12px 0;
  flex-wrap: wrap;
}

.pill-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

/* controls */
.sc-controls{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-controls .scenario-label{
  opacity: 0.75;
  font-size: 12px;
  margin-right: 4px;
}

/* force dark themed controls in Scenario (browser default select was winning) */
#scenarioRoot select.ui-select,
#scenarioRoot input.ui-input,
#scenarioRoot .ui-field{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

#scenarioRoot select.ui-select{
  -webkit-appearance: none;
  appearance: none;
}

#scenarioRoot select.ui-select:focus,
#scenarioRoot input.ui-input:focus,
#scenarioRoot .ui-field:focus{
  border-color: rgba(140,190,255,0.55);
  box-shadow: 0 0 0 3px rgba(140,190,255,0.15);
}

/* dropdown options not blinding */
#scenarioRoot select.ui-select option{
  background: #0b1c3a;
  color: rgba(255,255,255,0.92);
}

/* checkbox */
#scenarioRoot .ui-checkbox{
  width: 18px;
  height: 18px;
  accent-color: rgba(140,190,255,0.95);
}

#scenarioRoot .scenario-check{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  user-select: none;
  opacity: 0.92;
}

/* -------------------------
   Pills
------------------------- */
.pill{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.pill .k{ opacity: 0.70; font-size: 12px; }
.pill .v{ font-weight: 700; }

/* =========================================================
   Compare popover (Scenario-only)
   Replaces native multi-select UI to keep layout consistent.
   Requires:
     #bondCompareBtn and #bondComparePopover in scenario_dashboard.html
   ========================================================= */

#scenarioRoot .bond-compare-btn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 650;
  letter-spacing: 0.1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

#scenarioRoot .bond-compare-btn:hover{
  background: rgba(255,255,255,0.09);
}

#scenarioRoot .bond-compare-btn:focus{
  border-color: rgba(140,190,255,0.55);
  box-shadow: 0 0 0 3px rgba(140,190,255,0.15);
  outline: none;
}

/* Popover container (positioned by JS) */
#scenarioRoot .bond-popover{
  position: fixed;
  z-index: 9999;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 24px));
  overflow: auto;

  background: rgba(12, 26, 52, 0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
  padding: 10px;
}

/* inside popover */
#scenarioRoot .bond-popover .bp-title{
  font-size: 12px;
  opacity: 0.75;
  margin: 2px 2px 10px 2px;
}

#scenarioRoot .bond-popover .bp-list{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

#scenarioRoot .bond-popover .bp-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

#scenarioRoot .bond-popover .bp-item:hover{
  background: rgba(255,255,255,0.08);
}

#scenarioRoot .bond-popover .bp-item input{
  width: 18px;
  height: 18px;
  accent-color: rgba(140,190,255,0.95);
}

#scenarioRoot .bond-popover .bp-item .bp-label{
  flex: 1;
  color: rgba(255,255,255,0.94);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scenarioRoot .bond-popover .bp-actions{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

#scenarioRoot .bond-popover .bp-actions button{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 650;
}

#scenarioRoot .bond-popover .bp-actions button:hover{
  background: rgba(255,255,255,0.09);
}

#scenarioInputs { width: 100%; }

#scenarioInputs .table-scroll {
  width: 100%;
}

#scenarioInputGrid {
  width: 100%;
  min-width: 0;   /* don’t force horizontal overflow */
}

/* =========================================================
   Excel-like tabs (TOP) + “sheet” body
   This replaces the old pill-button tab row look.
   Works with scenario_dashboard.html using:
     <div class="sc-tabs">
       <div class="tabbar"> ... .tab-btn ... </div>
       <div class="tabbody"> ... .tab-panel ... </div>
     </div>
   ========================================================= */

#scenarioRoot .sc-tabs{
  margin-top: 10px;
}

/* The tab strip */
#scenarioRoot .sc-tabs .tabbar{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items:flex-end;
  padding: 6px 8px 0 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Tabs as “sheets” */
#scenarioRoot .sc-tabs .tab-btn{
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;                 /* active tab merges into sheet */
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 10px 14px 9px 14px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.1px;
  position: relative;
  top: 1px;                            /* sit on the sheet edge */
}

#scenarioRoot .sc-tabs .tab-btn:hover{
  background: rgba(255,255,255,0.08);
}

/* Active tab: looks like the selected worksheet */
#scenarioRoot .sc-tabs .tab-btn.is-active{
  background: rgba(12, 26, 52, 0.88);
  color: rgba(255,255,255,0.97);
  border-color: rgba(159,194,255,0.32);
}

/* The sheet area */
#scenarioRoot .sc-tabs .tabbody{
  background: rgba(12, 26, 52, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-top-right-radius: 16px;
  padding: 12px 12px 14px 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

/* panels: only active shows */
#scenarioRoot .tab-panel{ display:none; margin-top: 0; }
#scenarioRoot .tab-panel.is-active{ display:block; }

/* inside tab grids */
#scenarioRoot .scenario-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* responsive */
@media (max-width: 980px){
  .sc-subbar{ flex-direction: column; align-items: flex-start; }
  #scenarioRoot .sc-tabs .tabbar{ padding: 6px 6px 0 6px; }
}


/* Header grid: left copy + right dock */
#scenarioRoot .sc-headgrid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

#scenarioRoot .sc-headleft{
  min-width: 0;
}

#scenarioRoot .sc-headline{
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

/* =========================================================
   Shared sticky overlay dock (PMB + Scenario)
   - TRUE stickiness (contained by the whole panel, not header row)
   - Does not push layout (height: 0)
   - Dock target sits top-right opposite the heading
   ========================================================= */

#pmbRoot,
#scenarioRoot{
  position: relative; /* establish containing block for overlay alignment */
}

/* The sticky container is as wide as the panel, but takes no height */
.ab-sticky-overlay{
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  z-index: 2600;

  height: 0;          /* ✅ do not consume vertical space */
  margin: 0;
  padding: 0;

  overflow: visible;  /* ✅ allow the toolbar to render outside “0 height” */
  pointer-events: none; /* ✅ overlay container doesn’t block clicks */
}

/* The actual dock slot becomes clickable */
.ab-sticky-overlay [data-actionbar-dock="1"]{
  position: absolute;
  right: 0;
  top: var(--ab-dock-y, -44px); /* ✅ lift it to line up with heading */
  display: flex;
  justify-content: flex-end;
  pointer-events: auto; /* ✅ toolbar is clickable */
  min-width: 0;
}

/* Ensure toolbar paints above tables/charts */
.ab-sticky-overlay .floating-mini-toolbar,
.ab-sticky-overlay .floating-mini-toolbar.ab-docked{
  position: relative !important;
  z-index: 1 !important;

  /* less see-through when content scrolls behind */
  background: rgba(16, 28, 50, 0.78) !important;
}