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

/* Flash messages*/
.flash.alert {
  @apply text-red-700 bg-red-100 border-red-400;
}

.flash.notice {
  @apply text-blue-700 bg-blue-100 border-blue-400;
}

/* Buttons */
.btn {
  @apply flex items-center p-2 text-sm font-semibold rounded h-6;
}

.btn-danger {
  @apply text-white bg-red-500;
}

.btn-primary {
  @apply text-white bg-gray-900;
}

.btn-secondary {
  @apply text-gray-700 bg-gray-300;
}

.btn-green {
  @apply text-white bg-green-500;
}

.btn-blue:hover {
  @apply text-white bg-blue-700;
}

.btn-danger:hover {
  @apply text-white bg-red-700;
}

.btn-disabled {
    @apply bg-slate-300 text-gray-500 shadow outline-none appearance-none cursor-not-allowed;
}

.btn-selected {
  @apply text-white bg-gray-900
}

.btn-unselected {
  @apply bg-slate-100
}

.table-header {
  @apply px-6 py-1 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50;
}

.table-row {
  @apply h-3;
}

.table-cell {
  @apply px-6 py-1 text-sm leading-4 text-gray-500;
}

.page.current {
  @apply bg-gray-300;
}

.paginator-item {
  @apply px-4 py-2 text-sm font-medium leading-5 text-gray-700 bg-white;
}

/* Layouts */
.sidebar {
  @apply hidden md:flex sm:shrink-0;
}

.sidebar-mobile {
  @apply inset-0 z-40 flex;
}

.sidebar-item {
  @apply flex items-center px-4 py-2 font-semibold;
}

.sidebar-item.active {
  @apply flex items-center mx-4 my-2 font-semibold bg-gray-200 rounded;
}

.sidebar-item.inactive {
  @apply flex items-center mx-4 my-2 font-semibold bg-transparent;
}

.sidebar-item.inactive:focus {
  @apply flex items-center mx-4 my-2 font-semibold bg-gray-300 outline-none;
}

.navbar {
  @apply block px-1 bg-gray-100 border-b md:hidden;
}

/* Forms */
.form.label {
  @apply block my-2 text-xs font-bold tracking-wide text-gray-700;
}

.form.input {
  @apply w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none;
}

.form.input:focus {
  @apply w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow outline-none appearance-none;
}

.form-container {
  @apply grid w-full gap-4 md:w-1/3;
}

.form-input {
  @apply w-full px-3 py-2 mt-1 leading-tight text-gray-700 border rounded shadow appearance-none;
}

.form-input:disabled {
  @apply w-full px-3 py-2 mt-1 leading-tight text-gray-700 border rounded shadow outline-none appearance-none cursor-not-allowed;
}

.form-input:focus {
  @apply w-full px-3 py-2 mt-1 leading-tight text-gray-700 border rounded shadow outline-none appearance-none;
}

.form-select {
  @apply w-full px-3 py-2 leading-tight text-gray-700 rounded shadow;
}

.documents-buttons {
  @apply flex flex-col justify-between md:flex-row;
}

.card-product {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*
 * 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.
 *


 */