/*
 * Copyright (C) 2026 S&P Global.
 *
 * All Rights Reserved
 *
 * Notice: The information, data, processing technology, software (including source code),
 * technical and intellectual concepts and processes and all other materials provided
 * (collectively the "Property") are Copyright © 2020, S&P Global and/or its affiliates
 * (together "S&P Global") and constitute the proprietary and confidential information of
 * S&P Global. S&P Global reserves all rights in and to the Property. Any copying,
 * reproduction, distribution, transmission or disclosure of the Property, in any form, is
 * strictly prohibited without the prior written consent of S&P Global. Unless otherwise
 * agreed in writing, the Property is provided on an "as is" basis and S&P Global makes no
 * warranty, express or implied, as to its accuracy, completeness, timeliness, or to any
 * results to be obtained by recipient nor shall S&P Global in any way be liable to any
 * recipient for any inaccuracies, errors or omissions in the Property. Without limiting the
 * generality of the foregoing, S&P Global shall have no liability whatsoever to any
 * recipient of the Property, whether in contract, in tort (including negligence), under
 * warranty, under statute or otherwise, in respect of any loss or damage suffered by any
 * recipient as a result of or in connection with such Property, or any course of action
 * determined, by it or any third party, whether or not based on the Property. The S&P Global
 * logo is a registered trademark of S&P Global, and the trademarks of S&P Global used
 * herein are protected by international laws. Any other names may be trademarks of their
 * respective owners.
 */

/* Consumer API additions to nimble.css (Nimble pages only) */

/*
 * Result grid text size. A single variable so it can become a user preference later: override it on :root or on a
 * body attribute/class set from the preference (e.g. [data-n6-grid-size=large] { --n6-result-grid-font-size: 1rem; }).
 */
:root {
    --n6-result-grid-font-size: 0.8125rem;
    /* bounded height, so the header rows stick and both scrollbars stay in view (future user preference) */
    --n6-result-grid-max-height: 75vh;
}

.n6-result-grid {
    font-size: var(--n6-result-grid-font-size);
}

/*
 * --n6-result-envelope-height is the height of the envelope table above the scroll area (set by consumer-api.js),
 * so the page with an envelope fits the viewport like the page without one (single scroll bar).
 */
.n6-result-scroll {
    max-height: max(10rem, calc(var(--n6-result-grid-max-height) - var(--n6-result-envelope-height, 0px)));
}

/* label of the envelope field holding the data grid (lifted out of the envelope into the scroll area) */
.n6-envelope-data-label {
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block;
    padding: 0 0.25rem;
}

/*
 * Top level result table (ObjectGrid rendered with topLevel = true). Sticky cells need an opaque background: cells
 * paint --bs-table-bg, set it on the table (caption rows override it on their tr). Borders of sticky cells do not
 * move with them (border-collapse), so the separators are drawn with box-shadow.
 */
.n6-result-table {
    --bs-table-bg: var(--bs-body-bg);
}

/* wider horizontal cell padding in all result grids, including nested ones (borders: Bootstrap table-bordered) */
.n6-grid-table > :not(caption) > * > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* header cells (column headers, and the field names of a pivoted table) get a subtle, opaque (sticky) background */
.n6-grid-table > thead > tr > th,
.n6-grid-table > tbody > tr > th {
    --bs-table-bg: var(--bs-tertiary-bg);
}

/* header cells of the primary key fields of the requested entity (latest: id; timeseries: id, timeseries field and
   timeseries key extension fields) */
.n6-grid-table > thead > tr > th.n6-primary-key,
.n6-grid-table > tbody > tr > th.n6-primary-key {
    --bs-table-bg: var(--bs-primary-bg-subtle);
}

/* the header column of a pivoted table (field names, th in tbody) is as narrow as its (nowrap) labels */
.n6-grid-table > tbody > tr > th {
    width: 1%;
}

/* subtle, colorless icon before the label of id, reference and timeseries fields */
.n6-result-grid .material-icons.n6-field-icon {
    font-size: 1em;
    color: var(--bs-secondary-color);
    vertical-align: text-bottom;
}

/* type menu in the breadcrumbs: only the (subtle) icon opens the menu */
.n6-type-menu-toggle {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.n6-type-menu-toggle:hover {
    color: var(--bs-emphasis-color);
}

.n6-type-menu-toggle .material-icons {
    font-size: 1.25em;
    vertical-align: middle;
}

/* help link next to the user menu in the header: a subtle icon, like the type menu toggle */
.n6-help-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    line-height: 1;
}

.n6-help-link:hover,
.n6-help-link:focus {
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.n6-help-link .material-icons {
    font-size: 1.5rem;
    vertical-align: middle;
}

.n6-type-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* nimble underlines all links of a hovered breadcrumb item: not the menu (items) */
.breadcrumb-item:hover a.n6-type-menu-toggle,
.breadcrumb-item:hover .n6-type-menu a.dropdown-item {
    text-decoration-line: none;
}

/* links in grid cells (nimble grids and object grids) are underlined on hover (nimble removes the underline of all
   links); not buttons, menu items or icons (see below) */
.table td a:not(.btn):not(.dropdown-item):not(.n6-icon):hover {
    text-decoration: underline;
}

/* icons in grids (header and value cells) are never underlined: an inline-block element does not inherit the
   underline of the link / hovered element around it */
.table .material-icons {
    display: inline-block;
    text-decoration: none;
}

/* icon only links in grid headers (inline/collapse toggle): the corporate Bootstrap theme underlines links (with
   text-underline-offset); the link itself draws that line (e.g. under the whitespace around the icon), so remove it on
   the link, not only on the icon */
.n6-inline-toggle,
.n6-inline-toggle:hover,
.n6-inline-toggle:focus,
.table th a:has(> .material-icons:only-child) {
    text-decoration: none;
}

/* icon only buttons above the grid (request panel: filters, output options, download, fields): Bootstrap's
   .btn-link underlines its content (also on hover) */
.btn-link.icon-link,
.btn-link.icon-link:hover,
.btn-link.icon-link:focus,
.btn-link:has(> .material-icons:only-child),
.btn-link:has(> .material-icons:only-child):hover {
    text-decoration: none;
}

.n6-result-table > thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/*
 * Sticky header/first column cells lose their collapsed borders while scrolling, so the borders are drawn as
 * composed inset shadows: the top border of the first header row, the bottom border of the last header row and the
 * right border of the sticky first column.
 */
.n6-result-table > thead > tr:first-child > th {
    --n6-shadow-top: inset 0 1px 0 var(--bs-border-color);
}

.n6-result-table > thead > tr > th {
    --n6-shadow-right: inset -1px 0 0 var(--bs-border-color);
}

.n6-result-table > thead > tr:last-child > th {
    --n6-shadow-bottom: inset 0 -1px 0 var(--bs-border-color);
}

/* leading columns (the primary key: id, timeseries field and key extension fields) stick while scrolling
   horizontally; caption cells (td in thead) span all columns; in a pivoted table (stream) the first column holds the
   field names (th in tbody). The left offset of the second and further sticky columns is set by consumer-api.js. */
.n6-sticky-columns .n6-sticky-column {
    position: sticky;
    left: 0;
    z-index: 1;
    --n6-shadow-right: inset -1px 0 0 var(--bs-border-color);
}

.n6-result-table > thead > tr > th,
.n6-sticky-columns > tbody > tr > .n6-sticky-column {
    box-shadow: var(--n6-shadow-top, 0 0 transparent), var(--n6-shadow-bottom, 0 0 transparent), var(--n6-shadow-right, 0 0 transparent);
}

/* row numbers of the data grid (ObjectGrid) */
.n6-row-number {
    color: var(--bs-secondary-color);
}

/* headings (type captions) and icons scale with the grid text instead of using their fixed sizes */
.n6-result-grid h6 {
    font-size: 1em;
}

.n6-result-grid .material-icons {
    font-size: 1.5em;
    vertical-align: middle;
}

/* Multi-line string values keep their line breaks and tabs */
.n6-indented-string {
    white-space: pre-line;
    tab-size: 4;
}

/* Alerts above/below the grid (results, see also, trace): icons inline with the text */
.alert .material-icons {
    font-size: 1.25em;
    vertical-align: middle;
}

/* Request trace, ported from restapi.css */
.n6-trace {
    font-size: 0.875rem;
}

.n6-trace-list {
    padding-left: 1rem;
}

.n6-trace-attributes {
    font-size: 0.75rem;
}

.n6-trace-query {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 0.5rem 0;
    max-width: 100%;
    overflow: auto;
    padding: 0.5rem;
    word-wrap: break-word;
}

.n6-trace-query pre {
    color: var(--n6-text-inclusive);
}

/*
 * Request form table (FormControls.formTable): label and operator columns shrink to their content (width 1% +
 * nowrap), the input column takes the remaining space.
 */
.n6-form-table > tbody > tr > th,
.n6-form-table > tbody > tr > td.n6-form-operator-cell {
    width: 1%;
    white-space: nowrap;
}

/*
 * Lookups through a reference in the request form (FormControls.paramTable): collapsed below the lookup on the
 * reference, toggled by a chevron after its label that points down when open; the nested labels are indented.
 */
.n6-nested-toggle,
.n6-nested-toggle:hover,
.n6-nested-toggle:focus {
    text-decoration: none;
    line-height: 1;
}

.n6-nested-toggle .material-icons,
.n6-nested-toggle .material-icons-outlined {
    font-size: 1.25rem;
    vertical-align: middle;
    transition: transform 0.2s;
}

.n6-nested-toggle[aria-expanded=true] .material-icons,
.n6-nested-toggle[aria-expanded=true] .material-icons-outlined {
    transform: rotate(90deg);
}

.n6-form-table > tbody > tr > th.n6-form-nested {
    padding-left: 1.5rem;
}

/*
 * Plain select (operator select in the request form): no dropdown arrow, just wide enough for the symbol (up to 2
 * characters). Ported from restapi.css; the pointer cursor and hover/focus highlight keep it recognisable as clickable.
 */
.n6-plain-select {
    appearance: none;
    width: 3.5rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    cursor: pointer;
}

.n6-plain-select:hover {
    background-color: var(--bs-secondary-bg);
}

/* Chips of the request panel: the remove icon is just a small x */
.n6-chip-remove {
    color: var(--bs-secondary-color);
    line-height: 1;
    text-decoration: none;
}
.n6-chip-remove:hover {
    color: var(--bs-danger);
}
.n6-chip-remove .material-icons {
    font-size: 1rem;
    vertical-align: middle;
}

/*
 * Date picker of the request form (FormControls.dateInput): only the calendar button is visible. The date input is
 * opened with showPicker(), so it stays rendered (not display:none) but takes no space, at the bottom left of the
 * control so the picker opens below the button.
 */
.n6-date-picker {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.n6-date-picker-button .material-icons {
    font-size: 1rem;
    vertical-align: middle;
}

/*
 * Login page (LoginWriter): the cards are centered vertically in the space below the page header (subtracted, with
 * the my-5 margins), so they end up in the visual middle of the page.
 */
.n6-login-page {
    min-height: calc(100vh - 12rem);
}

.n6-grid-key {
    background-color: var(--n6-highlight) !important;
}

.n6-grid-reference {
    background-color: var(--bs-info-bg-subtle) !important;
}

.n6-grid-filter {
    background-color: var(--bs-success-bg-subtle) !important;
}

/* field icon opening a filter popover: looks like the plain icon (no button styling) */
.table th button.n6-filter-trigger,
.table th button.n6-filter-trigger:hover,
.table th button.n6-filter-trigger:active {
    appearance: none;
    box-shadow: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: baseline;
    cursor: pointer;
}

.table th button.n6-filter-trigger:focus:not(:focus-visible) {
    outline: 0;
}

.n6-filter-popover {
    position: fixed;
    margin: 0;
    inset: auto;
    min-width: 20rem;
    max-width: calc(100vw - 1rem);
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: start;
    font-weight: normal;
}