@config "../js/tailwind.admin.config.js";

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


.inputstyle {
    @apply dark:bg-dark-nextadmin-background-subtle text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted ring-nextadmin-border-default focus:ring-nextadmin-brand-default dark:focus:ring-dark-nextadmin-brand-default dark:ring-dark-nextadmin-border-strong block w-full rounded-md border-0 px-2 py-1.5 text-sm shadow-sm ring-1 ring-inset transition-colors duration-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:leading-6
}

#dashboard {

    @apply p-5;

    .info-boxes {
        @apply grid grid-cols-1 md:grid-cols-2 gap-12;

        > div {
            @apply p-4 bg-dark-nextadmin-background-subtle text-dark-nextadmin-content-inverted rounded-md shadow-sm;
        }

        .box-title {
            @apply text-xl font-medium text-white text-center mb-8;
        }

        .box-content {
            @apply text-2xl font-bold text-white text-center;
        }

        .box-subinfo {
            @apply text-sm font-medium text-gray-400 text-center mt-2;
        }
    }

    .text-danger {
        @apply text-sm font-medium text-white bg-red-400 rounded w-1/2 mx-auto p-4 text-center;
    }

    .text-success {
        @apply text-sm font-medium text-white bg-green-400 rounded w-1/2 mx-auto p-4 text-center;
    }

    .dashboard-top {
        @apply mb-10;

        .dashboard-title {
            @apply text-3xl font-bold text-white text-center mb-8;
        }
    }
}

.image-prerenderer {
    @apply w-1/4 mt-2 rounded;

    img {
        @apply w-full h-full;
        transition: transform 0.3s ease;
    }
}

.image-preview-form {
    @apply mx-auto bg-gray-800;
}

.preview-list {
    @apply w-1/3
}

.list-no-image {
    @apply text-center;
}

.passreset {
    @apply rounded-md bg-indigo-600 p-4 px-3.5 py-2.5 text-sm font-semibold
    text-white shadow-sm hover:bg-indigo-500 focus-visible:outline
    focus-visible:outline-2 focus-visible:outline-offset-2
    focus-visible:outline-indigo-600;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.progress-zone {
    @apply flex flex-col items-center justify-center;

    .progress-bar {
        @apply border rounded-full w-7 h-7 text-center;
        animation: spin 1s linear infinite;
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3490dc;
    }

    .progress-text {
        @apply text-sm font-medium text-gray-400 mt-2;
    }
}

.actions-box {
    @apply flex gap-4 mt-12 justify-center bg-gray-600 rounded p-6 flex-col text-center md:flex-row;
}

.action-btn {
    @apply bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold py-2 px-4 rounded focus-visible:outline
    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
}

.action-danger {
    @apply bg-red-400 hover:bg-red-500 text-white text-sm font-semibold py-2 px-4 rounded focus-visible:outline
    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-400;
}

.action-none {
    @apply bg-gray-300 hover:bg-gray-400 text-gray-700 text-sm font-semibold py-2 px-4 rounded focus-visible:outline
    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300 hover:cursor-no-drop;
}

.list-of-last-donations {
    @apply w-full;

    tr {
        @apply border-b border-gray-200 hover:bg-gray-100;
    }

    th {
        @apply text-center p-4 font-bold text-sm;
    }

    td {
        @apply px-4 py-2 text-sm text-center;
    }
}

.list-of-last-donations-title-box {
    @apply text-center text-xl font-bold p-4 text-white mb-2 mt-12 w-full bg-pink-600;
}