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

@layer base {
    html {
        @apply font-light dark:text-gray-400
    }

    p {
        @apply text-sm font-light text-gray-500 dark:text-gray-400
    }

    a {
        @apply font-medium text-primary-600 hover:underline dark:text-primary-500
    }

    h1 {
        @apply mb-2 text-base md:text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white
    }

    h2 {
        @apply mb-2 text-base md:text-lg font-bold leading-tight tracking-tight text-gray-800 md:text-xl dark:text-primary-200
    }

    table.sticky-header thead th {
        @apply sticky top-0 table-cell
    }
}


@layer components {

    .notice {
        @apply max-w-screen-xl mx-auto
    }

    .notice .alert {

    }

    input::file-selector-button {
        @apply text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800 border-0
    }

    a.new-button {
        @apply text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800
    }

    .app-screen {
        @apply max-w-screen-xl mx-auto min-h-app p-4 mb-10 dark:bg-gray-900
    }

    header li.active a {
        text-decoration: underline;
        @apply text-primary-200 dark:text-white
    }

    header li.not-active a {
        @apply text-gray-700 dark:text-gray-400
    }

    .container {
        @apply w-full bg-white rounded-lg shadow dark:border dark:bg-gray-800 dark:border-gray-700 p-6
    }

    .user-form {
        @apply flex flex-col items-center justify-center px-6 py-8 my-20 py-0
    }

    .user-form form {
        @apply space-y-4 md:space-y-6
    }

    .user-form .form-container {
        @apply w-full bg-white rounded-lg shadow dark:border md:mt-0 max-w-[500px] dark:bg-gray-800 dark:border-gray-700 p-6
    }

    .user-form form textarea,
    .user-form form input[type=email],
    .user-form form input[type=text],
    .user-form form input[type=date],
    .user-form form input[type=number],
    .user-form form input[type=password] {
        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
    }

    .user-form form input[type=checkbox] {
        @apply w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-2 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800 mr-2
    }

    .user-form form input[type=radio] {
        @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600
    }

    .user-form form select {
        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 mt-0
    }

    /* Weird override */
    .app-screen .user-form form select:not([hidden]) {
        @apply my-0
    }


    form label {
        @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white
    }

    form label.secondary {
        @apply text-gray-500 dark:text-gray-300
    }

    .user-form form input[type=submit] {
        @apply w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mb-4
    }

    .button-group-button {
        @apply px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white
    }

    .button-group-button:first-child {
        @apply rounded-s-lg
    }

    .button-group-button:last-child {
        @apply rounded-e-lg
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */