@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/livewire/*';
@source '../../../../resources/views/filament/**/*';
@source '../../../../resources/views/filament/modals/**/*';
@source '../../../../resources/views/filament/tables/**/*';
@source '../../../../resources/views/components/**/*';
@source '../../../../vendor/awcodes/light-switch/resources/**/*.blade.php';
@source '../../../../vendor/guava/filament-modal-relation-managers/resources/**/*';
@source '../../../../vendor/jaocero/radio-deck/resources/views';


/* Reduce gap between widgets and content */
.fi-page-content {
    @apply gap-y-5;
    /* Default is usually gap-6 or gap-8 */
}

.fi-page-header-main-ctn {
    @apply pt-5
}

/* hide reset link in filters */
.fi-ta-filters-heading,
button[wire\:click="resetTableFiltersForm"] {
    display: none;
}

.tippy-box {
    max-width: 1000px !important;
    /* background-color: #0f172b; */
}

.fi-ta-table>tbody {
    @apply divide-none
}

/* stripes in popups */
@layer utilities {
    .striped div:nth-child(even) {
        @apply bg-gray-100
    }
}

.drag-and-drop__item:active {
    @apply rounded;
    background-color: rgba(43, 127, 255, 0.1);
}

.alarm-level-style {
    @apply bg-gray-600/5;
}

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

.fi-ta-filter-indicators {
    justify-content: center;
    width: 100%;
}

/* label bettypes centered */
.fi-ta-header-cell-oddstotal,
.fi-ta-header-cell-oddstq,
.fi-ta-header-cell-oddsggng,
.fi-ta-header-cell-oddsdnb,
.fi-ta-header-cell-odds3way,
.fi-ta-header-cell-oddsdc,
.fi-ta-header-cell-id {
    @apply !text-center
}

#ComparingBookmakerMenu .fi-ta-header-toolbar {
    @apply grid grid-cols-3 justify-start
}

/* Styling Radio Lable */

.radio-monitor-group {
    @apply !grid grid-cols-3 gap-y-2 m-0 p-0
}

.radio-statistic-group {
    @apply !grid grid-cols-2 m-0 p-0
}

.fi-fo-radio-label {
    @apply m-0 px-2 py-1 border border-gray-200 dark:border-gray-700 shadow rounded-lg cursor-pointer
}

input[type="radio"].fi-radio-input {
    @apply bg-none border-0
}

input[type="radio"].fi-radio-input {
    &:checked {
        @apply bg-none bg-green-500 dark:bg-green-600 border-0
    }
}

/*
 Statistiko BOX Widgets
*/
.box-info {
    @apply bg-info-50 dark:bg-info-500/20 border border-info-500/30 dark:border-info-900 drop-shadow-xl p-2
}

.box-success {
    @apply bg-success-50 dark:bg-success-500/20 border border-success-500/30 dark:border-success-900 drop-shadow-xl p-2
}

.box-purple {
    @apply bg-purple-50 dark:bg-purple-500/20 border border-purple-500/30 dark:border-purple-900 drop-shadow-xl p-2
}

.box-yellow {
    @apply bg-yellow-50 dark:bg-yellow-500/20 border border-yellow-500/30 dark:border-yellow-900 drop-shadow-xl p-2
}

/*
widget space to top menu
*/
.fi-page-header-main-ctn {
    padding-top: 1rem;
}

/*
widget space to filter
*/
.fi-page-content {
    row-gap: 1rem;
}

/*
 * top space inside filter conatiner
 */
.fi-ta-filters-above-content-ctn {
    padding-top: 0;
}

.fi-wi-stats-overview-stat-label {
    @apply text-sm font-bold mx-auto
}

.fi-wi-stats-overview-stat-description span {
    @apply mx-auto;
}

.fi-wi-stats-overview-stat-value {
    @apply text-center
}

/**  x for removing all filters (not working) */
#mapper_right .fi-ta-filter-indicators button,
#mapper_left .fi-ta-filter-indicators button {
    display: none;
}

#mapper_right .fi-ta-filter-indicators div button,
#mapper_left .fi-ta-filter-indicators div button {
    display: block;
}

/**
less padding in table
*/
#mapper_right,
#mapper_left {
    @layer components {
        .fi-ta-ctn {
            & .fi-ta-filters {
                display: grid;
                row-gap: 0;
            }
        }

        .fi-ta-text {
            &:not(.fi-inline) {
                padding-block: 0.2rem;
            }
        }
    }

    .fi-ta-filters-above-content-ctn {
        @apply py-3
    }

    .fi-ta-header-toolbar {
        @apply py-3
    }

    .fi-ta-cell {
        @apply py-0.5
    }

    .fi-ta-cell>div {
        @apply py-0.5
    }
}


#mapper {
    @layer components {
        .fi-ta-ctn {
            & .fi-ta-header-toolbar {
                @apply !flex-row-reverse;
                flex-wrap: inherit;
            }
        }

        .fi-pagination {
            & .fi-pagination-overview {
                display: block;
                font-size: 11px;
            }
        }
    }
}


/* player statistik */
#player_selector .fi-dropdown-header {
    @apply px-2 text-lg font-black dark:bg-black border-y border-gray-300 dark:text-gray-300 dark:border-gray-600
}

@layer components {
    .fi-tabs-item {
        &.fi-active {
            @apply bg-gray-100 dark:bg-gray-600/30 drop-shadow
        }
    }
}

/* 1. Das Element, das am Mauszeiger klebt (Der Mirror) */
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.95 !important;
    pointer-events: none;
    /* Verhindert, dass der Klon Maus-Events blockiert */

    /* Styling für den Klon (Hell-Modus) */
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid rgb(226, 232, 240) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-radius: 0.5rem !important;
    transform: rotate(3deg);
    /* Optionale leichte Drehung für einen dynamischen Look */
    transition: transform 0.15s ease;
}

/* Dark Mode Anpassung für den Mirror (Wichtig in Filament!) */
.dark .gu-mirror {
    background-color: rgb(31, 41, 55) !important;
    border-color: rgb(55, 65, 81) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Der „Schatten“ am ursprünglichen Platz (Transit-Element) */
.gu-transit {
    opacity: 0.3 !important;
    border: 2px dashed rgb(99, 102, 241) !important;
    /* Indigo-farbener gestrichelter Rahmen */
    background-color: rgba(99, 102, 241, 0.05) !important;
}

.dark .gu-transit {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

/* 3. Sicherstellen, dass die Dropzones Platz für das Element bieten */
.drag-box {
    @apply flex flex-col gap-0 size-24 bg-gray-100/50 border-2 border-dashed border-gray-300 rounded-xl text-xs p-0;
}