@import url("vars/colors.css");
@import url("vars/vars.css");
@import url("banner.css");
@import url("logos.css");
@import url("main-nav.css");
@import url("tables.css");
@import url("tagging.css");
@import url("toast.css");
@import url("input/buttons.css");
@import url("input/text-inputs.css");
@import url("layout/app-layout.css");
@import url("layout/customer-layout.css");
@import url("layout/forms.css");
@import url("layout/reviews.css");
@import url("layout/tabbed-page-layout.css");
@import url("widget/action-item.css");
@import url("widget/copiable-text.css");
@import url("widget/deliverable.css");
@import url("widget/empty-state.css");
@import url("widget/modal.css");
@import url("widget/two-panel.css");
@import url("widget/three-button-grid.css");
@import url("widget/chat/chat-bubbles.css");
@import url("widget/chat/chat-input.css");
@import url("widget/chat/chat-list.css");
@import url("widget/input/authorized-until-input.css");
@import url("widget/input/crepe-editor.css");
@import url("widget/input/crepe-editor-sm.css");
@import url("widget/input/edit-in-place.css");
@import url("widget/input/edit-in-place-usd.css");
@import url("widget/input/file-upload.css");
@import url("widget/input/healthscore.css");
@import url("widget/input/password-input-widget.css");
@import url("widget/input/searchable-dropdown.css");
@import url("widget/input/wait-state-button.css");

a {
    font-weight: 600;
    text-decoration: none;
}

a:not(.btn, [role=button]):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:has(i):hover {
    color: var(--bs-primary-hover); /* mimics color shift when hovering .btn-primary */
}

a[href="javascript: void('unimplemented')"] {
    cursor: no-drop;
    opacity: 0.5;
}

/* Disallow pointer events on click, while still allowing hover (for tooltips) */
a[href="javascript: void('unimplemented')"]:active {
    pointer-events: none;
}

body {
    background-color: var(--off-white);
	color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

body * {
    scrollbar-color: #e0e0e0 transparent;
}

/*
 * Border for all elements for debugging
 * Bookmarklet to toggle on/off: javascript: document.body.classList.toggle("debug")
 */
body.debug * {
    border: 1px dashed red;
}

/*
 * Bookmarklet to toggle on/off: javascript: document.body.classList.toggle("show-mockup-features")
 */
body:not(.show-mockup-features) .mockup-feature {
    display: none !important;
}

code {
    color: var(--aluvi-red);
}

button,
input[type=button],
input[type=checkbox],
select,
.form-check-label {
    cursor: pointer !important; /* !important to override reboot */
}

input, select, textarea {
    font-size: var(--font-size-base) !important;
}

input[type=checkbox]:checked {
    accent-color: var(--bs-primary) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
input[type=checkbox]:checked:hover {
    accent-color: var(--bs-primary) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    /* shifts the calendar indicator icon from black to --aluvi-teal (#1380a2) */
    filter: invert(43%) sepia(65%) saturate(6192%) hue-rotate(173deg) brightness(89%) contrast(85%);
}

footer {
    color: var(--medium-gray);
    font-size: var(--font-size-small);
    position: relative;
}

footer a {
    color: var(--medium-gray);
    font-weight: normal;
}

main {
    container-type: size;
    height: 100%;
    padding: 15px;
    transition: padding var(--nav-collapse-transition), width var(--nav-collapse-transition);
    width: 100%;
}

main.one-panel {
    /*
     * one-panel padding is instead added to direct children to achieve navbar-aware centering effect,
     * while allowing child scrollbars to be right-aligned to this panel
     */
    padding: 0;
    overflow-y: scroll;
}

main.one-panel > :not(script):not(style):not(template):first-child {
    margin-top: var(--base-unit-4x);
}

main.one-panel > :not(script):not(style):not(template):last-child {
    margin-bottom: var(--base-unit-4x);
}

main.one-panel > * {
    padding-left: var(--base-unit-4x);
    padding-right: var(--base-unit-4x);
    transition: padding var(--nav-collapse-transition), width var(--nav-collapse-transition);
    width: 100%;
}

p:last-of-type {
    margin-bottom: 0; /* override Reboot to prevent empty space after last paragraph in container */
}


::placeholder {
    color: var(--medium-gray) !important;
}


#main-content {
    container-type: inline-size;
    transition: filter 0.5s;
}


.alert-critical {
    color: var(--bs-danger);
    cursor: help;
    font-style: italic;
}

.alert-warning {
    color: var(--bs-warning);
    cursor: help;
    font-style: italic;
}

/* Creates a gradient blending effect at the top of an element to help infer that elements above it are scrolling behind it */
.blend-up {
    box-shadow: 0 calc(-1 * var(--base-unit-6x)) var(--base-unit-4x) calc(-1 * var(--base-unit-3x)) var(--off-white);
}

/* Creates a gradient blending effect at the bottom of an element to help infer that elements below it are scrolling behind it */
.blend-down {
    box-shadow: 0 var(--base-unit-6x) var(--base-unit-4x) calc(-1 * var(--base-unit-3x)) var(--off-white);
}

.blur-fully {
    filter: blur(25px);
}

.button-row {
    display: flex;
    gap: var(--base-unit-3x);
    justify-content: space-evenly;
    margin-bottom: var(--base-unit-5x);
}

.card-container {
    border: 2px solid var(--medium-light-gray);
    border-radius: var(--container-border-radius);
    padding: var(--base-unit-8x);
}

.center-horizontally {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.center-vertically {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.code {
    background-color: #eee;
    font-family: Consolas, monospace;
    font-size: var(--font-size-small);
    padding: 8px;
    white-space: pre-wrap;
}

/* Separates child elements with a comma */
.comma-separated {
    font-size: 0; /* collapses all space between elements */
}

.comma-separated * {
    font-size: var(--font-size-base);
}

.comma-separated :not(:first-child)::before {
    content: ", ";
}

.cursor-help {
    cursor: help;
}

.dropdown-header {
    font-size: var(--font-size-small);
    font-weight: 600;
}

.dropdown-item {
    font-size: var(--font-size-base);
}

.dropdown-item:hover {
    text-decoration: none !important;
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--aluvi-teal);
}

.dropdown-item.checked i {
    visibility: visible;
}

.dropdown-item i {
    margin-left: calc(-1 * var(--base-unit));
    margin-right: var(--base-unit);
    visibility: hidden;
}

.field-label {
    color: var(--graphite);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-near-bold);
    margin-bottom: var(--base-unit);
}

.fit-content {
    width: fit-content;
}

.full-height-modal .modal-content {
    height: calc(100vh - 60px);
}

.full-width {
    width: 100% !important;
}

.full-width > * {
    padding-left: var(--base-unit-4x) !important;
    padding-right: var(--base-unit-4x) !important;
    width: 100% !important;
}

:not(main).full-width {
    padding-left: var(--base-unit-4x) !important;
    padding-right: var(--base-unit-4x) !important;
}

.greeting {
    font-size: 24px;
    margin-bottom: var(--base-unit-2x);
    margin-top: var(--base-unit-2x);
    text-align: center;
    transition: font-size 1s, margin 1s, width 1s;
}

.greeting > * {
    text-wrap: nowrap;
}

.icon-button {
    align-items: center;
    display: inline-flex;
    gap: var(--base-unit-3x);
    justify-content: center;
}

.img-to-white {
    filter: brightness(0) invert(100%);
}

.inactive {
    color: #aaa;
}

.larger-text {
    font-size: larger;
}

.link-list i {
    display: inline-block;
    text-align: center;
    width: 20px
}

.list-item a:hover {
    /* don't underline links in menus */
    text-decoration: none;
}

.main-container {
    position: relative;
    top: 35%;
    transform: translateY(-35%);
    width: 100%;
}

.main-container > * {
    margin-left: auto;
    margin-right: auto;
}

.main-container h6 {
    color: var(--medium-gray);
}

.mobile-hidden {
    display: none;
}

/* All modals are invisible, except the "main" modal; when shown, their content is swapped into the main modal */
.modal:not(#modal) {
    display: none;
}

.modal-header {
    align-items: start; /* makes the × button top-aligned */
}

.mono {
    font-family: Consolas, monospace;
    font-size: smaller;
}

/* Adds a green [NEW] label before the element with this class */
.new-flag::before {
    background-color: var(--faint-green);
    border-radius: var(--base-unit);
    color: var(--green);
    content: "NEW";
    display: inline-block;
    font-size: var(--font-size-smaller);
    font-weight: bold;
    margin-right: var(--base-unit);
    padding: 2px 8px;
    text-align: center;
    vertical-align: middle;
    width: fit-content;
}

.page-heading {
    font-size: var(--font-size-heading);
    margin-bottom: 0;
}

.page-heading .breadcrumb-item a {
    font-weight:  var(--font-weight-boldish);
}

.page-heading .breadcrumb-item:before {
    font-family: monospace;
    font-weight: 300;
}

.page-heading.small {
    font-size: var(--font-size-sub-heading);
    margin-bottom: 0;
}

.page-heading-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--base-unit-2x);
    margin-top: var(--base-unit-6x) !important;
    z-index: 1;
}

.page-help {
    color: var(--darker-blue-gray);
}

.pancaked {
    max-height: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.required:after {
    color: var(--bs-danger);
    content: "*";
    margin-left: var(--base-unit);
}

.small-text {
    font-size: var(--font-size-small);
}

.type-icon {
    cursor: help;
    color: var(--dark-blue-gray);
}

.processing {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.85);
    bottom: 0;
    display: none;
    height: 100%;
    justify-content: center;
    position: sticky;
    top: 0;
    width: 100%;
}

.processing i {
    border-color: var(--aluvi-red) var(--aluvi-red) var(--aluvi-red) transparent;
    height: var(--base-unit-16x);
    width: var(--base-unit-16x);
}

.under-construction {
    overflow-y: hidden; /* disables scrolling when overlay showing */
}

.under-construction .processing {
    display: flex;
}

.w-0 {
    width: 0 !important;
}


@keyframes blinker {
    50% {
        opacity: 0;
    }
}


@media (min-width: 600px) {
    .button-row {
        justify-content: end;
    }

    .mobile-hidden {
        display: unset;
    }

    .page-heading-container {
        margin-top: var(--base-unit-12x) !important;
    }
}

@media (max-width: 600px) {
    /*
     * TODO ALUVI TS is dynamically toggling tooltips based on touch events, so this shouldn't be needed...
     *       but tooltips are still showing on mobile somehow
     */
    .tooltip {
        display: none !important;
    }
}

@media (min-width: 800px) {
    .full-width > * {
        padding-left: var(--base-unit-6x) !important;
        padding-right: var(--base-unit-6x) !important;
    }

    .greeting {
        margin-top: var(--base-unit-12x);
    }
}


/* navbar-aware centering effect -- centers main.one-panel content on screen, instead of within its container */

@container (min-width: 1000px) {
    main.one-panel > * {
        padding-right: calc(8% + var(--nav-desktop-max-width));
        padding-left: 8%;
    }

    .collapsed-nav main.one-panel > * {
        padding-right: calc(8% + var(--nav-collapsed-width));
    }
}

@container (min-width: 1200px) {
    main.one-panel > * {
        padding-right: calc(10% + var(--nav-desktop-max-width));
        padding-left: 10%;
    }

    .collapsed-nav main.one-panel > * {
        padding-right: calc(10% + var(--nav-collapsed-width));
    }
}

@container (min-width: 1400px) {
    main.one-panel > * {
        padding-right: calc(12% + var(--nav-desktop-max-width));
        padding-left: 12%;
    }

    .collapsed-nav main.one-panel > * {
        padding-right: calc(12% + var(--nav-collapsed-width));
    }
}

@container (min-width: 1600px) {
    main.one-panel > * {
        padding-right: calc(14% + var(--nav-desktop-max-width));
        padding-left: 14%;
    }

    .collapsed-nav main.one-panel > * {
        padding-right: calc(14% + var(--nav-collapsed-width));
    }
}

@container (min-width: 1800px) {
    main.one-panel > * {
        padding-right: calc(16% + var(--nav-desktop-max-width));
        padding-left: 16%;
    }

    .collapsed-nav main.one-panel > * {
        padding-right: calc(16% + var(--nav-collapsed-width));
    }
}