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

@layer components {
  .tooltip.tooltip-black {
    --tooltip-color: #000000;
    --tooltip-text-color: #ffffff;
  }

  /* Chatbot assistant answers — restore list styling stripped by preflight */
  .chatbot-answer ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.375rem 0;
  }

  .chatbot-answer ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0.375rem 0;
  }

  .chatbot-answer li + li {
    margin-top: 0.25rem;
  }

  .chatbot-answer p + p,
  .chatbot-answer p + ul,
  .chatbot-answer p + ol,
  .chatbot-answer ul + p,
  .chatbot-answer ol + p {
    margin-top: 0.5rem;
  }

  .chatbot-wiggle {
    animation: chatbot-wiggle 0.9s ease-in-out 2;
  }

  /* ---- Competition guides ---- */

  /* Dashed grid wash behind the guides index hero */
  .guide-grid-wash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M 0 0.5 L 50 0.5 M 0.5 0 L 0.5 50' stroke='rgb(237,245,247)' stroke-dasharray='5,5' stroke-width='1'/%3E%3C/svg%3E");
  }

  /* Long-form guide article typography. Defined here rather than as inline
     utilities because the body is ~2,000 words of prose; @tailwindcss/typography's
     `prose` defaults diverge from the design enough that overriding them costs
     more than translating the rules directly. */
  .guide-body section {
    @apply pb-16;
  }

  /* For a section that opens with a table rather than a heading, so it needs
     less room beneath it than a full prose section */
  .guide-body section.guide-section-tight {
    @apply pb-12;
  }

  .guide-body section[id],
  .guide-body h3 {
    scroll-margin-top: 6rem;
  }

  .guide-body h2 {
    @apply mb-5 text-2xl md:text-3xl font-black leading-snug tracking-tight text-base-content text-pretty;
  }

  .guide-body h2 .teal {
    @apply text-primary;
  }

  .guide-body h3 {
    @apply mt-10 mb-4 text-lg font-bold tracking-tight text-base-content text-pretty;
  }

  .guide-body h3:first-child {
    @apply mt-0;
  }

  .guide-body p {
    @apply mb-5 text-base leading-relaxed text-base-content/70 text-pretty;
  }

  .guide-body p strong,
  .guide-body li strong {
    @apply text-base-content font-semibold;
  }

  .guide-body ul,
  .guide-body ol {
    @apply mb-6 pl-5 flex flex-col gap-3;
  }

  .guide-body ul {
    list-style: disc;
  }

  .guide-body ol {
    list-style: decimal;
  }

  .guide-body li {
    @apply text-base leading-relaxed text-base-content/70;
  }

  .guide-body li::marker {
    @apply text-primary;
  }

  .guide-body blockquote {
    @apply mb-5 py-5 px-6 bg-primary/10 border-l-[3px] border-primary rounded-r-lg text-lg italic font-semibold leading-normal text-base-content;
  }

  /* Callout */
  .guide-callout {
    @apply flex gap-4 mb-6 py-5 px-6 bg-primary/10 border border-primary/20 border-l-[3px] border-l-primary rounded-r-xl;
  }

  .guide-callout > .guide-callout-icon {
    @apply flex-none mt-0.5 text-primary;
  }

  .guide-body .guide-callout p {
    @apply mb-4;
  }

  .guide-body .guide-callout p:last-child {
    @apply mb-0;
  }

  .guide-body .guide-callout p.lead {
    @apply text-lg font-bold text-base-content;
  }

  /* Tick / cross lists. The `.guide-body` prefix is needed on every rule here:
     `.guide-body ul` already sets a disc marker and left padding, and outranks a
     single class on its own. */
  .guide-body .guide-marklist {
    @apply mb-6 p-0 flex flex-col gap-3;
    list-style: none;
  }

  .guide-body .guide-marklist li {
    @apply flex gap-3 items-start text-base leading-relaxed text-base-content/70;
  }

  .guide-body .guide-marklist .guide-mark {
    @apply flex-none mt-1 text-primary;
  }

  .guide-body .guide-marklist-crosses .guide-mark {
    @apply text-base-content/50;
  }

  /* Numbered steps: a bold lead-in phrase on its own line, then the detail */
  .guide-body .guide-steps {
    @apply pl-6 gap-5;
  }

  .guide-body .guide-steps > li {
    @apply pl-2;
  }

  .guide-body .guide-steps > li::marker {
    @apply font-bold text-primary;
  }

  .guide-body .guide-step-name {
    @apply block mb-1 text-base font-bold text-base-content;
  }

  /* Tables */
  .guide-table-wrap {
    @apply mb-6 border border-base-300 rounded-xl overflow-x-auto shadow-sm;
  }

  .guide-table-wrap table {
    @apply w-full border-collapse min-w-[520px];
  }

  .guide-table-wrap thead th {
    @apply bg-primary/10 py-4 px-5 text-left text-sm font-bold text-base-content whitespace-nowrap;
  }

  .guide-table-wrap tbody td {
    @apply py-4 px-5 border-t border-base-300 text-sm leading-normal text-base-content/70 align-top;
  }

  .guide-table-wrap tbody td:first-child {
    @apply text-base-content font-medium;
  }

  .guide-table-wrap tbody tr:hover td {
    @apply bg-base-200;
  }

  /* Prose links. Scoped to p/li rather than `.guide-body a` so it cannot reach the
     closing CTA, which is a direct child of .guide-final-card styled as a button —
     `.guide-body a` outranks the button's own utilities and would underline it and
     override its text colour. */
  .guide-body p a,
  .guide-body li a {
    @apply text-primary font-medium underline underline-offset-2 decoration-primary/40 hover:decoration-primary;
  }

  /* Screenshot embeds */
  .guide-shot {
    @apply flex items-center justify-center p-3 md:p-5 bg-base-200 border border-base-300 rounded-xl shadow-md overflow-hidden;
  }

  .guide-shot img {
    @apply block w-full h-auto rounded-lg;
  }

  /* Infographic */
  .guide-body figure {
    @apply mb-6;
  }

  .guide-figure-scroll {
    @apply overflow-x-auto border border-base-300 rounded-xl shadow-sm bg-base-100;
  }

  .guide-figure-scroll svg {
    @apply block w-full min-w-[560px] h-auto;
  }

  .guide-body figcaption {
    @apply mt-3 text-xs text-base-content/50 text-pretty;
  }

  /* Closing CTA card */
  .guide-final-card {
    @apply bg-primary/10 border border-primary/20 border-l-[3px] border-l-primary rounded-r-2xl p-8;
  }

  /* ---- Blog post body ---- */

  /* Long-form typography for ActionText blog bodies, defined explicitly for the
     same reason .guide-body is: the @tailwindcss/typography `prose` defaults do
     not match this design, and relying on them left paragraphs with no visible
     separation. The tag set here is exactly the one blog_automation's prompt
     allows an article to use, so anything the agent can emit is styled. */
  .lexxy-content p {
    @apply mb-4 text-base leading-relaxed text-base-content text-pretty;
  }

  .lexxy-content h2 {
    @apply mt-9 mb-3 text-2xl md:text-3xl font-black leading-snug tracking-tight text-base-content text-pretty;
  }

  .lexxy-content h3 {
    @apply mt-7 mb-3 text-lg font-bold tracking-tight text-base-content text-pretty;
  }

  .lexxy-content h2:first-child,
  .lexxy-content h3:first-child {
    @apply mt-0;
  }

  .lexxy-content ul,
  .lexxy-content ol {
    @apply mb-4 pl-5 flex flex-col gap-2;
  }

  .lexxy-content ul {
    list-style: disc;
  }

  .lexxy-content ol {
    list-style: decimal;
  }

  .lexxy-content li {
    @apply text-base leading-relaxed text-base-content;
  }

  .lexxy-content li::marker {
    @apply text-primary;
  }

  .lexxy-content p strong,
  .lexxy-content li strong {
    @apply text-base-content font-semibold;
  }

  .lexxy-content blockquote {
    @apply mb-4 py-4 px-6 bg-primary/10 border-l-[3px] border-primary rounded-r-lg text-lg italic font-semibold leading-normal text-base-content;
  }

  .lexxy-content p a,
  .lexxy-content li a {
    @apply text-primary font-medium underline underline-offset-2 decoration-primary/40 hover:decoration-primary;
  }

  /* ---- Blog post tables ---- */

  /* Never set the table to max-content: that opts every cell out of wrapping, so
     the table grows to the width of its longest line and scrolls at every
     viewport. It fills the column instead, and min-width is the floor that stops
     columns compressing past readable, which is what the wrapper scrolls. */
  .blog-table-wrap {
    @apply mb-6 overflow-x-auto;
  }

  .lexxy-content table {
    @apply w-full min-w-[520px] border-collapse text-sm;
  }

  /* Keyed on th/td rather than thead/tbody: the agent authors a thead, Lexxy
     re-serialises the same header row into tbody, and both must render alike. */
  .lexxy-content th {
    @apply bg-primary/10 py-3 px-4 text-left font-bold text-base-content;
  }

  .lexxy-content td {
    @apply py-3 px-4 border-t border-base-300 text-base-content align-top;
  }

  .lexxy-content td:first-child {
    @apply text-base-content font-medium;
  }

  /* Lexxy wraps every cell's content in a paragraph. Left alone it takes the
     article paragraph's margin and type scale, which stretches every row, so it
     is pinned back to the table's own. */
  .lexxy-content th > p,
  .lexxy-content td > p {
    @apply mb-0 text-sm;
  }
}

@keyframes chatbot-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-wiggle {
    animation: none;
  }
}

.session-form {
  margin: auto;
}

.devise-link-container {
  margin: 12px 0;

  a {
    margin-right: 12px;
    text-decoration: none;
    color: #00f;
  }
}

.subtle-background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49.294117647058826' height='49.294117647058826' viewBox='0 0 49.294117647058826 49.294117647058826'%3E%3Cpath d='M 0 0.5 L 49.294117647058826 0.5 M 0.5 0 L 0.5 49.294117647058826' stroke='rgb(237%2C 245%2C 247)' stroke-dasharray='5%2C5' stroke-width='1' /%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 50px 50px; /* Adjust based on your desired pattern size */
  background-position: center;
  min-height: 100vh; /* Ensure it covers the entire height of the page */
}
/* Multi-Select Styles */
.multi-select {
  position: relative;
  width: 100%;
}

.multi-select-header {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.multi-select-header:hover {
  border-color: #9ca3af;
}

.multi-select-header-active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.multi-select-header::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #6b7280;
  transition: transform 0.2s;
}

.multi-select-header-active::after {
  transform: translateY(-50%) rotate(180deg);
}

.multi-select-header-placeholder {
  color: #9ca3af;
  flex: 1;
}

.multi-select-header-placeholder.hidden {
  display: none;
}

.multi-select-selected-count {
  font-weight: 500;
  color: #1f2937;
}

.multi-select-selected-count.hidden {
  display: none;
}

.multi-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 50;
  display: none;
}

.multi-select-header-active + .multi-select-options {
  display: block;
}

.multi-select-search {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  outline: none;
  font-size: 14px;
}

.multi-select-search:focus {
  background-color: #f9fafb;
}

.multi-select-all {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  font-weight: 500;
  transition: background-color 0.2s;
}

.multi-select-all:hover {
  background-color: #f3f4f6;
}

.multi-select-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.multi-select-option:hover {
  background-color: #f3f4f6;
}

.multi-select-option-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  transition: all 0.2s;
}

.multi-select-selected .multi-select-option-radio,
.multi-select-all.multi-select-selected .multi-select-option-radio {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.multi-select-selected .multi-select-option-radio::after,
.multi-select-all.multi-select-selected .multi-select-option-radio::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.multi-select-option-text {
  flex: 1;
  font-size: 14px;
  color: #374151;
}
/*
 * 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.
 *


 */