/* ===== «Ждут вашего решения» — виджет входящих согласований передач =====
   Лежит в шапке рядом с уведомлениями. Токены темы (--dusk акцент,
   --status-* для решений), без хардкод-цветов. */

.header-approvals {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.appr-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--paper-border, var(--border, #e2e0d8));
    border-radius: 9px;
    background: var(--paper-surface, var(--surface, #fff));
    color: var(--ink-muted, #6b6b6b);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.appr-btn:hover {
    color: var(--dusk-deep, #3a3c5c);
    border-color: var(--dusk, #4c4f76);
    background: var(--dusk-tint, #ececf4);
}

.appr-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--status-overdue, #b5573c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.appr-panel {
    position: absolute;
    top: 44px;
    right: 0;
    width: 340px;
    max-width: 92vw;
    max-height: 420px;
    overflow-y: auto;
    background: var(--paper-surface, var(--surface, #fff));
    border: 1px solid var(--paper-border, var(--border, #e2e0d8));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30, 30, 50, .18);
    z-index: 1200;
    display: none;
    padding: 6px;
}
.appr-panel.open { display: block; }

.appr-panel-head {
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--paper-border, var(--border, #eee));
    margin-bottom: 4px;
}
.appr-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #2a2a2a);
}

.appr-empty {
    padding: 18px 10px;
    text-align: center;
    color: var(--ink-muted, #9a9a9a);
    font-size: 12px;
}

.appr-item {
    padding: 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    transition: background .12s;
}
.appr-item:hover { background: var(--paper-fill, #f5f4ef); }
.appr-item + .appr-item { border-top: 1px solid var(--paper-border, #f0efe9); }

.appr-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #2a2a2a);
    margin-bottom: 2px;
}
.appr-item-sub {
    font-size: 11.5px;
    color: var(--ink-muted, #6b6b6b);
    margin-bottom: 8px;
}

.appr-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.appr-act {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid var(--paper-border, var(--border, #ddd));
    background: var(--paper-surface, #fff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.appr-act--ok        { color: var(--status-done, #5e8a6b); border-color: var(--status-done, #5e8a6b); }
.appr-act--ok:hover  { background: var(--status-done, #5e8a6b); color: #fff; }
.appr-act--no        { color: var(--status-failed, #b5573c); border-color: var(--status-failed, #b5573c); }
.appr-act--no:hover  { background: var(--status-failed, #b5573c); color: #fff; }
.appr-act--read      { color: var(--ink-muted, #6b6b6b); }
.appr-act--read:hover{ background: var(--paper-fill, #ece9e0); }

/* Узкие экраны: панель почти на всю ширину, кнопки в столбик. */
@media (max-width: 560px) {
    .appr-panel { width: 300px; right: -8px; }
    .appr-item-actions { flex-direction: column; }
    .appr-act { min-width: 0; }
}