@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed');

@import "pagy.tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
   .title {
       @apply text-center text-3xl md:text-4xl font-bold dark:text-gray-300;
   }
    .title-small {
       @apply text-center font-medium text-xl dark:text-gray-50;
   }
    .text-content {
       @apply mt-1 text-sm text-gray-500 dark:text-gray-300;
   }
    .button {
        @apply flex-shrink-0 cursor-pointer text-gray-50 dark:text-gray-100 bg-gray-900 hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-1 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:hover:bg-gray-700 dark:focus:ring-gray-800 border border-gray-300 dark:border-gray-500;
    }
    .button-filter {
        @apply flex-shrink-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 border border-gray-300 dark:border-gray-500 hover:bg-blue-500 dark:hover:bg-blue-900;
    }
    .button-filter-status {
        @apply flex-shrink-0 cursor-pointer font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 transition-colors duration-200;
    }
    .button-red {
        @apply flex-shrink-0 cursor-pointer text-gray-50 dark:text-red-100 bg-red-700 hover:bg-red-900 hover:text-white focus:outline-none focus:ring-1 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:hover:bg-red-900 dark:focus:ring-gray-800 border border-red-300 dark:border-red-500;
    }
    .button-link {
        @apply block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700;
    }
    .button-link-red {
        @apply block py-2 px-3 text-red-800 border-b border-gray-100 hover:bg-red-50 md:hover:bg-transparent md:border-0 md:hover:text-red-600 md:p-0 dark:text-red-400 md:dark:hover:text-red-500 dark:hover:bg-red-500 dark:hover:text-red-50 md:dark:hover:bg-transparent dark:border-gray-700;
    }
    .button-decoration-red {
        @apply block px-3 text-red-600 dark:text-red-500 font-bold hover:underline;
    }
    .button-decoration {
        @apply flex-shrink-0 text-gray-500 dark:text-gray-400 hover:underline hover:text-blue-700 dark:hover:text-blue-500;
    }
    .button-link-tiny {
        @apply block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 dark:text-white hover:text-blue-600 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-blue-500 dark:border-gray-700;
    }
    .button-toggle-dark-icon {
        @apply text-gray-950 dark:text-gray-50 hover:text-blue-600 dark:hover:text-blue-500 py-2 px-3 md:p-0 mt-0.5;
    }
    .button-menu-icon {
        @apply inline-flex items-center p-1 mr-1 justify-center text-sm text-gray-950 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-50 dark:hover:bg-gray-700 dark:focus:ring-gray-600;
    }
    .button-increment {
        @apply flex items-center justify-center gap-x-4 rounded-lg bg-transparent h-28 border border-gray-300 dark:border-gray-500 hover:scale-105 transition-transform duration-300 ease-in-out;
    }
    .table-scroll {
        @apply overflow-auto border border-gray-200 dark:border-gray-700 md:rounded-lg;
    }
    .table {
        @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
    }
    .thead {
        @apply bg-gray-50 dark:bg-gray-800;
    }
    .th {
        @apply py-3.5 px-4 text-sm font-bold text-left text-gray-500 dark:text-gray-200;
    }
    .tbody {
        @apply bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900;
    }
    .td {
        @apply px-4 py-4 text-sm font-normal text-gray-600 dark:text-gray-400 whitespace-nowrap;
    }
    .label-green {
        @apply inline px-3 py-1 text-sm font-normal rounded-full text-emerald-500 gap-x-2 bg-emerald-100/60 dark:bg-gray-800;
    }
    .label-gray {
        @apply inline px-3 py-1 text-sm font-normal text-gray-500 bg-gray-100 rounded-full dark:text-gray-400 gap-x-2 dark:bg-gray-800;
    }
    .label-blue {
        @apply inline px-3 py-1 text-blue-600 bg-blue-100 rounded-full dark:bg-gray-800 dark:text-blue-400;
    }
    .label-red {
        @apply inline px-3 py-1 text-xs text-red-600 bg-red-100 rounded-full dark:bg-red-800 dark:text-red-400;
    }
    .label {
        @apply block mb-2 text-sm text-gray-600 dark:text-gray-200;
    }
    .input {
        @apply block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-lg dark:placeholder-gray-600 dark:bg-transparent dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40;
    }
    .card-form {
        @apply max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-900 dark:border dark:border-gray-500;
    }
    .card {
        @apply border border-gray-200 rounded-lg text-gray-500 dark:text-gray-400 p-4 shadow-lg flex flex-col justify-between h-full;
    }
    .card-archive {
        @apply flex items-center justify-between gap-4 p-3 bg-gray-50 border dark:border-gray-500 dark:bg-gray-800 rounded-md shadow-sm hover:ring-1 hover:ring-gray-300 dark:hover:ring-gray-400;
    }
    .alert {
        @apply text-center mb-2 text-red-600 bg-red-100 dark:bg-transparent border dark:border-red-700 dark:text-red-700 text-sm p-2 rounded-lg;
    }
    .dropdown {
        @apply min-w-80 max-w-full overflow-y-auto sm:max-w-lg bg-white dark:bg-gray-800 rounded-lg min-h-20 max-h-96 p-2 border border-gray-400 dark:border-gray-700;
    }
    .button-accordion {
        @apply flex w-full items-center justify-between px-4 py-3 text-left font-semibold bg-gray-100 dark:bg-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors;
    }
    .accordion-disabled {
        @apply cursor-not-allowed text-gray-900 bg-gray-300 hover:bg-gray-300;
    }
    .line {
        @apply border-b border-gray-600 dark:border-gray-500;
    }
    .button-close {
        @apply absolute top-3 right-3 text-gray-400 dark:text-gray-400 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-gray-100 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center;
    }
    .overlay {
        @apply fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur transition-opacity duration-300 ease-in-out;
    }
    .overlay-right {
        @apply fixed z-50 w-full h-full top-0 left-0 bg-black bg-opacity-40;
    }
    .modal-tiny {
        @apply relative w-full z-50 max-w-lg mx-4 p-4 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 rounded-lg shadow transition-transform duration-300 ease-in-out h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal {
        @apply relative w-full z-50 max-w-screen-md mx-4 p-4 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 rounded-lg shadow transition-transform duration-300 ease-in-out h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal-large {
        @apply relative w-full z-50 max-w-screen-xl mx-4 p-4 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 rounded-lg shadow transition-transform duration-300 ease-in-out max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal-right {
        @apply fixed top-0 right-0 z-50 w-11/12 sm:w-3/6 lg:w-2/6 h-full bg-gray-50 dark:bg-gray-900 overflow-y-scroll shadow-lg dark:border-l dark:border-gray-600 flex flex-col ease-in-out duration-300 p-5 translate-x-full;
    }
    .close-modal {
        @apply px-4 py-2 bg-gray-300 dark:bg-gray-900 dark:border dark:border-gray-500 dark:hover:bg-gray-800 rounded hover:bg-gray-400;
    }
}