/* Monotone Theme Override for Facia */

/* App background */
.app {
  background-color: #fafafa !important;
}

/* Header */
.header h1 {
  color: #1a1a1a !important;
}

/* Controls bar */
.controls-bar {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Buttons */
.btn-primary {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.btn-primary:hover {
  background: #333 !important;
}

.btn-secondary {
  background: #666 !important;
  border-color: #666 !important;
}

.btn-secondary:hover {
  background: #555 !important;
}

.btn-reload {
  background: #1a1a1a !important;
}

.btn-reload:hover {
  background: #333 !important;
}

/* Status */
.status {
  color: #888 !important;
  border-color: #e0e0e0 !important;
}

/* Preview cards */
.preview-card {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.preview-raw {
  border-color: #1a1a1a !important;
}

.preview-detection {
  border-color: #4a4a4a !important;
}

.preview-vector {
  border-color: #888 !important;
}

.preview-card h2 {
  color: #1a1a1a !important;
}

.preview-area {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}

.preview-info {
  color: #888 !important;
  border-color: #e0e0e0 !important;
}

/* Metrics */
.metrics {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.metrics h2 {
  color: #1a1a1a !important;
}

.metric {
  border-color: #e0e0e0 !important;
}

.metric-value {
  color: #1a1a1a !important;
}

.metric-value.target {
  color: #1a1a1a !important;
}

.metric-value.actual {
  color: #4a4a4a !important;
}

.metric-value.render {
  color: #666 !important;
}

.metric-value.payload {
  color: #888 !important;
}

.metric-label {
  color: #888 !important;
}

/* Controls panel */
.controls-panel {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.control-group label {
  color: #4a4a4a !important;
}

/* Dialog */
.dialog-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

.dialog {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.dialog-header h2 {
  color: #1a1a1a !important;
}

.dialog-close {
  color: #888 !important;
}

.dialog-close:hover {
  color: #1a1a1a !important;
}

/* Error */
.error,
.device-error {
  background: #fee !important;
  border-color: #fcc !important;
  color: #c33 !important;
}

/* Device selector */
.device-info {
  color: #888 !important;
}

.device-group label {
  color: #4a4a4a !important;
}

.device-group select {
  border-color: #e0e0e0 !important;
  background: #fafafa !important;
}

.device-group select:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1) !important;
}

/* Expression graph */
.expression-graph {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.expression-graph h3 {
  color: #1a1a1a !important;
}

.value-label {
  color: #888 !important;
}

.value-number {
  color: #1a1a1a !important;
}

/* Back link styling */
body > div[style*="position: fixed"] a {
  color: #888 !important;
}

body > div[style*="position: fixed"] a:hover {
  color: #1a1a1a !important;
}