/* 通知ページ用スタイル */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}
.container.notifications-container { /* notifications.htmlのcontainerに特化 */
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
/* headerはbase.cssで定義されているものを使うか、ここで上書き */
/* h1もbase.cssで定義されているものを使うか、ここで上書き */

.navigation {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between; /* 必要なら */
    align-items: center;
}
.back-button {
    text-decoration: none;
    background-color: #6c757d; /* 少し濃いグレー */
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
}
.back-button:hover {
    background-color: #5a6268;
}
.back-button:before {
    content: "←";
    margin-right: 8px; /* 少しスペースを空ける */
}
.notification-list {
    list-style: none;
    padding: 0;
}
.notification-item {
    background-color: white;
    padding: 15px 20px; /* 少し左右のパディングを増やす */
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s, border-left-color 0.2s; /* ホバーと未読のトランジション */
    border-left: 4px solid transparent; /* 未読用のスペースを確保 */
}
.notification-item:hover {
    background-color: #f8f9fa; /* Bootstrapのlightに近い色 */
}
.notification-unread {
    border-left-color: #17a2b8; /* Bootstrapのinfoに近い色 */
    background-color: #eefafc; /* 未読を少し目立たせる背景色 */
}
.notification-content {
    margin-bottom: 8px; /* メタ情報との間隔 */
    font-size: 1em;
}
.notification-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6c757d; /* やや濃いグレー */
    font-size: 0.85em;
}
.notification-topic {
    /* color: #4a6572; */ /* base.cssのheader色と合わせるなら */
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%; /* 長すぎる場合に省略 */
}
.notification-time {
    /* スタイル変更なし */
}
.empty-state {
    text-align: center;
    padding: 40px 20px; /* 少し大きく */
    color: #6c757d;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.empty-state p {
    margin: 0;
    font-size: 1.1em;
}