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

@font-face {
    font-family: 'MuktaMahee Regular';
    src: url('../fonts/Mukta_Mahee/MuktaMahee-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MuktaMahee ExtraBold';
    src: url('../fonts/Mukta_Mahee/MuktaMahee-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Kalnia Glaze';
    src: url('../fonts/Kalnia_Glaze/KalniaGlaze-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Mirza';
    src: url('../fonts/Mirza/Mirza-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Oleo Script';
    src: url('../fonts/Oleo_Script/OleoScript-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.MuktaMaheeExtrabold { font-family: 'MuktaMahee ExtraBold', sans-serif; }
.MuktaMaheeRegular { font-family: 'MuktaMahee Regular', sans-serif; }
.kalniaGlaze {font-family: 'Kalnia Glaze', sans-serif;}
.mirza {font-family: 'Mirza', sans-serif;}
.oleoScript {font-family: 'Oleo Script', sans-serif;}

p, li, td, .communFont {
    @apply text-[#2f3b39] dark:text-blue-400;
    font-family: 'MuktaMahee Regular', 'sans-serif';
}

main, table {@apply bg-light dark:bg-dark;}

.img-transition {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
.img-transition[src] { opacity: 1; }

.triangle-up {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid;
    margin-left: 6px;
    display: inline-block;
    transform: translateY(5.5px);
}
.triangle-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid;
    margin-left: 6px;
    display: inline-block;
    transform: translateY(5.5px);
}
  
/* Layout */
/* Progress bar entre les pages */
#nprogress .bar {
    background: #EA580C !important;
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}
#nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #EA580C, 0 0 5px #EA580C;
    opacity: 1;
    transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {display: none; /* Supprime le spinner */ }
 
.flash-success, .flash-error {
    transition: opacity 3s ease-in-out;
    pointer-events: none;
}

.fade-out {opacity: 0;}

.custom-underline {
    text-decoration: underline;
    text-decoration-color: #a300b2;
    text-underline-offset: 3px;
}

button{ border-radius: 1em; }

table tr:hover span, table tr:hover td{ color: black !important; }

th, tr:hover{ @apply bg-orangeTheme !important; }

h1, h2 {
    font-family: 'MuktaMahee ExtraBold', sans-serif;
    color: #5d0055;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #5d0055;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    animation-name: backInDown;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.25, 0.85, 0.25, 1);
}

.dark h1, 
.dark h2 {
    color: #EA580C;
    text-decoration-color: #6200a3;
    text-underline-offset: 2px;

}

h2{
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
    text-underline-offset: 1px;
}

h3{ font-family: 'Oleo Script', sans-serif; }

.bg_img {
    background: url('/img/hut.png') fixed center no-repeat;
    background-size: cover;
}

.open-menu {
    width: 112px;
    position: absolute;
    right: 3px;
    top: 22px;
    background-color: #002ccd;
    text-align: left;
    z-index: 100;
    border-radius: 1em 0 1em 1em;
    overflow: hidden;
    border-width: 2px;
    border-color: theme('colors.orangeTheme');
}

.btn .block{border-radius: 0 !important;}

.open-menu a:hover {
    background-color: #0032e4;
    color: rgb(50, 255, 0);
}

a:hover {z-index: 50;}

.highlight{
    color: '#17fae8';
    font-weight: 700;
}

.btn {
    font-family: 'MuktaMahee Regular', sans-serif; 
    background-color: #002ccd;
    color: #ccc;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    box-shadow: inset 0px 0px 6px 3px rgba(0, 0, 255, 0.9);
}

.btn:hover {
    color: #98FF98;
    background-color: #0032e4;
    box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.4);
}

.btn-disabled {
    cursor: default;
    opacity: 0.75;
    background-color: #4b5563;
    color: #9ca3af;
    box-shadow: inset 0px 0px 6px 3px rgba(31, 31, 31, 0.9);
}
.btn-disabled:hover {
    color: #9ca3af !important;
    background: #2c2c2c !important;
    box-shadow: none !important;
}
.red-shadow{box-shadow: inset 0px 0px 6px 3px rgba(96, 0, 0, 0.9);}

.full-nav{ font-size: 1.15em; }

.deconnection{ 
    background-color: #380f61;
    color: black;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    border-radius: 0.5rem;
    box-shadow: inset 0px 0px 6px 3px rgba(52, 0, 71, 0.9);
}
.deconnection:hover{
    background-color: #3c0040;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    @apply text-orangeTheme;
}

.link-active { 
    @apply bg-orange-500 dark:bg-orange-600 !important;
    box-shadow: inset 0px 0px 6px 3px rgba(255, 153, 0, 0.9);
}

.link-active:hover { @apply hover:bg-orange-400 dark:bg-orange-500 !important; }

* {
    scrollbar-width: thin;
    scrollbar-color: #e0f900 #b07501; /* Couleur de la barre et de la piste */
    user-select: none;
    -webkit-user-drag: none; /* Désactiver le drag pour Safari/Chrome */
    user-drag: none;
}

label { @apply font-mirza -mb-1 ml-1;  }
.label {
    @apply font-mirza -mb-1 ml-1 text-white;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="file"],
input,
textarea,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    @apply w-full p-3 border-blue-500 dark:border-orange-500 bg-inputsLight dark:bg-inputsDark dark:text-[#ccc] font-semibold rounded-md shadow-sm focus:ring focus:outline-none focus:ring-blue-400 dark:focus:ring-orange-400;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #111827 inset !important;
}

input[type="checkbox"] {
    @apply h-4 w-4 border-orange-500 rounded-full text-blue-500 !important;
}
input[type="checkbox"]:not(:checked) {
    background-color: #bfbfbf !important;
    @apply bg-gray-500 dark:bg-[#111827] focus:ring focus:outline-none focus:ring-blue-400 dark:focus:ring-orange-400 !important;
}

.custom-scrollbar {
    overflow-y: hidden;
    scrollbar-width: none;
}
.custom-scrollbar::-webkit-scrollbar { display: none; }

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {background: #b07501; /* Couleur de la piste (fond) */}
::-webkit-scrollbar-thumb {
    background-color: #e0f900; /* Couleur de la barre */
    border: 2px solid #b07501; /* Optionnel : bordure autour de la barre */
}
::-webkit-scrollbar-thumb:hover {background: #b07501; /* Couleur de la barre au hover */}
.no-scrollbar::-webkit-scrollbar {display: none;}
/* Masquer la scrollbar pour Firefox */
.no-scrollbar {scrollbar-width: none;}
input[type="search"] {
    -webkit-appearance: none; /* Enlève l'apparence par défaut sur Chrome */
    border-radius: 20px; /* Arrondir la barre de recherche */
    padding: 10px; /* Ajouter du padding pour un meilleur rendu */
    border: 1px solid #c98600; /* Optionnel : bordure personnalisée */
    outline: none; /* Enlève l'outline par défaut */
    width: 100%; /* Pour remplir l'espace disponible (optionnel) */
    box-sizing: border-box; /* Assure que le padding n'affecte pas la largeur totale */
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; /* Supprimer le bouton d'annulation par défaut sur Chrome */
}
input[type="search"]:focus {
    border-color: #e0f900; /* Couleur de la bordure au focus */
    box-shadow: 0 0 5px #e0f900; /* Optionnel : ajouter un effet de focus */
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #9ca3af inset !important;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #111827 inset !important;
    -webkit-text-fill-color: #ccc !important;
}

/* footer */
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease;}
.fade-enter, .fade-leave-to {opacity: 0;}

footer {
    background: transparent;
    position: fixed;
    bottom: 6px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    @apply text-orange-600;
}

/* Welcome */
.transition-opacity { opacity: 0; }

/* account deleted */
.account-deleted-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    opacity: 1;
    transition: opacity 1s ease-out;
}
.account-deleted-message[style*="display: none"] { opacity: 0; }

/* eyes */
.eyes-container {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 8px;
}
@property --eyelid {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
@property --eyelid2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
.eyes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    div {
        position: relative;
        width: 34px;
        aspect-ratio: 1.3;
        background: white;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        &:before,&:after {
            content: '';
            position: absolute;
            width: 110%;
            height: 300%;
            left: 50%;
            animation: eyelid 6s ease-in-out infinite;
            z-index: 1;
        }
        &:before {
            top: 0;
            border-radius: 0% 0% 40% 40%;
            transform: translateY(var(--eyelid)) translateX(-50%);
            border-bottom: 40px solid #141a23;
        }
        &:after {
            bottom: 0;
            border-radius: 40% 40% 0% 0%;
            transform: translateY(var(--eyelid2)) translateX(-50%);
            border-top: 40px solid #141a23;
        }
        i {
            position: absolute;
            width: 22px;
            aspect-ratio: inherit;
            background: #EA580C;
            border-radius: inherit;
        }
    }
}
@keyframes eyelid {
    0% {
        --eyelid: -50%;
        --eyelid2: 50%;
    }
    3% {
        --eyelid: 0%;
        --eyelid2: 0%;
    }
    6% {
        --eyelid: -50%;
        --eyelid2: 50%;
    }
    9%,100% {
        --eyelid: 0%;
        --eyelid2: 0%;
    }
}
/* fin Welcome */


/* gallery */
.gallery img {transition: transform 0.6s ease;}


/* Book */
.option_hover {transition: transform 0.3s ease;}
.option_hover:hover {transform: scale(1.02);}

.one-column .option_hover {transform-origin: center;}

.two-columns .option_hover:nth-child(even) {transform-origin: right;}

.two-columns .option_hover:nth-child(odd) {transform-origin: left;}

.three-columns .option_hover:nth-child(3n + 1) {transform-origin: left;}

.three-columns .option_hover:nth-child(3n + 2) {transform-origin: center;}

.three-columns .option_hover:nth-child(3n) {transform-origin: right;}

.vuecal__cell-date {
  color: white;
  background: blue;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.15rem;
  font-family: 'Lucida Handwriting', cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
}
.vuecal__cell--before-min .vuecal__cell-content .vuecal__cell-date{
  color: #ccc; 
  background: rgb(144, 0, 0);
  font-weight: 400;
  font-size: 1.15rem;
}

.selected-range {
  background: rgba(0, 150, 136, 0.8);
  border: 3px solid #009688;
  color: rgb(104, 252, 104);
}

.vuecal__cell--disabled { cursor: default !important; }

.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {scrollbar-width: none;}
.hide-scrollbar {-ms-overflow-style: none;}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin {animation: spin 1s linear infinite;}

/* .vuecal__cell-events-count{display: none;} */
/* .vuecal__cell--selected {;} */
/* .vuecal__cell--out-of-scope{;} */
/* .vuecal__cell--disabled {;} */

/* fin Book */


/* transition */
.fade-slide-enter-active, .fade-slide-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-slide-enter-from, .fade-slide-enter, .fade-slide-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
.fade-slide-enter-to, .fade-slide-leave-from {
    opacity: 1;
    transform: translateY(0);
}
.fade-slide-enter-active, .fade-slide-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}