/* POC Form Builder Theme - Global CSS Variables and Base Styles */

/* CSS Custom Properties for POC components */
.poc-container {
    /* Color tokens */
    --poc-primary: #2563eb;
    --poc-primary-light: #eff6ff;
    --poc-primary-dark: #1d4ed8;
    --poc-border: #e5e7eb;
    --poc-border-selected: #2563eb;
    --poc-bg-card: #ffffff;
    --poc-bg-canvas: #f9fafb;
    --poc-bg-panel: #ffffff;
    --poc-text: #111827;
    --poc-text-muted: #6b7280;
    --poc-text-light: #9ca3af;

    /* Status indicator colors */
    --poc-required: #ef4444;
    --poc-conditions: #f59e0b;
    --poc-loop: #8b5cf6;
    --poc-success: #10b981;

    /* Spacing */
    --poc-gap-xs: 0.25rem;
    --poc-gap-sm: 0.5rem;
    --poc-gap-md: 1rem;
    --poc-gap-lg: 1.5rem;
    --poc-gap-xl: 2rem;

    /* Panel widths */
    --poc-inspector-width: 320px;
    --poc-inspector-width-lg: 350px;

    /* Border radius */
    --poc-radius-sm: 4px;
    --poc-radius-md: 8px;
    --poc-radius-lg: 12px;

    /* Shadows */
    --poc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --poc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Typography */
    --poc-font-size-xs: 0.75rem;
    --poc-font-size-sm: 0.875rem;
    --poc-font-size-base: 1rem;
    --poc-font-size-lg: 1.125rem;

    /* Base container styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--poc-text);
    background: var(--poc-bg-canvas);
    min-height: 100vh;
}

/* Common card styles */
.poc-card {
    background: var(--poc-bg-card);
    border: 1px solid var(--poc-border);
    border-radius: var(--poc-radius-md);
    padding: var(--poc-gap-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.poc-card:hover {
    border-color: var(--poc-primary);
}

.poc-card.selected {
    border-color: var(--poc-border-selected);
    background: var(--poc-primary-light);
    box-shadow: var(--poc-shadow-sm);
}

/* Common button styles */
.poc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--poc-gap-xs);
    padding: var(--poc-gap-sm) var(--poc-gap-md);
    border: 1px solid var(--poc-border);
    border-radius: var(--poc-radius-sm);
    background: var(--poc-bg-card);
    color: var(--poc-text);
    font-size: var(--poc-font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.poc-btn:hover {
    border-color: var(--poc-primary);
    color: var(--poc-primary);
}

.poc-btn-primary {
    background: var(--poc-primary);
    border-color: var(--poc-primary);
    color: white;
}

.poc-btn-primary:hover {
    background: var(--poc-primary-dark);
    border-color: var(--poc-primary-dark);
    color: white;
}

/* Status icons */
.poc-status-required {
    color: var(--poc-required);
    font-weight: bold;
}

.poc-status-conditions {
    color: var(--poc-conditions);
}

.poc-status-loop {
    color: var(--poc-loop);
}

/* Form inputs */
.poc-input {
    width: 100%;
    padding: var(--poc-gap-sm);
    border: 1px solid var(--poc-border);
    border-radius: var(--poc-radius-sm);
    font-size: var(--poc-font-size-sm);
}

.poc-input:focus {
    outline: none;
    border-color: var(--poc-primary);
    box-shadow: 0 0 0 3px var(--poc-primary-light);
}

.poc-checkbox {
    display: flex;
    align-items: center;
    gap: var(--poc-gap-sm);
    cursor: pointer;
}

/* Section headers */
.poc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--poc-gap-sm) 0;
    font-weight: 600;
    font-size: var(--poc-font-size-sm);
    color: var(--poc-text);
    cursor: pointer;
    user-select: none;
}

.poc-section-header:hover {
    color: var(--poc-primary);
}

/* Muted text */
.poc-muted {
    color: var(--poc-text-muted);
    font-size: var(--poc-font-size-sm);
}

/* Field type badge */
.poc-field-type-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--poc-bg-canvas);
    border-radius: var(--poc-radius-sm);
    font-size: var(--poc-font-size-xs);
    color: var(--poc-text-muted);
}