/* ============================================================
   base.css: 全画面共通の基礎（消防団システム）
   ============================================================ */
:root {
    --primary-color: #d9534f; --primary-hover: #c9302c;
    --text-main: #333; --text-muted: #666;
    --bg-body: #f8f9fa; --bg-card: #ffffff;
}
* { box-sizing: border-box !important; }
html, body { overflow-x: hidden !important; width: 100% !important; margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Arial, sans-serif; background: var(--bg-body); color: var(--text-main); line-height: 1.6; padding: 20px; }

/* 共通ヘッダー：ログイン情報やログアウト */
.main-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 30px; border-bottom: 3px solid #1890ff; padding-bottom: 10px; }
.header-user-info { display: flex !important; align-items: center !important; gap: 15px; background: #e6f7ff; padding: 8px 15px; border: 1px solid #91d5ff; border-radius: 6px; }
.logout-link { color: #ff4d4f; font-weight: bold; text-decoration: none; border-left: 1px solid #91d5ff; padding-left: 12px; }

/* 基本ボタン（どの画面でも使える素の状態） */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; text-decoration: none; border: none; }

/* iPhoneズーム防止16px */
.form-control, .search-input { font-size: 16px !important; }

@media (max-width: 768px) {
    body { padding: 10px; }
    .main-header {
        flex-direction: column !important;
        align-items: stretch !important; /* 👈 幅いっぱいを保証 */
        padding: 10px 5px !important;
        gap: 12px !important;
    }
    .header-user-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* 横並びを維持 */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important; /* 👈 枠線分を内側に含める */
    }
        /* 3. 【救出】ログアウトボタン：左端が切れないよう、独立させる */
    .logout-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* 👈 縁切り：左のボーダーをやめて、ボタンとして独立させる */
        border-left: none !important; 
        margin-left: 0 !important;
        
        /* 視認性の高い「赤ボタン」スタイルへ昇格 */
        background: #fff1f0 !important;
        color: #ff4d4f !important;
        border: 1px solid #ffa39e !important;
        border-radius: 6px !important;
        
        padding: 6px 12px !important;
        height: 38px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0 !important; /* 👈 絶対に押し潰させない！ */
    }
}
/* ============================================================
   📢 システム共通：メッセージ通知（全軍・共通パッキング）
   ============================================================ */
.msg-container { 
    margin: 10px 0 25px 0 !important; 
    width: 100% !important; 
    display: block !important; 
}

.badge-msg { 
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    padding: 14px 20px !important; 
    border-radius: 8px !important; 
    font-weight: bold !important; 
    font-size: 0.95rem !important; 
    border: 1px solid transparent !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; 
}

/* 成功・正常完了（消防グリーン） */
.badge-success { background: #f6ffed !important; color: #389e0d !important; border-color: #b7eb8f !important; }

/* 削除・エラー・警告（消防レッド） */
.badge-danger { background: #fff1f0 !important; color: #cf1322 !important; border-color: #ffa39e !important; }

/* 📱 [スマホ版共通] SE2・モバイル全幅規律 */
@media (max-width: 768px) {
    .msg-container { padding: 0 10px !important; box-sizing: border-box !important; }
    .badge-msg { display: flex !important; width: 100% !important; font-size: 0.85rem !important; padding: 12px 15px !important; }
}
