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

@layer components {
    /* Global */
    html {
        @apply h-screen;
    }

    body {
        @apply min-h-screen text-gray-600 mb-16 md:mb-0;
        @apply dark:text-gray-300 dark:bg-gray-900;
        margin-top:65px;
    }

    h1, h2, h3 {
        @apply text-cyan-700 font-bold uppercase mb-3;
    }

    h1 {
        @apply text-4xl;
    }
    
    h2 {
        @apply text-3xl;
    }  

    h3 {
        @apply text-2xl;
    }  

    p {
        @apply mb-1;
    }

    .fixed-top {
        @apply fixed w-full z-10 top-0;
    }

    .fixed-bottom {
        @apply fixed w-full z-10 bottom-0;
    }

    .container {
        @apply px-4 mx-auto md:px-0;
    }


    /* Section nav */
    .navbar {
        @apply flex flex-wrap items-center justify-between mx-auto;
        @apply bg-white border-gray-300;
        @apply dark:bg-gray-800 dark:border-slate-700;
    }
    .navbar-brand {
        @apply py-3 flex items-center;
    }
    .navbar-brand img {
        @apply h-8 mr-3;
    }
    .navbar-item {
        @apply flex flex-col gap-x-2 p-3 border-t-2 text-center;
        @apply md:flex-row md:text-left md:border-0 md:border-t-0 md:border-b-2;
        @apply text-gray-900 hover:text-cyan-600 border-transparent;
        @apply dark:text-white;
    }
    .navbar-item > svg {
        @apply w-6 h-6 mx-auto;
    }
    .navbar-item.active  {
        @apply border-cyan-600;
    }
    .navbar-item.active > svg {
        @apply text-cyan-600;
    }
    .navbar-item.active > span {
        @apply text-sm text-center;
        @apply text-cyan-600;
    }
    
    #navheader {
        @apply navbar fixed-top md:relative border-b  md:border-0;
    }
    #navheader div:first-child {
        @apply container mx-auto flex justify-between items-center;
    }
    #navheader .navbar-brand span {
        @apply font-semibold whitespace-nowrap uppercase dark:text-white
    }
    #navheader ul {
        @apply font-medium flex md:p-0 bg-inherit md:flex-row md:space-x-8 md:mt-0 md:border-0 dark:bg-inherit;
    }
    #navheader ul li a {
        @apply block text-gray-900 md:bg-transparent md:text-gray-900 md:dark:text-white md:border-0 md:hover:text-cyan-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:text-white md:dark:hover:bg-transparent;
    }
    #navheader ul li a svg{
        @apply w-6 h-6;
    }

    #navmenu {
        @apply z-50 navbar fixed-bottom md:relative border-t md:border-0 md:border-b;
    }
    #navmenu ul {
        @apply container mx-auto font-medium bg-white grid grid-flow-col md:justify-start md:p-0 md:flex-row md:space-x-8 md:mt-0 md:border-0 dark:bg-inherit;
    }
    #navmenu ul li a {
        @apply navbar-item;
    }

    /* Section Page */
    section {
        @apply container pb-40 md:pb-4 pt-2 md:pt-4 mx-auto;
    }

    .section-title {
        @apply flex gap-1 py-2 mb-4 border-b justify-between md:justify-start md:gap-2 items-center;
        @apply border-gray-600 text-gray-600;
        @apply dark:border-gray-300 dark:text-gray-300;
    }
    .section-title svg {
        @apply w-6 h-6;
        @apply text-gray-600;
        @apply dark:text-gray-300;
    }
    .section-title span {
        @apply uppercase;
    }

    .matrice {
        @apply flex flex-wrap ;
    }
    .matrice a {
        @apply flex flex-col items-center max-w-sm bg-inherit p-6;
    }    
    .matrice a img {
        @apply w-16 h-16 mb-3 rounded-full shadow-lg;
    }
    .matrice a p {
        @apply mb-2 font-bold tracking-tight text-center;
        @apply text-gray-900;
        @apply dark:text-white;
    }

    /* button */
    .btn {
        @apply font-medium rounded-lg text-sm text-center px-5 py-2.5 mr-2 mb-2;
    }
    
    .btn-primary {
        @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300  dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
    }

    .btn-alternative {
        @apply text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
    }

    .btn-dark {
        @apply text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700;
    }

    .btn-light {
        @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700;
    }

    .btn-success {
        @apply focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
    }

    .btn-danger {
        @apply focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900;
    }

    .btn-warning {
        @apply focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900;
    }

    /* SectionAction */
    .btn-dial {
        @apply fixed md:static md:inline-block right-6 bottom-6 md:bottom-6 z-40;
    }
    .btn-add {
        @apply md:btn btn-success;
        @apply flex justify-center items-center w-[52px] h-[52px] md:w-full md:h-auto rounded-full md:rounded-lg shadow-sm;
        @apply hover:text-white !important;
    }
    .btn-add svg {
        @apply w-6 h-6 md:hidden;
        @apply hover:text-white;
    }
    .btn-add span {
        @apply hidden md:inline-block;
    }

    .btn-submit {
        @apply md:btn btn-success rounded-none md:rounded py-4 md:py-2 right-0 w-full md:w-fit fixed md:static bottom-0 block md:inline-block;
        @apply h-20 md:h-auto z-40;
        @apply hover:text-white !important;
    }

    .btn-delete {
        @apply ml-auto btn btn-danger mr-0;
        @apply hover:text-white !important;
    }

    .btn-cancel {
        @apply btn btn-alternative;
        @apply hover:text-gray-900 !important;
        @apply dark:hover:text-white !important;
    }

    /* Link */
    a {
        @apply cursor-pointer;
    }

    a:hover:not(.btn) {
        @apply hover:text-cyan-700;
    }


    /* Form */
    .form-group {
        @apply mb-3;
    }

    .form-group label,
    .form-group input,
    .form-group select,
    .form-group textarea {
        @apply block;
    }

    .form-group label {
        @apply font-semibold py-1;
    }

    .form-group label.required::after {
        content: ' (requis)';
        @apply text-sm font-normal text-red-500;
    }

    .form-action {
        @apply flex flex-wrap;
    }

    form {
        @apply relative;
    }
    form label {
        @apply w-full;
    }

    form label.required{
        @apply font-bold;
    }

    form label.required:after{
        content:" *";
    }    

    form input, form textarea, form select {
        @apply w-full mb-3 text-gray-900;
        border-radius: 0.25rem !important;
    }

    /* Section table */
    .table-container {
        @apply overflow-x-auto;
    }
    table {
        @apply w-full text-sm text-left;
    }
    table thead {
        @apply text-xs uppercase bg-gray-50 dark:bg-gray-700;
    }
    table thead th {
        @apply px-6 py-3;
    }
    table tbody tr {
        @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700;
    }
    table tbody tr th {
        @apply px-6 py-4 font-medium whitespace-nowrap;
    }
    table tbody tr td {
        @apply px-6 py-4;
    }
    table th.optional {
        @apply hidden md:block;
    }
    table td.optional {
        @apply hidden md:block;
    }

    /* Section alert */
    .alert {
        @apply p-4 mb-4 text-sm rounded-lg font-medium text-gray-800 bg-gray-50 border border-gray-500;
    }

    .alert-info {
        @apply text-blue-800 bg-blue-50 dark:bg-blue-200 border border-blue-500 dark:border-blue-800;
    }

    .alert-danger {
        @apply text-red-800 bg-red-50 dark:bg-red-200 border border-red-500 dark:border-red-800;
    }

    .alert-success {
        @apply text-green-800 bg-green-50 dark:bg-green-200 border border-green-500 dark:border-green-800;
    }

    .alert-warning {
        @apply text-yellow-800 bg-yellow-50 dark:bg-yellow-100 border border-yellow-500 dark:border-yellow-800;
    } 
}




.bigtile, .tile, .tilenone {
    height: 200px; 
    background-position: center;
    background-size:cover;
    border: 1px red solid;
}

.tile, .tilenone { width: 33.33333333333333333333333% }
.tilenone {border: none;}

.sortable > span {
    -webkit-touch-callout:none;
    -ms-touch-action:none; touch-action:none;
    -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
span.ui-sortable-placeholder { background-color:#cdcdcd !important; }

#waiting {
    display:none;
}
.loader {
	border-top-color: #3498db;
	-webkit-animation: spinner 1.5s linear infinite;
	animation: spinner 1.5s linear infinite;
}
@-webkit-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#app {
    height: 100%;
}