/* Global custom variables */
:root {
    /* Use Roboto font everywhere */
    --bs-body-font-family: Roboto;

    /* adjust default line height to be 24px */
    --bs-body-line-height: 24px;

    --bs-dark-rgb: 37, 34, 42;

    /* Change blue tone of links */
    --bs-link-color: #21005C;
    --bs-link-color-rgb: 33, 0, 92;

    /* adjust DT selection colors */
    --dt-row-selected: 234, 221, 255;
    --dt-row-selected-text: var(--bs-body-color);
}

/* Define a narrow container, typically used for customer-facing views */
.narrow-container {
    max-width: 632px;
}

/* Define a semi-narrow container */
.seminarrow-container {
    max-width: 1024px;
}

/* Custom class to set width to 1%, which allow us to minimise the size of table columns */
.w-1 {
    width: 1%;
}

.btn {
    position: relative;
}


.btn-user {
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: rgb(77, 53, 138);
    --bs-btn-hover-bg: rgb(208, 187, 255);
    --bs-btn-hover-border-color: rgb(208, 187, 255);

    --bs-btn-active-color: rgb(77, 53, 138);
    --bs-btn-active-bg: rgb(208, 187, 255);
    --bs-btn-active-border-color: rgb(208, 187, 255);
}

.btn-primary {
    --bs-btn-color: rgb(217, 201, 233);
    --bs-btn-bg: rgb(33, 0, 92);
    --bs-btn-border-color: rgb(33, 0, 92);

    --bs-btn-hover-color: rgb(77, 53, 138);
    --bs-btn-hover-bg: rgb(234, 221, 255);
    --bs-btn-hover-border-color: rgb(234, 221, 255);

    --bs-btn-active-color: rgb(217, 201, 233);
    --bs-btn-active-bg: rgb(33, 0, 92);
    --bs-btn-active-border-color: rgb(33, 0, 92);

    --bs-btn-disabled-color: rgb(0, 0, 0);
    --bs-btn-disabled-bg: rgb(220, 220, 220);
    --bs-btn-disabled-border-color: rgb(220, 220, 220);
}

.btn-secondary {
    --bs-btn-color: rgb(255, 255, 255);
    --bs-btn-bg: rgb(73, 68, 79);
    --bs-btn-border-color: rgb(73, 68, 79);

    --bs-btn-hover-color: rgb(255, 255, 255);
    --bs-btn-hover-bg: rgb(121, 115, 126);
    --bs-btn-hover-border-color: rgb(121, 115, 126);

    --bs-btn-active-color: rgb(255, 255, 255);
    --bs-btn-active-bg: rgb(73, 68, 79);
    --bs-btn-active-border-color: rgb(73, 68, 79);

    --bs-btn-disabled-color: rgb(0, 0, 0);
    --bs-btn-disabled-bg: rgb(220, 220, 220);
    --bs-btn-disabled-border-color: rgb(220, 220, 220);
}

.dropdown-item {
    color: rgb(29, 9, 66);
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: rgb(77, 53, 138);
    background-color: rgb(208, 187, 255);
}

.dropdown-item.active,
.dropdown-item:active {
    color: rgb(29, 9, 66);
}

.navbar .dropdown-menu {
    --bs-dropdown-min-width: 100%;
    min-width: 100%;
}

.nav-link {
    color: rgb(29, 9, 66);
    background: rgb(256, 256, 256);
    border-radius: 0.2rem;
    position: relative;
}

.nav-link:focus,
.nav-link:hover {
    background: rgb(208, 187, 255);
    color: rgb(77, 53, 138);
}

.nav-link.active {
    background: rgb(29, 26, 32);
    color: white;
    outline: white;
    box-shadow: 0 0 6px rgba(200, 178, 252, 0.6);
}

/* The HTMX spinner */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.htmx-request::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: spinner .6s linear infinite;
    z-index: 1000;
}

/* Set pointer cursor for checkboxes */
.form-check-input, .form-check-label {
    cursor: pointer;
}

/* An even more condensed table size */
.table-condensed > :not(caption) > * > * {
    padding: 0 .25rem
}

/* Places the selection checkbox on the top of the table row */
table.dataTable > tbody > tr > .dt-select {
    vertical-align: top;
}

/* Fix datatables checkboxes */
table.dataTable input.dt-select-checkbox {
    width: 20px;
    height: 20px;
}