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


@layer components {

  .link-primary {
    @apply text-green-500 underline underline-offset-4 decoration-1 transition duration-200 ease-in-out hover:underline-offset-8 hover:decoration-4 hover:text-green-600;
  }

  .form-element {
    @apply rounded-md px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-green-500;
  }

  .form-label {
    @apply block text-xs font-medium text-gray-900;
  }

  .form-input {
    @apply block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm/6;
  }

  /* select */
  .form-select-group {
    @apply  block w-full rounded-md border-0 py-1.5 px-3 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-green-500;
  }

  .form-select {
    @apply block bg-transparent w-full border-0 py-1.5 px-0 text-gray-900 ring-gray-300 focus:ring-0 sm:text-sm/6;
  }

  strong {
    @apply font-extrabold;
  }

  .btn-primary {
    @apply cursor-pointer inline-flex items-center justify-center gap-x-1.5 font-semibold text-sm rounded-md py-3 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-200 ease-in-out;
  }

  .btn-primary__dark {
    @apply btn-primary bg-neutral-950 text-white;
  }

  .btn-secondary {
    @apply cursor-pointer inline-flex items-center justify-center gap-x-1.5 font-semibold text-sm rounded-md py-3 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-200 ease-in-out;
  }

  .btn-secondary__dark {
    @apply btn-secondary ring-2 ring-inset ring-neutral-950 bg-white hover:bg-neutral-100;
  }

  .btn-icon {
    @apply cursor-pointer inline-flex items-center gap-x-1.5 font-semibold text-sm rounded-md px-2.5 py-1.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-200 ease-in-out;
  }

  .btn-icon__primary {
    @apply bg-white text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 hover:ring-gray-400;
  }

  .btn-icon__primary-outline {
    @apply bg-white text-black hover:ring-1 hover:ring-neutral-950 focus-visible:outline-neutral-950;
  }

  .btn-icon__primary-dark {
    @apply bg-neutral-950 text-white hover:bg-neutral-800;
  }

  .btn-icon__secondary {
    @apply bg-neutral-50 ring-1 ring-neutral-950 text-sm font-semibold text-neutral-950 shadow-sm hover:bg-neutral-800 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 transition-all duration-300;
  }

  .btn-icon__soft {
    @apply bg-indigo-50 font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100;
  }

  .btn-icon__soft-danger {
    @apply bg-red-50 font-semibold ring-1 ring-inset ring-red-300 text-red-600 hover:bg-red-100 hover:ring-red-400;
  }

  .btn-icon__danger {
    @apply bg-red-500 text-white;
  }

  .btn-icon__success {
    @apply bg-green-400 text-black hover:ring-1 hover:ring-neutral-950 focus-visible:outline-neutral-950;
  }
}

@layer utilities {
  /* iOS Safe Area Support */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }

  .pl-safe {
    padding-left: env(safe-area-inset-left);
  }

  .pr-safe {
    padding-right: env(safe-area-inset-right);
  }
}
.drawer__container {
  position: fixed;
  bottom: 0;
  z-index: 50;
  width: 100dvw;
  height: 0;
}

.drawer__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(154, 156, 147, 0.5);
  backdrop-filter: blur(4px);
  display: none; /* Hidden by default */
}

.drawer__content {
  position: absolute;
  bottom: 0;
  width: 100vw; /* Fixed typo: dvw -> vw */
  height: 70vh; /* Fixed typo: dvh -> vh */
  background-color: #fff;
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  padding-top: 0;
  transform: translateY(100%); /* Start hidden */
  transition: transform 0.3s ease;
}

.drawer__content.is-open {
  transform: translateY(0); /* Slide up when open */
}

.drawer__tray-container {
  padding: 1rem 0;
}

.drawer__tray-bar {
  margin: 0 auto;
  display: block;
  height: 4px;
  width: 3rem;
  background-color: #000;
  border-radius: 6px;
  cursor: grab;
}

.drawer__title {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.drawer__form {
  /* padding-top: 2rem;+ */
}
.nav__container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100dvw;
  padding: 1rem 1rem 2rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  background-color: #fff;
  height: 12dvh;
  z-index: 10;
}

.mobile-nav {
  display: flex;
  align-items: center; /* Vertically centers items */
  justify-content: center; /* Centers the title horizontally */
  position: relative; /* Allows positioning of the back button */
  padding-bottom: 1rem;
}

.mobile-nav a {
  position: absolute;
  font-size: 0.9rem;
  text-decoration: none;
  &.right {
    right: 0;
  }
  &.left {
    left: 0; /* Moves the back button to the left */
  }
}

.mobile-nav__title {
  font-size: 0.9rem;
  text-align: center;
  font-weight: bold;
  flex-grow: 1;
}


@media (min-width: 1024px) {
  .nav__container {
    display: none;
  }
}
.slide-in {
  animation: slideInAnimation 0.5s forwards;
}

.slide-out {
  animation: slideOutAnimation 0.5s forwards;
}

@keyframes slideInAnimation {
  from {
    transform: translateX(100%);
    /* opacity: 0; */
  }
  to {
    transform: translateX(0);
    /* opacity: 1; */
  }
}

@keyframes slideOutAnimation {
  from {
    transform: translateX(0);
    /* opacity: 1; */
  }
  to {
    transform: translateX(calc(100% + 1rem));
    /* opacity: 0; */
  }
}
/*
 * 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  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.
 *


 */

:root {
  --font-size-base: 16px;
  --background-color: rgb(251, 250, 249);
}

* {
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.timelog-name_input {
  all: unset;
  border-bottom: 1px solid #ccc;
  padding: 0.5rem; /* Adjust for spacing */
  font-size: 1rem; /* Match the placeholder size */
  border-radius: 0.25rem; /* Rounded edges */
  width: 25ch; /* Placeholder match */

}

.timelog-name_input:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid #000;
}