/* ============================================================
 * WASHハウス共通スタイル
 * デザインHTML（page-samples/wash_house）の各ページから抽出した
 * 共通スタイルをまとめたファイル
 * ============================================================ */

/* ----------------------------------------
 * 全体
 * ---------------------------------------- */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

/* ----------------------------------------
 * カラー（WASH-RED / cream）
 * ---------------------------------------- */
.bg-wash-red {
    background: linear-gradient(45deg, #ff4444, #cc3333) !important;
}

.bg-cream {
    background-color: #fff8dc !important;
}

.border-wash-red {
    border-color: #ff4444 !important;
}

.text-wash-red {
    color: #ff4444 !important;
}

.btn-wash-red {
    background-color: #ff4444 !important;
    border-color: #ff4444 !important;
    color: #fff;
}

.btn-wash-red:hover {
    background-color: #cc3333 !important;
    border-color: #cc3333 !important;
    color: #fff;
}

/* Bootstrap 5.0系では bg-danger-subtle / bg-warning-subtle が無いので補完 */
.bg-danger-subtle {
    background-color: #f8d7da !important;
}
.bg-warning-subtle {
    background-color: #fff3cd !important;
}
.bg-info-subtle {
    background-color: #cff4fc !important;
}
.bg-success-subtle {
    background-color: #d1e7dd !important;
}

/* ----------------------------------------
 * フラッシュメッセージ
 * ユーザー画面（タブレット・body.bg-light）のみ文字を大きく表示
 * ---------------------------------------- */
body.bg-light #flash_message .alert {
    font-size: 1.25rem;
}

/* メッセージ文中の改行（\n）をそのまま改行として表示する（セッションメッセージの文字列部分のみ） */
#flash_message .flash-message-text {
    white-space: pre-line;
}

/* ----------------------------------------
 * テンキー（暗証番号入力）
 * ---------------------------------------- */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    max-width: 360px;
    background-color: #ff4444;
    border-radius: 10px;
}

.keypad .zero-btn {
    grid-column: 1;
}

.btn-keypad {
    background-color: white !important;
    border-radius: 15px;
}

/* タッチ端末ではタップ後に:hoverが張り付いたままになるため、マウス等のホバー可能なデバイスのみ適用する */
@media (hover: hover) {
    .btn-keypad:hover {
        background-color: #fff8dc !important;
    }
}

/* ----------------------------------------
 * 見出しの先頭▼マーク
 * ---------------------------------------- */
.section-title::before {
    content: '▼';
    margin-right: 10px;
}

/* ----------------------------------------
 * ダッシュボードのメニューカード
 * ---------------------------------------- */
.menu-item {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: white;
    border-radius: 15px;
    padding: 30px 10px;
    text-align: center;
    font-weight: bold;
    /* 3列表示の最小幅(768px)でも最長ラベル「マニュアル / Q&A」がはみ出ない上限に合わせる */
    font-size: clamp(1.2rem, 3vw, 2rem);
    white-space: nowrap;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: white;
}

.menu-shift {
    background: linear-gradient(135deg, #F44336, #C62828);
}

.menu-attendance {
    background: linear-gradient(135deg, #2196F3, #1565C0);
}

.menu-general-notice {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
}

.menu-personal-notice {
    background: linear-gradient(135deg, #FFC107, #FFA000);
}

.menu-store-notice {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.menu-manual {
    background: linear-gradient(135deg, #607D8B, #37474F);
}

/* お知らせ種別: 店舗（紫）。Bootstrap に bg-purple がないため独自に定義 */
.bg-purple {
    background-color: #9C27B0 !important;
    color: #fff !important;
}

.menu-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.staff-info {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

/* ============================================================
 * 管理画面用スタイル
 * ============================================================ */

/* ----------------------------------------
 * サイドバー
 * ---------------------------------------- */
.admin-sidebar {
    min-height: 100vh;
    background: #2c3e50;
    color: white;
}

.admin-sidebar .nav-link {
    color: #ecf0f1;
    padding: 12px 20px;
    border-left: 3px solid transparent;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background: #34495e;
    border-left-color: #3498db;
    color: white;
}

/* ----------------------------------------
 * メインコンテンツ
 * ---------------------------------------- */
.admin-main-content {
    padding: 20px 40px;
    background: #f8f9fa;
    min-height: 100vh;
}

/* ----------------------------------------
 * 管理画面のbtn-primary（青系統に上書き）
 * 管理画面サイドバー配下にスコープを限定
 * ---------------------------------------- */
.admin-main-content .btn-primary {
    background: #3498db;
    border-color: #3498db;
}

.admin-main-content .btn-primary:hover {
    background: #2980b9;
    border-color: #2980b9;
}

/* ----------------------------------------
 * テーブル操作セル（編集・削除ボタン）
 * ---------------------------------------- */
.table-actions {
    white-space: nowrap;
}

/* ----------------------------------------
 * 管理者ログイン画面
 * ---------------------------------------- */
.admin-login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ログイン後のサイドバーと同じ色 */
    background: #2c3e50;
}

.admin-login-card {
    width: 100%;
    max-width: 400px;
}

/* ----------------------------------------
 * select2（検索付きセレクトボックス）
 * Bootstrap 5 の入力欄と高さ・見た目を揃える調整
 * ---------------------------------------- */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
}

/* バリデーションエラー時の枠線色 */
.is-invalid + .select2-container--default .select2-selection--single {
    border-color: #dc3545;
}

/* ----------------------------------------
 * 店頭タッチパネル用 圧縮スタイル
 * 画面の高さが700px以下（15型 800×600 タッチパネル等）のときだけ適用し、
 * ログイン系画面（暗証番号入力・エンジェルコード入力）を1画面に収める。
 * タブレット（縦長画面）には適用されず従来の大きさのまま表示される。
 * インラインstyleやBootstrapユーティリティより優先させるため!importantを使用。
 * ---------------------------------------- */
@media (max-height: 700px) {
    .login-top { margin-top: 0.25rem !important; padding-top: 0 !important; }
    .login-row { gap: 1.5rem !important; padding-bottom: 0.5rem !important; }
    .keypad .btn-keypad { width: 75px !important; height: 75px !important; font-size: 44px !important; }
    .login-panel { padding: 1rem !important; margin-bottom: 1rem !important; }
    .login-clear-btn { margin-bottom: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .login-display { min-height: 54px !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; margin-bottom: 1rem !important; }
    .login-submit-btn { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .login-return-box { gap: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .login-return-btn { height: 58px !important; font-size: 20px !important; }
}