/* ============================================
   Theme-aware utility classes
   Replaces inline style="background/color" 
   ============================================ */

/* === Semantic background colors (work in both modes) === */
.bg-surface { background: var(--surface-primary) !important; }
.bg-surface-alt { background: var(--surface-secondary) !important; }
.bg-surface-elevated { background: var(--surface-elevated) !important; }
.bg-surface-tertiary { background: var(--surface-tertiary) !important; }

/* Semantic soft backgrounds — consistent in both modes */
.bg-blue-soft { background: var(--info-soft, rgba(59, 130, 246, 0.12)) !important; }
.bg-green-soft { background: var(--success-soft, rgba(16, 185, 129, 0.12)) !important; }
.bg-amber-soft { background: var(--warning-soft, rgba(245, 158, 11, 0.12)) !important; }
.bg-red-soft { background: var(--danger-soft, rgba(239, 68, 68, 0.12)) !important; }
.bg-purple-soft { background: rgba(139, 92, 246, 0.12) !important; }
.bg-pink-soft { background: rgba(236, 72, 153, 0.12) !important; }
.bg-cyan-soft { background: rgba(6, 182, 212, 0.12) !important; }

/* Accent icon backgrounds (for stat icons, step indicators, etc.) */
.icon-bg-blue { background: var(--info-soft, #dbeafe); color: var(--info, #3b82f6); }
.icon-bg-green { background: var(--success-soft, #dcfce7); color: var(--success, #16a34a); }
.icon-bg-amber { background: var(--warning-soft, #fef3c7); color: var(--warning, #d97706); }
.icon-bg-red { background: var(--danger-soft, #fef2f2); color: var(--danger, #dc2626); }
.icon-bg-purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.icon-bg-pink { background: rgba(236, 72, 153, 0.12); color: #db2777; }
.icon-bg-cyan { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.icon-bg-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.icon-bg-teal { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
.icon-bg-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.icon-bg-orange { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.icon-bg-rose { background: rgba(244, 63, 94, 0.12); color: #f43f5e; }
.icon-bg-slate { background: rgba(100, 116, 139, 0.12); color: #64748b; }

html.dark .icon-bg-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
html.dark .icon-bg-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark .icon-bg-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .icon-bg-red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
html.dark .icon-bg-purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
html.dark .icon-bg-pink { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
html.dark .icon-bg-cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
html.dark .icon-bg-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
html.dark .icon-bg-teal { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; }
html.dark .icon-bg-emerald { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark .icon-bg-orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
html.dark .icon-bg-rose { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
html.dark .icon-bg-slate { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

/* === Text colors === */
.text-theme-primary { color: var(--text-primary) !important; }
.text-theme-secondary { color: var(--text-secondary) !important; }
.text-theme-muted { color: var(--text-muted) !important; }
.text-blue { color: var(--info, #3b82f6) !important; }
.text-green { color: var(--success, #10b981) !important; }
.text-amber { color: var(--warning, #f59e0b) !important; }
.text-red { color: var(--danger, #ef4444) !important; }
.text-purple { color: #8b5cf6 !important; }
.text-pink { color: #ec4899 !important; }
.text-cyan { color: #06b6d4 !important; }
.text-indigo { color: #6366f1 !important; }
.text-teal { color: #14b8a6 !important; }
.text-emerald { color: #10b981 !important; }
.text-orange { color: #f97316 !important; }
.text-rose { color: #f43f5e !important; }

html.dark .text-blue { color: #60a5fa !important; }
html.dark .text-green { color: #34d399 !important; }
html.dark .text-amber { color: #fbbf24 !important; }
html.dark .text-red { color: #f87171 !important; }
html.dark .text-purple { color: #a78bfa !important; }
html.dark .text-pink { color: #f472b6 !important; }
html.dark .text-cyan { color: #22d3ee !important; }
html.dark .text-indigo { color: #818cf8 !important; }

/* === Common layout patterns that were inline === */
.icon-circle {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-circle-sm {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-circle-lg {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* === Form section totals row === */
.totals-row {
    font-weight: bold;
    background: var(--surface-secondary) !important;
}

/* === Empty state text === */
.empty-state-title { color: var(--text-secondary); }
.empty-state-text { color: var(--text-muted); font-size: 0.875rem; }

/* === Gradient hero buttons (for help/implementation pages) === */
.gradient-btn-blue {
    background: linear-gradient(135deg, var(--info, #3b82f6), #8b5cf6);
    border: none; color: white;
}
.gradient-btn-green {
    background: linear-gradient(135deg, var(--success, #10b981), #059669);
    border: none; color: white;
}
.gradient-btn-purple {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border: none; color: white;
}
.gradient-btn-navy {
    background: linear-gradient(135deg, var(--sidebar-bg, #1e3a5f), #2d4a6f);
    border: none; color: white;
}

/* === Labels (for form labels that were inline-styled) === */
.field-label-styled {
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

/* === Highlight rows for reports === */
.row-highlight-red { background: var(--danger-soft) !important; }
.row-highlight-green { background: var(--success-soft) !important; }
.row-highlight-blue { background: var(--info-soft) !important; }
.row-highlight-amber { background: var(--warning-soft) !important; }

/* === Border utilities === */
.border-theme { border-color: var(--border-primary) !important; }
.border-left-blue { border-left: 4px solid var(--info, #3b82f6) !important; }
.border-left-green { border-left: 4px solid var(--success, #10b981) !important; }
.border-left-amber { border-left: 4px solid var(--warning, #f59e0b) !important; }
.border-left-red { border-left: 4px solid var(--danger, #ef4444) !important; }
.border-left-purple { border-left: 4px solid #8b5cf6 !important; }
.border-left-cyan { border-left: 4px solid var(--cyan, #0ea5e9) !important; }
.border-left-emerald { border-left: 4px solid var(--emerald, #059669) !important; }

/* === Step indicators (for wizards/flows) === */
.step-indicator {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}
.step-indicator-blue { background: var(--info-soft, #dbeafe); color: var(--info, #3b82f6); }
.step-indicator-green { background: var(--success-soft, #dcfce7); color: var(--success, #16a34a); }
.step-indicator-amber { background: var(--warning-soft, #fef3c7); color: var(--warning, #d97706); }
.step-indicator-purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

html.dark .step-indicator-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
html.dark .step-indicator-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark .step-indicator-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .step-indicator-purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

/* === Stat card value sizes === */
.stat-value-lg { font-size: 1.5rem; font-weight: 700; }
.stat-value-xl { font-size: 2rem; font-weight: 800; }
.stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* === Section header with icon === */
.section-icon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* === Table header cell styling === */
.th-muted {
    color: var(--text-muted) !important;
    font-weight: 600;
}

/* === Gradient backgrounds === */
.gradient-btn-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none; color: white;
}
.gradient-bg-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.gradient-bg-green-dark {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
}
.gradient-bg-amber-warm {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
}
.gradient-bg-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* === Additional soft backgrounds === */
.bg-gray-soft { background: var(--surface-secondary, #e5e7eb) !important; }
.bg-yellow-soft { background: #fefce8 !important; }

html.dark .bg-gray-soft { background: var(--surface-secondary) !important; }
html.dark .bg-yellow-soft { background: rgba(234, 179, 8, 0.1) !important; }

/* === Status badges === */
.badge-red {
    background: var(--danger-soft, #fee2e2);
    color: var(--danger, #dc2626);
    padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}
.badge-amber {
    background: var(--warning-soft, #fef3c7);
    color: var(--warning, #92400e);
    padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}
.badge-green {
    background: var(--success-soft, #dcfce7);
    color: var(--success, #166534);
    padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}

html.dark .badge-red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
html.dark .badge-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .badge-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }

/* === Inline code styling === */
.code-inline {
    background: var(--surface-secondary, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

html.dark .code-inline { background: var(--surface-secondary); }

/* === Callout boxes === */
.callout-green {
    background: var(--success-soft, #f0fdf4);
    border: 1px solid #86efac;
    border-radius: 8px; padding: 1rem;
}
.callout-amber {
    background: var(--warning-soft, #fef3c7);
    border: 1px solid #fcd34d;
    border-radius: 8px; padding: 1rem;
}
.callout-yellow {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 8px; padding: 1rem;
}

html.dark .callout-green { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
html.dark .callout-amber { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
html.dark .callout-yellow { background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.3); }

/* === Small action buttons === */
.btn-green-sm {
    background: var(--success, #16a34a); color: white;
    padding: 0.25rem 0.5rem; font-size: 0.7rem;
    border: none; border-radius: 4px;
}
.btn-amber-sm {
    background: var(--warning, #f59e0b); color: white;
    padding: 0.25rem 0.5rem; font-size: 0.7rem;
    border: none; border-radius: 4px;
}
.btn-purple {
    background: #8b5cf6; border-color: #8b5cf6; color: white;
}

html.dark .btn-green-sm { background: #059669; }
html.dark .btn-amber-sm { background: #d97706; }
html.dark .btn-purple { background: #7c3aed; border-color: #7c3aed; }

/* === Legacy banner === */
.legacy-banner {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px; padding: 1rem 1.5rem;
    color: white; display: flex;
    align-items: center; justify-content: space-between; gap: 1rem;
}
.legacy-banner-link {
    background: var(--lux-surface, white);
    color: #d97706; padding: 0.5rem 1rem;
    border-radius: 6px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}

html.dark .legacy-banner-link { background: var(--surface-primary); color: #fbbf24; }

/* === Dark amber/red/emerald text variants (for on-soft-bg text) === */
.text-dark-amber { color: #92400e !important; }
.text-dark-red { color: #991b1b !important; }
.text-dark-emerald { color: #065f46 !important; }

html.dark .text-dark-amber { color: #fbbf24 !important; }
html.dark .text-dark-red { color: #fca5a5 !important; }
html.dark .text-dark-emerald { color: #34d399 !important; }

/* === White text utility === */
.text-white { color: white !important; }