.fi-fo-rich-editor-editor,
.article-content {
    color: #09090b !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-family: "Poppins", sans-serif !important;
}

/* Dark mode: the editor container inherits a dark background from the panel,
   so the base near-black text above becomes invisible/uneditable. Override
   with !important to beat the unconditional rule. Scoped to the editor only —
   .article-content is the public light-mode article view. */
.dark .fi-fo-rich-editor-editor {
    color: rgb(243 244 246) !important;
}

/* Headings */
.fi-fo-rich-editor-editor h2,
.article-content h2 {
    font-size: 28px !important;
    line-height: 1.125;
    font-weight: 800;
    padding-bottom: 10px;
}

.fi-fo-rich-editor-editor h3,
.article-content h3 {
    font-size: 24px !important;
    line-height: 1.125;
    font-weight: 700;
    padding-bottom: 10px;
}

/* Paragraphs */
.fi-fo-rich-editor-editor p,
.article-content p {
    margin: 16px 0 !important;
}

/* Links */
.fi-fo-rich-editor-editor a,
.article-content a {
    color: var(--ads-primary-600);
    transition: color 0.2s ease-in-out;
}

.fi-fo-rich-editor-editor a:hover,
.article-content a:hover {
    color: var(--ads-primary-700);
}

/* Figures */
.fi-fo-rich-editor-editor figure,
.fi-fo-rich-editor-editor figcaption,
.article-content figure,
.article-content figcaption {
    display: block !important;
}

.fi-fo-rich-editor-editor figure,
.fi-fo-rich-editor-editor figure a,
.article-content figure,
.article-content figure a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

.fi-fo-rich-editor-editor figure figcaption,
.article-content figure figcaption {
    font-size: 16px !important;
}

/* Images */
.fi-fo-rich-editor-editor img,
.article-content img {
    max-width: 100% !important;
    height: auto;
    margin: 10px 0 !important;
}

/* Explicitly-resized images: honour the JS-applied inline width/height while
   still keeping them inside the container via max-width. */
.fi-fo-rich-editor-editor img[data-trix-rh-sized],
.article-content img[data-trix-rh-sized] {
    max-width: 100% !important;
}

/* Lists (base) */
.fi-fo-rich-editor-editor ul,
.fi-fo-rich-editor-editor ol,
.article-content ul,
.article-content ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}

/* Unordered lists */
.fi-fo-rich-editor-editor ul li,
.article-content ul li {
    list-style-type: square !important;
}

.fi-fo-rich-editor-editor ul li::marker,
.article-content ul li::marker {
    color: black;
    font-weight: 600;
}

/* Ordered lists */
.fi-fo-rich-editor-editor ol li,
.article-content ol li {
    list-style-type: decimal !important;
}

.fi-fo-rich-editor-editor ol li::marker,
.article-content ol li::marker {
    color: black;
}

/* Dark mode list markers in the editor — black is invisible on dark bg. */
.dark .fi-fo-rich-editor-editor ul li::marker,
.dark .fi-fo-rich-editor-editor ol li::marker {
    color: rgb(243 244 246);
}

/* Image alignment — keyed on Trix's own data-trix-attachment JSON so no JS
   needs to touch the editor DOM (which would trigger Trix's own observer and
   cause an infinite re-render loop). Compact JSON has no spaces so the
   substring selectors are safe. Works in both the editor and article view. */
.fi-fo-rich-editor-editor figure[data-trix-attachment*='"alignment":"left"'],
.article-content           figure[data-trix-attachment*='"alignment":"left"'] {
    float: left !important;
    display: block !important;
    margin: 4px 16px 8px 0 !important;
    align-items: flex-start !important;
}

.fi-fo-rich-editor-editor figure[data-trix-attachment*='"alignment":"right"'],
.article-content           figure[data-trix-attachment*='"alignment":"right"'] {
    float: right !important;
    display: block !important;
    margin: 4px 0 8px 16px !important;
    align-items: flex-start !important;
}

/* Trix wraps every attachment in its own block <div>. A cursor <br> inside
   gives that block a non-zero line-box height, which pushes the next block
   below the float instead of letting two consecutive float-left/right figures
   stack side by side on the same row.
   Zeroing line-height collapses that implicit height; line-height is then
   restored on the figure element itself so figcaption text renders normally. */
.fi-fo-rich-editor-editor div:has(> figure[data-trix-attachment*='"alignment":"left"']),
.fi-fo-rich-editor-editor div:has(> figure[data-trix-attachment*='"alignment":"right"']),
.article-content div:has(> figure[data-trix-attachment*='"alignment":"left"']),
.article-content div:has(> figure[data-trix-attachment*='"alignment":"right"']) {
    line-height: 0;
}

.fi-fo-rich-editor-editor figure[data-trix-attachment],
.article-content figure[data-trix-attachment] {
    line-height: 1.5;
}

/* Clearfix so floated images don't bleed out of the editor or article view */
.fi-fo-rich-editor-editor::after,
.article-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ── Editor-specific (not shared with view page) ───────────────────────── */

.fi-fo-rich-editor {
    overflow: visible !important;
}

.fi-fo-rich-editor-editor {
    max-height: none !important;
    overflow: visible !important;
}

.fi-fo-rich-editor-toolbar {
    position: sticky !important;
    top: 64px;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.dark .fi-fo-rich-editor-toolbar {
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
}

/* ── Tag pills ──────────────────────────────────────────────────────────
   .tag-pill       — pill wrapper (span or similar)
   .tag-icon       — icon SVG inside a pill or dropdown list item
   data-tag-color  — color value matching TagResource select keys

   ring-1 + ring-inset are provided by Tailwind's base (already in
   Filament's compiled CSS). We only override --tw-ring-color and
   background-color here, plus the icon's text color.
   Dark mode uses Filament's .dark class on <html>.
──────────────────────────────────────────────────────────────────────── */

/* Neutral text for all pills (fallback + overridden colors) */
.tag-pill { color: rgb(17, 24, 39); }           /* gray-900 */
.dark .tag-pill { color: rgb(243, 244, 246); }  /* gray-100 */

/* Default fallback — no color set (data-tag-color="" or absent) */
.tag-pill {
    background-color: rgb(249, 250, 251);       /* gray-50 */
    --tw-ring-color: rgb(209, 213, 219);        /* gray-300 */
}
.dark .tag-pill {
    background-color: rgba(55, 65, 81, 0.4);   /* gray-700/40 */
    --tw-ring-color: rgb(107, 114, 128);        /* gray-500 */
}
.tag-pill .tag-icon       { color: rgb(156, 163, 175); }  /* gray-400 */
.dark .tag-pill .tag-icon { color: rgb(107, 114, 128); }  /* gray-500 */

/* gray */
.tag-pill[data-tag-color="gray"] { background-color: rgb(243, 244, 246); --tw-ring-color: rgb(156, 163, 175); }
.dark .tag-pill[data-tag-color="gray"] { background-color: rgba(55, 65, 81, 0.5); --tw-ring-color: rgb(107, 114, 128); }
.tag-pill[data-tag-color="gray"] .tag-icon       { color: rgb(107, 114, 128); }  /* gray-500 */
.dark .tag-pill[data-tag-color="gray"] .tag-icon { color: rgb(156, 163, 175); }  /* gray-400 */

/* red */
.tag-pill[data-tag-color="red"] { background-color: rgb(254, 242, 242); --tw-ring-color: rgb(239, 68, 68); }
.dark .tag-pill[data-tag-color="red"] { background-color: rgba(127, 29, 29, 0.25); --tw-ring-color: rgb(239, 68, 68); }
.tag-pill[data-tag-color="red"] .tag-icon       { color: rgb(220, 38, 38); }   /* red-600 */
.dark .tag-pill[data-tag-color="red"] .tag-icon { color: rgb(248, 113, 113); } /* red-400 */

/* orange */
.tag-pill[data-tag-color="orange"] { background-color: rgb(255, 247, 237); --tw-ring-color: rgb(249, 115, 22); }
.dark .tag-pill[data-tag-color="orange"] { background-color: rgba(124, 45, 18, 0.25); --tw-ring-color: rgb(249, 115, 22); }
.tag-pill[data-tag-color="orange"] .tag-icon       { color: rgb(234, 88, 12); }   /* orange-600 */
.dark .tag-pill[data-tag-color="orange"] .tag-icon { color: rgb(251, 146, 60); }  /* orange-400 */

/* yellow */
.tag-pill[data-tag-color="yellow"] { background-color: rgb(254, 252, 232); --tw-ring-color: rgb(234, 179, 8); }
.dark .tag-pill[data-tag-color="yellow"] { background-color: rgba(113, 63, 18, 0.25); --tw-ring-color: rgb(234, 179, 8); }
.tag-pill[data-tag-color="yellow"] .tag-icon       { color: rgb(202, 138, 4); }  /* yellow-600 */
.dark .tag-pill[data-tag-color="yellow"] .tag-icon { color: rgb(250, 204, 21); } /* yellow-400 */

/* green */
.tag-pill[data-tag-color="green"] { background-color: rgb(240, 253, 244); --tw-ring-color: rgb(34, 197, 94); }
.dark .tag-pill[data-tag-color="green"] { background-color: rgba(20, 83, 45, 0.25); --tw-ring-color: rgb(34, 197, 94); }
.tag-pill[data-tag-color="green"] .tag-icon       { color: rgb(22, 163, 74); }  /* green-600 */
.dark .tag-pill[data-tag-color="green"] .tag-icon { color: rgb(74, 222, 128); } /* green-400 */

/* teal */
.tag-pill[data-tag-color="teal"] { background-color: rgb(240, 253, 250); --tw-ring-color: rgb(20, 184, 166); }
.dark .tag-pill[data-tag-color="teal"] { background-color: rgba(19, 78, 74, 0.25); --tw-ring-color: rgb(20, 184, 166); }
.tag-pill[data-tag-color="teal"] .tag-icon       { color: rgb(13, 148, 136); }  /* teal-600 */
.dark .tag-pill[data-tag-color="teal"] .tag-icon { color: rgb(45, 212, 191); }  /* teal-400 */

/* blue */
.tag-pill[data-tag-color="blue"] { background-color: rgb(239, 246, 255); --tw-ring-color: rgb(59, 130, 246); }
.dark .tag-pill[data-tag-color="blue"] { background-color: rgba(30, 58, 138, 0.25); --tw-ring-color: rgb(59, 130, 246); }
.tag-pill[data-tag-color="blue"] .tag-icon       { color: rgb(37, 99, 235); }  /* blue-600 */
.dark .tag-pill[data-tag-color="blue"] .tag-icon { color: rgb(96, 165, 250); } /* blue-400 */

/* violet */
.tag-pill[data-tag-color="violet"] { background-color: rgb(245, 243, 255); --tw-ring-color: rgb(139, 92, 246); }
.dark .tag-pill[data-tag-color="violet"] { background-color: rgba(46, 16, 101, 0.25); --tw-ring-color: rgb(139, 92, 246); }
.tag-pill[data-tag-color="violet"] .tag-icon       { color: rgb(124, 58, 237); }  /* violet-600 */
.dark .tag-pill[data-tag-color="violet"] .tag-icon { color: rgb(167, 139, 250); } /* violet-400 */

/* pink */
.tag-pill[data-tag-color="pink"] { background-color: rgb(253, 242, 248); --tw-ring-color: rgb(236, 72, 153); }
.dark .tag-pill[data-tag-color="pink"] { background-color: rgba(131, 24, 67, 0.25); --tw-ring-color: rgb(236, 72, 153); }
.tag-pill[data-tag-color="pink"] .tag-icon       { color: rgb(219, 39, 119); }  /* pink-600 */
.dark .tag-pill[data-tag-color="pink"] .tag-icon { color: rgb(244, 114, 182); } /* pink-400 */