/* ==========================================================================
   헤더 알림 종 + 결재 대기 배지
   (_NotificationBell.cshtml / _ApprovalInboxLink.cshtml)

   프론트 네비게이션 스킨과 관리자 상단 바가 같은 마크업을 공유하므로
   global-site.css 에서 분리했습니다. 양쪽에서 로딩합니다:
     - 프론트  : Views/Shared/_CommonHeadAssets.cshtml
     - 관리자  : Areas/Admin/Views/Shared/_HeadCssStyle.cshtml

   링크 자체(.wm-nav-utility-link)는 각 스킨이 스타일링하므로
   여기서는 배지와 드롭다운 패널만 다룹니다. 스킨별로 중복 정의하지 말 것.
   ========================================================================== */
.wm-nav-approval-link {
    /* 배지를 아이콘 우상단에 절대배치하기 위한 기준점.
       배지는 로드 후 나타나므로 absolute 라야 레이아웃이 밀리지 않습니다. */
    position: relative;
}

.wm-nav-badge {
    position: absolute;
    top: -.35em;
    right: -.55em;
    min-width: 1.25em;
    padding: 0 .35em;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: #fff;
    background: #e03131;
    border-radius: 999px;
    /* 어두운/밝은 헤더 어디서든 배지 경계가 보이도록 */
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
    pointer-events: none;
}

.wm-nav-badge[hidden] {
    display: none;
}

/* ── 헤더 알림 드롭다운 (_NotificationBell.cshtml) ─────────────────────────
   스킨 색·크기를 건드리지 않도록 패널 자체만 스타일링합니다.
   패널은 밝은 배경 고정 — 어두운 헤더 위에서도 본문이 읽혀야 하기 때문입니다. */
.wm-nav-bell {
    position: relative;
    display: inline-flex;
}

.wm-nav-bell-link,
.wm-nav-bell > a {
    position: relative;  /* 배지 기준점 */
}

.wm-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
}

.wm-notif-panel[hidden] { display: none; }

.wm-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.wm-notif-readall {
    padding: 0;
    font-size: .78rem;
    font-weight: 500;
    color: #1971c2;
    background: none;
    border: 0;
    cursor: pointer;
}

.wm-notif-readall[hidden] { display: none; }

.wm-notif-list {
    max-height: 380px;
    overflow-y: auto;
}

.wm-notif-item {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.wm-notif-item:last-child { border-bottom: 0; }
.wm-notif-item:hover { background: #f8f9fa; text-decoration: none; color: inherit; }

/* 안 읽은 알림은 왼쪽 띠로 구분 — 색만으로 구분하지 않도록 굵기도 함께 바꿉니다. */
.wm-notif-item.is-unread {
    background: #f8fbff;
    box-shadow: inset 3px 0 0 #1971c2;
}

.wm-notif-item.is-unread .wm-notif-title { font-weight: 700; }

.wm-notif-icon {
    flex: none;
    margin-top: 2px;
    font-size: .95rem;
    color: #868e96;
}

.wm-notif-body { min-width: 0; }

.wm-notif-title {
    font-size: .85rem;
    line-height: 1.45;
    word-break: break-word;
}

.wm-notif-time {
    margin-top: 2px;
    font-size: .74rem;
    color: #868e96;
}

.wm-notif-empty {
    padding: 24px 14px;
    font-size: .85rem;
    color: #868e96;
    text-align: center;
}

/* ── 다크 테마 보정 ───────────────────────────────────────────────────────
   관리자에만 [data-bs-theme] 이 붙습니다(프론트는 이 속성을 쓰지 않으므로 무영향).
   패널 본문은 위에서 밝은 배경으로 고정해 두었으니 여기서 되돌립니다. */
[data-bs-theme="dark"] .wm-notif-panel {
    background: var(--tblr-bg-surface, #1f2937);
    color: var(--tblr-body-color, #e5e7eb);
    border-color: var(--tblr-border-color, rgba(255, 255, 255, .12));
}

[data-bs-theme="dark"] .wm-notif-head {
    border-bottom-color: var(--tblr-border-color, rgba(255, 255, 255, .12));
}

[data-bs-theme="dark"] .wm-notif-item {
    border-bottom-color: var(--tblr-border-color, rgba(255, 255, 255, .08));
}

[data-bs-theme="dark"] .wm-notif-item:hover {
    background: var(--tblr-bg-surface-secondary, rgba(255, 255, 255, .04));
}

[data-bs-theme="dark"] .wm-notif-item.is-unread {
    background: rgba(51, 154, 240, .12);
    box-shadow: inset 3px 0 0 #4dabf7;
}

[data-bs-theme="dark"] .wm-notif-readall {
    color: #74c0fc;
}

/* 배지 테두리는 밝은 헤더 기준의 흰 링이라 어두운 배경에서 도드라집니다. */
[data-bs-theme="dark"] .wm-nav-badge {
    box-shadow: 0 0 0 1.5px var(--tblr-bg-surface, #1f2937);
}