/* BamText overrides on top of Tabler (pages using the Tabler layouts) */

.bam-unauth-logo {
    height: 80px;
    width: auto;
    max-width: 100%;
}

/* main_auth layout */

.bam-navbar-logo {
    height: 32px;
    width: auto;
}

.bam-company-menu {
    max-height: 70vh;
    overflow-y: auto;
}

.bam-company-menu-logo {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.bam-alert-menu {
    width: 24rem;
    max-width: calc(100vw - 2rem);
}

.bam-alert-list {
    max-height: 60vh;
    overflow-y: auto;
}

.bam-alert-message {
    overflow-wrap: anywhere;
}

/* Bootstrap doesn't use Popper in a navbar, so on phones the menu would run off the left of the screen */
@media (max-width: 767.98px) {
    .navbar .bam-alert-menu[data-bs-popper] {
        position: fixed;
        top: 3.5rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
    }

    .bam-alert-menu.dropdown-menu-arrow::before,
    .bam-alert-menu.dropdown-menu-arrow::after {
        display: none;
    }
}

/* Inline edits (jeditable) */

.bam-editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--tblr-secondary);
}

.bam-editable:hover {
    color: var(--tblr-primary);
}

/* Message charts (bamChart.js) */

.bam-chart {
    position: relative;
    height: 220px;
}

/* Dropzone: "form." outranks its stylesheet, which loads after this one */

form.dropzone {
    min-height: 0;
    padding: 1rem;
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-forms);
    color: var(--tblr-secondary);
}

form.dropzone .dz-message {
    margin: 1rem 0;
}

/* Tabulator (#128): its Bootstrap 5 theme reads --bs-* variables, which Tabler names --tblr-*, and hard-codes light
   colours elsewhere. "div." outranks its stylesheet, which loads after this one */

div.tabulator {
    --bs-body-bg: var(--tblr-bg-surface);
    --bs-body-color: var(--tblr-body-color);
    --bs-border-color: var(--tblr-border-color);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary);
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary);
    --bs-emphasis-color: var(--tblr-emphasis-color);
    --bs-secondary-color: var(--tblr-secondary-color);
    --bs-tertiary-color: var(--tblr-tertiary-color);
    --bs-primary-border-subtle: var(--tblr-primary-border-subtle);
    border: 0;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--tblr-body-font-size);
}

div.tabulator .tabulator-header,
div.tabulator .tabulator-header .tabulator-col,
div.tabulator .tabulator-tableholder .tabulator-table,
div.tabulator .tabulator-row,
div.tabulator .tabulator-row .tabulator-cell,
div.tabulator .tabulator-row .tabulator-cell.tabulator-row-header {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

div.tabulator .tabulator-header {
    color: var(--tblr-secondary);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

div.tabulator .tabulator-row .tabulator-cell.tabulator-row-header,
div.tabulator .tabulator-row.tabulator-row-even .tabulator-cell {
    background-color: var(--bs-secondary-bg);
}

div.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight,
div.tabulator .tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

div.tabulator .tabulator-header .tabulator-col.tabulator-range-selected,
div.tabulator .tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header {
    background-color: var(--tblr-primary);
    color: #fff;
}

div.tabulator .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header) {
    background-color: color-mix(in srgb, var(--tblr-primary) 20%, var(--bs-body-bg));
}

div.tabulator .tabulator-range-overlay .tabulator-range,
div.tabulator .tabulator-range-overlay .tabulator-range-cell-active,
div.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
    border-color: var(--tblr-primary);
}

div.tabulator .tabulator-cell.tabulator-editing input {
    color: var(--bs-body-color);
}

/* A broadcast's message on its page (#172), keeping the line breaks it was sent with */
.bam-broadcast-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}