:root {
    --wel-purple: #8467ad;
    --wel-blue: #00b5df;
    --wel-yellow: #fbb416;
}

/* tom-select */
.ts-wrapper {
    .ts-dropdown,
    .ts-control,
    .ts-control input {
        color: var(--bs-body-color);
    }

    &.focus {
        &.form-select {
            border-color: #c2b3d6;
        }

        .ts-control {
            box-shadow: 0 0 0 0.25rem rgba(132, 103, 173, 0.25);
        }
    }

    &.single .ts-control {
        height: 36px;
    }

    &.multi.has-items.plugin-n_items .ts-control {
        padding: .375rem .75rem;

        > input {
            margin: 0 !important;

            &::placeholder {
                color: #fff;
            }
        }
    }

    &.multi.plugin-n_items input.tomselect-checkbox {
        --bs-form-check-bg: var(--bs-body-bg);
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.25em;
        vertical-align: top;
        appearance: none;
        background-color: var(--bs-form-check-bg);
        background-image: var(--bs-form-check-bg-image);
        background-repeat: no-repeat;
        background-size: contain;
        print-color-adjust: exact;
        background-position: center center;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: 0.25em;

        &:active {
            filter: brightness(90%);
        }

        &:checked[type="checkbox"] {
            --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            background-color: rgb(132, 103, 173);
            border-color: rgb(132, 103, 173);
        }
    }
}

/* SweetAlert2 */
[data-bs-theme="dark"] {
    div.swal2-container.swal2-backdrop-show,
    div.swal2-container.swal2-noanimation {
        background: rgba(0, 0, 0, 0.5);
    }

    div.swal2-container div.swal2-popup {
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
    }

    div.swal2-container div.swal2-popup {
        color: rgb(222, 226, 230);
    }
}

div.swal2-container div.swal2-actions {
    column-gap: 1rem;
}

/* Toasts */
.toastify {
    &.toast-success {
        box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(var(--bs-success-rgb), 0.3);
        background: var(--bs-success);
    }

    &.toast-danger {
        box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(var(--bs-danger-rgb), 0.3);
        background: var(--bs-danger);
    }
}

/* Forms */
legend.required::after,
label.required::after {
    content: '*';
    color: var(--bs-danger);
}

fieldset.card {
    legend.card-header {
        font-size: 1.0rem;
        font-weight: bold;
    }

    .row:last-child > .col > .mb-3 {
        margin-bottom: 0 !important;
    }
}

span.btn-disabled {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

/* DataTables */
td.actions a,
.data-table tbody td:last-child a,
.data-table tbody td:last-child span {
    text-decoration: none;
    white-space: nowrap;

    &:not(:last-child) {
        margin-right: 1rem;
    }
}

div.dt-processing > div:last-child > div {
    background-color: var(--wel-blue) !important;
}

/* Login */
.form-login {
    max-width: 330px;
    padding: 1rem;
}

/* Notifications */
ul.dropdown-menu.notifications {
   padding: 0;
   overflow: hidden;
}

ul.notifications {
    width: 400px;
    background-color: var(--bs-tertiary-bg);

    li.notification {
        display: flex;
        padding: 0;

        &:not(:first-child) {
            border-top: 1px solid var(--bs-border-color-translucent);
        }

        > div {
            padding: 0.75rem;
            flex-grow: 1;

            p {
                margin: 0;
            }

            time {
                font-size: 0.75rem;
            }
        }

        > a {
            padding: 0.75rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            color: var(--bs-body-color);

            &.notification-open {
                background: var(--bs-primary);
            }

            &.notification-open-inactive {
                background: var(--bs-secondary-bg);
            }

            &.notification-delete {
                background: var(--bs-danger);
                color: var(--bs-white);
            }
        }
    }

    li.delete-all {
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--bs-border-color-translucent);

        a {
            color: var(--bs-danger);
            text-decoration: none;
            padding: 0.5rem;
        }
    }
}

/* Contacts */
ul.contact-methods {
    margin-bottom: 0;

    li {
        display: flex;
        margin-bottom: 0.25rem;

        &:last-child {
            margin-bottom: 0;
        }

        i {
            margin-right: 0.5rem;
        }
    }
}

/* Sortable */
.handle {
    padding: 0 10px;
    cursor: row-resize;
}

/* Job */
time.relative-time[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.job-cards {
    div.card {
        dl:last-child,
        dd:last-child {
            margin-bottom: 0;
        }
    }
}

.relative-deadline {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "deadline relative";
    align-items: end;
    gap: 0 .25rem;

    .deadline {
        grid-area: deadline;
        position: relative;
        overflow: hidden;

        &::after {
            position: absolute;
            padding-left: .25ch;
            color: var(--bs-border-color-translucent);
            content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
            text-align: right;
        }
    }

    .relative {
        grid-area: relative;
    }
}

.notes-body .note:not(:last-child) {
    border-bottom: 1px solid var(--bs-card-border-color);
    margin-bottom: 1rem;
}

.deleted-user {
    font-style: italic;
    color: var(--bs-secondary-color)
}