/* Hide Alpine.js elements until loaded */
[x-cloak] { display: none !important; }

@layer components {

  /* HEADINGS */
  h1, h2, h3 {
    @apply font-character font-black;
  }

  h3 {
    @apply text-lg md:text-xl font-bold mb-4;
  }

  .feature-number {
    @apply font-content font-extralight;
  }

  /* SECTIONS */
  section {
    @apply w-full bg-white rounded-xl p-6 overflow-scroll overflow-x-auto mb-6;
  }

  /* LINKS & BUTTONS */

  a.link, button.link {
    @apply text-abel-tasman-600 hover:text-abel-tasman-800 rounded focus:outline-none focus:ring-2 focus:ring-abel-tasman-500 focus:ring-offset-4;
  }

  nav.pagination {
    span {
      @apply px-2;
    }
    span.current {
      @apply font-bold;
    }
    a {
      @apply text-abel-tasman-600 hover:text-abel-tasman-800 rounded focus:outline-none focus:ring-2 focus:ring-abel-tasman-500 focus:ring-offset-4;
    }
  }

  /* BUTTONS */
  .btn {
    @apply w-full md:w-auto inline-flex items-center justify-center bg-abel-tasman-400 hover:bg-abel-tasman-600 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-abel-tasman-600 focus:ring-offset-2;
  }
  .btn-secondary {
    @apply bg-whenua-200 hover:bg-whenua-300;
  }
  .btn-danger {
    @apply bg-ruby-bay-500 hover:bg-ruby-bay-700;
  }
  .btn-sm {
    @apply py-1.5 px-3 text-sm;
  }

  /* FORM FIELDS */
  .field {
    @apply w-full bg-white border border-whenua-100 py-3 px-4 pr-6 rounded leading-tight focus:outline-none focus:border-whenua-300;
  }
  .field-auto {
    @apply w-full md:w-auto;
  }
  .field-1\/2 {
    @apply w-full md:w-1/2;
  }
  .field-1\/3 {
    @apply w-full md:w-1/3;
  }
  .field-1\/6 {
    @apply w-full md:w-1/6;
  }

  .check-box {
    @apply h-5 w-5 rounded border-whenua-100 text-abel-tasman-400 focus:outline-none focus:ring-2 focus:ring-abel-tasman-700 focus:ring-offset-2;
  }

  input::-webkit-date-and-time-value {
    @apply py-3;
  }

  /* TABLES */

  table {
    @apply w-full mb-6;

    thead {

      tr {
        border-top: 4px solid #F6F5F2;
        border-bottom: 4px solid #F6F5F2;
      }

      th {
        @apply text-whenua-200 text-[0.8em] font-normal tracking-wide uppercase text-left;
      }
    }

    tbody {
      tr {
        border-bottom: 2px solid #F6F5F2;
      }
    }

    td,
    th {
      @apply p-2.5;
    }
  }

  /* DIFF VIEW (Diffy output) */

  .diff-view {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.5;
  }

  .diff-view ins {
    @apply bg-kakariki-100 text-kakariki-700 no-underline;
  }

  .diff-view del {
    @apply bg-ruby-bay-100 text-ruby-bay-600 no-underline;
  }

  .diff-view .diff {
    @apply whitespace-pre-wrap;
  }

  /* MARKDOWN CONTENT */

  .markdown {
    h2 {
      @apply text-xl font-bold mt-6 mb-3;
    }

    h3 {
      @apply text-lg font-bold mt-5 mb-2;
    }

    h4 {
      @apply text-base font-bold mt-4 mb-2;
    }

    p {
      @apply mb-4;
    }

    ul, ol {
      @apply mb-4 pl-6;
    }

    ul {
      @apply list-disc;
    }

    ol {
      @apply list-decimal;
    }

    li {
      @apply mb-1;
    }

    blockquote {
      @apply border-l-4 border-whenua-100 pl-4 italic text-whenua-300 my-4;
    }

    code {
      @apply bg-whenua-100 px-1 py-0.5 rounded text-sm;
    }

    pre {
      @apply bg-whenua-100 p-4 rounded mb-4 overflow-x-auto;

      code {
        @apply bg-transparent p-0;
      }
    }

    a {
      @apply text-abel-tasman-600 hover:text-abel-tasman-800 underline;
    }

    hr {
      @apply border-whenua-100 my-6;
    }
  }

  /* DEFINITION LISTS (for forms) */

  dl {
    @apply grid grid-cols-1 md:grid-cols-6 gap-2 md:gap-6;

    dt {
      @apply text-whenua-200 text-[0.8em] tracking-wide uppercase md:text-right md:pt-1;
    }

    dd {
      @apply md:col-span-5 mb-3 md:mb-0;
    }
  }

  /* STATUS PILLS */

  span.pill {
    @apply py-1 px-2 rounded;
  }
  header span.pill {
    @apply py-2 px-4;
  }

  /* Dunbar-specific status pills */
  span.venture {
    @apply bg-abel-tasman-100 text-abel-tasman-700;
  }
  span.fund {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }
  span.charity {
    @apply bg-kakariki-100 text-kakariki-700;
  }

  span.active {
    @apply bg-white border border-whenua-100;
  }
  span.exited {
    @apply text-white bg-kakariki-500;
  }
  span.written_off,
  span.archived {
    @apply text-white bg-whenua-400;
  }

  /* Document categories */
  span.investor_update {
    @apply bg-abel-tasman-100 text-abel-tasman-700;
  }
  span.financial {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }
  span.general {
    @apply bg-whenua-100 text-whenua-500;
  }
  span.notes {
    @apply bg-kakariki-100 text-kakariki-700;
  }

  /* New document indicator */
  span.new {
    @apply bg-amber-100 text-amber-700;
  }

  /* Funding document indicator */
  span.funding {
    @apply bg-purple-100 text-purple-700;
  }

  /* Digest version status pills */
  span.approved {
    @apply bg-kakariki-100 text-kakariki-700;
  }
  span.pending_review {
    @apply bg-amber-100 text-amber-700;
  }
  span.rejected {
    @apply bg-ruby-bay-100 text-ruby-bay-700;
  }
  span.superseded {
    @apply bg-whenua-100 text-whenua-500;
  }

  /* Upload status pills */
  span.processing {
    @apply bg-abel-tasman-100 text-abel-tasman-700;
  }
  span.completed {
    @apply bg-kakariki-100 text-kakariki-700;
  }
  span.failed {
    @apply bg-ruby-bay-100 text-ruby-bay-700;
  }

  /* Legacy status pills from Hive */
  span.draft,
  span.ignored {
    @apply bg-golden-bay-200;
  }

  span.pending,
  span.estimated {
    @apply bg-whenua-100;
  }

  span.closed,
  span.unknown {
    @apply text-white bg-ruby-bay-500;
  }

  span.exit,
  span.public,
  span.confirmed,
  span.resolved,
  span.completed {
    @apply text-white bg-kakariki-500;
  }

}

@layer base {

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}