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

@layer base {
  *,
  ::before,
  ::after {
    @apply border-neutral-300;
    @apply dark:border-neutral-700;
  }

  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    @apply rounded;
    @apply border-neutral-500;
    @apply dark:bg-black dark:border-neutral-700;
  }

  label {
    @apply font-semibold;
  }

  body {
    @apply flex flex-col;
    @apply bg-neutral-50 text-neutral-950;
    @apply dark:bg-neutral-950 dark:text-neutral-50;
  }
}

@layer components {
  /* -------------------------------------------------------------------
   * Main
   * ------------------------------------------------------------------- */

  main.with-fixed-navbar {
    padding-top: 56px;
  }

  /* -------------------------------------------------------------------
   * Misc
   * ------------------------------------------------------------------- */

  .read-more {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--read-more-line-clamp, 4);
  }

  /* -------------------------------------------------------------------
   * Links
   * ------------------------------------------------------------------- */

  .link {
    @apply text-blue-700;
    @apply dark:text-blue-500;
  }

  /* -------------------------------------------------------------------
   * Containers
   * ------------------------------------------------------------------- */

  .container {
    @apply max-w-screen-lg;
  }

  /* -------------------------------------------------------------------
   * Content
   * ------------------------------------------------------------------- */

  .content {
    @apply prose prose-neutral;
    @apply dark:prose-invert;
    @apply prose-ul:m-0 prose-ul:p-0;
    @apply prose-ol:m-0 prose-ol:p-0;
    @apply prose-li:m-0;
    @apply prose-blockquote:m-0
  }

  /* -------------------------------------------------------------------
   * Buttons
   * ------------------------------------------------------------------- */

  .button {
    @apply px-3 py-2 rounded text-center flex flex-col items-center justify-center;
  }

  .button--sm {
    @apply px-2 py-1 text-sm;
  }

  .button--lg {
    @apply px-4 py-3 text-lg;
  }

  .button--icon {
    @apply py-3;
  }

  .button--primary {
    @apply bg-blue-700 hover:bg-blue-600 text-neutral-50;
    @apply dark:bg-blue-800 dark:hover:bg-blue-700 dark:text-neutral-50;
  }

  .button--secondary {
    @apply bg-neutral-600 hover:bg-neutral-500 text-neutral-50;
    @apply dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-50;
  }

  .button--success {
    @apply bg-green-700 hover:bg-green-600 text-neutral-50;
  }

  .button--warning {
    @apply bg-amber-700 hover:bg-amber-600 text-neutral-50;
  }

  .button--danger {
    @apply bg-red-700 hover:bg-red-600 text-neutral-50;
  }

  .button--info {
    @apply bg-cyan-700 hover:bg-cyan-600 text-neutral-50;
  }

  .button--cancel {
    @apply bg-neutral-700 hover:bg-neutral-600 text-neutral-50;
  }

  .button[disabled] {
    @apply cursor-not-allowed;
    @apply bg-neutral-300 text-neutral-500;
    @apply dark:bg-neutral-800 dark:text-neutral-500;
  }

  /* .button--list {
    @apply border rounded;
    @apply bg-neutral-100 hover:bg-neutral-200 text-neutral-950;
    @apply dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-50;
  } */

  /* -------------------------------------------------------------------
   * Page
   * ------------------------------------------------------------------- */

  .page {
    @apply flex flex-col;
  }

  .page__header {
    /* @apply flex flex-col justify-center border-b; */
    @apply flex flex-col justify-center border-b;
    @apply bg-white;
    @apply dark:bg-black;
  }

  .page__header__content {
    @apply container flex items-center min-h-16;
  }

  .page__header__actions {
    @apply flex gap-4 ml-auto;
  }

  .page__header__subnav {
    @apply container flex items-center;
  }

  .page__title {
    @apply text-2xl font-semibold;
  }

  .page__header h1 {
    @apply page__title;
  }

  .page__section {
    @apply container my-4;
  }

  .page__actions {
    @apply container flex flex-wrap items-center gap-4 my-8;
  }

  /* -------------------------------------------------------------------
   * Subnav
   * ------------------------------------------------------------------- */

  .subnav {
    @apply container px-0;
  }

  .subnav__tabs {
    @apply flex flex-row gap-1;
  }

  .subnav__tab__link {
    @apply inline-block px-4 py-3 rounded-t;
    @apply bg-neutral-200 hover:bg-neutral-300;
    @apply dark:bg-neutral-800 dark:hover:bg-neutral-700;
  }

  .subnav__tab__link--active {
    @apply bg-blue-700 hover:bg-blue-700 text-white;
    @apply dark:bg-blue-700 dark:hover:bg-blue-700 dark:text-white;

    /* @apply bg-neutral-200 hover:bg-neutral-200; */
    /* @apply dark:bg-neutral-800 dark:hover:bg-neutral-800; */
  }

  /* -------------------------------------------------------------------
   * Breadcrumbs
   * ------------------------------------------------------------------- */

  .breadcrumbs {
    @apply flex flex-wrap items-center gap-2;
  }

  .breadcrumbs__item {
    @apply text-xl font-semibold;
  }

  .breadcrumbs__separator {
    @apply text-xl last:hidden;
    @apply text-neutral-500;
  }

  /* -------------------------------------------------------------------
   * Tabs
   * ------------------------------------------------------------------- */

  .tabs {
    @apply flex flex-row border-b;
    @apply border-blue-700;
    @apply dark:border-blue-800;
  }

  .tabs > li > a {
    @apply inline-block px-4 py-3 rounded-t;
    @apply hover:bg-neutral-100;
    @apply dark:hover:bg-neutral-800;
  }

  .tabs > li > a.active {
    @apply bg-neutral-300;
    @apply bg-blue-700 text-neutral-50;
    @apply dark:bg-blue-800;
  }

  /* -------------------------------------------------------------------
   * List
   * ------------------------------------------------------------------- */

  .list > li {
    @apply border-b last:border-b-0;
    @apply bg-white;
    @apply dark:bg-black;
  }

  .list__item {
    @apply px-3 py-2;
  }

  .list__item--hoverable {
    /* @apply cursor-pointer; */
    @apply hover:bg-gray-50;
    @apply dark:hover:bg-neutral-950;
  }

  .list__item--active {
    @apply bg-neutral-200 hover:bg-neutral-200;
    @apply dark:bg-neutral-800 dark:hover:bg-neutral-800;
  }

  .list__item__title {
    @apply font-semibold;
  }

  .list__item__subtitle {
    @apply text-gray-500;
    @apply dark:text-gray-400;
  }

  /* .list__item__checkbox {
    @apply inline-block my-2;
  } */

  /* -------------------------------------------------------------------
   * Card
   * ------------------------------------------------------------------- */

  .card {
    @apply flex flex-col;
  }

  .card__header {
    @apply px-3 py-2 border border-b-0 rounded-t;
    @apply bg-neutral-100;
    @apply dark:bg-neutral-900;
  }

  .card__header__title {
    @apply font-semibold;
  }

  .card__content {
    @apply border;
  }

  .card__footer {
    @apply flex gap-2 p-2 border border-t-0;
    @apply bg-neutral-100;
    @apply dark:bg-neutral-900;
  }

  /* -------------------------------------------------------------------
   * Dropdown
   * ------------------------------------------------------------------- */

  .dropdown {
    @apply relative;
  }

  .dropdown__activator {
    @apply inline-block px-3 py-3 min-w-fit text-center;
    @apply hover:bg-neutral-100;
    @apply dark:hover:bg-neutral-800;
  }

  .dropdown__activator__indicator {
    @apply ml-2;
  }

  .dropdown__menu {
    @apply flex flex-col z-10 absolute transition transform origin-top-right rounded border whitespace-nowrap shadow;
    @apply bg-white;
    @apply dark:bg-neutral-900;
  }

  .dropdown__menu__item {
    @apply text-left inline-block w-full px-4 py-3 last:rounded-b;
    @apply hover:bg-neutral-100;
    @apply dark:hover:bg-neutral-800;
  }

  /* -------------------------------------------------------------------
   * Table
   * ------------------------------------------------------------------- */

  .table {
    @apply w-full;

    thead {
      @apply border-b;
    }

    thead th {
      @apply px-3 py-2 border-r last:border-r-0;
    }

    tbody {
      tr:nth-child(even) {
        @apply bg-neutral-100;
        @apply dark:bg-neutral-900;
      }

      tr:nth-child(odd) {
        @apply bg-white;
        @apply dark:bg-black;
      }

      td {
        @apply px-3 py-2 border-r last:border-r-0;
      }
    }
  }

  /* -------------------------------------------------------------------
   * Data table
   * ------------------------------------------------------------------- */

  .datatable {
    @apply w-full border rounded;
  }

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

  .datatable > table > thead > tr > th {
    @apply text-left px-3 py-2 border-b border-r last:border-r-0;
  }

  .datatable > table > tbody > tr > td {
    @apply px-3 py-2 border-b border-r last:border-r-0;
  }

  /* -------------------------------------------------------------------
   * SimpleCalendar
   * ------------------------------------------------------------------- */

  .simple-calendar {
    table {
      -webkit-border-horizontal-spacing: 0px;
      -webkit-border-vertical-spacing: 0px;

      /* @apply bg-transparent border border-collapse box-border max-w-full w-full; */
      @apply border-t border-collapse box-border max-w-full w-full;
      @apply bg-white;
      @apply dark:bg-black;
    }

    tr {
      @apply border-collapse;
    }

    th {
      /* @apply p-1 border-b-2 border-l border-r border-t-0 border-collapse box-border text-left w-[14%] font-semibold; */
      @apply px-2 py-1 border-b-2 border-r last:border-r-0 border-collapse box-border text-left w-[14%] font-semibold text-sm h-8 bg-neutral-100 dark:bg-neutral-900;
    }

    td {
      /* @apply p-1 border border-collapse w-[14%] align-top; */
      @apply px-2 py-1 border-t border-r last:border-r-0 border-collapse w-[14%] align-top text-sm;
    }

    .calendar-heading {
      @apply p-3 flex flex-col gap-2 items-center;
    }

    .calendar-heading nav {
      @apply flex flex-row gap-2 w-full;
    }

    .day {
      @apply h-10;
    }

    /* .wday-0 {} */
    /* .wday-1 {} */
    /* .wday-2 {} */
    /* .wday-3 {} */
    /* .wday-4 {} */
    /* .wday-5 {} */
    /* .wday-6 {} */

    .today {
      @apply bg-yellow-100;
      @apply dark:bg-yellow-950;
    }

    /* .past {} */
    /* .future {} */

    .start-date {
      @apply bg-blue-100;
      @apply dark:bg-blue-900;
    }

    .prev-month {
      @apply bg-neutral-200;
      @apply dark:bg-neutral-800;
    }

    .next-month {
      @apply bg-neutral-200;
      @apply dark:bg-neutral-800;
    }

    /* .current-month {} */

    /* .has-events {} */
  }

  /* -------------------------------------------------------------------
   * SimpleCalendar custom year view
   * ------------------------------------------------------------------- */

  .simple-calendar {
    /* .month-group {
    } */

    .year-grid {
      @apply flex flex-col;
      @apply bg-white;
      @apply dark:bg-black;
    }

    .month-group {
      @apply grid grid-cols-3;
    }

    .month {
      @apply px-4 py-3 text-center border-t border-r last:border-r-0;
      @apply hover:bg-neutral-200;
      @apply hover:dark:bg-neutral-800;
    }

    .month.today {
      @apply hover:bg-yellow-200;
      @apply hover:dark:bg-yellow-900;
    }

    .month.start-date {
      @apply hover:bg-blue-200;
      @apply hover:dark:bg-blue-800;
    }
  }
}

@layer utilities {
  .animation-delay-1000 {
    animation-delay: 1000ms;
  }

  .animation-delay-2000 {
    animation-delay: 2000ms;
  }

  .animation-delay-3000 {
    animation-delay: 3000ms;
  }

  .animation-delay-4000 {
    animation-delay: 4000ms;
  }

  .animation-delay-5000 {
    animation-delay: 5000ms;
  }
}
/*
 * 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.
 *


 */