/* マイページ専用スタイルシート - mypage.css */
/* registration.cssから必要部分のみを移植・最適化 */

/* ========================================
   基本設定・共通スタイル
   ======================================== */

/* 横並びフォームレイアウト */
.registration-form {
    margin: 0;
}

.form-row {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid #fff;
    min-height: 60px;
}

.form-row:last-child {
    border-bottom: none;
}

.form-label {
    width: 25%;
    background-color: #99b8da;
    padding: 15px;
    font-weight: 500;
    color: #0b356c;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
}

.form-input {
    width: 75%;
    background-color: #f8f9fa;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.required::after {
    content: ' *';
    color: #dc3545;
}

.form-text {
    font-size: 0.875rem;
    margin-top: 5px;
}

/* 小さなラベル（生徒情報フォーム用） */
.form-label-small {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.25rem;
    display: block;
}

/* 確認画面用のスタイル */
.confirm-value {
    font-size: 1rem;
    color: #212529;
    line-height: 1.4;
    min-height: 24px;
    display: flex;
    align-items: center;
}

.confirm-value .text-muted {
    font-style: italic;
}

.confirm-value-inline {
    font-weight: 500;
    margin-bottom: 5px;
}

/* ========================================
   フラッシュメッセージ
   ======================================== */

/* 基本メッセージスタイル */
.message {
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.message:hover {
    opacity: 0.9;
}

.message.hidden {
    display: none;
}

/* 成功メッセージ */
.message.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* エラーメッセージ */
.message.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #dc3545;
}

/* 警告メッセージ */
.message.warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/* 情報メッセージ */
.message.info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* ========================================
   カード・UI要素
   ======================================== */

/* カード全体のスタイル */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-header {
    border-radius: 10px 10px 0 0;
    border: none;
}

.card-header.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

/* 入力グループのスタイル */
.input-group .btn {
    border-left: 0;
}

/* チェックボックスのスタイル */
.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

/* ========================================
   ボタンスタイル
   ======================================== */

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}

/* ボタンのパルス効果 */
.btn-pulse {
    animation: btn-pulse 1.5s infinite;
}

@keyframes btn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* ローディング状態のボタン */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   生徒情報・参加活動スタイル
   ======================================== */

/* 既存生徒カード */
.existing-student-card {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
    border-left: 4px solid #17a2b8;
    transition: all 0.3s ease;
}

.existing-student-card:hover {
    background-color: #e9ecef;
    border-left-color: #138496;
}

.student-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.student-clubs {
    margin-left: 1.5rem;
}

.school-info {
    margin-bottom: 0.5rem;
}

.school-info:last-child {
    margin-bottom: 0;
}

.current-activities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.student-info {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    background-color: #f8f9fa;
}

/* アレルギー情報セクション */
.allergy-section {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.form-check-group {
    margin-bottom: 15px;
}

.form-check-group .row {
    margin-left: -5px;
    margin-right: -5px;
}

.form-check-group .col-md-3,
.form-check-group .col-sm-6 {
    padding-left: 5px;
    padding-right: 5px;
}

.form-check {
    margin-bottom: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.form-check:hover {
    border-color: #007bff;
    background-color: #f8f9ff;
}

.form-check-input {
    margin-top: 0.25rem;
    margin-right: 8px;
}

.form-check-input:checked + .form-check-label {
    color: #007bff;
    font-weight: 500;
}

.form-check-label {
    margin-bottom: 0;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

/* 確認画面でのアレルギー表示 */
.allergy-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.allergy-badge {
    display: inline-block;
    padding: 4px 8px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* アレルギー備考エリア */
.allergy-notes-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.epipen-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

/* 部活動セクションコンテナ */
.club-section-container {
    width: 100%;
}

/* 部活動選択行 */
.club-selection-row {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transition: all 0.3s ease;
    position: relative;
}

.club-selection-row:hover {
    border-color: #ffc107;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.club-selection-header {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #495057;
}

.club-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.is-invalid-duplicate {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.duplicate-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

/* 確認画面の部活動表示 */
.club-confirmations {
    width: 100%;
}

.club-confirmation-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.club-confirmation-item:last-child {
    margin-bottom: 0;
}

/* ========================================
   mypage固有の追加スタイル（インライン統合）
   ======================================== */

/* 生徒情報関連 */
.student-info h6 {
    font-weight: 600;
}

/* バッジサイズ統一 */
.current-activities .badge,
.club-confirmations .badge {
    font-size: 0.75rem;
}

/* 必須項目マーカー */
.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* フォーム行間調整（mypage追加分） */
.mypage-form .form-row {
    margin-bottom: 25px;
}

.mypage-form .form-row .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.mypage-form .form-row .form-input {
    width: 100%;
}

/* 活動申請画面でのフォーム行間調整 */
.activity-request-form .form-row {
    margin-bottom: 25px;
}

.activity-request-form .form-row .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.activity-request-form .form-row .form-input {
    width: 100%;
}

/* 確認画面値表示 */
.confirm-value {
    padding: 8px 0;
}

/* 部活動セクション背景 */
.club-section-container {
    background-color: #fff;
    border-radius: 8px;
}

/* ========================================
   完了画面・サマリースタイル
   ======================================== */

.success-icon {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.option-card:hover .card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.option-card .card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.option-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-card .card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.action-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   アラート・通知
   ======================================== */

.alert {
    border: none;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

.alert-info .fas {
    color: #17a2b8;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-left: 4px solid #f39c12;
}

.alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.5);
    color: #2e7d32;
}

.alert-danger {
    background-color: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.5);
    color: #c62828;
}

.alert ul {
    padding-left: 1.2rem;
}

.alert li {
    margin-bottom: 0.25rem;
}

.alert li:last-child {
    margin-bottom: 0;
}

/* ========================================
   バッジ・ステータス
   ======================================== */

.badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
}

.badge.fs-6 {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    min-width: 70px;
}

/* ========================================
   エラー・アニメーション
   ======================================== */

/* エラー時のシェイク効果 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* アニメーション */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ハイライト検索結果 */
.highlight {
    background-color: rgba(255, 235, 59, 0.5);
    padding: 2px;
}

/* ========================================
   その他のUI要素
   ======================================== */

/* モーダルのスタイル */
.modal-body {
    max-height: 60vh;
}

/* 住所検索ボタンのスタイル */
#search-address-btn {
    min-width: 120px;
}

#search-address-btn:disabled {
    opacity: 0.6;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 767.98px) {
    /* フォームレイアウト */
    .form-row {
        flex-direction: column;
        min-height: auto;
    }

    .form-label,
    .form-input {
        width: 100%;
    }

    .form-label {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding: 10px 15px;
        min-height: auto;
    }

    .form-input {
        padding: 10px 15px;
        min-height: auto;
    }

    /* 部活動選択 */
    .club-selection-row .col-md-2 {
        margin-top: 1rem;
    }

    .club-selection-row {
        padding: 1rem;
    }

    .existing-student-card {
        margin-bottom: 1rem;
    }

    .student-clubs {
        margin-left: 0;
        margin-top: 1rem;
    }

    /* その他 */
    .row .col-md-6 {
        margin-bottom: 1rem;
    }

    .row .col-md-4 {
        margin-bottom: 1rem;
    }

    .option-card {
        margin-bottom: 1rem;
    }

    .row.text-center {
        margin-bottom: 1rem;
    }
}

/* レスポンシブ対応（アレルギー情報） */
@media (max-width: 768px) {
    .form-check-group .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .form-check {
        margin-bottom: 6px;
    }
    
    .form-check-label {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .form-check-group .col-md-3,
    .form-check-group .col-sm-6 {
        flex: 0 0 50%;
        max-width: 100%;
    }

    /* フラッシュメッセージ */
    .message {
        padding: 10px 14px;
        font-size: 14px;
        margin-bottom: 15px;
    }
}

/* ========================================
   プレースホルダースタイル
   ======================================== */

/* プレースホルダーの色を統一 */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder {
    color: #ccc !important;
    opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: #ccc !important;
    opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
.form-control::-moz-placeholder {
    color: #ccc !important;
    opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
    color: #ccc !important;
    opacity: 1;
}