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

/*

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

*/

:root {
  color-scheme: light dark;
  --background-color: rgba(255, 255, 255, 1);
  --text-color: rgba(5, 5, 5, 1);
  --border-color: initial;
  --border-color-focus: theme("colors.blue.700");
  --placeholder-color-focus: theme("colors.blue.600");
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

@layer base {
  [type="pagination-input"] {
    @apply shadow-sm focus:ring-0 focus:ring-blue-300 focus:border-blue-300 focus:outline-none block sm:text-sm border border-gray-300 rounded-md;
  }
  body.darkMode [type="pagination-input"] {
    @apply bg-gray-900 shadow-sm focus:ring-0 focus:border-blue-500 focus:outline-none sm:text-sm border border-gray-500 rounded-md;
  }
  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [role="combobox"],
  textarea {
    @apply shadow-sm focus:ring-0 focus:ring-blue-300 focus:border-blue-300 block w-full sm:text-sm border border-gray-300 rounded-md;
  }
  [type="file"] {
    @apply ring-0 focus:ring-0 shadow-none focus:shadow-none focus:outline-none border-none;
  }
  .error [type="text"],
  .error [type="email"],
  .error [type="url"],
  .error [type="password"],
  .error [type="number"],
  .error [type="date"],
  .error [type="datetime-local"],
  .error [type="month"],
  .error [type="search"],
  .error [type="tel"],
  .error [type="time"],
  .error [type="week"],
  .error [role="combobox"],
  .error textarea {
    background: #fff6f6 !important;
    color: #9f3a38 !important;
  }
  [type="checkbox"] {
    @apply ring-0 focus:ring-0 focus:ring-white focus:border-blue-300 shadow-none focus:shadow-none focus:outline-none border border-gray-300 rounded;
  }

  .field_with_errors [type="text"],
  .field_with_errors [type="email"],
  .field_with_errors [type="url"],
  .field_with_errors [type="password"],
  .field_with_errors [type="number"],
  .field_with_errors [type="date"],
  .field_with_errors [type="datetime-local"],
  .field_with_errors [type="month"],
  .field_with_errors [type="search"],
  .field_with_errors [type="tel"],
  .field_with_errors [type="time"],
  .field_with_errors [type="week"],
  .field_with_errors [role="combobox"],
  .field_with_errors textarea {
    background: #fff6f6 !important;
    border-color: #f56565 !important;
  }

  select {
    @apply mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-blue-300 sm:text-sm sm:leading-6
  }

  body.darkMode [type="text"],
  body.darkMode [type="email"],
  body.darkMode [type="url"],
  body.darkMode [type="password"],
  body.darkMode [type="number"],
  body.darkMode [type="date"],
  body.darkMode [type="datetime-local"],
  body.darkMode [type="month"],
  body.darkMode [type="search"],
  body.darkMode [type="tel"],
  body.darkMode [type="time"],
  body.darkMode [type="week"],
  body.darkMode [role="combobox"],
  body.darkMode textarea {
    @apply bg-gray-900 shadow-sm focus:ring-0 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-800 rounded-md;
  }

  body.darkMode .error [type="text"],
  body.darkMode .error [type="email"],
  body.darkMode .error [type="url"],
  body.darkMode .error [type="password"],
  body.darkMode .error [type="number"],
  body.darkMode .error [type="date"],
  body.darkMode .error [type="datetime-local"],
  body.darkMode .error [type="month"],
  body.darkMode .error [type="search"],
  body.darkMode .error [type="tel"],
  body.darkMode .error [type="time"],
  body.darkMode .error [type="week"],
  body.darkMode .error [role="combobox"],
  body.darkMode .error textarea {
    background: #fff6f6;
    border-color: #e0b4b4;
    color: #9f3a38;
  }
  [type="text"]:disabled,
  [type="email"]:disabled,
  [type="url"]:disabled,
  [type="password"]:disabled,
  [type="number"]:disabled,
  [type="date"]:disabled,
  [type="datetime-local"]:disabled,
  [type="month"]:disabled,
  [type="search"]:disabled,
  [type="tel"]:disabled,
  [type="time"]:disabled,
  [type="week"]:disabled,
  [role="combobox"]:disabled,
  textarea:disabled {
    @apply opacity-25 cursor-not-allowed shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md;
  }
  .required:after {
    content: " *";
    color: red;
  }
  label {
    @apply block font-semibold text-gray-700;
  }
  .darkMode label {
    @apply block font-semibold text-white;
  }
  label[role="checkbox"] {
    @apply block font-normal text-gray-700;
  }
  .darkMode label[role="checkbox"] {
    @apply block font-normal text-white;
  }

  body.darkMode :focus::placeholder {
    color: var(--placeholder-color-focus);
  }
}

a {
  color: #4183c4;
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
}

.pagination {
  display: inline-flex;
}
.pagination > .page, .next, .last, .prev, .first {
  @apply relative items-center px-2.5 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex
}
.pagination > .page:first-child, .first {
  @apply relative inline-flex items-center rounded-l-md 
}
.pagination > .page:last-child, .last {
  @apply relative inline-flex items-center rounded-r-md 
}
.pagination > .current {
  @apply relative z-10 inline-flex items-center bg-blue-500 px-2.5 py-2 text-sm font-semibold text-white focus:z-20 hover:bg-blue-600
}

.button-primary {
  @apply rounded bg-blue-500 px-2 py-2 text-xs font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500
  /*
  @apply flex justify-center px-1 py-1 inline-flex items-center rounded-md border text-sm text-white bg-blue-500 border-transparent hover:bg-blue-600 focus:outline-none focus:ring-0
  */
}

.button-default {
  @apply rounded text-gray-800 bg-gray-500 px-2 py-2 text-xs font-semibold text-white shadow-sm hover:bg-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *


 */

/* application.css or application.scss */

#mobileMenu {
  display: none;
}

#mobileMenu.visible {
  display: block;
}

.codeInput{
  text-align: center;
}
.codeInputText{
  letter-spacing: 5px;
  text-transform: uppercase;
}
.generateCode {
  position: absolute;
  left: -5000px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}