body {
    font-family: 'IBM Plex Sans', sans-serif;
}

.app-header {
    border-bottom: 3px solid var(--bs-primary);
}

.sidebar-wrapper {
    border-top: 3px solid var(--bs-primary);
}

.dt-scroll-body {
    background: none !important;
}

/* Give all buttons a pill style rounded border by default. */
.btn {
    border-radius: var(--bs-border-radius-pill) !important;
}

.input-group .btn {
    border-radius: 0 !important;
}

.btn:not(.btn-primary) {
    border: 1px solid var(--bs-border-color);
}

    .btn:not(.btn-primary):hover {
        --bs-btn-hover-border-color: var(--bs-primary);
        border-color: var(--bs-btn-hover-border-color);
    }

body .btn.btn-right-rounded {
    border-radius: var(--bs-border-radius-pill) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.left-rounded {
    border-top-left-radius: var(--bs-border-radius-pill);
    border-bottom-left-radius: var(--bs-border-radius-pill);
}

/* Remove box-shadows from user menu dropdown buttons. */
.app-header .dropdown-menu .btn {
    box-shadow: none !important;
}

/* Reduce footer size. */
.app-footer {
    padding: 0.5rem;
    font-size: 80%;
    min-height: 1.75rem;
}

/* Improve search box focus border visuals. */
.input-group:has(#txtSearchTerm:focus) {
    box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem var(--focus-box-shadow-primary); /*rgba(225,37,27,.25)*/
    border-radius: 20rem;
}

#txtSearchTerm:focus {
    box-shadow: none;
}

/* Flip logo text colour in dark mode */
[data-bs-theme=dark] .brand-image:last-child {
    filter: invert(1);
}

/* Fix for tool buttons overflowing container */
.btn-tool {
    margin: 0;
}

.inactive-row {
    opacity: 0.5;
    text-decoration: line-through;
}

.field-validation-error {
    display: block;
}

/* Prevent extra space below validation summary when shown in an alert box. */
.alert .validation-summary-errors ul {
    margin-bottom: 0;
}

/* Height fixes for entity cards so they take the full height, and scroll appropriately. */
body:has(.entity-form) {
    overflow: hidden;
}

.app-wrapper:has(.entity-form) {
    max-height: 100vh;
}

main:has(.entity-form) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden !important;
}

.app-content:has(.entity-form) {
    display: grid;
}

    .app-content:has(.entity-form) .container-fluid {
        display: grid;
        overflow: hidden;
    }

.form-label {
    text-transform: uppercase;
    font-size: 75%;
    font-weight: bold;
}

.entity-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto; /* Tabs, Card/Body, Footer - may be better off with named areas so layouts without tabs work. */
    overflow: hidden;
}

    .entity-form .card-body {
        overflow: auto;
    }

.list-tab {
    display: grid;
}

    .list-tab .dt-container {
        height: 100%;
        display: flex !important;
        place-items: start;
        justify-content: stretch;
        flex-direction: column;
    }

        .list-tab .dt-container .table {
            position: relative;
        }

        .list-tab .dt-container .dt-info {
            margin-top: auto;
        }

        .list-tab .dt-container .dt-paging + div {
            display: none;
        }

    .list-tab .card-header > .card-tools {
        margin-right: 0;
    }

/* Select2 bootstrap 5 theme overrides. I hate people. */
body .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--primary); /*#f0928d*/
    box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem rgba(225,37,27,.25);
}

/* Watermarks for non-live environments. */
figure.watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.01;
    rotate: -0.075turn;
    user-select: none;
    pointer-events: none;
}

    figure.watermark.development {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>DEVELOPMENT</text></svg>");
    }

    figure.watermark.testing {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>TESTING</text></svg>");
        opacity: 0.05;
    }

    figure.watermark.staging {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>STAGING</text></svg>");
        opacity: 0.1;
    }




/* Theming overrides */
body {
    --dark: #000;
    --light: #fff;
    --primary: #afd400;
    --primary-dark: color-mix(in oklab, var(--primary), var(--dark) 10%);
    --primary-light: color-mix(in oklab, var(--primary), var(--light) 10%);
    --primary-darker: color-mix(in oklab, var(--primary), var(--dark) 20%);
    --primary-lighter: color-mix(in oklab, var(--primary), var(--light) 20%);
    --bs-primary: var(--primary);
    --focus-box-shadow-primary: color-mix(in oklab, var(--primary), transparent 75%);
}

    body .btn-primary {
        --bs-btn-border-color: var(--primary);
        --bs-btn-bg: var(--primary);
        --bs-btn-hover-bg: var(--primary-dark);
        --bs-btn-hover-border-color: var(--primary-dark);
        --bs-btn-active-bg: var(--primary-darker);
        --bs-btn-active-border-color: var(--primary-darker);
    }

    body .btn:not(.btn-primary) {
        --bs-btn-hover-border-color: var(--primary-dark);
    }

    body .card-primary, body .bg-primary, body .text-bg-primary {
        --lte-card-variant-bg: var(--primary);
    }

    body .text-bg-primary {
        background: var(--primary) !important;
    }

    body .form-control:focus,
    body .form-check-input:focus {
        border-color: var(--primary-light);
        box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem var(--focus-box-shadow-primary); /*rgba(225,37,27,.25)*/
    }

    body .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    body a {
        color: var(--primary-darker);
    }

    body .nav-tabs {
        --bs-nav-link-color: var(--primary-dark);
        --bs-nav-link-hover-color: var(--primary-darker);
    }

    body .nav-link:hover, body .nav-link:focus {
    }

    body .form-switch .form-check-input:focus {
        /* TODO: this one needs some more work */
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23afd400'/%3e%3c/svg%3e");
    }


.double-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .double-column > * {
        overflow: auto;
    }