.zlix-notification-history {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.zlix-notification-history-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(420px, 2fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #d8e3e8;
    border-radius: 11px;
    background: #f8fbfc;
}

.zlix-notification-history-search {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 7px;
    align-items: end;
}

.zlix-notification-history-search input,
.zlix-notification-history-filter select {
    width: 100%;
    min-height: 35px;
    box-sizing: border-box;
    border: 1px solid #c8d6dd;
    border-radius: 7px;
    background: #fff;
    color: #213f50;
    font: inherit;
    font-size: .76rem;
}

.zlix-notification-history-search input {
    padding: 7px 9px;
}

.zlix-notification-history-filter select {
    padding: 6px 26px 6px 8px;
}

.zlix-notification-history-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(105px, 1fr));
    gap: 7px;
}

.zlix-notification-history-filter {
    display: grid;
    gap: 4px;
    color: #506b79;
    font-size: .67rem;
    font-weight: 750;
}

.zlix-notification-history-toolbar-actions {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

.zlix-notification-history-button,
.zlix-notification-history-row-action {
    min-height: 33px;
    border: 1px solid #bacdd5;
    border-radius: 7px;
    background: #fff;
    color: #245368;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    font-weight: 750;
}

.zlix-notification-history-button {
    padding: 6px 9px;
}

.zlix-notification-history-button:hover,
.zlix-notification-history-row-action:hover {
    border-color: #8db6c5;
    background: #eef7fa;
}

.zlix-notification-history-button.is-primary,
.zlix-notification-history-row-action.is-primary {
    border-color: #15778d;
    background: #15778d;
    color: #fff;
}

.zlix-notification-history-button.is-primary:hover,
.zlix-notification-history-row-action.is-primary:hover {
    border-color: #12687a;
    background: #12687a;
}

.zlix-notification-history-button:disabled,
.zlix-notification-history-row-action:disabled {
    opacity: .48;
    cursor: default;
}

.zlix-notification-history-status {
    min-height: 0;
    color: #657d89;
    font-size: .72rem;
}

.zlix-notification-history-status:not(:empty) {
    padding: 8px 10px;
    border: 1px solid #dbe6ea;
    border-radius: 8px;
    background: #f8fbfc;
}

.zlix-notification-history-status.is-error {
    border-color: #e3b5b0;
    background: #fff6f5;
    color: #8e332d;
}

.zlix-notification-history-table-wrap {
    overflow-x: auto;
    border: 1px solid #dbe5e9;
    border-radius: 11px;
    background: #fff;
}

.zlix-notification-history-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.zlix-notification-history-table th,
.zlix-notification-history-table td {
    padding: 10px 11px;
    border-bottom: 1px solid #e8eef1;
    vertical-align: top;
    text-align: left;
}

.zlix-notification-history-table th {
    background: #f6fafb;
    color: #526d7b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.zlix-notification-history-table td {
    color: #334f5f;
    font-size: .74rem;
}

.zlix-notification-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.zlix-notification-history-table tbody tr.is-unread {
    background: #f5fafc;
}

.zlix-notification-history-table tbody tr.is-resolved,
.zlix-notification-history-table tbody tr.is-dismissed {
    background: #fafbfc;
}

.zlix-notification-history-title {
    display: block;
    color: #193f54;
    font-size: .78rem;
    font-weight: 800;
}

.zlix-notification-history-message {
    max-width: 620px;
    margin-top: 4px;
    color: #5b7280;
    font-size: .71rem;
    line-height: 1.42;
}

.zlix-notification-history-date {
    white-space: nowrap;
    color: #6f818b !important;
    font-size: .69rem !important;
}

.zlix-notification-history-state {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid #d2dde2;
    border-radius: 999px;
    background: #f5f8f9;
    color: #617781;
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}

.zlix-notification-history-state.is-unread {
    border-color: #a9ccda;
    background: #edf8fc;
    color: #176987;
}

.zlix-notification-history-state.is-resolved {
    border-color: #b9d8cb;
    background: #f0f8f4;
    color: #336b56;
}

.zlix-notification-history-state.is-dismissed {
    color: #7a8186;
}

.zlix-notification-history-row-actions {
    min-width: 170px;
}

.zlix-notification-history-row-action {
    min-height: 27px;
    margin: 0 5px 5px 0;
    padding: 4px 7px;
    font-size: .65rem;
}

.zlix-notification-history-empty {
    padding: 36px 20px;
    border: 1px solid #dde7eb;
    border-radius: 11px;
    background: #fff;
    color: #6b808b;
    text-align: center;
    font-size: .78rem;
}

.zlix-notification-history-empty.is-error {
    border-color: #e3b5b0;
    background: #fff6f5;
    color: #8e332d;
}

.zlix-notification-history-pager {
    min-width: 0;
}

@media (max-width: 1000px) {
    .zlix-notification-history-toolbar {
        grid-template-columns: 1fr;
    }

    .zlix-notification-history-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .zlix-notification-history-search {
        grid-template-columns: 1fr auto auto;
    }

    .zlix-notification-history-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 460px) {
    .zlix-notification-history-search,
    .zlix-notification-history-filters {
        grid-template-columns: 1fr;
    }

    .zlix-notification-history-search button {
        width: 100%;
    }
}

/*
 * ZLIX NOTIFICATION HISTORY LAYOUT POLISH v0.21.2e2a4h1
 *
 * The full notification-history surface must fit inside its owning
 * application content column. Only the table/pager may scroll
 * horizontally on genuinely narrow viewports.
 */

.zlix-notification-history,
.zlix-notification-history-body,
.zlix-notification-history-toolbar,
.zlix-notification-history-pager {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.zlix-notification-history,
.zlix-notification-history * {
    box-sizing: border-box;
}

/*
 * Desktop:
 *
 * Search occupies the left side of row one.
 * Mark-all occupies the right side of row one.
 * All four filters occupy row two.
 *
 * This prevents the former three-column toolbar from overflowing
 * the Admin content area.
 */
.zlix-notification-history-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "search actions"
        "filters filters";
    gap: 10px 12px;
    align-items: end;
}

.zlix-notification-history-search {
    grid-area: search;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.zlix-notification-history-filters {
    grid-area: filters;
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zlix-notification-history-filter {
    min-width: 0;
}

.zlix-notification-history-filter select {
    min-width: 0;
    max-width: 100%;
}

.zlix-notification-history-toolbar-actions {
    grid-area: actions;
    min-width: max-content;
    justify-content: flex-end;
    align-items: end;
}

.zlix-notification-history-toolbar-actions
.zlix-notification-history-button {
    white-space: nowrap;
}

/*
 * Keep wide table content inside the table wrapper rather than
 * widening the complete Z-Admin/Portal application.
 */
.zlix-notification-history-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

.zlix-notification-history-table {
    width: 100%;
    min-width: 720px;
}

/*
 * Notification/message is the flexible column.
 * Utility fields remain compact.
 */
.zlix-notification-history-table th:first-child,
.zlix-notification-history-table td:first-child {
    width: 82px;
}

.zlix-notification-history-table th:nth-child(3),
.zlix-notification-history-table td:nth-child(3) {
    width: 135px;
}

.zlix-notification-history-table th:nth-child(4),
.zlix-notification-history-table td:nth-child(4) {
    width: 130px;
}

.zlix-notification-history-table th:last-child,
.zlix-notification-history-table td:last-child {
    width: 150px;
}

.zlix-notification-history-message {
    max-width: none;
}

/*
 * Keep actions compact and allow wrapping inside the Actions cell.
 */
.zlix-notification-history-row-actions {
    min-width: 145px;
    white-space: normal;
}

.zlix-notification-history-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin: 0 4px 4px 0;
    padding: 3px 7px;
}

/*
 * The shared pager may have its own minimum layout width. Contain
 * that locally instead of allowing it to widen the full page.
 */
.zlix-notification-history-pager {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

/*
 * Medium desktop / tablet:
 * Toolbar becomes one vertical stack before controls become cramped.
 */
@media (max-width: 920px) {
    .zlix-notification-history-toolbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "search"
            "filters"
            "actions";
    }

    .zlix-notification-history-toolbar-actions {
        min-width: 0;
        justify-content: flex-start;
    }

    .zlix-notification-history-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/*
 * Narrow mobile:
 * Controls stack cleanly. Any remaining horizontal overflow belongs
 * only to the table wrapper.
 */
@media (max-width: 560px) {
    .zlix-notification-history-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .zlix-notification-history-search
    .zlix-notification-history-button {
        width: 100%;
    }

    .zlix-notification-history-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .zlix-notification-history-toolbar-actions,
    .zlix-notification-history-toolbar-actions
    .zlix-notification-history-button {
        width: 100%;
    }
}