/* ---------------------------------- NOTIFICATION BAR ----------------------------------
   Панель уведомлений под шапкой (js/modules/v2_notification_bar.js) */

.nb {
    --nb-border: #e3e6ea;
    --nb-muted: #6b7280;
    --nb-text: #1f2328;
    --nb-surface: #ffffff;
    --nb-surface-2: #f6f7f9;

    --nb-system: #3f8f92;       /* внутренние уведомления AW (cadetblue, как раньше) */
    --nb-system-bg: #eaf5f5;
    --nb-task: #2f6fdb;         /* задачи Битрикса */
    --nb-task-bg: #ebf1fd;
    --nb-message: #2f9160;      /* сообщения доверителей */
    --nb-message-bg: #e9f6ef;
    --nb-request: #c76874;      /* требуется ответ/действие */
    --nb-request-bg: #fbeef0;
    --nb-report: #8a6d1f;       /* отчеты */
    --nb-report-bg: #faf4e3;

    --nb-unread: #e8590c;

    margin-top: 6px;
    margin-bottom: 14px;
    padding: 0;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    color: var(--nb-text);
    font-size: 15px;
}
/* Главная страница (v2_0_mainpage.php): ширина как у блоков контента (#active_deals_container,
   #todo_list_container — 1050px в main_css5.css), а не как у шапки — .container-md из Bootstrap
   без ограничения растягивается до 1320px. На странице отдела (v2_1_department.php) класс не
   ставится, и панель остается шириной с шапку.
   Селектор с id — чтобы перебить медиа-правила .container-md из bootstrap.min.css. */
#notification_bar.nb--content-width {
    max-width: 1050px;
}
.nb[hidden] { display: none !important; }

/* ---------- header ---------- */

.nb__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 12px;
    background: var(--nb-surface-2);
    border-bottom: 1px solid var(--nb-border);
}
.nb--collapsed .nb__header { border-bottom-color: transparent; }

.nb__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.nb__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--nb-border);
    color: var(--nb-muted);
    font-size: 15px;
    flex: none;
}
.nb--has-unread .nb__bell {
    color: var(--nb-unread);
    border-color: rgba(232, 89, 12, 0.35);
    animation: nb-ring 2.4s ease-in-out infinite;
}
.nb__heading { font-weight: 600; font-size: 16px; }
.nb__unread {
    padding: 2px 9px;
    border-radius: 999px;
    background: #eceff3;
    color: var(--nb-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.nb--has-unread .nb__unread { background: var(--nb-unread); color: #fff; }
.nb__total { color: var(--nb-muted); font-size: 13px; white-space: nowrap; }
.nb__chevron { margin-left: auto; color: var(--nb-muted); transition: transform .2s; }
.nb--collapsed .nb__chevron { transform: rotate(180deg); }

.nb__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.nb__tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--nb-muted);
    font-size: 13px;
    cursor: pointer;
}
.nb__tool:hover { color: var(--nb-text); border-color: #c9ced6; }
.nb__tool[hidden] { display: none; }

/* ---------- list ---------- */

.nb__list {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.nb--collapsed .nb__list { display: none; }
.nb__empty { padding: 12px 16px; color: var(--nb-muted); font-size: 14px; }
.nb__empty[hidden] { display: none; }

/* ---------- item ---------- */

.nb-item {
    --accent: var(--nb-system);
    --accent-bg: var(--nb-system-bg);
    position: relative;
    border-bottom: 1px solid var(--nb-border);
    transition: background-color .25s, opacity .2s;
}
.nb-item:last-child { border-bottom: 0; }
.nb-item[hidden] { display: none; }
.nb-item--task    { --accent: var(--nb-task);    --accent-bg: var(--nb-task-bg); }
.nb-item--message { --accent: var(--nb-message); --accent-bg: var(--nb-message-bg); }
.nb-item--request { --accent: var(--nb-request); --accent-bg: var(--nb-request-bg); }
.nb-item--report  { --accent: var(--nb-report);  --accent-bg: var(--nb-report-bg); }

.nb-item__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px 10px 16px;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.nb-item__head:hover { background: #fafbfc; }
.nb-item__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nb-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 18px;
}
.nb-item__main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nb-item__title {
    font-size: 15px;
    line-height: 1.3;
    color: var(--nb-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nb-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--nb-muted);
}
.nb-item__source { color: var(--accent); font-weight: 500; }
.nb-item__tag {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--nb-request-bg);
    color: var(--nb-request);
    font-weight: 500;
}
.nb-item__badge {
    display: none;
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nb-unread);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.nb-item__chev { flex: none; color: var(--nb-muted); transition: transform .2s; }
.nb-item--open .nb-item__chev { transform: rotate(180deg); }

/* непрочитанное: цветная полоса слева, подсветка строки, жирный заголовок, метка «новое» */
.nb-item--unread { background: #fff8f3; }
.nb-item--unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--nb-unread);
}
.nb-item--unread .nb-item__title { font-weight: 600; }
.nb-item--unread .nb-item__badge { display: inline-block; }
.nb-item--unread .nb-item__head:hover { background: #fff1e6; }

.nb-item--fresh { animation: nb-flash 1.2s ease-out 2; }
.nb-item--leaving { opacity: 0; }

.nb-item--open { background: #fcfcfd; }
.nb-item--open .nb-item__head { border-bottom: 1px dashed var(--nb-border); }

/* ---------- item body ---------- */

.nb-item__body { padding: 12px 16px 14px 64px; }
.nb-item__body[hidden] { display: none; }
.nb-item__content { font-size: 15px; line-height: 1.5; }
.nb-item__content > *:last-child { margin-bottom: 0; }
.nb-item__content p { margin-bottom: 8px; }
.nb-item__content a { color: var(--nb-task); }
.nb-item__content .table { margin: 8px 0; font-size: 14px; background: #fff; }
.nb-item__content .table th { background: var(--nb-surface-2); font-weight: 600; }
.nb-item__content textarea.form-control { margin: 8px 0; }
.nb-assign textarea.form-control { margin-top: 2px; }
.nb-assign select.form-select { max-width: 420px; }
.nb-quote--pre { white-space: pre-line; }

.nb-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}
.nb-item__custom, .nb-item__system { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-item__custom:empty { display: none; }
.nb-item__system { margin-left: auto; }

.nb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--nb-text);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.nb-btn:hover { background: var(--nb-surface-2); border-color: #c9ced6; color: var(--nb-text); }
.nb-btn:disabled { opacity: .5; cursor: not-allowed; }
.nb-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nb-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(0.93); }
.nb-btn--outline { border-color: var(--accent); color: var(--accent); }
.nb-btn--outline:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.nb-btn--danger { border-color: #e4a3ab; color: #b4414f; }
.nb-btn--danger:hover { background: #fbeef0; color: #b4414f; }
.nb-item__system .nb-btn { color: var(--nb-muted); font-size: 13px; padding: 5px 10px; }

/* ---------- content helpers ---------- */

.nb-muted { color: var(--nb-muted); font-size: 13px; }
.nb-quote {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    background: var(--nb-surface-2);
    border-radius: 0 8px 8px 0;
    white-space: pre-wrap;
}
.nb-label { display: block; margin: 8px 0 2px; font-size: 13px; color: var(--nb-muted); }
.nb-tasklist { list-style: none; padding: 0; margin: 4px 0; }
.nb-tasklist li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nb-border); }
.nb-tasklist li:last-child { border-bottom: 0; }
.nb-tasklist a { margin-right: 10px; font-size: 13px; }
.nb-chat { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.nb-chat__msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
    white-space: pre-wrap;
    word-break: break-word;
}
.nb-chat__msg--in { align-self: flex-start; background: #ebebeb; border-bottom-left-radius: 4px; }
.nb-chat__msg--out { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.nb-chat__msg--last { outline: 2px solid rgba(47, 145, 96, .35); }
.nb-group { padding: 10px 0; border-top: 1px solid var(--nb-border); }
.nb-group:first-child { border-top: 0; padding-top: 0; }
.nb-group__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.nb-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.nb-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 6px 10px;
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--nb-text) !important;
    font-size: 13px;
    text-decoration: none;
}
.nb-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-file:hover { border-color: #c9ced6; background: var(--nb-surface-2); }
.nb-dropzone { margin: 8px 0; min-height: 90px; }
.nb-debug {
    max-height: 240px;
    overflow: auto;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #f1aeb5;
    border-radius: 8px;
    background: #f8d7da;
    color: #58151c;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.nb-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 8px 0; }
.nb-form-row > div { min-width: 140px; }
.nb-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.nb-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.nb-choice input:checked + span { font-weight: 600; color: var(--accent); }
.nb-plan-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--nb-border); }
.nb-plan-row > span { flex: 1 1 auto; }
.nb-plan-row input { width: 130px; flex: none; }
.nb-decision { font-size: 18px; font-weight: 600; margin: 8px 0; }

/* список просроченных задач: полное название + иконки «перенести срок» и «закрыть задачу» */
.nb-overdue { list-style: none; padding: 0; margin: 4px 0; overflow-x: clip; } /* clip: сдвинутая вправо строка не дает горизонтальной прокрутки */
.nb-overdue__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nb-border);
}
.nb-overdue__row:last-child { border-bottom: 0; }
/* уход строки: закрытая задача растворяется, перенесенная уезжает вправо (длительность — 400 мс, как в JS) */
.nb-overdue__row--closed { animation: nb-row-fade .4s ease forwards; pointer-events: none; }
.nb-overdue__row--postponed { animation: nb-row-slide .4s ease-in forwards; pointer-events: none; }
/* затем строка схлопывается по высоте (200 мс, как в JS) */
.nb-overdue__row--collapse {
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    overflow: hidden;
    transition: height .2s ease, padding .2s ease;
}
@keyframes nb-row-fade { to { opacity: 0; } }
@keyframes nb-row-slide { to { opacity: 0; transform: translateX(100%); } }
.nb-overdue__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.nb-overdue__title { color: var(--nb-text) !important; overflow-wrap: anywhere; white-space: normal; }
.nb-overdue__title:hover { color: var(--nb-task) !important; }
.nb-overdue__deadline { font-size: 13px; color: var(--nb-request); }
.nb-overdue__more { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--nb-border); font-size: 14px; color: var(--nb-muted); }
.nb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--nb-border);
    border-radius: 50%;
    background: #fff;
    color: var(--nb-message);
    font-size: 20px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.nb-icon-btn:hover { background: var(--nb-message-bg); border-color: var(--nb-message); }
.nb-icon-btn:disabled { cursor: wait; opacity: .6; }
.nb-spin { display: inline-block; animation: nb-spin 1s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }

/* ---------- animations ---------- */

@keyframes nb-flash {
    0% { background-color: #ffe2cc; }
    100% { background-color: #fff8f3; }
}
@keyframes nb-ring {
    0%, 86%, 100% { transform: rotate(0); }
    88% { transform: rotate(14deg); }
    92% { transform: rotate(-12deg); }
    96% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .nb--has-unread .nb__bell, .nb-item--fresh { animation: none; }
    .nb-overdue__row--closed, .nb-overdue__row--postponed { animation-duration: .01s; }
    .nb-overdue__row--collapse { transition: none; }
}

/* ---------- mobile ---------- */

@media (max-width: 700px) {
    .nb { border-radius: 10px; }
    .nb__tools { width: 100%; }
    .nb__header { padding: 8px 10px; }
    .nb__total { display: none; }
    .nb__tool span { display: none; }
    .nb__restore span { display: inline; }
    /* вместо метки «новое» — точка, чтобы оставить место заголовку */
    .nb-item--unread .nb-item__badge {
        width: 10px;
        height: 10px;
        padding: 0;
        font-size: 0;
    }
    .nb-item__head { padding: 10px 10px 10px 14px; gap: 10px; }
    .nb-item__icon { width: 32px; height: 32px; font-size: 16px; }
    .nb-item__body { padding: 10px 12px 12px 14px; }
    .nb-item__system { margin-left: 0; }
    .nb-plan-row { flex-wrap: wrap; }
}