/* Commission Manager — shared styles for all templates.
   Tailwind (CDN) handles utilities; this file holds the bits Tailwind can't:
   Alpine x-cloak, Quill theming, custom scrollbars, the mac-style select
   chevron, and subtle animations. */

[x-cloak] { display: none !important; }

/* --- Quill editor --- */
.ql-editor { min-height: 160px; font-size: 0.95rem; }
.dark .ql-toolbar.ql-snow,
.dark .ql-container.ql-snow { border-color: #475569; }
.dark .ql-editor { color: #e2e8f0; }
.dark .ql-editor.ql-blank::before { color: #64748b; }
.dark .ql-snow .ql-stroke { stroke: #cbd5e1; }
.dark .ql-snow .ql-fill { fill: #cbd5e1; }
.dark .ql-snow .ql-picker { color: #cbd5e1; }
.dark .ql-snow .ql-picker-options { background: #1e293b; }
.dark .ql-snow.ql-toolbar button:hover .ql-stroke,
.dark .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: #ff8ff6; }
.dark .ql-snow.ql-toolbar button:hover .ql-fill,
.dark .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: #ff8ff6; }

/* --- Board scrollbars --- */
.board-scroll::-webkit-scrollbar { height: 10px; }
.board-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.col-scroll::-webkit-scrollbar { width: 6px; }
.col-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.dark .board-scroll::-webkit-scrollbar-thumb,
.dark .col-scroll::-webkit-scrollbar-thumb { background: #475569; }

/* --- Drag & drop --- */
.sortable-ghost { opacity: 0.4; }
.sortable-drag { transform: rotate(2deg); }

/* --- Submit picker preview aspect ratio ---
   Defined here, not as the Tailwind arbitrary class aspect-[16/10], because the
   Play CDN doesn't reliably JIT-generate arbitrary values for Alpine
   <template x-for> content (a load-timing race — works on localhost, fails in
   production), which let the full image show with its grey headroom. --- */
/* Native <button> vertically centers its content. In the 2-col grid, rows
   stretch to equal height, so a card with a shorter description would center
   its content and push the image down — leaving the button background showing
   above it. Lay the card out as a top-aligned flex column instead. */
.type-card { display: flex; flex-direction: column; }
.type-preview { position: relative; aspect-ratio: 16 / 10; }
/* Absolute fill (not h-full) so the image/placeholder reliably covers the box —
   height:100% on a replaced element inside an aspect-ratio parent is flaky in
   Safari, which left the container background showing above the image. */
.type-preview-fill { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Card description preview (clamped, images hidden) --- */
.desc-preview { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.desc-preview img { display: none; }

/* --- Rendered rich text (guest status page, commission-type descriptions) ---
   Tailwind's preflight strips list markers and heading sizes, and the CDN build
   has no typography plugin, so restore the essentials here. --- */
.desc img { max-width: 100%; border-radius: 0.5rem; margin: 0.5rem 0; }
.desc a { color: #f65ae9; text-decoration: underline; }
.desc p { margin: 0.35em 0; }
.desc ul { list-style: disc; padding-left: 1.25em; margin: 0.35em 0; }
.desc ol { list-style: decimal; padding-left: 1.25em; margin: 0.35em 0; }
.desc li { margin: 0.15em 0; }
/* Quill 2 emits both list kinds as <ol>, tagging each <li> with data-list.
   Honor that so bullet items render as bullets, not numbers. */
.desc li[data-list="bullet"] { list-style-type: disc; }
.desc li[data-list="ordered"] { list-style-type: decimal; }
.desc h1 { font-size: 1.3em; font-weight: 700; margin: 0.4em 0 0.2em; }
.desc h2 { font-size: 1.15em; font-weight: 700; margin: 0.4em 0 0.2em; }
.desc h3 { font-size: 1.05em; font-weight: 600; margin: 0.4em 0 0.2em; }
.desc strong { font-weight: 700; }
.desc em { font-style: italic; }
.desc blockquote { border-left: 3px solid #ff8ff6; padding-left: 0.75em; margin: 0.4em 0; color: inherit; opacity: 0.85; }
.desc > :first-child { margin-top: 0; }
.desc > :last-child { margin-bottom: 0; }

/* --- macOS-style up/down double chevron for selects --- */
select.mac-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5 8 3.5 11 6.5'/%3E%3Cpath d='M5 9.5 8 12.5 11 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.dark select.mac-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5 8 3.5 11 6.5'/%3E%3Cpath d='M5 9.5 8 12.5 11 9.5'/%3E%3C/svg%3E");
}

/* --- Subtle motion (disabled for reduced-motion users) --- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .comm-card { animation: cardIn .22s ease both; }
  @keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  .ctx-menu { animation: popIn .12s ease both; transform-origin: top left; }
}

/* --- Overlapping attachment thumbnail stack (card preview) ---
   Keyed off :first-of-type (img only) instead of Tailwind's space-x, which
   keys off first child — Alpine's <template x-for> node is the real first
   child and would otherwise shift the first thumbnail left. */
.attach-stack > img { margin-left: -0.375rem; }
.attach-stack > img:first-of-type { margin-left: 0; }

/* --- Lightbox zoom pane ---
   "safe center" keeps the image centered on any axis where it fits, but falls
   back to start when it overflows so the scrolled-away edges stay reachable
   (plain center would clip the top/left out of scroll range). */
.lb-zoom-pane {
  justify-content: safe center;
  align-items: safe center;
}