@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;
    }
}