/* 既存アプリ（web/src/scss/app.scss, web/src/App.vue）のレイアウトを再現 */

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 #1AA1B0;
}
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に
 * カスタマイズしてビルドされている。そのため実アプリの .col-md-8 は 8/24=33.333% 幅になるが、
 * 本モックはCDNの標準Bootstrap（12列）を使っているため、そのままだと .col-md-8 が
 * 8/12=66.667% 幅になり実画面より大幅に広くなってしまう。ここで実アプリと同じ幅に補正する。
 */
@media (min-width: 768px) {
    .col-md-8 {
        width: 33.33333333% !important;
    }
}

/* テーマカラーの変更: #344871 → #1DB3C3（文字色は白のまま） */
.bg-primary {
    background-color: #1DB3C3 !important;
}

.btn-primary {
    color: #FFF;
    background-color: #1DB3C3;
    border-color: #1DB3C3;
}
.btn-primary:hover {
    color: #FFF;
    background-color: #189aa8;
    border-color: #17909d;
}
.btn-primary:focus,
.btn-primary.focus {
    color: #FFF;
    background-color: #189aa8;
    border-color: #17909d;
    box-shadow: 0 0 0 0.25rem rgba(29, 179, 195, 0.5);
}
.btn-primary:active,
.btn-primary.active {
    color: #FFF;
    background-color: #17909d;
    border-color: #158892;
}

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

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

/*
 * レスポンシブ対応（375px = iPhone SE 第2世代 まで考慮）。
 * 各日セル(.calendar-day)は通常時7列で均等幅（Bootstrapの.colがflex-grow/shrinkするため）。
 * ビューポートが狭まるとセル幅は比例して縮小するが、.calendar-dayのmin-widthに達すると
 * それ以上は縮まず、代わりに親の.calendar-scrollが横スクロールしてカレンダー全体を見られるようにする。
 * min-widthは、デスクトップ時のおおよその基準幅(約150px)の半分を目安にしている。
 */
.calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.calendar-day {
    min-width: 75px;
}
.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;
}

/* 応援カメラマン本人の「仮押さえ」カード（マイページ独自。確定予定とは別スタイルで表現） */
.tentative-card {
    border: 1px dashed #999 !important;
    background: #F3F3F3;
    color: #666;
    font-size: .75rem;
}

/* スケジュールカードの詳細未公開バッジ */
.badge-unpublished {
    font-size: .65rem;
}

/*
 * 詳細モーダル上部セクション（種類〜雨天時対応）。
 *
 * web/src/components/schedule/ScheduleModal.vue を再調査し、実際に使われている
 * クラス構成（.row / .row.g-0 / .input-group / 素の .d-flex / .col-md-N 相当の
 * 24分率）をそのまま踏襲する方針に統一した。レスポンシブ対応として独自に加えていた
 * min-width・flex-grow・折り返し用のブレークポイント調整はすべて廃止している。
 *
 * 理由：ScheduleModal.vue はPC専用のコンポーネントで、モバイル向けには全く別の
 * ScheduleModalForSp.vue が使われる。つまり「狭い画面でどう振る舞うべきか」の
 * 元になる実装が存在しないため、独自の折り返しロジックを追加すると必ず実物とは
 * 異なるものになってしまう。今回は実物との幅・間隔の一致を優先し、この一致を保てない
 * 独自の折り返し対応（min-width指定によるレスポンシブ化）は撤回した。
 * 実際、実クラス構成に忠実に戻した結果、Bootstrap標準の col-md-N が抱えていた
 * 「.modal-xlは992px未満だと500pxしかない」問題も、そもそもガター分の余白を
 * 使わない構成（.g-0 / .input-group）のため実用上ほぼ発生しない。
 *
 * .gcol-N は実アプリの $grid-columns:24 における col-md-N 相当（Nは24分率の値）。
 * width と flex の両方を指定しているのは、.row/.d-flexの中だけでなく、
 * 雨天時対応のように行(row)でラップされていない単独のブロック内でも
 * 同じ幅で描画されるようにするため（実アプリのBootstrapグリッドも同様の指定）。
 */
.gcol-1, .gcol-4, .gcol-5, .gcol-9, .gcol-15, .gcol-20 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.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%; }

/* .row.g-0 の中では実アプリ同様パディングを持たせない（ms-3/me-3で手動に間隔を取る） */
.g-0 > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}
/* .input-group の中（スケジュール名内のイベント選択＋自由入力）も同様にパディング無しで隣接させる */
.input-group > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}
/*
 * 時間未定・複数日のチェックボックス（素の .d-flex の中、.row は付いていない）。
 * .gcol-4自体のパディングと、中の.form-check-inline.form-control自体が持つ
 * パディングが二重にかかり、他の項目より余白が広く見えていたため、外側の
 * .gcol-4側のパディングは無しにする（チェックボックスの見た目は
 * .form-check-inline.form-control側のパディングだけで保たれる）。
 */
.d-flex:not(.row) > [class*="gcol-"] {
    padding-right: 0;
    padding-left: 0;
}