/**
 * MFM Plugin Frontend Styles
 * 
 * This file contains minimal frontend styles.
 * Most styles are inherited from the existing form CSS.
 * These styles use CSS custom properties injected by the plugin.
 */

/* ============================================
   Language Selector Component
   ============================================ */

.mfm-language-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.mfm-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--mfm-border, #DADADAFC);
    border-radius: var(--mfm-btn-radius, 8px);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--mfm-font, 'Roboto', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--mfm-text, #333333);
}

.mfm-lang-btn:hover {
    border-color: var(--mfm-primary, #009239);
    background: var(--mfm-accent, #B3C8BB);
}

.mfm-lang-btn.active {
    border-color: var(--mfm-primary, #009239);
    background: var(--mfm-primary, #009239);
    color: white;
}

.mfm-lang-flag {
    font-size: 18px;
    line-height: 1;
}

.mfm-lang-code {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   Override Styles (with !important for theme)
   ============================================ */

#mfm-roseo-wrapper {
    font-family: var(--mfm-font, 'Roboto', sans-serif) !important;
    color: var(--mfm-text, #333333) !important;
}

#mfm-roseo-wrapper .mfm-btn-primary,
#mfm-roseo-wrapper .btn-continuar,
#mfm-roseo-wrapper .continuar-btn {
    background-color: var(--mfm-primary, #009239) !important;
    border-color: var(--mfm-primary, #009239) !important;
    color: white !important;
    border-radius: var(--mfm-btn-radius, 8px) !important;
}

#mfm-roseo-wrapper .mfm-btn-primary:hover,
#mfm-roseo-wrapper .btn-continuar:hover,
#mfm-roseo-wrapper .continuar-btn:hover {
    background-color: var(--mfm-secondary, #015328) !important;
    border-color: var(--mfm-secondary, #015328) !important;
}

#mfm-roseo-wrapper .mfm-btn-secondary,
#mfm-roseo-wrapper .btn-anterior,
#mfm-roseo-wrapper .anterior-btn {
    background-color: white !important;
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    color: var(--mfm-text, #333333) !important;
    border-radius: var(--mfm-btn-radius, 8px) !important;
}

#mfm-roseo-wrapper .mfm-btn-secondary:hover,
#mfm-roseo-wrapper .btn-anterior:hover,
#mfm-roseo-wrapper .anterior-btn:hover {
    border-color: var(--mfm-primary, #009239) !important;
    color: var(--mfm-primary, #009239) !important;
}

/* Card selection styles */
#mfm-roseo-wrapper .mfm-card,
#mfm-roseo-wrapper .card-selection,
#mfm-roseo-wrapper .tipo-card {
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    border-radius: var(--mfm-radius, 12px) !important;
    transition: all 0.2s ease !important;
}

#mfm-roseo-wrapper .mfm-card:hover,
#mfm-roseo-wrapper .card-selection:hover,
#mfm-roseo-wrapper .tipo-card:hover {
    border-color: var(--mfm-primary, #009239) !important;
}

#mfm-roseo-wrapper .mfm-card.active,
#mfm-roseo-wrapper .mfm-card.selected,
#mfm-roseo-wrapper .card-selection.active,
#mfm-roseo-wrapper .card-selection.selected,
#mfm-roseo-wrapper .tipo-card.active,
#mfm-roseo-wrapper .tipo-card.selected {
    border-color: var(--mfm-primary, #009239) !important;
    background: rgba(0, 146, 57, 0.05) !important;
}

/* Header step indicator */
#mfm-roseo-wrapper .step-indicator .step-active,
#mfm-roseo-wrapper .progress-step.active {
    background-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

#mfm-roseo-wrapper .step-indicator .step-completed,
#mfm-roseo-wrapper .progress-step.completed {
    background-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

/* Links */
#mfm-roseo-wrapper a {
    color: var(--mfm-primary, #009239) !important;
}

#mfm-roseo-wrapper a:hover {
    color: var(--mfm-secondary, #015328) !important;
}

/* Focus states */
#mfm-roseo-wrapper input:focus,
#mfm-roseo-wrapper select:focus,
#mfm-roseo-wrapper textarea:focus {
    border-color: var(--mfm-primary, #009239) !important;
    box-shadow: 0 0 0 3px rgba(0, 146, 57, 0.15) !important;
    outline: none !important;
}

/* Validation messages */
#mfm-roseo-wrapper .mfm-error,
#mfm-roseo-wrapper .validation-error {
    color: #dc3545 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

/* Toast notifications */
.mfm-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: var(--mfm-btn-radius, 8px);
    font-family: var(--mfm-font, 'Roboto', sans-serif);
    font-size: 14px;
    z-index: 10000;
    animation: mfmToastIn 0.3s ease;
}

.mfm-toast.success {
    background: var(--mfm-primary, #009239);
    color: white;
}

.mfm-toast.error {
    background: #dc3545;
    color: white;
}

.mfm-toast.info {
    background: #0dcaf0;
    color: #000;
}

@keyframes mfmToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .mfm-language-selector {
        flex-wrap: wrap;
    }
    
    .mfm-lang-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mfm-lang-flag {
        font-size: 16px;
    }
}

/* ============================================
   Additional State Styles with CSS Variables
   ============================================ */

/* Card shadows */
#mfm-roseo-wrapper .mfm-card,
#mfm-roseo-wrapper .card-selection,
#mfm-roseo-wrapper .tipo-card,
#mfm-roseo-wrapper .ubicacion-card {
    box-shadow: var(--mfm-card-shadow, 0 2px 8px rgba(0,0,0,0.1)) !important;
}

#mfm-roseo-wrapper .mfm-card:hover,
#mfm-roseo-wrapper .card-selection:hover,
#mfm-roseo-wrapper .tipo-card:hover,
#mfm-roseo-wrapper .ubicacion-card:hover {
    box-shadow: var(--mfm-card-shadow-hover, 0 4px 16px rgba(0,0,0,0.15)) !important;
    transform: translateY(-2px);
}

/* Active/Focus states */
#mfm-roseo-wrapper .mfm-btn-primary:focus,
#mfm-roseo-wrapper .btn-continuar:focus,
#mfm-roseo-wrapper .continuar-btn:focus {
    box-shadow: var(--mfm-focus-ring, 0 0 0 3px rgba(0, 146, 57, 0.25)) !important;
    outline: none !important;
}

#mfm-roseo-wrapper .mfm-btn-primary:active,
#mfm-roseo-wrapper .btn-continuar:active,
#mfm-roseo-wrapper .continuar-btn:active {
    background-color: var(--mfm-primary-active, #006525) !important;
    transform: translateY(1px);
}

/* Disabled state */
#mfm-roseo-wrapper .mfm-btn-primary:disabled,
#mfm-roseo-wrapper .btn-continuar:disabled,
#mfm-roseo-wrapper .continuar-btn:disabled,
#mfm-roseo-wrapper button:disabled {
    background-color: var(--mfm-disabled-bg, #e9ecef) !important;
    color: var(--mfm-disabled-text, #6c757d) !important;
    border-color: var(--mfm-disabled-bg, #e9ecef) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Error state for inputs */
#mfm-roseo-wrapper input.error,
#mfm-roseo-wrapper input.invalid,
#mfm-roseo-wrapper select.error,
#mfm-roseo-wrapper select.invalid,
#mfm-roseo-wrapper .has-error input,
#mfm-roseo-wrapper .has-error select {
    border-color: var(--mfm-error, #dc3545) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* Success state for inputs */
#mfm-roseo-wrapper input.valid,
#mfm-roseo-wrapper input.success,
#mfm-roseo-wrapper select.valid,
#mfm-roseo-wrapper .has-success input {
    border-color: var(--mfm-success, #28a745) !important;
}

/* Warning badges */
#mfm-roseo-wrapper .badge-warning,
#mfm-roseo-wrapper .mfm-badge-warning {
    background-color: var(--mfm-warning, #ffc107) !important;
    color: #000 !important;
}

/* Info badges */
#mfm-roseo-wrapper .badge-info,
#mfm-roseo-wrapper .mfm-badge-info {
    background-color: var(--mfm-info, #17a2b8) !important;
    color: white !important;
}

/* Success badges */
#mfm-roseo-wrapper .badge-success,
#mfm-roseo-wrapper .mfm-badge-success {
    background-color: var(--mfm-success, #28a745) !important;
    color: white !important;
}

/* Primary badges */
#mfm-roseo-wrapper .badge-primary,
#mfm-roseo-wrapper .mfm-badge-primary {
    background-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

/* Headings */
#mfm-roseo-wrapper h1,
#mfm-roseo-wrapper h2,
#mfm-roseo-wrapper h3,
#mfm-roseo-wrapper .step-title,
#mfm-roseo-wrapper .form-title {
    color: var(--mfm-secondary, #015328) !important;
}

/* Accent backgrounds */
#mfm-roseo-wrapper .bg-accent,
#mfm-roseo-wrapper .mfm-bg-accent {
    background-color: var(--mfm-accent, #B3C8BB) !important;
}

/* Transitions */
#mfm-roseo-wrapper * {
    transition-duration: var(--mfm-transition-duration, 200ms);
    transition-timing-function: var(--mfm-transition-easing, ease);
}

/* Icon colors */
#mfm-roseo-wrapper .mfm-icon,
#mfm-roseo-wrapper .card-icon,
#mfm-roseo-wrapper .tipo-card i {
    color: var(--mfm-primary, #009239) !important;
}

#mfm-roseo-wrapper .mfm-card.active .mfm-icon,
#mfm-roseo-wrapper .card-selection.active .card-icon,
#mfm-roseo-wrapper .tipo-card.active i {
    color: var(--mfm-secondary, #015328) !important;
}

/* Loading spinner */
#mfm-roseo-wrapper .mfm-spinner {
    border: 3px solid var(--mfm-accent, #B3C8BB);
    border-top-color: var(--mfm-primary, #009239);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: mfm-spin 0.8s linear infinite;
}

@keyframes mfm-spin {
    to { transform: rotate(360deg); }
}

/* Language selector with flag images */
.mfm-lang-btn img.mfm-lang-flag-img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Euskadi special styling - Ikurriña */
.mfm-lang-btn[data-lang="eu"] .mfm-lang-flag-img {
    /* Proper aspect ratio for ikurriña */
    width: 24px;
    height: 16px;
}

/* ============================================
   Complete Button States
   ============================================ */

/* Primary Button - All States */
#mfm-roseo-wrapper .roseo-btn,
#mfm-roseo-wrapper .btn-primary,
.roseo-form-container .roseo-btn,
.roseo-home-screen .roseo-btn {
    background-color: var(--mfm-primary, #009239) !important;
    border: 2px solid var(--mfm-primary, #009239) !important;
    color: white !important;
    border-radius: var(--mfm-btn-radius, 8px) !important;
    padding: 12px 24px !important;
    font-family: var(--mfm-font, 'Roboto', sans-serif) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#mfm-roseo-wrapper .roseo-btn:hover,
#mfm-roseo-wrapper .btn-primary:hover,
.roseo-form-container .roseo-btn:hover,
.roseo-home-screen .roseo-btn:hover {
    background-color: var(--mfm-primary-hover, #007a2f) !important;
    border-color: var(--mfm-primary-hover, #007a2f) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 146, 57, 0.3) !important;
}

#mfm-roseo-wrapper .roseo-btn:active,
#mfm-roseo-wrapper .btn-primary:active,
.roseo-form-container .roseo-btn:active,
.roseo-home-screen .roseo-btn:active {
    background-color: var(--mfm-primary-active, #006525) !important;
    border-color: var(--mfm-primary-active, #006525) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 146, 57, 0.2) !important;
}

#mfm-roseo-wrapper .roseo-btn:focus,
#mfm-roseo-wrapper .btn-primary:focus,
.roseo-form-container .roseo-btn:focus,
.roseo-home-screen .roseo-btn:focus {
    outline: none !important;
    box-shadow: var(--mfm-focus-ring, 0 0 0 3px rgba(0, 146, 57, 0.25)) !important;
}

/* Secondary/Outline Button */
#mfm-roseo-wrapper .roseo-btn-secondary,
#mfm-roseo-wrapper .roseo-btn-start-new,
#mfm-roseo-wrapper .btn-outline {
    background-color: transparent !important;
    border: 2px solid var(--mfm-primary, #009239) !important;
    color: var(--mfm-primary, #009239) !important;
}

#mfm-roseo-wrapper .roseo-btn-secondary:hover,
#mfm-roseo-wrapper .roseo-btn-start-new:hover,
#mfm-roseo-wrapper .btn-outline:hover {
    background-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

/* ============================================
   Form Inputs - Complete States
   ============================================ */

#mfm-roseo-wrapper input[type="text"],
#mfm-roseo-wrapper input[type="email"],
#mfm-roseo-wrapper input[type="tel"],
#mfm-roseo-wrapper input[type="number"],
#mfm-roseo-wrapper input[type="password"],
#mfm-roseo-wrapper select,
#mfm-roseo-wrapper textarea,
.roseo-form-container input,
.roseo-form-container select,
.roseo-form-container textarea {
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    border-radius: var(--mfm-btn-radius, 8px) !important;
    padding: 12px 16px !important;
    font-family: var(--mfm-font, 'Roboto', sans-serif) !important;
    font-size: var(--mfm-font-size, 16px) !important;
    color: var(--mfm-text, #333333) !important;
    background-color: white !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#mfm-roseo-wrapper input:hover,
#mfm-roseo-wrapper select:hover,
#mfm-roseo-wrapper textarea:hover,
.roseo-form-container input:hover,
.roseo-form-container select:hover {
    border-color: var(--mfm-accent, #B3C8BB) !important;
}

#mfm-roseo-wrapper input:focus,
#mfm-roseo-wrapper select:focus,
#mfm-roseo-wrapper textarea:focus,
.roseo-form-container input:focus,
.roseo-form-container select:focus {
    border-color: var(--mfm-primary, #009239) !important;
    box-shadow: var(--mfm-focus-ring, 0 0 0 3px rgba(0, 146, 57, 0.15)) !important;
    outline: none !important;
}

/* Input Error State */
#mfm-roseo-wrapper input.error,
#mfm-roseo-wrapper input.invalid,
#mfm-roseo-wrapper input:invalid:not(:placeholder-shown),
#mfm-roseo-wrapper .field-error input,
.roseo-form-container input.error {
    border-color: var(--mfm-error, #dc3545) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
    animation: mfm-shake 0.3s ease !important;
}

@keyframes mfm-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Input Valid State */
#mfm-roseo-wrapper input.valid,
#mfm-roseo-wrapper input:valid:not(:placeholder-shown),
.roseo-form-container input.valid {
    border-color: var(--mfm-success, #28a745) !important;
}

/* Input Disabled State */
#mfm-roseo-wrapper input:disabled,
#mfm-roseo-wrapper select:disabled,
#mfm-roseo-wrapper textarea:disabled {
    background-color: var(--mfm-disabled-bg, #e9ecef) !important;
    color: var(--mfm-disabled-text, #6c757d) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* ============================================
   Card Selection - Complete States
   ============================================ */

#mfm-roseo-wrapper .tipo-card,
#mfm-roseo-wrapper .option-card,
#mfm-roseo-wrapper .selection-card,
.roseo-form-container .tipo-card {
    background: white !important;
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    border-radius: var(--mfm-radius, 12px) !important;
    padding: var(--mfm-spacing, 16px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--mfm-card-shadow, 0 2px 8px rgba(0,0,0,0.1)) !important;
}

#mfm-roseo-wrapper .tipo-card:hover,
#mfm-roseo-wrapper .option-card:hover,
#mfm-roseo-wrapper .selection-card:hover,
.roseo-form-container .tipo-card:hover {
    border-color: var(--mfm-primary, #009239) !important;
    box-shadow: var(--mfm-card-shadow-hover, 0 4px 16px rgba(0,0,0,0.15)) !important;
    transform: translateY(-4px) !important;
}

#mfm-roseo-wrapper .tipo-card.active,
#mfm-roseo-wrapper .tipo-card.selected,
#mfm-roseo-wrapper .option-card.active,
#mfm-roseo-wrapper .selection-card.active,
.roseo-form-container .tipo-card.active {
    border-color: var(--mfm-primary, #009239) !important;
    background: linear-gradient(135deg, rgba(0, 146, 57, 0.05) 0%, rgba(1, 83, 40, 0.08) 100%) !important;
    box-shadow: 0 0 0 3px rgba(0, 146, 57, 0.15), var(--mfm-card-shadow-hover, 0 4px 16px rgba(0,0,0,0.15)) !important;
}

#mfm-roseo-wrapper .tipo-card.active i,
#mfm-roseo-wrapper .option-card.active i,
.roseo-form-container .tipo-card.active i {
    color: var(--mfm-primary, #009239) !important;
    transform: scale(1.1) !important;
}

/* Card Icon */
#mfm-roseo-wrapper .tipo-card .card-icon,
#mfm-roseo-wrapper .tipo-card i,
#mfm-roseo-wrapper .option-card i {
    font-size: 32px !important;
    color: var(--mfm-primary, #009239) !important;
    transition: all 0.2s ease !important;
    margin-bottom: 12px !important;
}

/* Card Title */
#mfm-roseo-wrapper .tipo-card .card-title,
#mfm-roseo-wrapper .tipo-card h4,
#mfm-roseo-wrapper .option-card h4 {
    color: var(--mfm-secondary, #015328) !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

/* Card Description */
#mfm-roseo-wrapper .tipo-card .card-desc,
#mfm-roseo-wrapper .tipo-card p,
#mfm-roseo-wrapper .option-card p {
    color: var(--mfm-text, #333333) !important;
    opacity: 0.8 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* ============================================
   HomeScreen Specific Styles
   ============================================ */

.roseo-home-screen {
    background: linear-gradient(135deg, var(--mfm-secondary, #015328) 0%, var(--mfm-primary, #009239) 100%) !important;
}

.roseo-home-screen .home-title {
    color: white !important;
    font-family: var(--mfm-font, 'Roboto', sans-serif) !important;
}

.roseo-home-screen .home-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.roseo-home-screen .home-help {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Continue button on home screen */
.roseo-home-screen .roseo-btn-continue {
    background-color: white !important;
    color: var(--mfm-primary, #009239) !important;
    border-color: white !important;
}

.roseo-home-screen .roseo-btn-continue:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   Footer Navigation
   ============================================ */

#mfm-roseo-wrapper .footer-navigation,
.roseo-form-container .footer-navigation {
    background: white !important;
    border-top: 1px solid var(--mfm-border, #DADADAFC) !important;
    padding: var(--mfm-spacing, 16px) !important;
}

#mfm-roseo-wrapper .footer-navigation .btn-anterior {
    background: transparent !important;
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    color: var(--mfm-text, #333333) !important;
}

#mfm-roseo-wrapper .footer-navigation .btn-anterior:hover {
    border-color: var(--mfm-primary, #009239) !important;
    color: var(--mfm-primary, #009239) !important;
    background: rgba(0, 146, 57, 0.05) !important;
}

#mfm-roseo-wrapper .footer-navigation .btn-continuar {
    background: var(--mfm-primary, #009239) !important;
    border: 2px solid var(--mfm-primary, #009239) !important;
    color: white !important;
}

/* ============================================
   Progress Header
   ============================================ */

#mfm-roseo-wrapper .progress-header,
.roseo-form-container .progress-header {
    background: white !important;
    border-bottom: 1px solid var(--mfm-border, #DADADAFC) !important;
}

#mfm-roseo-wrapper .progress-step {
    border: 2px solid var(--mfm-border, #DADADAFC) !important;
    background: white !important;
    color: var(--mfm-text, #333333) !important;
    transition: all 0.2s ease !important;
}

#mfm-roseo-wrapper .progress-step.active {
    background: var(--mfm-primary, #009239) !important;
    border-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

#mfm-roseo-wrapper .progress-step.completed {
    background: var(--mfm-primary, #009239) !important;
    border-color: var(--mfm-primary, #009239) !important;
    color: white !important;
}

#mfm-roseo-wrapper .progress-step:hover:not(.active):not(.completed) {
    border-color: var(--mfm-accent, #B3C8BB) !important;
}

/* ============================================
   Tooltips and Popovers
   ============================================ */

#mfm-roseo-wrapper .tooltip,
#mfm-roseo-wrapper [data-tooltip]::after {
    background: var(--mfm-secondary, #015328) !important;
    color: white !important;
    border-radius: var(--mfm-btn-radius, 8px) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

/* ============================================
   Labels
   ============================================ */

#mfm-roseo-wrapper label,
.roseo-form-container label {
    color: var(--mfm-secondary, #015328) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#mfm-roseo-wrapper label.required::after,
#mfm-roseo-wrapper .required-field label::after {
    content: ' *' !important;
    color: var(--mfm-error, #dc3545) !important;
}

/* ============================================
   Utility Classes
   ============================================ */

.mfm-text-primary { color: var(--mfm-primary, #009239) !important; }
.mfm-text-secondary { color: var(--mfm-secondary, #015328) !important; }
.mfm-text-error { color: var(--mfm-error, #dc3545) !important; }
.mfm-text-success { color: var(--mfm-success, #28a745) !important; }
.mfm-text-warning { color: var(--mfm-warning, #ffc107) !important; }
.mfm-text-info { color: var(--mfm-info, #17a2b8) !important; }

.mfm-bg-primary { background-color: var(--mfm-primary, #009239) !important; }
.mfm-bg-secondary { background-color: var(--mfm-secondary, #015328) !important; }
.mfm-bg-accent { background-color: var(--mfm-accent, #B3C8BB) !important; }

.mfm-border-primary { border-color: var(--mfm-primary, #009239) !important; }
.mfm-border-secondary { border-color: var(--mfm-secondary, #015328) !important; }
/* ============================================
   File Upload Styles
   ============================================ */

#mfm-roseo-wrapper .file-upload-container,
#mfm-roseo-wrapper .upload-area {
    background-color: var(--mfm-upload-bg, #f8fafc) !important;
    border: 2px dashed var(--mfm-upload-border, #e5e7eb) !important;
    border-radius: var(--mfm-upload-radius, 12px) !important;
    transition: all 0.2s ease !important;
}

#mfm-roseo-wrapper .file-upload-container:hover,
#mfm-roseo-wrapper .upload-area:hover {
    background-color: var(--mfm-upload-hover-bg, #f0fdf4) !important;
    border-color: var(--mfm-primary, #009239) !important;
}

#mfm-roseo-wrapper .file-upload-container.drag-over,
#mfm-roseo-wrapper .upload-area.drag-over {
    background-color: var(--mfm-upload-hover-bg, #f0fdf4) !important;
    border-color: var(--mfm-primary, #009239) !important;
    transform: scale(1.02);
}

/* ============================================
   Badge Styles
   ============================================ */

#mfm-roseo-wrapper .badge,
#mfm-roseo-wrapper .mfm-badge {
    border-radius: var(--mfm-badge-radius, 20px) !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#mfm-roseo-wrapper .badge-completed,
#mfm-roseo-wrapper .mfm-badge-completed {
    background-color: var(--mfm-badge-completed-bg, #dcfce7) !important;
    color: var(--mfm-badge-completed-text, #166534) !important;
}

#mfm-roseo-wrapper .badge-pending,
#mfm-roseo-wrapper .mfm-badge-pending {
    background-color: var(--mfm-badge-pending-bg, #fef3c7) !important;
    color: var(--mfm-badge-pending-text, #92400e) !important;
}

#mfm-roseo-wrapper .badge-error,
#mfm-roseo-wrapper .mfm-badge-error {
    background-color: var(--mfm-badge-error-bg, #fee2e2) !important;
    color: var(--mfm-badge-error-text, #dc2626) !important;
}