/* Tabulator dark mode */
[data-bs-theme="dark"] .tabulator {
    --bs-table-bg: #212529;
    --bs-table-color: #dee2e6;
    --bs-table-border-color: #495057;
    --bs-table-striped-bg: #2b3035;
    --bs-table-striped-color: #dee2e6;
    --bs-table-hover-bg: #32373c;
    --bs-table-hover-color: #fff;

    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .tabulator .tabulator-header {
    background-color: #212529;
    color: #fff;
    border-color: #495057;
}

[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col {
    background-color: #212529;
    color: #fff;
    border-color: #495057;
}

[data-bs-theme="dark"] .tabulator-row {
    background-color: #212529;
    color: #dee2e6;
    border-color: #343a40;
}

[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: #2c3136;
}

[data-bs-theme="dark"] .tabulator .tabulator-paginator > label {
    color: #c0c0c0;
}

[data-bs-theme="dark"] .tabulator button.tabulator-page:disabled {
    background-color: #2c3136;
}

[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
    background-color: #2c3136;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-row-even {
    background-color: #2b3035;
}

[data-bs-theme="dark"] .tabulator-row:hover .tabulator-col:hover {
    background-color: #32373c !important;
    color: #fff;
}

[data-bs-theme="dark"] .tabulator-cell {
    border-color: #343a40;
}

[data-bs-theme="dark"] .tabulator-footer {
    /* NB: Thinking about changing this to #f9f9f9 in the "light" style */
    background-color: #212529;
    color: #dee2e6;
    border-color: #495057;
}

[data-bs-theme="light"] .tabulator-footer {
  background-color: #f9f9f9;
}

/* Sample dashboard progress bar values (to be removed) */
.joe-bloggs-bar {
    width: 55%;
}

.anthony-albanese-bar {
    width: 70%;
}

.jane-doe-bar {
    width: 30%;
}

.judy-dench-bar {
    width: 90%;
}

/* Dropdown menu end - topbar */
.dropdown-menu-end {
    --bs-dropdown-min-width: 8rem;
}

/* Org context sticky top bar */
.org-context-container {
    position:fixed;
    top:0;
    z-index:1030;
}

.input-group-container-custom-width {
    width: 16rem;
}

/* tabulator tables */
.tabulator .tabulator-row .tabulator-cell {
    display: inline-flex;
    align-items: center;      /* Vertical alignment */
    justify-content: left; /* Optional: forces flex to honor hozAlign */
}

/* loading spinner during form submission */
.htmx-request .form-container,
.htmx-request.form-container {
    display:none;
}

.htmx-request .log-container,
.htmx-request.log-container {
    display:none;
}

.htmx-request .missing-fields-container,
.htmx-request.missing-fields-container {
    display:none;
}

.htmx-request .messages,
.htmx-request.messages {
    display:none;
}

.loading-spinner {
    display: none;
    /*
        NB: Needed this override as the animation wasn't working. Need to sort
        out the override needed for accessibility settings.
    */
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name) !important;
}

.htmx-request.loading-spinner,
.htmx-request .loading-spinner {
  display: block;
  margin: 20px auto;
}