/* Summernote Content Responsive Styles - Force Override Inline Styles */
.summernote-content {
    width: 100%;
    overflow-wrap: break-word;
    line-height: 1.6 !important;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

/* Reset all inline styles and make responsive */
.summernote-content p {
    margin: 1rem 0 !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    font-size: clamp(14px, 4vw, 18px) !important;
}

.summernote-content span {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    background-color: transparent !important;
    font-weight: inherit !important;
    font-style: normal !important;
    text-decoration: none !important;
    white-space: normal !important;
}

/* ========== COMPREHENSIVE FONT SIZE MANAGEMENT ========== */

/* Font size 26pt (largest) */
.summernote-content p[style*="font-size:26pt"] span,
.summernote-content p[style*="font-size:26pt"],
.summernote-content span[style*="font-size:26pt"] {
    font-size: clamp(20px, 6vw, 36px) !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Font size 24pt */
.summernote-content p[style*="font-size:24pt"] span,
.summernote-content p[style*="font-size:24pt"],
.summernote-content span[style*="font-size:24pt"] {
    font-size: clamp(19px, 5.5vw, 32px) !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* Font size 22pt */
.summernote-content p[style*="font-size:22pt"] span,
.summernote-content p[style*="font-size:22pt"],
.summernote-content span[style*="font-size:22pt"] {
    font-size: clamp(18px, 5vw, 28px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Font size 20pt */
.summernote-content p[style*="font-size:20pt"] span,
.summernote-content p[style*="font-size:20pt"],
.summernote-content span[style*="font-size:20pt"] {
    font-size: clamp(17px, 4.5vw, 24px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Font size 18pt */
.summernote-content p[style*="font-size:18pt"] span,
.summernote-content p[style*="font-size:18pt"],
.summernote-content span[style*="font-size:18pt"] {
    font-size: clamp(16px, 4vw, 22px) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Font size 17pt */
.summernote-content p[style*="font-size:17pt"] span,
.summernote-content p[style*="font-size:17pt"],
.summernote-content span[style*="font-size:17pt"] {
    font-size: clamp(15px, 3.7vw, 19px) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* Font size 16pt */
.summernote-content p[style*="font-size:16pt"] span,
.summernote-content p[style*="font-size:16pt"],
.summernote-content span[style*="font-size:16pt"] {
    font-size: clamp(15px, 3.8vw, 20px) !important;
    line-height: 1.5 !important;
}

/* Font size 15pt (base size) */
.summernote-content p[style*="font-size:15pt"] span,
.summernote-content p[style*="font-size:15pt"],
.summernote-content span[style*="font-size:15pt"] {
    font-size: clamp(14px, 3.5vw, 18px) !important;
    line-height: 1.6 !important;
    color: #2d3748 !important;
}

/* Font size 14pt */
.summernote-content p[style*="font-size:14pt"] span,
.summernote-content p[style*="font-size:14pt"],
.summernote-content span[style*="font-size:14pt"] {
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.6 !important;
}

/* Font size 12pt */
.summernote-content p[style*="font-size:12pt"] span,
.summernote-content p[style*="font-size:12pt"],
.summernote-content span[style*="font-size:12pt"] {
    font-size: clamp(12px, 3vw, 14px) !important;
    line-height: 1.6 !important;
}

/* Font size 10pt */
.summernote-content p[style*="font-size:10pt"] span,
.summernote-content p[style*="font-size:10pt"],
.summernote-content span[style*="font-size:10pt"] {
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.6 !important;
}

/* ========== IMAGE MANAGEMENT ========== */

/* ========== IMAGE MANAGEMENT ========== */

/* Make all images responsive, centered, and full width within their parent */
.summernote-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Handle images inside span containers with fixed dimensions */
.summernote-content span img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Target specific span containers that wrap images */
.summernote-content span[style*="display:inline-block"][style*="overflow:hidden"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Remove fixed dimensions from image wrapper spans */
.summernote-content span[style*="width:"][style*="height:"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Specifically target spans with exact width/height styles */
.summernote-content span[style*="width:602px"],
.summernote-content span[style*="width: 602px"],
.summernote-content span[style*="height:451px"],
.summernote-content span[style*="height: 451px"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Remove negative margins from images */
.summernote-content img[style*="margin-left"],
.summernote-content img[style*="margin-top"] {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure images fill their container width */
.summernote-content span img[width],
.summernote-content span img[height] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Center align the entire image container */
.summernote-content span[style*="border:none"] {
    display: block !important;
    text-align: center !important;
    margin: 1.5rem auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Handle specific image with 602px width */
.summernote-content img[width="602.0796676259635"],
.summernote-content img[width="602"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Handle specific image with 451px height */
.summernote-content img[height="451"] {
    height: auto !important;
    max-height: 100% !important;
}

/* Make sure the image container doesn't overflow */
.summernote-content span[style*="overflow:hidden"] {
    overflow: visible !important;
}

/* ========== RESPONSIVE IMAGE BREAKPOINTS ========== */

/* Mobile (Small devices) */
@media (max-width: 480px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 1rem auto !important;
        border-radius: 6px !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 1rem auto !important;
    }
}

/* Mobile (Medium devices) */
@media (min-width: 481px) and (max-width: 640px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 1.25rem auto !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 1.25rem auto !important;
    }
}

/* Tablet (Small tablets) */
@media (min-width: 641px) and (max-width: 768px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 1.5rem auto !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 1.5rem auto !important;
    }
}

/* Tablet (Large tablets) */
@media (min-width: 769px) and (max-width: 1024px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 1.5rem auto !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 1.5rem auto !important;
    }
}

/* PC (Small laptops) */
@media (min-width: 1025px) and (max-width: 1280px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 1.75rem auto !important;
        max-width: 90% !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 1.75rem auto !important;
        max-width: 90% !important;
    }
}

/* PC (Large laptops & desktops) */
@media (min-width: 1281px) and (max-width: 1536px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 2rem auto !important;
        max-width: 85% !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 2rem auto !important;
        max-width: 85% !important;
    }
}

/* PC (Extra large desktops) */
@media (min-width: 1537px) {

    .summernote-content span img,
    .summernote-content img {
        margin: 2rem auto !important;
        max-width: 80% !important;
    }

    .summernote-content span[style*="display:inline-block"] {
        margin: 2rem auto !important;
        max-width: 80% !important;
    }
}

/* Additional safety rules to prevent overflow */
.summernote-content span,
.summernote-content img {
    box-sizing: border-box !important;
}

.summernote-content * {
    max-width: 100% !important;
}

/* Ensure no horizontal scroll caused by images */
.summernote-content {
    overflow-x: hidden !important;
}

/* Center alignment for all image containers */
.summernote-content span[style*="display:inline-block"] {
    text-align: center !important;
}

/* ========== COLOR MANAGEMENT ========== */

/* Specific color overrides */
.summernote-content span[style*="color:#146d52"],
.summernote-content span[style*="color:#105842"] {
    color: #146d52 !important;
}

.summernote-content span[style*="color:#2d3748"] {
    color: #2d3748 !important;
}

.summernote-content span[style*="color:#434343"] {
    color: #4a5568 !important;
    font-weight: 600 !important;
}

.summernote-content span[style*="color:#777777"] {
    color: #718096 !important;
}

/* Bold text normalization */
.summernote-content span[style*="font-weight:700"],
.summernote-content span[style*="font-weight:700"] {
    font-weight: 600 !important;
}

/* Background color removal */
.summernote-content span[style*="background-color"] {
    background-color: transparent !important;
}

/* ========== LISTS & STRUCTURE ========== */

/* Lists responsive */
.summernote-content ul,
.summernote-content ol {
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.summernote-content li {
    margin: 0.5rem 0 !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.6 !important;
    color: #2d3748 !important;
}

.summernote-content ul li {
    list-style-type: disc !important;
}

.summernote-content ul li p {
    margin: 0 !important;
}

/* Remove margin-top and margin-bottom overrides */
.summernote-content p[style*="margin-top:0pt"],
.summernote-content p[style*="margin-top:10pt"] {
    margin-top: 1rem !important;
}

.summernote-content p[style*="margin-bottom:0pt"],
.summernote-content p[style*="margin-bottom:3pt"] {
    margin-bottom: 1rem !important;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Mobile (Small devices) */
@media (max-width: 480px) {
    .summernote-content {
        line-height: 1.5 !important;
        padding: 0 0.5rem !important;
    }

    .summernote-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0.75rem 0 !important;
    }

    .summernote-content img {
        margin: 1rem auto !important;
        border-radius: 6px !important;
    }

    .summernote-content li {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0.4rem 0 !important;
    }

    .summernote-content ul,
    .summernote-content ol {
        padding-left: 1rem !important;
        margin: 0.75rem 0 !important;
    }
}

/* Mobile (Medium devices) */
@media (min-width: 481px) and (max-width: 640px) {
    .summernote-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .summernote-content img {
        margin: 1.25rem auto !important;
    }

    .summernote-content li {
        font-size: 15px !important;
    }
}

/* Tablet (Small tablets) */
@media (min-width: 641px) and (max-width: 768px) {
    .summernote-content p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .summernote-content img {
        margin: 1.5rem auto !important;
    }

    .summernote-content li {
        font-size: 16px !important;
    }

    .summernote-content ul,
    .summernote-content ol {
        padding-left: 1.25rem !important;
    }
}

/* Tablet (Large tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
    .summernote-content p {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    .summernote-content img {
        margin: 1.5rem auto !important;
    }

    .summernote-content li {
        font-size: 17px !important;
    }

    .summernote-content ul,
    .summernote-content ol {
        padding-left: 1.5rem !important;
    }
}

/* PC (Small laptops) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .summernote-content p {
        font-size: 18px !important;
        line-height: 1.7 !important;
    }

    .summernote-content img {
        margin: 1.75rem auto !important;
        max-width: 90% !important;
    }

    .summernote-content li {
        font-size: 18px !important;
        line-height: 1.7 !important;
    }
}

/* PC (Large laptops & desktops) */
@media (min-width: 1281px) and (max-width: 1536px) {
    .summernote-content p {
        font-size: 19px !important;
        line-height: 1.7 !important;
    }

    .summernote-content img {
        margin: 2rem auto !important;
        max-width: 85% !important;
    }

    .summernote-content li {
        font-size: 19px !important;
    }
}

/* PC (Extra large desktops) */
@media (min-width: 1537px) {
    .summernote-content p {
        font-size: 20px !important;
        line-height: 1.8 !important;
    }

    .summernote-content img {
        margin: 2rem auto !important;
        max-width: 80% !important;
    }

    .summernote-content li {
        font-size: 20px !important;
        line-height: 1.8 !important;
    }
}

/* Additional responsive improvements */
@media (max-width: 768px) {
    .summernote-content br {
        display: block;
        content: "";
        margin: 0.5rem 0;
    }
}

/* Improve readability on very large screens */
@media (min-width: 1600px) {
    .summernote-content {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Ensure no horizontal overflow */
.summernote-content {
    overflow-x: hidden !important;
}

.summernote-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ========== TABLE MANAGEMENT ========== */

/* Make tables responsive and scrollable */
.summernote-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
    font-size: clamp(12px, 2.5vw, 14px) !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* Table wrapper for better mobile experience */
.summernote-content div[align="center"] {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 1.5rem 0 !important;
}

/* ========== ENHANCED HEADER STYLING ========== */

/* First table row (header row) special styling */
.summernote-content tr:first-child {
    background: linear-gradient(135deg, #0c8487, #0a6c6f) !important;
    border-bottom: 2px solid #065a5c !important;
}

.summernote-content tr:first-child th {
    background: transparent !important;
    color: white !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 16px 8px !important;
    border: 1px solid #065a5c !important;
    font-size: clamp(12px, 2.3vw, 14px) !important;
    white-space: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
}

/* Add subtle shadow to header cells */
.summernote-content tr:first-child th::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Hover effect for header cells */
.summernote-content tr:first-child th:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.3s ease !important;
}

/* First header cell - rounded top-left corner */
.summernote-content tr:first-child th:first-child {
    border-top-left-radius: 7px !important;
}

/* Last header cell - rounded top-right corner */
.summernote-content tr:first-child th:last-child {
    border-top-right-radius: 7px !important;
}

/* Header text specific styling */
.summernote-content tr:first-child th span {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ========== REGULAR TABLE STYLING ========== */

/* Regular table headers (if any) */
.summernote-content th:not(:first-child) {
    background-color: #0c8487 !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    border: 1px solid #000000 !important;
    font-size: clamp(11px, 2.2vw, 13px) !important;
    white-space: normal !important;
}

/* Table cells */
.summernote-content td {
    padding: 12px 8px !important;
    border: 1px solid #3f4d5f !important;
    text-align: center !important;
    vertical-align: middle !important;
    background-color: white !important;
    font-size: clamp(12px, 2.5vw, 14px) !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Specific styling for table text */
.summernote-content td span,
.summernote-content th span {
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    background-color: transparent !important;
    white-space: normal !important;
}

/* Table header text colors */
.summernote-content th span[style*="color:#ffffff"] {
    color: white !important;
}

/* Table cell text colors */
.summernote-content td span[style*="color:#4a5568"] {
    color: #4a5568 !important;
}

/* Bold country names in table */
.summernote-content td span[style*="font-weight:700"] {
    font-weight: 600 !important;
    color: #2d3748 !important;
}

/* Medium weight for CRF names */
.summernote-content td span[style*="font-weight:500"] {
    font-weight: 500 !important;
    color: #4a5568 !important;
}

/* Normal weight for locations and dates */
.summernote-content td span[style*="font-weight:400"] {
    font-weight: 400 !important;
    color: #6b7280 !important;
}

/* Remove background colors from table cells */
.summernote-content td[style*="background-color"],
.summernote-content th[style*="background-color"] {
    background-color: inherit !important;
}

/* Specific header background */
.summernote-content th[style*="background-color:#0c8487"] {
    background-color: #0c8487 !important;
}

/* Specific cell background */
.summernote-content td[style*="background-color:#ffffff"] {
    background-color: white !important;
}

/* Table row styling */
.summernote-content tr {
    border-bottom: 1px solid #e5e7eb !important;
}

.summernote-content tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.summernote-content tr:hover {
    background-color: #f1f5f9 !important;
}

/* ========== RESPONSIVE TABLE BREAKPOINTS ========== */

/* Mobile (Small devices) */
@media (max-width: 480px) {
    .summernote-content table {
        font-size: 11px !important;
        margin: 1rem 0 !important;
    }

    .summernote-content th,
    .summernote-content td {
        padding: 8px 4px !important;
        font-size: 11px !important;
    }

    .summernote-content th {
        font-size: 10px !important;
    }

    /* First row header mobile adjustments */
    .summernote-content tr:first-child th {
        padding: 12px 4px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }

    .summernote-content div[align="center"] {
        margin: 1rem 0 !important;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 4px;
    }
}

/* Mobile (Medium devices) */
@media (min-width: 481px) and (max-width: 640px) {
    .summernote-content table {
        font-size: 12px !important;
    }

    .summernote-content th,
    .summernote-content td {
        padding: 10px 6px !important;
        font-size: 12px !important;
    }

    .summernote-content th {
        font-size: 11px !important;
    }

    .summernote-content tr:first-child th {
        padding: 14px 6px !important;
        font-size: 12px !important;
    }
}

/* Tablet (Small tablets) */
@media (min-width: 641px) and (max-width: 768px) {
    .summernote-content table {
        font-size: 13px !important;
    }

    .summernote-content th,
    .summernote-content td {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    .summernote-content th {
        font-size: 12px !important;
    }

    .summernote-content tr:first-child th {
        padding: 16px 8px !important;
        font-size: 13px !important;
    }
}

/* Tablet (Large tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
    .summernote-content table {
        font-size: 14px !important;
        white-space: normal !important;
    }

    .summernote-content th,
    .summernote-content td {
        padding: 12px 8px !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    .summernote-content tr:first-child th {
        padding: 16px 8px !important;
        font-size: 14px !important;
    }
}

/* PC and larger screens */
@media (min-width: 1025px) {
    .summernote-content table {
        white-space: normal !important;
        display: table !important;
        overflow-x: visible !important;
    }

    .summernote-content th,
    .summernote-content td {
        white-space: normal !important;
        font-size: 14px !important;
    }

    .summernote-content tr:first-child th {
        font-size: 15px !important;
        padding: 18px 10px !important;
    }

    .summernote-content div[align="center"] {
        overflow-x: visible !important;
    }
}

/* Very large screens - optimize table display */
@media (min-width: 1281px) {
    .summernote-content table {
        font-size: 15px !important;
    }

    .summernote-content th,
    .summernote-content td {
        font-size: 15px !important;
        padding: 14px 10px !important;
    }

    .summernote-content tr:first-child th {
        font-size: 16px !important;
        padding: 20px 12px !important;
    }
}

/* Ensure table doesn't overflow on any screen */
.summernote-content table {
    max-width: 100% !important;
}

.summernote-content div[align="center"] {
    max-width: 100% !important;
}

/* Remove any fixed widths from table columns */
.summernote-content colgroup,
.summernote-content col {
    width: auto !important;
}

/* Center aligned tables */
.summernote-content div[align="center"] table {
    margin-left: auto !important;
    margin-right: auto !important;
}