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

body {
  @apply bg-neutral-50 text-black dark:bg-neutral-950 dark:text-white;
}

@layer components {
  details>summary.summary-unstyled {
    list-style: none;
  }

  .summary-unstyled::-webkit-details-marker {
    display: none;
  }

  .contain {
    @apply container mx-auto px-2;
  }

  .body-1 {
    @apply font-sans text-lg;
  }

  .body-2 {}

  .body-3 {
    @apply font-sans text-sm;
  }

  .heading-1 {
    @apply font-sans font-bold text-4xl;
  }

  .heading-2 {
    @apply font-sans font-bold text-3xl;
  }

  .heading-3 {
    @apply font-sans font-bold text-2xl;
  }

  .heading-4 {
    @apply font-sans font-bold text-xl;
  }

  .markdown {
    @apply prose max-w-full;
    @apply prose-headings:m-0 prose-headings:pb-4 prose-headings:text-black dark:prose-headings:text-white;
    @apply prose-p:m-0 prose-p:pb-[1rem] prose-p:text-black dark:prose-p:text-white;
    @apply prose-ul:m-0 prose-ul:pb-[1rem] prose-ul:pl-0;
    @apply prose-ol:m-0 prose-ol:pb-[1rem] prose-ol:pl-0;
    @apply prose-li:m-0 prose-li:list-inside prose-li:text-black dark:prose-li:text-white;
    @apply prose-a:text-indigo-600 dark:prose-a:text-indigo-400;
    @apply prose-strong:text-black dark:prose-strong:text-white;
    @apply marker:text-inherit;
  }

  .markdown {

    ul ul,
    ol ul,
    ul ol {
      @apply pb-0 pl-6;
    }
  }

  .markdown li p {
    display: inline;
  }

  .btn-group {
    @apply flex flex-col flex-wrap gap-1.5 md:items-center md:flex-row;
  }

  .btn-primary,
  .btn-secondary {
    @apply inline-block px-3 py-1.5 border rounded cursor-pointer font-medium text-[16px] text-center transition-all duration-300 ease-in-out;
  }

  .btn-primary {
    @apply bg-indigo-800 border-indigo-800 text-white text-center hover:bg-indigo-700 hover:border-indigo-500 dark:bg-indigo-600 dark:border-indigo-600 dark:hover:bg-indigo-500 dark:hover:border-indigo-500;
  }

  .btn-primary:active {
    @apply bg-indigo-900 border-indigo-900 dark:bg-indigo-700 dark:border-indigo-800 transform scale-[0.98];
  }

  .btn-secondary {
    @apply bg-slate-200 border-slate-200 text-slate-700 hover:border-indigo-200 hover:bg-indigo-100 hover:text-indigo-700 dark:bg-neutral-800 dark:border-neutral-800 dark:text-white dark:hover:bg-neutral-700 dark:hover:border-neutral-700;
  }

  .btn-secondary:active {
    @apply bg-slate-300 border-slate-300 dark:bg-neutral-900 dark:border-neutral-900 transform scale-[0.98];
  }

  .btn-text {
    @apply inline-block underline-offset-4 font-medium text-center text-indigo-800 cursor-pointer transition-all duration-300 ease-in-out hover:text-indigo-900 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300;
  }

  .link {
    @apply underline-offset-4 font-medium text-indigo-800 cursor-pointer transition-all duration-300 ease-in-out hover:text-indigo-900 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300;
  }

  .tabs {
    @apply flex items-center flex-wrap;
  }

  .tab {
    @apply block py-2 px-4 font-medium text-indigo-700 border-b-2 border-indigo-200 hover:bg-indigo-50 dark:text-indigo-400 dark:border-indigo-900 dark:hover:bg-indigo-900;
  }

  .tab.tab-active {
    @apply bg-indigo-50 dark:bg-indigo-900 dark:text-white font-semibold border-b-indigo-500 dark:border-b-indigo-400;
  }

  .chip {
    @apply bg-slate-100 border border-slate-200 text-slate-600 rounded-md inline-block py-0.5 px-1.5 font-bold text-xs uppercase whitespace-nowrap dark:bg-neutral-800 dark:border-neutral-800 dark:text-neutral-300;
  }

  .chip.indeterminate {
    @apply bg-blue-100 border-blue-200 text-blue-900 dark:bg-blue-900/30 dark:border-blue-800/60 dark:text-blue-200;
  }

  .chip.done {
    @apply bg-emerald-100 border-emerald-200 text-emerald-900 dark:bg-emerald-900/30 dark:border-emerald-800/60 dark:text-emerald-200;
  }

  .chip.epic {
    @apply bg-violet-200 border-violet-200 text-violet-800 dark:bg-violet-900/30 dark:border-violet-800/60 dark:text-violet-200 truncate max-w-[20ch];
  }

  .chip.type {
    @apply relative bg-transparent border-transparent;

    &:before {
      @apply absolute bg-[currentColor] opacity-20 dark:opacity-15 inset-0 rounded-md;
      content: "";
    }
  }

  .tag-warning {
    @apply rounded-md py-0.5 px-0.5 bg-orange-100 border-orange-200 text-orange-900 dark:bg-orange-900/30 dark:border-orange-800/60 dark:text-orange-200;
  }

  .tag-error {
    @apply rounded-md py-0.5 px-0.5 bg-red-100 border-red-200 text-red-900 dark:bg-red-900/30 dark:border-red-800/60 dark:text-red-200;
  }

  label {
    @apply block text-sm mb-0.5 font-semibold cursor-pointer;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    @apply py-2 px-2 border rounded-sm border-slate-300 placeholder-slate-400 w-full md:max-w-[400px] dark:bg-neutral-900 dark:text-white dark:border-neutral-700 dark:placeholder-neutral-400;
  }

  textarea {
    @apply h-[100px];
  }

  /* Fix date picker icon in dark mode */
  input[type="date"]::-webkit-calendar-picker-indicator {
    @apply dark:invert;
  }

  /* Improve focus states for dark mode */
  input:focus,
  select:focus,
  textarea:focus {
    @apply outline-none ring-2 ring-indigo-500/50 dark:ring-indigo-400/70;
  }

  .data-grid {
    @apply w-full body-2 text-left;

    th,
    td {
      @apply p-2 border-b align-middle transition-all duration-100 ease-in-out dark:border-b-neutral-800;
    }

    tbody tr:nth-child(even) {
      @apply dark:bg-neutral-950/70;
    }
  }

  .data-grid tr:hover {
    td {
      @apply bg-neutral-50 border-b-black/30 dark:bg-neutral-800 dark:border-b-neutral-700;
    }
  }

  .data-grid.grande {

    th,
    td {
      @apply align-top;
    }
  }

  .data-grid .btn-text {
    @apply text-left;
  }

  details.unstyled summary::-webkit-details-marker {
    @apply hidden;
  }

  .level-headings {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      @apply text-lg font-bold;
    }
  }

  .modal {
    @apply w-[95vw] h-[95vh] rounded-xl p-8 border border-black/10 shadow-xl;

    .modal-header {
      @apply flex items-center gap-4 justify-between mb-6;
    }

    button {
      @apply cursor-pointer text-3xl block;
    }

    a {
      @apply underline cursor-pointer hover:no-underline underline-offset-4;
    }
  }

  dialog::backdrop {
    backdrop-filter: blur(10px);
  }

  /* Misc */
  .mobile-nav {
    display: none;
  }

  .is-open {
    .mobile-nav {
      display: flex;
    }
  }

  #project_description,
  #tab_content {
    max-width: 600px;
    height: 300px;
  }


  #post_content,
  #meeting_notes,
  #wiki_page_content {
    @apply max-w-full h-[500px];
  }

  .wiki-page pre {
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
  }

  /* Markdown task list styling */
  .markdown .task-list-item {
    @apply list-none flex items-start gap-2 mb-1;
  }

  .markdown .task-list-item-checkbox {
    @apply mt-1 flex-shrink-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 cursor-default;
  }

  .markdown .task-list-item-checkbox:checked {
    @apply bg-blue-600 border-blue-600 dark:bg-blue-600 dark:border-blue-600;
  }

  /* Pagination */
  .pagination {
    @apply mt-4;

    a,
    span,
    em {
      @apply inline-block border px-3 py-1 rounded-md not-italic dark:border-neutral-700;
    }

    a {
      @apply border-black font-medium hover:bg-black hover:text-white dark:border-neutral-600 dark:hover:bg-neutral-700;
    }

    .current {
      @apply dark:bg-neutral-800;
    }
  }
}
/*
 * 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.
 *


 */

.space-the-final-frontier {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 1px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: -42vw -4vh 0px 0px #fff, 25vw -41vh 0px 0px #fff,
    -20vw 49vh 0px 1px #fff, 5vw 40vh 1px 1px #fff, 29vw 19vh 1px 0px #fff,
    -44vw -13vh 0px 0px #fff, 46vw 41vh 0px 1px #fff, -3vw -45vh 0px 1px #fff,
    47vw 35vh 1px 0px #fff, 12vw -8vh 1px 0px #fff, -34vw 48vh 1px 1px #fff,
    32vw 26vh 1px 1px #fff, 32vw -41vh 1px 1px #fff, 0vw 37vh 1px 1px #fff,
    34vw -26vh 1px 0px #fff, -14vw -49vh 1px 0px #fff, -12vw 45vh 0px 1px #fff,
    -44vw -33vh 0px 1px #fff, -13vw 41vh 0px 0px #fff, -36vw -11vh 0px 1px #fff,
    -23vw -24vh 1px 0px #fff, -38vw -27vh 0px 1px #fff, 16vw -19vh 0px 0px #fff,
    28vw 33vh 1px 0px #fff, -49vw -4vh 0px 0px #fff, 16vw 32vh 0px 1px #fff,
    36vw -18vh 1px 0px #fff, -25vw -30vh 1px 0px #fff, -23vw 24vh 0px 1px #fff,
    -2vw -35vh 1px 1px #fff, -25vw 9vh 0px 0px #fff, -15vw -34vh 0px 0px #fff,
    -8vw -19vh 1px 0px #fff, -20vw -20vh 1px 1px #fff, 42vw 50vh 0px 1px #fff,
    -32vw 10vh 1px 0px #fff, -23vw -17vh 0px 0px #fff, 44vw 15vh 1px 0px #fff,
    -40vw 33vh 1px 1px #fff, -43vw 8vh 0px 0px #fff, -48vw -15vh 1px 1px #fff,
    -24vw 17vh 0px 0px #fff, -31vw 50vh 1px 0px #fff, 36vw -38vh 0px 1px #fff,
    -7vw 48vh 0px 0px #fff, 15vw -32vh 0px 0px #fff, 29vw -41vh 0px 0px #fff,
    2vw 37vh 1px 0px #fff, 7vw -40vh 1px 1px #fff, 15vw 18vh 0px 0px #fff,
    25vw -13vh 1px 1px #fff, -46vw -12vh 1px 1px #fff, -18vw 22vh 0px 0px #fff,
    23vw -9vh 1px 0px #fff, 50vw 12vh 0px 1px #fff, 45vw 2vh 0px 0px #fff,
    14vw -48vh 1px 0px #fff, 23vw 43vh 0px 1px #fff, -40vw 16vh 1px 1px #fff,
    20vw -31vh 0px 1px #fff, -17vw 44vh 1px 1px #fff, 18vw -45vh 0px 0px #fff,
    33vw -6vh 0px 0px #fff, 0vw 7vh 0px 1px #fff, -10vw -18vh 0px 1px #fff,
    -19vw 5vh 1px 0px #fff, 1vw 42vh 0px 0px #fff, 22vw 48vh 0px 1px #fff,
    39vw -8vh 1px 1px #fff, -6vw -42vh 1px 0px #fff, -47vw 34vh 0px 0px #fff,
    -46vw 19vh 0px 1px #fff, -12vw -32vh 0px 0px #fff, -45vw -38vh 0px 1px #fff,
    -28vw 18vh 1px 0px #fff, -38vw -46vh 1px 1px #fff, 49vw -6vh 1px 1px #fff,
    -28vw 18vh 1px 1px #fff, 10vw -24vh 0px 1px #fff, -5vw -11vh 1px 1px #fff,
    33vw -8vh 1px 0px #fff, -16vw 17vh 0px 0px #fff, 18vw 27vh 0px 1px #fff,
    -8vw -10vh 1px 1px #fff;

  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */

  box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff,
    -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff,
    4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff,
    -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff,
    4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff,
    -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff,
    -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff,
    48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff,
    43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff,
    39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff,
    11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff,
    -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff,
    42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff,
    -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff,
    18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff,
    27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff,
    -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff,
    -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff,
    -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff,
    48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff,
    21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff,
    -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff,
    -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff,
    3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff,
    35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff,
    3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff,
    48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff,
    -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff,
    29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
  animation: zoom 20s forwards;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-50px);
  }
  100% {
    transform: translatey(0px);
  }
}