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

@layer base {
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-display: swap;
        src: url(/public/build/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Open Sans';
        font-style: italic;
        font-display: swap;
        src: url(/public/build/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        src: url(/public/build/fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
    }
    @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-display: swap;
        src: url(/public/build/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
    }
}

body {
    @apply font-montserrat;
}

@layer components {
    .btn {
        @apply px-2 p-1 text-sm border border-solid border-white text-white rounded-lg cursor-pointer duration-500 ease-in-out;
    }

    .btngreen {
        @apply btn bg-green-600 hover:bg-green-800;
    }
    .btnred {
        @apply btn bg-red-600 hover:bg-red-800;
    }
    .btngray {
        @apply btn bg-gray-600 hover:bg-gray-800;
    }
    .btnblue {
        @apply btn bg-blue-600 hover:bg-blue-800;
    }
    .btnorange {
        @apply btn bg-yellow-500 hover:bg-yellow-700;
    }
    .btnpurple {
        @apply btn bg-purple-600 hover:bg-purple-800;
    }

    .bg-main {
        @apply bg-gray-500 dark:bg-stone-900;
    }

    .bg-primary {
        @apply bg-gray-800 dark:bg-stone-800;
    }

    .bg-secondary {
        @apply bg-gray-800 dark:bg-stone-700;
    }

    .bg-tertiary {
        @apply bg-gray-700 dark:bg-orange-500;
    }

    .bg-quaternary {
        @apply bg-gray-700 dark:bg-stone-600;
    }

    .hover-primary {
        @apply hover:bg-white dark:hover:bg-transparent hover:text-gray-900 dark:hover:text-orange-500;
    }

    .active-link {
        @apply bg-white dark:bg-transparent text-gray-900 dark:text-orange-500;
    }
    .active-link2 {
        @apply bg-white dark:bg-white text-gray-900;
    }

    .disabled-links {
        @apply pointer-events-none cursor-default text-gray-400;
    }

    .security-title {
        @apply text-2xl text-center font-extrabold leading-none;
    }

    .imgctc {
        opacity: 0;
        transition: opacity 0.5s linear;
    }
    .imgctc.show {
        opacity: 1;
    }

    .security-button {
        @apply btnblue w-full text-lg font-bold text-center text-white rounded-lg;
    }

    .input {
        @apply text-black w-full px-4 py-3 border border-2 border-transparent border-gray-200 rounded-lg focus:ring focus:ring-blue-500 focus:outline-none;
    }

    .link {
        @apply text-blue-400 hover:underline;
    }

    .medarg {
        @apply text-blue-400 italic;
    }

    .title1 {
        @apply text-2xl font-bold text-center;
    }
    .title2 {
        @apply text-xl font-semibold;
    }
    .title3 {
        @apply text-lg;
    }

    .title1-container {
        @apply bg-secondary rounded-lg p-2 flex items-center justify-center;
    }

    .showDiv {
        max-height: max-content;
        opacity: 1;
        transition: max-height 1s, opacity 1s linear;
    }

    .showHidden {
        max-height: 0;
        opacity: 0;
    }

    .statCard {
        @apply flex flex-col justify-between gap-2 bg-tertiary cursor-pointer p-2 rounded-md min-w-30 min-h-20;
    }

    .dependencies label {
        padding-right: 4px;
        margin-right: 20px;
        border-top: 1px solid #ccc;;
        border-bottom: 1px solid #ccc;;
        border-right: 1px solid #ccc;
    }

    .question {
        @apply text-right p-2;
    }

    .answer {
        @apply text-left p-2;
    }

    .btnstyle {
        position: relative;
        text-decoration: none;
        overflow: hidden;
        transition: .5s;
        transition-duration: 600ms;
    }

    .btnstyle span {
        position: absolute;
        display: block;
    }

    .btnstyle span:nth-child(1) {
        top: 0;
        left: -100%;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, transparent, white);
        animation: btn-anim1 1s linear infinite;
    }

    @keyframes btn-anim1 {
        0% {
            left: -100%;
        }
        50%,100% {
            left: 100%;
        }
    }

    .btnstyle span:nth-child(2) {
        top: -100%;
        right: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, transparent, white);
        animation: btn-anim2 1s linear infinite;
        animation-delay: .25s
    }

    @keyframes btn-anim2 {
        0% {
            top: -100%;
        }
        50%,100% {
            top: 100%;
        }
    }

    .btnstyle span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 4px;
        background: linear-gradient(270deg, transparent, white);
        animation: btn-anim3 1s linear infinite;
        animation-delay: .5s
    }

    @keyframes btn-anim3 {
        0% {
            right: -100%;
        }
        50%,100% {
            right: 100%;
        }
    }

    .btnstyle span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(360deg, transparent, white);
        animation: btn-anim4 1s linear infinite;
        animation-delay: .75s
    }

    @keyframes btn-anim4 {
        0% {
            bottom: -100%;
        }
        50%,100% {
            bottom: 100%;
        }
    }

    #divA, #divB {
        transition: flex-basis 0.5s ease, opacity 0.5s ease;
    }

    #divB {
        @apply lg:opacity-100;
    }

    #divB.hide {
        @apply lg:basis-0 lg:overflow-hidden lg:opacity-0;
    }

    #divA.expand {
        @apply lg:basis-full;
    }


    #divB.hide a {
        @apply lg:hidden;
    }

    #animateButton {
        @apply opacity-0 lg:opacity-100;
        transition: transform 0.5s ease;
    }

    #animateButton.open {
        transform: rotate(180deg);
    }

    .showSmooth {
        height: auto;
        transition: height 0.5s ease;
        overflow: hidden
    }
    .showSmooth.hiddenSmooth {
        height: 0;
    }

    .pagination {
        @apply flex items-center justify-center px-3 h-8 border border-gray-300 dark:border-gray-700;
    }
    .pagination.active {
        @apply bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white text-blue-600;
    }
    .pagination.inactive {
        @apply dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 leading-tight text-gray-500 bg-white;
    }

    #leaderboards-container button {
        @apply btngray;
        color: white !important;
    }

    #leaderboards-container button.current {
        background-color: #333;
    }

    #leaderboards-container select, #leaderboards-container option {
        @apply bg-quaternary;
    }

    #dofus-container button {
        @apply btngray;
        color: white !important;
    }

    #dofus-container button.current {
        background-color: #333;
    }

    #dofus-container select, #dofus-container option, #dofus-container input {
        @apply bg-quaternary;
    }

}

.text-shadow {
    -webkit-text-stroke: 1px black;
}
@keyframes GLModA {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}


.carousel-wrapper {
    @apply w-full overflow-hidden rounded-lg my-2 border border-white;
    max-width: 100vw;
}

.carousel {
    @apply w-full overflow-hidden;
}

.carousel-content {
    @apply flex;
    transition: transform 0.4s ease;
}

.page {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
}

.page > .grid {
    max-width: 100%;
    width: 100%;
}

.histoMenu {
    @apply flex w-full md:w-fit justify-center items-center flex-wrap p-1 gap-1;
    box-sizing: border-box;
}

.menu-button {
    @apply bg-primary flex grow justify-center items-center;
    padding: 2px 6px;
    height: 100%;
    min-height: 32px;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.4s;
}

.menu-button:hover {
    background-color: #003cff;
}

.menu-button.active {
    background-color: #007BFF;
}

.tab-button {
    @apply text-sm bg-tertiary whitespace-nowrap flex grow gap-2 items-center justify-center h-full;
    padding: 2px 6px;
    height: 100%;
    min-height: 32px;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.4s;
}

.gameLine {
    @apply flex items-center gap-1 min-w-[250px] p-1;
}

.tab-button:hover {
    background-color: #003cff;
}

.tab-button.active {
    background-color: #007BFF;
}

.tabs-menu {
    @apply bg-primary p-2 mb-2 rounded-md flex flex-wrap gap-2 items-center;
}

.sidebar-container {
    @apply fixed md:sticky md:left-0 top-0 bottom-0 h-full z-50 w-fit;
}

.sidebar-gl {
    @apply flex flex-col justify-between h-full gap-2 pb-2 z-50 bg-primary min-w-[200px] transition-transform duration-300 md:translate-x-0 md:relative;
}

/* Animation slide */
.slide-enter {
    transform: translateX(-100%);
}

.slide-enter-active {
    transition: transform 0.3s ease-in-out;
    transform: translateX(0%);
}

.slide-leave {
    transform: translateX(0%);
}

.slide-leave-active {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

/* Fix pour mobile - éviter les problèmes de viewport */
@supports (height: 100dvh) {
    .mobile-height {
        height: 100dvh;
    }
}

@supports not (height: 100dvh) {
    .mobile-height {
        height: calc(100vh - env(safe-area-inset-bottom, 0px));
    }
}