/* ==========================================================================
   ZerσSigma analytical module chrome

   Structural controls and container behavior only. Trace and level colors
   remain in their module implementations and the semantic token contract.
   ========================================================================== */

/* editable module title */
#app-shell .mod-title-input{
  background:var(--zs-control-bg) !important;
  border:1px solid var(--zs-border-default) !important;
  border-radius:var(--zs-radius-sm) !important;
  color:var(--zs-text-primary) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  width: 170px !important;
}
#app-shell .mod-title-input:focus{
  outline:none !important;
  border:1px solid var(--zs-border-strong) !important;
  box-shadow:0 0 0 2px var(--zs-brand-accent-wash-strong) !important;
}



/* === Chain horizontal scroll container owns X scroll (prevents page-wide scroll) === */
#app-shell #chain-scroll-wrapper{
  width: 100% !important;
  max-width: 100% !important;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
#app-shell #chain-scroll-wrapper:active{ cursor: grabbing; }

/* Make the DataTable own BOTH scrollbars (bottom X + side Y) */
#app-shell #chain-scroll-wrapper .dash-spreadsheet-container{
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Move the vertical scrollbar to the left without flipping column order */
#app-shell #chain-scroll-wrapper .dash-spreadsheet-container{
  direction: rtl;
}
#app-shell #chain-scroll-wrapper .dash-spreadsheet-container .dash-spreadsheet-inner,
#app-shell #chain-scroll-wrapper .dash-spreadsheet-container table{
  direction: ltr;
}

/* Ensure the sticky header doesn't create a new stacking context that blocks popovers */
#app-shell .dash-table-container .dash-spreadsheet-container .dash-header{
  z-index: 2 !important;
}
#app-shell .SingleDatePicker_picker, #app-shell .DateRangePicker_picker, #app-shell .DateInput_fang{
  z-index: 9999 !important;
}

/* Apply button pulse classes (for Enter-triggered press feedback) */
@keyframes zsig_pulse {
  0% { transform: translateY(0px) scale(1); filter: brightness(1.0); }
  35% { transform: translateY(1px) scale(0.99); filter: brightness(1.08); }
  100% { transform: translateY(0px) scale(1); filter: brightness(1.0); }
}
#app-shell .pulse-a{ animation: zsig_pulse .16s ease-out; }
#app-shell .pulse-b{ animation: zsig_pulse .16s ease-out; }
/* === Info popover (module ⓘ) === */
#app-shell .zs-info{ position:relative; }
#app-shell .zs-info-sum{
  list-style:none;
  cursor:pointer;
  user-select:none;
  color:var(--zs-text-secondary);
  font-weight: 900;
  padding: 4px 8px;
  border:1px solid var(--zs-border-default);
  border-radius:var(--zs-radius-sm);
  background:var(--zs-control-bg);
}
#app-shell .zs-info-sum::-webkit-details-marker{ display:none; }
#app-shell .zs-info[open] .zs-info-sum{
  box-shadow:0 0 0 2px var(--zs-brand-accent-wash);
  border:1px solid var(--zs-border-strong);
}
#app-shell .zs-info-body{
  position:absolute;
  right:0;
  margin-top:8px;
  width: 360px;
  max-width: 70vw;
  background:var(--zs-surface-overlay);
  border:1px solid var(--zs-border-default);
  border-radius:var(--zs-radius-md);
  padding: 12px 12px;
  color:var(--zs-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  box-shadow:var(--zs-shadow-2);
  z-index: 50;
}

/* Hide Zo horizon when not in Zo mode */
#app-shell .zs-hidden{ display:none !important; }



/* === Module sizing stability (v12.1) === */
#app-shell .modules-row{ align-items: stretch; }

/* Scroll-Zoom alignment - vertically centered with controls */
#app-shell .scrollzoom-wrap{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  line-height:1;
  vertical-align:middle;
}
#app-shell .scrollzoom-wrap label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 !important;
  padding:0;
  line-height:1;
}
#app-shell .scrollzoom-wrap input{
  margin:0 !important;
  vertical-align:middle;
}

/* KPI bar tighter */
#app-shell .kpi-card{padding:10px 14px !important;min-height:62px !important;}
#app-shell .kpi-card .kpi-label{font-size:12px !important;}
#app-shell .kpi-card .kpi-value{font-size:28px !important;}