/* ==========================================================================
   HillMetrics — Hm* component styles
   Consolidated from per-component <style> blocks (which were duplicated in
   the DOM for every instance and leaked globally) and from app.css.
   Loaded AFTER MudBlazor.min.css so these rules can refine Mud internals.
   Every selector is namespaced (hm-*) or scoped under a namespaced parent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation drawer (MainLayout)
   The drawer palette is neutral (surface/text-primary) so that filter
   panels, notification centers and other drawers follow the active theme.
   The nav menu alone keeps the HillMetrics dark look via this class.
   -------------------------------------------------------------------------- */
.hm-nav-drawer {
    background-color: #001417 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.hm-nav-drawer .mud-nav-link,
.hm-nav-drawer .mud-nav-group .mud-nav-group-text {
    color: rgba(255, 255, 255, 0.87);
}

.hm-nav-drawer .mud-icon-root {
    color: rgba(255, 255, 255, 0.7);
}

/* MudBlazor styles nav icons from the (now neutral) drawer palette with a
   4-class selector - restate the always-dark drawer colors with priority. */
.hm-nav-drawer .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default,
.hm-nav-drawer .mud-nav-link .mud-nav-link-expand-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hm-nav-drawer .mud-nav-link:not(.mud-nav-link-disabled) {
    color: rgba(255, 255, 255, 0.87);
}

/* --- Drawer quick-search field (always-dark background) --- */
.hm-nav-drawer .nav-search-container {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #001417;
    padding-bottom: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hm-nav-drawer .nav-search-container input,
.hm-nav-drawer .nav-search-container .mud-input-slot {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

.hm-nav-drawer .nav-search-container .mud-input,
.hm-nav-drawer .nav-search-container .mud-input-control-input-container {
    color: rgba(255, 255, 255, 0.85) !important;
}

.hm-nav-drawer .nav-search-container input::placeholder,
.hm-nav-drawer .nav-search-container .mud-input-slot::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
    opacity: 1;
}

.hm-nav-drawer .nav-search-container .mud-input-outlined {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.hm-nav-drawer .nav-search-container .mud-input-outlined:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.hm-nav-drawer .nav-search-container .mud-input-outlined.mud-input-focused {
    background-color: rgba(255, 255, 255, 0.14);
}

.hm-nav-drawer .nav-search-container .mud-input-outlined .mud-input-outlined-border {
    border-color: #5499A2 !important;
}

.hm-nav-drawer .nav-search-container .mud-input-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.hm-nav-drawer .nav-search-container .mud-input-adornment .mud-icon-root,
.hm-nav-drawer .nav-search-container .mud-icon-button {
    color: rgba(255, 255, 255, 0.5) !important;
}

.hm-nav-drawer .nav-search-container .mud-icon-button:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.hm-nav-drawer .nav-collapse-btn {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color var(--hm-motion-base) var(--hm-ease);
}

.hm-nav-drawer .nav-collapse-btn:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --------------------------------------------------------------------------
   HmPageLayout
   -------------------------------------------------------------------------- */
.hm-page-title {
    overflow-wrap: anywhere;
}

.hm-page-actions {
    flex-wrap: wrap;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   HmFilterPanel (right-side drawer)
   -------------------------------------------------------------------------- */
.hm-filter-panel {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
}

.hm-filter-panel .mud-drawer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

.hm-filter-panel .mud-drawer-content > .mud-divider {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Full screen on phones — MudDrawer sets its width inline, hence !important. */
@media (max-width: 599.98px) {
    .hm-filter-panel {
        width: 100vw !important;
    }
}

/* --------------------------------------------------------------------------
   HmDataTable
   -------------------------------------------------------------------------- */
.hm-datagrid-toolbar {
    background-color: var(--mud-palette-surface);
}

.hm-quick-filter .mud-input-outlined-border {
    border-radius: 20px;
}

/* Server-side search box of the toolbar: takes the room between the title and the actions. */
.hm-datagrid-search {
    flex: 1 1 280px;
    max-width: 520px;
    min-width: 0;
}

.hm-datagrid-search .mud-input-control {
    margin: 0;
}

/* Manage tags dialog: the colour swatch next to the hex field */
.hm-tag-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    flex: none;
}

.hm-tags-manage .hm-tags-count {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hm-tags-manage .hm-tags-actions {
    white-space: nowrap;
}

.hm-datagrid .mud-table-row:hover {
    cursor: pointer;
}

.hm-datagrid-container .mud-table-container {
    overflow-x: auto;
}

.hm-datagrid .mud-table-head .mud-table-cell {
    font-weight: 600;
    background-color: var(--mud-palette-background-grey);
}

.hm-datagrid .mud-table-head .mud-table-row.mud-table-row-group-indented {
    background-color: var(--mud-palette-surface);
}

/* --------------------------------------------------------------------------
   HmActiveFilters
   -------------------------------------------------------------------------- */
.hm-filter-chip {
    transition: all var(--hm-motion-base) var(--hm-ease);
    /* Long values must wrap inside the chip instead of overflowing. */
    height: auto;
    max-width: 100%;
}

.hm-filter-chip .mud-chip-content {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-top: 3px;
    padding-bottom: 3px;
}

.hm-filter-chip:hover {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   HmTabs
   -------------------------------------------------------------------------- */
.hm-tabs-container {
    width: 100%;
}

.hm-tabs-bordered {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.hm-tabs-elevated {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.hm-tabs .mud-tabs-header {
    background-color: var(--mud-palette-surface);
}

.hm-tabs-filled .mud-tabs-header {
    background-color: var(--mud-palette-background-grey);
}

.hm-tabs-underlined .mud-tab {
    border-bottom: 2px solid transparent;
}

.hm-tabs-underlined .mud-tab.mud-tab-active {
    border-bottom-color: var(--mud-palette-primary);
}

.hm-tabs-pills .mud-tab {
    border-radius: 20px;
    margin: 4px;
    background-color: transparent;
    transition: all var(--hm-motion-base) var(--hm-ease);
}

.hm-tabs-pills .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary);
    color: white;
}

.hm-tabs-pills .mud-tabs-slider {
    display: none;
}

.hm-tab-lazy-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.hm-tab-header-compact .mud-tab {
    min-width: auto;
    padding: 8px 16px;
}

.hm-tabs-vertical {
    display: flex;
    flex-direction: row;
}

.hm-tabs-vertical .mud-tabs {
    flex-direction: row;
}

/* --------------------------------------------------------------------------
   HmFloatingMenu
   -------------------------------------------------------------------------- */
.hm-floating-menu {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hm-floating-panel {
    min-width: 180px;
    animation: hm-slide-up var(--hm-motion-base) ease-out;
}

.hm-fab-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform var(--hm-motion-base) var(--hm-ease);
}

.hm-fab-button:hover {
    transform: scale(1.05);
}

@keyframes hm-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   HmFormSection
   -------------------------------------------------------------------------- */
.hm-form-section {
    width: 100%;
    margin-bottom: 24px;
}

.hm-form-section-header {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 8px;
}

.hm-form-section-elevated {
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
}

.hm-form-section-elevated .hm-form-section-header {
    border-bottom: none;
    padding-bottom: 0;
}

.hm-form-section-collapsible {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Feed pipeline (FeedPipelineSteps) — pulse for in-progress stages
   -------------------------------------------------------------------------- */
.pipeline-step-pulse {
    animation: pipeline-pulse 1.5s ease-in-out infinite;
}

@keyframes pipeline-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-step-pulse,
    .hm-floating-panel {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   HmColumnFilter (column-header filter popover)
   -------------------------------------------------------------------------- */
.hm-column-filter-pop {
    min-width: 260px;
}

/* --------------------------------------------------------------------------
   Fetching content table — "next processing" highlight
   (global because the scoped ::deep variant cannot reach rows rendered by
   the data grid; the class is applied through RowClassFunc)
   -------------------------------------------------------------------------- */
tr.blink-next-processing,
.blink-next-processing > .mud-table-cell {
    animation: hm-blink-row 1s ease-in-out infinite;
}

@keyframes hm-blink-row {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 179, 0, 0.25); }
}

/* --------------------------------------------------------------------------
   Fetching content table — the run a link opened the history on
   (global for the same reason as above; the class is set on the child row)
   -------------------------------------------------------------------------- */
tr.hm-row-focus > td {
    background-color: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* Dense data grids: MudDataGrid keeps 16/24px cell padding even when Dense,
   which makes 8+ column grids overflow their container. Tighten it. */
.hm-datagrid.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 10px;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}

/* Extracted from razor <style> blocks (F07) - mapping area.
   These names were already global whenever the owning component rendered;
   they keep their historical names so co-consumers stay styled. */
.full-width { width: 100%; }
.border-lines { border: 1px solid var(--mud-palette-lines-default); }

.simulation-summary {
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    background-color: var(--mud-palette-background);
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    max-height: 400px;
    overflow-y: auto;
}

/* Very wide grids (10+ columns) opt into an even tighter cell padding via
   GridClass="hm-datagrid hm-datagrid-compact". Declared after the dense rule
   so it wins the tie at equal specificity. */
.hm-datagrid-compact.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 6px;
    padding-inline-start: 6px;
    padding-inline-end: 6px;
}

/* Picker dialogs: row states for list-and-select tables. These used to be
   duplicated <style> blocks overriding MudBlazor internals (.mud-selected-item);
   named explicitly here so a converted MudSimpleTable can set them directly. */
.hm-row-selected,
.hm-row-selected > td {
    background-color: var(--mud-palette-primary-hover);
}

.hm-row-disabled {
    background-color: var(--mud-palette-background-grey);
    opacity: 0.7;
}

.hm-row-clickable {
    cursor: pointer;
}

/* A value someone rejected. The row keeps its place — hiding it would make the feed look
   silent on that date — but it must read as set aside at a glance, not only through the
   chip at the far right of a wide table. */
.hm-row-in-error,
.hm-row-in-error > td {
    background-color: var(--mud-palette-error-hover);
}

.hm-row-in-error > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-error);
}

/* Bulk action bar, shown above a table once rows are ticked. */
.hm-bulk-actions {
    background-color: var(--mud-palette-primary-hover);
    border-radius: 6px;
}

/* ==========================================================================
   Business data point autocomplete — faceted dropdown
   The autocomplete popover is teleported to the page root, so these rules
   have to be global: scoped CSS on the component would never reach them.
   ========================================================================== */

/* Level bar above the results: "All 42 · Fund 12 · Stock 5 ...". */
.hm-bdp-ac-facets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hm-bdp-ac-facet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 14px;
    padding: 3px 10px;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.hm-bdp-ac-facet:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.hm-bdp-ac-facet--active,
.hm-bdp-ac-facet--active:hover {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.hm-bdp-ac-facet__count {
    padding: 0 5px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.08);
    font-size: 0.65rem;
    font-weight: 500;
}

.hm-bdp-ac-facet--active .hm-bdp-ac-facet__count {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Tag rows of the advanced search dialog: one line per family (Period, Frequency, Metric ...),
   reusing the level chip look. */

.hm-bdp-ac-refine__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hm-bdp-ac-refine__label {
    font-size: 0.65rem;
    color: var(--mud-palette-text-disabled);
}

/* Compact variant of the level chip, used by the dialog's tag rows. */
.hm-bdp-ac-facet--sm {
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 500;
}

/* Section header rows are injected as "disabled" items so they cannot be picked
   and keyboard navigation skips them — but they must read as headers. */
.hm-bdp-ac-popover .mud-list-item-disabled {
    color: var(--mud-palette-text-primary) !important;
    pointer-events: auto !important;
    cursor: default !important;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.hm-bdp-ac-popover .mud-list-item-disabled:hover {
    background-color: transparent !important;
}

.hm-bdp-ac-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.hm-bdp-ac-popover .mud-list-item-disabled:first-child .hm-bdp-ac-group {
    border-top: none;
    padding-top: 4px;
}

.hm-bdp-ac-group__count {
    padding: 0 6px;
    border-radius: 8px;
    background-color: var(--mud-palette-background-grey);
    font-weight: 500;
    letter-spacing: 0;
}

/* Part of a data point name that matched one of the typed tokens. */
.hm-bdp-ac-hit {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* Tiny inline tag (metadata tag / concept) on a result row. */
.hm-bdp-ac-tag {
    display: inline-block;
    font-size: 0.65rem;
    line-height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Footer under the result list: count for the term, focus state, advanced search. */
.hm-bdp-ac-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.hm-bdp-ac-footer__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.hm-bdp-ac-link {
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.hm-bdp-ac-link:hover {
    text-decoration: underline;
}

/* ============================================================================
   Loading mark
   ============================================================================
   The HillMetrics loader. The mark's outline is drawn once as a faint track,
   then a second copy of the same path is dashed and slid along it.

   The numbers are load-bearing, so don't round them:
     - the path is ~511 units long;
     - dasharray 150 + 390 gives a 540-unit pattern, and 540 > 511 means only
       one lit segment is ever on the mark at a time;
     - the gap (390) is shorter than the path, so the mark is never fully dark;
     - the sweep travels 540 to -540, i.e. 1080 = exactly two pattern periods,
       which is what makes the loop restart without a visible seam.

   Colours come from the Mud palette rather than fixed hex values, so both
   themes are covered by one definition - including the fact that the dark
   palette inverts Primary (see HmTheme.Create).
   ========================================================================= */

.hm-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.hm-loader-mark {
    --hm-loader-ink: var(--mud-palette-primary);
    --hm-loader-track: var(--mud-palette-lines-default);
    width: 120px;
    height: auto;
    flex: 0 0 auto;
}

/* Inline use. On a filled surface the palette primary is the background
   colour, so the mark takes the surrounding text colour instead. */
.hm-loader-mark--inherit {
    --hm-loader-ink: currentColor;
    --hm-loader-track: currentColor;
}

.hm-loader-mark--inherit .hm-loader-mark__track {
    opacity: 0.25;
}

.hm-loader-mark__track {
    stroke: var(--hm-loader-track);
}

.hm-loader-mark__run {
    stroke: var(--hm-loader-ink);
    animation: hm-loader-run 1.5s linear infinite;
}

@keyframes hm-loader-run {
    from { stroke-dashoffset: 540; }
    to { stroke-dashoffset: -540; }
}

/* Tuned for the large mark: at button size the lit segment is only a few
   pixels long, and the same speed reads as a flicker rather than motion. */
.hm-loader-mark--sm .hm-loader-mark__run {
    animation-duration: 2.2s;
}

/* Reduced motion means no motion, not slower motion: show the finished mark. */
@media (prefers-reduced-motion: reduce) {
    .hm-loader-mark__run {
        animation: none;
        stroke-dasharray: none;
    }
}

/* Announced but not shown - used when the mark carries no visible caption. */
.hm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Page-level first load: the mark sits alone, so it needs its own breathing room. */
.hm-page-loading {
    padding: 4rem 0;
}

/* Pager row: the MudDataGridPager toolbar keeps pushing its own content right,
   the "go to page" input sits after it, next to the navigation arrows. */
.hm-datagrid-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.hm-datagrid-pager > .mud-toolbar {
    flex: 1 1 auto;
}

.hm-datagrid-page-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline-end: 12px;
    white-space: nowrap;
}

.hm-datagrid-page-jump .hm-page-jump-input {
    width: 72px;
}

/* ============================================================================
   Bulk actions (HmDataTable keyed selection)
   ============================================================================
   The contextual bar appears between the toolbar and the grid as soon as a
   row is selected, and the run dialog lists every row of a batch with its
   outcome. Colours come from the palette so both themes are covered.
   ========================================================================= */

.hm-bulk-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-primary-hover);
}

.hm-bulk-bar > .mud-stack {
    width: 100%;
}

.hm-bulk-rows {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.hm-bulk-row {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) 2fr;
    align-items: center;
    gap: 0 12px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
}

.hm-bulk-row:last-child {
    border-bottom: 0;
}

.hm-bulk-row--pending {
    color: var(--mud-palette-text-secondary);
}

.hm-bulk-row--failed {
    background-color: var(--mud-palette-error-hover);
}

.hm-bulk-row__label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-bulk-row__message {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.hm-bulk-row--failed .hm-bulk-row__message {
    color: var(--mud-palette-error);
}

/* Narrow checkbox column used by keyed selection (and by pages that roll their own). Beats the dense-padding rule at equal or higher specificity. */
.hm-datagrid .mud-table-cell.hm-col-checkbox,
.hm-datagrid.mud-table-dense * .mud-table-row .mud-table-cell.hm-col-checkbox {
    width: 40px;
    padding-inline: 8px 0;
}

/* ---- Tenant logo (create / edit page) ---- */
.hm-logo-preview {
    display: flex;
    justify-content: center;
    padding: 16px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
}

.hm-logo-preview__image {
    max-width: 300px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.hm-logo-dropzone {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 24px 16px;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.hm-logo-dropzone:hover {
    border-color: var(--mud-palette-primary);
}

/* --------------------------------------------------------------------------
   Product card — list data points (one row per member and feed)
   The member key leads the row; on the following rows of the same member it
   is dimmed so the eye groups them.
   -------------------------------------------------------------------------- */
td.hm-member-key {
    font-weight: 600;
    white-space: nowrap;
}

td.hm-member-key-repeat {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================================
   Product page — family view
   Series cards, the single-values table, the series list. Global rather than
   scoped: the rows and cells are drawn by MudBlazor's table elements, which
   carry no component scope, and the classes are shared by three components.
   ========================================================================== */

/* A number: right-aligned, tabular digits, so columns of values line up. */
th.hm-num,
td.hm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A row whose Data Team edit is staged in the banner, waiting for a commit. */
.hm-row-staged,
.hm-row-staged > td {
    background-color: var(--mud-palette-warning-hover);
}

.hm-row-staged > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-warning);
}

/* Card title: name and badges on one line, the name taking the room. */
.hm-family-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.hm-family-card-title__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hm-family-card-title__link {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-family-card-title__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* Series card: the latest value large, its move and date beside it. */
.hm-series-card {
    height: 100%;
}

.hm-series-card--staged {
    outline: 1px solid var(--mud-palette-warning);
}

.hm-series-card__latest {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.hm-series-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.hm-series-card__column {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.hm-series-card__change {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.hm-series-card__change--up {
    color: var(--mud-palette-success);
}

.hm-series-card__change--down {
    color: var(--mud-palette-error);
}

.hm-series-card__date {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.hm-series-card__sparkline {
    display: block;
    margin: 2px 0 6px 0;
}

/* Single-values table: the name cell, the feeds cell, the folded editor row. */
.hm-single-values__name,
.hm-series-list__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hm-single-values__sheet {
    opacity: 0.55;
}

.hm-single-values__sheet:hover,
.hm-single-values__sheet:focus-visible {
    opacity: 1;
}

.hm-single-values__feeds {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hm-single-values__actions,
.hm-series-list__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.hm-single-values__editor > td,
.hm-series-list__editor > td {
    background-color: var(--mud-palette-background-grey);
    padding-top: 8px;
    padding-bottom: 12px;
}

.hm-series-list__trend {
    width: 132px;
}

.hm-series-list__latest {
    font-weight: 600;
}

/* Several columns of one value, written as label: value pairs on one line. */
.hm-value-cells {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.hm-value-cells--single {
    font-weight: 600;
}

.hm-value-cells__pair {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.hm-value-cells__label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.hm-value-cells__value {
    font-weight: 600;
}

/* A disagreement between feeds, spelled out. */
.hm-agreement {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 0.8125rem;
}

.hm-agreement--disagree {
    color: var(--mud-palette-warning-darken);
}

.hm-agreement__value {
    font-weight: 600;
}

/* ==========================================================================
   Data point values page
   The strip, the toolbar's feed chips, the docked chart, the comparison.
   Global for the same reason as the family view: MudBlazor's table cells.
   ========================================================================== */

.hm-values-product {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* At a glance: a row of figures, separated by hairlines. */
.hm-values-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-radius: 10px;
    padding: 0 4px;
}

.hm-values-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 22px;
    border-right: 1px solid var(--mud-palette-lines-default);
    min-height: 64px;
}

.hm-values-stat:last-child {
    border-right: 0;
}

.hm-values-stat__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.hm-values-stat__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hm-values-stat__value--error {
    color: var(--mud-palette-error);
}

.hm-values-stat__arrow {
    margin: 0 6px;
    color: var(--mud-palette-text-secondary);
}

/* One toolbar: period, feeds, the chart's error toggle. */
.hm-values-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
}

.hm-values-toolbar__period {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hm-values-toolbar__caption,
.hm-values-toolbar__label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.hm-values-toolbar__feeds {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Conditions on the data point's own properties: chips, and the search engine's editor below them,
   across the whole toolbar so the three fields have room. */
.hm-values-conditions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hm-values-conditions__editor {
    flex-basis: 100%;
    padding: 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.hm-values-conditions__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.hm-values-toolbar__switch {
    margin: 0;
}

/* The feed chip, shared with the family view. */
.hm-feed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.hm-feed-chip:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
}

.hm-feed-chip--on {
    background: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-primary);
}

.hm-feed-chip:disabled {
    cursor: default;
    opacity: 0.7;
}

/* The chart docked above the table. */
.hm-values-chart {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hm-values-chart__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.hm-values-chart__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
}

.hm-values-chart__legend {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.75rem;
}

.hm-values-count {
    font-variant-numeric: tabular-nums;
}

/* "≠": another feed sent a different value on this date. */
.hm-values-disagree {
    margin-left: 6px;
    font-weight: 700;
    color: var(--mud-palette-warning-darken);
    cursor: help;
}

/* Feed comparison. */
.hm-compare__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.hm-compare__count--warn {
    color: var(--mud-palette-warning-darken);
}

.hm-compare__row--disagree > td {
    background-color: var(--mud-palette-warning-hover);
}

.hm-compare__cell--differs {
    font-weight: 600;
}

.hm-compare__missing {
    color: var(--mud-palette-text-disabled);
}

.hm-compare__flag {
    margin-left: 6px;
    vertical-align: text-bottom;
}

.hm-compare__verdict {
    width: 1%;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pickers with a narrow input
   MudBlazor 9 renders a picker's popover inside the picker element, so the
   picker's own width becomes the containing block of the calendar: a picker
   sized to hold "2026-09-23" opened a calendar 170px wide with four of the
   seven day columns cut off. A calendar is 310px whatever the field is, so
   the popover is floored there and its content left free to fill it.
   -------------------------------------------------------------------------- */
.mud-picker-popover-paper {
    min-width: 310px;
    max-width: none;
}

.mud-picker-popover-paper .mud-picker-content {
    max-width: none;
}

/* "As of" date picker of the instruments search: the field stays narrow. */
.hm-fi-asof {
    flex: 0 0 auto;
}

.hm-fi-asof .mud-input-control {
    width: 170px;
    margin-top: 0;
}

/* ── Gaps in place: a data point holding nothing keeps its card and its row ── */

/* The card of a data point no feed carries yet: present, quiet, and ready to be filled. */
.hm-card--missing {
    border: 1px dashed var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-grey);
}

.hm-series-card__missing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.hm-row-missing > td {
    background-color: var(--mud-palette-background-grey);
}

.hm-single-values__missing {
    font-size: 0.8125rem;
}

.hm-single-values__add {
    text-transform: none;
}

.hm-cards-table__holds {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The gaps a section still holds, next to its count. */
.hm-family__section-gaps {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
}

.hm-family__missing-count {
    color: var(--mud-palette-warning-darken);
}

/* ── Long values: three lines, then the tooltip ── */

/* Fixed widths, so a long value wraps inside its own column instead of pushing Feeds, Agreement
   and the reference date off the screen. */
.hm-table-fixed {
    table-layout: fixed;
    width: 100%;
}

.hm-table-fixed td,
.hm-table-fixed th {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Three lines is enough to read a name or an address; beyond that the whole value is in the
   tooltip, and the values page shows it in full. */
.hm-value-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* A pair stays on one line only as long as it fits; a long value wraps like any other. */
.hm-value-cells__pair {
    white-space: normal;
}

/* A referential shows its name; its code is in the tooltip. */
.hm-referential {
    overflow-wrap: anywhere;
}

/* ── A single value as a card ── */
.hm-single-card {
    height: 100%;
}

.hm-single-card__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    overflow-wrap: anywhere;
}

.hm-single-card__values {
    font-size: 0.875rem;
}

.hm-single-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.hm-single-card__date {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.hm-single-card__agreement {
    margin-top: 8px;
}

/* The page-level switch in the header, before the primary button. */
.hm-page-header-extra {
    display: inline-flex;
    align-items: center;
}

/* The comparison level above the comparison table. */
.hm-compare-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* ── Compare data points: several data points of one product on one chart and one table. ── */
.hm-compare-points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 520px;
}

.hm-compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 2px 0 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.hm-compare-chip__name {
    font-weight: 500;
}

.hm-compare-chip__kind,
.hm-compare-chip__level,
.hm-compare-th__name {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.hm-compare-chip__level {
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

.hm-compare-th__name {
    display: block;
    font-weight: 400;
}

/* A round swatch is a curve, a square one an event: shape, not colour alone, tells them apart. */
.hm-compare-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    margin-right: 2px;
}

.hm-compare-swatch--event {
    border-radius: 2px;
}

.hm-compare-picker {
    min-width: 260px;
    max-width: 340px;
}

.hm-compare-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.hm-compare-tablebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 8px 0;
}

.hm-compare-delta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.hm-compare-delta--up {
    color: var(--mud-palette-success-darken);
}

.hm-compare-delta--down {
    color: var(--mud-palette-error-darken);
}

.hm-compare-row--event > td {
    background: var(--mud-palette-background-gray);
}