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

@layer base {
  body {
    @apply text-neutral-800 dark:text-neutral-200 antialiased;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-neutral-900 dark:text-neutral-100 font-medium;
    letter-spacing: -0.02em;
  }
}

@layer components {
  .card {
    @apply bg-white dark:bg-neutral-800 rounded-xl shadow-card border border-neutral-200/50 dark:border-neutral-700/50;
  }
  
  .btn-primary {
    @apply bg-accent-500 hover:bg-accent-600 text-white font-medium px-4 py-3 sm:px-6 rounded-lg transition-colors duration-200 shadow-subtle touch-manipulation;
  }
  
  .btn-secondary {
    @apply bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 text-neutral-700 dark:text-neutral-300 font-medium px-4 py-3 sm:px-6 rounded-lg transition-colors duration-200 touch-manipulation;
  }
  
  .input-field {
    @apply border-neutral-200 dark:border-neutral-600 focus:border-accent-500 focus:ring-accent-500/20 rounded-lg bg-white dark:bg-neutral-700 px-4 py-3 text-neutral-900 dark:text-neutral-100 placeholder-neutral-500 dark:placeholder-neutral-400 transition-colors duration-200;
  }
}

/* Turbo progress bar styling */
.turbo-progress-bar {
  background-color: #ef4444 !important; /* accent-500 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.
 *


 */

/* Homepage specific styles */
.homepage-bg {
  background-color: #f7f6f1;
}

.homepage .bg-white {
  background-color: #f7f6f1 !important;
}

[data-native-app] .native-auth-main {
  padding-top: calc(4rem + env(safe-area-inset-top)) !important;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-logo__image {
  display: block;
  width: auto;
  height: 2.4rem;
}

.native-enhancement-main {
  padding-top: calc(2rem + env(safe-area-inset-top));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.index-page {
  min-height: calc(100vh - 4rem);
  background: rgb(255 255 255);
}

.index-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding: 0.65rem 1rem 1.15rem;
}

.index-page-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.index-page-header__actions--start {
  justify-content: flex-start;
}

.index-page-header__actions--end {
  justify-content: flex-end;
}

.index-page-header__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgb(17 24 39);
  font-size: clamp(1.65rem, 2.45vw, 2.25rem);
  font-weight: 720;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-page-header__separator {
  color: rgb(163 163 163);
  font-weight: 500;
}

.index-page-header__context {
  color: rgb(82 82 82);
  font-weight: 550;
}

.index-page-header__button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  border-radius: 9999px;
  min-height: 2.35rem;
  padding: 0.46rem 1.18rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.index-page-header__button:hover {
  transform: translateY(-1px);
}

.index-page-header__button--primary {
  background: rgb(239 65 53);
  color: rgb(255 255 255);
}

.index-page-header__button--primary:hover {
  background: rgb(220 38 38);
}

.index-page-header__button--secondary {
  background: rgb(239 65 53);
  color: rgb(255 255 255);
}

.index-page-header__button--secondary:hover {
  background: rgb(220 38 38);
}

.index-page-header__button-icon,
.index-page-header__button svg {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
}

.index-page__content {
  display: flex;
  min-height: calc(100vh - 9.5rem);
  width: min(100%, 80rem);
  margin-inline: auto;
}

.index-page__sidebar {
  width: 100%;
  flex: 0 0 auto;
  background: rgb(255 255 255);
}

.index-page__sidebar-inner {
  padding: 0.85rem 0.75rem 1.5rem;
}

.index-page__main {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.85rem 1rem 2.5rem;
}

@media (min-width: 768px) {
  .index-page__sidebar {
    width: 16rem;
  }

  .index-page__main {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 767px) {
  .index-page-header {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: 0.4rem;
  }

  .index-page-header__title {
    order: -1;
    font-size: 1.85rem;
  }

  .index-page-header__actions {
    justify-content: center;
  }

  .index-page__content {
    flex-direction: column;
  }
}

.navigation-menu {
  position: relative;
  z-index: 40;
  background: rgb(255 255 255);
}

.navigation-menu:has(.navigation-menu__dialog[open]) {
  z-index: 80;
}

.navigation-menu__bar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding: 0.8rem 1rem;
}

.navigation-menu__slot {
  min-width: 2.5rem;
}

.navigation-menu__slot--end {
  display: flex;
  justify-content: flex-end;
}

.navigation-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.34rem;
  max-width: 100%;
  border-radius: 9999px;
  padding: 0.34rem 0.78rem;
  color: rgb(17 24 39);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.navigation-menu__trigger:hover,
.navigation-menu__trigger[aria-expanded="true"] {
  background: rgb(238 238 238);
}

.navigation-menu__avatar {
  display: inline-grid;
  place-items: center;
  width: 1.86rem;
  height: 1.86rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 9999px;
  background: rgb(248 250 252);
  color: rgb(17 24 39);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.75) inset,
    0 0.1rem 0.25rem rgb(15 23 42 / 0.08);
  font-size: 0.78rem;
  font-weight: 800;
}

.navigation-menu__logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.navigation-menu__logo--trigger {
  height: 1.65rem;
}

.navigation-menu__logo--header {
  height: 1.75rem;
  margin-inline: auto;
}

.navigation-menu__trigger-chevron {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform 150ms ease;
}

.navigation-menu__trigger[aria-expanded="true"] .navigation-menu__trigger-chevron {
  transform: rotate(180deg);
}

.navigation-menu__avatar {
  text-transform: uppercase;
}

.navigation-menu__dialog {
  position: fixed;
  inset: 0 0 auto;
  width: min(calc(100vw - 1.25rem), 34rem);
  max-height: calc(100dvh - 1.5rem);
  margin: 0.55rem auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(23 23 23);
  opacity: 0;
  overflow: visible;
  transform: scale(0.2);
  transform-origin: top center;
  transition: 180ms ease-out allow-discrete;
  transition-property: display, opacity, overlay, transform;
}

.navigation-menu__dialog[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .navigation-menu__dialog[open] {
    opacity: 0;
    transform: scale(0.2);
  }
}

.navigation-menu__dialog::backdrop {
  background: rgb(255 255 255 / 0.01);
}

.navigation-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border: 1px solid rgb(254 202 202);
  border-radius: 1.35rem;
  background: rgb(255 255 255);
  padding: 0.9rem 1.15rem 0.82rem;
  box-shadow:
    0 0 0 1px rgb(239 65 53 / 0.035),
    0 0.5rem 1.25rem rgb(239 65 53 / 0.07),
    0 1.25rem 2.5rem rgb(15 23 42 / 0.11);
}

.navigation-menu__panel:focus {
  outline: none;
}

.navigation-menu__header {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.4rem;
}

.navigation-menu__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  color: rgb(15 23 42);
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-menu__close {
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: rgb(82 82 82);
  font-size: 1.35rem;
  line-height: 1;
}

.navigation-menu__close:hover {
  background: rgb(245 245 245);
  color: rgb(23 23 23);
}

.navigation-menu__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.navigation-menu__tile {
  display: flex;
  min-width: 0;
  aspect-ratio: 5 / 2.95;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border-radius: 0.62rem;
  background: rgb(245 245 245);
  color: rgb(15 23 42);
  padding: 0.52rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease;
}

.navigation-menu__tile:focus,
.navigation-menu__row:focus {
  outline: none;
}

.navigation-menu__tile:focus-visible,
.navigation-menu__row:focus-visible {
  outline: 2px solid rgb(239 65 53);
  outline-offset: 2px;
}

.navigation-menu__tile:hover {
  background: rgb(238 238 238);
}

.navigation-menu__tile--current {
  background: rgb(254 232 230);
  color: rgb(225 45 35);
}

.navigation-menu__tile-icon {
  width: 1.58rem;
  height: 1.58rem;
  flex: 0 0 auto;
}

.navigation-menu__sections {
  display: flex;
  flex-direction: column;
}

.navigation-menu__section {
  padding: 0.42rem 0;
}

.navigation-menu__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(15 23 42);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.navigation-menu__section-title::-webkit-details-marker {
  display: none;
}

.navigation-menu__section-chevron {
  width: 0.88rem;
  height: 0.88rem;
  transition: transform 150ms ease;
}

.navigation-menu__section:not([open]) .navigation-menu__section-chevron {
  transform: rotate(-90deg);
}

.navigation-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  margin: 0.32rem 0 0;
  padding: 0;
  padding-left: 1.32rem;
  list-style: none;
}

.navigation-menu__row {
  display: flex;
  align-items: center;
  gap: 0.92rem;
  min-width: 0;
  border-radius: 0.48rem;
  padding: 0.48rem 0.5rem;
  color: rgb(17 24 39);
  font-size: 1.05rem;
  font-weight: 550;
  transition: background-color 150ms ease, color 150ms ease;
}

.navigation-menu__row:hover {
  background: rgb(247 247 247);
}

.navigation-menu__row--current {
  color: rgb(225 45 35);
}

.navigation-menu__icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

.navigation-menu__row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-menu__check {
  width: 1.22rem;
  height: 1.22rem;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgb(239 65 53);
}

@media (max-width: 640px) {
  .navigation-menu__dialog {
    width: min(calc(100vw - 1rem), 34rem);
  }

  .navigation-menu__panel {
    border-radius: 1.1rem;
    padding: 0.9rem;
  }

  .navigation-menu__tiles {
    gap: 0.45rem;
  }

  .navigation-menu__tile {
    font-size: 0.84rem;
  }
}

@media (any-hover: none) {
  .navigation-menu__close {
    display: inline-grid;
  }
}

.folder-nav-icon {
  position: relative;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  color: rgb(64 64 64);
}

.folder-nav-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.folder-state-icon > svg {
  position: absolute;
  inset: 0;
  transform-origin: 50% 70%;
}

.folder-state-icon__open {
  opacity: 0;
  transform: scale(0.98);
}

.folder-state-icon__closed {
  opacity: 1;
  transform: scale(1);
}

.folder-state-icon.is-open .folder-state-icon__closed {
  animation: folder-close-away 120ms ease-out both;
}

.folder-state-icon.is-open .folder-state-icon__open {
  animation: folder-open-settle 180ms ease-out both;
}

.folder-state-icon.is-open .folder-state-icon__tab {
  animation: folder-tab-lift 180ms ease-out both;
  transform-origin: 25% 45%;
}

.folder-state-icon.is-open .folder-state-icon__tray {
  animation: folder-tray-slide 180ms ease-out both;
  transform-origin: 50% 80%;
}

.folder-count-badge {
  display: inline-flex;
  min-width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(229 229 229);
  padding: 0.125rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  color: rgb(82 82 82);
  font-variant-numeric: tabular-nums;
}

@keyframes folder-close-away {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes folder-open-settle {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes folder-tab-lift {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes folder-tray-slide {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .folder-state-icon.is-open .folder-state-icon__closed,
  .folder-state-icon.is-open .folder-state-icon__open,
  .folder-state-icon.is-open .folder-state-icon__tab,
  .folder-state-icon.is-open .folder-state-icon__tray {
    animation: none;
  }

  .folder-state-icon.is-open .folder-state-icon__closed {
    opacity: 0;
  }

  .folder-state-icon.is-open .folder-state-icon__open {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  .navigation-menu {
    background: rgb(38 38 38);
  }

  .navigation-menu__trigger,
  .navigation-menu__avatar {
    color: rgb(245 245 245);
  }

  .navigation-menu__trigger:hover,
  .navigation-menu__trigger[aria-expanded="true"] {
    background: rgb(54 54 54);
  }

  .navigation-menu__avatar {
    border-color: rgb(82 82 82);
    background: rgb(23 23 23);
    color: rgb(245 245 245);
  }

  .navigation-menu__panel {
    border-color: rgb(239 65 53);
    background: rgb(38 38 38);
    box-shadow:
      0 0 0 1px rgb(239 65 53 / 0.1),
      0 0.5rem 1.25rem rgb(0 0 0 / 0.22),
      0 1.25rem 2.5rem rgb(0 0 0 / 0.3);
  }

  .navigation-menu__title,
  .navigation-menu__section-title,
  .navigation-menu__row {
    color: rgb(245 245 245);
  }

  .navigation-menu__close {
    color: rgb(212 212 212);
  }

  .navigation-menu__close:hover,
  .navigation-menu__row:hover,
  .navigation-menu__tile:hover {
    background: rgb(54 54 54);
  }

  .navigation-menu__tile {
    background: rgb(54 54 54);
    color: rgb(245 245 245);
  }

  .navigation-menu__tile--current {
    background: rgb(127 29 29);
    color: rgb(254 226 226);
  }

  .navigation-menu__row--current,
  .navigation-menu__check {
    color: rgb(248 113 113);
  }

  .folder-nav-icon {
    color: rgb(212 212 212);
  }

  .folder-count-badge {
    background: rgb(64 64 64);
    color: rgb(212 212 212);
  }
}