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

@layer base {
  a {
    @apply text-lime-600 hover:text-lime-800 dark:text-lime-400 dark:hover:text-lime-300;
  }
}

@layer components {
  .btn {
    @apply
      inline-block
      cursor-pointer
      transition-colors
      bg-lime-300
      hover:bg-lime-400
      focus:ring-lime-200
      text-lime-800
      hover:text-black
      dark:text-gray-900
      dark:hover:text-black
      dark:bg-gradient-to-r
      dark:from-lime-200
      dark:via-lime-400
      dark:to-lime-500
      dark:hover:bg-gradient-to-br
      dark:disabled:bg-gradient-to-r
      focus:ring-4
      focus:outline-none
      dark:focus:ring-lime-800
      font-medium
      rounded-lg
      text-sm
      px-4
      py-2
      text-center;
  }

  .btn-danger {
    @apply
      dark:from-red-500
      dark:via-red-600
      dark:to-red-700
      dark:focus:ring-red-900
      dark:text-white
      dark:hover:text-white
      bg-gradient-to-r
      dark:bg-gradient-to-r
      from-red-500
      via-red-600
      to-red-700
      text-white
      hover:text-white;
  }

  .btn-2 {
    @apply
      inline-flex
      items-center
      px-4
      py-2
      text-sm
      font-medium
      text-gray-900
      bg-white
      border
      border-stone-200
      rounded-lg
      hover:bg-gray-100
      hover:text-lime-700
      focus:z-10
      focus:ring-2
      focus:ring-lime-700
      focus:text-lime-700
      dark:bg-transparent
      dark:border-stone-600
      dark:text-white
      dark:hover:text-white
      dark:hover:bg-stone-700
      dark:focus:ring-lime-500
      dark:focus:text-white
      dark:disabled:hover:bg-transparent
      transition-colors
      justify-center;
  }

  .btn-2-left {
    @apply rounded-r-none rounded-l-lg;
  }

  .btn-2-right {
    @apply rounded-l-none rounded-r-lg border-l-0;
  }

  .btn-2-active {
    @apply bg-stone-800 dark:text-lime-400 !important;
  }

  .label {
    @apply
      block
      mb-2
      text-sm
      font-medium
      text-gray-900
      dark:text-gray-200;
  }

  .input {
    @apply
      shadow-sm
      dark:bg-stone-800
      dark:text-white
      bg-gray-50
      border
      border-gray-300
      dark:border-stone-600
      text-gray-900
      text-sm
      rounded-lg
      focus:ring-lime-500
      focus:border-lime-500
      dark:focus:ring-lime-500
      dark:focus:border-lime-500
      placeholder-stone-500
      block
      w-full
      p-2.5;
  }

  /* Prevent zoom on input focus iOS */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .input {
      font-size: 16px;
    }
  }

  .form-hint {
    @apply mt-2 text-gray-500 dark:text-gray-400 text-xs;
  }

  .table {
    @apply w-full table-auto border-collapse;
  }

  .table th {
    @apply text-left border-b-2 font-medium pb-2 dark:border-stone-700;
  }

  .table td {
    @apply text-left border-b border-slate-100 dark:border-stone-700 py-4;
  }

  :disabled {
    @apply opacity-50 cursor-default;
  }

  .stretched-link::after {
    content: "";
    @apply z-10 absolute inset-0 bg-transparent pointer-events-auto;
  }

}

@layer utilities {
  .search-input-appearance-none {
    appearance: none;
    -webkit-appearance: none;
  }

  .search-input-appearance-none::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .mb-safe {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }

  .pb-safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Pagy */
.pagy-nav.pagination {
  @apply inline-flex -space-x-px text-sm;
}

.pagy-nav .page {
  @apply leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-transparent dark:border-stone-600 dark:text-stone-500;
}

.pagy-nav .page.disabled,
.pagy-nav .page.active,
.pagy-nav .page:not(.disabled):not(.active) a {
  @apply block px-3 py-2;
}

.pagy-nav .page.active {
  @apply text-black dark:text-white;
}

.pagy-nav .page.gap {
  @apply inline-flex items-center px-3;
}

.pagy-nav .page:not(.disabled):not(.active):not(.gap) {
  @apply hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-stone-800 dark:hover:text-white;
}

.pagy-nav .page.prev {
  @apply rounded-l-lg;
}

.pagy-nav .page.next {
  @apply rounded-r-lg;
}

.turbo-progress-bar {
  height: 5px;
  @apply bg-lime-500;
}

@media screen and (display-mode: standalone) {
  .standalone-hidden {
    display: none;
  }
}

/* Dialogs */
::backdrop {
  @apply bg-black/60 backdrop-blur-sm;
}
.closed-rooms-page {
  background: linear-gradient(
    to bottom,
    #060010 0%,
    #060010 6%,
    #090016 11%,
    #070016 20%,
    #0a0121 48%,
    #0a0127 55%,
    #0a0129 57%,
    #0c012b 62%,
    #0e0131 68%,
    #0d012f 69%,
    #18023c 78%,
    #19023e 79%,
    #19023e 79%,
    #1c0242 81%,
    #22034b 85%,
    #2e045a 92%,
    #2f045e 96%,
    #340464 98%,
    #370569 100%
  );
  background-attachment: fixed;
}

.closed-room-page {
  background: linear-gradient(
    to bottom,
    #04000c 0%,
    #04000c 6%,
    #060011 11%,
    #050011 20%,
    #070018 48%,
    #07001c 55%,
    #07001e 57%,
    #09001f 62%,
    #0a0122 68%,
    #090020 69%,
    #120229 78%,
    #13022b 79%,
    #13022b 79%,
    #15022f 81%
  );
  background-attachment: fixed;
}

.closed-rooms-light-base {
  position: fixed;
  bottom: -80px;
  left: 10vw;
  width: 80vw;
  height: 100px;
  border-radius: 50%;
  box-shadow: -0px -10px 30px 10px #ffc1a0, -0px -20px 40px 20px #fe9c7f,
    -0px -30px 60px 30px #be6590, -0px -50px 150px 75px #632b6c;
  background-color: #ffc1a0;
  z-index: -10;
  opacity: 0.3;
}
.markdown h1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}

.markdown table,
.markdown tr,
.markdown td,
.markdown th {
  border-collapse: collapse;
  border: 1px solid #666;
  padding: 8px;
}

.markdown p {
  margin-bottom: 10px;
}

.markdown blockquote {
  margin-bottom: 20px;
  border-left: 4px solid #555;
  padding: 6px 10px;
  padding-bottom: 0;
}

.markdown ul {
  list-style: inside;
}

.markdown ol {
  list-style: decimal;
  margin-left: 16px;
}
:root {
  --default-tooltip-color: rgb(132 204 22);
  --gray-tooltip-color: rgb(150 150 150);
}

.tippy-box[data-theme~='default'],
.tippy-box[data-theme~='gray'] {
  color: #333;
  font-size: 12px;
}

/* Default */
.tippy-box[data-theme~='default'] {
  background: var(--default-tooltip-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.tippy-box[data-theme~='default'] {
  background: var(--default-tooltip-color) !important;
  border: var(--default-tooltip-color) !important;
}
.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--default-tooltip-color);
}
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--default-tooltip-color);
}
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--default-tooltip-color);
}
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--default-tooltip-color);
}

/* Gray */
.tippy-box[data-theme~='gray'] {
  background: var(--gray-tooltip-color);
}
.tippy-box[data-theme~='gray'] {
  background: var(--gray-tooltip-color) !important;
  border: var(--gray-tooltip-color) !important;
}
.tippy-box[data-theme~='gray'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--gray-tooltip-color);
}
.tippy-box[data-theme~='gray'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--gray-tooltip-color);
}
.tippy-box[data-theme~='gray'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--gray-tooltip-color);
}
.tippy-box[data-theme~='gray'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--gray-tooltip-color);
}
/*
 * 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.
 *


 */

/*
 * We need this because we added the `viewport-fit=cover` meta, which is required
 * for the bottom bar to be positioned correctly on iOS web app, but then it makes
 * the app render all the way to the borders in landscape
*/
body {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

html, body {
  scroll-behavior: smooth;
}

.masked-room-image {
  -webkit-mask-image: radial-gradient(black 30%, transparent 70%);
  mask-image: radial-gradient(black 30%, transparent 70%);
}

.home-hero {
  min-height: 100vh;
}

@media only screen and (max-device-width: 480px) {
  /* Fix bar over arrow on iPhone */
  .home-hero {
    min-height: calc(100vh - 110px);
  }
}

.modal-open {
  overflow: hidden;
}