/* 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-4 md:p-6 overflow-scroll overflow-x-auto mb-6;
  }

  /* LINKS & BUTTONS */

  a.link, button.link {
    @apply text-abel-tasman-600 hover:text-abel-tasman-700 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-700 rounded focus:outline-none focus:ring-2 focus:ring-abel-tasman-500 focus:ring-offset-4;
    }
  }

  /* BUTTONS */
  .btn {
    /* abel-tasman-600 (#007a92) gives white text 5.0:1, passing WCAG AA;
       -500 was 3.3:1. Reserve -500 for decorative use (icons, focus rings). */
    @apply w-full md:w-auto inline-flex items-center justify-center bg-abel-tasman-600 hover:bg-abel-tasman-700 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-abel-tasman-500 focus:ring-offset-2;
  }
  .btn-secondary {
    /* Light fill + dark text (~13:1). White on whenua-400 was 2.7:1 - no shade
       of white-on-mid-grey passes AA, so the secondary reads as a quiet button. */
    @apply bg-whenua-200 hover:bg-whenua-300 text-whenua-900;
  }
  .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-200 py-3 px-4 pr-6 rounded leading-tight focus:outline-none focus:border-whenua-500;
  }
  .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;
  }
  /* Wide enough for a whole dd/mm/yyyy date and the picker icon */
  .field-date {
    @apply w-full md:w-48;
  }

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

  /* A form row's checkbox and anything beside it, level with the row's
     label: one 20px line, the box's height, offset as the dt is. */
  .check-field {
    @apply inline-flex items-center gap-2 leading-5 md:pt-1;
  }

  dl.labels-centred .check-field {
    @apply md:pt-3.5;
  }

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

  /* TABLES */

  table {
    @apply w-full mb-6;

    thead {

      tr {
        border-top: 4px solid var(--color-whenua-100);
        border-bottom: 4px solid var(--color-whenua-100);
      }

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

    tbody {
      tr {
        border-bottom: 2px solid var(--color-whenua-100);
      }
    }

    td,
    th {
      @apply px-2 py-2.5 md:px-2.5;
    }
  }

  /* AI PROMPTS (digest section prompts): code styling, sitting directly on
     the card rather than in a filled box. */
  .prompt {
    @apply font-mono text-sm text-whenua-700 whitespace-pre-wrap;
    overflow-wrap: anywhere;
  }

  /* DIGEST DIFFS (DigestDiff) */

  /* Body size, like the section content, whatever size the surrounding card
     uses. Wide tables scroll inside the diff, not the page. */
  .diff-rendered {
    @apply text-base overflow-x-auto;
  }

  .diff-rendered ins {
    @apply bg-kahurangi-100 text-kahurangi-700 no-underline;
  }

  .diff-rendered del {
    @apply bg-ruby-bay-100 text-ruby-bay-600 line-through;
  }

  /* Strikethrough written in the content, not a removal. */
  .diff-rendered s {
    @apply text-whenua-500 line-through;
  }

  .diff-rendered tr.diff-row-added {
    @apply bg-kahurangi-100 text-kahurangi-700;
  }

  .diff-rendered tr.diff-row-removed {
    @apply bg-ruby-bay-100 text-ruby-bay-600 line-through;
  }

  .diff-rendered tr.diff-row-changed {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }

  .diff-raw {
    @apply text-sm;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.6;
  }

  /* Long lines and unbroken tokens (URLs, table rows) wrap rather than
     scroll; wrapped lines indent past the +/- marker. */
  .diff-raw .raw-line {
    @apply whitespace-pre-wrap min-h-[1.6em] pl-4 -indent-4;
    overflow-wrap: anywhere;
  }

  .diff-raw .raw-marker {
    @apply inline-block w-4 indent-0 text-whenua-400 select-none;
  }

  .diff-raw .raw-added {
    @apply bg-kahurangi-100;
  }

  .diff-raw .raw-removed {
    @apply bg-ruby-bay-100;
  }

  .diff-raw ins {
    @apply bg-kahurangi-200 text-kahurangi-800 no-underline;
  }

  .diff-raw del {
    @apply bg-ruby-bay-200 text-ruby-bay-700 no-underline;
  }

  /* 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-200 pl-4 italic text-whenua-600 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-700 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-400 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 */

  /* Fully rounded so lozenges read as a distinct shape from buttons (rounded).
     Matches Hive's shared lozenge style. */
  span.pill {
    @apply py-1 px-3 rounded-full;
  }
  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-kahurangi-100 text-kahurangi-700;
  }

  span.active {
    @apply bg-white border border-whenua-200;
  }
  /* Light-tint/dark-text so it clears WCAG AA (the old white-on-mid-green and
     white-on-tan fills failed 4.5:1). */
  span.exited {
    @apply bg-kahurangi-100 text-kahurangi-700;
  }
  span.written_off,
  span.archived {
    @apply bg-whenua-100 text-whenua-700;
  }

  /* 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-700;
  }
  span.notes {
    @apply bg-kahurangi-100 text-kahurangi-700;
  }

  /* Digest section kinds: from the type's template, or custom to one
     organisation */
  span.template {
    @apply bg-whenua-100 text-whenua-700;
  }
  span.custom {
    @apply bg-kahurangi-100 text-kahurangi-700;
  }

  /* Cap table labels (shareholder kind, agent entry): neutral, since they
     label rather than signal status */
  span.cap-kind {
    @apply bg-whenua-100 text-whenua-700;
  }

  /* Cap table security types: equity stays neutral, so the dilutive
     instruments and notes stand out from it */
  span.cap-type-shares {
    @apply bg-whenua-100 text-whenua-700;
  }
  span.cap-type-options {
    @apply bg-abel-tasman-100 text-abel-tasman-700;
  }
  span.cap-type-warrants {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }
  span.cap-type-notes {
    @apply bg-heaphy-100 text-heaphy-700;
  }

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

  /* A document filed without an AI summary */
  span.not-summarised {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }

  /* Cap table: an amount (or a total including one) that isn't known yet */
  .cap-unknown {
    @apply rounded bg-golden-bay-100 px-1 text-golden-bay-700;
  }

  /* Row tint: the 100 step mixed into white, since every ramp's 50 step
     is a near-neutral off-white that barely shows. Opaque, so the share
     register's pinned column can inherit it. */
  tr.cap-hoku {
    background-color: color-mix(in srgb, var(--color-heaphy-100) 40%, white);
  }

  /* Share register: the holder column stays put while the classes scroll
     beneath it, so its cells need an opaque background. */
  table.cap-register {
    th:first-child,
    td:first-child {
      @apply sticky left-0 z-10 bg-white;
    }

    tr.cap-hoku td:first-child {
      background-color: inherit;
    }
  }

  /* Movement lists: a snapshot sits among the movements as a divider, and
     the movements it covers carry its camera. */
  tr.cap-snapshot-divider {
    border-top: 4px solid var(--color-whenua-100);

    td {
      @apply py-2 text-sm text-whenua-700;
    }
  }
  .cap-before {
    @apply inline-flex text-whenua-400;
  }

  /* Cap forms: labels line up with the middle of a single-line field, and
     with the first line of a multi-row one (textarea, grid). */
  dl.labels-centred {
    dt {
      @apply md:pt-3.5;
    }
  }

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

  /* Upload status pills */
  span.processing {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }
  span.completed {
    @apply bg-kahurangi-100 text-kahurangi-700;
  }
  span.failed {
    @apply bg-ruby-bay-100 text-ruby-bay-700;
  }
  span.pending {
    @apply bg-golden-bay-100 text-golden-bay-700;
  }

}

@layer base {

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