/* Shared stylesheet for the custom-HTML dashboards on the Dashboard_Main tab
 strip: pm-dashboard.html and investment-guideline.html. Both pages are the
 same visual system (control bar, cards, tables, badges), so the tokens live
 in ONE file rather than being duplicated per shell and drifting apart.

 Tokens per DESIGN.md (confirmed against theme.css / parameters.yaml):
 Inter/Roboto, canvas #edf3fa (page frame), white cards radius 16px border
 #e5e7eb, band #c2dbff radius 20px, blues #4790fc / #1c84ff / #175cd3, text
 #344054 / muted #667085. The .pmd- prefix is shared; .pmg- is the guideline
 page's own. */
.pmd {
  font-family: "Inter", Roboto, sans-serif;
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
}

.pmd * {
  box-sizing: border-box;
}

/* control bar */
.pmd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 4px 0 14px;
}

.pmd-control {
  min-width: 200px;
}

/* the three action buttons sit in one slot, so this column is as wide as they
   are rather than the 200px a labelled input column needs */
.pmd-buttons {
  min-width: 0;
}

.pmd-control-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 4px;
}

/* Anvil Buttons carry their own top/bottom spacing, which in these flex rows
   lifts one button above its neighbours. Strip vertical margins inside the
   slots so a row bottom-aligns. */
.pmd-buttons-slot *,
.pmd-account-actions * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── guideline control bar ──────────────────────────────────────────────
   The guideline page lays its controls across the SAME one-row bar the PM
   dashboard uses above (.pmd-controls, shared). The one thing that fought
   that row is its date control: MSDP.MultiSelect_Dates is a stock Anvil
   composite — a DatePicker above a token tray above its own Reset, in three
   nested ColumnPanels — whose height grows with every date picked, and in a
   bottom-aligned row that growth drags the portfolio dropdown and the action
   buttons down with it.

   The composite's own STACK is kept (the entry has to stay a real input a
   date can be typed into, with the tokens under it) and pinned to two lines
   instead: the tray is one non-wrapping row, the tokens past the second are
   hidden, and the +N chip _render_date_overflow appends to the end of that
   row opens the rest. The control is then the same height whether one date is
   picked or five, which is what lets the page share the PM dashboard's row.

   Everything here is scoped to .pmd-guideline / .pmd-dates-box: the PM
   dashboard's own single-date control is deliberately untouched. */

/* The bar aligns on the TOP of its controls, not the bottom the PM dashboard
   uses: the date control is two lines (the entry, then the token row), and
   bottom-aligning would drop Load / Re-run / Export level with the TOKENS
   instead of with the entries they sit beside. Top-aligned, every control
   starts on the same line — label, then field — as on the asset-portfolio
   dashboard, whose controls are all one line tall. */
.pmd-guideline .pmd-controls {
  align-items: flex-start;
}

/* the token tray's own height (its min-height plus the gap above it). One token
   because three rules are sized from it: the tray itself and the trailing
   spacer each of the other two columns carries, below. */
.pmd-guideline {
  --pmd-tray-h: 34px;
}

/* The date control is TWO lines — the entry, then the tray under it — and every
   other control on this bar is one, so top-aligning them leaves the portfolio
   dropdown and the action buttons ending a tray short of the bar's bottom edge.
   Each gets that tray's height as trailing space: the three columns are then
   the same height, and the bar keeps ONE height whether the tray is empty, full
   or showing its +N chip. Sized from --pmd-tray-h, as the tray is, so the
   spacer cannot drift from the thing it matches. */
.pmd-guideline .pmd-control > [anvil-slot]::after {
  content: "";
  display: block;
  height: var(--pmd-tray-h);
}

/* one field metric for the bar's stock inputs, so the dropdown and the date
   entry read as the same control rather than two donated widgets */

.pmd-dates-box {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: #344054;
  border-radius: 8px;
  box-shadow: none;
}

.pmd-guideline .anvil-dropdown select:hover,
.pmd-dates-box input:hover {
  border-color: #a9c6f5;
}

.pmd-guideline .anvil-dropdown select:focus,
.pmd-dates-box input:focus {
  outline: none;
  border-color: #1c84ff;
  box-shadow: 0 0 0 3px rgba(28, 132, 255, 0.16);
}

/* the action column takes what is left of the bar, so the favourite star can
   sit at its far right — it saves the view rather than acting on it, and next
   to Export it read as a fourth action */
.pmd-guideline .pmd-buttons {
  flex: 1 1 auto;
}

/* The four action buttons are one line, always: Anvil's FlowPanel spaces its
   items with a gutter wide enough that the star drops onto a second row and
   takes the whole bar's height with it. */
.pmd-guideline .pmd-buttons-slot .flow-panel-gutter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
}

.pmd-guideline .pmd-buttons-slot .flow-panel-item {
  margin: 0 !important;
}

/* the star is the last component in fp_ig_buttons (Load, Re-run, Export,
   star), so pushing the last item over is all it takes to park it at the
   right-hand end without moving it out of the slot the form expects it in */
.pmd-guideline .pmd-buttons-slot .flow-panel-item:last-child {
  margin-left: auto !important;
}

/* --- taming MSDP.MultiSelect_Dates ---
   Overriding a dependency's stock markup, so these selectors are Anvil's own
   DOM classes and several need !important to beat inline component
   properties (spacing_above, background, font_size). Kept together and
   scoped to .pmd-dates-box so it is obvious what they are for. */
.pmd-dates-box {
  width: 100%;
}

/* Anvil bakes spacing_above/below into every component; strip it and space
   the entry and the tray as one field instead */
.pmd-dates-box [class*="anvil-spacing-"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* MSDP nests three ColumnPanels (itself, its inner panel and TokenBox), each
   wrapped in Anvil's panel / section / row / col divs. Those wrappers are what
   inset the entry 30px and the token tray 45px from the field's edge, and — the
   part no width could beat — what caps the entry at 75% of the control:
   MultiSelect_Dates declares col_widths {"NXHHQE": 45}, so the row holding the
   picker is 45 of 60 units wide and the remaining quarter is reserved for
   nothing. A column-width reservation is not something a child can widen out
   of; `width: 100%` on the col resolves AGAINST that quarter-short track, which
   is why enlarging the field changed nothing.

   So the wrappers are taken out of layout rather than argued with:
   display:contents leaves their children — the DatePicker, the token FlowPanel
   and the (hidden) Reset — as direct children of .pmd-dates-box, stacked in that
   order and each spanning the control. The stack is the shape this control
   wants: the entry above, the tokens below it.

   Only the ColumnPanel chain is listed. The FlowPanel is NOT in it: the tray
   below is a real box with a height and a placeholder of its own. */
.pmd-dates-box .column-panel,
.pmd-dates-box .anvil-panel-section,
.pmd-dates-box .anvil-panel-section-container,
.pmd-dates-box .anvil-panel-section-gutter,
.pmd-dates-box .anvil-panel-row,
.pmd-dates-box .anvil-panel-col {
  display: contents !important;
}

.pmd-dates-box .anvil-datepicker {
  width: 100%;
}

/* the component's own Reset: a second line under the tray, which is exactly
   what this control cannot afford. The popover behind the +N chip carries a
   Clear all that does the same job. */
.pmd-dates-box .anvil-role-small-button {
  display: none !important;
}

/* the token tray, tucked directly under the entry: ONE row that never wraps
   and never scrolls, kept at its height even when empty so that picking a
   first date cannot resize the control bar */
.pmd-dates-box .flow-panel {
  display: flex;
  align-items: center;
  min-height: calc(var(--pmd-tray-h) - 4px);
  margin: 0 !important;
  padding: 4px 0 0;
  background: transparent !important;
  border: none;
}

/* the tokens live in Anvil's gutter div, so that is the row: the chip
   _render_date_overflow appends lands in it, after the last visible token */
.pmd-dates-box .flow-panel-gutter {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  margin: 0 !important;
}

.pmd-dates-box .flow-panel:not(:has(.flow-panel-item))::after {
  content: "Dates you pick appear here";
  font-size: 12.5px;
  color: #98a2b3;
  white-space: nowrap;
}

.pmd-dates-box .flow-panel-item {
  margin: 0 !important;
}

/* the third token onwards. Matched by sibling chaining rather than
   :nth-child(n+3) so it counts flow-panel-items only, whatever else Anvil
   puts in the gutter — and it must stay in step with _MAX_INLINE_DATES in
   Investment_Guideline/__init__.py, which is what the chip counts. */
.pmd-dates-box .flow-panel-item ~ .flow-panel-item ~ .flow-panel-item {
  display: none;
}

/* tokens are Buttons with role primary-color — the same role the action
   buttons carry, hence the .pmd-dates-box scope — restyled as chips to match
   .pmd-chip elsewhere on the page */
.pmd-dates-box .anvil-role-primary-color > .btn {
  height: 26px;
  padding: 0 10px !important;
  background: #e0edff !important;
  color: #1e40af !important;
  border: 1px solid #c7dcff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pmd-dates-box .anvil-role-primary-color > .btn:hover {
  background: #c7dcff !important;
}

.pmd-dates-box .anvil-role-primary-color .anvil-component-icon {
  margin-right: 5px !important;
  font-size: 10px;
  opacity: 0.7;
}

/* --- the +N chip and the popover behind it ---
   The chip is appended to the token row itself (there is no anvil-slot inside
   MSDP to mount one into, so _render_date_overflow puts the element straight
   into the FlowPanel's gutter); #ig-date-more, the span after the component,
   hosts only the panel — which is fixed-positioned from the chip's own
   rectangle, as the PM dashboard's filter popover is. */
.pmd-dates-more {
  display: contents;
}

.pmd-more-chip {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #475467;
  background: #fff;
  border: 1px dashed #c7dcff;
  border-radius: 999px;
  cursor: pointer;
}

.pmd-more-chip:hover,
.pmd-more-chip.active {
  color: #175cd3;
  background: #f5f9ff;
  border-color: #1c84ff;
}

.pmd-dates-pop {
  /* fixed so no card/overflow ancestor can clip it; top/left are set inline
     from the chip's viewport position */
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 12px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.16);
  cursor: default;
}

.pmd-dates-pop-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 8px;
}

.pmd-dates-pop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pmd-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1e40af;
  background: #e0edff;
  border: 1px solid #c7dcff;
  border-radius: 999px;
  cursor: pointer;
}

.pmd-date-chip:hover {
  background: #c7dcff;
}

.pmd-date-chip .x {
  font-size: 12px;
  opacity: 0.7;
}

.pmd-dates-pop-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f0f3f7;
  margin-top: 8px;
  padding-top: 4px;
}

/* second control block: the preset rows (one per node grouping) and the two view
   buttons, both left-anchored under the portfolio / date / buttons row above */
.pmd-accounts {
  margin: 0 0 18px;
}

.pmd-accounts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* the grouping rows stack, each one label + its chips */
.pmd-preset-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pmd-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* every row's label reserves the same width, so the chip rows line up under one
   another however long a grouping is named */
.pmd-preset-label {
  min-width: 104px;
  margin: 0;
}

.pmd-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* favourite + settings ride the right edge of the preset block, opposite the
   chips, rather than trailing them — centred against the rows however many
   groupings there are */
.pmd-account-actions {
  margin-left: auto;
  align-self: center;
}

.pmd-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #e0edff;
  color: #1e40af;
  border: 1px solid #c7dcff;
  padding: 5px 14px;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pmd-chip:hover {
  background: #c7dcff;
}

.pmd-chip.active {
  background: #175cd3;
  color: #fff;
  border-color: transparent;
}

/* KPI strip */
.pmd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pmd-kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 18px;
}

.pmd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 2px;
  white-space: nowrap;
}

.pmd-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #101828;
}

/* Notice bars — one row of their own above what they qualify, wide enough to
   name every offending item rather than hide them behind a tooltip. Two of
   them, built by the same _shell.py _banner_html: the PM dashboard's
   mandate-breach banner (red, clickable — it jumps to the monitor) and the
   guideline page's incomplete-report warning (amber, inert — it names a gap
   that only Load can fill). The shape is written once here so the two cannot
   drift apart; below it, each states nothing but its palette.

   The reds match _BREACH / _BREACH_FILL in _const.py, which the SAA monitor
   paints on the same breached rows. */
.pmd-breach,
.pmd-warn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.pmd-breach-title,
.pmd-warn-title {
  font-size: 13.5px;
  font-weight: 700;
}

.pmd-breach-item,
.pmd-warn-item {
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  border: 1px solid;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.pmd-breach-note,
.pmd-warn-note {
  font-size: 12px;
  margin-left: auto;
  white-space: nowrap;
}

.pmd-breach {
  background: #fef2f2;
  border-color: #fecaca #fecaca #fecaca #dc2626;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pmd-breach:hover {
  background: #fee4e2;
}

.pmd-breach-title {
  color: #b91c1c;
}

.pmd-breach-item {
  color: #991b1b;
  border-color: #fecaca;
}

.pmd-breach-note {
  color: #b42318;
}

.pmd-warn {
  background: #fffbeb;
  border-color: #fde68a #fde68a #fde68a #f59e0b;
}

.pmd-warn-title {
  color: #b45309;
}

/* the guideline's items are sentences, not bucket names: they wrap inside the
   chip rather than forcing the bar wider than the page */
.pmd-warn-item {
  color: #92400e;
  border-color: #fde68a;
  border-radius: 8px;
  white-space: normal;
}

.pmd-warn-note {
  color: #b45309;
}

.pmd-kpi-value.neg {
  color: #b91c1c;
}

.pmd-kpi-sub {
  font-size: 12px;
  color: #667085;
}

/* cards & section bands */
.pmd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  padding: 0 0 8px;
  margin-bottom: 18px;
  overflow: hidden;
}

.pmd-band {
  background: #c2dbff;
  color: #344054;
  border-radius: 20px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.pmd-band-note {
  font-size: 12px;
  font-weight: 500;
  color: #2b5d9a;
}

.pmd-saa-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding: 14px 12px 4px;
}

.pmd-saa-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
}

.pmd-saa-select select {
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  padding: 6px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  min-width: 180px;
}

.pmd-saa-legend {
  font-size: 12px;
  color: #667085;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
}

.pmd-collapse-bar {
  display: flex;
  padding: 18px 12px 2px;
}

.pmd-collapse-slot {
  display: inline-flex;
}

.pmd-collapse-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.65);
  color: #175cd3;
  border: 1px solid #9cc2f5;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.pmd-collapse-all:hover {
  background: #fff;
}

/* column-group switcher */
.pmd-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pmd-switch {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #667085;
  border: 1px solid #d0d5dd;
  padding: 5px 12px;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pmd-switch:hover {
  background: #fafbff;
}

.pmd-switch.active {
  background: #175cd3;
  color: #fff;
  border-color: transparent;
}

/* the grid */
.pmd-table-wrap {
  overflow-x: auto;
  padding: 4px 12px 6px;
}

/* Fixed layout, driven by the <colgroup> every grid renders (see
   Dashboard_Main/_dom.py add_colgroup). These grids are rebuilt from scratch on
   every collapse, expand, filter and re-scope, and under auto layout each
   rebuild re-measured the columns off whichever rows were visible — so opening
   one branch moved every figure sideways. The percentages make each column a
   property of the grid; the inline min-width the helper sets is what makes a
   wide grid scroll in .pmd-table-wrap rather than crush its columns. */
.pmd-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.pmd-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #667085;
  text-align: right;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #d0d5dd;
  /* fixed layout gives the cell its width, so anything longer is clipped to an
     ellipsis (with the full text on the header's own title) rather than spilling
     into the next column */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmd-table th:first-child {
  text-align: left;
}

.pmd-table td {
  font-size: 13.5px;
  color: #344054;
  text-align: right;
  padding: 7px 12px;
  border-bottom: 1px solid #e4e7ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.pmd-table td:first-child {
  text-align: left;
}

.pmd-table tr:hover td {
  background: #fafbff;
}

/* The label column of every grid is the one that holds prose — an indented
   asset-class or portfolio name, a position description — and a fixed column
   would otherwise clip it to an ellipsis. Wrap it over two lines instead: the
   figures beside it stay on one line (and stay put), and no name is lost. */
#pmd-table .pmd-table td:first-child,
#pmd-hierarchy .pmd-table td:first-child,
#pmd-comp-grid .pmd-table td:first-child {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

/* asset-class grid: hierarchy levels (indent is inline, from the row level) */
.pmd-l0 td {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2b5d9a;
  background: #f4f9ff;
  border-top: 1px solid #d0d5dd;
}

.pmd-l1 td {
  font-weight: 600;
  color: #344054;
}

.pmd-l2 td {
  color: #475467;
  font-size: 13px;
}

.pmd-grand td {
  font-weight: 700;
  color: #101828;
  background: #f4f9ff;
  border-top: 2px solid #175cd3;
}

tr.pmd-expandable {
  cursor: pointer;
}

.pmd-caret {
  display: inline-block;
  width: 14px;
  color: #98a2b3;
}

.pmd-pending {
  color: #98a2b3 !important;
  font-style: italic;
}

.pmd-neg {
  color: #b91c1c;
}

/* portfolio hierarchy card */
.pmd-table tr.pmd-hier-row {
  cursor: pointer;
}

.pmd-table tr.pmd-in-sel td {
  background: #f4f9ff;
}

.pmd-table tr.pmd-selected td {
  background: #c2dbff;
  font-weight: 600;
  color: #101828;
}

.pmd-table tr.pmd-selected:hover td,
.pmd-table tr.pmd-in-sel:hover td {
  background: #b8cce0;
}

.pmd-tick {
  color: #175cd3;
  font-weight: 700;
}

.pmd-hier-name {
  color: #101828;
}

/* enlarge the collapse-caret hitbox without changing its visual size:
   an invisible overlay extends the clickable area over the row height */
.pmd-tree-caret {
  position: relative;
}

.pmd-tree-caret::before {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: -12px;
  right: -4px;
}

/* Apply bar under the hierarchy table */
.pmd-hier-apply {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid #e4e7ec;
}

.pmd-apply-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #175cd3;
  color: #fff;
  border: 1px solid transparent;
  padding: 7px 18px;
  border-radius: 8px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pmd-apply-btn:hover {
  background: #1349a8;
}

.pmd-apply-btn.disabled,
.pmd-apply-btn:disabled {
  background: #eef1f5;
  color: #98a2b3;
  border-color: #e4e7ec;
  cursor: default;
}

/* SAA status pills */
.pmd-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}

.pmd-pill.in {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #bbf7d0;
}

.pmd-pill.over {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pmd-pill.under {
  background: #fefce8;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* charts row */
.pmd-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.pmd-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 6px 6px 0;
  overflow: hidden;
}

/* ---- composition explorer card (full-width) ---- */
/* header band carries only the title now; controls moved into the body */

/* SCOPE row: Total-portfolio base chip + removable drill chips ({group}: name) */
.pmd-comp-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 4px;
  font-size: 12.5px;
}

.pmd-scope-label {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}

.pmd-chip-x {
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  opacity: .7;
  margin-left: 2px;
}

.pmd-chip-x:hover {
  opacity: 1;
}

.pmd-chip-hint {
  color: #98a2b3;
  font-style: italic;
  margin-left: 4px;
}

.pmd-chip-sep {
  color: #98a2b3;
}

/* scope chips: compact, colour-coded by dimension (alloc neutral, others tinted) */
.pmd-comp-chips .pmd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f5;
  color: #344054;
  border: 1px solid #e3e8ef;
}

.pmd-comp-chips .pmd-chip.root {
  background: #eef3fa;
  color: #1b3a6b;
  cursor: pointer;
}

.pmd-comp-chips .pmd-chip.root.active {
  background: #1b3a6b;
  color: #fff;
  border-color: transparent;
}

/* GROUP BY row (the filter button lives in the card's header band) */
.pmd-comp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 0;
  flex-wrap: wrap;
}

.pmd-comp-groupby {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pmd-subseg {
  border-left: 1px solid #d0d5dd;
  padding-left: 10px;
}

/* filter icon button + its popover (DOM built by _render_filter_button) */
.pmd-comp-filter {
  position: relative;
}

.pmd-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 6px 11px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pmd-filter-btn:hover {
  background: #fafbff;
  color: #175cd3;
}

.pmd-filter-btn.active {
  background: #175cd3;
  color: #fff;
  border-color: transparent;
}

.pmd-filter-pop {
  /* fixed so no card/overflow ancestor can clip it; top/right/max-height
     are set inline from the button's viewport position */
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.16);
  min-width: 260px;
  max-width: 340px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* scrollable middle layer; the footer below stays frozen */
.pmd-filter-body {
  overflow: auto;
  padding: 10px 12px 6px;
}

/* one section per dimension inside the single combined popover */
.pmd-filter-sec {
  border-bottom: 1px solid #f0f3f7;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.pmd-filter-sec:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* section header: collapse caret + name + filtered-mark dot */
.pmd-filter-sec-h {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #1b3a6b;
  margin: 4px 0 2px;
  padding: 2px 2px;
  border-radius: 6px;
}

.pmd-filter-sec-h:hover {
  background: #f4f9ff;
}

.pmd-filter-sec-nm {
  flex: 1;
}

/* shown on a section whose dimension the draft actually filters */
.pmd-filter-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #175cd3;
  flex: 0 0 auto;
  margin-right: 4px;
}

.pmd-filter-tree {
  max-height: 200px;
  overflow: auto;
}

.pmd-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: #344054;
  white-space: nowrap;
}

.pmd-filter-row:hover {
  background: #f4f9ff;
}

.pmd-filter-cb {
  accent-color: #1b3a6b;
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  pointer-events: none;
  /* the whole row is the click target */
}

.pmd-filter-nm {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* frozen footer: Clear all | Cancel [Apply] */
.pmd-filter-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e4e7ec;
  padding: 8px 12px;
  background: #fff;
  flex: 0 0 auto;
}

.pmd-filter-link {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
}

.pmd-filter-link:hover {
  color: #175cd3;
  text-decoration: underline;
}

.pmd-filter-link:first-child {
  margin-right: auto;
}

/* scope metric strip (reflects the current drill scope; flashes on change) */
.pmd-comp-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 12px 16px 4px;
}

.pmd-comp-metric {
  background: #f7faff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
}

.pmd-comp-metric .k {
  font-size: 10.5px;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pmd-comp-metric .v {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}

.pmd-comp-metric .v.flash {
  color: #175cd3;
}

/* donut (left) + linked position grid (right) */
.pmd-comp-split {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 16px;
  padding: 8px 16px 14px;
  align-items: start;
}

@media (max-width: 720px) {
  .pmd-comp-split {
    grid-template-columns: 1fr;
  }
}

.pmd-comp-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Donut hover tooltip. Plotly's own hover label is disabled (hoverinfo="none")
   because it is painted into the plot's SVG, which is no wider than this narrow
   column: an edge slice's label overflowed the card, and CSS could not save it —
   an SVG root clips to its viewport whatever `overflow` says, and a label that
   did escape would paint under the following card.

   So it is a plain div on document.body, fixed-positioned from the cursor's
   viewport coordinates by _place_slice_tip. Same escape hatch, and same reason,
   as .pmd-dates-pop and .pmd-filter-pop above: no ancestor can clip or
   out-stack it. pointer-events: none so it can never sit between the cursor and
   the slice it describes and flicker the hover off. */
.pmd-comp-tip {
  position: fixed;
  z-index: 1000;
  display: none;
  pointer-events: none;
  max-width: 260px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.16);
  font-size: 12px;
  line-height: 1.35;
}

.pmd-comp-tip-l {
  color: #101828;
  font-weight: 600;
  /* long category names wrap rather than widening past max-width */
  overflow-wrap: anywhere;
}

.pmd-comp-tip-v {
  color: #475467;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.pmd-comp-donut-hint {
  font-size: 11.5px;
  color: #98a2b3;
  margin: 4px 0 8px;
}

/* gross-exposure caveat under the donut — a statement about what the chart
   measures, so it reads darker than the click hint below it. Collapses when
   _render_comp_note leaves it empty (the all-long case). */
.pmd-comp-donut-note {
  font-size: 11.5px;
  color: #667085;
  text-align: center;
  margin: 6px 0 0;
}

.pmd-comp-donut-note:empty {
  display: none;
}

/* only meaningful (drillable) slices should feel clickable */
.pmd-comp-card .slice path.surface {
  cursor: pointer;
}

/* custom legend list (Plotly's own legend is hidden) */
.pmd-comp-legend {
  width: 100%;
  font-size: 12px;
}

.pmd-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.pmd-legend-row:hover {
  background: #f4f9ff;
}

.pmd-legend-row.leaf {
  cursor: default;
}

.pmd-legend-row.leaf:hover {
  background: transparent;
}

.pmd-legend-sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.pmd-legend-nm {
  flex: 1;
  color: #344054;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmd-legend-pc {
  color: #667085;
  font-variant-numeric: tabular-nums;
}

/* "(short)" after a net-short category's name: the wedge is drawn from |mv|,
   so this is what tells the two apart */
.pmd-legend-short {
  color: #b91c1c;
  font-size: 11px;
}

/* position grid scroll area + per-row open-pricer link */
.pmd-comp-grid {
  max-height: 440px;
  overflow: auto;
}

/* grid + its row-cap footer share the right-hand column of the split */
.pmd-comp-gridwrap {
  min-width: 0;
}

.pmd-comp-gridfoot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #667085;
}

.pmd-comp-gridfoot select {
  font-size: 12px;
  color: #344054;
  padding: 3px 6px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.pmd-pricer-link {
  color: #175cd3;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.pmd-pricer-link:hover {
  text-decoration: underline;
}

/* footer */
.pmd-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #667085;
  padding: 2px 4px 12px;
}

.pmd-empty {
  background: #fff;
  border: 1px dashed #d0d5dd;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  color: #667085;
  font-size: 15px;
}

.pmd-empty b {
  color: #344054;
}

/* ---- investment guideline page (empty shell; content is server data) ----
   Used by investment-guideline.html only. It lives in this shared sheet
   because the guideline grid is a .pmd-table inside a .pmd-card and only
   makes sense alongside the rules that style those. */

/* The page stops growing before the screen does. Its widest thing is the
   summary grid — Measure + Limit plus two columns per picked date, capped at
   five dates — so beyond this the card is mostly empty gutter and a verdict
   line stretched across a metre of monitor. The grid keeps its own horizontal
   scroll (.pmd-table-wrap), so nothing is lost when a selection overflows.
   Scoped to the guideline shell: the PM dashboard's .pmd is untouched. */
.pmd-guideline {
  max-width: 100%;
}

.pmg-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 4px;
  font-size: 13.5px;
}

.pmg-header.ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.pmg-header.breach {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.pmg-verdict {
  font-size: 15px;
  font-weight: 700;
}

.pmg-header.ok .pmg-verdict {
  color: #15803d;
}

.pmg-header.breach .pmg-verdict {
  color: #b91c1c;
}

.pmg-header-meta {
  color: #475569;
}

.pmg-completeness {
  font-size: 12.5px;
  color: #475569;
  padding: 6px 16px 14px;
}

.pmg-completeness.incomplete {
  color: #b91c1c;
  font-weight: 600;
}


.pmg-select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}

.pmd-table tr.pmg-section-row td {
  background: #f1f5f9;
  font-weight: 700;
  cursor: pointer;
}

/* Measure and Limit are the only free-text columns in the grid; every other
   cell is a figure that must stay on one line, which is why .pmd-table td is
   nowrap. Their WIDTH is pinned by the grid's colgroup (_gl_col_weights), so
   what is left here is how their text behaves inside it: wrapped over as many
   lines as it needs, rather than clipped to the ellipsis every figure column
   gets — a truncated sub-measure label ("Max (greater of 10.00% or $50M)") is
   not a rule anyone can check.

   Section rows are excluded: their first cell is a colspan banner, and the
   badge beside it is the LAST cell, so a per-column rule would mean nothing
   there anyway. */
#pmg-grid .pmd-table tr:not(.pmg-section-row) td:first-child,
#pmg-grid .pmd-table tr:not(.pmg-section-row) td:nth-child(2) {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.pmd-table tr.pmg-section-row.breach td {
  background: #fef2f2;
  color: #b91c1c;
}

.pmg-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.pmg-badge.ok {
  background: #f0fdf4;
  color: #15803d;
}

.pmg-badge.breach {
  background: #fee2e2;
  color: #b91c1c;
}

.pmg-badge.na {
  background: #f1f5f9;
  color: #94a3b8;
  font-weight: 500;
}

.pmg-util {
  position: relative;
  width: 84px;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  display: inline-block;
  vertical-align: middle;
}

.pmg-util>span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: #60a5fa;
}

.pmg-util.hot>span {
  background: #f59e0b;
}

.pmg-util.over>span {
  background: #dc2626;
}

.pmg-secondary {
  color: #94a3b8;
  font-size: 11px;
}

/* Figure states on the summary grid, where colour carries the verdict and there
   is no Status column to fall back on. Reds match .pmg-badge.breach so a figure
   and its badge on the per-date view read as the same thing. */
.pmg-figure-breach {
  color: #b91c1c;
  font-weight: 700;
}

/* An untested measure evaluates to 0.00% and MUST NOT read as compliance: muted
   and suffixed rather than plain, mirroring the "n/a - no mapping" the client's
   own workbook writes beside those rows. */
.pmg-untested {
  color: #94a3b8;
  font-style: italic;
}

.pmg-delta-toward {
  color: #b45309;
}

.pmg-delta-away {
  color: #15803d;
}


.pmg-note {
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
}