@import "pagy.tailwind.css";
@import "shadcn.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .sidebar-menu-item {
    @apply block p-2 text-white transition duration-200 rounded hover:bg-faint-gray hover:bg-opacity-10;
  }

  .dropdown-options {
    @apply block px-4 py-2 mx-2 text-sm text-gray-700 rounded-3xl hover:bg-blue-primary hover:text-white;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}
/* https://ddnexus.github.io/pagy/docs/api/stylesheets/#pagy-tailwind-css */
.pagy {
  @apply flex space-x-1 text-sm;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) {
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-orange-primary cursor-pointer rounded-none;
    }
  }
  
  a[aria-label="Previous"] {
    @apply text-orange-primary bg-white border-2 border-slate-200 cursor-pointer rounded-l-lg flex justify-center h-9 w-10;
  }

  a[aria-current="page"] {
    @apply h-9 w-10 flex justify-center;
  }

  a[aria-label="Next"] {
    @apply text-orange-primary bg-white border-2 border-slate-200 cursor-pointer rounded-r-lg flex justify-center h-9 w-10;
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}
/* Overidden date picker classes */
.sdp-cal .sdp-nav .sdp-nav-dropdowns .sdp-month {
  color: #171717;
}

.sdp-cal .sdp-nav .sdp-nav-dropdowns .sdp-year {
  color: #171717;
}

.sdp-cal .sdp-nav .sdp-nav-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sdp-cal .sdp-nav .sdp-nav-buttons .sdp-goto-prev {
  background-color: transparent;
}

.sdp-cal .sdp-nav .sdp-nav-buttons .sdp-goto-prev svg {
  stroke: #171717;
}

.sdp-cal .sdp-nav .sdp-nav-buttons .sdp-goto-next {
  background-color: transparent;
}

.sdp-cal .sdp-nav .sdp-nav-buttons .sdp-goto-next svg {
  stroke: #171717;
}

.sdp-cal .sdp-nav .sdp-nav-buttons .sdp-goto-today {
  display: none;
}

.sdp-cal .sdp-days-of-week div {
  color: #171717;
}

.sdp-days button:not([aria-disabled]).sdp-today {
  border: 2px solid #15203d !important;
}

.sdp-days button:not([aria-disabled]).sdp-selected {
  background-color: #15203d !important;
  box-shadow: none !important;
  border: 0px !important;
}

.sdp-days button:not([aria-disabled]):hover {
  border: 2px solid #15203d !important;
}

.sdp-days button:not([aria-disabled]).sdp-selected:hover {
  box-shadow: none !important;
  border: 0px !important;
}

.sdp-days button {
  border-radius: 4px !important;
}

.sdp-days button:not([aria-disabled]).sdp-selected time {
  color: #ffffff;
}

.sdp-days button time {
  color: #404040;
}

.sdp-weekend time {
  color: #f36a6a !important;
}

.sdp-nav .sdp-nav-dropdowns select {
  appearance: none;
}

.sdp-days button[aria-disabled] time {
  color: #bababa !important;
}

.sdp-days button[aria-disabled]:hover {
  cursor: not-allowed;
  border: none !important;
}

.sdp-days-of-week div:first-child,
.sdp-days-of-week div:last-child {
  color: #f36a6a;
}

.sdp-days button[aria-disabled] {
  border: none !important;
  background-color: transparent;
}

@media only screen and (max-width: 768px) {
  .sdp-cal {
    background-color: white;
    margin-top: 10px;
    width: 90vw;
    padding: 10px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    position: absolute;
    z-index: 5;
  }

  .sdp-nav {
    display: flex;
    justify-content: space-between;
  }

  .sdp-nav-dropdowns {
    display: flex;
    margin: 5px 0px;
  }

  .sdp-nav-dropdowns div {
    margin-right: 5px;
  }

  .sdp-nav-buttons {
    display: flex;
  }

  .sdp-nav-buttons button {
    width: 12px;
    height: 12px;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .sdp-nav-buttons button svg {
    width: 100%;
    height: 100%;
    stroke: #000;
    stroke-width: 1;
    fill: none;
  }

  .sdp-nav-buttons button svg {
    color: black;
  }

  .sdp-month,
  .sdp-year {
    border: none;
  }

  .sdp-days-of-week {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }

  .sdp-days-of-week div {
    width: 14.2857%;
    display: inline-block;
    text-align: center;
  }

  .sdp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .sdp-days button {
    padding: 10px;
    text-align: center;
    border: none;
    cursor: pointer;
  }

  .sdp-days button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sdp-days button.sdp-selected {
    background-color: #007bff;
    color: 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.
 *


 */

@import url(/app/assets/stylesheets/stimulus-datepicker.css);

.collapse-svg:hover,
.expand-svg:hover {
  fill: white;
  /* Change fill color on hover */
}

.dropdown-menu {
  height: 37.6px;
}

.time-picker-btn {
  width: 12.6px;
}

.scroll-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
}

.select-menu-outer {
  top: auto;
  bottom: 100%;
}