/* ========================================
   TRANSPORT PLANNING STYLES
   ========================================
   
   This CSS file contains styles for the transport planning functionality.
   It is designed to be integrated with the main styles-colorful.css file
   in the future.
   
   Sections:
   0. Page Theme Colors (Page-specific color themes)
   1. Schedule Selection Styles
   2. Modal Styles  
   3. Transport Planning Styles
   4. Drag & Drop Styles
   5. Responsive Styles
   
   Integration Notes:
   - Uses CSS custom properties for consistent theming
   - Follows the same naming conventions as styles-colorful.css
   - Designed to avoid conflicts with existing styles
   
   ======================================== */

/* ========================================
   0. PAGE THEME COLORS - ページごとの色テーマ定義
   ======================================== */
:root {
    /* デフォルトの色（オレンジ系） */
    --page-theme-primary: #ff8c20;          /* メインアクセント色（オレンジ系） */
    --page-theme-primary-dark: #f87800;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #ffc995;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #ff8c20;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(248, 120, 0, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(248, 120, 0, 0.2);  /* 薄いアクセント色の影 */
    
    /* テキスト色の変数（予定選択パネル用） */
    --text-color: #333;                      /* メインテキスト色（ライトモード） */
    --text-secondary: #666;                  /* サブテキスト色（ライトモード） */
    --text-muted: #888;                      /* ミュートテキスト色（ライトモード） */
}

/* 送迎調整ページの色テーマ（紫系） */
.transport-planning-page,
body:has(.transport-planning) {
    --page-theme-primary: #a65bff;          /* メインアクセント色（紫系） */
    --page-theme-primary-dark: #9134ff;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #e6d1ff;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #a65bff;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(155, 89, 182, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(155, 89, 182, 0.2);  /* 薄いアクセント色の影 */
}

/* 参加者ページの色テーマ */
.participant-page,
body:has(.participant-planning) {
    --page-theme-primary: #ed6666;          /* 赤 */
    --page-theme-primary-dark: #e94343;      /* 濃い赤 */
    --page-theme-primary-light: #f9cfcf;     /* 薄い赤（背景） */
    --page-theme-primary-text: #ed6666;      /* 赤テキスト */
    --page-theme-shadow: rgba(231, 76, 60, 0.3);
    --page-theme-shadow-light: rgba(231, 76, 60, 0.2);
}

/* PODページの色テーマ（赤系） */
.pod-page,
body:has(.pod-page) {
    --page-theme-primary: #ed6666;          /* 赤 */
    --page-theme-primary-dark: #e94343;      /* 濃い赤 */
    --page-theme-primary-light: #f9cfcf;     /* 薄い赤（背景） */
    --page-theme-primary-text: #ed6666;      /* 赤テキスト */
    --page-theme-shadow: rgba(231, 76, 60, 0.3);
    --page-theme-shadow-light: rgba(231, 76, 60, 0.2);
}

/* 予定ページの色テーマ（緑系） */
.event-page,
body:has(.event-page) {
    --page-theme-primary: #2ecdb4;          /* メインアクセント色（緑系） */
    --page-theme-primary-dark: #2bbda6;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #9ce8dc;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #2ecdb4;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(46, 205, 180, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(46, 205, 180, 0.2);  /* 薄いアクセント色の影 */
}

/* メンバーページの色テーマ（ピンク系） */
.member-page,
body:has(.member-page) {
    --page-theme-primary: #f760cc;          /* メインアクセント色（ピンク系） */
    --page-theme-primary-dark: #f53bc0;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #fdd0f0;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #f760cc;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(247, 59, 192, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(247, 59, 192, 0.2);  /* 薄いアクセント色の影 */
}

/* 編集者ページの色テーマ（黄色系） */
.account-page,
body:has(.account-page) {
    --page-theme-primary: #ffbf00;          /* メインアクセント色（黄色系） */
    --page-theme-primary-dark: #ebb000;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #ffdc75;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #ffbf00;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(235, 176, 0, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(235, 176, 0, 0.2);  /* 薄いアクセント色の影 */
}

/* 車ページの色テーマ（青系） */
.car-page,
body:has(.car-page) {
    --page-theme-primary: #27c9ff;          /* メインアクセント色（青系） */
    --page-theme-primary-dark: #00b0eb;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #9de6ff;    /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #27c9ff;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(0, 176, 235, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(0, 176, 235, 0.2);  /* 薄いアクセント色の影 */
}

/* POMページの色テーマ（青系） - styles-colorful.cssの変数を使用 */
.pom-page,
body:has(.pom-page) {
    --page-theme-primary: var(--color-header-pom);          /* メインアクセント色（青系） */
    --page-theme-primary-dark: var(--color-header-car);     /* 濃いアクセント色（ホバー・ボーダー）送迎車と同じ青系 */
    --page-theme-primary-light: #b0d5ff;    /* 薄いアクセント色（背景） - POMページ専用 */
    --page-theme-primary-text: var(--color-header-pom);      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(20, 130, 255, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(20, 130, 255, 0.2);  /* 薄いアクセント色の影 */
}

/* POMページのヘッダーナビゲーション（POM部分のみ青系） */
/* 送迎調整WEBでは.nav-planは紫系（styles-colorful.cssで定義） */
/* POMページでのみ青系を適用（詳細度を上げて確実に適用） */
.pom-page .nav-plan,
body:has(.pom-page) .nav-plan,
body.pom-page .nav-plan {
    color: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
}

.pom-page .nav-plan .nav-icon svg,
body:has(.pom-page) .nav-plan .nav-icon svg,
body.pom-page .nav-plan .nav-icon svg,
.pom-page .nav-plan .nav-icon svg use,
body:has(.pom-page) .nav-plan .nav-icon svg use,
body.pom-page .nav-plan .nav-icon svg use {
    color: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
    fill: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
}

/* ========================================
   1. SCHEDULE SELECTION STYLES
   ======================================== */
/* 予定選択のスタイル */
.schedule-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin: 0.5rem 0;  /* 上下のマージンを狭く */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Gridアイテムが親要素の幅を超えないようにする */
.schedule-list > .schedule-item {
    max-width: 100%;
    min-width: 0; /* Gridアイテムの幅制限を有効にする */
    width: 100%; /* 親要素の幅に合わせる */
}

.schedule-item {
    border: 2px solid var(--color-border, #dddddd);
    border-radius: 8px;
    padding: 0.75rem;  /* パディングを小さく */
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-white, #ffffff);
    min-height: auto;  /* 最小高さを自動に */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 子要素のはみ出しを防ぐ */
    min-width: 0; /* gridアイテムの幅制限を有効にする */
}

.schedule-item:hover {
    border-color: var(--page-theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 選択された予定のスタイル */
.schedule-item.selected {
    background-color: var(--page-theme-primary);
    color: var(--color-white-text, #ffffff);
    border-color: var(--page-theme-primary-dark);
    box-shadow: 0 2px 12px var(--page-theme-shadow);
}

.schedule-item.selected .schedule-name {
    color: var(--color-white-text, #ffffff);
    font-weight: 600;
}

.schedule-item.selected .schedule-single-line {
    color: var(--color-white-text, #ffffff);
    font-weight: 500;
}

/* 選択された予定の未確定バッジも白色に */
.schedule-item.selected .schedule-single-line span {
    color: var(--color-white-text, #ffffff) !important;
}

.schedule-item.selected:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--page-theme-shadow);
}

/* 選択状態のインジケーター */
.schedule-item.selected::before {
    content: "✓";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white-text, #ffffff);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.schedule-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.schedule-date {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.schedule-location {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.schedule-memo {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* 未確定バッジのスタイル - 各ページのテーマカラーを適用 */
.schedule-pod-badge {
    color: var(--page-theme-primary);
    font-weight: bold;
    margin-left: 0.5rem;
}

/* ページネーションコントロール */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;  /* 上のマージンを狭く */
    padding: 0.5rem;    /* パディングも狭く */
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pagination-button {
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    background-color: var(--primary-color);
    color: var(--color-white-text, #ffffff);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.pagination-button:hover:not(:disabled) {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pagination-button.secondary {
    background-color: transparent;
    color: var(--primary-color);
}

.pagination-button.secondary:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: var(--color-white-text, #ffffff);
}

/* サイドメニュー表示時の調整（768px以上1200px未満でサイドメニューが表示される場合） */
/* 画面幅が大きい場合は、基本スタイル（minmax(250px, 1fr)）を使用してパネルを最大限に活用 */
@media (min-width: 768px) and (max-width: 1199px) {
    /* サイドメニューが表示されている時は、利用可能な幅が小さくなるため、最小幅を調整 */
    /* 230pxは、日付・予定名・場所・バッジを適切に表示するための最小幅 */
    #main-content-container .schedule-list,
    #authenticated-layout #main-content-container .schedule-list {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

/* スマホ表示でのレスポンシブ対応 */
@media (max-width: 768px) {
    .schedule-list {
        grid-template-columns: 1fr;  /* スマホでは1列表示 */
        gap: 0.75rem;
        margin: 0.25rem 0;
        padding: 0 0.5rem;
    }
    
    .schedule-item {
        padding: 0.5rem;  /* モバイルではさらに小さく */
        min-height: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .schedule-list > .schedule-item {
        max-width: 100%;
        min-width: 0;
    }
    
    .schedule-single-line {
        font-size: 0.85rem;  /* モバイルではさらに小さく */
        line-height: 1.3;
        word-break: break-word;
    }
    
    .schedule-item-content {
        gap: 0.25rem; /* モバイルでは間隔を狭く */
    }
    
    .schedule-date,
    .schedule-name,
    .schedule-location {
        font-size: 0.85rem; /* モバイルではさらに小さく */
    }
    
    .pagination-controls {
        margin-top: 0.25rem;  /* モバイルではさらに狭く */
        padding: 0.25rem;     /* モバイルではさらに狭く */
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* コンテンツセクションの幅制限 */
.content-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    overflow-x: hidden;
}

/* コンテンツセクション内の子要素も幅を制限 */
.content-section > * {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .content-section {
        padding: 0 0.5rem;
    }
}

/* 画面が狭い場合（420px以下）の調整 */
@media (max-width: 420px) {
    .content-section {
        padding: 0 0.5rem;
    }
    
    .schedule-list {
        gap: 0.5rem;
        margin: 0.25rem 0;
    }
    
    .schedule-item {
        padding: 0.5rem;
    }
}

.schedule-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.schedule-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* 1行表示用のスタイル */
.schedule-single-line {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 予定選択パネルの新しい構造 */
.schedule-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* flexboxで省略を有効にするために必要 */
    overflow: hidden; /* はみ出しを防ぐ */
    box-sizing: border-box;
}

.schedule-date {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #333;
    white-space: nowrap;
}

.schedule-name {
    flex: 1 1 0; /* 初期値は1、JavaScriptで動的に調整 */
    min-width: 0; /* flexboxで省略を有効にするために必要 */
    font-size: 0.9rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-name-full {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    color: #333;
}

.schedule-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 0; /* 初期値は1、JavaScriptで動的に調整 */
    min-width: 0; /* flexboxで省略を有効にするために必要 */
    font-size: 0.9rem;
    color: #666;
    overflow: hidden;
}

.schedule-location svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.schedule-location-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.schedule-pod-badge {
    flex-shrink: 0;
    color: var(--page-theme-primary);
    font-size: 0.85rem;
    font-weight: bold;
    margin-left: auto; /* 右端に配置 */
    white-space: nowrap;
    min-width: fit-content; /* バッジの幅を確保 */
}

/* 選択状態のスタイル */
.schedule-item.selected .schedule-date,
.schedule-item.selected .schedule-name,
.schedule-item.selected .schedule-location,
.schedule-item.selected .schedule-location-text {
    color: var(--color-white-text, #ffffff);
}

.schedule-item.selected .schedule-pod-badge {
    color: var(--color-white-text, #ffffff);
}

/* ========================================
   2. MODAL STYLES
   ======================================== */
/* 予定選択モーダルのスタイル */
/* 参加者ページと送迎調整ページ用のモーダル基本スタイル（member-styles.cssが読み込まれていないため） */
.participant-page .modal,
body:has(.participant-planning) .modal,
.transport-planning-page .modal,
body:has(.transport-planning) .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
    pointer-events: none; /* モーダル背景はクリックイベントを通過させる */
}

.participant-page .modal.active,
body:has(.participant-planning) .modal.active,
.participant-page .modal.show,
body:has(.participant-planning) .modal.show,
.transport-planning-page .modal.active,
body:has(.transport-planning) .modal.active,
.transport-planning-page .modal.show,
body:has(.transport-planning) .modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.participant-page .modal-content,
body:has(.participant-planning) .modal-content,
.transport-planning-page .modal-content,
body:has(.transport-planning) .modal-content {
    pointer-events: auto !important; /* モーダルコンテンツは常にクリック可能 */
    background-color: var(--color-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: visible !important; /* visibleに変更してプルダウンが切れないように */
    animation: slideUp 0.3s ease;
    position: relative;
    z-index: 10000 !important; /* モーダルコンテンツを最前面に */
}

.participant-page .modal-header,
body:has(.participant-planning) .modal-header,
.transport-planning-page .modal-header,
body:has(.transport-planning) .modal-header {
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.participant-page .modal-title,
body:has(.participant-planning) .modal-title,
.transport-planning-page .modal-title,
body:has(.transport-planning) .modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.participant-page .modal-body,
body:has(.participant-planning) .modal-body,
.transport-planning-page .modal-body,
body:has(.transport-planning) .modal-body {
    padding: 1.5rem;
    max-height: calc(90vh - 120px); /* ヘッダーとフッターの高さを考慮 */
    overflow-y: auto; /* モーダルボディにスクロールを設定 */
    overflow-x: hidden;
}

.participant-page .modal-footer,
body:has(.participant-planning) .modal-footer,
.transport-planning-page .modal-footer,
body:has(.transport-planning) .modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* 送迎調整ページ専用のmax-width設定（基本スタイルを上書き） */
.transport-planning-page .modal-content,
body:has(.transport-planning) .modal-content {
    max-width: 400px !important; /* 送迎調整ページでは400px */
}

/* モーダル内のスクロールバーのスタイル */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--color-border-light, #f1f1f1);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--color-border, #c1c1c1);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary, #a8a8a8);
}

/* 送迎調整ページ専用のモーダルヘッダースタイル */
.transport-planning-page .modal-header,
body:has(.transport-planning) .modal-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
    position: relative;
    padding-bottom: 1rem;
}

.transport-planning-page .modal-header::after,
body:has(.transport-planning) .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--color-border, #e5e7eb);
}

/* ログアウトモーダルのヘッダーはグレーのライン */
.transport-planning-page #logoutModal .modal-header::after,
body:has(.transport-planning) #logoutModal .modal-header::after {
    background-color: var(--color-border, #e5e7eb);
}

.transport-planning-page .modal-header h3,
body:has(.transport-planning) .modal-header h3 {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary, #333);
    font-size: 1.2rem;
}

/* 参加者ページ専用のモーダルヘッダースタイル */
.participant-page .modal-header,
body:has(.participant-planning) .modal-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
    position: relative;
    padding-bottom: 1rem;
}

.participant-page .modal-header::after,
body:has(.participant-planning) .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--color-border, #e5e7eb);
}

/* ログアウトモーダルのヘッダーはグレーのライン */
.participant-page #logoutModal .modal-header::after,
body:has(.participant-planning) #logoutModal .modal-header::after {
    background-color: var(--color-border, #e5e7eb);
}

.participant-page .modal-header h3,
body:has(.participant-planning) .modal-header h3 {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary, #333);
    font-size: 1.2rem;
}

/* モーダルボディスタイルはmember-styles.cssで定義されているため、ここでは送迎調整ページ専用の設定のみ */
/* member-styles.cssが読み込まれるため、基本設定はmember-styles.cssを参照 */

/* 送迎調整ページ専用のモーダルボディスタイル */
.transport-planning-page .modal-body p,
body:has(.transport-planning) .modal-body p {
    margin: 0;
    color: var(--color-text-primary, #333);
    font-size: 1rem;
    line-height: 1.5;
}

/* 参加者ページ専用のモーダルボディスタイル */
.participant-page .modal-body p,
body:has(.participant-planning) .modal-body p {
    margin: 0;
    color: var(--color-text-primary, #333);
    font-size: 1rem;
    line-height: 1.5;
}

.participant-page .modal-body span,
body:has(.participant-planning) .modal-body span,
.transport-planning-page .modal-body span,
body:has(.transport-planning) .modal-body span {
    color: var(--color-text-primary, #333);
}

/* 参加者出欠確定確認モーダル内のテキスト色 */
#participantConfirmationModal .modal-body p,
#participantConfirmationModal .modal-body li,
#participantConfirmationModal .modal-body ul li {
    color: var(--color-text-primary, #333);
}

/* 参加者出欠確定確認モーダル内のリストアイテムの色を明示的に設定 */
#participantConfirmationModal #unansweredParticipants li {
    color: var(--color-text-primary, #333);
}

/* モーダル内の入力フィールドスタイルはmember-styles.cssで定義されているため、ここでは送迎調整ページ専用の設定のみ */
/* member-styles.cssが読み込まれるため、基本設定はmember-styles.cssを参照 */
/* 送迎調整ページ専用の入力フィールドスタイルが必要な場合は、ここに追加 */

/* 送迎調整ページ専用のモーダルフッタースタイル */
.transport-planning-page .modal-footer,
body:has(.transport-planning) .modal-footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex !important;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    min-height: 60px;
}

/* 参加者ページ専用のモーダルフッタースタイル */
.participant-page .modal-footer,
body:has(.participant-planning) .modal-footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex !important;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    min-height: 60px;
}

/* 送迎調整ページ専用のモーダルフッターボタンスタイル */
.transport-planning-page .modal-footer .btn,
body:has(.transport-planning) .modal-footer .btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 参加者ページ専用のモーダルフッターボタンスタイル */
.participant-page .modal-footer .btn,
body:has(.participant-planning) .modal-footer .btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transport-planning-page .modal-footer .btn-secondary,
body:has(.transport-planning) .modal-footer .btn-secondary {
    background-color: var(--color-border, #ecf0f1);
    color: var(--color-text-primary, #2c3e50);
    border: 1px solid var(--color-border-light, #bdc3c7);
}

.transport-planning-page .modal-footer .btn-secondary:hover,
body:has(.transport-planning) .modal-footer .btn-secondary:hover {
    background-color: var(--color-hover, #d5dbdb);
    color: var(--color-text-primary, #2c3e50);
}

.transport-planning-page .modal-footer .btn-primary,
body:has(.transport-planning) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: var(--color-white-text, #ffffff);
    border: 1px solid var(--page-theme-primary-dark);
}

.transport-planning-page .modal-footer .btn-primary:hover,
body:has(.transport-planning) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: var(--color-white-text, #ffffff);
}

.transport-planning-page .modal-footer .btn-primary:disabled,
body:has(.transport-planning) .modal-footer .btn-primary:disabled {
    background-color: var(--color-border-light, #bdc3c7);
    color: var(--color-text-secondary, #7f8c8d);
    border-color: var(--color-border-light, #bdc3c7);
    cursor: not-allowed;
}

/* 参加者ページ専用のモーダルフッターボタンカラー */
.participant-page .modal-footer .btn-secondary,
body:has(.participant-planning) .modal-footer .btn-secondary {
    background-color: var(--color-border, #ecf0f1);
    color: var(--color-text-primary, #2c3e50);
    border: 1px solid var(--color-border-light, #bdc3c7);
}

.participant-page .modal-footer .btn-secondary:hover,
body:has(.participant-planning) .modal-footer .btn-secondary:hover {
    background-color: var(--color-hover, #d5dbdb);
    color: var(--color-text-primary, #2c3e50);
}

.participant-page .modal-footer .btn-primary,
body:has(.participant-planning) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
    border: 1px solid var(--page-theme-primary-dark);
}

.participant-page .modal-footer .btn-primary:hover,
body:has(.participant-planning) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

.participant-page .modal-footer .btn-primary:disabled,
body:has(.participant-planning) .modal-footer .btn-primary:disabled {
    background-color: var(--color-border-light, #bdc3c7);
    color: var(--color-text-secondary, #7f8c8d);
    border-color: var(--color-border-light, #bdc3c7);
    cursor: not-allowed;
}

/* 選択された予定情報のスタイル - より詳細度の高いセレクター */
.transport-planning .selected-schedule-info {
    grid-column: 1 / -1;
    background-color: var(--color-white, #ffffff);
    border: 2px solid var(--color-border, #ddd);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow-x: hidden;
}

.transport-planning .selected-schedule-info:hover {
    border-color: var(--page-theme-primary);
    box-shadow: 0 4px 8px var(--page-theme-shadow-light);
}

.transport-planning .selected-schedule-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary, #333);
    font-size: 1rem;
    font-weight: 600;
}

.transport-planning .selected-schedule-info .schedule-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transport-planning .selected-schedule-info .schedule-info-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.transport-planning .selected-schedule-info .schedule-info-details {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

.transport-planning .selected-schedule-info .schedule-info-public-url {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    font-size: 0.8rem;
    width: 100%;
    overflow: hidden;
}

.transport-planning .selected-schedule-info .schedule-info-public-url-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.transport-planning .selected-schedule-info .schedule-info-public-url-link {
    font-size: 0.85rem;
    color: var(--page-theme-primary, #3b82f6);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transport-planning .selected-schedule-info .schedule-info-public-url-link:hover {
    text-decoration: underline;
}

.transport-planning .selected-schedule-info .schedule-info-public-url-copy {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--color-bg-secondary, #f3f4f6);
    color: var(--color-text-primary, #333);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.transport-planning .selected-schedule-info .schedule-info-public-url-copy:hover {
    background-color: var(--color-bg-tertiary, #e5e7eb);
}

.transport-planning .selected-schedule-info .schedule-info-public-url-copy.copied {
    background-color: var(--page-theme-primary, #3b82f6);
    color: white;
}

.transport-planning .selected-schedule-info .schedule-info-memo {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    font-style: italic;
    margin-top: 0.25rem;
}

.transport-planning .selected-schedule-info .schedule-info-memo-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.transport-planning .selected-schedule-info .schedule-info-memo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.transport-planning .selected-schedule-info .schedule-info-memo-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    flex: 1;
}

.transport-planning .selected-schedule-info .schedule-info-memo-edit-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--page-theme-primary, #8b5cf6);
    color: white;
    border: 1px solid var(--page-theme-primary, #8b5cf6);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.transport-planning .selected-schedule-info .schedule-info-memo-edit-btn:hover {
    background-color: var(--page-theme-primary-dark, #7c3aed);
    border-color: var(--page-theme-primary-dark, #7c3aed);
}

.transport-planning .selected-schedule-info .schedule-info-memo-content {
    font-size: 0.85rem;
    color: var(--color-text-primary, #333);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 予定メモ編集モーダルのスタイル（送迎調整ページ用 - 紫系） */
.transport-planning-page #scheduleMemoModal .modal-content,
body:has(.transport-planning) #scheduleMemoModal .modal-content {
    background-color: var(--color-white, #ffffff);
}

.transport-planning-page #scheduleMemoModal .modal-header,
body:has(.transport-planning) #scheduleMemoModal .modal-header {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.transport-planning-page #scheduleMemoModal .modal-title,
body:has(.transport-planning) #scheduleMemoModal .modal-title {
    color: var(--color-text-primary, #333);
}

.transport-planning-page #scheduleMemoModal .memo-edit-content label,
body:has(.transport-planning) #scheduleMemoModal .memo-edit-content label {
    font-weight: 600;
    color: var(--color-text-primary, #333);
    font-size: 0.9rem;
}

.transport-planning-page #scheduleMemoModal .memo-input,
body:has(.transport-planning) #scheduleMemoModal .memo-input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-input-bg, #ffffff);
    color: var(--color-input-text, #000000);
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s ease;
}

.transport-planning-page #scheduleMemoModal .memo-input:focus,
body:has(.transport-planning) #scheduleMemoModal .memo-input:focus {
    outline: none;
    border-color: var(--page-theme-primary, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.transport-planning-page #scheduleMemoModal .btn-primary,
body:has(.transport-planning) #scheduleMemoModal .btn-primary {
    background-color: var(--page-theme-primary, #8b5cf6);
    border-color: var(--page-theme-primary, #8b5cf6);
    color: var(--color-white-text, #ffffff);
}

.transport-planning-page #scheduleMemoModal .btn-primary:hover,
body:has(.transport-planning) #scheduleMemoModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #7c3aed);
    border-color: var(--page-theme-primary-dark, #7c3aed);
}

/* 予定メモ編集モーダルのスタイル（参加者ページ用 - 赤系） */
.participant-page #scheduleMemoModal .modal-content,
body:has(.participant-planning) #scheduleMemoModal .modal-content {
    background-color: var(--color-white, #ffffff);
}

.participant-page #scheduleMemoModal .modal-header,
body:has(.participant-planning) #scheduleMemoModal .modal-header {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.participant-page #scheduleMemoModal .modal-title,
body:has(.participant-planning) #scheduleMemoModal .modal-title {
    color: var(--color-text-primary, #333);
}

.participant-page #scheduleMemoModal .memo-edit-content label,
body:has(.participant-planning) #scheduleMemoModal .memo-edit-content label {
    font-weight: 600;
    color: var(--color-text-primary, #333);
    font-size: 0.9rem;
}

.participant-page #scheduleMemoModal .memo-input,
body:has(.participant-planning) #scheduleMemoModal .memo-input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-input-bg, #ffffff);
    color: var(--color-input-text, #000000);
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s ease;
}

.participant-page #scheduleMemoModal .memo-input:focus,
body:has(.participant-planning) #scheduleMemoModal .memo-input:focus {
    outline: none;
    border-color: var(--page-theme-primary, #ed6666);
    box-shadow: 0 0 0 3px rgba(237, 102, 102, 0.1);
}

.participant-page #scheduleMemoModal .btn-primary,
body:has(.participant-planning) #scheduleMemoModal .btn-primary {
    background-color: var(--page-theme-primary, #ed6666);
    border-color: var(--page-theme-primary, #ed6666);
    color: var(--color-white-text, #ffffff);
}

.participant-page #scheduleMemoModal .btn-primary:hover,
body:has(.participant-planning) #scheduleMemoModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #dc2626);
    border-color: var(--page-theme-primary-dark, #dc2626);
}

/* 予定メモ編集モーダルのスタイル（送迎車ページ用 - 青系） */
.event-car-page #scheduleMemoModal .modal-content,
body:has(.event-car-planning) #scheduleMemoModal .modal-content {
    background-color: var(--color-white, #ffffff);
}

.event-car-page #scheduleMemoModal .modal-header,
body:has(.event-car-planning) #scheduleMemoModal .modal-header {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.event-car-page #scheduleMemoModal .modal-title,
body:has(.event-car-planning) #scheduleMemoModal .modal-title {
    color: var(--color-text-primary, #333);
}

.event-car-page #scheduleMemoModal .memo-edit-content label,
body:has(.event-car-planning) #scheduleMemoModal .memo-edit-content label {
    font-weight: 600;
    color: var(--color-text-primary, #333);
    font-size: 0.9rem;
}

.event-car-page #scheduleMemoModal .memo-input,
body:has(.event-car-planning) #scheduleMemoModal .memo-input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-input-bg, #ffffff);
    color: var(--color-input-text, #000000);
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s ease;
}

.event-car-page #scheduleMemoModal .memo-input:focus,
body:has(.event-car-planning) #scheduleMemoModal .memo-input:focus {
    outline: none;
    border-color: var(--page-theme-primary, #3b97ff);
    box-shadow: 0 0 0 3px rgba(59, 151, 255, 0.1);
}

.event-car-page #scheduleMemoModal .btn-primary,
body:has(.event-car-planning) #scheduleMemoModal .btn-primary {
    background-color: var(--page-theme-primary, #3b97ff);
    border-color: var(--page-theme-primary, #3b97ff);
    color: var(--color-white-text, #ffffff);
}

.event-car-page #scheduleMemoModal .btn-primary:hover,
body:has(.event-car-planning) #scheduleMemoModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #2980d6);
    border-color: var(--page-theme-primary-dark, #2980d6);
}

/* ========================================
   詳細モーダル共通スタイル
   ======================================== */

/* 詳細モーダルアイテムの共通スタイル */
.car-detail-item,
.participant-detail-item,
.schedule-detail-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--color-hover, #f8f9fa);
    border-radius: 6px;
}

/* 各詳細モーダルアイテムの個別スタイル（色のみ） */
.car-detail-item {
    border-left: 4px solid #3498db;
}

/* 送迎調整ページの車両詳細モーダルは紫系 */
.transport-planning-page .car-detail-item,
body:has(.transport-planning) .car-detail-item {
    border-left: 4px solid var(--page-theme-primary, #a65bff);
}

.participant-detail-item {
    border-left: 4px solid var(--page-theme-primary, #a65bff); /* 送迎調整ページ: 紫系 */
}

.participant-detail-item:last-child {
    margin-bottom: 0;
}

.schedule-detail-item {
    border-left: 4px solid var(--page-theme-primary);
}

/* 詳細モーダルラベルの共通スタイル */
.car-detail-label,
.participant-detail-label,
.schedule-detail-label {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* 各詳細モーダルラベルの個別スタイル */
.car-detail-label {
    font-weight: 600;
    color: var(--color-text-primary, #333);
}

.participant-detail-label {
    font-weight: bold;
    color: var(--color-text-primary, #333);
    display: inline-block;
    min-width: 80px;
}

.schedule-detail-label {
    font-weight: 600;
    color: var(--color-text-primary, #2c3e50);
}

/* 詳細モーダル値の共通スタイル */
.car-detail-value,
.participant-detail-value,
.schedule-detail-value {
    font-size: 1rem;
}

/* 各詳細モーダル値の個別スタイル */
.car-detail-value {
    color: var(--color-text-secondary, #666);
}

.participant-detail-value {
    color: var(--color-text-secondary, #666);
    display: inline-block;
}

.schedule-detail-value {
    color: var(--color-text-primary, #333);
    line-height: 1.4;
}

/* 予定詳細モーダルの集計情報（参加者状況、送迎車状況、送迎調整状況）のフォントサイズを小さく */
.schedule-detail-summary {
    font-size: 0.85rem;
}

/* ========================================
   車両詳細表示用のスタイル
   ======================================== */
.car-detail-content {
    padding: 1rem 0;
}

/* ========================================
   参加者詳細モーダルのスタイル
   ======================================== */
.participant-detail-content {
    padding: 1rem 0;
}

.participant-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
}

.participant-status.confirmed {
    background-color: #d4edda;
    color: #155724;
}

.participant-status.pending {
    background-color: #fff3cd;
    color: #856404;
}

/* 未回答メンバラベルのスタイル */
.unanswered-members-label {
    font-weight: bold;
}

/* 参加者ページでの未回答メンバラベルの色（ライトモード） */
.participant-page .unanswered-members-label,
body:has(.participant-planning) .unanswered-members-label,
#participantConfirmationModal .unanswered-members-label {
    color: var(--page-theme-primary, #ed6666) !important; /* ライトモード: 通常の赤色 */
}

/* ダークモード時の未回答メンバラベルの色 */
@media (prefers-color-scheme: dark) {
    /* インラインスタイルが設定されている場合でも上書き */
    .unanswered-members-label[style*="color"],
    #participantConfirmationModal .unanswered-members-label[style*="color"] {
        color: var(--page-theme-primary-light, #f9cfcf) !important; /* ダークモード: 薄い赤色 - インラインスタイルを上書き */
    }
    
    .unanswered-members-label {
        color: var(--page-theme-primary-light, #f9cfcf) !important; /* ダークモード: 薄い赤色 */
    }
    
    .participant-page .unanswered-members-label,
    body:has(.participant-planning) .unanswered-members-label,
    #participantConfirmationModal .unanswered-members-label {
        color: var(--page-theme-primary-light, #f9cfcf) !important; /* ダークモード: 薄い赤色 */
    }
}

/* 未割当参加者ラベルのスタイル */
.unassigned-participants-label {
    font-weight: bold;
}

/* 送迎調整ページでの未割当参加者ラベルの色（ライトモード） */
.transport-planning-page .unassigned-participants-label,
body:has(.transport-planning) .unassigned-participants-label,
#transportConfirmationModal .unassigned-participants-label {
    color: var(--page-theme-primary, #a65bff) !important; /* ライトモード: 通常の紫色 */
}

/* ダークモード時の未割当参加者ラベルの色 */
@media (prefers-color-scheme: dark) {
    /* インラインスタイルが設定されている場合でも上書き */
    .unassigned-participants-label[style*="color"],
    #transportConfirmationModal .unassigned-participants-label[style*="color"] {
        color: var(--page-theme-primary-light, #e6d1ff) !important; /* ダークモード: 薄い紫色 - インラインスタイルを上書き */
    }
    
    .unassigned-participants-label {
        color: var(--page-theme-primary-light, #e6d1ff) !important; /* ダークモード: 薄い紫色 */
    }
    
    .transport-planning-page .unassigned-participants-label,
    body:has(.transport-planning) .unassigned-participants-label,
    #transportConfirmationModal .unassigned-participants-label {
        color: var(--page-theme-primary-light, #e6d1ff) !important; /* ダークモード: 薄い紫色 */
    }
}

/* 周知用URLの表示エリア */
.schedule-detail-url-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* URLの表示エリア（省略表示用） */
.schedule-detail-url-value .url-display {
    display: inline-block;
    max-width: calc(100% - 100px); /* ボタンのスペースを確保 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--page-theme-primary);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.schedule-detail-url-value .url-display:hover {
    color: var(--page-theme-primary-dark);
    text-decoration: underline;
}

/* コピーボタン */
.copy-url-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0; /* ボタンが縮まないようにする */
    margin-left: auto; /* 右揃えにする */
}

.copy-url-button:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-1px);
}

.copy-url-button:active {
    transform: translateY(0);
}

.copy-url-button.copied {
    background-color: var(--page-theme-primary-dark);
}

/* 成功モーダル内のURLコピーボタン */
.success-modal-copy-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.success-modal-copy-button:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-1px);
}

.success-modal-copy-button:active {
    transform: translateY(0);
}

.success-modal-copy-button.copied {
    background-color: var(--page-theme-primary-dark);
}

.success-modal-copy-button.copy-failed {
    background-color: #f44336;
}

/* 確認モーダルの確定ボタン */
.confirm-modal-ok-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-modal-ok-button:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-1px);
}

.confirm-modal-ok-button:active {
    transform: translateY(0);
}

.schedule-detail-memo {
    background-color: var(--page-theme-primary-light);
    border-left-color: var(--page-theme-primary-dark);
}

.schedule-detail-memo .schedule-detail-value {
    white-space: pre-line;
}


/* ========================================
   3. TRANSPORT PLANNING STYLES
   ======================================== */
/* CSS変数で動的な高さを定義 */
:root {
    --vh: 1vh;
}

/* 送迎調整画面専用のスタイル */
.transport-planning {
    display: none;
    grid-template-columns: 1.22fr 1fr; /* 55% : 45% に変更 */
    gap: 2rem;
    margin-bottom: 2rem;
}

.transport-planning.show {
    display: grid !important;
}

/* 退部者・退部車の説明文（両パネルの横幅を使用） */
.transport-planning .resigned-notice {
    grid-column: 1 / -1; /* 全列にまたがる */
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: var(--color-background, #f8f9fa);
    border-left: 4px solid #6c757d;
    color: #6c757d;
    font-size: 0.9rem;
}

/* 参加者ページ専用のレイアウト */
.participant-planning {
    display: none;
    grid-template-columns: 1fr; /* フルワイド */
    gap: 2rem;
    margin-bottom: 2rem;
}

.participant-planning.show {
    display: grid !important;
}

/* 送迎車ページ専用のレイアウト */
.event-car-planning {
    display: none;
    grid-template-columns: 1fr; /* フルワイド */
    gap: 2rem;
    margin-bottom: 2rem;
}

/* 参加者ページの選択された予定情報のスタイル */
.participant-planning .selected-schedule-info {
    grid-column: 1 / -1;
    background-color: var(--color-white, #ffffff);
    border: 2px solid var(--color-border, #ddd);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow-x: hidden;
}

.participant-planning .selected-schedule-info:hover {
    border-color: var(--page-theme-primary);
    box-shadow: 0 4px 8px var(--page-theme-shadow-light);
}

.participant-planning .selected-schedule-info h3 {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
}

.participant-planning .selected-schedule-info .schedule-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.participant-planning .selected-schedule-info .schedule-info-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.participant-planning .selected-schedule-info .schedule-info-details {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

.participant-planning .selected-schedule-info .schedule-info-public-url {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
}

.participant-planning .selected-schedule-info .schedule-info-public-url-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.participant-planning .selected-schedule-info .schedule-info-public-url-link {
    font-size: 0.85rem;
    color: var(--page-theme-primary, #3b82f6);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-planning .selected-schedule-info .schedule-info-public-url-link:hover {
    text-decoration: underline;
}

.participant-planning .selected-schedule-info .schedule-info-public-url-copy {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--color-bg-secondary, #f3f4f6);
    color: var(--color-text-primary, #333);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.participant-planning .selected-schedule-info .schedule-info-public-url-copy:hover {
    background-color: var(--color-bg-tertiary, #e5e7eb);
}

.participant-planning .selected-schedule-info .schedule-info-public-url-copy.copied {
    background-color: var(--page-theme-primary, #3b82f6);
    color: white;
}

.participant-planning .selected-schedule-info .schedule-info-memo {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    font-style: italic;
    margin-top: 0.25rem;
}

.participant-planning .selected-schedule-info .schedule-info-memo-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.participant-planning .selected-schedule-info .schedule-info-memo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.participant-planning .selected-schedule-info .schedule-info-memo-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    flex: 1;
}

.participant-planning .selected-schedule-info .schedule-info-memo-edit-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--page-theme-primary, #ed6666);
    color: white;
    border: 1px solid var(--page-theme-primary, #ed6666);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.participant-planning .selected-schedule-info .schedule-info-memo-edit-btn:hover {
    background-color: var(--page-theme-primary-dark, #dc2626);
    border-color: var(--page-theme-primary-dark, #dc2626);
}

.participant-planning .selected-schedule-info .schedule-info-memo-content {
    font-size: 0.85rem;
    color: var(--color-text-primary, #333);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 送迎車ページの選択された予定情報のスタイル */
.event-car-planning .selected-schedule-info {
    grid-column: 1 / -1;
    background-color: var(--color-white, #ffffff);
    border: 2px solid var(--color-border, #ddd);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow-x: hidden;
}

.event-car-planning .selected-schedule-info:hover {
    border-color: var(--page-theme-primary);
    box-shadow: 0 4px 8px rgba(59, 151, 255, 0.2);
}

.event-car-planning .selected-schedule-info h3 {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
}

.event-car-planning .selected-schedule-info .schedule-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.event-car-planning .selected-schedule-info .schedule-info-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.event-car-planning .selected-schedule-info .schedule-info-details {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-link {
    font-size: 0.85rem;
    color: var(--page-theme-primary, #3b82f6);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-link:hover {
    text-decoration: underline;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-copy {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--color-bg-secondary, #f3f4f6);
    color: var(--color-text-primary, #333);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-copy:hover {
    background-color: var(--color-bg-tertiary, #e5e7eb);
}

.event-car-planning .selected-schedule-info .schedule-info-public-url-copy.copied {
    background-color: var(--page-theme-primary, #3b82f6);
    color: white;
}

.event-car-planning .selected-schedule-info .schedule-info-memo {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    font-style: italic;
    margin-top: 0.25rem;
}

.event-car-planning .selected-schedule-info .schedule-info-memo-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.event-car-planning .selected-schedule-info .schedule-info-memo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.event-car-planning .selected-schedule-info .schedule-info-memo-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #666);
    font-weight: 500;
    flex: 1;
}

.event-car-planning .selected-schedule-info .schedule-info-memo-edit-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: var(--page-theme-primary, #3b97ff);
    color: white;
    border: 1px solid var(--page-theme-primary, #3b97ff);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.event-car-planning .selected-schedule-info .schedule-info-memo-edit-btn:hover {
    background-color: var(--page-theme-primary-dark, #2980d6);
    border-color: var(--page-theme-primary-dark, #2980d6);
}

.event-car-planning .selected-schedule-info .schedule-info-memo-content {
    font-size: 0.85rem;
    color: var(--color-text-primary, #333);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.event-car-planning.show {
    display: grid !important;
}

/* 送迎車ページ用のスタイル */
.event-car-planning .event-car-section {
    background-color: var(--color-background, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* フルワイドを確保 */
    display: flex;
    flex-direction: column;
}

.event-car-planning .event-car-section h3 {
    margin: 0 0 1rem 0;
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
}

.event-car-planning .event-car-section h3 #eventCarSummary {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.1rem;
}

.event-car-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* コンテンツを表示するためにvisibleに変更 */
    flex: 1; /* 残りの空間を最大限使用 */
}

/* 送迎車ページ専用：スクロール可能領域の設定 */
.event-car-scrollable-area {
    overflow-y: auto !important; /* スクロールバーを表示 */
    padding-right: 0.5rem;
}

/* 送迎車ページのコントロールコンテナ（横並び） */
.event-car-controls-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap; /* 常に1段で表示 */
}

/* 送迎車ページのアコーディオンスタイル */
.event-car-planning .event-car-section .simple-sort-accordion,
.event-car-planning .event-car-section .simple-filter-accordion {
    flex: 1; /* 等分に配置 */
    min-width: 0; /* 最小幅を0にして縮小を許可 */
    margin-bottom: 0;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    background-color: var(--color-background, #f8f9fa);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-header,
.event-car-planning .event-car-section .simple-filter-accordion .filter-header {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background, #f8f9fa);
    transition: background-color 0.2s ease;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-header:hover,
.event-car-planning .event-car-section .simple-filter-accordion .filter-header:hover {
    background-color: var(--page-theme-primary-light);
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-header.active,
.event-car-planning .event-car-section .simple-filter-accordion .filter-header.active {
    background-color: var(--page-theme-primary);
    color: white;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-label,
.event-car-planning .event-car-section .simple-filter-accordion .filter-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: inherit;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-current,
.event-car-planning .event-car-section .simple-filter-accordion .filter-current {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--page-theme-primary);
}

.event-car-planning .event-car-section .simple-sort-accordion .accordion-icon,
.event-car-planning .event-car-section .simple-filter-accordion .accordion-icon {
    font-size: 0.75rem;
    color: inherit;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-header.active .accordion-icon,
.event-car-planning .event-car-section .simple-filter-accordion .filter-header.active .accordion-icon {
    color: white;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-content,
.event-car-planning .event-car-section .simple-filter-accordion .filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-content.expanded,
.event-car-planning .event-car-section .simple-filter-accordion .filter-content.expanded {
    max-height: 200px !important; /* !importantを追加 */
    padding: 0.75rem !important; /* !importantを追加 */
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-buttons,
.event-car-planning .event-car-section .simple-filter-accordion .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-option,
.event-car-planning .event-car-section .simple-filter-accordion .filter-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.65rem;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-option:hover,
.event-car-planning .event-car-section .simple-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

.event-car-planning .event-car-section .simple-sort-accordion .sort-option.active,
.event-car-planning .event-car-section .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 送迎車ページの並び替えボタン選択時の矢印の色を白系に */
.event-car-planning .event-car-section .simple-sort-accordion .sort-option.active .sort-icon,
.event-car-planning .event-car-section .simple-sort-accordion .sort-option.active span {
    color: white !important;
}

.assignment-section {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%; /* 参加者枠と同じように100%に設定 */
    max-height: calc(var(--vh, 1vh) * 100 - 30px); /* 参加者パネルと同じ最大高さに統一 */
    overflow-y: hidden; /* スクロールを子要素に委譲 */
    overflow-x: hidden;
}

/* スクロールバーのスタイルはassignment-scrollable-areaに移行 */

.content-section {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* assignment-headerは削除（participant-sectionと統一） */

/* 配車可否フィルタコントロール */
.ride-filter-controls {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--color-background, #f8f9fa);
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.ride-filter-controls .filter-header {
    margin-bottom: 0.5rem;
}

.ride-filter-controls .filter-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ride-filter-controls .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ride-filter-controls .filter-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: var(--color-background, #f8f9fa);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ride-filter-controls .filter-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.ride-filter-controls .filter-button.active {
    background-color: var(--page-theme-primary);
    color: #ffffff;
    border-color: var(--page-theme-primary);
}

.ride-filter-controls .filter-button[data-filter="1"] {
    border-color: #c3e6cb;
    color: #155724;
}

.ride-filter-controls .filter-button[data-filter="1"]:hover {
    background-color: #d4edda;
}

.ride-filter-controls .filter-button[data-filter="1"].active {
    background-color: #28a745;
    color: #ffffff;
}

.ride-filter-controls .filter-button[data-filter="4"] {
    border-color: #99d6ff;
    color: #004085;
}

.ride-filter-controls .filter-button[data-filter="4"]:hover {
    background-color: #cce5ff;
}

.ride-filter-controls .filter-button[data-filter="4"].active {
    background-color: #007bff;
    color: #ffffff;
}

.assignment-section h3 .capacity-text {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.3rem;
}

.assignment-section h3 .remaining-seats-text {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.5rem;
}

.assignment-section h3 span {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.1rem;
}

.participant-section {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden; /* スクロールを子要素に委譲 */
    overflow-x: hidden;
}

/* 送迎調整ページ専用：参加者パネルの高さ制限 */
.transport-planning .participant-section {
    max-height: calc(var(--vh, 1vh) * 100 - 30px); /* 最大高さ制限を30pxに変更 */
    padding: 1.0rem;
    box-sizing: border-box; /* paddingを含めた高さ計算 */
    border: none; /* 参加者ページのborderを削除 */
    margin-bottom: 0; /* 参加者ページのmargin-bottomを削除 */
}

/* 送迎調整ページ専用：スクロール可能領域の最小高さ確保 */
.transport-planning .participant-scrollable-area {
    min-height: var(--participant-scrollable-height, 300px); /* 動的な最小高さ */
    gap: 0 !important; /* gapを0にしてmargin-bottomで余白を確保 */
    overflow-y: auto !important; /* スクロールバーを表示 */
}

/* 送迎調整ページ専用：並び替えとフィルタが圧縮されないようにする */
.transport-planning .simple-sort-accordion,
.transport-planning .simple-filter-accordion {
    flex-shrink: 0 !important; /* 圧縮されないようにする */
    min-height: 40px !important; /* 最小高さを確保 */
    margin-bottom: 1rem !important; /* 送迎調整パネルと同じ余白 */
}

/* 送迎調整ページ専用：参加者パネルの並び替えとフィルタ */
.transport-planning .participant-section .simple-sort-accordion,
.transport-planning .participant-section .simple-filter-accordion {
    flex-shrink: 0 !important; /* 圧縮されないようにする */
    min-height: 40px !important; /* 送迎調整パネルと同じ最小高さ */
    margin-bottom: 1rem !important; /* 送迎調整パネルと同じ余白 */
}

/* 送迎調整ページの参加者パネルの地区フィルタボタン（空の地区） */
.transport-planning .participant-section .simple-filter-accordion .filter-button:empty {
    min-width: 2rem;
    min-height: 1.5rem;
}

/* 送迎調整ページ専用：参加者リストが並び替えとフィルタを圧縮しないようにする */
.transport-planning .participant-list {
    flex-shrink: 1 !important; /* 圧縮を許可 */
    min-height: 0 !important; /* 最小高さを0に設定 */
}

/* 送迎調整ページ専用：アコーディオンは初期状態で閉じる */
.transport-planning .simple-sort-accordion .sort-content,
.transport-planning .simple-filter-accordion .filter-content {
    max-height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important; /* 初期状態では高さを0にする */
    overflow: hidden;
}

/* 送迎調整ページ専用：参加者パネルのアコーディオンは初期状態で閉じる */
.transport-planning .participant-section .simple-sort-accordion .sort-content,
.transport-planning .participant-section .simple-filter-accordion .filter-content {
    max-height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important; /* 初期状態では高さを0にする */
    overflow: hidden !important;
}

/* 送迎調整ページ専用：アコーディオンのヘッダーの高さを確保 */
.transport-planning .simple-sort-accordion .sort-header,
.transport-planning .simple-filter-accordion .filter-header {
    padding: 0.5rem;
    min-height: 2.5rem;
}

/* 送迎調整ページ専用：参加者パネルのアコーディオンのヘッダーの高さを確保 */
.transport-planning .participant-section .simple-sort-accordion .sort-header,
.transport-planning .participant-section .simple-filter-accordion .filter-header {
    padding: 0.5rem;
    min-height: 2.5rem;
}

.transport-planning .simple-sort-accordion .sort-content.expanded,
.transport-planning .simple-filter-accordion .filter-content.expanded {
    max-height: 500px !important;
    padding: 0.75rem !important;
}

/* 送迎調整ページ専用：参加者パネルのアコーディオンが開いている時 */
.transport-planning .participant-section .simple-sort-accordion .sort-content.expanded,
.transport-planning .participant-section .simple-filter-accordion .filter-content.expanded {
    max-height: 500px !important;
    padding: 0.75rem !important;
}

/* スクロール可能な領域（並び替え・フィルタ・参加者リストを含む） */
.participant-scrollable-area {
    flex: 1;
    overflow-y: auto; /* 並び替え・フィルタ・参加者リストを含めてスクロール */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.5rem; /* スクロールバーのための余白 */
}

/* スクロールバーのスタイル */
.participant-scrollable-area::-webkit-scrollbar {
    width: 8px;
}

.participant-scrollable-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.participant-scrollable-area::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.participant-scrollable-area::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Firefox用のスクロールバースタイル */
.participant-scrollable-area {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.assignment-section h3,         .participant-section h3 {
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    border-bottom: 2px solid var(--page-theme-primary);
    padding-bottom: 0.5rem;
    line-height: 1.2;
}

/* brタグの高さを制御 */
.assignment-section h3 br,
.participant-section h3 br {
    line-height: 0;
    display: block;
    content: "";
    height: 0;
    margin: 0;
    padding: 0;
}

.participant-section h3 .total-participants {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.3rem;
}

.participant-section h3 .total-participants span {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.1rem;
}

.participant-section h3 .remaining-participants-text {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.5rem;
}

.participant-section h3 #remainingParticipants {
    font-size: 0.6rem !important;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.1rem;
}

/* 参加者パネルの統合表示スタイル（送迎調整パネルと同じスタイル） */
.participant-section h3 #participantSummary {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 300;
    margin-left: 0.1rem;
}

.participant-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* コンテンツを表示するためにvisibleに変更 */
    flex: 1; /* 残りの空間を最大限使用 */
}

.participant-list.drag-over {
    background-color: rgba(52, 152, 219, 0.1);
    border: 2px dashed #3498db;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
}

/* 送迎調整ページの参加者パネル内のドラッグ&ドロップゾーン - 紫系統 */
.transport-planning .participant-section .participant-list.drag-over {
    background-color: var(--page-theme-shadow-light);
    border: 2px dashed var(--page-theme-primary);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
}

.participant-list.drag-over::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(52, 152, 219, 0.05);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

/* 送迎調整ページの参加者パネル内のドラッグ&ドロップゾーンのオーバーレイ - 紫系統 */
.transport-planning .participant-section .participant-list.drag-over::after {
    background-color: var(--page-theme-shadow-light);
}

.participant-item {
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem;
    cursor: move;
    transition: all 0.3s ease;
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.participant-item:hover {
    border-color: var(--page-theme-primary);
    box-shadow: 0 4px 8px var(--color-shadow);
    transform: translateY(-2px);
}

.participant-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
    transition: none;
}

.participant-item.drag-over {
    background-color: rgba(52, 152, 219, 0.1);
    border: 2px dashed #3498db;
    border-radius: 6px;
}

/* 送迎調整ページの参加者パネル内のドラッグオーバー項目 - 紫系統 */
.transport-planning .participant-section .participant-item.drag-over {
    background-color: var(--page-theme-shadow-light);
    border: 2px dashed var(--page-theme-primary);
    border-radius: 6px;
}

.participant-info {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

/* 送迎調整ページ用の参加者情報（横並び） */
.participant-info-assigned {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.participant-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.3;
    flex: 1;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    min-width: 0;
    max-height: calc(0.9rem * 1.3 * 2);
}

.participant-details {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    flex-shrink: 0;
}

.participant-grade {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.participant-member-no {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

/* 並び替え機能のスタイル */
.sort-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 参加者ページの並び替えボタンスタイル */
.sort-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    font-weight: 500;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.sort-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

.sort-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

.sort-button .sort-icon {
    font-size: 0.7rem;
    font-weight: bold;
}

/* フィルタ機能のスタイル */
.filter-controls {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--color-background, #f8f9fa);
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

/* アコーディオンの開閉時の高さ調整 */
.simple-sort-accordion,
.simple-filter-accordion {
    flex-shrink: 0; /* 縮まないようにする */
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    background-color: var(--color-background, #f8f9fa);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.simple-filter-accordion .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    /* border-bottom: 1px solid #e9ecef; 一時的に削除 */
}

.simple-filter-accordion .filter-header:hover {
    background-color: #e9ecef;
}

.simple-filter-accordion .filter-header.active {
    background-color: var(--page-theme-primary-light);
    /* border-bottom-color: #3498db; 一時的に削除 */
}

.simple-filter-accordion .filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
}

.simple-filter-accordion .filter-current {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
}

.simple-filter-accordion .accordion-icon {
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.simple-filter-accordion .filter-header.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--page-theme-primary);
}

.simple-filter-accordion .filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    padding: 0; /* デフォルト状態でのpaddingを0に設定 */
}

.simple-filter-accordion .filter-content.expanded {
    max-height: 200px;
    padding: 0.75rem;
}

.simple-filter-accordion .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.simple-filter-accordion .filter-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.65rem;
    font-weight: 500;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.simple-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

.simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 送迎調整パネルのフィルタボタンスタイル */
.assignment-section .simple-filter-accordion .filter-button {
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    color: #495057;
    transition: all 0.2s ease;
    opacity: 1;
    font-size: 0.65rem;
}

.assignment-section .simple-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    opacity: 1;
}

.assignment-section .simple-filter-accordion .filter-button.active {
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary);
    color: white;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 2px 4px var(--page-theme-shadow);
}

.assignment-section .simple-filter-accordion .filter-button:not(.active) {
    opacity: 1;
}

.assignment-section .simple-filter-accordion .filter-button:not(.active):hover {
    opacity: 1;
}

/* 送迎調整パネルの地区フィルタボタン（空の地区） */
.assignment-section .simple-filter-accordion .filter-button:empty {
    min-width: 2rem;
    min-height: 1.5rem;
}

/* 送迎調整パネルの並び替えボタンスタイル */
.assignment-section .simple-sort-accordion .sort-option {
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    color: #495057;
    transition: all 0.2s ease;
    opacity: 1;
    font-size: 0.65rem;
}

.assignment-section .simple-sort-accordion .sort-option:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    opacity: 1;
}

.assignment-section .simple-sort-accordion .sort-option.active {
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary);
    color: white;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 2px 4px var(--page-theme-shadow);
}

.assignment-section .simple-sort-accordion .sort-option:not(.active) {
    opacity: 0.6;
}

.assignment-section .simple-sort-accordion .sort-option:not(.active):hover {
    opacity: 0.8;
}


/* シンプル並び替えアコーディオンのスタイル */
.simple-sort-accordion {
    margin-bottom: 1rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    background-color: var(--color-background, #f8f9fa);
    overflow: hidden;
    flex-shrink: 0; /* スクロール時に縮まないようにする */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 統一された影を追加 */
}

.simple-sort-accordion .sort-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    /* border-bottom: 1px solid #e9ecef; 完全に削除 */
}

.simple-sort-accordion .sort-header:hover {
    background-color: #e9ecef;
}

.simple-sort-accordion .sort-header.active {
    background-color: var(--page-theme-primary-light);
    /* border-bottom-color: #3498db; 完全に削除 */
}

.simple-sort-accordion .sort-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
}

.simple-sort-accordion .sort-current {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
}

.simple-sort-accordion .accordion-icon {
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.simple-sort-accordion .sort-header.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--page-theme-primary);
}

.simple-sort-accordion .sort-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    padding: 0; /* デフォルト状態でのpaddingを0に設定 */
}

.simple-sort-accordion .sort-content.expanded {
    max-height: 200px;
    padding: 0.75rem;
}

.simple-sort-accordion .sort-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.simple-sort-accordion .sort-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.65rem;
    font-weight: 500;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.simple-sort-accordion .sort-option:hover {
    border-color: #3498db;
    background-color: rgba(52, 152, 219, 0.05);
    transform: translateY(-1px);
}

.simple-sort-accordion .sort-option.active {
    border-color: #3498db;
    background-color: #3498db;
    color: white;
}

/* 送迎調整ページの参加者パネル内の並び替えホバー時 - 紫系統 */
.transport-planning .participant-section .simple-sort-accordion .sort-option:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

/* 送迎調整ページの参加者パネル内の並び替え選択中の項目 - 紫系統 */
.transport-planning .participant-section .simple-sort-accordion .sort-option.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 重複する汎用フィルタスタイルを削除（アコーディオン専用スタイルを使用） */

/* 汎用フィルタボタンスタイルは削除（アコーディオン専用スタイルを使用） */


/* 汎用sort-buttonスタイルを削除（アコーディオン専用スタイルを使用） */

/* 送迎調整パネル用のスクロール可能領域 */
.assignment-scrollable-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-right: 0.5rem;
}

/* 送迎調整パネル用のスクロールバーのスタイル */
.assignment-scrollable-area::-webkit-scrollbar {
    width: 8px;
}

.assignment-scrollable-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.assignment-scrollable-area::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.assignment-scrollable-area::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Firefox用のスクロールバースタイル */
.assignment-scrollable-area {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.reset-button {
    display: none; /* 非表示（復活時はこの行を削除） */
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.reset-button:hover {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
    color: #ef4444;
}

.reset-button .reset-icon {
    font-size: 0.9rem;
}

.assignment-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.assignment-card {
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem;
    min-height: 60px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* 送迎調整ページの各送迎車カードの鍵アイコン */
.assignment-card .assignment-card-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    z-index: 10;
}

.assignment-card .assignment-card-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #a65bff);
    color: var(--page-theme-primary, #a65bff);
}

/* 送迎調整ページの各送迎車カードの鍵アイコン（未確定状態では非表示） */
.assignment-section:not(.readonly) .assignment-card .assignment-card-lock {
    display: none;
}

.assignment-card.has-participants {
    border-color: var(--page-theme-primary);
    border-style: solid;
    background-color: var(--page-theme-primary-light);
}

.assignment-card.drag-over {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: scale(1.02);
    box-shadow: 0 4px 12px var(--page-theme-shadow);
}

.car-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.car-title {
    font-weight: 600;
    color: var(--color-text-primary);
}

.car-capacity-info {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.ride-available-info {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.05rem 0.05rem;
    border-radius: 4px;
    margin-left: 0.1rem;
}

.ride-available {
    background-color: var(--page-theme-primary-light, #e6d1ff);
    color: var(--page-theme-primary, #a65bff);
    border: 1px solid var(--page-theme-primary-light, #e6d1ff);
}

.ride-unavailable {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.ride-uncertain {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.ride-priority {
    background-color: var(--page-theme-primary, #a65bff);
    color: white;
    border: 1px solid var(--page-theme-primary, #a65bff);
    font-weight: 600;
}

.ride-unknown {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.participants-container {
    position: relative; /* スタッキングコンテキストを作成 */
    z-index: 0; /* 低いz-indexを設定 */
}

/* 送迎車のメモ表示（インライン） */
.car-memo-inline {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--color-text-secondary);
    padding: 0.15rem 0.4rem;
    margin-left: 0.5rem;
    background-color: var(--color-background-secondary);
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* SVGスプライトはHTMLで直接追加するため、::beforeは使用しない */

/* 参加者のメモ表示（インライン） */
.participant-memo-inline {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--color-text-secondary);
    padding: 0.15rem 0.4rem;
    margin-left: 0.5rem;
    background-color: var(--color-background-secondary);
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* SVGスプライトはHTMLで直接追加するため、::beforeは使用しない */

/* 送迎車のタイトルラッパー */
.car-title-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.25rem;
    min-width: 0;
}

.car-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* 参加者名の行（メモを含む） */
.participant-name-row {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.participant-assigned {
    background-color: var(--page-theme-primary-light);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease;
    cursor: grab;
    transition: all 0.2s ease;
    position: relative; /* スタッキングコンテキストを作成 */
}

.participant-assigned:hover {
    background-color: var(--page-theme-primary-light);
    border-color: var(--page-theme-primary);
    transform: scale(1.02);
    box-shadow: 0 2px 4px var(--color-shadow);
}

.participant-assigned:active {
    cursor: grabbing;
}

.participant-assigned.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
    transition: none;
}

.participant-info-assigned {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.participant-name-assigned {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.3;
    flex-shrink: 0;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    min-width: 0;
    max-height: calc(0.9rem * 1.3 * 2);
}

.participant-details-assigned {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    margin-left: auto;
}

.participant-grade-assigned {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    background-color: var(--color-background-secondary);
    padding: 0.1rem 0.1rem;
    border-radius: 3px;
}

.participant-member-no-assigned {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    background-color: var(--color-background-secondary);
    padding: 0.1rem 0.1rem;
    border-radius: 3px;
}

.participant-assigned .remove-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 1; /* ドラッグ中の要素より低く設定 */
    position: relative;
}

.participant-assigned .remove-btn:hover {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    transform: scale(1.1);
}

.uncertain-badge {
    background-color: #f59e0b;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.1rem;
    border-radius: 3px;
    font-weight: 500;
    margin-left: 0.3rem;
}

/* 送迎調整ページ内の「未定」バッジ - 紫系統 */
.transport-planning .uncertain-badge,
.transport-planning .participant-assigned .uncertain-badge,
.transport-planning .participant-item .uncertain-badge {
    background-color: var(--page-theme-primary);
    color: white;
}

.drop-zone {
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: 0.5rem;
    font-size: 0.9rem;
}

/* ライトモード用：操作パネル（他のパネルと同様にvar(--color-white)を使用） */
.control-panel {
    background-color: var(--color-white);
    color: var(--color-text-primary);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
}

.control-panel h3,
.control-panel .control-buttons {
    color: var(--color-text-primary);
}

.control-panel h3 {
    margin-bottom: 1.5rem;
}

/* ボタンの文字色は各ボタンクラス（.btn-success、.btn-primaryなど）で定義されているため、ここでは指定しない */

/* 参加者ページ、送迎車ページ、送迎調整ページの操作パネル（詳細度を上げる） */
.participant-planning .control-panel,
.event-car-planning .control-panel,
.transport-planning .control-panel,
.participant-page .control-panel,
.event-car-page .control-panel,
.transport-planning-page .control-panel {
    background-color: var(--color-white);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.participant-planning .control-panel h3,
.event-car-planning .control-panel h3,
.transport-planning .control-panel h3,
.participant-page .control-panel h3,
.event-car-page .control-panel h3,
.transport-planning-page .control-panel h3,
.participant-planning .control-panel .control-buttons,
.event-car-planning .control-panel .control-buttons,
.transport-planning .control-panel .control-buttons,
.participant-page .control-panel .control-buttons,
.event-car-page .control-panel .control-buttons,
.transport-planning-page .control-panel .control-buttons {
    color: var(--color-text-primary);
}

/* ボタンの文字色は各ボタンクラス（.btn-success、.btn-primaryなど）で定義されているため、ここでは指定しない */

.hidden {
    display: none;
}

.control-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    padding: 0.75rem 1.2rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 0.9rem;
    min-width: 100px;
}

.btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-2px);
}

/* メンバーページのメンバー追加ボタン - オレンジ系 */
.member-page .add-button,
body:has(.member-planning) .add-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.member-page .add-button:hover,
body:has(.member-planning) .add-button:hover {
    background-color: var(--page-theme-primary-dark);
}

/* メンバーページのモーダル内のボタン - オレンジ系 */
.member-page .modal-footer .btn-primary,
body:has(.member-planning) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
}

.member-page .modal-footer .btn-primary:hover,
body:has(.member-planning) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

/* メンバーページのメンバー詳細モーダル内の削除ボタン - 薄いオレンジ */
.member-page .modal-footer .btn-danger,
body:has(.member-planning) .modal-footer .btn-danger {
    background-color: white;
    color: var(--page-theme-primary-text);
    border: 1px solid var(--page-theme-primary);
}

.member-page .modal-footer .btn-danger:hover,
body:has(.member-planning) .modal-footer .btn-danger:hover {
    background-color: var(--page-theme-primary);
    color: white;
}

/* 編集者ページの編集者追加ボタン - オレンジ系 */
.account-page .add-button,
body:has(.account-page) .add-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.account-page .add-button:hover,
body:has(.account-page) .add-button:hover {
    background-color: var(--page-theme-primary-dark);
}

/* 編集者ページの追加ボタン無効化時 - 色を薄くする */
.account-page .add-button:disabled,
body:has(.account-page) .add-button:disabled,
.account-page .add-button.disabled,
body:has(.account-page) .add-button.disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.account-page .add-button:disabled:hover,
body:has(.account-page) .add-button:disabled:hover,
.account-page .add-button.disabled:hover,
body:has(.account-page) .add-button.disabled:hover {
    background-color: #cccccc;
}

/* 編集者ページのモーダル内のボタン - 黄色系 */
.account-page .modal-footer .btn-primary,
body:has(.account-page) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
}

.account-page .modal-footer .btn-primary:hover,
body:has(.account-page) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

/* 編集者ページの編集者詳細モーダル内の削除ボタン - 薄いオレンジ */
.account-page .modal-footer .btn-danger,
body:has(.account-page) .modal-footer .btn-danger {
    background-color: white;
    color: var(--page-theme-primary-text);
    border: 1px solid var(--page-theme-primary);
}

.account-page .modal-footer .btn-danger:hover,
body:has(.account-page) .modal-footer .btn-danger:hover {
    background-color: var(--page-theme-primary);
    color: white;
}

/* 編集者ページのボタン - 黄色系テーマ色 */
.account-page .btn-primary,
body:has(.account-page) .btn-primary {
    background-color: var(--page-theme-primary, #ffbf00);
    color: white;
}

.account-page .btn-primary:hover,
body:has(.account-page) .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #ebb000);
    transform: translateY(-2px);
}

/* 編集者ページのコピーボタン - 黄色系テーマ色 */
.account-page .copy-url-button,
body:has(.account-page) .copy-url-button {
    background-color: var(--page-theme-primary, #ffbf00);
    color: white;
}

.account-page .copy-url-button:hover,
body:has(.account-page) .copy-url-button:hover {
    background-color: var(--page-theme-primary-dark, #ebb000);
    transform: translateY(-1px);
}

.account-page .copy-url-button:active,
body:has(.account-page) .copy-url-button:active {
    transform: translateY(0);
}

.account-page .copy-url-button.copied,
body:has(.account-page) .copy-url-button.copied {
    background-color: var(--page-theme-primary-dark, #ebb000);
}

/* 編集者ページで表示されるアカウント登録完了モーダルのスタイル - 黄色系 */
.account-page #accountNotificationModal .modal-title .icon,
body:has(.account-page) #accountNotificationModal .modal-title .icon {
    color: var(--page-theme-primary, #ffbf00) !important;
    fill: var(--page-theme-primary, #ffbf00) !important;
}

.account-page #accountNotificationModal .modal-footer .btn-primary,
body:has(.account-page) #accountNotificationModal .modal-footer .btn-primary {
    background-color: var(--page-theme-primary, #ffbf00) !important;
    color: white !important;
    border: none !important;
}

.account-page #accountNotificationModal .modal-footer .btn-primary:hover,
body:has(.account-page) #accountNotificationModal .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #ebb000) !important;
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(235, 176, 0, 0.3)) !important;
}

/* 車ページの車追加ボタン - オレンジ系 */
.car-page .add-button,
body:has(.car-page) .add-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.car-page .add-button:hover,
body:has(.car-page) .add-button:hover {
    background-color: var(--page-theme-primary-dark);
}

/* 車ページのモーダル内のボタン - 青系 */
.car-page .modal-footer .btn-primary,
body:has(.car-page) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
}

.car-page .modal-footer .btn-primary:hover,
body:has(.car-page) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

/* 車ページのモーダル内の削除ボタン - 薄いオレンジ */
.car-page .modal-footer .btn-danger,
body:has(.car-page) .modal-footer .btn-danger {
    background-color: white;
    color: var(--page-theme-primary-text);
    border: 1px solid var(--page-theme-primary);
}

.car-page .modal-footer .btn-danger:hover,
body:has(.car-page) .modal-footer .btn-danger:hover {
    background-color: var(--page-theme-primary);
    color: white;
}

/* 車ページとメンバページのモーダル内のフォームラベル - フォントサイズを統一 */
.car-page .modal-body .form-label,
body:has(.car-page) .modal-body .form-label,
.member-page .modal-body .form-label,
body:has(.member-page) .modal-body .form-label,
.account-page .modal-body .form-label,
body:has(.account-page) .modal-body .form-label,
.event-page .modal-body .form-label,
body:has(.event-page) .modal-body .form-label {
    font-size: 1rem !important;
}

/* 予定ページのボタンスタイル */
.event-page .add-button,
body:has(.event-page) .add-button {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.event-page .add-button:hover,
body:has(.event-page) .add-button:hover {
    background-color: var(--page-theme-primary-dark);
}

.event-page .add-button:disabled,
body:has(.event-page) .add-button:disabled,
.event-page .add-button.disabled,
body:has(.event-page) .add-button.disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.event-page .add-button:disabled:hover,
body:has(.event-page) .add-button:disabled:hover,
.event-page .add-button.disabled:hover,
body:has(.event-page) .add-button.disabled:hover {
    background-color: #cccccc;
}

/* 予定ページのモーダル内のボタン - 緑系 */
.event-page .modal-footer .btn-primary,
body:has(.event-page) .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
}

.event-page .modal-footer .btn-primary:hover,
body:has(.event-page) .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

/* 予定ページのモーダル内の削除ボタン */
.event-page .modal-footer .btn-danger,
body:has(.event-page) .modal-footer .btn-danger {
    background-color: white;
    color: var(--page-theme-primary-text);
    border: 1px solid var(--page-theme-primary);
}

.event-page .modal-footer .btn-danger:hover,
body:has(.event-page) .modal-footer .btn-danger:hover {
    background-color: var(--page-theme-primary);
    color: white;
}

/* ログアウトモーダルのフッタースタイル（その他のページと同じ見た目に統一） */
#logoutModal .modal-footer {
    padding: 0 1.5rem 1.5rem !important;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid var(--color-border, #e5e7eb) !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
}

/* 参加者ページ、送迎車ページ、送迎調整ページのログアウトモーダルのフッターも統一 */
.participant-page #logoutModal .modal-footer,
body:has(.participant-planning) #logoutModal .modal-footer,
.event-car-page #logoutModal .modal-footer,
.transport-planning-page #logoutModal .modal-footer,
body:has(.transport-planning) #logoutModal .modal-footer {
    padding: 0 1.5rem 1.5rem !important;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid var(--color-border, #e5e7eb) !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
}

/* ログアウトモーダルのボタンスタイル（その他のページと同じ見た目に統一） */
#logoutModal .modal-footer .btn {
    flex: none;
    min-width: auto;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    text-align: center;
}

@media (max-width: 480px) {
    #logoutModal .modal-footer .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
}

/* 各ページのログアウトモーダルのボタン色（ページのテーマカラーに合わせる） */
/* メンバページ（ピンク系） */
.member-page #logoutModal .btn-primary,
body:has(.member-page) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #f760cc);
    color: white;
    border: none;
}

.member-page #logoutModal .btn-primary:hover,
body:has(.member-page) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #f53bc0);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(247, 59, 192, 0.3));
}

/* 車ページ（青系） */
.car-page #logoutModal .btn-primary,
body:has(.car-page) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #27c9ff);
    color: white;
    border: none;
}

.car-page #logoutModal .btn-primary:hover,
body:has(.car-page) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #00b0eb);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(0, 176, 235, 0.3));
}

/* 編集者ページ（黄色系） */
.account-page #logoutModal .btn-primary,
body:has(.account-page) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #ffbf00);
    color: white;
    border: none;
}

.account-page #logoutModal .btn-primary:hover,
body:has(.account-page) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #ebb000);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(235, 176, 0, 0.3));
}

/* 予定ページ（緑系） */
.event-page #logoutModal .btn-primary,
body:has(.event-page) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #2ecdb4);
    color: white;
    border: none;
}

.event-page #logoutModal .btn-primary:hover,
body:has(.event-page) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #2bbda6);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(46, 205, 180, 0.3));
}

/* 参加者ページ（赤系） */
.participant-page #logoutModal .btn-primary,
body:has(.participant-planning) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #ed6666);
    color: white;
    border: none;
}

.participant-page #logoutModal .btn-primary:hover,
body:has(.participant-planning) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #e94343);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(231, 76, 60, 0.3));
}

/* 送迎調整ページ（紫系） */
.transport-planning-page #logoutModal .btn-primary,
body:has(.transport-planning) #logoutModal .btn-primary {
    background-color: var(--page-theme-primary, #a65bff);
    color: white;
    border: none;
}

.transport-planning-page #logoutModal .btn-primary:hover,
body:has(.transport-planning) #logoutModal .btn-primary:hover {
    background-color: var(--page-theme-primary-dark, #9134ff);
    box-shadow: 0 4px 12px var(--page-theme-shadow, rgba(155, 89, 182, 0.3));
}

.btn-secondary {
    background-color: var(--color-border);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background-color: var(--color-text-secondary);
    color: white;
}

/* 車ページの送迎回数設定・確認ボタン - 薄いグレー（テーマカラー使用） */
#rideCountSettingsButton {
    background-color: var(--color-border-light, #f0f0f0) !important;
    color: var(--color-text-primary, #333) !important;
    border: 1px solid var(--color-border, #e9ecef) !important;
}

#rideCountSettingsButton:hover {
    background-color: var(--color-hover, #f8f9fa) !important;
    color: var(--color-text-primary, #333) !important;
}

/* 送迎回数設定・確認ボタンの集計開始日表示 - 水色系 */
.ride-count-start-date-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ride-count-start-date-label {
    color: var(--color-text-primary, #374151);
}

/* 集計開始日表示 - 車ページのテーマカラー（水色系） */
.car-page .ride-count-start-date-value,
body:has(.car-page) .ride-count-start-date-value {
    color: var(--page-theme-primary, #27c9ff); /* ライトモード: 車ページのテーマカラー */
    font-weight: 500;
}

/* ダークモード時の集計開始日表示 - 車ページのテーマカラー */
@media (prefers-color-scheme: dark) {
    .car-page .ride-count-start-date-value,
    body:has(.car-page) .ride-count-start-date-value {
        color: var(--color-menu-car, #9de6ff); /* ダークモード: 車ページのテーマカラー */
    }
}

/* 参加回数設定・確認ボタンの集計開始日表示 - ピンク系 */
.participation-count-start-date-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.participation-count-start-date-label {
    color: var(--color-text-primary, #374151);
}

/* 集計開始日表示 - メンバーページのテーマカラー（ピンク系） */
.member-page .participation-count-start-date-value,
body:has(.member-page) .participation-count-start-date-value {
    color: var(--page-theme-primary, #f760cc); /* ライトモード: メンバーページのテーマカラー */
    font-weight: 500;
}

/* ダークモード時の集計開始日表示 - メンバーページのテーマカラー */
@media (prefers-color-scheme: dark) {
    .member-page .participation-count-start-date-value,
    body:has(.member-page) .participation-count-start-date-value {
        color: var(--page-theme-primary, #f760cc); /* ダークモード: メンバーページのテーマカラー */
    }
}

/* 送迎回数設定・確認モーダルの保存ボタン - 車ページのテーマカラー（水色系） */
.car-page #saveRideCountStartDateButton,
body:has(.car-page) #saveRideCountStartDateButton {
    background-color: var(--page-theme-primary, #27c9ff) !important;
    color: white !important;
    border: 1px solid var(--page-theme-primary, #27c9ff) !important;
}

.car-page #saveRideCountStartDateButton:hover,
body:has(.car-page) #saveRideCountStartDateButton:hover {
    background-color: var(--page-theme-primary-dark, #00b0eb) !important;
    border-color: var(--page-theme-primary-dark, #00b0eb) !important;
}

/* ダークモード時の保存ボタン - 車ページのテーマカラー */
@media (prefers-color-scheme: dark) {
    .car-page #saveRideCountStartDateButton,
    body:has(.car-page) #saveRideCountStartDateButton {
        background-color: var(--color-menu-car, #9de6ff) !important;
        border-color: var(--color-menu-car, #9de6ff) !important;
    }
    
    .car-page #saveRideCountStartDateButton:hover,
    body:has(.car-page) #saveRideCountStartDateButton:hover {
        background-color: var(--page-theme-primary, #27c9ff) !important;
        border-color: var(--page-theme-primary, #27c9ff) !important;
    }
}

/* 参加回数設定・確認モーダルの保存ボタン - メンバーページのテーマカラー（ピンク系） */
.member-page #saveParticipationCountStartDateButton,
body:has(.member-page) #saveParticipationCountStartDateButton {
    background-color: var(--page-theme-primary, #f760cc) !important;
    color: white !important;
    border: 1px solid var(--page-theme-primary, #f760cc) !important;
}

.member-page #saveParticipationCountStartDateButton:hover,
body:has(.member-page) #saveParticipationCountStartDateButton:hover {
    background-color: var(--page-theme-primary-dark, #f53bc0) !important;
    border-color: var(--page-theme-primary-dark, #f53bc0) !important;
}

/* ダークモード時の保存ボタン - メンバーページのテーマカラー */
@media (prefers-color-scheme: dark) {
    .member-page #saveParticipationCountStartDateButton,
    body:has(.member-page) #saveParticipationCountStartDateButton {
        background-color: var(--page-theme-primary, #f760cc) !important;
        border-color: var(--page-theme-primary, #f760cc) !important;
    }
    
    .member-page #saveParticipationCountStartDateButton:hover,
    body:has(.member-page) #saveParticipationCountStartDateButton:hover {
        background-color: var(--page-theme-primary-dark, #f53bc0) !important;
        border-color: var(--page-theme-primary-dark, #f53bc0) !important;
    }
}

.btn-success {
    background-color: #10b981;
    color: white;
}

.btn-success:hover {
    background-color: #059669;
    transform: translateY(-2px);
}

/* 送迎調整ページの確定ボタン - 紫系統の濃い色に変更 */
.transport-planning-page .btn-success,
body:has(.transport-planning) .btn-success {
    background-color: var(--page-theme-primary-dark);
    color: white;
}

.transport-planning-page .btn-success:hover,
body:has(.transport-planning) .btn-success:hover {
    background-color: var(--page-theme-primary);
    transform: translateY(-2px);
}

.transport-planning-page .btn-success:disabled,
body:has(.transport-planning) .btn-success:disabled {
    background-color: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

/* 参加者ページの確定ボタン - 赤系テーマ色に変更 */
.participant-page .btn-success,
body.participant-page .btn-success {
    background-color: var(--page-theme-primary);
    color: white;
}

.participant-page .btn-success:hover,
body.participant-page .btn-success:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-2px);
}

/* 参加者ページの確定ボタン無効化状態 */
.participant-page .btn-success:disabled,
body.participant-page .btn-success:disabled {
    background-color: var(--page-theme-primary-light);
    color: var(--page-theme-primary-text);
    opacity: 0.6;
    cursor: not-allowed;
}

/* 送迎車ページの確定ボタン - 青系テーマ色に変更 */
.event-car-page .btn-success,
body:has(.event-car-page) .btn-success {
    background-color: var(--page-theme-primary);
    color: white;
}

.event-car-page .btn-success:hover,
body:has(.event-car-page) .btn-success:hover {
    background-color: var(--page-theme-primary-dark);
    transform: translateY(-2px);
}

/* 送迎車ページの確定ボタン無効化状態 */
.event-car-page .btn-success:disabled,
body:has(.event-car-page) .btn-success:disabled {
    background-color: var(--color-border-light, #bdc3c7) !important;
    color: var(--color-text-secondary, #7f8c8d) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.memo-section {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.memo-textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.memo-textarea:focus {
    outline: none;
    border-color: var(--page-theme-primary);
}

.status-info {
    background-color: var(--color-background);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--page-theme-primary);
}

.status-info h4 {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary);
}

.status-info p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   5. BUTTON DISABLED STYLES
   ======================================== */
/* ボタン無効化スタイル */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #cccccc !important;
    color: #666666 !important;
    border-color: #cccccc !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: #cccccc !important;
}

/* 参加者ページのボタン無効化スタイル（より視覚的に分かりやすく） */
.btn-warning:disabled {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

.btn-success:disabled {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

/* 確定済み状態のボタンコンテナ */
.control-buttons.confirmed {
    position: relative;
}

.control-buttons.confirmed::before {
    content: "";
    display: none;
}

/* 確定済み状態のボタン */
.btn.confirmed-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    position: relative;
}

/* 確定済み状態のボタンの上に鍵アイコンを表示（送迎調整ページのみ） */
.transport-planning-page .btn.confirmed-disabled .btn-icon-lock,
body:has(.transport-planning) .btn.confirmed-disabled .btn-icon-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
}

.transport-planning-page .btn.confirmed-disabled .btn-icon-lock svg,
body:has(.transport-planning) .btn.confirmed-disabled .btn-icon-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #a65bff);
    color: var(--page-theme-primary, #a65bff);
}

/* 未確定状態では鍵アイコンを非表示 */
.transport-planning-page .btn:not(.confirmed-disabled) .btn-icon-lock,
body:has(.transport-planning) .btn:not(.confirmed-disabled) .btn-icon-lock {
    display: none;
}

/* 参加者ページの確定状態のボタンにposition: relativeを設定（鍵アイコンの配置用） */
.participant-page .btn.btn-success:disabled,
body:has(.participant-planning) .btn.btn-success:disabled {
    position: relative;
}

/* 参加者ページの確定状態のボタンの上に鍵アイコンを表示 */
.participant-page .btn.btn-success:disabled .btn-icon-lock,
body:has(.participant-planning) .btn.btn-success:disabled .btn-icon-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
}

.participant-page .btn.btn-success:disabled .btn-icon-lock svg,
body:has(.participant-planning) .btn.btn-success:disabled .btn-icon-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #ed6666);
    color: var(--page-theme-primary, #ed6666);
}

/* 参加者ページの未確定状態では鍵アイコンを非表示 */
.participant-page .btn.btn-success:not(:disabled) .btn-icon-lock,
body:has(.participant-planning) .btn.btn-success:not(:disabled) .btn-icon-lock {
    display: none;
}

/* 送迎車ページの確定状態のボタンにposition: relativeを設定（鍵アイコンの配置用） */
.event-car-page .btn.btn-success:disabled,
body:has(.event-car-planning) .btn.btn-success:disabled {
    position: relative;
}

/* 送迎車ページの確定状態のボタンの上に鍵アイコンを表示 */
.event-car-page .btn.btn-success:disabled .btn-icon-lock,
body:has(.event-car-planning) .btn.btn-success:disabled .btn-icon-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
}

.event-car-page .btn.btn-success:disabled .btn-icon-lock svg,
body:has(.event-car-planning) .btn.btn-success:disabled .btn-icon-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #1482ff);
    color: var(--page-theme-primary, #1482ff);
}

/* 送迎車ページの未確定状態では鍵アイコンを非表示 */
.event-car-page .btn.btn-success:not(:disabled) .btn-icon-lock,
body:has(.event-car-planning) .btn.btn-success:not(:disabled) .btn-icon-lock {
    display: none;
}

/* 元々の鍵の絵文字は不要（SVGアイコンを使用） */
.btn.confirmed-disabled::after {
    content: none;
    display: none;
}

/* ========================================
   5. PARTICIPATION CONTROLS STYLES
   ======================================== */
/* 参加状況選択ボタンのスタイル */
.participation-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.participation-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: var(--color-white, #ffffff);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
    font-size: 0.8rem;
}

.participation-btn:hover {
    border-color: var(--page-theme-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.participation-btn.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    color: var(--page-theme-primary-text);
    font-weight: bold;
}

.participation-icon {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.participation-text {
    font-size: 0.7rem;
    line-height: 1;
}

/* 参加状況別の色分け */
.participation-btn[data-status="1"].active {
    border-color: #4caf50;
    background-color: #e8f5e8;
    color: #2e7d32;
}

.participation-btn[data-status="2"].active {
    border-color: #f44336;
    background-color: #ffebee;
    color: #c62828;
}

.participation-btn[data-status="3"].active {
    border-color: #ff9800;
    background-color: #fff3e0;
    color: #ef6c00;
}

.participation-btn[data-status="0"].active {
    border-color: #9e9e9e;
    background-color: #f5f5f5;
    color: #616161;
}

/* 参加者アイテムのレイアウト調整 */
.participant-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background-color: var(--color-white, #ffffff);
}

/* 参加者ページ専用のレイアウト（2段構成） */
#participantListContent .participant-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background-color: var(--color-white, #ffffff);
    gap: 0.75rem;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    position: relative; /* 鍵アイコンの配置用 */
}

#participantListContent .participant-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
}

#participantListContent .participant-name-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
}

#participantListContent .participant-name {
    font-weight: bold !important;
    font-size: 1rem !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    display: block !important;
    line-height: 1.2 !important;
}

#participantListContent .memo-edit-btn {
    background: none !important;
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#participantListContent .memo-edit-btn:hover {
    transform: scale(1.2) !important;
}

#participantListContent .memo-edit-btn:active {
    transform: scale(1.1) !important;
}

#participantListContent .memo-icon {
    display: inline-block !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* ライトモード：参加者ページの鉛筆マークを薄いグレーに */
#participantListContent .memo-edit-btn,
#participantListContent .memo-edit-btn .memo-icon,
#participantListContent .memo-edit-btn .memo-icon svg,
#participantListContent .memo-edit-btn .memo-icon .icon {
    color: #9ca3af !important;
    fill: #9ca3af !important;
}

#participantListContent .memo-edit-btn:hover,
#participantListContent .memo-edit-btn:hover .memo-icon,
#participantListContent .memo-edit-btn:hover .memo-icon svg,
#participantListContent .memo-edit-btn:hover .memo-icon .icon {
    color: #6b7280 !important;
    fill: #6b7280 !important;
}

/* 参加者ページの確定状態：鉛筆マークを「参加」「未定」の文字と同じグレーにする */
.participant-planning .participant-section.readonly .memo-edit-btn .memo-icon,
.participant-planning .participant-section.readonly .memo-edit-btn .memo-icon svg,
.participant-planning .participant-section.readonly .memo-edit-btn .memo-icon .icon {
    color: #999;
    fill: #999;
}

#participantListContent .participant-details {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
    color: #666 !important;
}

/* ライトモード用：参加者ページの学年・地区 */
#participantListContent .participant-grade,
#participantListContent .participant-member-no {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    text-align: left !important;
    display: inline-block !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

#participantListContent .participation-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

/* ライトモード用：参加者ページの出欠選択ボタンのスタイル調整 */
#participantListContent .participation-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.4rem 0.6rem !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 50px !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
    max-width: 80px !important;
}

#participantListContent .participation-btn:hover {
    border-color: var(--page-theme-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#participantListContent .participation-btn.active {
    border-color: var(--page-theme-primary) !important;
    background-color: var(--page-theme-primary) !important;
    color: white !important;
    font-weight: bold !important;
}

#participantListContent .participation-icon {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
    line-height: 1 !important;
}

#participantListContent .participation-text {
    font-size: 0.65rem !important;
    line-height: 1 !important;
}

/* PODページ用のスタイル（参加者ページと同じレイアウト） */
/* PODページではparticipantListContentというIDを使用しているため、同じセレクタを使用 */
#participantListContent .pod-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.4rem 0.6rem !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 50px !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
    max-width: 80px !important;
}

#participantListContent .pod-btn:hover {
    border-color: var(--page-theme-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#participantListContent .pod-btn.active {
    border-color: var(--page-theme-primary) !important;
    background-color: var(--page-theme-primary) !important;
    color: white !important;
    font-weight: bold !important;
}

#participantListContent .pod-btn .participation-icon {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
    line-height: 1 !important;
}

#participantListContent .pod-btn .participation-text {
    font-size: 0.65rem !important;
    line-height: 1 !important;
}

/* PODページの確定ボタンを赤系に変更（テーマカラー使用） */
#podControlPanel .btn-success {
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary-dark);
    color: white;
}

#podControlPanel .btn-success:hover {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

#podControlPanel .btn-success:active {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

/* PODページの確定確認モーダル内の確定ボタンも赤系に変更（テーマカラー使用） */
body:has(.participant-planning) #participantConfirmationModal .btn-success,
body:has(#podControlPanel) #participantConfirmationModal .btn-success {
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary-dark);
    color: white;
}

body:has(.participant-planning) #participantConfirmationModal .btn-success:hover,
body:has(#podControlPanel) #participantConfirmationModal .btn-success:hover {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

/* POMページ用のスタイル */
.pom-page .period-buttons {
    display: flex;
    gap: 0.75rem;
    margin: 1.5rem 0;
    flex-wrap: wrap; /* はみ出る場合は改行 */
    justify-content: flex-start; /* 左揃え */
}

.pom-page .period-buttons .btn {
    flex: 0 0 auto; /* 自動サイズ、縮小・拡大なし */
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary-dark);
    color: white;
}

.pom-page .period-buttons .btn:hover {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

.pom-page .selected-period-info {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: var(--color-background, #f8fafc);
    border-radius: 6px;
    border: 1px solid var(--color-border, #e5e7eb);
}

.pom-page .selected-period-info p {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.pom-page .grade-filter-container {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

/* POMページの期間選択モーダルのサイズ調整 */
#periodSelectionModal.modal.active,
#periodSelectionModal.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#periodSelectionModal .modal-content {
    max-height: 60vh;
    max-width: 500px;
    width: auto;
    min-width: 300px;
    height: auto; /* コンテンツに応じた高さ */
    display: flex;
    flex-direction: column;
    margin: auto; /* 中央配置 */
}

#periodSelectionModal .modal-body {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    flex: 0 1 auto; /* コンテンツに応じた高さ、必要に応じて縮小 */
    min-height: 0;
    height: auto; /* コンテンツに応じた高さ */
}

#periodSelectionModal #periodOptionsList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#periodSelectionModal #periodOptionsList .btn {
    width: 100%;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary-dark);
    color: white;
}

#periodSelectionModal #periodOptionsList .btn:hover {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

/* 送迎車ページ専用のレイアウト（2段構成） */
#eventCarListContent .event-car-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background-color: var(--color-white, #ffffff);
    gap: 0.75rem;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    position: relative; /* 鍵アイコンの配置用 */
}

#eventCarListContent .event-car-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
}

#eventCarListContent .event-car-name-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
}

#eventCarListContent .memo-edit-btn {
    background: none !important;
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#eventCarListContent .memo-edit-btn:hover {
    transform: scale(1.2) !important;
}

#eventCarListContent .memo-edit-btn:active {
    transform: scale(1.1) !important;
}

#eventCarListContent .memo-icon {
    display: inline-block !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* ライトモード：送迎車ページの鉛筆マークを薄いグレーに */
#eventCarListContent .memo-edit-btn,
#eventCarListContent .memo-edit-btn .memo-icon,
#eventCarListContent .memo-edit-btn .memo-icon svg,
#eventCarListContent .memo-edit-btn .memo-icon .icon {
    color: #9ca3af !important;
    fill: #9ca3af !important;
}

#eventCarListContent .memo-edit-btn:hover,
#eventCarListContent .memo-edit-btn:hover .memo-icon,
#eventCarListContent .memo-edit-btn:hover .memo-icon svg,
#eventCarListContent .memo-edit-btn:hover .memo-icon .icon {
    color: #6b7280 !important;
    fill: #6b7280 !important;
}

/* 送迎車ページの確定状態：鉛筆マークを「参加」「未定」の文字と同じグレーにする */
.event-car-page .event-car-section.readonly .memo-edit-btn .memo-icon,
.event-car-page .event-car-section.readonly .memo-edit-btn .memo-icon svg,
.event-car-page .event-car-section.readonly .memo-edit-btn .memo-icon .icon {
    color: #999;
    fill: #999;
}

#eventCarListContent .event-car-name {
    font-weight: bold !important;
    font-size: 1rem !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    display: block !important;
    line-height: 1.2 !important;
}

#eventCarListContent .event-car-details {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
    color: #666 !important;
}

#eventCarListContent .event-car-capacity,
#eventCarListContent .event-car-management-no {
    background-color: #f5f5f5 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    text-align: left !important;
    display: inline-block !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

#eventCarListContent .participation-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

/* ライトモード用：送迎車ページの出欠選択ボタンのスタイル調整 */
#eventCarListContent .participation-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.4rem 0.1rem !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 40px !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
    max-width: 80px !important;
}

#eventCarListContent .participation-btn:hover {
    border-color: var(--page-theme-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#eventCarListContent .participation-btn.active {
    border-color: var(--page-theme-primary) !important;
    background-color: var(--page-theme-primary) !important;
    color: white !important;
    font-weight: bold !important;
}

#eventCarListContent .participation-icon {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
    line-height: 1 !important;
}

#eventCarListContent .participation-text {
    font-size: 0.65rem !important;
    line-height: 1 !important;
}

/* 汎用的な参加者スタイル（送迎調整ページなどで使用） */
.participant-name {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    display: block;
    margin-bottom: 0;
    text-align: left;
}

.participant-details {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #666;
}

.participant-grade,
.participant-member-no {
    background-color: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* メンバ区分統計のスタイル */
.grade-stat {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #bbdefb;
}

.grade-stat:first-child {
    margin-left: 0;
}

.grade-stat:last-child {
    margin-right: 0;
}

/* 全員統計のスタイル */
.total-stat {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    font-weight: bold;
    font-size: 0.85rem;
}

/* クリック可能な統計ボタンのスタイル */
.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* メモ編集モーダルのスタイル */
.memo-edit-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* メモ警告テキストのアイコン色をページのテーマカラーにする */
.participant-page .memo-warning-icon,
body:has(.participant-planning) .memo-warning-icon,
.participant-page .memo-warning-icon svg,
body:has(.participant-planning) .memo-warning-icon svg,
.participant-page .memo-warning-icon svg use,
body:has(.participant-planning) .memo-warning-icon svg use {
    color: var(--page-theme-primary, #ed6666);
    fill: var(--page-theme-primary, #ed6666);
}

.event-car-page .memo-warning-icon,
.event-car-page .memo-warning-icon svg,
.event-car-page .memo-warning-icon svg use {
    color: var(--page-theme-primary, #3b97ff);
    fill: var(--page-theme-primary, #3b97ff);
}

/* 警告モーダルのアイコン色をページのテーマカラーにする */
.participant-page #warningModal .warning-modal-icon,
body:has(.participant-planning) #warningModal .warning-modal-icon,
.participant-page #warningModal .warning-modal-icon svg,
body:has(.participant-planning) #warningModal .warning-modal-icon svg,
.participant-page #warningModal .warning-modal-icon use,
body:has(.participant-planning) #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #ed6666);
    fill: var(--page-theme-primary, #ed6666);
}

.event-car-page #warningModal .warning-modal-icon,
.event-car-page #warningModal .warning-modal-icon svg,
.event-car-page #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #3b97ff);
    fill: var(--page-theme-primary, #3b97ff);
}

.member-page #warningModal .warning-modal-icon,
.member-page #warningModal .warning-modal-icon svg,
.member-page #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #f760cc);
    fill: var(--page-theme-primary, #f760cc);
}

.car-page #warningModal .warning-modal-icon,
.car-page #warningModal .warning-modal-icon svg,
.car-page #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #27c9ff);
    fill: var(--page-theme-primary, #27c9ff);
}

.account-page #warningModal .warning-modal-icon,
.account-page #warningModal .warning-modal-icon svg,
.account-page #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #ffbf00);
    fill: var(--page-theme-primary, #ffbf00);
}

.event-page #warningModal .warning-modal-icon,
.event-page #warningModal .warning-modal-icon svg,
.event-page #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #2ecdb4);
    fill: var(--page-theme-primary, #2ecdb4);
}

.transport-planning-page #warningModal .warning-modal-icon,
body:has(.transport-planning) #warningModal .warning-modal-icon,
.transport-planning-page #warningModal .warning-modal-icon svg,
body:has(.transport-planning) #warningModal .warning-modal-icon svg,
.transport-planning-page #warningModal .warning-modal-icon use,
body:has(.transport-planning) #warningModal .warning-modal-icon use {
    color: var(--page-theme-primary, #a65bff);
    fill: var(--page-theme-primary, #a65bff);
}

.memo-edit-content label {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.memo-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s ease;
}

.memo-input:focus {
    outline: none;
    border-color: var(--page-theme-primary);
    box-shadow: 0 0 0 3px var(--page-theme-shadow-light);
}

.clickable.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: #1976d2;
    color: #ffffff;
    border-color: #1976d2;
}

/* ========================================
   6. RESPONSIVE STYLES
   ======================================== */
/* レスポンシブ対応 */
@media (max-width: 768px) {
    .transport-planning {
        grid-template-columns: 1.22fr 1fr; /* 55% : 45% に変更 */
        gap: 1rem;
    }
    
    .participant-planning {
        grid-template-columns: 1fr; /* フルワイドを維持 */
        gap: 1rem;
    }
    
    .participant-planning .selected-schedule-info {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .participant-planning .selected-schedule-info h3 {
        font-size: 1rem;
    }
    
    .participant-controls-container {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .participant-section .simple-sort-accordion,
    .participant-section .simple-filter-accordion {
        /* flex: 1; */
        min-width: 0;
    }
    
    .transport-planning .assignment-section .simple-sort-accordion .sort-label,
    .transport-planning .assignment-section .simple-filter-accordion .filter-label,
    .transport-planning .participant-section .simple-sort-accordion .sort-label,
    .transport-planning .participant-section .simple-filter-accordion .filter-label {
        font-size: 0.7rem;
    }
    
    .transport-planning .assignment-section .simple-sort-accordion .sort-current,
    .transport-planning .assignment-section .simple-filter-accordion .filter-current,
    .transport-planning .participant-section .simple-sort-accordion .sort-current,
    .transport-planning .participant-section .simple-filter-accordion .filter-current {
        font-size: 0.75rem;
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-label,
    .participant-planning .participant-section .simple-filter-accordion .filter-label {
        font-size: 0.75rem !important;
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-current,
    .participant-planning .participant-section .simple-filter-accordion .filter-current {
        font-size: 0.8rem !important;
    }
    
    .assignment-section {
        height: 100%; /* モバイルでも100%に統一 */
        max-height: calc(var(--vh, 1vh) * 100 - 30px); /* モバイル用の最大高さを画面100%に近づける */
        overflow-y: hidden; /* スクロールを子要素に委譲 */
        overflow-x: hidden;
    }
    
    .participant-section {
        overflow-y: hidden; /* スクロールを子要素に委譲 */
        overflow-x: hidden;
    }
    
    .participant-scrollable-area {
        flex: 1;
        overflow-y: hidden; /* スクロールバーを非表示 */
        overflow-x: hidden;
        min-height: 0; /* flexboxでスクロールを正しく動作させる */
        /* max-heightを削除 - flex: 1で親要素の高さに合わせて動的に調整 */
        padding-right: 0.5rem; /* スクロールバーのための余白 */
    }
    
    .selected-schedule-info {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .selected-schedule-info h3 {
        font-size: 1rem;
    }
    
    .schedule-info-name {
        font-size: 1.1rem;
    }
    
    .schedule-info-details {
        font-size: 0.85rem;
    }
    
    .schedule-info-memo {
        font-size: 0.8rem;
    }

    .assignment-section h3, .participant-section h3 {
        font-size: 1rem;
    }

    .ride-filter-controls {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .ride-filter-controls .filter-buttons {
        gap: 0.3rem;
    }

    .ride-filter-controls .filter-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .participant-list {
        gap: 0.75rem;
    }

    .participant-list.drag-over::before {
        font-size: 0.8rem;
        padding: 0.8rem;
    }

    .participant-item {
        padding: 0.75rem;
    }

    .participant-name {
        font-size: 0.85rem;
    }

    .participant-details {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .participant-grade {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }

    .assignment-card {
        padding: 0.75rem;
        min-height: 100px;
    }

    .car-title {
        font-size: 0.9rem;
    }

    .car-capacity-info {
        font-size: 0.8rem;
    }

    .participant-assigned {
        padding: 0.4rem;
        font-size: 0.85rem;
        cursor: grab;
    }

    .participant-assigned:hover {
        transform: scale(1.01);
    }

    .participant-name-assigned {
        font-size: 0.85rem;
    }

    .participant-details-assigned {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .control-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .btn {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
        min-width: auto;
    }
    
    /* フィルタ機能のレスポンシブ対応 */
    .filter-controls {
        padding: 0.5rem;
    }
    
    /* 汎用filter-buttonスタイルを削除（アコーディオン専用スタイルを使用） */
    
}

@media (max-width: 480px) {
    .transport-planning {
        grid-template-columns: 1.22fr 1fr; /* 55% : 45% に変更 */
        gap: 0.75rem;
    }
    
    .participant-planning {
        grid-template-columns: 1fr; /* フルワイドを維持 */
        gap: 0.75rem;
    }
    
    .participant-planning .selected-schedule-info {
        padding: 0.6rem;
        margin-bottom: 0.6rem;
    }
    
    .participant-planning .selected-schedule-info h3 {
        font-size: 0.9rem;
    }
    
    .participant-controls-container {
        flex-direction: row;
        gap: 0.4rem;
    }
    
    .participant-section .simple-sort-accordion,
    .participant-section .simple-filter-accordion {
        /* flex: 1; */
        min-width: 0;
    }
    
    .participant-section .simple-sort-accordion .sort-label,
    .participant-section .simple-filter-accordion .filter-label {
        font-size: 0.7rem;
    }
    
    .participant-section .simple-sort-accordion .sort-current,
    .participant-section .simple-filter-accordion .filter-current {
        font-size: 0.75rem;
    }
    
    .assignment-section {
        height: 100%; /* 小画面でも100%に統一 */
        max-height: calc(var(--vh, 1vh) * 100 - 30px); /* 小画面用の最大高さを画面100%に近づける */
        overflow-y: hidden; /* スクロールを子要素に委譲 */
        overflow-x: hidden;
    }
    
    .participant-section {
        overflow-y: hidden; /* スクロールを子要素に委譲 */
        overflow-x: hidden;
    }
    
    .participant-scrollable-area {
        flex: 1;
        overflow-y: hidden; /* スクロールバーを非表示 */
        overflow-x: hidden;
        min-height: 0; /* flexboxでスクロールを正しく動作させる */
        /* max-heightを削除 - flex: 1で親要素の高さに合わせて動的に調整 */
        padding-right: 0.5rem; /* スクロールバーのための余白 */
    }

    .assignment-section, .participant-section {
        padding: 1rem;
    }

    .assignment-section h3, .participant-section h3 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .participant-list {
        gap: 0.5rem;
    }

    .participant-list.drag-over::before {
        font-size: 0.75rem;
        padding: 0.6rem;
    }

    .participant-item {
        padding: 0.6rem;
    }

    .participant-name {
        font-size: 0.8rem;
    }

    .participant-details {
        font-size: 0.6rem;
        gap: 0.2rem;
    }

    .participant-grade {
        font-size: 0.75rem;
        padding: 0.15rem 0.3rem;
    }

    .assignment-card {
        padding: 0.6rem;
        min-height: 90px;
    }

    .car-title {
        font-size: 0.85rem;
    }

    .car-capacity-info {
        font-size: 0.7rem;
    }

    .participant-assigned {
        padding: 0.3rem;
        font-size: 0.8rem;
        cursor: grab;
    }

    .participant-assigned:hover {
        transform: scale(1.01);
    }

    .participant-name-assigned {
        font-size: 0.8rem;
    }

    .participant-details-assigned {
        font-size: 0.6rem;
        gap: 0.2rem;
    }

    .drop-zone {
        padding: 0.25rem;
        font-size: 0.7rem;
    }

    .control-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .btn {
        padding: 0.5rem 0.3rem;
        font-size: 0.75rem;
        min-width: auto;
    }
    
    /* フィルタ機能のレスポンシブ対応（480px以下） */
    .filter-controls {
        padding: 0.4rem;
    }
    
    /* 汎用filter-buttonスタイルを削除（アコーディオン専用スタイルを使用） */
    
}

/* ========================================
   4. DRAG & DROP STYLES
   ======================================== */
/* ドラッグ&ドロップの視覚的フィードバック */
.drag-ghost {
    opacity: 0.8;
    transform: rotate(5deg);
    z-index: 1000;
}

.drag-placeholder {
    border: 2px solid var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    border-radius: 8px;
    height: 60px;
    margin: 0.5rem 0;
}

/* ========================================
   5. 送迎調整ページ読み取り専用状態のスタイル
   ======================================== */

/* 送迎調整ページの読み取り専用状態 */
.assignment-section.readonly {
    /* opacityとfilterを削除 - 子要素に個別に適用 */
}

.participant-section.readonly {
    /* opacityとfilterを削除 - 子要素に個別に適用 */
}

/* 送迎調整ページの読み取り専用状態の送迎車カード */
.assignment-section.readonly .assignment-card {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* 送迎調整ページの読み取り専用状態の参加者アイテム */
.participant-section.readonly .participant-item {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* 送迎調整ページの参加者パネル内の各参加者アイテムの鍵アイコン */
.transport-planning .participant-section .participant-item .participant-item-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    z-index: 10;
}

.transport-planning .participant-section .participant-item .participant-item-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #a65bff);
    color: var(--page-theme-primary, #a65bff);
}

/* 送迎調整ページの参加者パネル内の各参加者アイテムの鍵アイコン（未確定状態では非表示） */
.transport-planning .participant-section:not(.readonly) .participant-item .participant-item-lock {
    display: none;
}

/* 送迎調整ページの読み取り専用状態の割り当て済み参加者アイテム */
.assignment-section.readonly .participant-assigned {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* 並び替えとフィルタ機能は通常の色で表示 */
.assignment-section.readonly .simple-sort-accordion,
.assignment-section.readonly .simple-filter-accordion,
.participant-section.readonly .simple-sort-accordion,
.participant-section.readonly .simple-filter-accordion {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

/* 送迎調整ページ専用：参加者パネルの並び替えとフィルタ機能は通常の色で表示 */
.transport-planning .participant-section.readonly .simple-sort-accordion,
.transport-planning .participant-section.readonly .simple-filter-accordion {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

/* 並び替えとフィルタのすべての子要素も通常の色で表示 */
.assignment-section.readonly .simple-sort-accordion *,
.assignment-section.readonly .simple-filter-accordion *,
.participant-section.readonly .simple-sort-accordion *,
.participant-section.readonly .simple-filter-accordion * {
    opacity: 1 !important;
    filter: none !important;
}

/* 送迎調整ページ専用：参加者パネルの並び替えとフィルタのすべての子要素も通常の色で表示 */
.transport-planning .participant-section.readonly .simple-sort-accordion *,
.transport-planning .participant-section.readonly .simple-filter-accordion * {
    opacity: 1 !important;
    filter: none !important;
}

/* 並び替えとフィルタのボタンも通常の色で表示（送迎調整ページ専用、参加者ページは除外） */
.assignment-section.readonly .simple-sort-accordion .sort-button,
.assignment-section.readonly .simple-filter-accordion .filter-button,
.assignment-section.readonly .simple-sort-accordion .sort-option,
.transport-planning .participant-section.readonly .simple-sort-accordion .sort-button,
.transport-planning .participant-section.readonly .simple-filter-accordion .filter-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
}

/* 送迎調整ページの確定状態：選択されている箱は通常状態と同じ紫系の塗りつぶしにする */
.assignment-section.readonly .simple-sort-accordion .sort-option.active,
.assignment-section.readonly .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary) !important;
    background-color: var(--page-theme-primary) !important;
    color: white !important;
}

.transport-planning .participant-section.readonly .simple-sort-accordion .sort-option.active,
.transport-planning .participant-section.readonly .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary) !important;
    background-color: var(--page-theme-primary) !important;
    color: white !important;
}

/* 並び替えとフィルタのヘッダーも通常の色で表示 */
.assignment-section.readonly .simple-sort-accordion .sort-header,
.assignment-section.readonly .simple-filter-accordion .filter-header,
.participant-section.readonly .simple-sort-accordion .sort-header,
.participant-section.readonly .simple-filter-accordion .filter-header {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* 送迎調整ページ専用：参加者パネルの並び替えとフィルタのヘッダーも通常の色で表示 */
.transport-planning .participant-section.readonly .simple-sort-accordion .sort-header,
.transport-planning .participant-section.readonly .simple-filter-accordion .filter-header {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* ダークモード: 送迎調整ページの参加者パネルの確定状態の並び替え・絞り込みの箱を黒系に */
@media (prefers-color-scheme: dark) {
    .transport-planning .participant-section.readonly .simple-sort-accordion,
    .transport-planning .participant-section.readonly .simple-filter-accordion {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: #374151 !important;
    }
    
    .transport-planning .participant-section.readonly .simple-sort-accordion .sort-header,
    .transport-planning .participant-section.readonly .simple-filter-accordion .filter-header {
        background-color: var(--color-background-light, #1f2937) !important;
        color: #e5e7eb !important;
        border-color: #374151 !important;
    }
    
    .transport-planning .participant-section.readonly .simple-sort-accordion .sort-button,
    .transport-planning .participant-section.readonly .simple-filter-accordion .filter-button {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: #374151 !important;
        color: #e5e7eb !important;
    }
}


/* ========================================
   6. 参加者ページ読み取り専用状態のスタイル
   ======================================== */

/* 参加者ページの読み取り専用状態の出欠ボタン */
.participation-btn.readonly {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(50%) !important;
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #999 !important;
}

.participation-btn.readonly:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: #ddd !important;
}

/* 参加者ページの読み取り専用状態の参加者アイテム */
#participantListContent .participant-item.readonly {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(30%);
}

/* 参加者ページの読み取り専用状態の参加者リスト */
#participantListContent.readonly {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(30%);
}

/* 読み取り専用状態の参加者アイテム */
.readonly-mode .participant-item {
    opacity: 0.7;
    pointer-events: none;
}

/* ========================================
   7. 参加者ページ用のスタイル
   ======================================== */

/* 参加者ページ用のスタイル */
.participant-planning .participant-section {
    background-color: var(--color-background, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* フルワイドを確保 */
    display: flex;
    flex-direction: column;
}

.participant-planning .participant-section h3 {
    margin: 0 0 1rem 0;
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 参加者ページ専用：スクロール可能領域の設定 */
.participant-scrollable-area {
    overflow-y: auto !important; /* スクロールバーを表示 */
    padding-right: 0.5rem;
}

/* 参加者ページのコントロールコンテナ（横並び） */
.participant-controls-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap; /* 常に1段で表示 */
}

/* 参加者ページのアコーディオンスタイル */
.participant-planning .participant-section .simple-sort-accordion,
.participant-planning .participant-section .simple-filter-accordion {
    flex: 1; /* 等分に配置 */
    min-width: 0; /* 最小幅を0にして縮小を許可 */
    margin-bottom: 0;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    background-color: var(--color-background, #f8f9fa);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.participant-planning .participant-section .simple-sort-accordion .sort-header,
.participant-planning .participant-section .simple-filter-accordion .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    min-height: 2.5rem;
}

.participant-planning .participant-section .simple-sort-accordion .sort-header:hover,
.participant-planning .participant-section .simple-filter-accordion .filter-header:hover {
    background-color: #e9ecef;
}

.participant-planning .participant-section .simple-sort-accordion .sort-header.active,
.participant-planning .participant-section .simple-filter-accordion .filter-header.active {
    background-color: var(--page-theme-primary-light);
}

.participant-planning .participant-section .simple-sort-accordion .sort-label,
.participant-planning .participant-section .simple-filter-accordion .filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
}

.participant-planning .participant-section .simple-sort-accordion .sort-current,
.participant-planning .participant-section .simple-filter-accordion .filter-current {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
}

.participant-planning .participant-section .simple-sort-accordion .accordion-icon,
.participant-planning .participant-section .simple-filter-accordion .accordion-icon {
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.participant-planning .participant-section .simple-sort-accordion .sort-header.active .accordion-icon,
.participant-planning .participant-section .simple-filter-accordion .filter-header.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--page-theme-primary);
}

.participant-planning .participant-section .simple-sort-accordion .sort-content,
.participant-planning .participant-section .simple-filter-accordion .filter-content {
    max-height: 0 !important; /* !importantを追加 */
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    padding: 0 !important; /* !importantを追加 */
    min-height: 0 !important; /* 初期状態では高さを0にする */
}

.participant-planning .participant-section .simple-sort-accordion .sort-content.expanded,
.participant-planning .participant-section .simple-filter-accordion .filter-content.expanded {
    max-height: 200px !important; /* !importantを追加 */
    padding: 0.75rem !important; /* !importantを追加 */
    overflow-y: auto;
}

.participant-planning .participant-section .simple-sort-accordion .sort-buttons,
.participant-planning .participant-section .simple-filter-accordion .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.participant-planning .participant-section .simple-sort-accordion .sort-option,
.participant-planning .participant-section .simple-filter-accordion .filter-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.65rem;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.participant-planning .participant-section .simple-sort-accordion .sort-option:hover,
.participant-planning .participant-section .simple-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

.participant-planning .participant-section .simple-sort-accordion .sort-option.active,
.participant-planning .participant-section .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 参加者ページの並び替えボタン選択時の矢印の色を白系に */
.participant-planning .participant-section .simple-sort-accordion .sort-option.active .sort-icon,
.participant-planning .participant-section .simple-sort-accordion .sort-option.active span {
    color: white !important;
}

/* 参加者ページの読み取り専用状態 */
.participant-planning .participant-section.readonly {
    /* opacityとfilterを削除 - 子要素に個別に適用 */
}

/* 参加者ページの読み取り専用状態の参加者アイテム */
.participant-planning .participant-section.readonly .participant-item {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* 参加者ページの各メンバの箱の鍵アイコン */
#participantListContent .participant-item .participant-item-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    z-index: 10;
}

#participantListContent .participant-item .participant-item-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #ed6666);
    color: var(--page-theme-primary, #ed6666);
}

/* 参加者ページの各メンバの箱の鍵アイコン（未確定状態では非表示） */
.participant-section:not(.readonly) .participant-item .participant-item-lock {
    display: none;
}

/* 参加者ページの並び替えとフィルタ機能は確定状態の影響を受けない（シンプルな実装） */
.participant-planning .participant-section.readonly .simple-sort-accordion,
.participant-planning .participant-section.readonly .simple-filter-accordion {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}

/* すべての子要素も確定状態の影響を受けない */
.participant-planning .participant-section.readonly .simple-sort-accordion *,
.participant-planning .participant-section.readonly .simple-filter-accordion * {
    opacity: 1 !important;
    filter: none !important;
}

/* 確定状態でも選択されている箱は通常状態と同じ赤系の塗りつぶしにする */
.participant-planning .participant-section.readonly .simple-sort-accordion .sort-option.active,
.participant-planning .participant-section.readonly .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

.participant-planning .participant-section.readonly .simple-sort-accordion .sort-option.active .sort-icon,
.participant-planning .participant-section.readonly .simple-sort-accordion .sort-option.active span {
    color: white !important;
}

/* ========================================
   送迎車ページ（event-car）用 青系テーマ
   ======================================== */

/* 送迎車ページの基本色設定 */
.event-car-page {
    --page-theme-primary: #3b97ff;
    --page-theme-primary-dark: #1482ff;
    --page-theme-primary-light: #b0d5ff;
}

/* 送迎車ページのモーダル */
.event-car-page .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
    pointer-events: none;
}

.event-car-page .modal.active,
.event-car-page .modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.event-car-page .modal-content {
    pointer-events: auto !important;
    background-color: var(--color-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: visible !important;
    animation: slideUp 0.3s ease;
    position: relative;
    z-index: 10000 !important;
    padding: 0;
}

.event-car-page .modal-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
    position: relative;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.event-car-page .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--color-border, #e5e7eb);
}

/* ログアウトモーダルのヘッダーはグレーのライン */
.event-car-page #logoutModal .modal-header::after {
    background-color: var(--color-border, #e5e7eb);
}

.event-car-page .modal-header h3,
.event-car-page .modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-primary, #333);
}

.event-car-page .modal-body {
    padding: 1.5rem;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

.event-car-page .modal-body p {
    margin: 0;
    color: var(--color-text-primary, #333);
    font-size: 1rem;
    line-height: 1.5;
}

/* 送迎車出欠確定確認モーダル内のテキスト色 */
#eventCarConfirmationModal .modal-body p,
#eventCarConfirmationModal .modal-body li,
#eventCarConfirmationModal .modal-body ul li {
    color: var(--color-text-primary, #333);
}

/* 送迎車出欠確定確認モーダル内のリストアイテムの色を明示的に設定 */
#eventCarConfirmationModal #unansweredEventCars li {
    color: var(--color-text-primary, #333);
}

.event-car-page .modal-footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex !important;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    min-height: 60px;
}

/* 送迎車ページ専用のモーダルフッターボタンスタイル */
.event-car-page .modal-footer .btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 送迎車ページ専用のモーダルフッターボタンカラー */
.event-car-page .modal-footer .btn-secondary {
    background-color: var(--color-border, #ecf0f1) !important;
    color: var(--color-text-primary, #2c3e50) !important;
    border: 1px solid var(--color-border-light, #bdc3c7) !important;
}

.event-car-page .modal-footer .btn-secondary:hover {
    background-color: var(--color-hover, #d5dbdb) !important;
    color: var(--color-text-primary, #2c3e50) !important;
}

.event-car-page .modal-footer .btn-primary {
    background-color: var(--page-theme-primary) !important;
    color: white !important;
    border: 1px solid var(--page-theme-primary-dark) !important;
}

.event-car-page .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark) !important;
    color: white !important;
}

.event-car-page .modal-footer .btn-primary:disabled {
    background-color: var(--color-border-light, #bdc3c7) !important;
    color: var(--color-text-secondary, #7f8c8d) !important;
    border-color: var(--color-border-light, #bdc3c7) !important;
    cursor: not-allowed !important;
}

/* 送迎車ページの確定取消ボタン - 他のページと同じグレーに統一（btn-secondaryと同じスタイル） */
.event-car-page .btn-warning {
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    font-weight: 600;
}

.event-car-page .btn-warning:hover {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: white;
}

/* 送迎車ページの確定取消ボタン - ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .event-car-page .btn-warning {
        background-color: var(--color-border, #404040);
        border-color: var(--color-border, #404040);
        color: var(--color-text-primary, #ffffff);
    }

    .event-car-page .btn-warning:hover {
        background-color: var(--color-text-secondary, #9ca3af);
        border-color: var(--color-text-secondary, #9ca3af);
        color: white;
    }
}

/* 送迎車ページのアコーディオン */
.event-car-page .simple-sort-accordion,
.event-car-page .simple-filter-accordion {
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.event-car-page .simple-sort-accordion .sort-header,
.event-car-page .simple-filter-accordion .filter-header {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background, #f8f9fa);
    transition: background-color 0.2s ease;
}

.event-car-page .simple-sort-accordion .sort-header:hover,
.event-car-page .simple-filter-accordion .filter-header:hover {
    background-color: var(--page-theme-primary-light);
}

.event-car-page .simple-sort-accordion .sort-header.active,
.event-car-page .simple-filter-accordion .filter-header.active {
    background-color: var(--page-theme-primary);
    color: white;
}

.event-car-page .simple-sort-accordion .sort-current,
.event-car-page .simple-filter-accordion .filter-current {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--page-theme-primary);
}

.event-car-page .simple-sort-accordion .sort-content,
.event-car-page .simple-filter-accordion .filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.event-car-page .simple-sort-accordion .sort-content.expanded,
.event-car-page .simple-filter-accordion .filter-content.expanded {
    max-height: 200px;
    padding: 0.75rem;
    overflow-y: auto;
}

.event-car-page .simple-sort-accordion .sort-buttons,
.event-car-page .simple-filter-accordion .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.event-car-page .simple-sort-accordion .sort-option,
.event-car-page .simple-filter-accordion .filter-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.65rem;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.event-car-page .simple-sort-accordion .sort-option:hover,
.event-car-page .simple-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
    transform: translateY(-1px);
}

.event-car-page .simple-sort-accordion .sort-option.active,
.event-car-page .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 送迎車ページの参加状況ボタン */
.event-car-page .participation-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    background-color: var(--color-background, #f8f9fa);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.event-car-page .participation-btn:hover {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary-light);
}

.event-car-page .participation-btn.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

/* 送迎車ページ：未回答の送迎車ラベルのスタイル */
.event-car-page .unanswered-cars-label {
    color: var(--page-theme-primary) !important;
    font-weight: 600;
}

.event-car-page .participation-btn.readonly {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* 送迎車ページの読み取り専用状態 */
.event-car-page .event-car-section.readonly {
    /* opacityとfilterを削除 - 子要素に個別に適用 */
}

.event-car-page .event-car-section.readonly .event-car-item {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
}

/* 送迎車ページの各車両の箱の鍵アイコン */
#eventCarListContent .event-car-item .event-car-item-lock {
    display: inline-block;
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    z-index: 10;
}

#eventCarListContent .event-car-item .event-car-item-lock svg {
    width: 100%;
    height: 100%;
    fill: var(--page-theme-primary, #1482ff);
    color: var(--page-theme-primary, #1482ff);
}

/* 送迎車ページの各車両の箱の鍵アイコン（未確定状態では非表示） */
.event-car-section:not(.readonly) .event-car-item .event-car-item-lock {
    display: none;
}

/* 送迎車ページの並び替えとフィルタ機能は確定状態の影響を受けない（シンプルな実装） */
.event-car-page .event-car-section.readonly .simple-sort-accordion,
.event-car-page .event-car-section.readonly .simple-filter-accordion {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}

/* すべての子要素も確定状態の影響を受けない */
.event-car-page .event-car-section.readonly .simple-sort-accordion *,
.event-car-page .event-car-section.readonly .simple-filter-accordion * {
    opacity: 1 !important;
    filter: none !important;
}

/* 確定状態でも選択されている箱は通常状態と同じ青系の塗りつぶしにする */
.event-car-page .event-car-section.readonly .simple-sort-accordion .sort-option.active,
.event-car-page .event-car-section.readonly .simple-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary);
    background-color: var(--page-theme-primary);
    color: white;
}

.event-car-page .event-car-section.readonly .simple-sort-accordion .sort-option.active .sort-icon,
.event-car-page .event-car-section.readonly .simple-sort-accordion .sort-option.active span {
    color: white !important;
}

/* ========================================
   TEAM PAGE STYLES
   ======================================== */

/* チームページの色テーマ（オレンジ系 - メンバページと同じ） */
.team-page,
body:has(.team-page) {
    --page-theme-primary: #ff8c20;          /* メインアクセント色（オレンジ系） */
    --page-theme-primary-dark: #f87800;     /* 濃いアクセント色（ホバー・ボーダー） */
    --page-theme-primary-light: #ffc995;     /* 薄いアクセント色（背景） */
    --page-theme-primary-text: #ff8c20;      /* アクセントテキスト色 */
    --page-theme-shadow: rgba(248, 120, 0, 0.3);  /* アクセント色の影 */
    --page-theme-shadow-light: rgba(248, 120, 0, 0.2);  /* 薄いアクセント色の影 */
}

/* チーム情報ヘッダー */
.team-page .team-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.team-page .team-info-header h2 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.3;
}

.team-page .edit-button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background-color: var(--page-theme-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px var(--page-theme-shadow-light);
    line-height: 1.2;
}

.team-page .edit-button:hover {
    background-color: var(--page-theme-primary-dark);
    box-shadow: 0 4px 8px var(--page-theme-shadow);
    transform: translateY(-1px);
}

.team-page .edit-button:active {
    transform: translateY(0);
}

.team-page .edit-icon {
    font-size: 1rem;
}

/* チーム情報コンテナ */
.team-page .team-info-container {
    margin-top: 0.75rem;
}

.team-page .team-info-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.team-page .team-info-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.team-page .team-info-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.team-page .team-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.team-page .team-info-value {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.4;
    min-height: 1.2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.team-page .team-info-value.loading-text {
    color: #9ca3af;
    font-style: italic;
}

.team-page .team-info-value.no-data-text {
    color: #9ca3af;
    font-style: italic;
}

/* 活動内容詳細は特に改行を許可 */
.team-page .team-info-value#teamActivityDetail {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* チームページのモーダルスタイル */
.team-page .modal-content {
    max-width: 600px;
    width: 90%;
}

.team-page .modal-footer .btn-primary {
    background-color: var(--page-theme-primary);
    border-color: var(--page-theme-primary);
}

.team-page .modal-footer .btn-primary:hover {
    background-color: var(--page-theme-primary-dark);
    border-color: var(--page-theme-primary-dark);
}

/* 2階層選択UIのスタイル */
.team-page .form-group {
    margin-bottom: 1.5rem;
}

.team-page .form-group:last-of-type {
    margin-bottom: 0;
}

.team-page .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

.team-page .form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background-color: white;
}

.team-page .form-input:focus {
    outline: none;
    border-color: var(--page-theme-primary);
    box-shadow: 0 0 0 3px var(--page-theme-primary-light);
}

.team-page .form-input:disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

/* アコーディオン形式の選択UI */
.team-page .team-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
}

.team-page .team-accordion-item {
    border-bottom: 1px solid #e5e7eb;
}

.team-page .team-accordion-item:last-child {
    border-bottom: none;
}

.team-page .team-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
    user-select: none;
    gap: 0.5rem;
}

.team-page .team-accordion-header:hover {
    background-color: #f3f4f6;
}

.team-page .team-accordion-header.active {
    background-color: var(--page-theme-primary-light);
    border-left: 3px solid var(--page-theme-primary);
}

.team-page .team-accordion-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

.team-page .team-accordion-selected {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
    flex: 0 0 auto;
}

.team-page .team-accordion-icon {
    font-size: 0.8rem;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.team-page .team-accordion-header.active .team-accordion-icon {
    color: var(--page-theme-primary);
}

.team-page .team-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: white;
    padding: 0;
}

.team-page .team-accordion-content.expanded {
    max-height: 400px;
    padding: 0.75rem;
    overflow-y: auto;
}

.team-page .team-accordion-button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    text-align: left;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-page .team-accordion-button:hover {
    background-color: #f9fafb;
    border-color: var(--page-theme-primary);
}

.team-page .team-accordion-button.selected {
    background-color: var(--page-theme-primary);
    color: white;
    border-color: var(--page-theme-primary);
    font-weight: 500;
}

.team-page .team-accordion-button:last-child {
    margin-bottom: 0;
}

/* エラーメッセージ */
.team-page .error-message {
    color: var(--page-theme-primary, #ff8c20);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

/* テキストエリア */
.team-page textarea.form-input {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.6;
}

/* フォームヘルプテキスト */
.team-page .form-help-text,
#rideCountSettingsModal .form-help-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .team-page .form-help-text,
    #rideCountSettingsModal .form-help-text {
        color: #9ca3af;
    }
}

/* チーム情報編集モーダルのフォームアコーディオン */
.team-page .team-form-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    margin-bottom: 1rem;
}

.team-page .team-form-accordion:last-child {
    margin-bottom: 0;
}

.team-page .team-form-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
    user-select: none;
    gap: 0.5rem;
}

.team-page .team-form-accordion-header:hover {
    background-color: #f3f4f6;
}

.team-page .team-form-accordion-header.active {
    background-color: var(--page-theme-primary-light);
    border-left: 3px solid var(--page-theme-primary);
}

.team-page .team-form-accordion-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.team-page .team-form-accordion-selected {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
}

.team-page .team-form-accordion-icon {
    font-size: 0.8rem;
    color: #6c757d;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.team-page .team-form-accordion-header.active .team-form-accordion-icon {
    color: var(--page-theme-primary);
    transform: rotate(180deg);
}

.team-page .team-form-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: white;
    padding: 0;
}

.team-page .team-form-accordion-content.expanded {
    max-height: 1000px;
    padding: 1rem;
    overflow-y: auto;
}

/* デスクトップ表示（769px以上）: アコーディオンのヘッダーを非表示、コンテンツを常に表示 */
@media (min-width: 769px) {
    .team-page .team-form-accordion-header {
        display: none;
    }
    
    .team-page .team-form-accordion-content {
        max-height: none;
        padding: 0;
        overflow: visible;
    }
    
    .team-page .team-form-accordion {
        border: none;
        background-color: transparent;
    }
}

/* 送迎回数設定・確認モーダルのフォームアコーディオン（クラブ情報編集モーダルと同じデザイン） */
#rideCountSettingsModal .team-form-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    margin-bottom: 1rem;
}

#rideCountSettingsModal .team-form-accordion:last-child {
    margin-bottom: 0;
}

#rideCountSettingsModal .team-form-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
    user-select: none;
    gap: 0.5rem;
}

#rideCountSettingsModal .team-form-accordion-header:hover {
    background-color: #f3f4f6;
}

#rideCountSettingsModal .team-form-accordion-header.active {
    background-color: var(--page-theme-primary-light);
    border-left: 3px solid var(--page-theme-primary);
}

#rideCountSettingsModal .team-form-accordion-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 0.5rem;
}

#rideCountSettingsModal .team-form-accordion-selected {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
}

#rideCountSettingsModal .team-form-accordion-icon {
    font-size: 0.8rem;
    color: #6c757d;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

#rideCountSettingsModal .team-form-accordion-header.active .team-form-accordion-icon {
    color: var(--page-theme-primary);
    transform: rotate(180deg);
}

#rideCountSettingsModal .team-form-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: white;
    padding: 0;
}

#rideCountSettingsModal .team-form-accordion-content.expanded {
    max-height: 1000px;
    padding: 1rem;
    overflow-y: auto;
}

/* デスクトップ表示（769px以上）: アコーディオンのヘッダーを非表示、コンテンツを常に表示 */
@media (min-width: 769px) {
    #rideCountSettingsModal .team-form-accordion-header {
        display: none;
    }
    
    #rideCountSettingsModal .team-form-accordion-content {
        max-height: none;
        padding: 0;
        overflow: visible;
    }
    
    #rideCountSettingsModal .team-form-accordion {
        border: none;
        background-color: transparent;
        margin-bottom: 1.5rem;
    }
}

/* ダークモード: 送迎回数設定・確認モーダルのアコーディオン */
@media (prefers-color-scheme: dark) {
    #rideCountSettingsModal .team-form-accordion {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
    }
    
    #rideCountSettingsModal .team-form-accordion-header {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    #rideCountSettingsModal .team-form-accordion-header:hover {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    #rideCountSettingsModal .team-form-accordion-header.active {
        background-color: rgba(39, 201, 255, 0.1) !important; /* ダークモード: 薄い水色の背景 */
        border-left-color: var(--color-menu-car, #9de6ff) !important; /* ダークモード: 車ページのテーマカラー */
    }
    
    #rideCountSettingsModal .team-form-accordion-label {
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    #rideCountSettingsModal .team-form-accordion-selected {
        color: var(--color-menu-car, #9de6ff) !important; /* ダークモード: 車ページのテーマカラー */
    }
    
    #rideCountSettingsModal .team-form-accordion-icon {
        color: #9ca3af !important; /* ダークモード: グレー */
    }
    
    #rideCountSettingsModal .team-form-accordion-header.active .team-form-accordion-icon {
        color: var(--color-menu-car, #9de6ff) !important; /* ダークモード: 車ページのテーマカラー */
    }
    
    #rideCountSettingsModal .team-form-accordion-content {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    #rideCountSettingsModal .team-form-accordion-content.expanded {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    /* デスクトップ表示（769px以上）でのダークモード対応 */
    @media (min-width: 769px) {
        #rideCountSettingsModal .team-form-accordion {
            background-color: transparent !important;
        }
    }
}

/* 参加回数設定・確認モーダルのフォームアコーディオン（クラブ情報編集モーダルと同じデザイン） */
#participationCountSettingsModal .team-form-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    margin-bottom: 1rem;
}

#participationCountSettingsModal .team-form-accordion:last-child {
    margin-bottom: 0;
}

#participationCountSettingsModal .team-form-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
    user-select: none;
    gap: 0.5rem;
}

#participationCountSettingsModal .team-form-accordion-header:hover {
    background-color: #f3f4f6;
}

#participationCountSettingsModal .team-form-accordion-header.active {
    background-color: var(--page-theme-primary-light);
    border-left: 3px solid var(--page-theme-primary);
}

#participationCountSettingsModal .team-form-accordion-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 0.5rem;
}

#participationCountSettingsModal .team-form-accordion-selected {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary);
    background-color: transparent;
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    margin: 0 0.1rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
}

#participationCountSettingsModal .team-form-accordion-icon {
    font-size: 0.8rem;
    color: #6c757d;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

#participationCountSettingsModal .team-form-accordion-header.active .team-form-accordion-icon {
    color: var(--page-theme-primary);
    transform: rotate(180deg);
}

#participationCountSettingsModal .team-form-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: white;
    padding: 0;
}

#participationCountSettingsModal .team-form-accordion-content.expanded {
    max-height: 1000px;
    padding: 1rem;
    overflow-y: auto;
}

/* デスクトップ表示（769px以上）: アコーディオンのヘッダーを非表示、コンテンツを常に表示 */
@media (min-width: 769px) {
    #participationCountSettingsModal .team-form-accordion-header {
        display: none;
    }
    
    #participationCountSettingsModal .team-form-accordion-content {
        max-height: none;
        padding: 0;
        overflow: visible;
    }
    
    #participationCountSettingsModal .team-form-accordion {
        border: none;
        background-color: transparent;
        margin-bottom: 1.5rem;
    }
}

/* ダークモード: 参加回数設定・確認モーダルのアコーディオン */
@media (prefers-color-scheme: dark) {
    #participationCountSettingsModal .team-form-accordion {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
    }
    
    #participationCountSettingsModal .team-form-accordion-header {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    #participationCountSettingsModal .team-form-accordion-header:hover {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    #participationCountSettingsModal .team-form-accordion-header.active {
        background-color: rgba(255, 140, 32, 0.1) !important; /* ダークモード: 薄いオレンジの背景（メンバーページのテーマカラー） */
        border-left-color: var(--page-theme-primary, #ff8c20) !important; /* ダークモード: メンバーページのテーマカラー */
    }
    
    #participationCountSettingsModal .team-form-accordion-label {
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    #participationCountSettingsModal .team-form-accordion-selected {
        color: var(--page-theme-primary, #ff8c20) !important; /* ダークモード: メンバーページのテーマカラー */
    }
    
    #participationCountSettingsModal .team-form-accordion-icon {
        color: #9ca3af !important; /* ダークモード: グレー */
    }
    
    #participationCountSettingsModal .team-form-accordion-header.active .team-form-accordion-icon {
        color: var(--page-theme-primary, #ff8c20) !important; /* ダークモード: メンバーページのテーマカラー */
    }
    
    #participationCountSettingsModal .team-form-accordion-content {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    #participationCountSettingsModal .team-form-accordion-content.expanded {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    /* デスクトップ表示（769px以上）でのダークモード対応 */
    @media (min-width: 769px) {
        #participationCountSettingsModal .team-form-accordion {
            background-color: transparent !important;
        }
    }
}

/* スマホ・タブレット表示（768px以下）: アコーディオンを有効化 */
@media (max-width: 768px) {
    .team-page .team-form-accordion {
        margin-bottom: 1rem;
    }
}

/* チームページのダークモード対応 */
@media (prefers-color-scheme: dark) {
    .team-page .team-info-header h2 {
        color: #ffffff; /* ダークモード: 白文字 */
    }
    
    .team-page .team-info-label {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    .team-page .team-info-value {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .team-page .team-info-value.loading-text,
    .team-page .team-info-value.no-data-text {
        color: #9ca3af; /* ダークモード: グレー（そのまま） */
    }
    
    .team-page .form-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .team-page .team-accordion-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .team-page .team-accordion-icon {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    .team-page .team-accordion-button {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .team-page .team-accordion-button:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .team-page .team-form-accordion-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .team-page .team-info-card {
        background: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .team-page .team-info-item {
        border-bottom-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .team-page .team-accordion {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .team-page .team-accordion-header {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    .team-page .team-accordion-header:hover {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
    }
    
    .team-page .team-accordion-content {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
    }
    
    .team-page .team-form-accordion-header {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    .team-page .team-form-accordion-header:hover {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
    }
    
    .team-page .team-form-accordion-content {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
    }
    
    .team-page .form-input {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .team-page .form-input:disabled {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        color: #6b7280; /* ダークモード: グレー */
    }
}

/* メンバーページ、車ページ、予定ページのダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* メンバーページ、編集者ページ、車ページ、予定ページのコンテンツセクション見出し */
    .member-page .content-section h2,
    body:has(.member-page) .content-section h2,
    .account-page .content-section h2,
    body:has(.account-page) .content-section h2,
    .car-page .content-section h2,
    body:has(.car-page) .content-section h2,
    .event-page .content-section h2,
    body:has(.event-page) .content-section h2 {
        color: #ffffff; /* ダークモード: 白文字 */
    }
    
    /* メンバーページ、編集者ページ、車ページ、予定ページの説明文 */
    .member-page .content-section p,
    body:has(.member-page) .content-section p,
    .account-page .content-section p,
    body:has(.account-page) .content-section p,
    .car-page .content-section p,
    body:has(.car-page) .content-section p,
    .event-page .content-section p,
    body:has(.event-page) .content-section p {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    /* モーダル内のフォームラベル */
    .member-page .modal-body .form-label,
    body:has(.member-page) .modal-body .form-label,
    .account-page .modal-body .form-label,
    body:has(.account-page) .modal-body .form-label,
    .car-page .modal-body .form-label,
    body:has(.car-page) .modal-body .form-label,
    .event-page .modal-body .form-label,
    body:has(.event-page) .modal-body .form-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    /* モーダル内のフォーム入力 */
    .member-page .form-input,
    body:has(.member-page) .form-input,
    .account-page .form-input,
    body:has(.account-page) .form-input,
    .car-page .form-input,
    body:has(.car-page) .form-input,
    .event-page .form-input,
    body:has(.event-page) .form-input {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* モーダル内のフォーム入力（無効時） */
    .member-page .form-input:disabled,
    body:has(.member-page) .form-input:disabled,
    .account-page .form-input:disabled,
    body:has(.account-page) .form-input:disabled,
    .car-page .form-input:disabled,
    body:has(.car-page) .form-input:disabled,
    .event-page .form-input:disabled,
    body:has(.event-page) .form-input:disabled {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        color: #6b7280; /* ダークモード: グレー */
    }
}

/* 参加者ページ、送迎調整ページのダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* 参加者ページ、送迎調整ページのコンテンツセクション見出し */
    .participant-page .content-section h2,
    body:has(.participant-planning) .content-section h2,
    .transport-planning-page .content-section h2,
    body:has(.transport-planning) .content-section h2 {
        color: #ffffff; /* ダークモード: 白文字 */
    }
    
    /* 参加者ページ、送迎調整ページの説明文 */
    .participant-page .content-section p,
    body:has(.participant-planning) .content-section p,
    .transport-planning-page .content-section p,
    body:has(.transport-planning) .content-section p {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    /* 参加者ページ、送迎調整ページのモーダル */
    .participant-page .modal-content,
    body:has(.participant-planning) .modal-content,
    .transport-planning-page .modal-content,
    body:has(.transport-planning) .modal-content {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
    }
    
    /* 注意: モーダルの色はCSS変数(--color-modal-bg, --color-modal-border, --color-modal-text)で管理されるため、!importantは不要 */
    /* 参加者ページと送迎調整ページのモーダルも共通のCSS変数を使用 */
}

/* 全ページ共通のモーダルダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* メンバーページ、編集者ページ、車ページ、予定ページ、チームページのモーダル */
    /* 注意: モーダルの色はCSS変数(--color-modal-bg, --color-modal-border, --color-modal-text)で管理されるため、!importantは不要 */
    /* メンバページ、編集者ページ、車ページ、予定ページ、チームページのモーダルは共通のCSS変数を使用 */
}

/* 予定選択パネルのダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* テキスト色の変数をダークモード用に上書き */
    :root {
        --text-color: #f3f4f6;              /* メインテキスト色（ダークモード: ほぼ白） */
        --text-secondary: #d1d5db;           /* サブテキスト色（ダークモード: 明るいグレー） */
        --text-muted: #9ca3af;              /* ミュートテキスト色（ダークモード: グレー） */
    }
    
    /* 注意: 予定選択パネルの色はCSS変数(--color-text-primary, --color-background-light等)で管理されるため、!importantは不要 */
    /* ダークモードではCSS変数が自動的に適切な値に変更される */
    
    /* 選択された予定情報 */
    .transport-planning .selected-schedule-info {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .transport-planning .selected-schedule-info h3,
    .transport-planning .selected-schedule-info .schedule-info-name {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .transport-planning .selected-schedule-info .schedule-info-details {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    .transport-planning .selected-schedule-info .schedule-info-memo {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    /* 参加者パネル内の箱 */
    .participant-item {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白の文字 */
    }
    
    .participant-name {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .participant-details,
    .participant-grade,
    .participant-member-no {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    /* 詳細モーダル内の箱 */
    .car-detail-item,
    .participant-detail-item,
    .schedule-detail-item {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    /* 9. 予定詳細モーダルの縦ラインを各ページのテーマカラーに（ダークモード） */
    .participant-page .schedule-detail-item,
    body:has(.participant-page) .schedule-detail-item {
        border-left-color: rgba(237, 102, 102, 0.5) !important; /* 薄い赤 */
    }
    
    /* 送迎調整ページの参加者詳細モーダルは紫系 */
    .participant-detail-item {
        border-left-color: var(--page-theme-primary, #a65bff) !important; /* 紫系 */
    }
    
    .event-car-page .schedule-detail-item,
    body:has(.event-car-page) .schedule-detail-item,
    .car-detail-item {
        border-left-color: rgba(37, 99, 235, 0.5) !important; /* 薄い青 */
    }
    
    .transport-planning-page .schedule-detail-item,
    body:has(.transport-planning) .schedule-detail-item,
    .transport-planning-page .car-detail-item,
    body:has(.transport-planning) .car-detail-item {
        border-left-color: rgba(166, 91, 255, 0.5) !important; /* 薄い紫 */
    }
    
    /* 詳細モーダルラベル */
    .car-detail-label,
    .participant-detail-label,
    .schedule-detail-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    /* 詳細モーダル値 */
    .car-detail-value,
    .participant-detail-value,
    .schedule-detail-value {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    /* 送迎車ページのセクション */
    .event-car-planning .event-car-section {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .event-car-planning .event-car-section h3 {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* 送迎車ページのアコーディオン */
    .event-car-planning .event-car-section .simple-sort-accordion,
    .event-car-planning .event-car-section .simple-filter-accordion {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-header,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-header {
        background-color: #111827; /* ダークモード: より暗い背景 */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-header:hover,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-header:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-label,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-current,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-current {
        color: var(--page-theme-primary-light); /* ダークモード: 薄いアクセント色 */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-option,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-button {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-option:hover,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-button:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .event-car-planning .event-car-section .simple-sort-accordion .sort-option.active,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-button.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    /* 送迎車ページのアコーディオンの展開時の背景色 */
    .event-car-planning .event-car-section .simple-sort-accordion .sort-content,
    .event-car-planning .event-car-section .simple-filter-accordion .filter-content {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    /* 参加者ページのパネルとアコーディオン */
    .participant-planning .participant-section {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .participant-planning .participant-section .simple-sort-accordion,
    .participant-planning .participant-section .simple-filter-accordion {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-header,
    .participant-planning .participant-section .simple-filter-accordion .filter-header {
        background-color: #111827; /* ダークモード: より暗い背景 */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-header:hover,
    .participant-planning .participant-section .simple-filter-accordion .filter-header:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-label,
    .participant-planning .participant-section .simple-filter-accordion .filter-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-current,
    .participant-planning .participant-section .simple-filter-accordion .filter-current {
        color: var(--page-theme-primary-light); /* ダークモード: 薄いアクセント色 */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-option,
    .participant-planning .participant-section .simple-filter-accordion .filter-button {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-option:hover,
    .participant-planning .participant-section .simple-filter-accordion .filter-button:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .participant-planning .participant-section .simple-sort-accordion .sort-option.active,
    .participant-planning .participant-section .simple-filter-accordion .filter-button.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    /* 送迎調整ページの参加者パネル */
    .transport-planning .participant-section {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .transport-planning .participant-section h3 {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* 送迎調整ページの割り当てセクション */
    .assignment-section {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .assignment-section h3 {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* コンテンツセクション */
    .content-section {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    /* 配車可否フィルタコントロール */
    .ride-filter-controls {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .ride-filter-controls .filter-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .ride-filter-controls .filter-button {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .ride-filter-controls .filter-button:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
        border-color: #4b5563; /* ダークモード: より明るいボーダー */
    }
    
    .ride-filter-controls .filter-button.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    /* 並び替えボタン */
    .sort-button {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .sort-button:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
        border-color: var(--page-theme-primary); /* アクセント色のボーダー */
    }
    
    .sort-button.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    /* フィルタコントロール */
    .filter-controls {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    /* 一般的なアコーディオン（送迎車ページと参加者ページ以外） */
    .simple-sort-accordion,
    .simple-filter-accordion {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .simple-filter-accordion .filter-header,
    .simple-sort-accordion .sort-header {
        background-color: #111827; /* ダークモード: より暗い背景 */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .simple-filter-accordion .filter-header:hover,
    .simple-sort-accordion .sort-header:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .simple-filter-accordion .filter-header.active,
    .simple-sort-accordion .sort-header.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    .simple-filter-accordion .filter-label,
    .simple-sort-accordion .sort-label {
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .simple-filter-accordion .filter-current,
    .simple-sort-accordion .sort-current {
        color: var(--page-theme-primary-light); /* ダークモード: 薄いアクセント色 */
    }
    
    .simple-filter-accordion .accordion-icon,
    .simple-sort-accordion .accordion-icon {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    .simple-filter-accordion .filter-header.active .accordion-icon,
    .simple-sort-accordion .sort-header.active .accordion-icon {
        color: white; /* ダークモード: 白（アクティブ時） */
    }
    
    .simple-filter-accordion .filter-content {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    /* 並び替えアコーディオンの展開時の背景色（フィルターと同様に） */
    .simple-sort-accordion .sort-content {
        background-color: #111827; /* ダークモード: より暗い背景 */
    }
    
    /* 送迎調整ページのアコーディオンの展開時の背景色 */
    .transport-planning .simple-sort-accordion .sort-content,
    .transport-planning .simple-filter-accordion .filter-content {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
    }
    
    /* 参加者ページの送迎調整パネルと参加者パネルの並び替えアコーディオンの展開時の背景色 */
    .transport-planning .participant-section .simple-sort-accordion .sort-content,
    .transport-planning .participant-section .simple-filter-accordion .filter-content,
    .participant-planning .participant-section .simple-sort-accordion .sort-content,
    .participant-planning .participant-section .simple-filter-accordion .filter-content {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
    }
    
    .simple-filter-accordion .filter-button,
    .simple-sort-accordion .sort-option {
        background-color: #1f2937; /* ダークモード: 暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #e5e7eb; /* ダークモード: 明るいグレー */
    }
    
    .simple-filter-accordion .filter-button:hover,
    .simple-sort-accordion .sort-option:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
    }
    
    .simple-filter-accordion .filter-button.active,
    .simple-sort-accordion .sort-option.active {
        background-color: var(--page-theme-primary); /* アクセント色はそのまま */
        color: white; /* 白文字はそのまま */
    }
    
    /* ダークモード: 送迎調整ページの参加者パネルの並び替え・絞り込みの箱を黒系に */
    .transport-planning .participant-section .simple-sort-accordion,
    .transport-planning .participant-section .simple-filter-accordion {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
    }
    
    .transport-planning .participant-section .simple-sort-accordion .sort-header,
    .transport-planning .participant-section .simple-filter-accordion .filter-header {
        background-color: #111827 !important; /* ダークモード: より暗い背景 */
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
    }
    
    .transport-planning .participant-section .simple-sort-accordion .sort-option,
    .transport-planning .participant-section .simple-filter-accordion .filter-button {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    .transport-planning .participant-section .simple-sort-accordion .sort-option:hover,
    .transport-planning .participant-section .simple-filter-accordion .filter-button:hover {
        background-color: #374151 !important; /* ダークモード: より明るい背景 */
    }
    
    /* 送迎調整ページの確定状態：選択されている箱も通常状態と同じテーマカラーの塗りつぶしにする（ダークモード） */
    .assignment-section.readonly .simple-sort-accordion .sort-option.active,
    .assignment-section.readonly .simple-filter-accordion .filter-button.active {
        border-color: var(--page-theme-primary);
        background-color: var(--page-theme-primary);
        color: white;
    }
    
    .transport-planning .participant-section.readonly .simple-sort-accordion .sort-option.active,
    .transport-planning .participant-section.readonly .simple-filter-accordion .filter-button.active {
        border-color: var(--page-theme-primary);
        background-color: var(--page-theme-primary);
        color: white;
    }
    
    /* ダークモード: 未確定状態では鍵アイコンを非表示 */
    .transport-planning-page .btn:not(.confirmed-disabled) .btn-icon-lock,
    body:has(.transport-planning) .btn:not(.confirmed-disabled) .btn-icon-lock {
        display: none !important;
    }
    
    /* ダークモード: 参加者ページの未確定状態では鍵アイコンを非表示 */
    .participant-page .btn.btn-success:not(:disabled) .btn-icon-lock,
    body:has(.participant-planning) .btn.btn-success:not(:disabled) .btn-icon-lock {
        display: none !important;
    }
    
    /* ダークモード: 送迎車ページの未確定状態では鍵アイコンを非表示 */
    .event-car-page .btn.btn-success:not(:disabled) .btn-icon-lock,
    body:has(.event-car-planning) .btn.btn-success:not(:disabled) .btn-icon-lock {
        display: none !important;
    }
    
    /* 送迎車ページの各車両の箱の鍵アイコン（未確定状態では非表示） */
    #eventCarListContent .event-car-item:not(.readonly) .event-car-item-lock {
        display: none !important;
    }
    
    /* ダークモード: 未確定バッジの色 - 各ページのテーマカラーを適用 */
    .schedule-pod-badge {
        color: var(--page-theme-primary);
    }
    
    /* ダークモード: メンバページの絞り込みボタンの選択肢（未選択）の文字色を白に */
    .member-filter-accordion .filter-button:not(.active) {
        color: #ffffff !important;
    }
    
    /* ダークモード: 車ページの絞り込みボタンの選択肢（未選択）の文字色を白に */
    .event-car-page .simple-filter-accordion .filter-button:not(.active) {
        color: #ffffff !important;
    }
    
    /* ダークモード: 参加者ページ・送迎車ページ・送迎調整ページの選択中の予定内の「コピー」ボタンの文字色を濃い黒系に */
    .transport-planning .selected-schedule-info .schedule-info-public-url-copy:not(.copied),
    .participant-planning .selected-schedule-info .schedule-info-public-url-copy:not(.copied),
    .event-car-planning .selected-schedule-info .schedule-info-public-url-copy:not(.copied) {
        color: #1a1a1a !important;
    }
}

/* ========================================
   メンバページ用フィルタスタイル
   ======================================== */

.member-filter-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 0.5rem;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.member-filter-accordion {
    flex-shrink: 0;
    position: relative;
    max-width: 250px;
    width: 100%;
    margin-left: auto;
    margin-bottom: 0.5rem;
}

.member-filter-accordion:last-child {
    margin-bottom: 0;
}

.member-filter-accordion .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-background, #f8f9fa);
    border-radius: 4px;
    border: 1px solid #e9ecef;
    min-width: 100px;
}

.member-filter-accordion .filter-header:hover {
    background-color: #e9ecef;
}

.member-filter-accordion .filter-header.active {
    background-color: var(--page-theme-primary-light, #e0e7ff);
    border-color: var(--page-theme-primary, #3b82f6);
}

.member-filter-accordion .filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    margin-right: 0.25rem;
}

.member-filter-accordion .filter-current {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--page-theme-primary, #3b82f6);
    background-color: transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin: 0 0.25rem;
}

.member-filter-accordion .accordion-icon {
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.3s ease;
    margin-left: 0.25rem;
}

.member-filter-accordion .filter-header.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--page-theme-primary, #3b82f6);
}

/* メンバページ用フィルタアコーディオン - simple-filter-accordionのスタイルを上書き */
.simple-filter-accordion.member-filter-accordion .filter-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    padding: 0 !important;
    margin-top: 0;
    min-width: 150px;
    max-width: 250px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

.simple-filter-accordion.member-filter-accordion .filter-content.expanded {
    max-height: 200px !important;
    padding: 0.75rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: var(--color-white, #ffffff);
    border: 1px solid #e9ecef;
    margin-top: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-filter-accordion .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.member-filter-accordion .filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-background, #f8f9fa);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.75rem;
    font-weight: 500;
    color: #495057;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2rem;
    height: auto;
    line-height: 1.2;
}

/* 空欄の地区ボタン（テキストなし）のスタイル */
.member-filter-accordion .filter-button:empty {
    min-width: 2rem;
    min-height: 2rem;
    height: 2rem;
}

.member-filter-accordion .filter-button:hover {
    border-color: var(--page-theme-primary, #3b82f6);
    background-color: var(--page-theme-primary-light, #e0e7ff);
    transform: translateY(-1px);
}

.member-filter-accordion .filter-button.active {
    border-color: var(--page-theme-primary, #3b82f6);
    background-color: var(--page-theme-primary, #3b82f6);
    color: white;
}

/* 送迎調整ページのダークモード対応（続き） */
@media (prefers-color-scheme: dark) {
    /* 送迎車カード */
    .assignment-card {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .assignment-card.has-participants {
        border-color: var(--page-theme-primary); /* アクセント色はそのまま */
        background-color: rgba(166, 91, 255, 0.1); /* ダークモード: 薄い紫の背景（透明度を下げる） */
    }
    
    .assignment-card.drag-over {
        border-color: var(--page-theme-primary); /* アクセント色はそのまま */
        background-color: rgba(166, 91, 255, 0.15); /* ダークモード: より濃い紫の背景 */
    }
    
    /* 送迎車カード内の要素 */
    .car-header {
        border-bottom-color: #374151; /* ダークモード: 暗いボーダー */
    }
    
    .car-title {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .car-capacity-info {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    .car-info {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .car-name {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .car-capacity,
    .car-participants,
    .car-memo {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    /* 割り当てられた参加者 */
    .participant-assigned {
        background-color: rgba(166, 91, 255, 0.1); /* ダークモード: 薄い紫の背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白の文字 */
    }
    
    .participant-assigned:hover {
        background-color: rgba(166, 91, 255, 0.15); /* ダークモード: より濃い紫の背景 */
        border-color: var(--page-theme-primary); /* アクセント色のボーダー */
    }
    
    .participant-name-assigned {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .participant-details-assigned,
    .participant-grade-assigned,
    .participant-member-no-assigned {
        color: #d1d5db; /* ダークモード: 明るいグレー */
    }
    
    .participant-assigned .remove-btn {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    .participant-assigned .remove-btn:hover {
        background-color: #374151; /* ダークモード: より明るい背景 */
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* ダークモード：コントロールパネル（他のパネルと同様にvar(--color-white)を使用するため、明示的なスタイルは不要） */
    /* var(--color-white)とvar(--color-text-primary)がダークモードで自動的に変更されるため、追加のスタイルは不要 */
    
    /* ドロップゾーン */
    .drop-zone {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    /* 参加者ページのパネル見出し */
    .participant-planning .participant-section h3 {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* メモ入力欄 */
    .memo-textarea {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-color: #374151; /* ダークモード: 暗いボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白の文字 */
    }
    
    .memo-textarea:focus {
        border-color: var(--page-theme-primary); /* アクセント色のボーダー */
    }
    
    /* 参加者ページのメモ編集ボタン */
    #participantListContent .memo-edit-btn {
        color: #9ca3af; /* ダークモード: グレー */
    }
    
    #participantListContent .memo-edit-btn:hover {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* 1. 参加者ページの参加者パネル内のメンバ名の文字色 */
    #participantListContent .participant-name {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 2. 送迎車ページの送迎車パネル内の車名の文字色 */
    #eventCarListContent .event-car-name {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 3. 送迎車ページの送迎車パネル内の鉛筆マークをグレーに */
    #eventCarListContent .memo-edit-btn {
        color: #9ca3af !important; /* 参加者ページと同じグレー */
    }
    
    #eventCarListContent .memo-edit-btn:hover {
        color: #f3f4f6 !important; /* ダークモード: ほぼ白 */
    }
    
    #eventCarListContent .memo-edit-btn .memo-icon,
    #eventCarListContent .memo-edit-btn .memo-icon svg,
    #eventCarListContent .memo-edit-btn .memo-icon .icon {
        color: #9ca3af !important;
        fill: #9ca3af !important;
    }
    
    /* 参加者ページの参加者詳細 */
    #participantListContent .participant-details {
        color: #d1d5db !important; /* ダークモード: 明るいグレー */
    }
    
    /* ダークモード：参加者ページの学年・地区 */
    #participantListContent .participant-grade,
    #participantListContent .participant-member-no {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        color: var(--color-text-primary, #ffffff) !important; /* ダークモード: 白 */
    }
    
    /* ダークモード：参加者ページの出欠選択ボタン */
    #participantListContent .participation-btn:not(.active) {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
        color: var(--color-text-primary, #ffffff) !important; /* ダークモード: 白 */
    }
    
    #participantListContent .participation-btn:hover {
        border-color: var(--page-theme-primary) !important; /* アクセント色のボーダー */
    }
    
    #participantListContent .participation-btn.active {
        background-color: var(--page-theme-primary) !important; /* アクセント色はそのまま */
        color: white !important; /* 白文字はそのまま */
    }
    
    /* ダークモード：送迎車ページの定員・地区 */
    #eventCarListContent .event-car-capacity,
    #eventCarListContent .event-car-management-no {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        color: var(--color-text-primary, #ffffff) !important; /* ダークモード: 白 */
    }
    
    /* ダークモード：送迎車ページの出欠選択ボタン */
    #eventCarListContent .participation-btn:not(.active) {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
        color: var(--color-text-primary, #ffffff) !important; /* ダークモード: 白 */
    }
    
    #eventCarListContent .participation-btn:hover {
        border-color: var(--page-theme-primary) !important; /* アクセント色のボーダー */
    }
    
    #eventCarListContent .participation-btn.active {
        background-color: var(--page-theme-primary) !important; /* アクセント色はそのまま */
        color: white !important; /* 白文字はそのまま */
    }
    
    /* ステータス情報 */
    .status-info {
        background-color: #111827; /* ダークモード: より暗い背景 */
        border-left-color: var(--page-theme-primary); /* アクセント色のボーダー */
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    /* 成功/確認モーダルの本文テキスト（追加対応） */
    .participant-page .modal-body,
    body:has(.participant-planning) .modal-body,
    .transport-planning-page .modal-body,
    body:has(.transport-planning) .modal-body {
        color: #f3f4f6; /* ダークモード: ほぼ白 */
    }
    
    .participant-page .modal-body p,
    body:has(.participant-planning) .modal-body p,
    .transport-planning-page .modal-body p,
    body:has(.transport-planning) .modal-body p,
    .participant-page .modal-body span,
    body:has(.participant-planning) .modal-body span,
    .transport-planning-page .modal-body span,
    body:has(.transport-planning) .modal-body span {
        color: var(--color-text-primary, #f3f4f6); /* ダークモード: ほぼ白 */
    }
    
    /* 参加者出欠確定確認モーダル内のテキスト色（ダークモード） */
    #participantConfirmationModal .modal-body p,
    #participantConfirmationModal .modal-body li,
    #participantConfirmationModal .modal-body ul li {
        color: var(--color-text-primary, #f3f4f6);
    }
    
    /* 参加者出欠確定確認モーダル内のリストアイテムの色を明示的に設定（ダークモード） */
    #participantConfirmationModal #unansweredParticipants li {
        color: var(--color-text-primary, #f3f4f6);
    }
    
    /* 送迎車出欠確定確認モーダル内のテキスト色（ダークモード） */
    #eventCarConfirmationModal .modal-body p,
    #eventCarConfirmationModal .modal-body li,
    #eventCarConfirmationModal .modal-body ul li {
        color: var(--color-text-primary, #f3f4f6);
    }
    
    /* 送迎車出欠確定確認モーダル内のリストアイテムの色を明示的に設定（ダークモード） */
    #eventCarConfirmationModal #unansweredEventCars li {
        color: var(--color-text-primary, #f3f4f6);
    }
    
    /* 予定選択パネル内の日付の文字色（ダークモード） */
    .schedule-item .schedule-date,
    .schedule-item .schedule-single-line .schedule-date,
    .schedule-date {
        color: #d1d5db !important; /* ダークモード: 明るいグレー */
    }
}

/* ========================================
   他の予定モーダルスタイル
   ======================================== */
.other-schedules-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 10px;
}

.other-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.other-schedule-item:hover {
    background-color: var(--color-hover);
    border-color: var(--page-theme-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--color-shadow);
}

.other-schedule-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    min-width: 120px;
}

.other-schedule-name {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    flex: 1;
    text-align: left;
    margin-left: 1rem;
}

@media (prefers-color-scheme: dark) {
    .other-schedule-item {
        background-color: #1f2937;
        border-color: #374151;
    }
    
    .other-schedule-item:hover {
        background-color: #374151;
        border-color: var(--page-theme-primary);
    }
    
    .other-schedule-date,
    .other-schedule-name {
        color: #f3f4f6;
    }
}

/* === フッターリンクスタイル === */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-text-primary, #111827);
    text-decoration: underline;
}

.footer-separator {
    color: var(--color-text-secondary, #6b7280);
}

.footer p {
    margin: 0;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* === フッターリンクスタイル === */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-text-primary, #111827);
    text-decoration: underline;
}

.footer-separator {
    color: var(--color-text-secondary, #6b7280);
}

.footer p {
    margin: 0;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* PODページのPOD記録アイコンの色設定 */
.pod-page .pod-record-icon,
.participant-page .pod-record-icon,
body:has(.participant-planning) .pod-record-icon {
    color: var(--page-theme-primary, #ed6666);
    fill: var(--page-theme-primary, #ed6666);
}

.pod-page .pod-record-icon svg,
.participant-page .pod-record-icon svg,
body:has(.participant-planning) .pod-record-icon svg,
.pod-page .pod-record-icon svg use,
.participant-page .pod-record-icon svg use,
body:has(.participant-planning) .pod-record-icon svg use {
    color: var(--page-theme-primary, #ed6666);
    fill: var(--page-theme-primary, #ed6666);
}

/* POMページのランキングアイコンの色設定 - styles-colorful.cssの変数を使用 */
.pom-page .pom-ranking-icon,
body:has(.pom-page) .pom-ranking-icon {
    color: var(--color-header-pom);
    fill: var(--color-header-pom);
}

.pom-page .pom-ranking-icon svg,
body:has(.pom-page) .pom-ranking-icon svg,
.pom-page .pom-ranking-icon svg use,
body:has(.pom-page) .pom-ranking-icon svg use {
    color: var(--color-header-pom);
    fill: var(--color-header-pom);
}