@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

/* @theme { */
/*   --font-roboto: "Roboto", sans-serif; */
/* } */

@layer base {
  h1 {
    @apply text-4xl font-bold tracking-tight text-gray-900;
  }

  h2 {
    @apply text-3xl font-semibold tracking-tight text-gray-900;
  }

  h3 {
    @apply text-2xl font-semibold text-gray-900;
  }

  h4 {
    @apply text-xl font-medium text-gray-800;
  }

  h5 {
    @apply text-lg font-medium text-gray-800;
  }

  h6 {
    @apply text-base font-medium text-gray-700 uppercase;
  }
  /* Labels */
  label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Text inputs, selects, textareas */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    @apply w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm
    text-gray-900 placeholder-gray-400 shadow-sm
    focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
  }

  /* Checkboxes */
  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500;
  }

  /* Radios */
  input[type="radio"] {
    @apply h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500;
  }

  /* /\* Buttons *\/ */
  /* button, */
  /* input[type="submit"] { */
  /*   @apply inline-flex items-center justify-center gap-2 */
  /*          px-4 py-2 rounded-lg text-sm font-medium */
  /*          border border-transparent */
  /*          bg-blue-600 text-white hover:bg-blue-700 */
  /*          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 */
  /*          transition-colors duration-150; */
  /* } */

  /* Disabled states */
  input:disabled,
  select:disabled,
  textarea:disabled,
  button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}


/* ---------- Buttons: self-contained variants ---------- */
@layer components {

    .subtitle {
        @apply text-gray-400;
    }

  .table {
    @apply w-full border-collapse text-sm text-left text-gray-700;
  }

  .table thead {
    @apply bg-gray-100 text-gray-900;
  }

  .table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table thead th:last-child {
    @apply px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table tbody {
    @apply bg-white divide-y divide-gray-200;
  }

  .table tbody td {
    @apply border-b border-gray-200 px-6 py-4 whitespace-nowrap;
  }

  .table tbody tr:hover {
    @apply bg-gray-50;
  }

  .table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }

  .table-bordered th,
  .table-bordered td {
    @apply border border-gray-300;
  }

  .table-sm th,
  .table-sm td {
    @apply px-2 py-1 text-xs;
  }


  /* Primary */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-transparent
    bg-blue-600 text-white hover:bg-blue-700
                                 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                                                                                           transition-colors duration-150;
  }

  /* Success */
  .btn-success {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-transparent
    bg-green-600 text-white hover:bg-green-700
                                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
                                                                                            transition-colors duration-150;
  }

  /* Danger */
  .btn-danger {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-transparent
    bg-red-600 text-white hover:bg-red-700
                                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                                                                                          transition-colors duration-150;
  }

  /* Secondary (neutral) */
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-transparent
    bg-gray-200 text-gray-800 hover:bg-gray-300
                                    dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600
                                                                                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
                                                                                                                                             transition-colors duration-150;
  }

  /* Outline (neutral outline) */
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-gray-300 text-gray-900 bg-transparent hover:bg-gray-50
                                                              dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800
                                                                                                                 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
                                                                                                                                                                           transition-colors duration-150;
  }

  /* Ghost (minimal) */
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2
    px-3 py-2 rounded-lg text-sm font-medium
    border border-transparent
    text-gray-700 hover:bg-gray-100
                        dark:text-gray-200 dark:hover:bg-gray-800
                                                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
                                                                                                                transition-colors duration-150;
  }

  /* Dark */
  .btn-dark {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-transparent
    bg-gray-900 text-white hover:bg-gray-800
                                 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
                                                                                           transition-colors duration-150;
  }

  /* Light */
  .btn-light {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-gray-300 bg-white text-gray-900 hover:bg-gray-50
                                                        dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700
                                                                                                                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
                                                                                                                                                                                      transition-colors duration-150;
  }

  /* Sizes (compose with any variant) */
  .btn-sm { @apply px-2.5 py-1.5 text-xs rounded-md; }
  .btn-lg { @apply px-5 py-3 text-base rounded-xl; }

  /* Icon-only (square) */
  .btn-icon { @apply w-9 h-9 p-0 justify-center; }

  /* Disabled state (works with :disabled on <button>) */
  .btn-primary:disabled,
  .btn-success:disabled,
  .btn-danger:disabled,
  .btn-secondary:disabled,
  .btn-outline:disabled,
  .btn-ghost:disabled,
  .btn-dark:disabled,
  .btn-light:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  /* Outline – Primary */
  .btn-outline-primary {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-blue-600 text-blue-600 bg-transparent
    hover:bg-blue-50
          dark:hover:bg-blue-900
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                                                                               transition-colors duration-150;
  }

  /* Outline – Success */
  .btn-outline-success {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-green-600 text-green-600 bg-transparent
    hover:bg-green-50
          dark:hover:bg-green-900
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
                                                                               transition-colors duration-150;
  }

  /* Outline – Danger */
  .btn-outline-danger {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-red-600 text-red-600 bg-transparent
    hover:bg-red-50
          dark:hover:bg-red-900
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                                                                               transition-colors duration-150;
  }

  /* Outline – Secondary */
  .btn-outline-secondary {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-gray-500 text-gray-700 bg-transparent
    hover:bg-gray-50
          dark:text-gray-200 dark:border-gray-400 dark:hover:bg-gray-800
                                                             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
                                                                                                                       transition-colors duration-150;
  }

  /* Outline – Dark */
  .btn-outline-dark {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-gray-900 text-gray-900 bg-transparent
    hover:bg-gray-100
          dark:text-gray-100 dark:border-gray-100 dark:hover:bg-gray-800
                                                             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
                                                                                                                       transition-colors duration-150;
  }

  /* Outline – Light */
  .btn-outline-light {
    @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg text-sm font-medium
    border border-gray-200 text-gray-700 bg-transparent
    hover:bg-gray-50
          dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700
                                                             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300
                                                                                                                       transition-colors duration-150;
  }
}



@layer components {

    .btn {
        @apply inline-block bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-1 px-2 rounded;
    }

    /* .btn-sm { */
    /*     @apply text-sm inline-block bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-1 px-2 rounded; */
    /* } */

    .pagination {
        @apply flex justify-center;
        @apply my-8 py-2;

        .active a {
            @apply bg-gray-400;
        }

        .page-item {
            @apply m-0 p-0;
        }
    }

    .pagination * {
        @apply px-3 py-2 mx-1;
        @apply text-gray-700 no-underline rounded-lg;
    }

    .pagination a {
        @apply bg-gray-200;
    }

    .pagination a:hover {
        @apply text-gray-200 bg-gray-700;
    }
}


.flash {
    z-index: 99999;
    position:fixed;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);

    max-width: 100%;
    width: max-content;
    padding: 0 var(--space-m);
    animation: appear-then-fade 3s both;
}

.flash-notice { z-index: 99999; transform: translateX(-50%); animation: appear-then-fade 3s both; }

.nav-item {
    @apply text-gray-600 hover:text-blue-500;
}

.nav-item-active {
    @apply text-blue-600 hover:text-blue-400;
}

.nav-item-icon {
    @apply inline-block size-4;
}


.footer {
  @apply bg-white text-center pt-3 text-sm px-8 mt-auto pb-5 z-50;
}

.footer a {
    @apply underline;
}



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

  a:first-child {
    @apply text-purple-400;
  }

  a:last-child {
    @apply text-purple-400;
  }
}

/* @import "trix/dist/trix"; */
/* @import 'actiontext.css'; */