/* 全体的なスタイル */
html {
    scroll-behavior: smooth;
}

/* ユーザーページの背景色 */
body:not(.admin-page) {
    background-color: #f5deb3;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #f4f7f6; /* デフォルトの背景色 */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ヘッダー */
header {
    background-color: #ffffff;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* スマホ表示などで折り返しを許可 */
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #343a40; 
}

/* ユーザーページのヘッダーレイアウト */
.header-row {
    /* ユーザーページのヘッダー1行目を制御 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
body:not(.admin-page) header {
    /* ユーザーページのヘッダーから不要な隙間を削除 */
    background-color: #d2b48c; /* ヘッダー背景色を濃いタン色に変更 */
    padding-bottom: 1rem;
}

/* ユーザーページのヘッダータイトル */
body:not(.admin-page) header h1 {
    font-size: 1.1rem; /* フォントサイズを調整 */
    color: #5c4033;    /* 文字色を濃い茶色に変更 */
}

/* ユーザーページのヘッダータイトルのリンクスタイル */
body:not(.admin-page) header h1 a {
    color: inherit; /* 親要素(h1)の色を継承 */
    text-decoration: none; /* 下線を消す */
}

/* ユーザー情報バー */
.user-info-bar {
    width: 100%;
    margin: 0;
    padding: 0.5rem 2rem;
    background-color: #e9ecef;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

/* ユーザーページのユーザー情報バー背景色 */
body:not(.admin-page) .user-info-bar {
    background-color: #b5986d; /* ヘッダーより少し濃い色に変更 */
    color: white; /* 文字色を白に変更 */
}

/* ユーザー情報バー内のテキストサイズ */
.user-info-bar .login-info {
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

header nav a {
    margin: 0 1rem;
    color: #555;
    font-weight: 500;
}

/* 管理者ページのヘッダー右側のアイテム群 */
.header-right-items {
    margin-left: auto; /* この要素を右端に寄せる */
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

header .login-info {
    /* margin-left: auto; */ /* 親要素に移動したため不要 */
    font-size: 0.7rem; /* 文字をさらに小さくする */
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 1.2rem; /* 「ようこそ」とボタンの間隔を広げる */
}

header .login-info span {
    vertical-align: middle;
}

header .login-info a {
    /* margin-left: 0.5rem; */ /* gapプロパティで間隔を調整するためコメントアウト */
    vertical-align: middle;
}

.logout-button {
    background-color: #6c757d; /* 落ち着いたグレーに変更 */
    color: white !important;
    padding: 0.2rem 0.6rem;   /* ボタンを小さくする */
    border-radius: 4px;
    font-size: 0.8rem;       /* ボタンの文字サイズを調整 */
    font-weight: 500;
    /* margin-left: 0.8rem !important; */ /* gapプロパティで間隔を調整するためコメントアウト */
    transition: background-color 0.2s;
}

.logout-button:hover {
    background-color: #5a6268; /* ホバー時に少し濃くする */
    color: white !important;
}

/* ユーザー情報バーのボタン */
.user-info-button {
    background-color: #A0522D; /* 茶色系 */
    color: white !important;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.2s;
    border: 1px solid #8B4513; /* 枠線を追加して立体感を出す */
}

.user-info-button:hover {
    background-color: #8B4513; /* 濃い茶色 */
    text-decoration: none;
    color: white !important;
}

/* --- 通知エリア --- */
.notification-area {
    position: relative;
}

.notification-bell {
    background-color: transparent; /* 背景を透明に戻す */
    border: 1px solid #ccc;    /* 枠線を設定 */
    border-radius: 8px;        /* 角丸の四角形にする */
    padding: 8px;              /* 内側の余白でサイズを調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: background-color 0.2s, border-color 0.2s;
}
.notification-bell:hover {
    background-color: #f0f2f5; /* ホバー時に背景色を表示 */
}

.bell-icon {
    display: block; /* SVGが幅と高さを持つようにブロック要素にする */
    width: 20px;
    height: 20px;
    color: #333; /* アイコンの色を指定 */
    transition: color 0.2s;
}

.notification-bell:hover .bell-icon {
    color: #007bff; /* ホバー時のアイコンの色を指定 */
}

.notification-badge {
    position: absolute;
    top: -5px; /* 位置を少し上に調整 */
    right: -5px; /* 位置を少し右に調整 */
    background-color: #e74c3c; /* 赤色 */
    color: white;
    border-radius: 50%;
    padding: 2px 6px; /* 内側の余白でサイズを確保 */
    font-size: 0.7rem; /* 文字サイズ */
    line-height: 1; /* 行の高さを調整 */
    min-width: 18px; /* 最小幅を指定して円形を保つ */
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    border: 2px solid #ffffff; /* 枠線を白に変更 */
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 1000;
    border: 1px solid #e0e0e0;
}
.notification-dropdown.show {
    display: block;
}
.notification-header, .notification-footer {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
}
.notification-header h3 { border: none; margin: 0; font-size: 1rem; }
.notification-footer { text-align: center; border-top: 1px solid #e0e0e0; }
.notification-body { padding: 1rem; max-height: 300px; overflow-y: auto; }
.no-notifications { color: #888; text-align: center; margin: 0; }

/* メインコンテンツ */
main {
    flex: 1;
    padding-top: 0;
    padding-bottom: 2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 管理ページのコンテナに上マージンを追加 */
.admin-page .container {
    margin-top: 2rem;
}

h2, h3 {
    color: #343a40;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

/* ログインコンテナ */
.login-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* フォーム要素 */
form {
    margin-top: 1.5rem;
}

form label {
    display: block;
    margin-bottom: 1rem;
    text-align: left;
    font-weight: 500;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 0.25rem;
}

form input:focus,
form select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

button,
.button-link {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-top: 1rem;
    transition: background-color 0.2s;
}

button:hover,
.button-link:hover {
    background-color: #0056b3;
    text-decoration: none;
    color: white;
}

/* セカンダリボタン（グレー） */
.button-secondary {
    background-color: #6c757d;
    color: white !important;
}

.button-secondary:hover {
    background-color: #5a6268;
    color: white !important;
}

/* テーブル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

table th,
table td {
    padding: 0.9rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

table tr:hover {
    background-color: #f1f1f1;
}

/* テーブル内のアクションボタン */
.table-action-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white !important; /* aタグのデフォルト色を上書き */
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap; /* 折り返しを防ぐ */
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.table-action-button:hover {
    background-color: #0056b3;
    color: white !important;
    text-decoration: none;
}

table img {
    border-radius: 4px;
}

/* ダッシュボードの直近食事データテーブル */
.recent-meals-table {
    table-layout: fixed; /* テーブルのレイアウトを固定 */
    word-break: break-all; /* 長い単語を強制的に改行 */
}
.recent-meals-table .col-user { width: 12%; }
.recent-meals-table .col-store { width: 12%; }
.recent-meals-table .col-photo { width: 10%; }
.recent-meals-table .col-calories { width: 10%; }
.recent-meals-table .col-ingredients { width: 40%; }
.recent-meals-table .col-date { width: 16%; }
.recent-meals-table td, 
.recent-meals-table th {
    white-space: nowrap; /* テキストの折り返しを禁止 */
    vertical-align: middle; /* セル内の垂直方向中央揃え */
}
.recent-meals-table .wrap-text {
    white-space: normal; /* テキストの折り返しを許可 */
}

/* ダッシュボード */
.dashboard-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card {
    flex: 1;
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 5px solid #007bff;
}

/* ユーザーフィルターフォーム */
.user-filter-form {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.user-filter-form form {
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
    align-items: end;
    gap: 0.5rem 1rem; /* 縦横の隙間 */
}

.user-filter-form form label {
    margin-bottom: 0; /* flexboxで中央揃えするためリセット */
}

.user-filter-form form button {
    margin-top: 0; /* flexboxで中央揃えするためリセット */
}

/* タブコンテナ */
.tab-container {
    margin-top: 2rem;
}
.tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #dee2e6;
}
.tab-nav li {
    margin-bottom: -2px; /* 枠線を重ねる */
}
.tab-nav a {
    display: block;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: #007bff;
    border: 2px solid transparent;
    border-radius: 4px 4px 0 0;
}
.tab-nav a:hover {
    background-color: #f8f9fa;
    border-color: #e9ecef #e9ecef #dee2e6;
    text-decoration: none;
}
.tab-nav .tab-active a {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}
.tab-content {
    padding: 1.5rem;
    border: 2px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ページネーション */
.pagination {
    margin-top: 1.5rem;
    text-align: center;
}
.pagination a, .pagination span {
    display: inline-block;
    margin: 0 4px;
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
    transition: background-color 0.2s, color 0.2s;
}
.pagination a:hover {
    background-color: #e9ecef;
    text-decoration: none;
}
.pagination .current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
/* style.css に追記 */
.status-completed {
    color: green;
    font-weight: bold;
}
.status-requested {
    color: orange;
    font-weight: bold;
}

/* report_edit.php 用のスタイル */
.report-request-details,
.meal-data-for-report,
.report-form-section {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
}

.report-request-details p,
.meal-data-for-report p {
    margin-bottom: 0.5rem;
}

/* メッセージ表示用のスタイル */
.message-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}
.message-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

.report-meta {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ccc;
    color: #555;
}
/* admin/view_report.php のラッパー */
.report-view-wrapper {
    max-width: 1200px;
    margin: 0 auto; /* margin-topを0に修正 */
    padding: 2rem;
    background-color: transparent; /* ラッパー自体は背景色なし */
}

/* admin/view_report.php のコンテナ */
.admin-page .report-view-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden; /* タイトルの角丸を維持するため */
}

/* admin/view_report.php のメタ情報 */
.admin-page .report-meta {
    padding: 1.5rem 2rem;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    background-color: #fdfdfd;
    display: grid;
    grid-template-columns: 120px 1fr; /* 項目名の幅を固定 */
    gap: 1rem 1.5rem;
    color: #495057;
}

.admin-page .report-meta p {
    margin: 0;
    display: contents; /* pタグをグリッドレイアウトの子要素として扱う */
}
.admin-page .report-meta strong {
    font-weight: 600;
}

.report-content p {
    font-size: 1rem; /* フォントサイズを指定 */
    line-height: 1.6; /* 行間を指定 */
    white-space: pre-wrap; /* 改行をそのまま表示 */
}

/* admin/view_report.php のレポートタイトルをよりスタイリッシュに */
.admin-page .report-view-container .report-title {
    font-size: 1.4rem; /* 視認性を上げるため少し大きく */
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem 1rem 3.5rem; /* アイコン用の左パディングを確保 */
    border-bottom: none; /* 下線を削除 */
    color: #ffffff; /* 文字色を白に */
    position: relative; /* 擬似要素のために必要 */
    background-color: #2c3e50; /* ヘッダーと共通のダークブルー背景 */
    border-radius: 0; /* 親コンテナで制御するためリセット */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影を調整 */
    text-shadow: none; /* テキストシャドウを削除 */
    letter-spacing: 0.02em; /* 文字間隔を少し広げる */
    font-weight: 500; /* フォントの太さを調整 */
    line-height: 1.4;
}

/* 擬似要素で左側に装飾を追加 */
.admin-page .report-view-container .report-title::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    width: 8px; /* 縦線 */
    background: #1abc9c; /* 鮮やかなエメラルドグリーン */
    border-radius: 0; /* リセット */
    box-shadow: none; /* 影を削除 */
}

/* アイコンを追加するための擬似要素 */
.admin-page .report-view-container .report-title::after {
    content: '';
    position: absolute;
    left: 1.2rem; /* 左のバーからの距離 */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.admin-page .report-content {
    padding: 1.5rem 2rem 2rem 2rem;
}

.admin-page .back-link-container {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}
/* index.php, my_reports.php, profile_edit.php などユーザーページの共通コンテナ */
.app-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff; /* 背景色を直接指定 */
}

/* トップページ(index.php)の.app-containerのみ背景と影をなくす */
.index-page-wrapper .app-container {
    background-color: transparent;
    box-shadow: none;
}
/* index.phpのスマホ表示時の左右余白 */
.index-page-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
}

/* ユーザーページのフッター背景色 */
body:not(.admin-page) footer {
    background-color: #f8f9fa; /* 薄いグレーに変更 */
    border-top: 1px solid #e9ecef; /* 境界線の色も合わせる */
    color: #6c757d; /* 文字色をグレーに変更 */
    text-align: center; /* テキストを中央揃えに */
    padding: 1.5rem 0; /* 上下の余白を追加 */
    margin-top: auto; /* コンテンツが少ない場合でもフッターを最下部に固定 */
}

/* 管理者ページのフッター */
body.admin-page footer {
    background-color: #343a40; /* ヘッダーのh1の色と合わせる */
    color: #f8f9fa; /* 明るい文字色 */
    text-align: center;
    padding: 1.5rem 0;
    margin-top: auto; /* コンテンツが少ない場合でもフッターを最下部に固定 */
    width: 100%;
}

/* レスポンシブ対応 (スマートフォンなど) */
@media (max-width: 768px) {
    header {
        padding: 1rem; /* ヘッダーの左右の余白を調整 */
        flex-wrap: wrap; /* 必要に応じて折り返しを許可 */
        gap: 0.5rem; /* 折り返した際の上下の隙間 */
    }
    header h1 {
        font-size: 1.2rem; /* タイトルのフォントサイズを調整 */
    }

    .login-container {
        width: 90%; /* 画面幅に対する割合で指定 */
        margin: 2rem auto; /* 上下のマージンを調整 */
        padding: 1.5rem; /* 内側の余白を調整 */
        box-sizing: border-box;
    }

    .user-info-bar {
        padding: 0.3rem 1rem; /* 上下の余白を狭くする */
    }

    .user-info-bar .login-info {
        font-size: 0.6rem; /* 文字をさらに小さくする */
        gap: 0.5rem; /* ボタンとの間隔を調整 */
    }

    /* ユーザーページのメインコンテナの余白を調整 */
    /* index.php 以外の .app-container に適用 */
    body:not(.admin-page) .app-container:not(.index-page-wrapper .app-container) {
        margin: 1rem;
        padding: 2rem 0.7rem; /* 上下のpaddingは2rem、左右のpaddingを調整 */
    }

    /* テーブルが画面からはみ出す場合に横スクロールを可能にする */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
    }

    /* my_reports.php のスマホ表示調整 */
    .column-action {
        display: none; /* 「操作」列を非表示にする */
    }
    tr[data-href] {
        cursor: pointer; /* タップ可能な行であることを示す */
    }
    tr[data-href]:hover {
        background-color: #f5f5f5; /* ホバー時の背景色 */
    }

    /* index.php のラッパーのpaddingを0にする */
    .index-page-wrapper {
        padding: 0;
    }

    /* index.php の .app-container にモバイル用マージンとパディングを適用 */
    .index-page-wrapper .app-container {
        margin: 1rem auto; /* 上下1rem、左右自動 */
        padding: 1rem; /* 左右のパディングを1remに設定 */
    }

    /* index.php のカードの左右パディングを調整 */
    .index-page-wrapper .card {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* index.php のカレンダーコンテナのパディングを調整 */
    .index-page-wrapper #calendar-container {
        padding: 1rem; /* スマホ表示時のパディングを縮小 */
    }
}

/* report_request.php から移動した日付入力欄のスタイル */
/* report_request.php と dashboard_chart.php の日付入力欄に適用 */
.form-container input[type="date"], .user-filter-form input[type="date"] {
    padding: 0.65rem; /* 上下の余白を他のフォームと合わせる */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* bodyのフォントを継承 */
    font-size: 1rem; /* フォントサイズを他の入力欄と合わせる */
}

/* report_request.php の Select2 コンテナのマージン */
.form-container .select2-container {
    margin-bottom: 1rem;
}

/* Select2のスタイル調整 */
.form-container .select2-container--default .select2-selection--single,
.user-filter-form .select2-container--default .select2-selection--single {
    /* paddingを0.7remに調整し、高さを再計算 */
    height: calc(1.5rem + 0.7rem * 2 + 2px);
    padding: 0; /* paddingをリセット */
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-container .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-container .select2-container--default .select2-selection--single .select2-selection__placeholder,
.user-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.user-filter-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    /* 新しい高さに合わせてline-heightとpaddingを調整 */
    line-height: calc(1.5rem + 0.7rem * 2);
    padding-left: 0.7rem;
    padding-right: 20px; /* 矢印とのスペースを確保 */
}

/* ==========================================================================
   管理画面ヘッダーのデザイン
   ========================================================================== */
.admin-page header {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 0 2rem;
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    min-height: 60px; /* コンテンツが折り返した時に高さが伸びるように */
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 2rem; /* タイトルとナビコンテナの間の最小限の隙間 */
}

.admin-page header h1 {
    font-size: 1.5rem;
    margin: 0;
    color: #ffffff;
    flex-shrink: 0; /* タイトルが縮まないようにする */
}

.admin-page .header-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* navとright-itemsを両端に配置 */
    flex-grow: 1; /* 残りの幅をすべて使用 */
    gap: 1rem; /* navとright-itemsの間の隙間 */
    flex-wrap: wrap; /* navとright-items自体も折り返し可能にする */
    margin-left: 0; /* gapで管理するためリセット */
}

.admin-page .header-nav-container nav {
    display: flex;
    gap: 0.5rem; /* ボタン間の隙間 */
    flex-wrap: wrap; /* メニュー項目が多い場合に折り返す */
}

.admin-page header nav a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 500;
}

.admin-page header nav a:hover {
    background-color: #34495e; /* ホバー時の背景色 */
    color: #ffffff;
}

.admin-page header nav a.active {
    background-color: #1abc9c; /* アクティブなリンクの背景色 (例: エメラルドグリーン) */
    color: #ffffff;
    font-weight: bold;
}

.admin-page .header-right-items {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.admin-page .login-info a {
    color: #ffffff; /* 文字色を白に */
    text-decoration: none; /* 下線を削除 */
    transition: color 0.3s;
}

.admin-page .login-info a:not(.logout-button):hover {
    text-decoration: underline; /* ログアウトボタン以外のリンクにホバーで下線を追加 */
}

.admin-page .login-info a.logout-button {
    background-color: #e74c3c; /* ログアウトボタンの色 (赤系) */
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    text-decoration: none;
}

.admin-page .login-info a.logout-button:hover {
    background-color: #c0392b;
}

.admin-page .bell-icon {
    color: #ffffff; /* ベルアイコンの色を白に */
}

.admin-page .notification-area {
    position: relative;
    display: inline-block;
    margin-left: 1.5rem;
}

.admin-page .notification-bell {
    background: none;
    border: 1px solid rgba(236, 240, 241, 0.5); /* 半透明の枠線を追加 */
    cursor: pointer;
    padding: 6px; /* 内側の余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    color: #ecf0f1; /* ヘッダーの文字色に合わせる */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s; /* ホバーエフェクトを追加 */
}

.admin-page .notification-bell:hover {
    background-color: rgba(255, 255, 255, 0.1); /* ホバー時にうっすらと背景色を表示 */
}

.admin-page .notification-bell .bell-icon {
    width: 24px;
    height: 24px;
    fill: currentColor; /* 親要素の色を継承 */
}

.admin-page .notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #e74c3c; /* 赤色 */
    color: white;
    border-radius: 50%;
    padding: 2px 5px; /* 内側の余白でサイズを確保 */
    font-size: 0.7rem;
    line-height: 1; /* 行の高さを調整 */
    min-width: 18px; /* 最小幅を指定して円形を保つ */
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 0 2px #2c3e50; /* ヘッダー背景色と同じボーダー */
}

.admin-page .notification-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* ベルの下に少しスペースを開けて表示 */
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 320px; /* ドロップダウンの幅 */
    max-height: 400px; /* 最大高さ */
    overflow-y: auto; /* 高さを超えたらスクロール */
    z-index: 1000; /* 他の要素より手前に */
    display: none; /* 初期状態では非表示 */
    transform-origin: top right;
    animation: fadeInScale 0.2s ease-out;
}

.admin-page .notification-dropdown.show {
    display: block;
}

.admin-page .notification-dropdown .notification-header {
    padding: 12px 15px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    background-color: #f8f8f8;
    color: #333;
}

.admin-page .notification-dropdown .notification-header h3 {
    margin: 0;
    font-size: 1rem;
}

.admin-page .notification-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-page .notification-dropdown ul li {
    border-bottom: 1px solid #eee;
}

.admin-page .notification-dropdown ul li:last-child {
    border-bottom: none;
}

.admin-page .notification-dropdown ul li a.notification-item-link {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.admin-page .notification-dropdown ul li a.notification-item-link:hover {
    background-color: #f5f5f5;
}

.admin-page .notification-dropdown ul li .notification-message {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
}

.admin-page .notification-dropdown ul li .notification-time {
    display: block;
    font-size: 0.75rem;
    color: #777;
    margin-top: 5px;
}

.admin-page .notification-dropdown .no-notifications-item {
    padding: 15px;
    text-align: center;
    color: #777;
    font-size: 0.9rem;
}

.admin-page .notification-dropdown .notification-footer {
    padding: 10px 15px;
    text-align: center;
    border-top: 1px solid #eee;
    background-color: #f8f8f8;
}

.admin-page .notification-dropdown .notification-footer a {
    color: #007acc;
    text-decoration: none;
    font-size: 0.9rem;
}

.admin-page .notification-dropdown .notification-footer a:hover {
    text-decoration: underline;
}
.admin-page .disabled-link {
    color: #888 !important; /* 文字色をグレーアウト */
    pointer-events: none;   /* クリックイベントを無効化 */
    cursor: not-allowed;    /* カーソルを禁止マークに */
}
/* 無効化されたリンクのホバー効果を無効にする */
.admin-page .disabled-link:hover {
    background-color: transparent !important;
    color: #888 !important;
}

/* --- ハンバーガーメニュー (PCでは非表示) --- */
.admin-page .hamburger-btn {
    display: none; /* PCでは非表示 */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    margin-left: auto; /* 右寄せ */
}

.admin-page .hamburger-btn span {
    width: 30px;
    height: 3px;
    background-color: #ecf0f1; /* アイコンの色 */
    border-radius: 5px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* ハンバーガーメニューが開いているときのスタイル */
.admin-page .hamburger-btn.open span:nth-child(1) { transform: rotate(45deg); }
.admin-page .hamburger-btn.open span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.admin-page .hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg); }

/* --- レスポンシブ対応 (768px以下) --- */
@media (max-width: 768px) {
    .admin-page header {
        justify-content: space-between; /* タイトルと右側要素を両端に */
        gap: 0; /* スマホ表示ではgapを無効化 */
        padding: 0 1rem; /* スマホ表示時の左右のpaddingを調整 */
    }

    /* PC用のナビゲーションとログイン情報を非表示に */
    .admin-page .header-nav-container {
        display: none;
    }

    /* スマホではハンバーガーボタンを表示 */
    .admin-page .hamburger-btn {
        display: flex; /* 表示 */
        order: 3;      /* 3番目に表示 */
        margin-left: 0.5rem; /* 通知ベルとの間隔 */
        margin-top: 0;
    }
    /* スマホ表示時にベルとハンバーガーを右に寄せるためのコンテナ */
    .admin-page .header-right-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }

    .admin-page .notification-area {
        order: 2; /* 2番目に表示 */
        margin-left: auto; /* タイトルの右に寄せる */
    }

    .admin-page .header-nav-container {
        width: 100%;
        position: absolute;
        top: 60px; /* ヘッダーの高さ分下に配置 */
        left: 0;
        right: 0;
        background-color: #34495e; /* 少し明るい背景色 */
        flex-direction: column; /* 縦並びにする */
        align-items: stretch; /* 幅を100%に */
        padding: 1rem;
        margin-left: 0; /* PC用のマージンをリセット */
    }

    .admin-page .header-nav-container.show {
        display: flex; /* 表示する */
    }

    /* ハンバーガーメニュー内の通知エリアは不要なので非表示 */
    .admin-page .header-nav-container .notification-area {
        display: none;
    }

    .admin-page .header-nav-container nav,
    .admin-page .header-right-items {
        flex-direction: column; /* 縦並び */
        align-items: stretch; /* 幅を100%に */
        gap: 1rem;
        width: 100%;
        margin-left: 0; /* autoをリセット */
    }
    /* ハンバーガーメニュー内では、右側アイテムをnavの下に表示 */
    .admin-page .header-nav-container .header-right-items { 
        order: 2; 
    }



    .admin-page .header-nav-container nav a {
        text-align: center;
        border-bottom: 1px solid #4a627a;
        border-radius: 0;
    }

    .admin-page .login-info {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

}