@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(251, 191, 36, 0.55) 30%,
    rgba(253, 230, 138, 0.75) 50%,
    rgba(251, 191, 36, 0.55) 70%,
    rgba(251, 191, 36, 0.5) 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  position: relative;
  background-clip: padding-box;
  cursor: default;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Sparkle styling */
.sparkle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f59e0b; /* amber-500 */
  clip-path: polygon(50% 0%, 65% 40%, 100% 50%, 65% 60%, 50% 100%, 35% 60%, 0% 50%, 35% 40%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.8);
}

@media (min-width: 1024px) {
  .sparkle {
    display: block;
    animation: sparkle 2s ease-in-out infinite;
  }
}

/* Position sparkles */
.sparkle.s1 {
  top: -6px;
  left: -4px;
  animation-delay: 0s;
}

.sparkle.s2 {
  top: -4px;
  right: 10%;
  animation-delay: 0.5s;
  width: 8px;
  height: 8px;
}

.sparkle.s3 {
  bottom: -6px;
  right: -4px;
  animation-delay: 1s;
  width: 10px;
  height: 10px;
}

/* Animate on hover */
.shimmer-highlight:hover {
  background-color: rgba(251, 191, 36, 0.2);
}

.dark .shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0.2) 30%,
    rgba(253, 186, 116, 0.25) 50%,
    rgba(245, 158, 11, 0.2) 70%,
    rgba(245, 158, 11, 0.15) 100%
  );
  background-size: 200% auto;
}

.dark .sparkle {
  background: #fef3c7; /* amber-100 */
}

.dark .shimmer-highlight:hover {
  background-color: rgba(245, 158, 11, 0.15);
}
.pagy {
  --spacing: 0.15rem;
  --padding: 0.7rem;
  --rounding: 0.5rem;
  --border-width: 1px;
  --font-size: 0.875rem;
  --font-weight: 500;
  --line-height: 1.6;

  /* light (tailwind neutral) */
  --text: #171717; /* neutral-900 */
  --text-hover: #0a0a0a; /* neutral-950 */
  --text-current: #fafafa; /* neutral-50 */
  --background: #fafafa; /* neutral-50 */
  --background-hover: #f5f5f5; /* neutral-100 */
  --background-current: #171717; /* neutral-900 */
  --background-input: #ffffff;

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  user-select: none;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
  margin-right: calc(var(--spacing) * var(--space-reverse, 0));
}

.rtl .pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 1;
}

.pagy a:not([role="separator"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  text-decoration: none;
  background-color: var(--background);
  padding: 0.25rem;
  border: var(--border-width) solid #e5e5e5; /* neutral-200 */
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover {
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.pagy a:not([href]) {
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagy a[aria-current],
.pagy span[aria-current] {
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--background-current);
}

.pagy a[aria-label="Previous"],
.pagy a[aria-label="Next"] {
  position: relative;
  font-size: 0;
  color: var(--text);
}

.pagy a[aria-label="Previous"]::before,
.pagy a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background-size: 0.75rem 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
}

.pagy a[aria-label="Previous"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='currentColor'%3E%3Cpolyline points='7.75 1.75 3.5 6 7.75 10.25'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.pagy a[aria-label="Next"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='currentColor'%3E%3Cpolyline points='4.25 10.25 8.5 6 4.25 1.75'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.pagy [role="separator"] {
  background: transparent;
  color: #a3a3a3; /* neutral-400 */
  padding: 0.25rem 0.4rem;
  border: none;
  box-shadow: none;
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid #e5e5e5;
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: 0.2rem 0.5rem;
}

.pagy label input {
  all: unset;
  border: 1px solid #e5e5e5;
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.pagy-compact .pagy {
  --spacing: 0.1rem;
  --padding: 0.55rem;
  --rounding: 0.35rem;
}

.dark .pagy {
  /* dark (tailwind neutral) */
  --text: #f5f5f5; /* neutral-100 */
  --text-hover: #ffffff;
  --text-current: #0a0a0a; /* neutral-950 */
  --background: #262626; /* neutral-800 */
  --background-hover: #404040; /* neutral-700 */
  --background-current: #f5f5f5; /* neutral-100 */
  --background-input: #262626; /* neutral-800 */
}

.dark .pagy a:not([role="separator"]) {
  border-color: #ffffff1a; /* white/10 */
  background-color: var(--background);
}

.dark .pagy a:not([role="separator"]):hover {
  border-color: #ffffff1a; /* white/10 */
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.dark .pagy a[aria-current]:hover {
  background-color: var(--background-current);
  color: var(--text-current);
}

.dark .pagy a[aria-current] {
  border-color: var(--background-current);
  background-color: var(--background-current);
}

.dark .pagy a[aria-label="Previous"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' stroke='%23f5f5f5'%3E%3Cpolyline points='7.75 1.75 3.5 6 7.75 10.25'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.dark .pagy a[aria-label="Next"]::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' stroke='%23f5f5f5'%3E%3Cpolyline points='4.25 10.25 8.5 6 4.25 1.75'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
}

.dark .pagy [role="separator"] {
  color: #a3a3a3; /* neutral-400 */
}

.dark .pagy label {
  border-color: #262626;
  background-color: var(--background);
}

.dark .pagy label input {
  border-color: #262626;
  background-color: var(--background-input);
  color: var(--text);
}

/* Loading state for Turbo Frame pagination */
turbo-frame[aria-busy="true"] .pagy {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* Loading indicator with overlay */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator] {
  position: relative;
  cursor: wait;
  pointer-events: none;
}

/* Semi-transparent overlay */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  z-index: 10;
  opacity: 0;
  animation: pagy-fade-in 0.15s ease forwards;
}

.dark turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::before {
  background-color: rgba(23, 23, 23, 0.75);
}

/* Spinning loader */
turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2.5px solid #e5e5e5;
  border-top-color: #171717;
  border-radius: 50%;
  opacity: 0;
  animation: pagy-spin 0.6s linear infinite, pagy-fade-in 0.15s ease forwards;
  z-index: 11;
  pointer-events: none;
}

.dark turbo-frame[aria-busy="true"][data-pagy-loading-indicator]::after {
  border-color: #404040;
  border-top-color: #f5f5f5;
}

@keyframes pagy-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pagy-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .pagy {
    --spacing: 0.1rem;
    --padding: 0.3rem;
    --font-size: 0.75rem;
  }

  .pagy a:not([role="separator"]) {
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem;
  }

  .pagy a[role="separator"] {
    padding: 0.15rem 0.2rem;
    font-size: 0.75rem;
  }

  .pagy label {
    padding: 0.1rem 0.3rem;
  }

  .pagy label input {
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
  }
}
/**
 * Prism.js theme - shadcn/ui style (GitHub Dark Dimmed)
 * Inspired by shadcn/ui documentation code blocks
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #e6edf3;
  background: none;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1rem;
  margin: 0;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #0d1117;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8b949e;
  font-style: italic;
}

/* Punctuation */
.token.punctuation {
  color: #e6edf3;
}

.token.namespace {
  opacity: 0.7;
}

/* Strings */
.token.string,
.token.attr-value {
  color: #a5d6ff;
}

/* Operators */
.token.operator {
  color: #ff7b72;
}

/* Entity, URL */
.token.entity,
.token.url {
  color: #a5d6ff;
}

/* Keywords */
.token.keyword,
.token.control,
.token.directive {
  color: #ff7b72;
}

/* At-rules */
.token.atrule {
  color: #ff7b72;
}

/* Booleans and constants */
.token.boolean,
.token.constant {
  color: #79c0ff;
}

/* Numbers */
.token.number {
  color: #79c0ff;
}

/* Properties */
.token.property {
  color: #7ee787;
}

/* Tags */
.token.tag {
  color: #7ee787;
}

/* Attributes */
.token.attr-name {
  color: #79c0ff;
}

/* Selectors, symbols */
.token.selector {
  color: #7ee787;
}

.token.symbol {
  color: #ffa657;
}

/* Builtins, chars */
.token.builtin,
.token.char {
  color: #79c0ff;
}

/* Functions */
.token.function {
  color: #d2a8ff;
}

/* Class names, types */
.token.class-name,
.token.type-class-name {
  color: #ffa657;
}

/* Variables */
.token.variable {
  color: #ffa657;
}

/* Regex, important */
.token.regex {
  color: #a5d6ff;
}

.token.important {
  color: #ff7b72;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* Inserted/deleted for diffs */
.token.inserted {
  color: #7ee787;
}

.token.deleted {
  color: #ff7b72;
}

/* Language-specific overrides */

/* HTML/XML */
.language-markup .token.tag,
.language-html .token.tag,
.language-xml .token.tag {
  color: #7ee787;
}

.language-markup .token.attr-name,
.language-html .token.attr-name,
.language-xml .token.attr-name {
  color: #79c0ff;
}

.language-markup .token.attr-value,
.language-html .token.attr-value,
.language-xml .token.attr-value {
  color: #a5d6ff;
}

.language-markup .token.punctuation,
.language-html .token.punctuation,
.language-xml .token.punctuation {
  color: #8b949e;
}

/* CSS */
.language-css .token.selector {
  color: #7ee787;
}

.language-css .token.property {
  color: #79c0ff;
}

.language-css .token.function {
  color: #d2a8ff;
}

.language-css .token.url {
  color: #a5d6ff;
}

/* Tailwind CSS utilities (inside @apply) */
.language-css .token.tailwind-utility {
  color: #a5d6ff;
}

/* Make @apply rule keyword stand out */
.language-css .token.atrule .token.rule {
  color: #d2a8ff;
}

/* JavaScript */
.language-javascript .token.keyword {
  color: #ff7b72;
}

.language-javascript .token.function {
  color: #d2a8ff;
}

.language-javascript .token.class-name {
  color: #ffa657;
}

.language-javascript .token.template-string .token.interpolation {
  color: #e6edf3;
}

.language-javascript .token.template-string .token.interpolation-punctuation {
  color: #ff7b72;
}

/* Ruby */
.language-ruby .token.symbol {
  color: #79c0ff;
}

.language-ruby .token.keyword {
  color: #ff7b72;
}

.language-ruby .token.function {
  color: #d2a8ff;
}

.language-ruby .token.class-name {
  color: #ffa657;
}

/* ERB/Ruby multi-line comments - style the entire ruby block when it starts with # comment */
/* This handles <%# ... %> style comments where only the # is tokenized */
.token.ruby.language-ruby:has(> .token.comment:first-child) {
  color: #8b949e !important;
  font-style: italic;
}

/* Override colors for all tokens inside a comment block */
.token.ruby.language-ruby:has(> .token.comment:first-child) * {
  color: #8b949e !important;
  font-style: italic;
}

/* ERB */
.language-erb .token.delimiter {
  color: #ff7b72;
}

/* JSON */
.language-json .token.property {
  color: #7ee787;
}

.language-json .token.string {
  color: #a5d6ff;
}

.language-json .token.number {
  color: #79c0ff;
}

.language-json .token.boolean {
  color: #79c0ff;
}

/* Selection */
code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
  background: #3b5070;
}

/* ===== Line Numbers ===== */
pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.5em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1rem;
  left: 0;
  width: 3em;
  font-size: 100%;
  letter-spacing: -1px;
  border-right: 1px solid #21262d;
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  padding-right: 0.8em;
  text-align: right;
  color: #484f58;
}

.line-numbers-rows > span::before {
  content: counter(linenumber);
}
/*
 * 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.
 *




 */

/* example - include a custom font (put file in app/assets/fonts) */
 /* @font-face {
   font-family: 'Retrcade Regular';
   font-style: normal;
   font-weight: normal;
   src: url(/RetrcadeRegular.woff) format('woff');
 } */