/* ============================================================
   1. デザイン変数 (Design Tokens)
   ============================================================ */
:root {
    --primary-blue: #0d6efd;
    --border-color: #dee2e6;
    --edit-yellow: #ffca28;
    --pill-bg: #e7f1ff;
    --pill-text: #084298;
    --dark-bg: #212529;
}

/* ============================================================
   2. 基本リセット
   ============================================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
    /* Navbar(56px)の高さ分、コンテンツを下に押し下げる */
    padding-top: 56px !important;
}

/* ポップアップ表示中に背景スクロールを禁止するクラス */
body.popup-open {
    overflow: hidden !important;
}

/* ============================================================
   3. 共通コンポーネント: Pill (バッジ)
   ============================================================ */
.pill {
    display: inline-block;
    padding: 2px 10px;
    background-color: var(--pill-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--pill-text);
    text-decoration: none;
    margin: 2px;
}

/* ============================================================
   4. 共通コンポーネント: Dropdown / Modal (最重要)
   ------------------------------------------------------------
   一覧画面（Handsontable）と詳細画面（Switcher）で共通利用する
   カスタム・ポップアップ選択肢のデザイン定義です。
   ============================================================ */

/* ポップアップの外枠：縦に「検索・リスト・フッター」を整列 */
.multi-select-dropdown, .filter-modal {
    position: fixed;
    display: flex !important;
    flex-direction: column !important;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    /* Navbar (1030) の裏を通るように 1020 に設定 */
    z-index: 1020 !important; 
    min-width: 320px;
    max-width: 450px !important; /* */
    overflow: hidden !important;
}

/* Navbar自体の重なり順：常に最前面 */
.navbar.fixed-top {
    z-index: 1030 !important;
}

/* 枠線の出し分け */
.multi-select-dropdown { border: 1px solid var(--border-color); }
.filter-modal { border: 2px solid var(--primary-blue) !important; }

/* A. 検索セクション：Searchボックスとボタンを横並びに配置 */
.multi-select-dropdown-search, .filter-modal-search { 
    display: flex !important; 
    align-items: center !important;
    padding: 12px !important;
    gap: 10px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #eee !important;
}

/* 検索入力欄：高さを32pxに固定し、横いっぱいに広げる */
.dropdown-search-input, .filter-search-input { 
    flex: 1 !important;
    height: 32px !important;
    border: 1px solid #ced4da !important; 
    border-radius: 4px !important; 
    padding: 4px 10px !important; 
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Select All ボタン：検索欄と高さを32pxで統一 */
.btn-select-visible {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* B. リストセクション：縦幅制限とレイアウトシフト防止 */
.multi-select-dropdown-content, .filter-modal-body { 
    flex-grow: 1 !important;
    display: flex !important; 
    flex-direction: column !important; 
    max-height: 300px !important; 
    overflow-y: auto !important; 
    background-color: #fff !important;
    /* スクロールバーが出てもコンテンツが横にずれない設定 */
    scrollbar-gutter: stable; 
}

/* リストアイテム：長い名前は「...」で省略 */
.multi-select-dropdown-item, .filter-pill { 
    padding: 10px 16px !important; 
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important; 
    font-size: 14px; 
    color: #333; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0 !important;
}

.multi-select-dropdown-item:hover, .filter-pill:hover { 
    background-color: #f1f3f5 !important; 
}

/* 選択時：紫背景と左側の白アクセント線 */
.multi-select-dropdown-item.selected, .filter-pill.selected { 
    background-color: #6f42c1 !important; 
    color: #ffffff !important; 
    font-weight: bold !important; 
    border-left: 4px solid #ffffff !important; 
}

/* C. フッターセクション：ボタンを右寄せで固定 */
.multi-select-dropdown-footer, .filter-modal-footer { 
    padding: 12px 16px !important; 
    display: flex !important; 
    justify-content: flex-end !important; 
    gap: 8px !important; 
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
}

/* ============================================================
   5. ローディングマスク
   ============================================================ */
#global-loading-mask { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: rgba(255,255,255,0.7); 
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(2px); 
}