/* ==========================================================================
   通知機能（PC版）
   ========================================================================== */

/* ---------- 共通スタイル（SP版と同一定義） ---------- */

/* 未読スタイル */
.notification-item.unread,
a.notification-item.unread:link,
a.notification-item.unread:visited {
    background-color: #FFDCE3;
}

.notification-item.unread .notification-title {
    font-weight: bold;
}


/* ---------- PC専用スタイル ---------- */

/* ページタイトル（theme01のピンク線を無効化し、太字・大きめに） */
.notification-page #mainttl {
    border-bottom: none;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 10px;
}

/* サイドバー通知ボックス（囲みエリア・全体クリック可能） */
.notification-box-pc {
    display: flex;
    align-items: center;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
}

.notification-box-pc svg {
    flex-shrink: 0;
}

/* 通知ページ表示中（div要素）は常にグレー背景 */
div.notification-box-pc {
    background-color: #f5f5f5;
    font-weight: normal;
}

a.notification-box-pc:hover {
    background-color: #f5f5f5;
}

.notification-box-pc:link,
.notification-box-pc:visited,
.notification-box-pc:hover,
.notification-box-pc:active {
    text-decoration: none;
    color: #333;
}

.notification-box-pc__label {
    margin-left: 6px;
    transform: translateY(1px);
}

/* サイドバー通知バッジ（赤丸・白文字） */
.notification-badge {
    display: inline-block;
    background-color: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    min-width: 20px;
    height: 20px;
    padding: 4px 5px;
    border-radius: 10px;
    text-align: center;
    margin-left: 6px;
    vertical-align: middle;
}

.notification-box-pc .notification-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 通知一覧テーブル */
.notification-table {
    margin-top: 15px;
}

/* テーブルカラムヘッダー */
.notification-table-header {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8px 15px;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
}
.notification-th-type {
    width: 120px;
    text-align: center;
    flex-shrink: 0;
}
.notification-th-body {
    flex: 1;
    padding-left: 10px;
}
.notification-th-date {
    width: 160px;
    text-align: center;
    flex-shrink: 0;
}

/* 種別カラム */
.notification-col-type {
    width: 120px;
    flex-shrink: 0;
    text-align: center;
}

/* 本文カラム */
.notification-col-body {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
}

/* 日時カラム */
.notification-col-date {
    width: 160px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    color: #999;
}

/* グループヘッダー */
.notification-group-header {
    background-color: #f0f0f0;
    padding: 8px 15px;
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #ddd;
}

/* 通知アイテム（テーブル行：flexboxで3カラムレイアウト） */
a.notification-item,
a.notification-item:link,
a.notification-item:visited {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    color: #333;
    text-decoration: none;
}

a.notification-item:hover {
    background-color: #f5f5f5;
}

/* 未読インジケーター（●） */
.notification-unread-dot {
    font-size: 10px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 機能名ラベル */
.notification-label {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 3px;
    vertical-align: middle;
    background-color: #999;
}

/* 通知本文 */
.notification-title {
    vertical-align: middle;
}

/* 通知なしメッセージ */
.notification-empty {
    text-align: center;
    padding: 40px 15px;
    color: #999;
    font-size: 14px;
}

.notification-empty-title {
    font-size: 18px;
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
}

.notification-empty-desc {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
}

/* ---------- ラベル色・ドット色（.notification-labelより後に定義） ---------- */

/* CONTENT_TYPEに応じたラベル色 */
.notification-label-01 { background-color: #f26986; } /* お知らせ */
.notification-label-02 { background-color: #4496db; } /* 就業情報 */
.notification-label-03 { background-color: #7f167f; } /* 就業依頼 */
.notification-label-04,
.notification-label-05 { background-color: #4ec745; } /* 配分金 */
.notification-label-06 { background-color: #eed240; } /* 給与明細 */

/* 未読ドット色 */
.notification-dot-01 { color: #f26986; }
.notification-dot-02 { color: #4496db; }
.notification-dot-03 { color: #7f167f; }
.notification-dot-04,
.notification-dot-05 { color: #4ec745; }
.notification-dot-06 { color: #eed240; }

/* ---------- エラー表示（API取得失敗時） ---------- */

.notification-error {
    text-align: center;
    padding: 40px 22px 50px;
}

.notification-error svg {
    margin-bottom: 14px;
}

.notification-error-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
}

.notification-error-desc {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 22px;
}

.notification-error-retry {
    display: block;
    width: 300px;
    margin: 0 auto;
    padding: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

a.notification-error-retry:link,
a.notification-error-retry:visited {
    color: #333;
    text-decoration: none;
}

a.notification-error-retry:hover {
    background-color: #f5f5f5;
}