/* Bootstrap overrides
    This file is used to override the default Bootstrap styles. Any classes which build upon Bootstrap should be overridden here so that it is clear where the styles are coming from.

    This file can also be used to override the default Bootstrap variables.
    This is done by adding the --bs- prefix to the variable name.

    IMPORTANT: If we create a component in a dedicated file, we should not override the default Bootstrap styles here.
    Instead, we should override the styles in the dedicated file to keep the styling close to the markup.

    For more details, check: https://getbootstrap.com/docs/5.3/getting-started/introduction/
*/
:root {
    /* Body overrides */
    --bs-body-bg: var(--surface-secondary);
    --bs-body-color: var(--text-primary);

    /* Border overrides */
    --bs-border-width: var(--border-width);
    --bs-border-color: var(--border-default);
    --bs-border-radius: var(--border-radius-sm);
    --bs-border-radius-sm: var(--border-radius-xs);
    --bs-border-radius-lg: var(--border-radius-default);
    --bs-border-radius-xl: var(--border-radius-lg);
    --bs-backdrop-bg: var(--overlay);
    --bs-backdrop-opacity: 1;

    /* Surface overrides */
    --bs-primary-bg-subtle: var(--surface-secondary);
    --bs-modal-bg: var(--surface-secondary);

    /* Text overrides */
    --bs-primary-text-emphasis: var(--text-primary);

    --bs-modal-margin: 4.75rem;
}

/* Status palette: alerts, list-group-item-*, table-* resolve through these */
:root,
[data-theme] {
    --bs-success-text-emphasis: var(--semantic-success-text);
    --bs-success-bg-subtle: var(--semantic-success-surface);
    --bs-success-border-subtle: var(--semantic-success-border);
    --bs-info-text-emphasis: var(--semantic-info-text);
    --bs-info-bg-subtle: var(--semantic-info-surface);
    --bs-info-border-subtle: var(--semantic-info-border);
    --bs-warning-text-emphasis: var(--semantic-warning-text);
    --bs-warning-bg-subtle: var(--semantic-warning-surface);
    --bs-warning-border-subtle: var(--semantic-warning-border);
    --bs-danger-text-emphasis: var(--semantic-danger-text);
    --bs-danger-bg-subtle: var(--semantic-danger-surface);
    --bs-danger-border-subtle: var(--semantic-danger-border);
    --bs-secondary-text-emphasis: var(--text-secondary);
    --bs-secondary-bg-subtle: var(--surface-secondary);
    --bs-secondary-border-subtle: var(--border-default);
}

[data-theme="light"] {

    /* Body overrides */
    --bs-body-bg: var(--surface-secondary);
    --bs-body-color: var(--text-primary);

    /* Border overrides */
    --bs-border-color: var(--border-default);

    /* Surface overrides */
    --bs-primary-bg-subtle: var(--surface-secondary);

    /* Text overrides */
    --bs-primary-text-emphasis: var(--text-primary);

    /* Accordion overrides */
    /* https://getbootstrap.com/docs/5.3/components/accordion/ */
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-focus-border-color: #fff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-color: var(--text-primary);

}

/* EXTEND OR OVERRIDE EXISTING BOOTSTRAP CLASSES */

.gap-6 {
    gap: 64px;
    /* Extending as bs only goes up to 48px */
}

.min-w-0 {
    min-width: 0;
    /* Adding as bs ships no min-width utility. Flex and grid children need it so a
       .text-truncate child ellipsizes instead of widening the row past its container. */
}

/* Bootstrap ships its own blue focus shadows on these; replace them with the
   global :focus-visible ring from elements.css and drop the mouse-click ring. */
.btn:focus-visible,
.btn-close:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface-secondary), 0 0 0 4px var(--focus-ring-color);
}

.btn-close:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible),
.form-check-input:focus:not(:focus-visible) {
    box-shadow: none;
}

/* The global `label { width: 100% }` pushes the label below its checkbox. */
.form-check-label {
    width: auto;
    padding-left: var(--p-2);
}

/* Our checkbox is as tall as the label's line, so Bootstrap's top offset would push it below the text. */
.form-check:not(.form-switch) > .form-check-input {
    margin-top: 0;
}

.btn-close {
    background: none;
    padding: 0;
    opacity: 1;
}

.card {
    background-color: var(--surface-secondary);
    background-image: var(--surface-sheen);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width));
    box-sizing: border-box;
    position: relative;
    word-break: break-word;
    overflow: hidden;

    &.toggle-button {
        &:hover {
            background-image: var(--surface-hover-layer), var(--surface-sheen);
            cursor: pointer;
        }
    }

    h4 {
        color: var(--text-primary);
        margin:0;
    }

    .card-title {
        font-weight: var(--font-weight-bold);
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        flex: 1;
    }

    header,
    .card-header {
        background-color: transparent !important;
        border-bottom: 0;
        color: var(--text-secondary);
        margin-bottom: 0;
        padding: var(--p-3) var(--p-3) 0;
        line-height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        /* A leading title wraps beside the controls down to 12rem, then the controls drop to their own row */
        > :is(h1, h2, h3, h4, h5, h6):first-child {
            flex: 1 1 12rem;
        }
    }

    .subtitle {
        color: var(--text-tertiary);
        font-weight: var(--font-weight-400, 400);
    }

    .card-content {
        color: var(--text-secondary);
        text-align: left;
        position: relative;
        align-self: stretch;
    }

    .card-body {
        padding: var(--p-3);

        &.with-hover {
            &:hover {
                background-color: var(--surface-hover);
            }
        }
    }
    .card-footer {
        border: 0;;
    }
}

/* BOOTSTRAP POPOVER AND DROPDOWN OVERRIDES */
.dropdown-toggle-split {
    border-left: var(--border-width) solid var(--border-default);
    margin-left: -1px;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;

    &::after {
        color: currentColor;
        margin-left: 0;
    }
}



.dropdown-item {
    font-size: var(--font-size-default);
    flex-shrink: 0;
    padding: var(--p-2);
    border-radius: var(--border-radius-sm);
    text-align: left;
    /* Global `button` styles make button items inline-flex + centered; menu items always align to the start. */
    justify-content: flex-start;

    &.p-btn {
        padding-inline: var(--p-2);
    }

    &:hover {
        cursor: pointer;
    }

    &:not(:disabled):hover {
        background: var(--surface-hover);
        color: var(--text-primary);
    }

    &:not(:disabled):active {
        background: var(--action-secondary-active);
        color: var(--text-primary);
    }

    &.selected {
        background-color: var(--surface-selected);
    }

    &.disabled,
    &:disabled {
        color: var(--text-disabled);
        cursor: not-allowed;
    }
}

.dropdown-menu,
.popover {
    background-color: var(--surface-tertiary);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-elevated);
    min-width: 128px !important;
}

.dropdown-menu {
    padding: var(--primitive-1);
}

.popover {
    padding: 0;

    hr {
        margin: var(--p-1) 0;
    }
}

/* Button menu items are inline-flex, so the open menu stacks them itself. */
.dropdown-menu.show:has(> button.dropdown-item) {
    display: flex;
    flex-direction: column;
}

h3.popover-header {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    border-bottom: none;
    padding: var(--p-2);
}

.list-group {
    --bs-list-group-bg: var(--surface-secondary);
    --bs-list-group-hover-bg: var(--surface-hover);
    --bs-list-group-active-bg: var(--surface-selected);
    --bs-list-group-active-color: var(--text-primary);
    --bs-list-group-active-border-color: var(--border-default);
    --bs-list-group-action-hover-bg: var(--surface-hover);
    --bs-list-group-action-active-bg: var(--surface-selected);
    --bs-list-group-action-active-color: var(--text-primary);
    --bs-list-group-action-hover-color: var(--text-primary);
    --bs-list-group-disabled-color: var(--text-disabled);
    --bs-list-group-border-color: var(--border-default);
}

/* Hover/selected washes are translucent: layer them over the item's opaque fill
   instead of replacing it, so floating lists (dropdowns, popovers) never show through. */
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--bs-list-group-bg);
    background-image: var(--surface-hover-layer);
}

.list-group-item-action:active,
.list-group-item.active {
    background-color: var(--bs-list-group-bg);
    background-image: var(--surface-selected-layer);
}

/* Rows listed inside a card: 12px vertical, 16px horizontal. */
.card > .list-group-flush {
    --bs-list-group-item-padding-y: var(--primitive-3);
    --bs-list-group-item-padding-x: var(--p-3);
}

.placeholder {
    background-color: var(--text-tertiary) !important;
    border-radius: var(--border-radius-xs);
    opacity: 0.3;
}

/* Modern shimmer sweep animation for placeholders */
@keyframes placeholder-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes placeholder-shimmer-vertical {
    0% {
        background-position: 0 -200%;
    }

    100% {
        background-position: 0 200%;
    }
}

.placeholder-glow .placeholder {
    background: linear-gradient(
        270deg,
        var(--text-tertiary) 0%,
        color-mix(in srgb, var(--text-tertiary) 30%, var(--surface-secondary)) 30%,
        color-mix(in srgb, var(--text-tertiary) 10%, var(--surface-secondary)) 50%,
        color-mix(in srgb, var(--text-tertiary) 30%, var(--surface-secondary)) 70%,
        var(--text-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: placeholder-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.placeholder-glow.vertical .placeholder {
    background: linear-gradient(
        180deg,
        var(--semantic-kpi-inactive-fill) 0%,
        color-mix(in srgb, var(--semantic-kpi-inactive-fill) 30%, var(--surface-secondary)) 30%,
        color-mix(in srgb, var(--semantic-kpi-inactive-fill) 10%, var(--surface-secondary)) 50%,
        color-mix(in srgb, var(--semantic-kpi-inactive-fill) 30%, var(--surface-secondary)) 70%,
        var(--semantic-kpi-inactive-fill) 100%
    );
    background-size: 100% 200%;
    animation: placeholder-shimmer-vertical 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.popover-header,
.popover-body {
    background-color: transparent;
    color: var(--text-primary);
}

.popover-arrow {
    display: none !important;
}

.offcanvas {
    --bs-offcanvas-bg: var(--surface-tertiary);
    --bs-offcanvas-color: inherit;
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-box-shadow: var(--shadow-elevated-lg);
}

/* Bottom sheet: height follows the content, up to most of the viewport. */
.offcanvas-bottom {
    --bs-offcanvas-height: auto;
    max-height: 85vh;
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}

.btn-group {
    display: flex;
}

.modal {
    margin: var(--bs-modal-margin);

    .modal-header,
    .modal-body,
    .modal-footer {
        border: 0;
        padding: var(--p-3);
    }

    .modal-header {
        padding-bottom: 0;
    }
    .modal-footer {
        padding-top: 0;
    }

    .modal-content {
        background-color: var(--surface-tertiary);
        background-image: var(--surface-sheen);
        border: var(--border-width) solid var(--border-default);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-elevated-lg);

        .btn-close {
            background: none;
        }

        .btn-close::before {
            content: "\E4F6";
            color: var(--text-primary);
            font-family: "Phosphor";
            font-weight: normal;
        }
    }

    .modal-lead-in {
        color: var(--text-secondary);
    }

    .modal-footer {
        .btn-set {
            margin: 0;
        }
    }
}

/* Input overrides */

input[type="search"],input[type="text"],input[type="date"] {
    font-size: var(--font-size-default);
    padding-top:3px;
    padding-bottom: 3px;
    &:hover {
        border-color: var(--border-medium-contrast);
        outline: none;
    }
    &:focus-visible {
        border-color: var(--border-high-contrast);
    }
}

/*
 * Replace the browser's default search clear button (which renders as a
 * platform-tinted "X" — often blue on Chrome/Safari) with a Phosphor-bold
 * X, tinted via CSS variables so it matches other icons and adapts to theme.
 */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    cursor: pointer;
    background-color: var(--icon-secondary);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><line x1='200' y1='56' x2='56' y2='200' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/><line x1='200' y1='200' x2='56' y2='56' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><line x1='200' y1='56' x2='56' y2='200' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/><line x1='200' y1='200' x2='56' y2='56' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/></svg>") no-repeat center / contain;
}

input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--text-primary);
}

/* Date picker styling */
input[type="date"] {
    &::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0;
    }
}

/* Date picker popup customization (Chromium-based browsers) */
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
}

/* Style the calendar dropdown */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    cursor: pointer;
}

/* Date picker dialog styling */
@supports selector(::-webkit-datetime-edit) {
    input[type="date"]::-webkit-datetime-edit {
        padding: 0;
    }

    /* Override browser default blue with Pensero green */
    input[type="date"]:focus::-webkit-datetime-edit-month-field:focus,
    input[type="date"]:focus::-webkit-datetime-edit-day-field:focus,
    input[type="date"]:focus::-webkit-datetime-edit-year-field:focus {
        background-color: var(--action-primary);
        color: white;
        border-radius: var(--border-radius-xs);
    }
}


/* Tabs: text triggers with a hover pill and a 2px neutral underline riding a
   shared structural hairline. The hover pill (::before) is inset 4px from a
   40px trigger so it reads as a 32px control; the underline (::after) sits on
   the hairline. Active is weight 500 + full-contrast text, like an active nav
   item. Disabled keeps the shape and drops the contrast. */
.nav-tabs {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0;
    --bs-nav-tabs-border-width: 0;
    border-bottom: var(--border-width) solid var(--border-structural);
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    &::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Webkit */
    }

    li {
        all: unset;
    }

    .nav-link {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        margin: 0;
        padding: 0 var(--p-2);
        border: none;
        border-radius: var(--border-radius-sm);
        font-size: var(--font-size-default);
        line-height: var(--line-height-sm);
        font-weight: var(--font-weight-400);
        color: var(--text-secondary);
        background-color: transparent;
        white-space: nowrap;
        transition: color var(--transition-fast);

        &::before {
            content: "";
            position: absolute;
            inset: 4px 0;
            z-index: -1;
            border-radius: var(--border-radius-sm);
            background-color: transparent;
            transition: background-color var(--transition-fast);
        }

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            border-radius: var(--border-radius-pill);
            background-color: transparent;
        }

        &:hover {
            color: var(--text-primary);
            border-color: transparent;

            &::before {
                background-color: var(--surface-selected);
            }
        }

        &.active {
            color: var(--text-primary);
            font-weight: var(--font-weight-500);
            background-color: transparent;
            border-color: transparent;

            &::after {
                background-color: var(--text-primary);
            }
        }

        &.disabled,
        &:disabled {
            color: var(--text-disabled);
            pointer-events: none;
        }

        &:focus-visible {
            box-shadow: none;

            &::before {
                box-shadow: 0 0 0 2px var(--surface-secondary), 0 0 0 4px var(--focus-ring-color);
            }
        }
    }
}

.right-panel .nav-link {
    letter-spacing: -0.4px;
}

/* Section header: extra room above so a section reads as a new group; the flex gap below it is enough. */
.section-divider:not(:first-child) {
    margin-top: 1.5rem;
}

/* Info tooltip icon in card headers and panel tab titles */
.section-card-info {
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: help;
}

/* Stretch the active tab pane to the panel column's height so the empty state centres vertically. */
.right-panel {
    height: 100%;

    > div,
    .tab-content,
    .tab-content > .active {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .empty-state {
        flex-grow: 1;
    }
}

/* Pagination — https://getbootstrap.com/docs/5.3/components/pagination/
   Themed via Bootstrap's own custom properties so the markup stays stock Bootstrap.
   Page items render as separated pills (gap + full border-radius) rather than the default
   connected group; layout of the surrounding summary bar lives with the component. */
.pagination {
    --bs-pagination-color: var(--text-secondary);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: var(--border-radius-sm);
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-hover-bg: var(--surface-hover);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--text-primary);
    --bs-pagination-focus-bg: var(--surface-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--focus-ring-color);
    --bs-pagination-active-color: var(--text-primary);
    --bs-pagination-active-bg: var(--surface-selected);
    --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-color: var(--text-disabled);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;

    gap: var(--p-1);

    /* elements.css sets an explicit `ul > li::marker { content: "●" }` that Bootstrap's
       `list-style: none` can't suppress; clear it and the global `li` padding so the pager
       renders as clean buttons without leaking bullets. */
    .page-item {
        padding-left: 0;

        &::marker {
            content: none;
        }
    }

    .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        border-radius: var(--border-radius-sm);
        transition: background-color 0.1s ease, color 0.1s ease;
    }

    /* Bootstrap connects items with a -1px margin; the gap above separates them instead. */
    .page-item:not(:first-child) .page-link {
        margin-left: 0;
    }

    /* Disabled prev/next signal that they can't be clicked. Bootstrap sets `pointer-events: none`
       on disabled page-links, which also suppresses the cursor — re-enable it so `not-allowed`
       shows. Safe because the disabled item is an inert <span> (no href/HTMX). The ellipsis gap is
       decorative, so it keeps the default cursor. */
    .page-item.disabled .page-link {
        cursor: not-allowed;
        pointer-events: auto;
    }

    .page-item.disabled .page-link[aria-hidden="true"] {
        cursor: default;
    }
}

.spinner-border {
    --bs-spinner-width: 16px;
    --bs-spinner-height: 16px;
    --bs-spinner-border-width: 4px;
    border: var(--brand-primary) solid;
    border-right-color: transparent;
}

/* Tables (we use classes to not lose specificity vs Bootstrap) */
.table {
    background-color: var(--surface-secondary);
    border: var(--border-width) solid var(--border-default) !important;
    border-radius: var(--border-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
    overflow: hidden;
    --bs-table-bg: var(--surface-secondary);
    width: 100%;

    > :not(caption)>*>* {
        border-bottom: var(--border-width) solid var(--border-default);
        color: var(--text-primary);
        padding: 10px var(--primitive-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Remove bottom border from last row only (not last cell per row) */
    > :not(caption) > *:last-child > *:last-child > * {
        border-bottom: none;
    }

    &.table-borderless {
        border: none !important;
    }

    &.table-sm {
        > :not(caption)>*>* {
            font-size: var(--font-size-sm);
            padding: var(--p-2);
        }
    }

    >thead {
        vertical-align: bottom;

        >tr>th {
            padding-top: var(--p-2);
            padding-bottom: var(--p-2);
        }
    }

    th {
        background: var(--surface-primary);
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
        font-weight: var(--font-weight-500);
        white-space: nowrap;

        &.sortable {
            cursor: pointer;

            &:hover {
                color: var(--text-primary) !important;
            }

            &:active,
            .active {
                color: var(--icon-primary) !important;
            }

            &:has(.chevrons-icon.active) {
                color: var(--text-primary);
                font-weight: var(--font-weight-bold);
            }
        }
    }

    /* Resize caret icons in tables to match caret-up-down icon size */
    i.ph-caret-down,
    i.ph-caret-up {
        &::before {
            font-size: 12px;
        }
    }

    td {
        background-color: unset;
    }

    th,
    td {
        border-top: none;
        vertical-align: middle;
    }

    >tbody {
        vertical-align: inherit;
    }

    tr {
        &[data-href],
        &[hx-get] {
            cursor: pointer;

            &:hover {
                background-color: var(--surface-hover);
            }
        }

        &.row-selected {
            background-color: var(--surface-selected);
        }

        &.p-table-row--unlinked {
            cursor: default;

            .p-table-cell__content {
                opacity: 0.6;
            }
        }
    }

    /* Fix dropdown clipping in table cells */
    td {
        .dropdown {
            position: static;
        }

        .dropdown-menu {
            position: absolute;
            z-index: var(--z-index-dropdown);
            /* Allow dropdown to escape table cell boundaries */
        }

        /* Override overflow hidden for cells containing dropdowns */
        &:has(.dropdown) {
            overflow: visible !important;
        }
    }

    /* Fallback for browsers that don't support :has() */
    td.dropdown-cell {
        overflow: visible !important;
    }
}

.table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;

    >.table {
        margin-bottom: 0;
    }
}

.table-responsive,
.table {
    max-width: 100%;
}

.text-danger {
    color: var(--semantic-danger-text) !important;
}

.text-warning {
    color: var(--semantic-warning-text) !important;
}

i.text-warning {
    color: var(--semantic-warning-icon) !important;
}

.text-success {
    color: var(--semantic-success-text) !important;
}

.text-info {
    color: var(--semantic-info-text) !important;
}

.bg-success {
    background-color: var(--semantic-success-icon) !important;
}

.bg-info {
    background-color: var(--semantic-info-icon) !important;
}

.bg-warning {
    background-color: var(--semantic-warning-icon) !important;
}

.bg-danger {
    background-color: var(--semantic-danger-icon) !important;
}

.badge.bg-success,
.text-bg-success {
    background-color: var(--semantic-item-status-success-surface) !important;
    color: var(--semantic-item-status-success) !important;
}

.badge.bg-info,
.text-bg-info {
    background-color: var(--semantic-item-status-info-surface) !important;
    color: var(--semantic-item-status-info) !important;
}

.badge.bg-warning,
.text-bg-warning {
    background-color: var(--semantic-item-status-alert-surface) !important;
    color: var(--semantic-item-status-alert) !important;
}

.badge.bg-danger,
.text-bg-danger {
    background-color: var(--semantic-item-status-danger-surface) !important;
    color: var(--semantic-item-status-danger) !important;
}

.badge.bg-primary,
.badge.bg-secondary,
.text-bg-primary,
.text-bg-secondary {
    background-color: var(--semantic-item-status-neutral-surface) !important;
    color: var(--semantic-item-status-neutral) !important;
}

.btn-danger {
    --bs-btn-color: var(--semantic-danger-text);
    --bs-btn-bg: var(--semantic-danger-surface);
    --bs-btn-border-color: var(--semantic-danger-surface);
    --bs-btn-hover-color: var(--semantic-danger-text);
    --bs-btn-hover-bg: var(--semantic-danger-surface-hover);
    --bs-btn-hover-border-color: var(--semantic-danger-surface-hover);
    --bs-btn-active-color: var(--semantic-danger-text);
    --bs-btn-active-bg: var(--semantic-danger-surface-active);
    --bs-btn-active-border-color: var(--semantic-danger-surface-active);
    --bs-btn-disabled-color: var(--semantic-danger-text);
    --bs-btn-disabled-bg: var(--semantic-danger-surface);
    --bs-btn-disabled-border-color: var(--semantic-danger-surface);
}

.btn-success {
    --bs-btn-color: var(--semantic-success-text);
    --bs-btn-bg: var(--semantic-success-surface);
    --bs-btn-border-color: var(--semantic-success-surface);
    --bs-btn-hover-color: var(--semantic-success-text);
    --bs-btn-hover-bg: var(--semantic-success-surface-hover);
    --bs-btn-hover-border-color: var(--semantic-success-surface-hover);
    --bs-btn-active-color: var(--semantic-success-text);
    --bs-btn-active-bg: var(--semantic-success-surface-active);
    --bs-btn-active-border-color: var(--semantic-success-surface-active);
    --bs-btn-disabled-color: var(--semantic-success-text);
    --bs-btn-disabled-bg: var(--semantic-success-surface);
    --bs-btn-disabled-border-color: var(--semantic-success-surface);
}

.btn-warning {
    --bs-btn-color: var(--semantic-warning-text);
    --bs-btn-bg: var(--semantic-warning-surface);
    --bs-btn-border-color: var(--semantic-warning-surface);
    --bs-btn-hover-color: var(--semantic-warning-text);
    --bs-btn-hover-bg: var(--semantic-warning-surface);
    --bs-btn-hover-border-color: var(--semantic-warning-surface);
    --bs-btn-active-color: var(--semantic-warning-text);
    --bs-btn-active-bg: var(--semantic-warning-surface);
    --bs-btn-active-border-color: var(--semantic-warning-surface);
    --bs-btn-disabled-color: var(--semantic-warning-text);
    --bs-btn-disabled-bg: var(--semantic-warning-surface);
    --bs-btn-disabled-border-color: var(--semantic-warning-surface);
}

.text-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tooltip {
    /* Bootstrap's 1080 sits below --z-index-max layers (scope panel, banners); tooltips must top everything. */
    z-index: var(--z-index-max);
    background-color: var(--surface-tertiary);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-elevated-sm);

    &.show {
        opacity: 1;
    }

}

.tooltip .tooltip-inner {
    background-color: var(--surface-tertiary);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: var(--p-2);
    max-width: 380px !important;
    pointer-events: none;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.tooltip .tooltip-inner {
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.tooltip.p-tooltip--unlinked .tooltip-inner {
    flex-direction: row;
    align-items: center;

    &::before {
        content: "\e308"; /* ph-lock-simple */
        font-family: "Phosphor";
        font-weight: normal;
        flex-shrink: 0;
    }
}

.tooltip.p-tooltip--shortcut .tooltip-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--p-2);

    kbd {
        padding: 0 var(--p-1);
        min-width: 22px;
        border: var(--border-width) solid var(--border-default);
        border-radius: var(--border-radius-xs);
        background: var(--surface-primary);
        color: var(--text-tertiary);
        font-family: inherit;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-sm);
        text-align: center;
    }
}

.tooltip-arrow {
    &::before {
        border-width: 0 !important;
    }
}