/* Project Custom CSS - Refactored for Tenant Customization & M3 Design */

:root {
    --nav-accent: #3e4695;
    --nav-accent-hover: #7a77b8;
    --nav-accent-dark: #333d7a;
    --primary-link: #1976d2;
    --color-badge-size: 0.75rem;
    --color-badge-radius: 2px;
    --color-badge-border: 1px solid rgba(0, 0, 0, 0.2);
    --color-badge-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    --color-badge-gap: 0.35rem;
    /* Staff accent (Amber) for admin-only sidebar group */
    --staff-accent-amber: #F59E0B;
}

/* Base Style Overrides */
html {
    min-width: 320px;
    min-height: 320px;
}

body {
    min-width: 320px;
    min-height: 320px;
    font-family: var(--tenant-font-main, system-ui, -apple-system, sans-serif);
    background-color: var(--tenant-surface, #f8f9fa);
}

a {
    color: var(--tenant-primary, var(--primary-link));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

[x-cloak] {
    display: none !important;
}

/* Color badge (shared component) */
.color-badge {
    display: inline-block;
    width: var(--color-badge-size);
    height: var(--color-badge-size);
    border-radius: var(--color-badge-radius);
    border: var(--color-badge-border);
    box-shadow: var(--color-badge-shadow);
    margin-right: var(--color-badge-gap);
    vertical-align: -0.1rem;
}

/* Typography & Components Radius */
.card, .btn, .modal-content, .form-control, .form-select {
    border-radius: var(--tenant-radius-sm, 0.375rem);
}

.card {
    border: none;
    box-shadow: var(--tenant-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.card-header {
    background-color: var(--tenant-header-bg) !important;
    color: var(--tenant-header-text) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: var(--tenant-radius-sm) var(--tenant-radius-sm) 0 0 !important;
}

.card-header-neutral {
    background: linear-gradient(180deg, #5b6470 0%, #4b5563 100%) !important;
    color: #ffffff !important;
    border-bottom-color: #374151 !important;
    font-weight: 600;
}

.card-header-readonly {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    color: #334155 !important;
    border-bottom-color: #94a3b8 !important;
    font-weight: 600;
}

/* Card header buttons adjustment for visibility */
.card-header .btn-tenant-outline-secondary {
    color: var(--tenant-header-text) !important;
    border-color: var(--tenant-header-text) !important;
    opacity: 0.8;
}

.card-header .btn-tenant-outline-secondary:hover {
    background-color: var(--tenant-header-text) !important;
    color: var(--tenant-header-bg) !important;
    opacity: 1;
}

/*
  Accessibility: Ensure readable text inside colored headers
  - Bootstrap の .text-muted / .text-body-secondary が背景色とぶつかると可読性が落ちるため、
    ヘッダー内ではテナント指定の前景色に揃える（わずかに減光して“控えめ”表現を維持）。
*/
.card-header .text-muted,
.card-header .text-body-secondary {
    color: var(--tenant-header-text) !important;
    opacity: 0.8; /* muted のニュアンスだけ残す */
}

/* Modal header でも同じ問題が起きるため、同様に補正する */
.modal-header .text-muted,
.modal-header .text-body-secondary,
.modal-header .text-secondary,
.modal-header .text-body-secondary-emphasis {
    color: var(--tenant-header-text) !important;
    opacity: 0.85; /* モーダルはタイトル近接なので少しだけ濃く */
}

/* Button & State Layer Overrides */
.btn-tenant-primary {
    background-color: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: var(--tenant-on-primary);
}

/* ---------------------------------------------
   Modal Shape (header/footer corner consistency)
   - Dialog はカード等よりも大きめの角丸を既定にする
   - overflow:hidden でヘッダー/フッターとの角丸差異を解消
---------------------------------------------- */
.modal-content {
    /* テナントによらず Bootstrap 標準相当の角丸に固定 */
    border-radius: 0.5rem !important;
    overflow: hidden;
}

/* modal の上端/下端も同じ radius に固定（背景とのズレ防止 + 一貫性） */
.modal-header {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;

    /* タイトル文字と枠の余白/高さを安定化 */
    padding: 0.75rem 1rem !important;
    /* Bootstrap互換: header は flex であることが前提 */
    display: flex !important;
    align-items: center !important;

    /* “左右に分かれる”を確実にする（margin-left:auto が死んでも崩れない） */
    justify-content: space-between !important;
    /* 念のため：ヘッダー内で折り返して×が落ちるのを防ぐ */
    flex-wrap: nowrap !important;
}

/* Tenant themed modal header (align with card-header) */
.modal .modal-header {
    background-color: var(--tenant-header-bg) !important;
    color: var(--tenant-header-text) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.modal .modal-header .modal-title {
    color: inherit !important;
}

/* Close button visibility on dark headers */
.modal .modal-header .btn-close {
    filter: invert(1) saturate(0) brightness(1.6);
    opacity: .9;
}

/* タイトルが謎に横幅を取りすぎても、×が落ちないように制御 */
.modal-header .modal-title {
    margin: 0 !important;
    line-height: 1.2;
    flex: 1 1 auto !important;
    min-width: 0; /* 長いタイトルでもレイアウトを壊しにくくする */
}

/* 閉じるボタンの位置ズレ対策（ヘッダー高さと揃える + 右端固定） */
.modal-header .btn-close {
    margin: 0 0 0 auto !important; /* Bootstrap流儀の保険 */
    flex: 0 0 auto !important;
}

.modal-footer {
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;

    padding: 0.75rem 1rem !important;
}

/* Footer subtle separation (consistent across apps) */
.modal .modal-footer {
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトルの “謎マージン” を潰して、見た目を安定化 */
.modal-header .modal-title {
    margin: 0 !important;
    line-height: 1.2;
}

/* 閉じるボタンの位置ズレ対策（ヘッダー高さと揃える） */
.modal-header .btn-close {
    margin: 0 !important;
}

.btn-tenant-primary:hover, .btn-tenant-primary:focus, .btn-tenant-primary:active {
    filter: brightness(0.9);
    background-color: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: var(--tenant-on-primary);
}

.btn-tenant-outline-primary {
    color: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.btn-tenant-outline-primary:hover, .btn-tenant-outline-primary:focus, .btn-tenant-outline-primary:active {
    background-color: var(--tenant-primary);
    color: var(--tenant-on-primary);
}

/*
  Accessibility: Active button inner helper text contrast
  - アクティブ状態のボタン背景（primary色）の上に配置された .text-muted 等の可読性を担保。
  - tenant_id 切替に追従するよう、前景色トークン --tenant-on-primary を使用。
*/
.btn-tenant-primary .text-muted,
.btn-tenant-primary .text-body-secondary,
.btn-primary.active .text-muted,
.btn-primary.active .text-body-secondary,
.btn-outline-primary.active .text-muted,
.btn-outline-primary.active .text-body-secondary,
.btn-check:checked + .btn.btn-primary .text-muted,
.btn-check:checked + .btn.btn-outline-primary .text-muted,
.btn-tenant-outline-primary.active .text-muted,
.btn-tenant-outline-primary.active .text-body-secondary {
    color: var(--tenant-on-primary) !important;
    opacity: 0.85; /* "muted" のニュアンスは残す */
}

.btn-tenant-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.btn-tenant-secondary:hover, .btn-tenant-secondary:focus, .btn-tenant-secondary:active {
    filter: brightness(0.9);
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.btn-tenant-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-tenant-outline-secondary:hover, .btn-tenant-outline-secondary:focus, .btn-tenant-outline-secondary:active {
    background-color: #6c757d;
    color: #ffffff;
}

.btn-tenant-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.btn-tenant-danger:hover, .btn-tenant-danger:focus, .btn-tenant-danger:active {
    filter: brightness(0.9);
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.btn-tenant-success {
    background-color: #198754;
    border-color: #198754;
    color: #ffffff;
}

.btn-tenant-success:hover, .btn-tenant-success:focus, .btn-tenant-success:active {
    filter: brightness(0.9);
    background-color: #198754;
    border-color: #198754;
    color: #ffffff;
}

.btn-tenant-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-tenant-warning:hover, .btn-tenant-warning:focus, .btn-tenant-warning:active {
    filter: brightness(0.9);
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

/* Navbar styles */
.navbar-tenant {
    background-color: var(--tenant-navbar-bg) !important;
    min-height: var(--tenant-touch-target, 48px);
    height: auto !important;
    box-shadow: var(--tenant-shadow-1);
    z-index: 1030;
    padding: 0.25rem 0; /* 垂直方向のパディングを制御 */

    /* 重要: bodyが縦Flex(h-100)のページで、navbarが縮んで中身がはみ出すのを防ぐ */
    flex: 0 0 auto;
}

.navbar-tenant .container-fluid {
    min-height: calc(var(--tenant-touch-target, 48px) - 0.5rem);
}

/* 重要: 上段の直後にある下段メニューバー(navbar)も縮ませない */
.navbar-tenant + nav.navbar {
    flex: 0 0 auto;
}

/*
  Navbar menu: 「管理者ツール」を“管理者専用”として視覚的に識別できるようにする。
  既存の Bootstrap 5.3 の warning 系CSS変数を利用し、追加のカラーパレット定義を不要にする。
*/
.admin-tools-link {
    background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.2));
    color: var(--bs-warning-text-emphasis, #664d03) !important;
    border: 1px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.35));
    border-radius: var(--tenant-radius-sm, 0.375rem);
}

.admin-tools-link:hover,
.admin-tools-link:focus {
    /* nav-link の hover 下線よりも「ラベル感」を優先 */
    text-decoration: none;
    filter: brightness(0.98);
}

.navbar-tenant .navbar-brand {
    color: var(--tenant-navbar-text) !important;
    white-space: normal; /* 折り返しを許可 */
    line-height: 1.2;
    word-break: break-word;
}

.navbar-tenant .nav-link {
    color: var(--tenant-navbar-text) !important;
    opacity: 0.85;
}

.navbar-tenant .nav-link:hover {
    opacity: 1;
}

/* ユーザー領域のスタイル調整 */
.navbar-user-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.user-profile-dropdown {
    background: none;
    border: none;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    color: var(--tenant-navbar-text);
    transition: all 0.2s;
    outline: none;
    border-radius: var(--tenant-radius-sm);
}

@media (max-width: 576px) {
    .user-profile-dropdown {
        padding: 2px 4px;
    }
}

.user-profile-dropdown:hover,
.user-profile-dropdown:focus {
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    outline: none;
}

.navbar-user-area .logout-link {
    color: var(--tenant-navbar-text) !important;
    opacity: 0.85;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    background: none !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0;
}

.navbar-user-area .logout-link:hover {
    opacity: 1;
    text-decoration: none;
}

.avatar-wrapper-32 {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.avatar-img-32 {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.avatar-img-150 {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* ユーザー名の省略表示設定 (モバイル対応) */
.username-text {
    color: var(--tenant-navbar-text) !important;
    font-weight: 600 !important;
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .username-text {
        max-width: 80px; /* モバイルではさらに短く */
    }
}

.avatar-icon {
    font-size: 24px !important;
    color: var(--tenant-navbar-text) !important;
}

/* --- イベントバッジの視認性向上 --- */

/* 1. 受付状態 (Registration Status) - 塗りつぶし＋丸型 */
.badge-reg-status {
    border-radius: 50rem !important; /* Pill形状 */
    padding: 0.4em 0.8em !important;
    min-width: 85px;
    text-align: center;
    font-weight: 600;
}

/* 2. 公開状態 (Publish Status) - 枠線のみのゴーストスタイル */
.badge-pub-status {
    background-color: transparent !important;
    border: 1px solid currentColor !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    padding: 0.25em 0.5em !important;
    opacity: 0.9;
}

/* アウトライン版の色補正（Bootstrapのbg-*クラスと併用する場合） */
.badge-pub-status.bg-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.badge-pub-status.bg-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
}

.badge-pub-status.bg-success {
    color: #198754 !important;
    border-color: #198754 !important;
}

.badge-pub-status.bg-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

/* リマインダー用のラベル（バッジ） */
.reminder-tag-badge {
    background-color: #e2e3e5 !important; /* bg-secondary-subtle */
    color: #41464b !important; /* text-secondary-emphasis */
}

/* ======================== */
/* Sidebar: STAFF group (A案) */
/* ======================== */
/*
  目的: ダークサイドバー上でスタッフ専用エリアを“過度に塗りつぶさず”差別化。
  手法: 左レール（accent）+ 微弱な背景 + バッジ/フォーカス一貫性。
  作用範囲: サイドバー内の staff-group のみ。
*/

#sidebar-container .sidebar-section .accordion-button::after {
    display: none;
}

#sidebar-container .sidebar-section .sidebar-accordion-toggle-icon {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

#sidebar-container .sidebar-section .accordion-button:not(.collapsed) .sidebar-accordion-toggle-icon {
    transform: rotate(180deg);
}

#sidebar-container .sidebar-section .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.06);
}

#sidebar-container .sidebar-section .sidebar-section-menu {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.14);
}

#sidebar-container .staff-group {
    border-left: 3px solid var(--staff-accent-amber);
    border-radius: 6px;
}

/* STAFF pill badge */
#sidebar-container .staff-badge {
    background-color: rgba(245, 158, 11, 0.18);
    color: #fef3c7; /* amber-100 */
    border: 1px solid rgba(245, 158, 11, 0.7);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: .02em;
}

/* Links inside staff group */
#sidebar-container .staff-group .nav-link {
    color: #CBD5E1; /* slate-300 */
    border-left: 3px solid transparent; /* reserve space for active */
    border-radius: 0;
}

#sidebar-container .staff-group .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(245, 158, 11, 0.4);
    text-decoration: none;
}

#sidebar-container .staff-group .nav-link.active,
#sidebar-container .staff-group .nav-link.active:focus {
    background: rgba(11, 18, 32, 0.8);
    color: #ffffff;
    border-left-color: var(--staff-accent-amber);
}

#sidebar-container .staff-group .nav-link:focus-visible {
    outline: 1px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

/* Tenant selector (ALL tenants) */
#sidebar-container #sidebar-tenant-select {
    color: inherit;
    background-color: transparent;
    border-color: rgba(245, 158, 11, 0.2);
}

#sidebar-container #sidebar-tenant-select:focus {
    border-color: var(--staff-accent-amber);
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

/* ======================== */
/* Sidebar: STAFF card (B案) */
/* ======================== */
/*
  A案（左レール）は残しつつ、B案ではカード化して視認性とまとまりを向上。
  - ドロップダウンとメニューを一体化
  - STAFFバッジはカードに1つだけ配置
*/
#sidebar-container .staff-card {
    /* 角丸は tenant 変数に左右されず “デフォルト” に固定（ヘッダーとのズレ防止） */
    border-radius: 0.375rem !important;

    /* カードらしさの強調：背景の白成分を増やし、枠線のコントラストを上げる */
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.5); /* slate-400 相当 */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#sidebar-container .staff-card .card-header {
    /* グローバルの .card-header { border-radius: var(--tenant-radius-sm) ... } を上書きして固定 */
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;

    background: rgba(255, 255, 255, 0.06);
    color: #F3F4F6; /* text-base on dark → 1段明るく */
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

#sidebar-container .staff-card .section-title {
    font-weight: 600;
}

#sidebar-container .staff-card .staff-badge {
    background-color: rgba(245, 158, 11, 0.18);
    color: #fef3c7; /* amber-100 */
    border: 1px solid rgba(245, 158, 11, 0.7);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: .02em;
}

#sidebar-container .staff-card .form-label {
    color: #E5E7EB; /* subtle→明度アップで可読性向上 */
}

#sidebar-container .staff-card .form-select.staff-tenant-select {
    /* 選択中テキストの視認性を最優先で強化 */
    color: #F9FAFB !important; /* ほぼ白に近い前景色 */
    font-weight: 600; /* わずかに太くして判別性UP */
    background-color: rgba(255, 255, 255, 0.12); /* コントラストを一段強化 */
    border-color: rgba(245, 158, 11, 0.95);
    /* caret をAmberで再描画（Bootstrap 5.3変数） */
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3e%3cpath d='M3.204 5h9.592L8 10.481 3.204 5z'/%3e%3c/svg%3e");
}

#sidebar-container .staff-card .form-select.staff-tenant-select:hover {
    border-color: rgba(245, 158, 11, 1);
}

#sidebar-container .staff-card .form-select.staff-tenant-select:focus {
    border-color: var(--staff-accent-amber) !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.4);
}

/* ドロップダウンリスト（OS依存で反映されない環境もあるが、適用できる範囲で濃色に） */
#sidebar-container .staff-card .form-select.staff-tenant-select option {
    color: #111827; /* slate-900 */
}

#sidebar-container .staff-card .nav-link {
    color: #E5E7EB; /* text-base。既定よりコントラスト強化 */
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
}

#sidebar-container .staff-card .nav-link:hover {
    background: rgba(255, 255, 255, 0.10);
    text-decoration: underline; /* 他セクションと同じホバー下線を表示 */
}

#sidebar-container .staff-card .nav-link.active,
#sidebar-container .staff-card .nav-link.active:focus {
    background: rgba(11, 18, 32, 0.8);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5);
}

#sidebar-container .staff-card .nav-link:focus-visible {
    outline: 1px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

/* ======================== */
/* Menu items: clickable cursor */
/* ======================== */
/*
  管理者メニュー（list-group）や各種ドロップダウン等の「メニュー項目」は
  hover/focus 時にクリック可能であることが分かるよう、ポインタカーソルを統一。
  - Bootstrap のクラス（.list-group-item-action / .dropdown-item / .nav-link）に寄せて共通化
  - disabled 状態は除外
*/
.list-group .list-group-item-action:not(.disabled):not(:disabled):hover,
.list-group .list-group-item-action:not(.disabled):not(:disabled):focus,
.dropdown-menu .dropdown-item:not(.disabled):not(:disabled):hover,
.dropdown-menu .dropdown-item:not(.disabled):not(:disabled):focus,
.nav .nav-link:not(.disabled):hover,
.nav .nav-link:not(.disabled):focus {
    cursor: pointer;
}

/* ======================== */
/* Floating action bar (screen-specific menu entrypoint) */
/* ======================== */
/*
  モバイル等の幅狭画面で「画面固有メニュー」がコンテンツの最後に回り込んで到達しづらい問題への対策。
  - 画面下部に固定のバーを置き、タップで offcanvas-bottom（ボトムシート）を開く。
  - 画面固有メニューの“作法”として、スタイル定義は各アプリCSSではなく style.css に集約する。
*/
.floating-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040; /* offcanvas(1050) より下、通常コンテンツより上 */

    /* フル幅の固定フッターバー（ピルではなく footer UI として“接地”させる） */
    padding: 8px 12px calc(var(--tenant-safe-area-bottom, 0px) + 8px);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.10);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
    .floating-action-bar {
        background: rgba(255, 255, 255, 0.78);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

.floating-action-bar__btn {
    width: 100%;
    min-height: var(--tenant-touch-target, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* バー自体が背景/枠を持つため、ボタンは“中身”として扱う */
    padding: 10px 2px;
    border: 0;
    border-radius: var(--tenant-radius-sm, 0.375rem);
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.floating-action-bar__btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.floating-action-bar__btn:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
}

.floating-action-bar--admin {
    background: rgba(245, 158, 11, 0.22);
    border-top-color: rgba(245, 158, 11, 0.65);
    color: #111827; /* slate-900: 背景(amber)とのコントラストを確保 */
}

.floating-action-bar--admin .text-muted {
    /* Bootstrap の muted は薄すぎて読めないケースがあるため、バー内だけ補正 */
    color: rgba(17, 24, 39, 0.72) !important;
}

.floating-action-bar--admin .floating-action-bar__btn:hover {
    background: rgba(17, 24, 39, 0.06);
}

/* 固定バーに本文が隠れないようにするための下余白 */
.has-floating-action-bar {
    padding-bottom: calc(84px + var(--tenant-safe-area-bottom, 0px));
}

/* ======================== */
/* Forum: mobile admin menu (offcanvas-bottom) */
/* ======================== */
/*
  管理者メニューを開いたときに項目が見切れてスクロールバーが出て分かりにくい問題への対策。
  - offcanvas-bottom の高さを拡張して表示領域を増やす
  - 区分ラベル廃止に伴い、低背の divider を用意
*/
.topic-admin-sheet {
    /*
      画面高に応じて“かなり広め”に確保（それでも溢れる場合は offcanvas-body がスクロール）
      - 依頼: 現状より大きく（体感2倍くらい）
      - iOS等のアドレスバー伸縮を考慮し、dvh が使える環境では dvh を優先
    */
    /* 内容に合わせて伸縮しつつ、画面を占有しすぎないよう上限を設ける */
    --bs-offcanvas-height: auto;
    max-height: min(80vh, 720px);
}

@supports (height: 100dvh) {
    .topic-admin-sheet {
        max-height: min(80dvh, 720px);
    }
}

.topic-admin-sheet .offcanvas-body {
    /* iOS の安全領域ぶんを確保 */
    padding-bottom: calc(var(--tenant-safe-area-bottom, 0px) + 4px);
}

.admin-menu-divider {
    /* offcanvas / card 内で確実に見える“低背”の水平区切り線 */
    display: block;
    width: 100%;
    height: 0;
    margin: 4px 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.22);
}

/* ══════════════════════════════════════════
   Dashboard
   ══════════════════════════════════════════ */

/* サマリーカード ホバーエフェクト */
.dashboard-summary-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tenant-shadow-1);
}

.dashboard-summary-card .card-body {
    padding: 0.875rem 1rem;
    min-height: 120px;
}

.dashboard-summary-card .dashboard-stat-icon {
    font-size: 1.5rem;
}

.dashboard-summary-card .dashboard-stat-value {
    font-size: 1.9rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .dashboard-summary-card .card-body {
        padding: 0.75rem 0.875rem;
        min-height: 84px;
    }

    .dashboard-summary-card .dashboard-stat-icon {
        font-size: 1.25rem;
    }

    .dashboard-summary-card .dashboard-stat-value {
        font-size: 1.6rem;
    }

    .dashboard-summary-card .card-title,
    .dashboard-summary-card .small {
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
    }
}

.dashboard-compact-card .card-body {
    padding: 1rem;
    min-height: 120px;
}

.dashboard-reminder-card .dashboard-reminder-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dashboard-reminder-card .dashboard-reminder-heading .dashboard-stat-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.dashboard-reminder-card .card-title,
.dashboard-reminder-card .dashboard-stat-value {
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .dashboard-compact-card .card-body {
        padding: 0.875rem;
        min-height: 96px;
    }
}

.dashboard-news-card .card-body {
    max-height: 320px;
    overflow-y: auto;
}

/* CSS Bar Chart（管理者用：アクティブ率等の将来拡張用） */
.css-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
}

.css-bar-chart .bar {
    flex: 1;
    background: var(--tenant-primary);
    border-radius: var(--tenant-radius-sm) var(--tenant-radius-sm) 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

/* 会員状態バッヂ */
.badge-member-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5em;
    padding: 0.35em 0.65em;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.badge-member-status-active {
    background-color: #cfe2ff;
    color: #084298;
    border: 1px solid #b6d4fe;
}

.badge-member-status-suspended {
    background-color: #ffe5d0;
    color: #7a2e0e;
    border: 1px solid #ffb98a;
}

.badge-member-status-undelivered {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
}

.badge-member-status-deceased {
    background-color: #ffc107;
    color: #212529;
    border: 1px solid #e0a800;
}

.badge-member-status-withdrawn {
    background-color: #6c757d;
    color: #fff;
    border: 1px solid #6c757d;
}

.badge-member-status-unknown {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.badge-member-status-sm {
    min-width: 3em;
    padding: 0.25em 0.5em;
    font-size: 0.75rem;
}

/* ===== Toast: レスポンシブ配置 (#core-toast-container) ===== */
/*
 * clipboard.js の ensureToastContainer() で生成される #core-toast-container の配置制御。
 * CSS カスタムプロパティをメディアクエリで上書きする方式。
 * モバイル (< 768px): 上中央
 * PC / タブレット (>= 768px): 右上（ナビバーの高さ分オフセット）
 *
 * --core-toast-top は base.html の <header> 高さに追従させたいが、
 * CSS変数で動的に取得できないため、ナビバー実測値 56px + 余白で設定する。
 * 必要なら JS で --navbar-height を :root に設定して上書きする。
 */
:root {
    --navbar-height: 56px; /* Bootstrap navbarの標準高さ。JSで動的更新も可 */
}

#core-toast-container {
    /* モバイルデフォルト: 上中央、ナビバー直下 */
    --core-toast-top: calc(var(--navbar-height) + 0.5rem);
    --core-toast-right: auto;
    --core-toast-left: 50%;
    --core-toast-transform: translateX(-50%);
}

#core-toast-container .toast {
    pointer-events: auto; /* コンテナが pointer-events:none なので個別に戻す */
    min-width: 240px;
    max-width: min(400px, 88vw);
}

@media (min-width: 768px) {
    #core-toast-container {
        /* PC / タブレット: 右上、ナビバー直下 */
        --core-toast-top: calc(var(--navbar-height) + 0.5rem);
        --core-toast-right: 1rem;
        --core-toast-left: auto;
        --core-toast-transform: none;
    }
}