@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/columns/**/*';
@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';


@layer utilities {

    /* Versteckt den Scrollbalken für Chrome, Safari und Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Versteckt den Scrollbalken für IE, Edge und Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }
}

/* 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-blank {
    @apply p-2 flex justify-center drop-shadow
}

.box-info {
    @apply bg-info-50 dark:bg-info-500/20 border border-info-500/30 dark:border-info-900 p-2 flex justify-center
}

.box-success {
    @apply bg-success-50 dark:bg-success-500/20 border border-success-500/30 dark:border-success-900 p-2 flex justify-center
}

.box-purple {
    @apply bg-purple-50 dark:bg-purple-500/20 border border-purple-500/30 dark:border-purple-900 p-2 flex justify-center
}

.box-yellow {
    @apply bg-yellow-50 dark:bg-yellow-500/20 border border-yellow-500/30 dark:border-yellow-900 p-2 flex justify-center
}

.box-gray {
    @apply bg-gray-50 dark:bg-gray-500/20 border border-gray-500/30 dark:border-gray-900 p-2 flex justify-center
}

/*
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
        }
    }
}

.soccer-field {
    width: 100%;
    height: 400px;
    /* Höhe nach Bedarf anpassen */

    /* Linienfarbe hier flexibel definieren: */
    background-color: currentColor;

    /* Das SVG dient als Maske */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.soccer-field-classic {
    width: 100%;
    height: 400px;
    background-color: transparent;
    /* Hintergrund bleibt transparent */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='%23ffffff'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#playerdragtable .fi-ta-content-ctn {
    max-height: 600px !important;
    overflow-y: auto !important;
    overflow-x: visible;
    scrollbar-width: none;
    -webkit-scrollbar: hidden;
    -ms-overflow-style: none;
}

/* Fixiert den Tabellenkopf sauber im Scroll-Kontext */
#playerdragtable .fi-ta-header-ctn {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

.warning {
    @apply bg-amber-100 dark:bg-amber-700 text-amber-600 dark:text-amber-500 text-center border border-amber-300 dark:border-amber-500 rounded my-0.5
}

.info {
    @apply bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-400 text-center border border-blue-300 dark:border-blue-500 rounded my-0.5
}

.success {
    @apply bg-green-100 dark:bg-green-700 text-green-600 dark:text-green-400 text-center border border-green-300 dark:border-green-500 rounded my-0.5
}

.gray {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-center border border-gray-300 dark:border-gray-500 rounded my-0.5
}