/* 必須・オプション表示バッジシステム */
/* 全タブ統一の必須・オプション項目表示 */

.required-badge {
    background: #dc3545;
    color: white;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    animation: pulse-required 2s infinite;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.required-badge::before {
    content: "⚠️ ";
    font-size: 10px;
}

.optional-badge {
    background: #6c757d;
    color: white;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    opacity: 0.95;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.optional-badge::before {
    content: "ℹ️ ";
    font-size: 10px;
}

/* 必須項目の軽微なアニメーション（注意喚起） */
@keyframes pulse-required {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.02);
    }
}

/* 必須項目の入力フィールドスタイル強化 */
.required-field {
    border-left: 3px solid #dc3545 !important;
}

.required-field:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3) !important;
}

/* オプション項目の控えめスタイル */
.optional-field {
    border-left: 2px solid #e9ecef;
}

.optional-field:focus {
    border-left-color: #007bff;
}

/* ホバー効果 */
.required-badge:hover {
    background: #c82333;
    transform: scale(1.1);
    cursor: help;
}

.optional-badge:hover {
    background: #5a6268;
    transform: scale(1.1);
    cursor: help;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .required-badge,
    .optional-badge {
        font-size: 9px;
        padding: 1px 4px;
        margin-left: 2px;
    }
}

/* ツールチップ風の説明表示（将来拡張用） */
.field-badge-tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
}

.field-badge-tooltip.show {
    opacity: 1;
}