/**
 * MMA Widgets Common Styles
 * 
 * Base styles for all MMA widgets with CSS scoping
 */

/* CSS Variables for consistent theming */
.mma-widgets {
    /* Colors */
    --mma-primary: #007cba;
    --mma-secondary: #666;
    --mma-text: #333;
    --mma-background: #fff;
    --mma-border: #ddd;
    --mma-success: #46b450;
    --mma-warning: #ffb900;
    --mma-error: #dc3232;
    
    /* Spacing */
    --mma-spacing-xs: 0.25rem;
    --mma-spacing-sm: 0.5rem;
    --mma-spacing-md: 1rem;
    --mma-spacing-lg: 2rem;
    --mma-spacing-xl: 3rem;
    
    /* Typography */
    --mma-font-size-sm: 0.875rem;
    --mma-font-size-md: 1rem;
    --mma-font-size-lg: 1.25rem;
    --mma-font-size-xl: 1.5rem;
    --mma-font-size-xxl: 2rem;
    
    /* Borders */
    --mma-border-radius: 4px;
    --mma-border-width: 1px;
    
    /* Shadows */
    --mma-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --mma-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --mma-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --mma-transition: all 0.3s ease;
}

/* Reset and base styles scoped to MMA widgets */
.mma-widgets {
    box-sizing: border-box;
    
    *, *::before, *::after {
        box-sizing: inherit;
    }
    
    /* Reset common elements */
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
        font-weight: inherit;
        line-height: inherit;
    }
    
    p, ul, ol, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    a {
        color: inherit;
        text-decoration: none;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Base widget structure */
.mma-widgets .mma-widget {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.mma-widgets .mma-widget__content {
    width: 100%;
}

/* Common widget elements */
.mma-widgets .mma-widget__title {
    font-size: var(--mma-font-size-lg);
    font-weight: 600;
    color: var(--mma-text);
    margin-bottom: var(--mma-spacing-sm);
}

.mma-widgets .mma-widget__description {
    font-size: var(--mma-font-size-md);
    color: var(--mma-secondary);
    line-height: 1.6;
    margin-bottom: var(--mma-spacing-md);
}

.mma-widgets .mma-widget__icon {
    display: inline-block;
    font-size: var(--mma-font-size-xl);
    color: var(--mma-primary);
    margin-bottom: var(--mma-spacing-sm);
}

/* Utility classes */
.mma-widgets .mma-spacing--xs { margin: var(--mma-spacing-xs); }
.mma-widgets .mma-spacing--sm { margin: var(--mma-spacing-sm); }
.mma-widgets .mma-spacing--md { margin: var(--mma-spacing-md); }
.mma-widgets .mma-spacing--lg { margin: var(--mma-spacing-lg); }
.mma-widgets .mma-spacing--xl { margin: var(--mma-spacing-xl); }

.mma-widgets .mma-padding--xs { padding: var(--mma-spacing-xs); }
.mma-widgets .mma-padding--sm { padding: var(--mma-spacing-sm); }
.mma-widgets .mma-padding--md { padding: var(--mma-spacing-md); }
.mma-widgets .mma-padding--lg { padding: var(--mma-spacing-lg); }
.mma-widgets .mma-padding--xl { padding: var(--mma-spacing-xl); }

/* Flexbox utilities */
.mma-widgets .mma-flex { display: flex; }
.mma-widgets .mma-flex--center { 
    justify-content: center; 
    align-items: center; 
}
.mma-widgets .mma-flex--between { justify-content: space-between; }
.mma-widgets .mma-flex--around { justify-content: space-around; }
.mma-widgets .mma-flex--column { flex-direction: column; }
.mma-widgets .mma-flex--wrap { flex-wrap: wrap; }

/* Text utilities */
.mma-widgets .mma-text--center { text-align: center; }
.mma-widgets .mma-text--left { text-align: left; }
.mma-widgets .mma-text--right { text-align: right; }

.mma-widgets .mma-text--primary { color: var(--mma-primary); }
.mma-widgets .mma-text--secondary { color: var(--mma-secondary); }
.mma-widgets .mma-text--success { color: var(--mma-success); }
.mma-widgets .mma-text--warning { color: var(--mma-warning); }
.mma-widgets .mma-text--error { color: var(--mma-error); }

/* Button styles */
.mma-widgets .mma-button {
    display: inline-block;
    background: var(--mma-primary);
    color: white;
    padding: var(--mma-spacing-sm) var(--mma-spacing-md);
    border-radius: var(--mma-border-radius);
    text-decoration: none;
    font-weight: 500;
    transition: var(--mma-transition);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mma-font-size-md);
}

.mma-widgets .mma-button:hover {
    background: color-mix(in srgb, var(--mma-primary) 80%, black);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

.mma-widgets .mma-button:active {
    transform: translateY(0);
}

.mma-widgets .mma-button--secondary {
    background: var(--mma-secondary);
}

.mma-widgets .mma-button--outline {
    background: transparent;
    color: var(--mma-primary);
    border: var(--mma-border-width) solid var(--mma-primary);
}

.mma-widgets .mma-button--outline:hover {
    background: var(--mma-primary);
    color: white;
}

/* Card styles */
.mma-widgets .mma-card {
    background: var(--mma-background);
    border: var(--mma-border-width) solid var(--mma-border);
    border-radius: var(--mma-border-radius);
    padding: var(--mma-spacing-lg);
    transition: var(--mma-transition);
    text-align: center;
}

.mma-widgets .mma-card:hover {
    box-shadow: var(--mma-shadow-md);
    transform: translateY(-2px);
}

.mma-widgets .mma-card--shadow {
    box-shadow: var(--mma-shadow-sm);
    border: none;
}

.mma-widgets .mma-card--minimal {
    border: none;
    background: transparent;
    padding: var(--mma-spacing-md);
}

.mma-widgets .mma-card--bordered {
    border: 2px solid var(--mma-primary);
}

/* Widget Specific Styles */

.mma-widgets .mma-card__icon {
    font-size: 3rem;
    color: var(--mma-primary);
    margin-bottom: var(--mma-spacing-md);
    display: block;
}

.mma-widgets .mma-card__title {
    font-size: var(--mma-font-size-xl);
    font-weight: bold;
    color: var(--mma-text);
    margin-bottom: var(--mma-spacing-sm);
}

.mma-widgets .mma-card__description {
    font-size: var(--mma-font-size-md);
    color: var(--mma-secondary);
    line-height: 1.6;
    margin-bottom: var(--mma-spacing-md);
}

.mma-widgets .mma-card__button {
    margin-top: var(--mma-spacing-md);
}

/* Responsive utilities */
.mma-widgets .mma-hide-mobile { display: none; }
.mma-widgets .mma-hide-desktop { display: block; }

@media (min-width: 768px) {
    .mma-widgets .mma-hide-mobile { display: block; }
    .mma-widgets .mma-hide-desktop { display: none; }
    
    .mma-widgets .mma-hide-tablet { display: none; }
}

@media (min-width: 1024px) {
    .mma-widgets .mma-hide-tablet { display: block; }
}

/* Responsive styles */
@media (max-width: 768px) {
    .mma-widgets .mma-card {
        padding: var(--mma-spacing-md);
    }
    
    .mma-widgets .mma-card__icon {
        font-size: 2.5rem;
    }
}

/* Loading states */
.mma-widgets .mma-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.mma-widgets .mma-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--mma-border);
    border-top-color: var(--mma-primary);
    border-radius: 50%;
    animation: mma-spin 1s linear infinite;
}

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

/* Error states */
.mma-widgets .mma-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--mma-error);
    padding: var(--mma-spacing-md);
    border-radius: var(--mma-border-radius);
}

/* Success states */
.mma-widgets .mma-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--mma-success);
    padding: var(--mma-spacing-md);
    border-radius: var(--mma-border-radius);
}

/* Warning states */
.mma-widgets .mma-warning {
    background: #fffbeb;
    border: 1px solid #fed7aa;
    color: var(--mma-warning);
    padding: var(--mma-spacing-md);
    border-radius: var(--mma-border-radius);
}