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

body {
  @apply antialiased;
}
nav a.active {
  @apply bg-gray-700 text-white;
}

h1 {
  @apply text-2xl font-bold;
}
h2 {
  @apply text-lg leading-6 font-medium text-gray-900;
}

@layer base {
  [type="text"],
  [type="number"],
  [type="date"],
  [type="url"],
  [type="time"],
  select {
    @apply block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm;
  }

  textarea {
    @apply mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm;
  }
}

select:hover,
button[type="submit"],
input[type="submit"] {
  cursor: pointer;
}

.btn,
button {
  @apply bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
}
.btn-sm,
input[type="submit"].btn-sm {
  @apply bg-white border border-gray-300 rounded-md shadow-sm py-1 px-2 inline-flex justify-center text-sm font-normal text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
}

.btn.primary,
button[type="submit"],
input[type="submit"] {
  @apply inline-flex items-center px-4 py-2 border border-blue-800 shadow-sm text-sm font-medium rounded-md text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* Override the submit button styles so the button group displays properly */
input[type="submit"].btn-grp-override,
input[type="submit"].btn-grp-override:active,
input[type="submit"].btn-grp-override:focus {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  box-shadow: 0 0 rgba(0, 0, 0, 0);
  outline: none;
  font-size: 12px;
  border-color: rgb(209, 213, 219);
  border-bottom-width: 1px;
  color: rgb(17, 24, 39);
}
input[type="submit"].btn-grp-override:hover {
  color: #253985;
}

main a {
  @apply text-blue-700 hover:text-blue-900;
}

form {
  @apply divide-y divide-gray-200;
}
form fieldset {
  @apply py-6 px-4;
}

label {
  @apply block text-sm font-medium text-gray-700;
}
.actions {
  @apply py-4 px-4 flex justify-start space-x-2;
}

#error_explanation {
  @apply rounded-md bg-red-50 p-4 m-4;
  h2 {
    @apply text-sm font-medium text-red-800;
  }
  ul {
    @apply list-disc pl-5 space-y-1;
    li {
      @apply mt-2 text-sm text-red-700;
    }
  }
}

@media print {
  * {
    overflow: visible !important;
  }
}

.required label:after {
  color: #e32;
  content: url(/assets/circle-dc2edd034b0cad0c33011ae247db9efd7f8d04ed9a9827710f18cdac4bb8cf47.svg);
  width: 2px;
  height: 2px;
  display: inline;
  margin-left: 3px;
}

/* Page layout */
html,
body {
  height: 100%;
}
body {
  display: grid;
  grid-template-areas: "header" "content";
  grid-template-rows: auto 1fr;
}
#app-header {
  grid-area: header;
}
#app-content {
  grid-area: content;
}

/* Overrides for Flowbite Datepicker  */
.datepicker-header .prev-btn,
.datepicker-header .next-btn,
.datepicker-header .view-switch {
  @apply items-center border-0 shadow-none dark:hover:bg-gray-600 dark:hover:text-white;
}
.datepicker-cell {
  @apply leading-9 dark:hover:bg-gray-600 dark:hover:text-white;
}
.datepicker-picker {
  @apply border border-gray-300;
}

@layer components {
  .card {
    @apply relative block h-full overflow-hidden text-gray-800 bg-white rounded-md shadow-md;
  }
  .card--hover-scale {
    @apply transition hover:duration-300 hover:shadow-xl hover:scale-[1.01];
  }
  a.active:not(nav a.active) {
    @apply text-blue-700 hover:text-blue-900;
  }
  nav a.active {
    @apply text-white hover:text-white !important;
  }
  a.inactive {
    @apply text-gray-400 hover:text-gray-900;
  }

  button[type="submit"].ghost,
  button[type="submit"].ghost:hover {
    background: none;
    border: 0;
    @apply ring-0;
  }
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: white;
}

.sticky-container {
  height: calc(100vh - 150px);
  overflow: auto;
}

.scrollable-content {
  overflow: visible;
}

.table-container {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
/*
 * 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.
 *


 */
