/**
 * PDC Widgets - Styles Frontend communs
 */

/* Container commun pour tous les widgets PDC */
.pdc-widget {
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

.pdc-widget *,
.pdc-widget *::before,
.pdc-widget *::after {
    box-sizing: inherit;
}

/* Titre de widget */
.pdc-widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: inherit;
}

/* Container avec bordure */
.pdc-widget-box {
    background: var(--pdc-widget-bg, #fff);
    border: 1px solid var(--pdc-widget-border, #e2e8f0);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Loading state */
.pdc-widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: #666;
}

.pdc-widget-loading::after {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: pdc-spin 0.8s linear infinite;
}

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

/* Erreur */
.pdc-widget-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem;
    color: #dc2626;
    font-size: 0.875rem;
}

/* Variables CSS par défaut */
:root {
    --pdc-widget-bg: #ffffff;
    --pdc-widget-border: #e2e8f0;
    --pdc-widget-text: #1f2937;
    --pdc-widget-muted: #6b7280;
    --pdc-widget-primary: #3b82f6;
    --pdc-widget-success: #22c55e;
    --pdc-widget-warning: #f59e0b;
    --pdc-widget-danger: #ef4444;
}