/* ==========================================================================
   헤더 알림 종 + 결재 대기 배지
   (_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);
}

/* ── 드롭다운 바닥: 전체 목록으로 가는 입구 ───────────────────────────────
   드롭다운은 최근 것만 담으므로 지난 알림을 찾을 통로가 항상 보여야 합니다
   (목록이 비어 있어도 남깁니다). */
.wm-notif-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* '모두 읽음'이 숨어도(미읽음 0건) 링크는 오른쪽에 그대로 남습니다. */
.wm-notif-all {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 600;
    color: #1971c2;
    text-decoration: none;
}

.wm-notif-all:hover { text-decoration: underline; color: #1971c2; }

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

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

/* ==========================================================================
   알림 전체 목록 화면 (_NotificationListPage.cshtml)

   프론트(/notifications)와 관리자(/Admin/Notification)가 같은 마크업을 쓰므로
   여기 한 곳에만 둡니다. 패널과 달리 배경색을 고정하지 않고 물려받습니다
   — 관리자 어두운 테마 위에 흰 판이 뜨지 않게 하기 위함입니다.
   ========================================================================== */
.wm-notif-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.wm-notif-heading {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 700;
}

.wm-notif-page-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wm-notif-tabs {
    display: flex;
    gap: 6px;
}

.wm-notif-tab {
    padding: 6px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: inherit;
    background: none;
    border: 1px solid rgba(128, 128, 128, .32);
    border-radius: 999px;
    cursor: pointer;
}

/* 고른 탭은 색만으로 구분하지 않도록 테두리도 함께 바꿉니다. */
.wm-notif-tab.is-active {
    color: #fff;
    background: #1971c2;
    border-color: #1971c2;
}

.wm-notif-tab-count {
    margin-left: 6px;
    font-size: .75rem;
    opacity: .85;
}

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

.wm-notif-page-readall {
    padding: 6px 12px;
    font-size: .8rem;
    color: inherit;
    background: none;
    border: 1px solid rgba(128, 128, 128, .32);
    border-radius: 6px;
    cursor: pointer;
}

.wm-notif-page-readall[hidden] { display: none; }
.wm-notif-page-readall:disabled { opacity: .55; cursor: default; }

.wm-notif-page-list {
    border: 1px solid rgba(128, 128, 128, .22);
    border-radius: 10px;
    overflow: hidden;
}

/* 줄 구조(아이콘 + 본문)는 드롭다운과 같지만 여백이 더 넓고 본문이 한 줄 더 붙습니다. */
.wm-notif-row {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
}

.wm-notif-row:last-child { border-bottom: 0; }
.wm-notif-row:hover { background: rgba(128, 128, 128, .07); text-decoration: none; color: inherit; }

/* 안 읽은 알림은 왼쪽 띠 + 굵기로 구분합니다(색만으로 구분하지 않도록). */
.wm-notif-row.is-unread {
    background: rgba(25, 113, 194, .06);
    box-shadow: inset 3px 0 0 #1971c2;
}

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

.wm-notif-page .wm-notif-title { font-size: .92rem; }

.wm-notif-text {
    margin-top: 3px;
    font-size: .82rem;
    line-height: 1.5;
    color: #868e96;
    word-break: break-word;
}

.wm-notif-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

/* 페이저가 빈 상태(한 쪽뿐)면 위 여백만 남지 않도록 통째로 숨깁니다. */
.wm-notif-pager:empty { display: none; }

.wm-notif-page-btn {
    min-width: 36px;
    padding: 6px 10px;
    font-size: .82rem;
    color: inherit;
    background: none;
    border: 1px solid rgba(128, 128, 128, .32);
    border-radius: 6px;
    cursor: pointer;
}

.wm-notif-page-btn.is-active {
    font-weight: 700;
    color: #fff;
    background: #1971c2;
    border-color: #1971c2;
}

.wm-notif-page-btn:disabled { opacity: .45; cursor: default; }

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

@media (max-width: 575.98px) {
    .wm-notif-page-bar {
        flex-wrap: wrap;
    }

    .wm-notif-row {
        padding: 12px 12px;
    }
}