/* ==========================================================================
   MUCTR CKEditor 5 Frontend Parity Stylesheet (ckeditor_front_parity.css)
   Ensures 100% visual consistency between Backend CKEditor and Frontend Website
   Preserves ALL user-defined inline colors, styles, backgrounds, and fonts!
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ==========================================================================
   1. Base Editor Canvas & Content Container
   ========================================================================== */
.ck.ck-editor__editable.ck-content,
.ck.ck-editor__main > .ck-editor__editable,
.ck-content,
.prose.ck-content {
    font-family: 'PT Sans', PTsans, Arial, sans-serif !important;
    font-size: 1.05rem !important; /* ~16.8px */
    line-height: 1.75 !important;
    color: #374151; /* Default Charcoal Text */
    background-color: #ffffff !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Specific to CKEditor active editable area in Backend forms */
.ck.ck-editor__editable.ck-content {
    min-height: 420px !important;
    padding: 28px 36px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ck.ck-editor__editable.ck-content.ck-focused {
    border-color: #1178D3 !important;
    box-shadow: 0 0 0 3px rgba(17, 120, 211, 0.15) !important;
    outline: none !important;
}

/* Ensure toolbar attaches cleanly to the canvas */
.ck.ck-toolbar {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 6px 10px !important;
}

/* ==========================================================================
   2. Typography: Headings (Only defaults when author hasn't chosen custom color)
   ========================================================================== */
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
    font-family: 'PT Sans', PTsans, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

/* Default Navy Color for headings that do NOT have a custom inline color */
.ck-content h1:not([style*="color"]),
.ck-content h2:not([style*="color"]),
.ck-content h3:not([style*="color"]),
.ck-content h4:not([style*="color"]),
.ck-content h5:not([style*="color"]),
.ck-content h6:not([style*="color"]) {
    color: #0d3c77;
}

.ck-content h1:first-child,
.ck-content h2:first-child,
.ck-content h3:first-child,
.ck-content h4:first-child,
.ck-content h5:first-child,
.ck-content h6:first-child,
.ck-content p:first-child {
    margin-top: 0 !important;
}

.ck-content h1 {
    font-size: 2.25rem !important; /* 36px */
    line-height: 1.25 !important;
}

.ck-content h2 {
    font-size: 1.75rem !important; /* 28px */
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.4rem;
    margin-top: 2rem;
}

.ck-content h3 {
    font-size: 1.4rem !important; /* 22.4px */
}

.ck-content h4 {
    font-size: 1.2rem !important; /* 19.2px */
}

.ck-content h4:not([style*="color"]) {
    color: #1178D3;
}

.ck-content h5 {
    font-size: 1.05rem !important;
}

.ck-content h6 {
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ck-content h6:not([style*="color"]) {
    color: #64748b;
}

/* ==========================================================================
   3. Paragraphs & Inline Text Formatting
   ========================================================================== */
.ck-content p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.75;
}

.ck-content p:not([style*="color"]) {
    color: #374151;
}

.ck-content strong:not([style*="color"]),
.ck-content b:not([style*="color"]) {
    font-weight: 700;
    color: #1f2937;
}

.ck-content em,
.ck-content i {
    font-style: italic;
}

.ck-content u {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ck-content s,
.ck-content strike,
.ck-content del {
    text-decoration: line-through;
    color: #94a3b8;
}

.ck-content small {
    font-size: 0.875em;
}

/* ==========================================================================
   4. Links & Hover States
   ========================================================================== */
.ck-content a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    cursor: pointer;
}

.ck-content a:not([style*="color"]) {
    color: #167ec4;
}

.ck-content a:hover {
    text-decoration: underline;
}

.ck-content a:not([style*="color"]):hover {
    color: #0d3c77;
}

/* ==========================================================================
   5. Blockquotes (Frontend Academic / Quote Style)
   ========================================================================== */
.ck-content blockquote {
    border-left: 4px solid #167ec4;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.75;
}

.ck-content blockquote:not([style*="background"]) {
    background-color: #f8fafc;
}

.ck-content blockquote:not([style*="color"]) {
    color: #475569;
}

.ck-content blockquote p {
    margin-bottom: 0;
}

/* ==========================================================================
   6. Lists (Unordered, Ordered, Nested)
   ========================================================================== */
.ck-content ul {
    list-style-type: disc !important;
    padding-left: 2rem !important;
    margin: 1rem 0 1.25rem 0 !important;
}

.ck-content ol {
    list-style-type: decimal !important;
    padding-left: 2rem !important;
    margin: 1rem 0 1.25rem 0 !important;
}

.ck-content ul ul {
    list-style-type: circle !important;
    margin: 0.5rem 0 0.5rem 0 !important;
}

.ck-content ul ul ul {
    list-style-type: square !important;
}

.ck-content ol ol {
    list-style-type: lower-latin !important;
    margin: 0.5rem 0 0.5rem 0 !important;
}

.ck-content li {
    margin-bottom: 0.5rem;
    line-height: 1.65;
}

.ck-content li:not([style*="color"]) {
    color: #374151;
}

.ck-content li::marker {
    color: #167ec4;
    font-weight: bold;
}

/* ==========================================================================
   7. Tables & Cell Styling
   ========================================================================== */
.ck-content figure.table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 1.75rem 0 !important;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.ck-content figure.table::-webkit-scrollbar {
    height: 6px;
}

.ck-content figure.table::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Clean handling of nested figure.table inside overflow wrappers */
.ck-content .overflow-x-auto figure.table,
.ck-content div[class*="overflow"] figure.table {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.ck-content table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.95rem;
    margin: 0 !important;
}

.ck-content th {
    font-weight: 700;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    text-align: left;
    letter-spacing: 0.02em;
}

/* Table Headers: Default only when no background or text color is specified */
.ck-content thead:not([class*="bg-"]):not([style*="background"]) th:not([class*="bg-"]):not([style*="background"]) {
    background-color: #f1f5f9;
}

.ck-content thead:not([class*="text-"]):not([style*="color"]) th:not([class*="text-"]):not([style*="color"]) {
    color: #0d3c77;
}

/* Explicit support for thead with background colors (e.g. bg-[#0d3c77], bg-[#167ec4], etc.) */
.ck-content thead.bg-\[\#0d3c77\],
.ck-content thead[class*="bg-[#0d3c77]"] {
    background-color: #0d3c77 !important;
}

.ck-content thead[class*="bg-"] th:not([class*="bg-"]):not([style*="background"]),
.ck-content thead[style*="background"] th:not([class*="bg-"]):not([style*="background"]) {
    background-color: transparent !important;
}

/* Explicit white text in thead or th */
.ck-content thead.text-white,
.ck-content thead.text-white th,
.ck-content thead.text-white th strong,
.ck-content thead.text-white th span,
.ck-content thead[class*="text-white"] th,
.ck-content thead[class*="text-white"] th strong,
.ck-content th.text-white,
.ck-content th.text-white strong,
.ck-content th .text-white,
.ck-content th strong.text-white {
    color: #ffffff !important;
}

.ck-content td {
    padding: 11px 16px;
    border: 1px solid #e2e8f0;
    line-height: 1.5;
}

.ck-content td:not([style*="color"]) {
    color: #374151;
}

.ck-content td a {
    color: #167ec4;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
    word-break: break-word;
}

.ck-content td a:hover {
    color: #0d3c77;
    text-decoration: underline;
}

/* Alternating zebra row background (only when row/cell has no custom background) */
.ck-content tbody tr:nth-child(even):not([class*="bg-"]):not([style*="background"]) td:not([class*="bg-"]):not([style*="background"]) {
    background-color: #f8fafc;
}

.ck-content tbody tr:hover:not([class*="bg-"]):not([style*="background"]) td:not([class*="bg-"]):not([style*="background"]) {
    background-color: #eff6ff;
}

.ck-content .table > figcaption,
.ck-content figure.table figcaption {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 0.6rem;
    background-color: #f8fafc;
}

/* ==========================================================================
   Details & Summary (Collapsible Sections & Dropdowns in Tables/Pages)
   ========================================================================== */
.ck-content details {
    display: block !important;
    margin-top: 0.5rem !important;
    position: relative;
}

.ck-content details summary {
    cursor: pointer !important;
    font-weight: 700;
    color: #0d3c77;
    list-style: none !important;
    outline: none !important;
    display: inline-block;
    user-select: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.ck-content details summary:hover {
    text-decoration: underline !important;
    color: #167ec4;
}

.ck-content details summary::-webkit-details-marker,
.ck-content details summary::marker {
    display: none !important;
    content: "" !important;
}

.ck-content details summary.list-none {
    list-style: none !important;
}

.ck-content details summary.cursor-pointer {
    cursor: pointer !important;
}

.ck-content details summary.outline-none {
    outline: none !important;
}

.ck-content details summary.hover\:underline:hover {
    text-decoration: underline !important;
}

.ck-content details > div,
.ck-content details > p {
    margin-top: 0.5rem !important;
    line-height: 1.6;
    color: #4b5563;
}

/* ==========================================================================
   8. Images, Captions & Floats
   ========================================================================== */
.ck-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: block;
    margin: 1rem auto;
}

.ck-content figure.image {
    margin: 1.5rem auto !important;
    max-width: 100% !important;
    display: table !important;
    clear: both !important;
    text-align: center;
}

.ck-content figure.image img {
    margin: 0 auto !important;
}

.ck-content figure.image figcaption,
.ck-content .image > figcaption {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    text-align: center;
    margin-top: 0.6rem;
    padding: 0.4rem 0.8rem;
    display: table-caption;
    caption-side: bottom;
}

.ck-content .image-style-side {
    float: right !important;
    margin-left: 1.75rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

.ck-content .image-style-align-left {
    float: left !important;
    margin-right: 1.75rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

.ck-content .image-style-align-right {
    float: right !important;
    margin-left: 1.75rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

.ck-content .image-style-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ==========================================================================
   9. Code, Preformatted Text & Horizontal Rules
   ========================================================================== */
.ck-content code {
    background-color: #f1f5f9;
    color: #0d3c77;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ck-content pre {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 1.25rem;
    border-radius: 10px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.6;
    margin: 1.5rem 0;
}

.ck-content pre code {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.ck-content hr {
    border: none !important;
    border-top: 2px solid #e2e8f0 !important;
    margin: 2.25rem 0 !important;
}

/* ==========================================================================
   10. Embedded Media & Iframes
   ========================================================================== */
.ck-content iframe,
.ck-content video {
    max-width: 100% !important;
    border-radius: 12px;
    margin: 1.5rem auto;
    display: block;
}

/* ==========================================================================
   11. ABSOLUTE PRESERVATION: User-Specified Colors & Backgrounds
   Any element with an inline style="color: ..." or style="background...: ..."
   or span added by CKEditor color picker MUST keep its exact specified color!
   ========================================================================== */
.ck-content [style*="color"] {
    /* Browser naturally applies the exact color from style attribute */
}

.ck-content span[style*="color"] {
    display: inline;
}

.ck-content [style*="background"] {
    /* Browser naturally applies the exact background from style attribute */
}

.ck-content span[style*="background"] {
    display: inline;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* ==========================================================================
   12. Scoped HTML & Tailwind Utilities (Works in both Backend & Frontend)
   ========================================================================== */

/* Display & Flexbox */
.ck-content .flex { display: flex !important; }
.ck-content .inline-flex { display: inline-flex !important; }
.ck-content .flex-col { flex-direction: column !important; }
.ck-content .flex-row { flex-direction: row !important; }
.ck-content .flex-wrap { flex-wrap: wrap !important; }
.ck-content .items-center { align-items: center !important; }
.ck-content .items-start { align-items: flex-start !important; }
.ck-content .items-end { align-items: flex-end !important; }
.ck-content .justify-center { justify-content: center !important; }
.ck-content .justify-between { justify-content: space-between !important; }
.ck-content .justify-start { justify-content: flex-start !important; }
.ck-content .justify-end { justify-content: flex-end !important; }

/* Grid System */
.ck-content .grid { display: grid !important; }
.ck-content .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.ck-content .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ck-content .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ck-content .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (min-width: 768px) {
    .ck-content .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ck-content .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .ck-content .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .ck-content .md\:flex-row { flex-direction: row !important; }
}

@media (min-width: 1024px) {
    .ck-content .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .ck-content .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Gaps */
.ck-content .gap-1 { gap: 0.25rem !important; }
.ck-content .gap-2 { gap: 0.5rem !important; }
.ck-content .gap-3 { gap: 0.75rem !important; }
.ck-content .gap-4 { gap: 1rem !important; }
.ck-content .gap-6 { gap: 1.5rem !important; }
.ck-content .gap-8 { gap: 2rem !important; }
.ck-content .gap-12 { gap: 3rem !important; }

/* Paddings */
.ck-content .p-1 { padding: 0.25rem !important; }
.ck-content .p-2 { padding: 0.5rem !important; }
.ck-content .p-3 { padding: 0.75rem !important; }
.ck-content .p-4 { padding: 1rem !important; }
.ck-content .p-5 { padding: 1.25rem !important; }
.ck-content .p-6 { padding: 1.5rem !important; }
.ck-content .p-8 { padding: 2rem !important; }
.ck-content .p-10 { padding: 2.5rem !important; }
.ck-content .p-12 { padding: 3rem !important; }

.ck-content .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.ck-content .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.ck-content .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.ck-content .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.ck-content .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }

.ck-content .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.ck-content .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.ck-content .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.ck-content .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.ck-content .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.ck-content .py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Margins */
.ck-content .m-auto,
.ck-content .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ck-content .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.ck-content .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.ck-content .my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.ck-content .my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.ck-content .mb-2 { margin-bottom: 0.5rem !important; }
.ck-content .mb-4 { margin-bottom: 1rem !important; }
.ck-content .mb-6 { margin-bottom: 1.5rem !important; }
.ck-content .mb-8 { margin-bottom: 2rem !important; }
.ck-content .mt-2 { margin-top: 0.5rem !important; }
.ck-content .mt-4 { margin-top: 1rem !important; }
.ck-content .mt-6 { margin-top: 1.5rem !important; }
.ck-content .mt-8 { margin-top: 2rem !important; }

/* Widths */
.ck-content .w-full { width: 100% !important; }
.ck-content .w-auto { width: auto !important; }
.ck-content .w-1\/2 { width: 50% !important; }
.ck-content .w-1\/3 { width: 33.333333% !important; }
.ck-content .w-2\/3 { width: 66.666667% !important; }
.ck-content .max-w-none { max-width: none !important; }
.ck-content .block { display: block !important; }
.ck-content .inline-block { display: inline-block !important; }
.ck-content .inline { display: inline !important; }
.ck-content .hidden { display: none !important; }

/* Explicit Color Classes */
.ck-content .text-white { color: #ffffff !important; }
.ck-content .text-black { color: #000000 !important; }
.ck-content .text-gray-500 { color: #6b7280 !important; }
.ck-content .text-gray-600 { color: #4b5563 !important; }
.ck-content .text-gray-700 { color: #374151 !important; }
.ck-content .text-gray-800 { color: #1f2937 !important; }
.ck-content .text-gray-900 { color: #111827 !important; }
.ck-content .text-red-500 { color: #ef4444 !important; }
.ck-content .text-red-600 { color: #dc2626 !important; }
.ck-content .text-green-500 { color: #22c55e !important; }
.ck-content .text-green-600 { color: #16a34a !important; }
.ck-content .text-blue-500 { color: #3b82f6 !important; }
.ck-content .text-blue-600 { color: #2563eb !important; }
.ck-content .text-blue-800 { color: #1e40af !important; }
.ck-content .text-yellow-500 { color: #eab308 !important; }
.ck-content .text-amber-500 { color: #f59e0b !important; }
.ck-content .text-purple-600 { color: #9333ea !important; }
.ck-content .text-orange-500 { color: #f97316 !important; }
.ck-content .text-\[\#0d3c77\] { color: #0d3c77 !important; }
.ck-content .text-\[\#167ec4\] { color: #167ec4 !important; }
.ck-content .text-\[\#1b75bc\] { color: #1b75bc !important; }

/* Explicit Background Classes */
.ck-content .bg-white { background-color: #ffffff !important; }
.ck-content .bg-black { background-color: #000000 !important; }
.ck-content .bg-gray-50 { background-color: #f9fafb !important; }
.ck-content .bg-gray-100 { background-color: #f3f4f6 !important; }
.ck-content .bg-blue-50 { background-color: #eff6ff !important; }
.ck-content .bg-blue-100 { background-color: #dbeafe !important; }
.ck-content .bg-blue-600 { background-color: #2563eb !important; }
.ck-content .bg-\[\#0d3c77\] { background-color: #0d3c77 !important; }
.ck-content .bg-\[\#167ec4\] { background-color: #167ec4 !important; }
.ck-content .bg-\[\#1b75bc\] { background-color: #1b75bc !important; }
.ck-content .bg-emerald-50,
.ck-content .bg-green-50 { background-color: #ecfdf5 !important; }
.ck-content .bg-green-500 { background-color: #22c55e !important; }
.ck-content .bg-red-50 { background-color: #fef2f2 !important; }
.ck-content .bg-red-500 { background-color: #ef4444 !important; }
.ck-content .bg-amber-50,
.ck-content .bg-yellow-50 { background-color: #fffbeb !important; }
.ck-content .bg-amber-500 { background-color: #f59e0b !important; }

/* Borders & Rounded Corners */
.ck-content .border { border: 1px solid #e2e8f0 !important; }
.ck-content .border-0 { border-width: 0 !important; }
.ck-content .border-2 { border-width: 2px !important; }
.ck-content .border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.ck-content .border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.ck-content .border-l { border-left-width: 1px !important; border-left-style: solid !important; }
.ck-content .border-r { border-right-width: 1px !important; border-right-style: solid !important; }
.ck-content .border-b-2 { border-bottom-width: 2px !important; border-bottom-style: solid !important; }
.ck-content .border-t-2 { border-top-width: 2px !important; border-top-style: solid !important; }
.ck-content .border-l-4 { border-left-width: 4px !important; }
.ck-content .border-collapse { border-collapse: collapse !important; }
.ck-content .border-separate { border-collapse: separate !important; }

.ck-content .border-gray-100 { border-color: #f3f4f6 !important; }
.ck-content .border-gray-200 { border-color: #e5e7eb !important; }
.ck-content .border-gray-300 { border-color: #d1d5db !important; }
.ck-content .border-gray-400 { border-color: #9ca3af !important; }
.ck-content .border-blue-100 { border-color: #dbeafe !important; }
.ck-content .border-blue-200 { border-color: #bfdbfe !important; }
.ck-content .border-blue-500 { border-color: #3b82f6 !important; }
.ck-content .border-\[\#167ec4\] { border-color: #167ec4 !important; }
.ck-content .border-\[\#0d3c77\] { border-color: #0d3c77 !important; }
.ck-content .border-\[\#1a4f76\] { border-color: #1a4f76 !important; }

.ck-content .rounded { border-radius: 0.25rem !important; }
.ck-content .rounded-md { border-radius: 0.375rem !important; }
.ck-content .rounded-lg { border-radius: 0.5rem !important; }
.ck-content .rounded-xl { border-radius: 0.75rem !important; }
.ck-content .rounded-2xl { border-radius: 1rem !important; }
.ck-content .rounded-\[24px\] { border-radius: 24px !important; }
.ck-content .rounded-\[32px\] { border-radius: 32px !important; }
.ck-content .rounded-full { border-radius: 9999px !important; }

/* Layout & Container Helpers */
.ck-content .container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
.ck-content .font-sans { font-family: 'PT Sans', PTsans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.ck-content .font-serif { font-family: 'PT Serif', Georgia, Cambria, "Times New Roman", Times, serif !important; }
.ck-content .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }
.ck-content .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.ck-content .overflow-y-auto { overflow-y: auto !important; }
.ck-content .overflow-hidden { overflow: hidden !important; }

/* Vertical Alignment & Tracking */
.ck-content .align-middle { vertical-align: middle !important; }
.ck-content .align-top { vertical-align: top !important; }
.ck-content .align-bottom { vertical-align: bottom !important; }
.ck-content .tracking-tight { letter-spacing: -0.025em !important; }
.ck-content .tracking-normal { letter-spacing: 0 !important; }
.ck-content .tracking-wide { letter-spacing: 0.025em !important; }
.ck-content .tracking-wider { letter-spacing: 0.05em !important; }
.ck-content .list-none { list-style: none !important; }
.ck-content .cursor-pointer { cursor: pointer !important; }
.ck-content .outline-none { outline: none !important; }

/* Transitions & Hover */
.ck-content .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform !important; }
.ck-content .duration-150 { transition-duration: 150ms !important; }
.ck-content .duration-200 { transition-duration: 200ms !important; }
.ck-content .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }
.ck-content tr.hover\:bg-gray-50:hover,
.ck-content tr.hover\:bg-gray-50:hover td { background-color: #f9fafb !important; }

/* Paddings Extra */
.ck-content .p-0 { padding: 0 !important; }
.ck-content .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.ck-content .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.ck-content .pb-1 { padding-bottom: 0.25rem !important; }
.ck-content .pb-2 { padding-bottom: 0.5rem !important; }
.ck-content .pb-3 { padding-bottom: 0.75rem !important; }
.ck-content .pb-4 { padding-bottom: 1rem !important; }
.ck-content .pb-6 { padding-bottom: 1.5rem !important; }
.ck-content .pb-8 { padding-bottom: 2rem !important; }
.ck-content .pt-1 { padding-top: 0.25rem !important; }
.ck-content .pt-2 { padding-top: 0.5rem !important; }
.ck-content .pt-3 { padding-top: 0.75rem !important; }
.ck-content .pt-4 { padding-top: 1rem !important; }
.ck-content .pt-6 { padding-top: 1.5rem !important; }
.ck-content .pt-8 { padding-top: 2rem !important; }

/* Margins Extra */
.ck-content .m-0 { margin: 0 !important; }
.ck-content .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.ck-content .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.ck-content .mb-0, .ck-content p.mb-0 { margin-bottom: 0 !important; }
.ck-content .mt-0, .ck-content p.mt-0 { margin-top: 0 !important; }

/* Shadows */
.ck-content .shadow-none { box-shadow: none !important; }
.ck-content .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.ck-content .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; }
.ck-content .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.ck-content .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }
.ck-content .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }

/* Text Alignment & Utilities */
.ck-content .text-left { text-align: left !important; }
.ck-content .text-center { text-align: center !important; }
.ck-content .text-right { text-align: right !important; }
.ck-content .text-justify { text-align: justify !important; }

.ck-content .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.ck-content .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.ck-content .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.ck-content .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.ck-content .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.ck-content .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.ck-content .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.ck-content .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }

/* Arbitrary Exact Sizes commonly used in tables & UI */
.ck-content .text-\[10px\] { font-size: 10px !important; line-height: 1.3 !important; }
.ck-content .text-\[11px\] { font-size: 11px !important; line-height: 1.35 !important; }
.ck-content .text-\[12px\] { font-size: 12px !important; line-height: 1.4 !important; }
.ck-content .text-\[13px\] { font-size: 13px !important; line-height: 1.45 !important; }
.ck-content .text-\[14px\] { font-size: 14px !important; line-height: 1.5 !important; }
.ck-content .text-\[15px\] { font-size: 15px !important; line-height: 1.55 !important; }
.ck-content .text-\[16px\] { font-size: 16px !important; line-height: 1.6 !important; }

@media (min-width: 768px) {
    .ck-content .md\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
    .ck-content .md\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .ck-content .md\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .ck-content .md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .ck-content .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
}

.ck-content .font-light { font-weight: 300 !important; }
.ck-content .font-normal { font-weight: 400 !important; }
.ck-content .font-medium { font-weight: 500 !important; }
.ck-content .font-semibold { font-weight: 600 !important; }
.ck-content .font-bold { font-weight: 700 !important; }

.ck-content .italic { font-style: italic !important; }
.ck-content .uppercase { text-transform: uppercase !important; }
.ck-content .lowercase { text-transform: lowercase !important; }
.ck-content .capitalize { text-transform: capitalize !important; }

/* Buttons & Components inside Content */
.ck-content .btn-primary,
.ck-content a.btn-primary {
    display: inline-block !important;
    background-color: #0d3c77 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(13, 60, 119, 0.2) !important;
    transition: all 0.2s ease !important;
}

.ck-content .btn-primary:hover,
.ck-content a.btn-primary:hover {
    background-color: #167ec4 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.ck-content .btn-secondary,
.ck-content a.btn-secondary {
    display: inline-block !important;
    background-color: #167ec4 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ck-content .btn-secondary:hover,
.ck-content a.btn-secondary:hover {
    background-color: #0d3c77 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.ck-content .badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.ck-content .card-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    margin: 1.5rem 0 !important;
}

/* ==========================================================================
   13. Complete Isolation from Dark Mode Interference
   The editor and content area MUST preserve true frontend colors
   and MUST NOT override any user-defined inline styles!
   ========================================================================== */
html[data-theme="dark"] .ck.ck-editor__editable.ck-content,
html[data-theme="dark"] .ck-content {
    background-color: #ffffff !important;
}

html[data-theme="dark"] .ck-content h1:not([style*="color"]),
html[data-theme="dark"] .ck-content h2:not([style*="color"]),
html[data-theme="dark"] .ck-content h3:not([style*="color"]),
html[data-theme="dark"] .ck-content h4:not([style*="color"]),
html[data-theme="dark"] .ck-content h5:not([style*="color"]),
html[data-theme="dark"] .ck-content h6:not([style*="color"]) {
    color: #0d3c77;
}

html[data-theme="dark"] .ck-content a:not([style*="color"]) {
    color: #167ec4;
}

html[data-theme="dark"] .ck-content p:not([style*="color"]),
html[data-theme="dark"] .ck-content li:not([style*="color"]),
html[data-theme="dark"] .ck-content td:not([style*="color"]) {
    color: #374151;
}

html[data-theme="dark"] .ck-content thead.text-white th,
html[data-theme="dark"] .ck-content thead.text-white th strong,
html[data-theme="dark"] .ck-content thead[class*="text-white"] th,
html[data-theme="dark"] .ck-content thead[class*="text-white"] th strong,
html[data-theme="dark"] .ck-content th.text-white,
html[data-theme="dark"] .ck-content th.text-white strong,
html[data-theme="dark"] .ck-content th .text-white,
html[data-theme="dark"] .ck-content th strong.text-white {
    color: #ffffff !important;
}

html[data-theme="dark"] .ck-content thead.bg-\[\#0d3c77\],
html[data-theme="dark"] .ck-content thead[class*="bg-[#0d3c77]"] {
    background-color: #0d3c77 !important;
}

html[data-theme="dark"] .ck-content thead[class*="bg-"] th:not([class*="bg-"]):not([style*="background"]) {
    background-color: transparent !important;
}

html[data-theme="dark"] .ck-content thead:not([class*="text-"]):not([style*="color"]) th:not([class*="text-"]):not([style*="color"]) {
    color: #0d3c77;
}

html[data-theme="dark"] .ck-content thead:not([class*="bg-"]):not([style*="background"]) th:not([class*="bg-"]):not([style*="background"]) {
    background-color: #f1f5f9;
}

html[data-theme="dark"] .ck-content tr:nth-child(even):not([class*="bg-"]):not([style*="background"]) td:not([class*="bg-"]):not([style*="background"]) {
    background-color: #f8fafc;
}

html[data-theme="dark"] .ck-content tr:hover:not([class*="bg-"]):not([style*="background"]) td:not([class*="bg-"]):not([style*="background"]) {
    background-color: #eff6ff;
}

html[data-theme="dark"] .ck-content blockquote:not([style*="background"]) {
    background-color: #f8fafc;
}

html[data-theme="dark"] .ck-content blockquote:not([style*="color"]) {
    color: #475569;
}