@tailwind base;

@custom-variant dark (&:is(.dark *));
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.5rem;
  }
}

@layer components {
  .app-content {
    @apply mx-auto w-full max-w-screen-2xl px-4;
  }

  .auth-main {
    @apply flex grow flex-col items-center justify-center px-4;
  }

  .auth-main.home.index {
    @apply px-0;
  }

  .auth-main > * {
    @apply w-full;
  }

  .flash-wrapper {
    @apply fixed top-16 right-0 left-0 z-20 px-4;
  }

  .flash-info {
    @apply shadow-0 border-l-primary-500 mx-auto flex w-full max-w-screen-xl items-center gap-4 rounded-lg border-l-[8px] bg-white px-6 py-4;
  }
  .flash-info svg {
    @apply text-primary-500;
  }

  .flash-info.alert {
    @apply border-red-500;
  }
  .flash-info.alert svg {
    @apply text-red-500;
  }

  .flash-info.warning {
    @apply border-amber-500;
  }
  .flash-info.warning svg {
    @apply text-amber-500;
  }

  .flash-info.success {
    @apply border-success-800;
  }
  .flash-info.success svg {
    @apply text-success-800;
  }
  .flash-close {
    @apply ms-auto flex h-6 w-6 shrink-0 items-center justify-center text-neutral-700;
  }

  .btn {
    @apply flex cursor-pointer flex-wrap items-center justify-center rounded-lg px-4 py-3 leading-5 text-wrap disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-700 text-white;
  }

  .btn-secondary {
    @apply bg-secondary-500 hover:bg-secondary-700 text-white;
  }

  .btn-ghost {
    @apply border border-neutral-200 bg-white font-medium text-neutral-700 hover:bg-neutral-200 hover:text-neutral-900;
  }

  .btn-success {
    @apply bg-success-100 text-success-800 hover:bg-success-800 hover:text-white;
  }

  .link {
    @apply text-primary-500 inline;
  }

  .nav-link {
    @apply hover:text-primary-500 hover:underline hover:underline-offset-2;
  }
  .nav-link.active {
    @apply text-primary-500 font-medium;
  }
  .nav-link .count {
    @apply bg-primary-500 inline-flex h-4 items-center justify-center rounded-lg px-2 align-super text-xs text-white;
  }

  .card {
    @apply mx-auto w-fit rounded-lg bg-white p-6 shadow-md;
  }

  .field {
    @apply flex w-full flex-col gap-1;
  }

  .field label {
    @apply text-sm text-neutral-600;
  }

  .field em {
    @apply text-xs text-neutral-600;
  }

  .input-wrapper {
    @apply focus-within:ring-primary-500 flex w-full items-center gap-4 rounded-lg border border-neutral-400 focus-within:ring-1;
  }

  .input-wrapper input {
    @apply w-full rounded-lg border-0 p-3 focus:ring-0 focus:outline-0;
  }

  .field input[type='checkbox'] {
    @apply rounded-lg focus:ring-offset-0;
  }

  .pill {
    @apply text-primary-700 bg-primary-50 inline-block rounded-full px-4 py-1.5 text-xs font-medium;
  }
  .pill-success {
    @apply text-success-800 bg-success-100 inline-block rounded-full px-4 py-1.5 text-xs font-medium;
  }
  .pill-gray {
    @apply inline-block rounded-full border border-neutral-400 px-4 py-1 text-xs font-medium text-neutral-700;
  }

  .basic-table {
    @apply w-full table-auto;
  }
  .basic-table thead th {
    @apply relative z-1 after:absolute after:inset-0 after:-z-1 after:border after:border-neutral-100 after:bg-neutral-100 first:after:rounded-tl-xl last:after:rounded-tr-xl;
  }
  .basic-table th,
  .basic-table td {
    @apply px-4 py-2 text-left;
  }
  .basic-table tbody tr td {
    @apply relative z-1 after:absolute after:inset-0 after:-z-1;
  }
  .basic-table tbody tr:nth-of-type(even) td {
    @apply after:bg-neutral-50;
  }
  .basic-table tbody tr:last-of-type td {
    @apply first:after:rounded-bl-xl last:after:rounded-br-xl;
  }

  .basic-table.bordered tbody tr td {
    @apply after:border-r after:border-neutral-200 first:after:border-l;
  }

  .basic-table.bordered tbody tr:nth-of-type(even) td {
    @apply after:border-y after:border-neutral-200 after:bg-white;
  }

  dt {
    @apply font-semibold;
  }

  .notification-box {
    @apply flex items-center justify-center rounded-lg border-2 border-neutral-200 bg-neutral-50 p-4 text-neutral-700 md:p-6;
  }
  .notification-box.warning {
    @apply border-red-400 bg-red-50 text-red-700;
  }

  .accordion-wrapper {
    @apply flex flex-col gap-4 will-change-auto;
  }

  .accordion-toggle {
    @apply flex items-center gap-2;
  }

  .accordion-body {
    @apply max-h-0 origin-top scale-y-0 space-y-4 overflow-hidden opacity-0 transition-all;
  }
  .peer.is-open + .accordion-body {
    @apply max-h-none scale-y-100 opacity-100;
  }

  .request-grid {
    @apply lg:grid lg:grid-cols-2;
  }
}

.input-wrapper:has(.field_with_errors) {
  @apply border-red-400 focus-within:ring-1 focus-within:ring-red-700;
}

.input-wrapper .field_with_errors {
  @apply grow;
}

.input-wrapper button {
  @apply relative h-10 w-10 shrink-0 rounded-lg p-3;
}

.input-wrapper button svg {
  @apply pointer-events-none absolute inset-2.5 h-5 w-5 transition-all;
}

.input-wrapper button[data-visible='off'] [data-icon='eye'] {
  @apply opacity-0;
}

.input-wrapper button[data-visible='on'] [data-icon='eye-off'] {
  @apply opacity-0;
}

.pagination {
  @apply flex flex-wrap items-center justify-end gap-2 py-4;
}
.pagination .first,
.pagination .prev,
.pagination .next,
.pagination .current,
.pagination .last {
  @apply text-primary-700 bg-primary-50 inline-block rounded-full px-4 py-1.5 text-xs font-medium;
}
.pagination .page {
  @apply px-4 py-1.5 text-xs;
}