/* 4.1 BUTTON SYSTEM */
/*
  IMPORTANT:
  The canonical button system (.btn + .btn-primary/.btn-secondary/.btn-ghost/.btn-danger)
  is defined in `frontend/static/css/base-layout.css` so it applies consistently across all pages.

  This file intentionally does NOT redefine `.btn*` to avoid competing styles.
*/

/* 4.2 CARD / PANEL SYSTEM */

/* Main card component */
.rf-glass-card {
    background: var(--rf-glass-bg);
    border: 1px solid var(--rf-border-soft);
    border-radius: var(--rf-radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 24px;
}

.rf-glass-card:hover {
    border-color: var(--rf-border-neon);
}

/* Panel component (same as card but maybe different padding/context) */
.rf-glass-panel {
    background: var(--rf-glass-bg);
    border: 1px solid var(--rf-border-soft);
    border-radius: var(--rf-radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 16px;
}

/* Page container */
body,
.page-container {
    background: var(--rf-bg);
    color: var(--rf-text-main);
    font-family: system-ui, -apple-system, sans-serif;
}

/* 4.3 FORMS */

.rf-input {
    background: var(--rf-glass-bg);
    border: 1px solid var(--rf-border-soft);
    color: var(--rf-text-main);
    border-radius: var(--rf-radius-lg);
    padding: 10px 16px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
}

.rf-input:focus {
    border-color: var(--rf-border-neon);
}

.rf-input:focus-visible {
    outline: 2px solid rgba(34, 242, 194, 0.35);
    outline-offset: 2px;
}

.rf-label {
    color: var(--rf-text-muted);
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* 4.4 TABLES */

.rf-table {
    width: 100%;
    border-collapse: collapse;
}

.rf-table thead {
    background: var(--rf-glass-bg);
    color: var(--rf-text-muted);
    border-bottom: 1px solid var(--rf-border-soft);
}

.rf-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 0.9rem;
}

.rf-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rf-border-soft);
    color: var(--rf-text-main);
}

.rf-table tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* 4.5 UTILITY CLASSES */
/* Color utilities to replace inline styles */

/* Text colors */
.text-success { color: var(--rf-success) !important; }
.text-warning { color: var(--rf-warning) !important; }
.text-danger { color: var(--rf-danger) !important; }
.text-info { color: var(--rf-info) !important; }
.text-muted { color: var(--rf-text-muted) !important; }
.text-dimmed { color: var(--rf-text-dimmed) !important; }
.text-main { color: var(--rf-text-main) !important; }
.text-dark { color: var(--rf-text-dark) !important; }
.text-cyan { color: var(--rf-accent-cyan) !important; }
.text-purple { color: var(--rf-accent-purple) !important; }

/* Border colors (used throughout templates) */
.border-soft { border-color: var(--rf-border-soft) !important; }
.border-strong { border-color: var(--rf-border-strong) !important; }
.border-cyan { border-color: rgba(34, 242, 194, 0.45) !important; }
.border-purple { border-color: rgba(123, 92, 255, 0.45) !important; }
.border-danger { border-color: rgba(239, 68, 68, 0.35) !important; }
.border-warning { border-color: rgba(245, 158, 11, 0.35) !important; }

/* Hover variants for custom utilities (mimic Tailwind-style names) */
.hover\:border-cyan:hover { border-color: rgba(34, 242, 194, 0.7) !important; }
.hover\:text-main:hover { color: var(--rf-text-main) !important; }
.hover\:text-cyan:hover { color: var(--rf-accent-cyan) !important; }

/* Form accents */
.accent-cyan { accent-color: var(--rf-accent-cyan); }

/* Background colors */
.bg-success { background: var(--rf-success) !important; }
.bg-success-light { background: var(--rf-success-light) !important; }
.bg-warning { background: var(--rf-warning) !important; }
.bg-warning-light { background: var(--rf-warning-light) !important; }
.bg-danger { background: var(--rf-danger) !important; }
.bg-danger-light { background: var(--rf-danger-light) !important; }
.bg-info { background: var(--rf-info) !important; }
.bg-info-light { background: var(--rf-info-light) !important; }
.bg-glass { background: var(--rf-glass-bg) !important; }
.bg-elevated { background: var(--rf-bg-elevated) !important; }

/* Border radius */
.rounded-sm { border-radius: var(--rf-radius-sm) !important; }
.rounded-md { border-radius: var(--rf-radius-md) !important; }
.rounded-lg { border-radius: var(--rf-radius-lg) !important; }
.rounded-xl { border-radius: var(--rf-radius-xl) !important; }
.rounded-pill { border-radius: var(--rf-radius-pill) !important; }
.rounded-full { border-radius: 50% !important; }

/* 4.6 STATUS INDICATORS */
/* Unified status badge system */

.rf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--rf-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.rf-status-badge.connected,
.rf-status-badge.success,
.rf-status-badge.active {
    background: var(--rf-success-light);
    color: var(--rf-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.rf-status-badge.disconnected,
.rf-status-badge.error,
.rf-status-badge.failed {
    background: var(--rf-danger-light);
    color: var(--rf-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rf-status-badge.warning,
.rf-status-badge.pending {
    background: var(--rf-warning-light);
    color: var(--rf-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.rf-status-badge.info,
.rf-status-badge.ready {
    background: var(--rf-info-light);
    color: var(--rf-info);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.rf-status-badge.neutral,
.rf-status-badge.draft {
    background: var(--rf-glass-bg-strong);
    color: var(--rf-text-muted);
    border: 1px solid var(--rf-border-soft);
}

/* Status dot indicator */
.rf-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.rf-status-dot.connected,
.rf-status-dot.success,
.rf-status-dot.active {
    background: var(--rf-success);
    box-shadow: 0 0 8px var(--rf-success);
}

.rf-status-dot.disconnected,
.rf-status-dot.error {
    background: var(--rf-danger);
}

.rf-status-dot.warning,
.rf-status-dot.pending {
    background: var(--rf-warning);
}

/* 4.7 REQUIRED FIELD INDICATOR */
.rf-required {
    color: var(--rf-danger);
}