@tailwind theme;
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        font-size: var(--text-2xl);
    }
    h2 {
        font-size: var(--text-xl);
    }
    .rounded-ms {
        border-radius: 0.275rem;
    }
}

@layer components {
    .alert {
        @apply text-white text-sm min-w-[250px] border px-4 py-3 rounded-md
    }
    .alert-success {
        @apply bg-green-950 hover:bg-green-900 border-green-500
    }
    .alert-warning {
        @apply bg-yellow-500 hover:bg-yellow-600 border-yellow-400 text-black
    }
}

:root {
    --fc-border-color: #a65b27;
    --fc-page-bg-color: #a65b27;
}

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
    overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
    box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

dialog[open] {
    animation: fade-in 100ms ease-in forwards;
}

/* Add animations */
dialog[data-dialog-target="dialog"][open] {
    animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
    animation: fade-out 200ms forwards;
}

.text-input {
    @apply bg-gray-50 text-gray-50 px-2 py-1 bg-transparent border-b-2 border-orange-400
}

.text-input[multiple="multiple"] {
    @apply bg-transparent backdrop-filter backdrop-blur-md text-white border border-orange-500 rounded-md
}

.text-input option[checked="checked"],
.text-input option[checked],
.text-input option[selected] {
    @apply bg-orange-500/60
}

.submit-button {
    @apply bg-green-600/40 px-1.5 py-1 w-full rounded-md text-gray-50 backdrop-filter backdrop-blur-sm border-2 border-green-500 hover:bg-green-700/40
}

.r-tablecell {
    display: none;
}

.r-tablerow {
    display: flex;
}

@media screen and (min-width: 768px) {
    .r-tablecell {
        display: table-cell;
    }

    .r-tablerow {
        display: table-row;
    }
}

.options-table {
    display: flex;

    :last-child {
        border-bottom: none;
    }
}

@media screen and (min-width: 768px) {
    .options-table {
        display: inline-table;
    }
}

#search .ts-wrapper.single .ts-control::after {
    display: none !important;
}

#search .ts-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    padding-left: 0;

    input {
        color: #fff !important;
        padding: 0;
    }
}

#search .ts-dropdown {
    background: unset;
    @apply bg-orange-500/80 backdrop-filter backdrop-blur-md text-white border border-orange-500 rounded-md z-20
}

#search .ts-dropdown .ts-dropdown-content .option.active {
    background: unset;
    @apply bg-orange-500/80 text-black font-bold rounded-md
}

.progress {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
}
.progress > * {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
.progress .background {
    z-index: 1;
    place-self: start;
}
.progress .number {
    z-index: 2;
    background: transparent;
}

#filter {
    .ts-wrapper {
        box-shadow: none !important;
        padding: 0;

        .ts-control {
            border: none !important;
            box-shadow: none !important;
            @apply bg-orange-500/60 backdrop-filter backdrop-blur-md;
        }

        .item[data-ts-item] {
            background-image: none !important;
            border: none;
            box-shadow: none;
            text-shadow: none;
            @apply bg-orange-500 rounded-ms font-bold text-black;
        }

        @apply border border-orange-500 bg-transparent rounded-ms;
    }

    .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
        @apply border-l border-l-orange-600 !important;
    }
}

.filter-label {
    @apply flex flex-col gap-1 justify-between;
}

/** FullCalendar **/
#upcoming_episodes_calendar .fc-event-main .fc-event-title-container {
    cursor: pointer !important;
}
.fc-col-header-cell {
    @apply bg-orange-500/60 text-white;
}