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

@layer components {
  .ui-page {
    @apply min-h-screen bg-gray-50 text-gray-900 antialiased dark:bg-gray-900 dark:text-gray-100;
  }
  .ui-dashboard-main {
    @apply min-h-screen p-4 pt-24 pb-24 md:ml-64 md:pt-20;
  }
  .ui-page-title {
    @apply text-3xl font-bold tracking-tight text-gray-900 dark:text-white;
  }
  .ui-page-description {
    @apply mt-2 text-gray-600 dark:text-gray-300;
  }
  .ui-button-primary, .ui-button-secondary, .ui-button-danger {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium focus:outline-none focus:ring-4 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .ui-button-primary {
    @apply bg-primary-700 text-white hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
  }
  .ui-button-secondary {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
  }
  .ui-button-danger {
    @apply bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:focus:ring-red-800;
  }
  .ui-nav-link {
    @apply flex w-full items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:text-white dark:hover:bg-gray-700;
  }
  .ui-nav-current {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-100;
  }
  .ui-nav-icon {
    @apply h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400;
  }
  .ui-notice {
    @apply mb-4 rounded-lg border p-4 text-sm;
  }
  .ui-notice-success {
    @apply border-primary-200 bg-primary-50 text-primary-800 dark:border-primary-800 dark:bg-primary-900 dark:text-primary-100;
  }
  .ui-notice-error {
    @apply border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-900 dark:text-red-100;
  }
  .ui-form label {
    @apply mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100;
  }
  .ui-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
  .ui-form select, .ui-form textarea {
    @apply block w-full max-w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-600 focus:ring-primary-600 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 dark:focus:ring-primary-500;
  }
  .ui-form input[type=checkbox], .ui-form input[type=radio] {
    @apply h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700;
  }
  .ui-form input[type=checkbox] + label, .ui-form input[type=radio] + label {
    @apply ml-2 inline;
  }
  .ui-form input[type=file] {
    @apply block max-w-full text-sm text-gray-700 dark:text-gray-200;
  }
  .ui-form [aria-invalid=true] {
    @apply border-red-500;
  }
  .ui-skip-link {
    @apply sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[10000] focus:rounded-lg focus:bg-primary-700 focus:p-3 focus:text-white;
  }
}
/*
 * 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.
 *


 */