/* Custom CSS */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    flex-direction: row-reverse;
    background: #7d2e89;
    color: #fff;
    padding: 2px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex;
    position: relative;
    color: #fff;
    border: none;
    border-radius: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 26px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #b259c0;
}

.filepond--drop-label {
    background-color: #fff;
    border: 1px dashed #333333;
    border-radius: 10px;
}

.filepond--label-action {
    color: #7d2e89;
}

.btn-outline-primary input[type=radio],
.btn-outline-primary input[type=checkbox] {
    accent-color: #7d2e89;
}

.pie-legends .legends {
    padding-top: 20px;

    h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #31374A;

        span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #64BB6F;
        }
    }

    p {
        font-size: 25px;
        color: #31374A;
        font-weight: bold;
        margin-left: 10px;
    }
}

.dark .filepond--root * {
    background-color: #141824 !important;
}

.dark .filepond--root label {
    color: #fff;
}

.dark .filepond--root .filepond--label-action {
    color: #f19aff;
}

.dark #toast * {
    background-color: #141824;
    color: #fff;
}

[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    padding-left: 0;
    padding-right: var(--phoenix-breadcrumb-item-padding-x);
    transform: rotate(180deg);
}

#reportrange {
    background-color: var(--phoenix-input-bg) !important;
    border: 1px solid var(--phoenix-input-border-color) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    width: 100%;
}

.text-danger {
    color: #ed2000 !important;
}

/* Select2 Single Select Styling to match form-select */
.select2-container--default .select2-selection--single {
    background-color: var(--phoenix-input-bg) !important;
    border: 1px solid var(--phoenix-input-border-color) !important;
    border-radius: 0.375rem !important;
    height: 38px !important;
    padding: 0.25rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--phoenix-primary) !important;
    outline: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--phoenix-input-color) !important;
    line-height: normal !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    top: 0 !important;
    right: 18px !important;
    width: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--phoenix-input-placeholder-color) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-top: 2px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 25px !important;
    font-weight: bold !important;
    color: var(--phoenix-gray-600) !important;
}

.select2-dropdown {
    background-color: var(--phoenix-input-bg) !important;
    border: 1px solid var(--phoenix-input-border-color) !important;
    z-index: 10000;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--phoenix-primary-soft) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--phoenix-input-border-color) !important;
    background-color: var(--phoenix-input-bg) !important;
    color: var(--phoenix-input-color) !important;
    border-radius: 0.25rem !important;
}

/* RTL: date inputs keep LTR format but align to the right and move the calendar icon to the left */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="datetime-local"] {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="time"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
    margin-right: auto;
    float: left;
}

/*
 * Dual-nav top navbar: on mobile (< lg), the base `.navbar-top` padding of
 * 0 1.5rem stays in place, which insets the coloured `.dual-nav-first-layer`
 * bar and leaves white gaps on the left/right. The theme's edge-to-edge rules
 * only kick in at >= 992px AND are scoped to `.dual-nav` on <html>, which is
 * absent for guests / super admins — so target the #dualNav element directly.
 * Mobile-only, so desktop spacing (2rem via the theme) is untouched.
 */
@media (max-width: 991.98px) {
    #dualNav.navbar-top {
        padding-left: 0;
        padding-right: 0;
    }

    #dualNav .dual-nav-first-layer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /*
     * Burger drawer (#navbarTopCollapse). Every rule the theme has for the
     * dual-nav second layer — padding, border, first-layer background — sits
     * behind `min-width: 992px`, so below `lg` (iPad Air portrait is 820px)
     * the open drawer has no padding at all: the links sit flush against the
     * screen edge with nothing separating them from the header bar. Zeroing
     * `#dualNav`'s own padding above makes that worse. Restore the inset,
     * the divider and a solid background, and cap the height so a long menu
     * scrolls instead of running off the bottom of the fixed navbar.
     */
    #dualNav .navbar-top-collapse {
        padding: 0.5rem 1.5rem 1rem;
        border-top: 1px solid var(--phoenix-navbar-vertical-border-color);
        background-color: var(--phoenix-navbar-top-bg-color);
    }

    #dualNav .navbar-top-collapse.show {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #dualNav .navbar-top-collapse .navbar-nav-top {
        width: 100%;
    }

    /*
     * The theme's link padding is scoped to `.dual-nav` on <html>, which is
     * absent for guests and super admins — without it the touch targets
     * collapse to the Bootstrap default. Set them here so every role gets the
     * same tap area.
     */
    #dualNav .navbar-top-collapse .navbar-nav-top .nav-link {
        display: flex;
        align-items: center;
        padding: 0.6rem 0.75rem;
        border-radius: 0.375rem;
    }
}
/*
 * Horizontal top-menu tabs: symmetric left/right padding.
 *
 * Phoenix ships every `.navbar-expand-*` breakpoint with
 *   padding-left: 1.125rem; padding-right: 1.5rem;
 * on `.navbar-nav-top .nav-link` (theme.css; theme-rtl.css mirrors it). The
 * 6px surplus on the trailing side is the theme's allowance for a dropdown
 * caret — but the KEYSS top menu (#navbarTopCollapse) is a flat list of plain
 * links with no dropdowns at all, so nothing ever fills that space. The result
 * is a label sitting 6px off-centre inside its own hover/active `bg-light`
 * pill, and uneven-looking gaps between tabs.
 *
 * Equal values on both sides are direction-agnostic, so this corrects LTR and
 * RTL together rather than needing a mirrored rule. 1.125rem is the theme's
 * own text inset — the side without the caret allowance — so the tabs keep
 * their intended spacing and only lose the unused caret gap.
 *
 * Scoped to #dualNav (id beats the theme's 5-class selector) and to >= 992px;
 * below that the burger-drawer block above already sets a symmetric
 * 0.6rem 0.75rem.
 */
@media (min-width: 992px) {
    #dualNav .navbar-nav-top .nav-link {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }
}