@plugin "flowbite/plugin";

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

@import './typo.css';
@import './widget.css';
@import './form.css';
@import './menu.css';
@import './smart-ethic.css';
@import './modal-action.css';

:root{
    --shadow-mid: rgb(149, 149, 149);
    --shadow-low: rgb(194, 194, 194);
}

@layer base {
    html, body{
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        @apply text-dark text-sm;
        font-family: 'Inter', sans-serif;
    }

    h1 {
        @apply text-4xl md:text-5xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h2 {
        @apply text-2xl md:text-3xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h3 {
        @apply text-xl md:text-2xl font-bold;
        font-family: 'Zilla', sans-serif;
    }

    h4 {
        @apply text-lg md:text-xl font-bold;
    }

    h5 {
        @apply font-semibold text-black
    }

    label {
        @apply text-sm font-medium;
    }



    table{
        @apply w-full text-left;
    }

    thead{
        @apply text-xs text-sm;
    }

    table thead tr th{
        @apply px-6 py-3;
    }
    
    table tbody tr{
        @apply border-b items-center;
    }

    table tbody tr th, table tbody tr td{
        @apply px-6 py-2;
        width: min-content;
    }

    article{
        @apply p-4;
    }

    footer{
        @apply bg-dark-light;
    }
    
    svg{
        @apply w-[25px] h-[25px];
    }

    .svg-icon{
        @apply p-2 rounded-[30px] duration-[0.15s];
    }

    .svg-icon:hover{
        @apply duration-[0.15s] cursor-pointer bg-greylow;
    }

    .svg-icon:hover svg{
        @apply duration-[0.15s] fill-greylow;
    }

    .svg-icon:active{
        @apply duration-[0.15s] bg-greymid;
    }

    .svg-icon:active svg{
        @apply duration-[0.15s] fill-greymid;
    }

    sub{
        @apply z-[1];
    }
}


@layer utilities {
    .small-card {
        @apply flex flex-col rounded-xl border border-border bg-white;
    }

    .medium-card {
        @apply p-4 flex flex-col gap-4 rounded-lg border border-border bg-white;
    }

    .big-card {
        @apply p-6 flex flex-col gap-6 rounded-lg border border-border bg-white;
    }

    .secondary-text {
        @apply text-secondary text-sm;
    }

    .gradient-text {
        @apply bg-gradient-to-r from-primary-light to-primary-dark text-transparent bg-clip-text;
    }

    .header-link {
        @apply text-secondary/80 hover:text-dark text-sm font-medium;
    }


    .shadow-5-5-5{
        box-shadow: 5px 5px 5px var(--shadow-mid);
    }
    
    .strong-shadow{
        box-shadow: 0px 2px 5px var(--shadow-mid);
    }

    .mid-shadow{
        box-shadow: 0px 4px 7px var(--shadow-low);
    }

    /* Barre de défilement */
    
    .scrollbar-thin{
        scrollbar-width: thin;
    }


    .badge-warning {
        @apply bg-yellow text-dark/80 text-xs p-2 rounded-lg font-bold;
    }

    .badge-primary {
        @apply bg-primary-light text-dark/80 text-xs p-2 rounded-lg font-bold;
    }

    .badge-error {
        @apply bg-error text-dark/80 text-xs p-2 rounded-lg font-bold;
    }
    
}


@layer components {
    .dev-background-implementer{
        min-height: 100vh;
        background: linear-gradient(to bottom right, #DEFFE3, #B6FBB6);
    }

    /* Boutons */

    .btn {
        @apply py-2 px-4 rounded-lg text-sm font-semibold;
    }

    .btn-primary {
        @apply bg-primary text-white hover:bg-primary-dark  py-2 px-4 rounded-lg text-sm font-semibold;
    }

    .btn-secondary {
        @apply bg-dark text-white hover:bg-dark-light  py-2 px-4 rounded-lg text-sm font-semibold;
    }

    .btn-tertiary {
        @apply border border-border text-dark;
    }

    .btn-danger {
        @apply bg-error text-black hover:bg-error/80  py-2 px-4 rounded-lg text-sm font-semibold;
    }

    /* Pastilles */

    .lozenge{
        @apply inline-flex items-center justify-center;
        @apply  w-5 h-5 ml-1;
        @apply rounded-[50%];
        
        background-color: red;
    }

    .rectangular-lozenge{
        @apply inline-flex items-center justify-center;
        @apply px-1;
        @apply rounded-[5px];
    }

    .rectangular-lozenge.accomplished{
        @apply bg-accomplished;
    }
    .rectangular-lozenge.in-progress{
        @apply bg-in-progress;
    }
    .rectangular-lozenge.in-beginning{
        @apply bg-in-beginning;
    }
    .rectangular-lozenge.not-started{
        @apply bg-not-started;
    }
    .rectangular-lozenge.irrelevant{
        @apply bg-irrelevant;
    }


    /* Liens de navigation */
    .nav-link {
        @apply px-10 py-2 hover:border-b hover:border-primary hover:text-primary hover:font-bold;
    }

    .nav-link-active {
        @apply border-b border-primary font-bold text-primary;
    }

    .text-fields {
        background-color: #f9fafb; 
        border: 1px solid #d1d5db; 
        color: #111827; 
        font-size: 0.875rem;
        border-radius: 0.5rem; 
        display: block; 
        width: 100%; 
        padding: 0.625rem; 
    
    }

    /* Eléméents basiques */

    .dividing-line{
        @apply border-border my-2;
    }
}