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

.bam-unauth-logo {
    height: 48px;
}

/* main_auth layout */

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

/* Inbox (inbox/*.scala.html) */

.bam-inbox-row {
    cursor: pointer;
}

.bam-inbox-from {
    width: 12rem;
}

.bam-inbox-message {
    max-width: 40rem;
}

.bam-inbox-row.bam-unread .bam-inbox-store,
.bam-inbox-row.bam-unread .bam-inbox-nickname {
    font-weight: var(--tblr-font-weight-bold);
}

.bam-inbox-row.bam-unread td:first-child {
    box-shadow: inset 3px 0 0 var(--tblr-primary);
}

/* Loading skeletons (inbox/viewFolder, inbox/viewMail) */

.bam-inbox-date-placeholder {
    width: 7rem;
}

.bam-chat-placeholder {
    height: 2.5rem;
    border-radius: var(--tblr-border-radius-lg);
}

/* Canned response picker (Tom Select) in the reply form (inbox and conversation page) */

.bam-canned-response {
    width: 16rem;
    max-width: 100%;
}

/* Inbox sidebar: inline from md up, an offcanvas panel below that, where the card chrome is dropped */

.bam-inbox-sidebar {
    width: 100%;
}

@media (max-width: 767.98px) {
    #inboxSidebar .bam-inbox-sidebar {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    #inboxSidebar .bam-inbox-sidebar > .card-body {
        padding: 0;
    }
}

/* Message bubbles (inbox and conversation page) */

.bam-chat-col {
    max-width: 75%;
}

.bam-message-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 0;
}

.bam-attachment-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.bam-attachment-video {
    max-width: 100%;
}

/* Split button on the conversation page only shows on hover, as before */
.bam-chat-message .conversationSplitter {
    opacity: 0;
}

.bam-chat-message:hover .conversationSplitter,
.bam-chat-message .conversationSplitter:focus {
    opacity: 1;
}

/* SuperBox image viewer (customplugins/bam-superbox.js) in the inbox */

.superbox-list {
    display: inline-block;
    width: 120px;
    padding: 2px;
    position: relative;
    vertical-align: top;
}

.superbox-img {
    width: 100%;
    cursor: pointer;
    border-radius: var(--tblr-border-radius);
}

.superbox-img:hover {
    opacity: .8;
}

.superbox-list video {
    max-width: 100%;
}

.superbox-show {
    display: none;
    position: relative;
    width: 100%;
    margin: .5rem 0;
    padding: 1rem;
    background-color: var(--tblr-dark);
    border-radius: var(--tblr-border-radius);
}

.superbox-current-img {
    max-width: 100%;
}

.superbox-imageinfo {
    display: none !important;
}

.superbox-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    color: #fff;
    opacity: .7;
    cursor: pointer;
}

.superbox-close:hover {
    opacity: 1;
}

/* Conversation page tags (jquery.tagsinput + jQuery UI drag and drop) */

#tagZone_tagsinput {
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
}

#tagZone_tagsinput span.tag {
    display: inline-flex;
    align-items: center;
    border: 0;
    font-family: inherit;
}

#tagZone_tagsinput span.tag::before {
    content: "";
    width: .5rem;
    height: .5rem;
    margin-right: .375rem;
    border-radius: 50%;
    background: var(--bam-tag-color);
}

#tagZone_tagsinput span.tag a {
    color: inherit;
}

#allTags .anyTag {
    cursor: grab;
}

/* Tag badges in each company's own tag colour (any CSS colour), shown as a dot so light colours stay readable */

.bam-tag {
    --bam-tag-color: var(--tblr-blue);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    border: 1px solid var(--tblr-border-color);
}

.bam-tag-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .375rem;
    border-radius: 50%;
    background: var(--bam-tag-color);
    vertical-align: middle;
}

/* Toasts (js/bamToast.js) */

#bam-toasts {
    z-index: 1090;
}

/* select2 (share modal recipients) styled like a Tabler form control; the variables follow light/dark mode.
   Prefixed with .modal to beat select2.min.css, which the conversation page links after bam.css */

.modal .select2-container {
    width: 100% !important;
}

.modal .select2-container--default .select2-selection--multiple {
    min-height: calc(1.4285714em + 1rem + 2px);
    padding: .1875rem .375rem;
    background: var(--tblr-bg-forms);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
}

.modal .select2-container--default.select2-container--focus .select2-selection--multiple,
.modal .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: .1875rem;
    padding: 0 .375rem;
    background: var(--tblr-bg-surface-secondary);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm);
    color: var(--tblr-body-color);
}

.modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tblr-secondary);
}

.modal .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: .25rem;
    color: var(--tblr-body-color);
}

.modal .select2-dropdown {
    background: var(--tblr-bg-surface);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-lg);
    color: var(--tblr-body-color);
}

.modal .select2-container--default .select2-results__group {
    color: var(--tblr-secondary);
    font-size: .625rem;
    font-weight: var(--tblr-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.modal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--tblr-primary);
    color: #fff;
}

.modal .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--tblr-active-bg);
}

/* DataTables in a Tabler card (mainTags.dataTablesTabler) */

.card div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
    color: var(--tblr-secondary);
}

.card div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0;
}

.card div.dataTables_wrapper div.dataTables_length label,
.card div.dataTables_wrapper div.dataTables_filter label {
    margin: 0;
    color: var(--tblr-secondary);
}

.card div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0;
}

.card div.dataTables_wrapper .table-responsive table.dataTable {
    margin: 0 !important;
}

/* In-place editors (jeditable) on the user and voting event pages */

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

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

/* Small remove button inside a store group badge */

.bam-badge-close {
    width: .5rem;
    height: .5rem;
    padding: .125rem;
    background-size: .5rem;
}

/* jQuery UI autocomplete menus (default view on the user page, timeAutocomplete in the subscription modal),
   drawn like a Tabler dropdown; above modals */

.ui-autocomplete {
    position: absolute;
    z-index: 1090;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--tblr-bg-surface);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
    color: var(--tblr-body-color);
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: .375rem .75rem;
    cursor: pointer;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--tblr-active-bg);
    color: var(--tblr-body-color);
}

.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Twilio numbers report (admin) */

#twilioNumberTable .webhookConfig {
    max-width: 200px;
    word-break: break-all;
    font-size: .75rem;
}

/* .btn-sm sets a min-width, which lets the stacked buttons shrink below their labels */
#twilioNumberTable .twilioAction {
    white-space: nowrap;
    min-width: max-content;
}

#twilioNumberTable .actionStatus {
    min-width: 9rem;
}

#twilioNumberTable .actionNote {
    min-width: 10rem;
}

#twilioActionModal .numberDetails dd:empty::before {
    content: "\2014";
    color: var(--tblr-secondary);
}

/* Voting event page (admin): drag unmatched votes onto a choice */

.bam-unmatched-vote {
    cursor: grab;
    display: inline-block;
    padding: .125rem .375rem;
    border: var(--tblr-border-width) dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    touch-action: none;
}

.bam-unmatched-vote.ui-draggable-dragging {
    cursor: grabbing;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.bam-voting-choice.ui-state-hover > td {
    background: var(--tblr-primary-lt);
}

.bam-voting-background {
    display: block;
    max-width: 100%;
    max-height: 100px;
}

/* Company and store settings pages */

.bam-logo-preview {
    max-height: 3rem;
    max-width: 10rem;
    object-fit: contain;
    background: var(--tblr-bg-surface-secondary);
}

.bam-editable-block {
    display: inline-block;
    max-width: 100%;
    white-space: pre-wrap;
}

.bam-editable-block:has(form) {
    display: block;
    width: 40rem;
    border-bottom: 0;
}

/* Colour swatch beside a colour value (voting event chart colours) */

.bam-color-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--tblr-border-radius);
    border: 1px solid var(--tblr-border-color);
    background-color: transparent;
}

/* Company/store dashboard (companies/organizationDashboard) */

.bam-tag-piechart {
    width: 100%;
    height: 14rem;
}

.bam-dashboard-star-placeholder {
    width: 1.25rem;
    height: 1.25rem;
}

/* bootstrap-daterangepicker (dashboard date range) in Tabler colours for light and dark mode.
   Prefixed with body to beat daterangepicker.css, which the page links after bam.css */

body .daterangepicker {
    background: var(--tblr-bg-surface);
    border-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
    font-family: inherit;
    box-shadow: var(--tblr-shadow-dropdown, 0 .5rem 1rem rgba(0, 0, 0, .15));
}

body .daterangepicker:before {
    border-bottom-color: var(--tblr-border-color);
}

body .daterangepicker:after {
    border-bottom-color: var(--tblr-bg-surface);
}

body .daterangepicker.drop-up:before {
    border-top-color: var(--tblr-border-color);
}

body .daterangepicker.drop-up:after {
    border-top-color: var(--tblr-bg-surface);
}

body .daterangepicker .calendar-table {
    background: var(--tblr-bg-surface);
    border-color: var(--tblr-bg-surface);
}

body .daterangepicker .calendar-table .next span,
body .daterangepicker .calendar-table .prev span {
    border-color: var(--tblr-body-color);
}

body .daterangepicker td.off,
body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date {
    background: var(--tblr-bg-surface);
    color: var(--tblr-secondary);
}

body .daterangepicker td.available:hover,
body .daterangepicker th.available:hover,
body .daterangepicker .ranges li:hover {
    background: var(--tblr-active-bg);
    color: var(--tblr-body-color);
}

body .daterangepicker td.in-range {
    background: var(--tblr-primary-lt);
    color: var(--tblr-body-color);
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover,
body .daterangepicker .ranges li.active {
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg);
}

body .daterangepicker .drp-buttons,
body .daterangepicker.show-ranges.ltr .drp-calendar.left,
body .daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-color: var(--tblr-border-color);
}

body .daterangepicker .drp-selected {
    color: var(--tblr-secondary);
}

/* Public voting results (voting/pub/votingEventResults), often shown full screen at events. The event's
   background image, title colour and bar colour come from the page; the chart sits on a translucent card. */
body.bam-voting-results {
    min-height: 100vh;
    background-position: center top;
    background-size: 100% auto;
}

.bam-voting-title {
    text-transform: uppercase;
    font-size: clamp(1.75rem, 2.5vw, 4rem);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: .5rem;
}

.bam-voting-subtitle {
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1.25vw, 2rem);
    margin-bottom: 1rem;
}

.bam-voting-card {
    background: color-mix(in srgb, var(--tblr-bg-surface) 85%, transparent);
}

.bam-voting-chart {
    height: max(450px, 65vh);
}