/* ==========================================================================
   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;
}

.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); }
}

/* 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;
}