/* 既存アプリ（web/src/scss/app.scss, web/src/App.vue, web/src/pages/PageSchedule.vue）のレイアウトを再現
 * 社内スタッフ向けページ用スタイル。応援カメラマン向け（mock/photographer/css/style.css）とは別ファイル。
 * ヘッダー色はティールへの独自上書きはせず、実アプリの $primary: #344871（濃紺）をそのまま使う。 */

body {
    background: #EEEEF4;
    padding-top: 5rem;
}

.container {
    background: #FFF;
    padding-top: 1em;
    padding-bottom: 1em;
}

.container-main {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #FFF;
}

.logo {
    width: auto;
    height: 20px;
    vertical-align: middle;
}

header.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1rem -0.75rem 0;
    padding: 1rem;
    border-bottom: 1rem solid #EEEEF4;
    border-top: 3px solid #23324f;
}
header.page-title h1 {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.section {
    margin: 0 -0.75rem;
    padding: 1rem 0.75rem;
    border-top: 1px solid #DDDDD3;
    border-bottom: 1rem solid #EEEEF4;
}
.section:last-child {
    border-bottom: none;
}

::placeholder {
    color: #bbb !important;
}
input:invalid, select:invalid, textarea:invalid {
    background: #FDD;
}

/*
 * グリッド列数の補正
 * 実アプリ（web/src/scss/app.scss）は Bootstrap の $grid-columns をデフォルト12から24に
 * カスタマイズしてビルドされている。本モックはCDNの標準Bootstrap（12列）を使っているため、
 * 実アプリと同じ見た目になるよう幅を補正する（PageSchedule.vue / ScheduleModal.vue 実際のcol-md-N値に合わせる）。
 * - .col-md-1（予定詳細モーダルの「〜」区切り等）: 1/24=4.167%
 * - .col-md-2（アラートダッシュボード12ボックス、月ナビの矢印/今月ボタン）: 2/24=8.333%
 * - .col-md-3（検索・フィルタバーの予定名欄）: 3/24=12.5%
 * - .col-md-4（検索・フィルタバーの種類/店舗/学校欄）: 4/24=16.667%
 * - .col-md-5（予定詳細モーダルの学校名/人数欄/移動手段欄等）: 5/24=20.833%
 * - .col-md-6（月ナビ全体のラッパー、予定詳細モーダルのカメラマン選択/アラート無視欄）: 6/24=25%
 * - .col-md-7（検索・フィルタバーのカメラマン欄、予定詳細モーダルのカメラマン連絡済欄）: 7/24=29.167%
 * - .col-md-8（予定詳細モーダルの行事詳細・過去スケジュール等の履歴欄）: 8/24=33.333%
 * - .col-md-9（予定詳細モーダルのスケジュール名の固定値欄）: 9/24=37.5%
 * - .col-md-10（月ナビの月選択セレクト、応援カメラマン編集の住所/採用の経緯/繁忙期テーブル/マイページパスワード欄等）: 10/24=41.667%
 * - .col-md-11（応援カメラマン編集のスキル一覧「備考」列ヘッダー）: 11/24=45.833%
 * - .col-md-15（予定詳細モーダルのスケジュール名全体欄）: 15/24=62.5%
 * - .col-md-16（予定詳細モーダルのカメラマン欄全体）: 16/24=66.667%
 */
@media (min-width: 768px) {
    .col-md-1  { width: 4.16666667% !important; }
    .col-md-2  { width: 8.33333333% !important; }
    .col-md-3  { width: 12.5% !important; }
    .col-md-4  { width: 16.66666667% !important; }
    .col-md-5  { width: 20.83333333% !important; }
    .col-md-6  { width: 25% !important; }
    .col-md-7  { width: 29.16666667% !important; }
    .col-md-8  { width: 33.33333333% !important; }
    .col-md-9  { width: 37.5% !important; }
    .col-md-10 { width: 41.66666667% !important; }
    .col-md-11 { width: 45.83333333% !important; }
    .col-md-15 { width: 62.5% !important; }
    .col-md-16 { width: 66.66666667% !important; }
}

/*
 * 上記と同じ理由で、ブレークポイント接頭辞なしの素の .col-N（Bootstrapではモバイルファーストで常時適用される）も
 * 24分率に補正する。応援カメラマン一覧（PagePartnerList.vue）・予約確認モーダル（PartnerReservedScheduleModal.vue）
 * で使われている値のみ対応。
 * - .col-3（一覧の検索ボタン欄、予約確認モーダルの日付列）: 3/24=12.5%
 * - .col-6（一覧の氏名検索欄）: 6/24=25%
 * - .col-13（予約確認モーダルのスケジュール名列）: 13/24=54.167%
 */
.col-3  { width: 12.5% !important; }
.col-6  { width: 25% !important; }
.col-13 { width: 54.16666667% !important; }

/* app.scss 由来のユーティリティクラス（予定詳細モーダルの社用車テーブル・ラベル用） */
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.title { font-weight: bold; }

/* テーマカラー: 実アプリの $primary: #344871（濃紺）をそのまま使用（文字色は白のまま） */
.bg-primary {
    background-color: #344871 !important;
}

.btn-primary {
    color: #FFF;
    background-color: #344871;
    border-color: #344871;
}
.btn-primary:hover {
    color: #FFF;
    background-color: #2c3c60;
    border-color: #29384f;
}
.btn-primary:focus,
.btn-primary.focus {
    color: #FFF;
    background-color: #2c3c60;
    border-color: #29384f;
    box-shadow: 0 0 0 0.25rem rgba(52, 72, 113, 0.5);
}
.btn-primary:active,
.btn-primary.active {
    color: #FFF;
    background-color: #23304d;
    border-color: #202b46;
}

.btn-outline-primary {
    color: #344871;
    border-color: #344871;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #FFF;
    background-color: #344871;
    border-color: #344871;
}
.text-primary {
    color: #344871 !important;
}

.btn-link {
    color: #344871;
}
.btn-link:hover,
.btn-link:focus {
    color: #23304d;
}

/* =========================
 * アラートダッシュボード（PageSchedule.vue 14〜107行目 / AlertBox.vue 相当）
 * ========================= */
.alert-box-count {
    min-height: 3.5rem;
}

/* app.scss（42〜56行目）で定義されている12色のアラート色をそのまま再現 */
.alert-shortage-danger  { background: #ff7f7f; }
.alert-shortage-warning { background: #ffff7f; }
.alert-double-bookings  { background: #7fff7f; }
.alert-equipments       { background: #7f7fff; }
.alert-unassigned       { background: #ff7fbf; }
.alert-undecided        { background: #bf7fff; }
.alert-confirm-first    { background: #bfff7f; }
.alert-confirm-last     { background: #ffbf7f; }
.alert-spare-schedule   { background: #ff7fff; }
.alert-unselected       { background: #7fbfff; }
.alert-contact          { background: #7fffbf; } /* カメラマン未連絡（詳細内容未公開もここに統合） */
.alert-status           { background: #7fffff; }
.no-alert                { background: #e6e1e3; } /* 件数0のときの通常色 */

/* =========================
 * スケジュール一覧（カレンダー）
 * web/src/pages/PageSchedule.vue の該当CSSクラスを踏襲
 * ========================= */
.schedule-name {
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}

.calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.calendar-day {
    min-width: 90px;
}
.schedule-status {
    position: relative;
    background: #FFF;
}
.schedule-status-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.15;
    font-size: 2.8rem;
}
.today-color {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    border-radius: 50%;
}
.today-color-weekday {
    background-color: #212529 !important;
    color: #fff;
}
.today-color-saturday {
    background-color: #0dcaf0 !important;
    color: #fff;
}
.today-color-sunday {
    background-color: #dc3545 !important;
    color: #fff;
}

/* 日セル上のWブッキング／備品不足の丸バッジ（PageSchedule.vue 229〜254行目相当）。
 * 実アプリではフォントサイズ等の指定が無いため、モックとして視認しやすい固定サイズにする。 */
.alert-badge-circle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    border: 1px solid #6c757d;
}
.alert-badge-circle.alert-equipments {
    right: 32px;
}

/* アラート詳細モーダルのアイコンヘッダー（PhotographerAlertModal.vue / ScheduleAlertModal.vue 相当） */
.alert-modal-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* =========================
 * 予定詳細モーダル（ScheduleModal.vue 相当）
 * 応援カメラマン向けモック作成時に一度 ScheduleModal.vue を調査して抽出した
 * 実際のグリッドクラス（mock/photographer/css/style.css 参照）を、同一コンポーネントの
 * 再現としてそのまま流用する。.gcol-N は実アプリの $grid-columns:24 における
 * col-md-N 相当（Nは24分率の値）。
 * ========================= */
.gcol-1  { flex: 0 0 4.16667%;  width: 4.16667%; }
.gcol-4  { flex: 0 0 16.66667%; width: 16.66667%; }
.gcol-5  { flex: 0 0 20.83333%; width: 20.83333%; }
.gcol-9  { flex: 0 0 37.5%;     width: 37.5%; }
.gcol-15 { flex: 0 0 62.5%;     width: 62.5%; }
.gcol-20 { flex: 0 0 83.33333%; width: 83.33333%; }

.g-0 > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}
.input-group > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}
.d-flex:not(.row) > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}

/* カメラマン割当一覧の行（ScheduleModal.vue の schedule.photographers 一覧相当） */
.photographer-assign-row {
    border: 1px solid #DDDDD3;
    border-radius: .25rem;
    padding: .5rem .75rem;
}

/* FormSelectSearch.vue のscoped styleをそのまま移植（検索バーの種類/店舗/学校/対象者選択欄） */
.form-select-search-wrap { position: relative; }
.form-select-search-options { position: absolute; top: 100%; left: 0; width: 100%; max-height: 200px; overflow-y: scroll; background: #EEE; z-index: 1000; }
.form-select-search-option { display: block; width: 100%; padding: 5px 10px; border: none; background: none; text-align: left; }
.form-select-search-option-active { background: #DDD; }
.bg-composing { background-color: var(--bs-gray-200); }

/* =========================
 * 応援カメラマン編集画面（PagePartnerEdit.vue 相当。_未採番_応援カメラマンマイページ 要件5で追加する
 * マイページパスワード発行・再発行・停止UI用）
 * ========================= */

/* マイページパスワード欄（状態バッジ＋発行・再発行／停止ボタン） */
.partner-password-row .badge {
    font-size: .8rem;
    padding: .45em .65em;
}

/* 発行結果モーダルの平文パスワード表示欄。読み取り専用だが視認性を上げるため等幅・太字にする */
.password-once-box {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: .05em;
    background-color: #FFF !important;
}

/* FormUpload.vue（ファイル登録済み状態）の簡易再現 */
.form-upload-wrap-mock {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 1rem;
}
.form-upload-preview-icon {
    font-size: 3rem;
    color: #ADB5BD;
}
.form-uploader-remove-mock {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    border: none;
    background: #FFF;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    color: #dc3545;
}

/* =========================
 * 応援カメラマン一覧画面（PagePartnerList.vue 相当）
 * CDN標準Bootstrapの既定配色（table-primaryの薄い青、pageリンクの既定青）は、
 * 実アプリが $primary: #344871 でリビルドされたBootstrapとは異なるため上書きする。
 * ========================= */

/* 結果テーブルの行内テキストを縦中央に表示（操作列のボタン2つ分で行が高くなるため） */
.partner-list-table > tbody > tr > td {
    vertical-align: middle;
}

/* テーブルヘッダー（table-primary）の背景色を実アプリの配色に上書き */
.partner-list-table > thead > tr.table-primary > th {
    background-color: #D6DAE3;
    border-color: #c7cbd6;
}

/* ページネーション（Paginator.vue）の文字色を実アプリの $primary に上書き */
.pagination .page-link {
    color: #344871;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: #23304d;
}
.pagination .page-item.active .page-link {
    color: #FFF;
    background-color: #344871;
    border-color: #344871;
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
}