.rich-content-editor,
.admin-content {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.rich-content-editor {
    padding: 14px;
    max-width: 892px;
    margin: 0 auto;
    box-sizing: border-box;
}

/*
 * Frontend layout styles must not restyle content authored in CKEditor.
 * Inline author styles still win, except for heading typography below.
 */
.admin-content.admin-content.admin-content * {
    all: revert;
}

.rich-content-editor h1,
.admin-content.admin-content.admin-content h1 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 2em;
    font-weight: 500;
    line-height: 1.2;
}

.rich-content-editor h2,
.admin-content.admin-content.admin-content h2 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.25;
}

.rich-content-editor h3,
.admin-content.admin-content.admin-content h3 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 1.17em;
    font-weight: 500;
    line-height: 1.25;
}

.rich-content-editor h4,
.admin-content.admin-content.admin-content h4 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.25;
}

.rich-content-editor h5,
.admin-content.admin-content.admin-content h5 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: .83em;
    font-weight: 500;
    line-height: 1.25;
}

.rich-content-editor h6,
.admin-content.admin-content.admin-content h6 {
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: .67em;
    font-weight: 500;
    line-height: 1.25;
}

.rich-content-editor :is(h1, h2, h3, h4, h5, h6) span,
.admin-content.admin-content.admin-content :is(h1, h2, h3, h4, h5, h6) span {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.rich-content-editor :is(h1, h2, h3, h4, h5, h6) span[style*="color:#000000"],
.rich-content-editor :is(h1, h2, h3, h4, h5, h6) span[style*="color: #000000"],
.admin-content.admin-content.admin-content :is(h1, h2, h3, h4, h5, h6) span[style*="color:#000000"],
.admin-content.admin-content.admin-content :is(h1, h2, h3, h4, h5, h6) span[style*="color: #000000"] {
    color: inherit !important;
}

.rich-content-editor a,
.admin-content.admin-content.admin-content a {
    color: #0782c1;
    text-decoration: underline;
}

.rich-content-editor img,
.admin-content.admin-content.admin-content img {
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   Table Styling for Rich Content & CKEditor
   ========================================================================== */
.rich-content-editor table,
.admin-content table,
.admin-content.admin-content.admin-content table {
    display: table;
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 1.25rem 0 1.5rem !important;
    border: 1px solid #d1d5db !important;
    font-size: 14.5px;
    line-height: 1.6;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow-x: auto;
}

.rich-content-editor th,
.rich-content-editor td,
.admin-content th,
.admin-content td,
.admin-content.admin-content.admin-content th,
.admin-content.admin-content.admin-content td {
    border: 1px solid #d1d5db !important;
    padding: 10px 14px !important;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
}

.rich-content-editor th,
.admin-content th,
.admin-content.admin-content.admin-content th,
.rich-content-editor thead th,
.rich-content-editor thead td,
.admin-content thead th,
.admin-content thead td,
.admin-content.admin-content.admin-content thead th,
.admin-content.admin-content.admin-content thead td {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.rich-content-editor tbody tr:hover,
.admin-content tbody tr:hover,
.admin-content.admin-content.admin-content tbody tr:hover {
    background-color: #f8fafc;
}

.rich-content-editor td p,
.rich-content-editor th p,
.admin-content td p,
.admin-content th p,
.admin-content.admin-content.admin-content td p,
.admin-content.admin-content.admin-content th p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.rich-content-editor td p + p,
.admin-content td p + p,
.admin-content.admin-content.admin-content td p + p {
    margin-top: 0.35rem !important;
}

/* Responsive table wrapper on smaller screens */
@media (max-width: 768px) {
    .admin-content {
        overflow-x: auto;
    }
    
    .admin-content table,
    .admin-content.admin-content.admin-content table {
        min-width: 500px;
    }
}