@import "pagy.css";


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

@layer components {

    /* FORM */
    .btn-primary {
        @apply cursor-pointer inline-flex justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
    }

    .btn-secondary {
        @apply cursor-pointer inline-flex items-center rounded-md border border-green-600 bg-white px-4 py-2 font-medium text-green-600 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
    }

    .btn-tertiary {
        @apply cursor-pointer font-semibold text-green-600 hover:text-green-900 underline
    }

    .btn-quaternary {
        @apply cursor-pointer font-semibold text-xs text-cyan-700 hover:text-cyan-900 underline
    }

    .btn-danger {
        @apply cursor-pointer inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto
    }


    .label {
        @apply mb-1 block font-medium text-gray-700
    }

    .text-field {
        @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500;
    }

    .select {
        @apply block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm
    }

    .button-select {
        @apply flex justify-between space-x-1 items-center bg-white w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6
    }

    .button-filter {
        @apply flex justify-between space-x-1 items-center w-full px-2 py-1 text-sm font-medium bg-white text-slate-600 rounded-md border-gray-400 border border-dotted focus:ring-2 focus:ring-green-600
    }

    .text-area {
        @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm
    }

    .radio-button {
        @apply h-4 w-4 shrink-0 border-gray-300 text-green-600 focus:ring-green-500 cursor-pointer focus:ring-green-600 active:ring-2 active:ring-green-600 active:ring-offset-2
    }

    .checkbox {
        @apply h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500
    }

    /* GROUP BUTTONS */
    .group-button {
        @apply bg-white truncate relative inline-flex items-center border border-gray-300 px-4 py-2 text-sm font-medium focus:border-green-500 focus:z-10 focus:outline-none focus:ring-1 focus:ring-green-500
    }

    .group-button-default {
        @apply bg-white text-gray-700 hover:bg-gray-50
    }

    .group-button-active {
        @apply bg-green-600 text-white hover:bg-green-500
    }




    /* TABLE */
    table {
        @apply min-w-full divide-y divide-gray-300 overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg
    }

    thead {
        @apply bg-gray-50
    }

    thead>tr>th {
        @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900
    }

    tbody {
        @apply divide-y divide-gray-200 bg-white
    }

    tbody tr:nth-child(odd) {
        @apply bg-slate-50
    }

    tbody tr:nth-child(even) {
        @apply bg-white
    }

    td.td-primary {
        @apply text-sm font-medium pl-4 py-2
    }

    td.td-secondary {
        @apply text-sm px-3 py-4
    }

    tfoot tr {
        @apply mt-2 bg-gray-200 font-semibold
    }

    tfoot td {
        @apply relative whitespace-nowrap py-2 px-3 text-sm
    }


    /* LIST */
    ul.ul {
        @apply text-gray-700 my-2 marker:text-green-400 list-disc pl-5 space-y-3
    }

    ul.ul-danger {
        @apply text-gray-700 my-2 marker:text-red-400 list-disc pl-5 space-y-3
    }

    li.list-group.active {
        @apply text-white bg-green-500
    }

    ul li.striped:nth-child(odd) {
        @apply bg-slate-50 hover:bg-slate-100
    }

    ul li.striped:nth-child(even) {
        @apply bg-white hover:bg-slate-100
    }

    /* TEXT */
    .text-primary {
        @apply text-gray-900 font-medium
    }

    .text-secondary {
        @apply text-gray-500
    }

    .text-tertiary {
        @apply text-green-600
    }

    /* NAV */
    .nav-underline-item {
        @apply whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm;
    }

    .nav-underline-item-active {
        @apply border-green-500 text-green-600;
    }

    .nav-underline-item-inactive {
        @apply border-transparent text-gray-600;
    }

    /* Se hai configurato postcss-nested (o un preprocessore come SCSS), puoi utilizzare lo stile annidato: */
    .nav-underline-item:hover {
        @apply text-gray-700 border-gray-300;
    }

    /* TOOLTIP */
    /* .tooltip {
      @apply relative flex items-center group;
    }

    .tooltip-content {
      @apply absolute bottom-full mb-2 hidden group-hover:block bg-black text-white text-sm p-2 rounded;
    } */

}