@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --primary-forest: #14532d;
  --primary-emerald: #15803d;
  --primary-leaf: #22c55e;
  --accent-gold: #d97706;
  --accent-amber: #f59e0b;
  --text-dark: #0f172a;
  --text-muted: #475569;
  --bg-cream: #fbfdf9;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-cream);
  overflow-x: hidden;
  transition: font-size 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Poppins', sans-serif;
}

/* Accessibility Modes */
body.font-size-sm { font-size: 14px; }
body.font-size-md { font-size: 16px; }
body.font-size-lg { font-size: 18px; }

body.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}
body.high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.high-contrast .bg-white,
body.high-contrast .bg-emerald-50,
body.high-contrast .bg-gray-50 {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #ffff00 !important;
}

/* Tricolor Top Stripe */
.gov-tricolor-bar {
  height: 4px;
  background: linear-gradient(90deg, #FF9933 0%, #FF9933 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #138808 66.66%, #138808 100%);
}

/* Prevent horizontal page overflow on mobile without breaking position:sticky */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  width: 100%;
}

/* Delicate Light Green Watercolor Landscape Background for Website Header & Hero Banner */
.header-watercolor-bg {
  background-image: linear-gradient(180deg, rgba(244, 250, 246, 0.96) 0%, rgba(237, 247, 242, 0.95) 50%, rgba(244, 250, 246, 0.97) 100%), url('../images/header_watercolor_bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.dark .header-watercolor-bg {
  background-image: linear-gradient(180deg, rgba(12, 22, 17, 0.95) 0%, rgba(9, 17, 13, 0.97) 100%), url('../images/header_watercolor_bg.jpg');
  background-size: cover;
  background-position: center top;
}

.noticebar-watercolor {
  background: linear-gradient(90deg, #052e16 0%, #14532d 40%, #064e3b 70%, #052e16 100%);
}

.noticebar-azure {
  background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 40%, #2563eb 70%, #1e3a8a 100%);
}

.header-azure-bg {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(219, 234, 254, 0.92) 50%, rgba(239, 246, 255, 0.97) 100%);
}

/* Royal Azure Blue Flowing Wave Gradient Theme (Inspired by CGCERT Banner Image) */
.theme-azure-wave-bg {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(191, 219, 254, 0.45) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(224, 242, 254, 0.5) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%231d4ed8' fill-opacity='0.06' d='M0,0 L380,0 C260,180 180,320 280,520 C360,680 220,820 0,900 Z'%3E%3C/path%3E%3Cpath fill='%233b82f6' fill-opacity='0.08' d='M0,0 L290,0 C190,140 120,280 210,460 C290,620 170,760 0,840 Z'%3E%3C/path%3E%3Cpath fill='%2360a5fa' fill-opacity='0.10' d='M0,0 L200,0 C120,100 70,220 150,380 C210,520 110,680 0,760 Z'%3E%3C/path%3E%3Cpath fill='%2393c5fd' fill-opacity='0.12' d='M0,0 L120,0 C60,70 30,160 90,300 C140,420 60,580 0,660 Z'%3E%3C/path%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
}

/* Emerald Eco Flowing Ribbon Wave Gradient Theme (Organic Wave Light Green) */
.theme-emerald-wave-bg {
  background-color: #f4faf6;
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(187, 247, 208, 0.45) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(220, 252, 231, 0.5) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%23047857' fill-opacity='0.06' d='M0,0 L380,0 C260,180 180,320 280,520 C360,680 220,820 0,900 Z'%3E%3C/path%3E%3Cpath fill='%2310b981' fill-opacity='0.08' d='M0,0 L290,0 C190,140 120,280 210,460 C290,620 170,760 0,840 Z'%3E%3C/path%3E%3Cpath fill='%2334d399' fill-opacity='0.10' d='M0,0 L200,0 C120,100 70,220 150,380 C210,520 110,680 0,760 Z'%3E%3C/path%3E%3Cpath fill='%23a7f3d0' fill-opacity='0.12' d='M0,0 L120,0 C60,70 30,160 90,300 C140,420 60,580 0,660 Z'%3E%3C/path%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
}

/* Text Justify Utility */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}

/* Sleek Admin Sidebar Custom Scrollbar */
.admin-sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}
.admin-sidebar-scroll::-webkit-scrollbar-track {
  background: #09131a;
}
.admin-sidebar-scroll::-webkit-scrollbar-thumb {
  background: #059669;
  border-radius: 4px;
}
.admin-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* =============================================================
 * TOP PAGE LOAD ANIMATED PROGRESS BAR (FAST & BUTTERY SMOOTH)
 * ============================================================= */
.page-top-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #10b981, #f59e0b, #34d399, #10b981);
  background-size: 200% 100%;
  animation: pageLoaderGradient 1.2s linear infinite;
  z-index: 1000000;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8), 0 0 5px rgba(245, 158, 11, 0.6);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  will-change: width, opacity;
}

.page-top-loader.hidden-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

body.admin-body .page-top-loader,
body.admin-body .scroll-top-scroller {
  display: none !important;
  visibility: hidden !important;
}

@keyframes pageLoaderGradient {
  0% { background-position: 100% 0%; }
  100% { background-position: -100% 0%; }
}

/* =============================================================
 * TOP SCROLL ANIMATED GRADIENT PROGRESS BAR (SCROLLER TOP)
 * ============================================================= */
.scroll-top-scroller {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #10b981 0%, #059669 25%, #f59e0b 50%, #10b981 75%, #34d399 100%);
  background-size: 250% 100%;
  animation: scrollGradientShimmer 3s ease infinite;
  z-index: 999999;
  pointer-events: none;
  box-shadow: 0 1px 8px rgba(16, 185, 129, 0.7), 0 0 12px rgba(245, 158, 11, 0.5);
  transition: width 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: width;
}

@keyframes scrollGradientShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

html.dark .scroll-top-scroller {
  background: linear-gradient(90deg, #34d399 0%, #10b981 25%, #fbbf24 50%, #34d399 75%, #6ee7b7 100%);
  background-size: 250% 100%;
  box-shadow: 0 1px 12px rgba(52, 211, 153, 0.85), 0 0 15px rgba(251, 191, 36, 0.7);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}

/* Mobile Horizontal Tabs Scroller - Isolated to only subpages container */
.mobile-tabs-scroller {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.mobile-tabs-scroller::-webkit-scrollbar {
  display: none;
}

/* Ensure rich prose tables and media never overflow screen */
.prose {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose img {
  max-width: 100%;
  height: auto;
}
::-webkit-scrollbar-thumb {
  background: #15803d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #14532d;
}

/* Glassmorphism & Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 83, 45, 0.12);
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(20, 83, 45, 0.15);
}

/* Retro Hit Counter Box */
.hit-counter-box {
  background: #1e293b;
  border: 2px solid #0f172a;
  border-radius: 4px;
  display: inline-flex;
  padding: 4px 6px;
  gap: 3px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.hit-digit {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  color: #38bdf8;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 2px 6px;
  border-radius: 2px;
  border-bottom: 2px solid #0284c7;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* Pulse New Tag */
.badge-pulse {
  position: relative;
}
.badge-pulse::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: inherit;
  opacity: 0.6;
  animation: pulse-ring 1.8s infinite;
  z-index: -1;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Carousel Styles */
.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.slider-wrapper {
  display: flex;
  transition: transform 0.6s ease-in-out;
}
.slider-slide {
  min-width: 100%;
  position: relative;
}
.slide-caption-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(15, 23, 42, 0.85) 50%, rgba(20, 83, 45, 0.95) 100%);
}

/* -------------------------------------------------------------
 * PREMIUM MODERN NAVIGATION DROPDOWNS & NESTED FLYOUTS
 * ------------------------------------------------------------- */
.nav-item {
  position: relative;
}

.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.nav-item:hover > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Nested sub-menu flyout */
.nested-dropdown-parent {
  position: relative;
}

.nested-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.nested-dropdown-parent:hover > .nested-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Printing styles for certificate */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-certificate, #printable-certificate * {
    visibility: visible;
  }
  #printable-certificate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* =============================================================
 * DARK MODE THEME STYLING
 * ============================================================= */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #08100c !important;
  color: #e2e8f0 !important;
}
html.dark .bg-white {
  background-color: #0e1c15 !important;
  color: #f1f5f9 !important;
  border-color: #173224 !important;
}
html.dark .bg-gray-50 {
  background-color: #0b1610 !important;
  color: #cbd5e1 !important;
  border-color: #173224 !important;
}
html.dark .bg-gray-100 {
  background-color: #13271d !important;
  color: #f1f5f9 !important;
  border-color: #1d3e2c !important;
}
html.dark .bg-\[\#e4e4e4\] {
  background-color: #162f22 !important;
  color: #f8fafc !important;
  border-color: #204631 !important;
}
html.dark .hover\:bg-\[\#d8d8d8\]:hover {
  background-color: #1b3829 !important;
}
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
  border-color: #173224 !important;
}
html.dark .divide-gray-100 > * + *,
html.dark .divide-gray-200 > * + * {
  border-color: #173224 !important;
}
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-forest-950 {
  color: #f8fafc !important;
}
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: #cbd5e1 !important;
}
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #94a3b8 !important;
}
html.dark .text-sky-700 {
  color: #38bdf8 !important;
}
html.dark .text-sky-700:hover {
  color: #7dd3fc !important;
}
html.dark .accordion-body {
  background-color: #0e1c15 !important;
}
html.dark .mobile-tabs-scroller a:not(.bg-forest-900) {
  background-color: #0e1c15 !important;
  color: #cbd5e1 !important;
  border-color: #173224 !important;
}
html.dark aside.bg-white {
  background-color: #0e1c15 !important;
  border-color: #173224 !important;
}
html.dark aside nav a:not(.bg-forest-900) {
  color: #cbd5e1 !important;
}
html.dark aside nav a:not(.bg-forest-900):hover {
  background-color: #13271d !important;
  color: #34d399 !important;
}
html.dark .prose {
  color: #cbd5e1 !important;
}
html.dark .prose strong,
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
  color: #f8fafc !important;
}
html.dark .prose th {
  background-color: #13271d !important;
  color: #f8fafc !important;
}
html.dark .prose td {
  border-color: #173224 !important;
}
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #13271d !important;
  color: #f8fafc !important;
  border-color: #204631 !important;
}
html.dark footer {
  border-color: #173224 !important;
}

/* =============================================================
 * GOOGLE TRANSLATE SEAMLESS INVISIBLE INTEGRATION
 * ============================================================= */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
}
body {
  top: 0px !important;
  position: static !important;
}
.skiptranslate > iframe {
  display: none !important;
}
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* =============================================================
 * TOP ANNOUNCEMENTS TICKER & PAUSE ON HOVER ANIMATION
 * ============================================================= */
@keyframes tickerMarqueeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: tickerMarqueeScroll var(--ticker-speed, 25s) linear infinite;
  will-change: transform;
}

.hover-pause-ticker:hover .animate-marquee,
.animate-marquee:hover {
  animation-play-state: paused !important;
}

/* =============================================================
 * HERO CAROUSEL SLIDER PERFECT MOBILE & DESKTOP FULL COVER FIT
 * ============================================================= */
#hero-slider-wrapper {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  will-change: transform;
}

.slider-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.slider-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* =============================================================
 * QUILL.JS RICH TEXT EDITOR CUSTOM STYLING & ENHANCEMENTS
 * ============================================================= */
.quill-editor-wrapper {
  background-color: #ffffff;
}

.quill-editor-wrapper .ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  padding: 8px 12px !important;
}

.quill-editor-wrapper .ql-container.ql-snow {
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.quill-editor-wrapper .ql-editor {
  min-height: 220px !important;
  line-height: 1.65 !important;
}

.quill-editor-wrapper .ql-editor.ql-blank::before {
  font-style: normal !important;
  color: #94a3b8 !important;
}

/* =============================================================
 * 0. NAVIGATION & UI LIST RESET (PROTECTS NAVBAR & UI COMPONENTS)
 * ============================================================= */
nav ul, nav ol, nav li,
header ul, header ol, header li,
footer ul, footer ol, footer li,
.navbar ul, .navbar ol, .navbar li,
#mobile-menu ul, #mobile-menu ol, #mobile-menu li,
.menu-tree ul, .menu-tree li,
[role="navigation"] ul, [role="navigation"] li {
  list-style: none !important;
  list-style-type: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

nav li::before,
header li::before,
footer li::before,
.navbar li::before,
#mobile-menu li::before,
.menu-tree li::before,
[role="navigation"] li::before {
  content: none !important;
  display: none !important;
}

nav ul, .navbar ul {
  display: flex !important;
  flex-wrap: wrap !important;
}

nav li, .navbar li {
  display: block !important;
}

/* =============================================================
 * RICH TEXT & QUILL.JS BULLETS, LISTS & FORMATTING CSS (SCOPED ONLY)
 * ============================================================= */

/* 1. Unordered Bullet Lists (ul) */
.prose ul,
.rich-content ul,
.ql-editor ul,
.content-area ul,
.page-content ul,
.db-html-content ul {
  list-style-type: disc !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  padding-left: 1.75rem !important;
  display: block !important;
}

/* Sub-bullets (Nested Unordered Lists) */
.prose ul ul, .rich-content ul ul, .ql-editor ul ul, .content-area ul ul, .page-content ul ul, .db-html-content ul ul {
  list-style-type: circle !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 1.25rem !important;
}
.prose ul ul ul, .rich-content ul ul ul, .ql-editor ul ul ul, .content-area ul ul ul, .page-content ul ul ul, .db-html-content ul ul ul {
  list-style-type: square !important;
}

/* 2. Ordered Numbered Lists (ol) */
.prose ol,
.rich-content ol,
.ql-editor ol,
.content-area ol,
.page-content ol,
.db-html-content ol {
  list-style-type: decimal !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  padding-left: 1.75rem !important;
  display: block !important;
  counter-reset: ql-counter !important;
}

/* Sub-numbers (Nested Ordered Lists) */
.prose ol ol, .rich-content ol ol, .ql-editor ol ol, .content-area ol ol, .page-content ol ol, .db-html-content ol ol {
  list-style-type: lower-alpha !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 1.25rem !important;
}
.prose ol ol ol, .rich-content ol ol ol, .ql-editor ol ol ol, .content-area ol ol ol, .page-content ol ol ol, .db-html-content ol ol ol {
  list-style-type: lower-roman !important;
}

/* 3. Rich Content List Item (li) Styling */
.prose li,
.rich-content li,
.ql-editor li,
.content-area li,
.page-content li,
.db-html-content li {
  display: list-item !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.65 !important;
}

/* 4. QUILL.JS SPECIFIC LIST FORMATS (<li data-list="bullet"> & <li data-list="ordered">) */
.ql-editor ol > li[data-list="bullet"],
.ql-editor ul > li[data-list="bullet"],
.prose li[data-list="bullet"],
.rich-content li[data-list="bullet"],
.db-html-content li[data-list="bullet"],
li[data-list="bullet"],
li.ql-list-bullet {
  list-style-type: none !important;
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

.ql-editor ol > li[data-list="bullet"]::before,
.ql-editor ul > li[data-list="bullet"]::before,
.prose li[data-list="bullet"]::before,
.rich-content li[data-list="bullet"]::before,
.db-html-content li[data-list="bullet"]::before,
li[data-list="bullet"]::before,
li.ql-list-bullet::before {
  content: "\2022" !important; /* Round Bullet Dot */
  color: #15803d !important; /* Emerald green bullet */
  font-weight: bold !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  position: absolute !important;
  left: 0.15rem !important;
  top: 0.1rem !important;
  display: inline-block !important;
}

html.dark ol > li[data-list="bullet"]::before,
html.dark ul > li[data-list="bullet"]::before,
html.dark li[data-list="bullet"]::before {
  color: #34d399 !important;
}

.ql-editor ol > li[data-list="ordered"],
.ql-editor ul > li[data-list="ordered"],
.prose li[data-list="ordered"],
.rich-content li[data-list="ordered"],
.db-html-content li[data-list="ordered"],
li[data-list="ordered"] {
  list-style-type: none !important;
  position: relative !important;
  padding-left: 1.75rem !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
  counter-increment: ql-counter !important;
}

.ql-editor ol > li[data-list="ordered"]::before,
.ql-editor ul > li[data-list="ordered"]::before,
.prose li[data-list="ordered"]::before,
.rich-content li[data-list="ordered"]::before,
.db-html-content li[data-list="ordered"]::before,
li[data-list="ordered"]::before,
li.ql-list-ordered::before {
  content: counter(ql-counter) ". " !important;
  color: #15803d !important;
  font-weight: 700 !important;
  position: absolute !important;
  left: 0.15rem !important;
  top: 0 !important;
  display: inline-block !important;
}

html.dark ol > li[data-list="ordered"]::before,
html.dark ul > li[data-list="ordered"]::before,
html.dark li[data-list="ordered"]::before {
  color: #34d399 !important;
}

/* Check list format */
li[data-list="check"] {
  list-style-type: none !important;
  position: relative !important;
  padding-left: 1.5rem !important;
  display: block !important;
}
li[data-list="check"]::before {
  content: "☑ " !important;
  color: #15803d !important;
  font-weight: bold !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

/* Hide Quill internal helper span */
.ql-ui {
  display: none !important;
  visibility: hidden !important;
}

/* Indentation classes */
.ql-indent-1 { padding-left: 3rem !important; }
.ql-indent-2 { padding-left: 4.5rem !important; }
.ql-indent-3 { padding-left: 6rem !important; }
.ql-indent-4 { padding-left: 7.5rem !important; }
.ql-indent-5 { padding-left: 9rem !important; }

/* Text Alignment & Typography */
.ql-align-center, .text-center { text-align: center !important; }
.ql-align-right, .text-right { text-align: right !important; }
.ql-align-justify, .text-justify { text-align: justify !important; text-justify: inter-word !important; }
.ql-align-left, .text-left { text-align: left !important; }

.ql-size-small { font-size: 0.75rem !important; }
.ql-size-large { font-size: 1.25rem !important; }
.ql-size-huge { font-size: 1.75rem !important; }

.ql-font-serif { font-family: 'Merriweather', Georgia, serif !important; }
.ql-font-monospace { font-family: monospace !important; }

/* Blockquotes */
.prose blockquote, .rich-content blockquote, .ql-editor blockquote, .db-html-content blockquote {
  border-left: 4px solid #15803d !important;
  padding: 0.6rem 1rem !important;
  margin: 1rem 0 !important;
  font-style: italic !important;
  color: #1e293b !important;
  background-color: rgba(240, 253, 244, 0.6) !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
}

html.dark .prose blockquote, html.dark .rich-content blockquote, html.dark .ql-editor blockquote, html.dark .db-html-content blockquote {
  color: #e2e8f0 !important;
  background-color: rgba(20, 83, 45, 0.25) !important;
  border-left-color: #22c55e !important;
}