/* Unlike Quill's button icons, the plugin's inline SVG inherits a text baseline. */
.ql-toolbar.ql-snow .ql-picker.ql-table-up .ql-picker-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-toolbar.ql-snow .ql-picker.ql-table-up .ql-picker-label svg {
    display: block;
}

:is(.rich-text-content, .page-body, #page-body, .reply-content) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Scroll the table, not the surrounding page or its other content. */
:is(.rich-text-content, .page-body, #page-body, .reply-content) table:not(.ql-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1rem 0;
}

/* Table Up owns its column widths; retain them in previews and published HTML. */
:is(.page-body, #page-body, .reply-content) .ql-table-wrapper {
    max-width: 100%;
    overflow: auto;
    margin: 1rem 0;
}

:is(.page-body, #page-body, .reply-content) table.ql-table {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}

:is(.page-body, #page-body, .reply-content) table.ql-table[data-full] {
    width: 100%;
}

.ql-editor .ql-table-wrapper {
    scrollbar-width: auto;
}

/* Match the existing page-body selector's specificity, including its row
   overrides, so content tables keep their final border and cell spacing. */
:is(.rich-text-content, .page-body, #page-body, .reply-content, .ql-editor) table :is(tbody, thead, tfoot) tr:nth-child(n) > :is(td, th) {
    border: 1px solid var(--ui-border, #e3e7ee);
    padding: 0.625rem 0.875rem;
    background: var(--ui-surface, #fff);
    color: var(--ui-text, #202c40);
    text-align: start;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

:is(.rich-text-content, .page-body, #page-body, .reply-content, .ql-editor) table tbody tr:nth-child(odd):not(:first-child) > :is(td, th) {
    background: var(--ui-canvas, #f6f7f9);
}

/* Give column titles a distinct treatment, including ordinary imported tables. */
:is(.rich-text-content, .page-body, #page-body, .reply-content, .ql-editor) table :is(thead, tbody) tr:first-child > :is(td, th) {
    background: var(--ui-subtle, #f3f5f8);
    font-weight: 600;
    border-bottom: 2px solid var(--ui-border, #e3e7ee);
}

:is(.page-body, #page-body, .reply-content, .ql-editor) .ql-table-cell-inner > p {
    margin: 0;
    font-weight: inherit;
}

:is(.page-body, #page-body, .reply-content) .ql-table-cell-inner > p + p {
    margin-top: 0.5rem;
}