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

@layer base {
  :root {
    --background: 0 0% 7.1%;
    --foreground: 240 6% 10%;

    --sand: 45 11% 93%;
    --sand-foreground: 0 0% 12%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --primary: 154 39% 33%;
    --primary-foreground: 240 6% 10%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --ring: 240 5% 64.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --ring: 240 3.7% 15.9%;
  }
}

@layer components {
  .card-rest {
    @apply shadow-[0px_0px_0px_1px_rgba(9,9,11,0.08),0px_1px_2px_-1px_rgba(9,9,11,0.08),0px_2px_4px_rgba(9,9,11,0.04)];
  }
  .shadow-input-dark {
    /* convert the below shadow to a tailwind shadow */
    @apply shadow-[0px_2px_2px_0px_rgba(0,0,0,0.3),0px_1px_1px_0px_rgba(0,0,0,0.3)];
  }

  .datepicker-toggle {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
  }

  .datepicker-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    box-sizing: border-box;
  }
  .datepicker-input::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  .calendar-btn {
    @apply w-full h-full absolute top-0 left-0 bg-white;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48ZyBjbGFzcz0ibmMtaWNvbi13cmFwcGVyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMxMjEyMTIiPjxsaW5lIHgxPSI1Ljc1IiB5MT0iMi43NSIgeDI9IjUuNzUiIHkyPSIuNzUiPjwvbGluZT48bGluZSB4MT0iMTIuMjUiIHkxPSIyLjc1IiB4Mj0iMTIuMjUiIHkyPSIuNzUiPjwvbGluZT48cmVjdCB4PSIyLjI1IiB5PSIyLjc1IiB3aWR0aD0iMTMuNSIgaGVpZ2h0PSIxMi41IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMi4yNSIgeTE9IjYuMjUiIHgyPSIxNS43NSIgeTI9IjYuMjUiPjwvbGluZT48cGF0aCBkPSJNOSw4LjI1Yy0uNTUxLDAtMSwuNDQ5LTEsMXMuNDQ5LDEsMSwxLDEtLjQ0OSwxLTEtLjQ0OS0xLTEtMVoiIGZpbGw9IiMxMjEyMTIiIGRhdGEtY29sb3I9ImNvbG9yLTIiIGRhdGEtc3Ryb2tlPSJub25lIiBzdHJva2U9Im5vbmUiPjwvcGF0aD48cGF0aCBkPSJNMTIuNSwxMC4yNWMuNTUxLDAsMS0uNDQ5LDEtMXMtLjQ0OS0xLTEtMS0xLC40NDktMSwxLC40NDksMSwxLDFaIiBmaWxsPSIjMTIxMjEyIiBkYXRhLWNvbG9yPSJjb2xvci0yIiBkYXRhLXN0cm9rZT0ibm9uZSIgc3Ryb2tlPSJub25lIj48L3BhdGg+PHBhdGggZD0iTTksMTEuMjVjLS41NTEsMC0xLC40NDktMSwxcy40NDksMSwxLDEsMS0uNDQ5LDEtMS0uNDQ5LTEtMS0xWiIgZmlsbD0iIzEyMTIxMiIgZGF0YS1jb2xvcj0iY29sb3ItMiIgZGF0YS1zdHJva2U9Im5vbmUiIHN0cm9rZT0ibm9uZSI+PC9wYXRoPjxwYXRoIGQ9Ik01LjUsMTEuMjVjLS41NTEsMC0xLC40NDktMSwxcy40NDksMSwxLDEsMS0uNDQ5LDEtMS0uNDQ5LTEtMS0xWiIgZmlsbD0iIzEyMTIxMiIgZGF0YS1jb2xvcj0iY29sb3ItMiIgZGF0YS1zdHJva2U9Im5vbmUiIHN0cm9rZT0ibm9uZSI+PC9wYXRoPjxwYXRoIGQ9Ik0xMi41LDExLjI1Yy0uNTUxLDAtMSwuNDQ5LTEsMXMuNDQ5LDEsMSwxLDEtLjQ0OSwxLTEtLjQ0OS0xLTEtMVoiIGZpbGw9IiMxMjEyMTIiIGRhdGEtY29sb3I9ImNvbG9yLTIiIGRhdGEtc3Ryb2tlPSJub25lIiBzdHJva2U9Im5vbmUiPjwvcGF0aD48L2c+PC9zdmc+');
  }
}
/* fixed width only on sm and up */
@media (min-width: 640px) {
  .w-fixed {
    flex: 0 1 230px;
    min-width: 230px;
  }
}

body {
  /* background: #fafafa; */
  background: #f3f4f6;
}

body.turbo-native .turbo-native-hidden {
  display: none;
}

.pagy {
  @apply flex space-x-2 font-semibold text-sm text-gray-500 py-4 justify-center;
  a:not(.gap) {
    @apply block rounded-md px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-blue-500;
    }
  }
  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;
    }
  }
}

/* The match strip and the navigation move as one.

   The strip is the top 48px of a fixed stack; hiding it slides the whole stack
   up by exactly its own height, so the navigation lands flush against the top
   of the window instead of jumping. The body keeps its padding either way,
   which is what stops the page content shifting under them. */
@layer components {
  .js-match-ticker,
  .js-site-header {
    transition: transform 250ms ease;
    will-change: transform;
  }

  .ticker-hidden .js-match-ticker,
  .ticker-hidden .js-site-header {
    transform: translateY(-3rem);
  }

  /* A horizontal strip of chips: the scrollbar would be taller than the gap
     between them. */
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}
/*
 * 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.
 *


 */