.fi-sidebar,
.fi-sidebar-header {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(24 28 39 / var(--tw-bg-opacity)) !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.fi-sidebar .fi-logo,
.fi-sidebar-header .fi-logo {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.fi-sidebar .fi-sidebar-nav,
.fi-sidebar-header .fi-sidebar-nav {
    padding-top: 1.5rem !important
}

.fi-sidebar .fi-sidebar-nav .fi-sidebar-nav-groups .fi-sidebar-group-collapse-button,
.fi-sidebar-header .fi-sidebar-nav .fi-sidebar-nav-groups .fi-sidebar-group-collapse-button,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-nav-groups .fi-sidebar-group-label,
.fi-sidebar-header .fi-sidebar-nav .fi-sidebar-nav-groups .fi-sidebar-group-label {
    --tw-text-opacity: 1 !important;
    color: rgb(241 244 246 / var(--tw-text-opacity)) !important
}

.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item .fi-sidebar-item-label,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item .fi-sidebar-item-label {
    font-size: .875rem !important;
    line-height: 1.15rem !important;
    font-weight: 500;
    --tw-text-opacity: 1 !important;
    color: rgba(var(--gray-400), var(--tw-text-opacity)) !important
}
.fi-sidebar .fi-sidebar-nav li a{
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    height: 2rem !important;
}
.fi-sidebar .fi-sidebar-nav ul{
    row-gap: 0rem !important;
}

.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item a:hover,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item a:hover {
    border-radius: 0 !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(12 18 28 / var(--tw-bg-opacity)) !important
}

.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item a:hover span,
.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item a:hover svg,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item a:hover span,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item a:hover svg {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a {
    border-radius: 0 !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(12 18 28 / var(--tw-bg-opacity)) !important
}

.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a span,
.fi-sidebar .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a svg,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a span,
.fi-sidebar-header .fi-sidebar-nav ul .fi-sidebar-item.fi-sidebar-item-active a svg {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

/* In your app.css or a relevant CSS file */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Important for older Chrome versions */
}

.no-spinners {
    -moz-appearance: textfield; /* For Firefox */
    appearance: textfield; /* Standard property for other browsers */
}

.near-label {
    grid-template-columns: 1fr 2fr 2fr;
}

.label-place {
    grid-template-columns: 3fr 1fr 2fr !important;
}

/*.fi-ta-header-toolbar {
    @apply flex-row-reverse;
}

.fi-ta-header-toolbar > *:nth-child(2){
    width: 100%;
    justify-content: space-between;
}*/

/* Move Filament Table search to the left and keep Filters at the far right */
.fi-ta-header-toolbar > .ms-auto {
    /* Bring the search/filters group to the left and let it span the row */
    order: -1;
    flex: 1 1 auto;
    margin-left: 0 !important; /* override ms-auto */
}

/* Keep the other (left) group from expanding */
.fi-ta-header-toolbar > :not(.ms-auto) {
    flex: 0 0 auto;
}

/* Inside the search/filters group: ensure layout and spacing */
.fi-ta-header-toolbar > .ms-auto {
    display: flex; /* already flex via utility classes, ensure in case of overrides */
    align-items: center;
    gap: 1rem;
}

/* Ensure the search field stays first (left-most) */
.fi-ta-header-toolbar > .ms-auto .fi-ta-search-field {
    order: 0;
}

/* Column toggle should appear before Filters when both exist */
.fi-ta-header-toolbar > .ms-auto .fi-ta-col-toggle {
    order: 1;
}

/* Keep Filters on the left alongside the search/column toggle */
.fi-ta-header-toolbar > .ms-auto .fi-ta-filters-modal,
.fi-ta-header-toolbar > .ms-auto .fi-ta-filters-dropdown {
    margin-left: 0 !important; /* previously auto pushed them to the far right */
    order: 2; /* keep filters after search and column toggle */
}

/* DeclineManager list page: keep search on the left and push the reorder button group to the far right */
.fi-resource-decline-managers .fi-ta-header-toolbar > .ms-auto {
    order: -1;            /* ensure search/filters group stays first (left) */
    flex: 1 1 auto;
    margin-left: 0 !important;
}
.fi-resource-decline-managers .fi-ta-header-toolbar > :not(.ms-auto) {
    order: 1;            /* ensure actions (incl. reorder trigger) group appears after, on the right */
    margin-left: auto;   /* push the group to the far right */
}

/* Global: make all Filament table rows a little shorter */
.fi-ta-table tbody tr > td > div.fi-ta-col-wrp > button > div.py-4{
    padding-top: 0.75rem !important;   /* default ~0.75rem → tighter */
    padding-bottom: 0.75rem !important;
}
.fi-ta-table tbody tr > td.fi-ta-actions-cell > div.py-4{
    padding-top: 0.75rem !important;   /* default ~0.75rem → tighter */
    padding-bottom: 0.75rem !important;
}
.fi-ta-table tbody tr > td > div.fi-ta-col-wrp > a > div.py-4{
    padding-top: 0.5rem !important;   /* default ~0.75rem → tighter */
    padding-bottom: 0.5rem !important;
}

.fi-modal-window:has(.custom-small-form) {
    max-width: 500px !important;
}

section.custom-edit-order-infolist-sh-addr > div.fi-section-content-ctn > div > dl > div.fi-fo-component-ctn {
    row-gap: 0.1rem !important;
}

section.custom-edit-order-infolist-bl-addr > div.fi-section-content-ctn > div > dl > div.fi-fo-component-ctn {
    row-gap: 0.1rem !important;
}

section.custom-edit-order-infolist-bl > div.fi-section-content-ctn > div > dl > div.fi-fo-component-ctn {
    row-gap: 0.1rem !important;
}

section.custom-edit-order-infolist-sh > div.fi-section-content-ctn > div > dl > div.fi-fo-component-ctn {
    row-gap: 0.1rem !important;
}

section.custom-edit-order-infolist-affiliate > div.fi-section-content-ctn > div > dl > div.fi-fo-component-ctn {
    row-gap: 0.1rem !important;
}

div.custom-edit-order-infolist-subs > ul > div > li.fi-in-repeatable-item > dl > div.fi-fo-component-ctn {
    row-gap: 0.5rem !important;
}

.fi-ta-toggle {
    padding: 12px !important;
}

.repeater-custom{
    li{
        position: relative;
    }

    .fi-fo-repeater-item-header{
        padding: 0;

        ul{
            position: absolute;
            right: 6px;
            top: 5px;
        }
    }

    .fi-fo-repeater-item-content{
        border-top: none !important;
        padding-top: 20px;
    }
}

.edit-button{
    background-color: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(37, 99, 235);
    }
}

.dark .edit-button{
    background-color: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(59, 130, 246);
    }
}

.dark .edit-button {
    border-color: hsla(0, 0%, 100%, .2);
}

.edit-button:hover{
    background-color: rgba(37, 99, 235, 0.15) !important;
}

.green-button{
    background-color: rgba(37, 235, 63, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(22, 163, 74);
    }
}

.dark .green-button {
    border-color: hsla(0, 0%, 100%, .2);
}

.green-button:hover{
    background-color: rgba(37, 235, 63, 0.15) !important;
}

.delete-button{
    background-color: rgba(235, 37, 37, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(239, 68, 68);
    }
}

.dark .delete-button {
    border-color: hsla(0, 0%, 100%, .2);
}

.delete-button:hover{
    background-color: rgba(235, 37, 37, 0.15) !important;
}

.green-button-white{
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(22, 163, 74);
    }
}

.dark .green-button-white {
    border-color: hsla(0, 0%, 100%, .2);
}

.green-button-white:hover{
    background-color: rgba(37, 235, 63, 0.15) !important;
}

.delete-button-white{
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid hsla(0, 0%, 49%, 0.2);
    transition: background-color .2s;

    svg{
        fill: rgb(239, 68, 68);
    }
}

.delete-button-white:hover{
    background-color: rgba(235, 37, 37, 0.15) !important;
}

.dark .delete-button-white {
    border-color: hsla(0, 0%, 100%, .2);
}

div[data-field-wrapper]:has(.title-with-token){
    .justify-between{
        justify-content: flex-start !important;
    }
}

.simple-repeater{
    .fi-in-repeatable-item{
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    ul{
        div{
            gap: 4px !important;
        }
    }
}

.card-order{
    dl{
        height: 100%;

        .custom-edit-order-infolist{
            height: 100%;

            section{
                height: 100%;
            }
        }
    }
}

.custom-edit-order-infolist{
    .edit-button{
        padding: 4px 10px !important;

        svg{
            width: 16px !important;
        }
    }
}

.custom-edit-order-infolist:has(.edit-button){
    .fi-section-header{
        padding: 13px !important;
    }
}

.custom-edit-order-infolist-notes{
    .fi-section-content{
        padding: 0!important;
    }
}

.custom-section-block{
    .fi-section-content{
        padding: 0 !important;
    }
}

.custom-brand-page-view{
    display: flex;
    flex-direction: column;
    gap: 12px !important;

    .fi-ta-table tbody tr > td > div.fi-ta-col-wrp > a > div.py-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .fi-ta-header-cell{
        padding: 8px 24px !important;
    }

    .fi-ta-cell{
        padding: 4px 24px !important;


        .fi-ta-text{
            padding: 0 !important;
        }
    }
}

.record-details-block{
    .record-details-item{
        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        .item-title{
            @media screen and (max-width: 768px) {
                font-weight: 600;
            }
        }
    }
}

.dark-icon{
    display: none;
}

.light-icon{
    display: block;
}

.main-table {

    tbody {
        tr:hover {
            background-color: rgba(var(--gray-50), var(--tw-bg-opacity, 1));
        }
    }
}

.dark .main-table{
    border-color: hsla(0, 0%, 100%, .1);

    tr, td, thead, tbody, th, div{
        border-color: hsla(0, 0%, 100%, .1) !important;
    }

    thead{
        background-color: hsla(0, 0%, 100%, .05) !important;
    }

    .table-head{
        background-color: hsla(0, 0%, 100%, .1);
    }

    .header-table{
        border-color: hsla(0, 0%, 100%, .1);
    }

    tbody{
        border-color: hsla(0, 0%, 100%, .1);

        tr:hover{
            background-color: hsla(0, 0%, 100%, .05);
        }
    }

    .dark-icon{
        display: block;
    }

    .light-icon{
        display: none;
    }
}

.dark .main-table:not(.wizard):not(.history-wrapper){
    tr, td, thead, tbody, th, div{
        border-color: hsla(0, 0%, 100%, .1) !important;
    }

    thead, .dark-row{
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .dark-row{
        td{
            background-color: hsla(0, 0%, 100%, .1);
        }
    }

    .table-head{
        background-color: hsla(0, 0%, 100%, .1);
    }

    .header-table{
        border-color: hsla(0, 0%, 100%, .1);
    }

    tbody{
        border-color: hsla(0, 0%, 100%, .1);

        tr:hover{
            background-color: hsla(0, 0%, 100%, .05);
        }
    }
}

.custom-order-summary{
    box-shadow: none !important;

    .fi-section-content{
        padding: 0 !important;
    }
}

a:has(.customer-link) {
    text-decoration-color: rgb(var(--primary-600)) !important; /* light theme underline */
    text-decoration: none !important;

    span{
        text-decoration-color: rgb(var(--primary-600)) !important; /* light theme underline */
        text-decoration: none !important;
    }
}

a:has(.customer-link):hover {
    span.customer-link{
        border-bottom: 1px solid rgb(var(--primary-600));
    }
}

.dark a:has(.customer-link):hover {
    span.customer-link{
        border-bottom: 1px solid rgb(var(--primary-400));
    }
}

/* Dark theme */
.dark a:has(.customer-link) {
    text-decoration-color: rgb(var(--primary-400)) !important; /* dark theme underline */
}

/* Optional: underline only on hover/focus */
a:has(.customer-link):hover,
a:has(.customer-link):focus-visible {
    text-decoration: underline;
}

.customer-link {
    text-decoration: none; /* remove default underline */
    color: rgb(var(--primary-600)); /* light theme text */
    text-decoration-color: rgb(var(--primary-600)) !important; /* dark theme underline */
    border-bottom: 1px solid transparent; /* space for hover underline */
    transition: border-color 0.2s;
}

/* Dark theme */
.dark .customer-link {
    color: rgb(var(--primary-400)); /* dark theme text */
    text-decoration-color: rgb(var(--primary-400)) !important; /* dark theme underline */
}

/* Hover / focus underline */
.customer-link:hover,
.customer-link:focus-visible {
    border-bottom-color: currentColor; /* underline matches text color */
}

.custom-section-block{
    .fi-section-header{
        padding: 12px 16px !important;
    }
}

.main-table.no-hover{
    tr:hover{
        background-color:  var(--color-gray-900) !important;
    }
}

.icon-refund{
    color: rgb(0, 0, 0) !important;
}

.dark .icon-refund{
    color: rgb(255, 255, 255) !important;
}

.fi-ta-header-toolbar:not(:has(button[disabled="disabled"])){
    .ms-auto {
        /* Bring the search/filters group to the left and let it span the row */
        order: 1 !important;
        flex: 1 1 auto;
        margin-left: 0 !important; /* override ms-auto */
    }
}

.fi-resource-system-notifications{
    .fi-ta-header-toolbar:not(:has(button[disabled="disabled"])){
        .ms-auto {
            /* Bring the search/filters group to the left and let it span the row */
            order: -1 !important;
            flex: 1 1 auto;
            margin-left: 0 !important; /* override ms-auto */
        }
    }
}

.history-table tr.hover {
    background-color: rgba(var(--gray-50), var(--tw-bg-opacity, 1));
}

.dark .history-table tr.hover {
    background-color: hsla(0, 0%, 100%, 0.05);
}

.fi-modal-window:has(.history-table){
    .fi-modal-description{
        color: #09090B !important;
        font-size: 16px !important;
    }
}

.dark .fi-modal-window:has(.history-table){
    .fi-modal-description{
        color: white !important;
        font-size: 16px !important;
    }
}

.section-small-padding {
    .fi-section-content {
        padding: 16px !important;

        > .fi-fo-component-ctn:first-of-type {
            gap: 0 12px !important;
        }
    }
}

.filter-button-custom {
    height: 36px;
    border-radius: .5rem !important;
    background-color: white !important;
    font-size: 14px;
    font-weight: 600 !important;
    color: #09090B !important;
    border: 1px solid rgba(9, 9, 11, 0.1);
}

.dark .filter-button-custom {
    height: 36px;
    border-radius: .5rem !important;
    font-size: 14px;
    font-weight: 600 !important;
    background-color: hsla(0, 0%, 100%, .05) !important;
    color: white !important;
    border: 1px solid hsla(0, 0%, 100%, .2);
}

.dark .input-with-selectable-select{
    background-color: hsla(0, 0%, 100%, .05) !important;
    color: white !important;
    border: 1px solid hsla(0, 0%, 100%, .2) !important;
}

.dark .input-with-selectable-input{
    background-color: hsla(0, 0%, 100%, .05) !important;
    color: white !important;
    border: 1px solid hsla(0, 0%, 100%, .2) !important;
    border-left: none !important;
}

.dark .input-with-selectable-label {
    color: white;
}

.dark .input-with-selectable-option{
    background-color: #131313 !important;
    color: white !important;
}

.date-block{

    .date-block{
        max-width: 250px !important;
        width: 100%;
    }
}

.row-filter{
    div.fi-fo-component-ctn{
        display: flex !important;
        gap: 12px !important;
        flex-wrap: wrap;
    }
}

.sales-by-gateway-table{
    font-size: 13px;

    th{
        padding: 6px !important;

        span{
            font-size: 13px;
        }
    }

    td{
        font-size: 13px;
        padding: 6px !important;

        button{
            font-size: 13px;
        }
    }
}

.sales-by-prospects-table{
    font-size: 13px;

    th{
        span{
            font-size: 13px;
        }
    }

    td{
        font-size: 13px;

        button{
            font-size: 13px;
        }
    }
}

.sales-by-campaign-table{
    font-size: 13px;

    th{
        padding: 6px !important;

        span{
            font-size: 13px;
        }
    }

    td{
        font-size: 13px;
        padding: 6px !important;

        button{
            font-size: 13px;
        }
    }
}

.daterangepicker .ranges li {
    font-size: 12px;
    padding: 5px 12px !important;
    cursor: pointer;
}

.daterangepicker .ranges li.active {
    background-color: #2563eb !important;
}

.daterangepicker .ranges li:hover {
    background-color: #2563eb !important;
}

.dark .daterangepicker .ranges li.active {
    background-color: #3b82f6 !important;
}

.dark .daterangepicker .ranges li:hover {
    background-color: #3b82f6 !important;
}

.daterangepicker td.end-date.active:not(.off) {
    background-color: #2563eb !important;
}

.dark .daterangepicker td.end-date.active:not(.off) {
    background-color: #3b82f6 !important;
}

.daterangepicker td.start-date.active:not(.off) {
    background-color: #2563eb !important;
}
.dark .daterangepicker td.start-date.active:not(.off) {
    background-color: #3b82f6 !important;
}

.multiselect-checkbox{
    .multiselect-checkbox-label{
        color: #09090B;
        line-height: 1.5rem;
    }

    .dropdown-block{
        max-height: 300px;
        overflow-y: auto;
    }
}

.dark .multiselect-checkbox{
    .multiselect-checkbox-label{
        color: white;
    }

    button{
        background-color: hsla(0, 0%, 100%, .05) !important;
        color: white !important;
    }

    .dropdown-block{
        background-color: #131313 !important;
        color: white !important;

        label:hover{
            background-color: hsla(0, 0%, 100%, .05) !important;
        }
    }
}

.daterangepicker:is(.dark *){
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity, 1)) !important;
    border-color: hsla(0, 0%, 100%, .2) !important;
}

.daterangepicker .calendar-table:is(.dark *) {
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker td.end-date.active.off:is(.dark *), .daterangepicker td.off.in-range:is(.dark *), .daterangepicker td.off:is(.dark *), .daterangepicker td.start-date.active.off:is(.dark *) {
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker td.in-range:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: hsla(0, 0%, 100%, 0.1) !important;
    color: white !important;
}

.daterangepicker:is(.dark *).opensright:after {
    border-bottom: 6px solid rgba(var(--gray-900), var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker:is(.dark *).opensright:before {
    border-bottom: 7px solid hsla(0, 0%, 100%, .2) !important;
}

.calendar-table{
    border: none !important;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left:is(.dark *){
    border-color: hsla(0, 0%, 100%, .2) !important;
}

.custom-per-row-selector, .custom-page-selector{

    .fi-pagination-records-per-page-select.fi-compact {
        display: flex !important;
    }
}

.custom-page-selector{
    @media screen and (max-width: 927px) {
        justify-content: flex-start !important;
    }

    button, .of-text{
        @media screen and (max-width: 540px) {
            display: none;
        }
    }
}

.custom-row-pagin-mobile{
    display: none !important;

    .fi-compact{
        display: flex !important;
    }

    @media screen and (max-width: 927px) {
        display: flex !important;
    }
}