@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Full-page scroll for tabbed detail pages (Product, Tool, ...).

   Opt in by wrapping the page content in <div class="full-page-scroll">.

   By default the app shell traps scrolling: html/body are overflow:hidden and
   the .content grid cell is a fixed-height scroller. That clips tall tab
   content on small screens. Here the whole window scrolls instead, while the
   layout still stretches to fill the viewport when content is short (no gap).
   The viewport height is measured from .page, so the non-production banner and
   border frame are respected automatically. Pages without the marker keep the
   fixed-height app-shell scroll.
   --------------------------------------------------------------------------- */
html:has(.full-page-scroll),
body:has(.full-page-scroll) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

body:has(.full-page-scroll) .page {
    height: auto;
    min-height: 100vh; /* fill the viewport when content is short */
    display: flex;
    flex-direction: column;
}

/* Continue a flex chain all the way down to the grid so each level fills its
   parent without relying on percentage heights (a flex-grown block's height is
   not "definite", so height:100% on its children collapses back to content —
   which was the gap). */
body:has(.full-page-scroll) .page-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Direct child only, so the NavMenu's own inner grid is not affected. */
body:has(.full-page-scroll) .page-layout > .dxbl-gridlayout-root {
    flex: 1 1 auto;
    min-height: 0;
}

body:has(.full-page-scroll) .content {
    overflow: visible; /* stop the inner pane from being the scroller */
}

/* Several tab components inject an unscoped <style> block capping grids to
   .dxbl-grid { height: calc(100vh - Npx) }, which gives them their own inner
   scrollbar. Inside the page body the grid should size to its content and let
   the page scroll instead. Deliberately scoped to descendants of the marker
   (not body:has), so grids in DxWindow/DxPopup dialogs — which are rendered
   outside the marker and do want a capped, internally scrolling grid — keep
   their height. List pages keep their capped-height grids too. */
.full-page-scroll .dxbl-grid {
    height: auto;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}


.strikethrough-row > td {
    text-decoration: line-through;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

    .title.title-secondary {
        padding-top: 0.313rem;
        padding-bottom: 0;
        color: var(--bs-secondary-color);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}


.or {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .or .or-line {
        border-bottom: 1px solid var(--bs-body-color);
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem 0px 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: var(--bs-body-color);
        opacity: 0.7;
    }

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--bs-body-color);
        opacity: 0.7;
    }

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary);
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-message.info-panel {
        margin-bottom: 0.625rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

.icon-external-provider {
    width: 1rem;
    height: 1rem;
}

.icon-google {
    background-image: url("/images/account/providers/google-logo.svg")
}

.icon-facebook {
    background-image: url("/images/account/providers/facebook-logo.svg")
}

.icon-microsoft {
    background-image: url("/images/account/providers/microsoft-logo.svg")
}

.icon-twitter {
    background-image: url("/images/account/providers/x-logo.svg")
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

/* ---------- Preferred Quote Tool field ---------- */
/* Shared by Product.razor and Order/OrderProduct.razor. Global, not scoped: DxDropDown renders
   outside the component that declares it, so neither a scoped sheet nor ::deep can reach the
   popup. Keeping the link and badge rules alongside it stops the two pages drifting apart. */

/* The tool set link, matched to the wrench and gear links either side of it. Those are
   DxButtons in Link style; this is a plain anchor, so the look is set here. The size and
   hover colour are the theme's own button values - .dxbl-btn is .875rem/1.4285, and
   --dxbl-btn-link-hover-color is #fe7109. An anchor left alone inherits the page's 1rem
   and would sit 2px larger than its neighbours. */
.preferred-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #212529;
    font-size: 0.875rem;
    line-height: 1.4285;
    text-decoration: underline;
}

.preferred-tool-link:hover {
    color: #fe7109;
}

/* The Preferred Quote Tool popup. */
.pqt-popup {
    border: 1px solid #CED4DA;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    overflow: hidden;
}

/* preferred-tool-badge pins these to one size. Left to themselves, .badge is .75em of whatever
   it sits in, so a pill inside a link and a badge outside it come out at different sizes. */
.preferred-tool-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    vertical-align: middle;
}

a.preferred-tool-badge {
    cursor: pointer;
}

a.preferred-tool-badge:hover {
    text-decoration: underline !important;
}

/* Rendered Markdown (Docs). Markdig emits bare <table>, so give tables borders and padding. */
.md-body table {
    border-collapse: collapse;
    margin: 0 0 1rem;
    max-width: 100%;
}

.md-body th,
.md-body td {
    border: 1px solid #dee2e6;
    padding: 0.375rem 0.625rem;
    vertical-align: top;
    text-align: left;
}

.md-body thead th {
    background: #f8f9fa;
    font-weight: 600;
}

.md-body tbody tr:nth-child(even) {
    background: #fcfcfd;
}

.md-body blockquote {
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    border-left: 4px solid #dee2e6;
    color: #495057;
}

.md-body pre {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* ---------- Product Dependencies toolbar: segmented pair ---------- */
/* Active / All and Classic / Tool Sets. Global because ProductDependencies has no .razor.css.
   Selected is a tint, never a solid fill: Add Tool Set is the only filled control. */
.pd-seg {
    display: inline-flex;
}

.pd-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #ced4da;
    background: #ffffff;
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pd-seg-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.pd-seg-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.pd-seg-btn + .pd-seg-btn {
    margin-left: -1px; /* share the middle border */
}

.pd-seg-btn:not(.is-on):hover {
    background: #f8f9fa;
}

.pd-seg-btn.is-on {
    background: #e7f1ff;
    color: #0a58ca;
    font-weight: 600;
    cursor: default;
}

.pd-seg-btn:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.pd-seg-count {
    font-size: 12px;
    color: #6c757d;
}

.pd-seg-btn.is-on .pd-seg-count {
    color: #0a58ca;
}