﻿.notifications-tools {
    display: flex;
    gap: 8px;
    align-items: center;
}

.notifications-tools .form-control {
    width: 160px;
}

.notifications-page .box-body.table-responsive.no-padding {
    padding-inline: 10px !important;
}

.notifications-table {
    border: none;
    margin-bottom: 0;
    background-color: #fff;
}

.notifications-table > thead > tr > th,
.notifications-table > tbody > tr > td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f4f4f4;
}

.notifications-table > thead > tr > th {
    background-color: #fff;
    color: #444;
    font-weight: normal;
}

.notifications-table tbody tr {
    background-color: #fff;
}

/* Без zebra striping из crm-shared — одинаковый фон на всех строках */
.wrapper .content-wrapper table.notifications-table > tbody > tr:nth-of-type(odd) > td,
.wrapper .content-wrapper table.notifications-table > tbody > tr:nth-of-type(even) > td,
.wrapper .box-body table.notifications-table > tbody > tr:nth-of-type(odd) > td,
.wrapper .box-body table.notifications-table > tbody > tr:nth-of-type(even) > td {
    background-color: #fff;
}

.notifications-table tbody tr:hover,
.wrapper .content-wrapper table.notifications-table > tbody > tr:hover > td,
.wrapper .box-body table.notifications-table > tbody > tr:hover > td {
    background-color: #f4f4f4;
}

.notifications-table th,
.notifications-table td {
    vertical-align: top !important;
    padding-inline-start: max(var(--crm-table-cell-hpad-min), 0.5rem);
    padding-inline-end: max(var(--crm-table-cell-hpad-min), 0.5rem);
}

.notifications-table .notif-col-date {
    white-space: nowrap;
    width: 150px;
}

.notifications-table .notif-col-content {
    white-space: normal;
}

.notifications-table .notif-col-status {
    width: 110px;
}

.notifications-table .notif-col-link {
    width: 140px;
}

/* Одна высота/baseline у плашки статуса и ссылки */
.notifications-table .notif-col-status .label,
.notifications-table .notif-col-link .btn-link {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 22px;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: top;
}

.notifications-table .notif-col-status .label {
    padding: 3px 10px;
}

.notifications-table .notif-col-link .btn-link {
    padding: 3px 0;
    border: none;
    margin: 0;
}

.notifications-table .notif-row-title {
    font-weight: 600;
    margin-bottom: 3px;
}

.notifications-table .notif-row-body {
    color: #444;
    line-height: 1.5;
}

.notifications-table tr.is-unread > td,
.wrapper .content-wrapper table.notifications-table > tbody > tr.is-unread > td,
.wrapper .box-body table.notifications-table > tbody > tr.is-unread > td {
    background-color: #f7fff9 !important;
}

.notifications-table tr.is-unread:hover > td,
.wrapper .content-wrapper table.notifications-table > tbody > tr.is-unread:hover > td,
.wrapper .box-body table.notifications-table > tbody > tr.is-unread:hover > td {
    background-color: #eefaf1 !important;
}

.notifications-empty-row td {
    text-align: center;
    color: #777;
    padding: 24px 10px !important;
}
