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

@layer components {
  /* Custom select styling to match other form inputs */
  .form-select {
    @apply appearance-none bg-no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  /* Rich text from the TinyMCE editor (news alerts, chat and logistics messages,
     tournament info, event descriptions) is shown inside a `.prose` wrapper.
     Tailwind's preflight removes the markers and indent from every ul/ol, and
     the typography plugin that `.prose` normally comes from is not installed,
     so bullet points and numbered lists showed as plain lines. These rules put
     the list styling back for rich text only. :where() keeps the specificity
     low, so a utility class on a list (e.g. list-none) still wins. */
  .prose :where(ul) {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose :where(ol) {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  /* Nested lists use a different marker so each level is easy to tell apart */
  .prose :where(ul ul, ol ul) {
    list-style-type: circle;
  }

  .prose :where(ol ol, ul ol) {
    list-style-type: lower-alpha;
  }

  .prose :where(li) {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
  }
}