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

@keyframes slideUp {
  to { transform: translateY(-20rem); }
}

@layer base {
  html,
  body,
  #root {
    @apply min-h-full bg-gray-200;
  }
}

@layer components {
  .pending-approval-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 640px) {
    .pending-approval-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  input:disabled {
    @apply bg-gray-200 cursor-not-allowed;
  }

  .text-label {
    @apply inline-flex font-semibold rounded-full px-2 leading-5;
  }

  .table-th {
    @apply border-b text-xs leading-4 font-bold uppercase;
  }

  .na-cell {
    @apply text-xs text-gray-400 !important;
  }

  .field {
    @apply mb-5;
  }

  .field label, .field-label {
    @apply block text-sm text-gray-600 font-medium mb-2;
  }

  .field input, .field-input, .field select, .field textarea {
    @apply w-full appearance-none border border-gray-300 rounded-lg text-gray-700 leading-tight p-4;
  }

  .field input:focus, .field-input:focus, .field textarea:focus {
    @apply outline-none border-gray-300 ring ring-blue-300 ring-offset-1;
  }

  input[type="color"] {
    @apply bg-white p-3;

    -webkit-appearance: none;
    height: 54px;
  }

  input[type="color"]::-moz-color-swatch, input[type="color"]::-webkit-color-swatch-wrapper {
    @apply border-0;
  }

  .checkbox-collection {
    @apply flex flex-wrap items-center;
  }

  .checkbox-group {
    @apply flex items-center mr-6;

    padding: 0.25rem 0;
  }

  .checkbox-group input[type=checkbox] {
    @apply rounded p-2;
  }

  .checkbox-group label {
    @apply pl-2
  }

  .image-preview-container {
    @apply flex flex-col space-y-4 mb-5 md:flex-row md:space-x-4 md:space-y-0;
  }

  .image-preview {
    @apply object-contain bg-gray-200 border border-white appearance-none rounded-lg w-40 h-40;
  }

  .form-actions {
    @apply flex justify-between mt-6 pt-6 border-t-2 border-gray-200;
  }

  .form-actions .btn {
    @apply px-6;
  }

  .btn {
    @apply cursor-pointer inline-flex justify-center rounded-lg px-4 py-2 leading-6 font-medium bg-white text-sm;
    &:disabled {
      @apply opacity-50 cursor-not-allowed;
    }
  }

  .btn:focus {
    @apply outline-none;
  }

  .btn-default {
    @apply bg-gray-600 text-white;
  }

  .btn-default:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-default:hover {
    @apply bg-gray-700;
  }

  .btn-outline-default {
    @apply border border-gray-400 text-gray-600;
  }

  .btn-outline-default:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-outline-default:hover {
    @apply bg-gray-600 border-gray-600 text-white;
  }

  .btn-primary {
    @apply bg-blue-600 text-white shadow;
  }

  .btn-primary:focus {
    @apply ring ring-offset-1 outline-none;
  }

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

  .btn-outline-primary {
    @apply border border-blue-600 text-blue-600;
  }

  .btn-outline-primary:focus {
    @apply ring ring-offset-1 outline-none;
  }

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

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

  .btn-danger:focus {
    @apply ring ring-offset-1 outline-none;
  }

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

  .btn-outline-danger {
    @apply border border-red-600 text-red-600;
  }

  .btn-outline-danger:focus {
    @apply ring ring-offset-1 outline-none;
  }

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

  .btn-success {
    @apply bg-green-600 text-white shadow;
  }

  .btn-success:not(:disabled):focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-success:not(:disabled):hover {
    @apply bg-green-700;
  }

  .btn-outline-success {
    @apply border border-green-600 text-green-600;
  }

  .btn-outline-success:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-outline-success:hover {
    @apply bg-green-700 border-green-700 text-white;
  }

  .outline-btn {
    @apply border-blue-600 text-blue-600 border;
  }

  .alert-wrapper {
    @apply absolute flex items-center justify-center w-full top-0 p-4;
  }

  .alert {
    @apply flex bg-gray-700 text-white font-semibold rounded-full shadow-xl space-x-2 py-2 pl-4 pr-6;

    animation: slideUp 1s cubic-bezier(0.4, 0, 0.6, 1) 5s 1 forwards;
  }

  .alert-icon {
    @apply rounded-full px-2 py-1;
  }

  .alert-error .alert-icon {
    @apply bg-red-600;
  }

  .alert-info .alert-icon {
    @apply bg-blue-600;
  }

  .default-badge {
    @apply text-label text-xs bg-blue-500 text-white;
  }

  .yes-badge {
    @apply text-label text-xs bg-emerald-500 text-white;
  }

  .no-badge {
    @apply text-label text-xs bg-red-500 text-white;
  }

  .maybe-badge {
    @apply text-label text-xs bg-yellow-500 text-white;
  }

  .main-navbar-link {
    @apply flex flex-row items-center px-3 py-2 rounded-md tracking-wide text-gray-400 hover:bg-gray-900 hover:text-white;
    @apply lg:justify-center lg:px-2 xl:justify-start xl:px-3;
  }

  .main-navbar-link.active {
    @apply bg-gray-900 text-white;
  }

  .main-navbar-link span {
    @apply lg:hidden xl:inline;
  }

  .page-header {
    @apply flex items-center justify-between mb-4 xl:mb-8 gap-4;
  }

  .page-header h1 {
    @apply lg:text-2xl xl:text-3xl font-semibold leading-snug text-gray-800;
  }

  .page-header-actions {
    @apply flex flex-row items-center print:hidden ml-auto flex-wrap gap-1;
  }

  .client-tab {
    @apply text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-2 border-b-2 border-transparent transition-colors whitespace-nowrap;
  }

  .client-tab.active {
    @apply text-blue-600 border-blue-600;
  }

  .breadcrumbs {
    @apply flex flex-row items-center text-sm transition duration-200 ease-in-out text-gray-400 space-x-1;
  }

  .breadcrumbs a {
    @apply text-gray-700 hover:text-gray-900;
  }

  .page-filters {
    @apply flex flex-row justify-between items-end my-2 py-3 xl:my-3 xl:py-4 print:hidden;
  }

  .page-filters > form {
    @apply flex flex-1 flex-col md:flex-row md:ml-auto justify-start items-end space-x-4 space-y-4;
  }

  .page-filters .filter {
    @apply flex flex-col w-full md:w-auto;
  }

  .page-filters .filter label {
    @apply text-sm text-gray-600 font-medium mb-1;
  }

  .page-filters .filter input {
    @apply field-input shadow py-2;
  }

  .page-filters .filter select {
    @apply field-input shadow py-2 pl-4 pr-10;
  }

  .page-filters .filter input,
  .page-filters .filter select,
  .page-filters input[type=submit] {
    @apply h-11;
  }

  .page-filters input[type=submit] {
    @apply btn btn-default w-full md:w-auto;
  }

  .default-table {
    @apply table-fixed min-w-full;
  }

  .default-table th {
    @apply table-th border-gray-200 bg-white text-left text-gray-400 p-4;
  }

  .default-table tr {
    @apply bg-white odd:bg-gray-100 text-gray-900
  }

  .default-table td {
    @apply border-b border-gray-200 font-medium text-sm text-gray-600 p-4;
  }

  .default-table tr.section-header td {
    @apply font-bold text-gray-800 bg-gray-300 py-1;
  }

  .table-row-actions {
    @apply flex flex-row justify-end space-x-4;
  }

  .table-row-actions a {
    @apply font-medium text-sm transition duration-200 ease-in-out text-gray-500 hover:text-gray-800;
  }

  .table-row-actions button {
    @apply font-medium text-sm transition duration-200 ease-in-out;
  }

  .panel {
    @apply block bg-white border-b border-gray-200 rounded-lg shadow;
  }

  .blank-panel {
    @apply flex flex-col items-center justify-center text-center h-56 px-10;
  }

  .blank-panel h2 {
    @apply text-xl font-medium text-gray-800 mb-1;
  }

  .blank-panel p {
    @apply text-gray-600;
  }

  .pagination-wrapper {
    @apply flex justify-end mt-4
  }

  .pagination a, .pagination .active {
    @apply inline-flex items-center border rounded-lg text-xs font-medium border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2;
  }

  .pagination .active {
    @apply bg-indigo-100 border-indigo-500 text-indigo-600;
  }

  .text-success {
    @apply text-green-600;
  }
  .text-danger {
    @apply text-red-600;
  }

  /* TODO: Figure out how to make these compile just like the other classes above */
  .field--leading-addon {
    padding-left: 1rem;
  }

  .field--trailing-addon {
    @apply mt-1 pr-7;
  }

  .toggler-checkbox:checked + div, .toggler-checkbox:checked + span {
    display: block;
  }
  .toggler-checkbox + div, .toggler-checkbox + span {
    display: none;
  }

  /* FullCalendar custom buttons */
  .fc .fc-shareWithClient-button,
  .fc .fc-previewSchedule-button {
    @apply bg-white text-gray-600 text-sm font-medium rounded-lg px-3 py-1.5;
    border: 1px solid #d1d5db !important;
  }
  .fc .fc-shareWithClient-button:hover,
  .fc .fc-previewSchedule-button:hover {
    @apply bg-gray-50 text-gray-800;
    border-color: #9ca3af !important;
  }
  .fc .fc-shareWithClient-button:focus,
  .fc .fc-previewSchedule-button:focus,
  .fc .fc-shareWithClient-button:active,
  .fc .fc-previewSchedule-button:active {
    @apply bg-gray-100 text-gray-800 shadow-none;
    border-color: #9ca3af !important;
    box-shadow: none !important;
  }

  /* public schedule */
  .schedule-tab[aria-selected=true] .schedule-indicator {
    @apply bg-blue-600
  }

}
input.field--range{
  appearance: auto;
}

input.field--range:focus{
  outline: none;
  box-shadow: none;
}

input.field--currency-input::-webkit-outer-spin-button,
input.field--currency-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
/*
 * 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.
 *


 */

 /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}