/* ── FooEngine Internal Tools — Components ───────────────────────────────────
   Reusable UI components: cards, buttons, form elements, status bar.
──────────────────────────────────────────────────────────────────────────── */

/* ── Card ── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       22px 24px;
  margin-bottom: 16px;
}
.card-title {
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  14px;
}

/* ── Form labels ── */
label {
  display:        block;
  font-size:      12px;
  font-weight:    500;
  color:          var(--text-muted);
  margin-bottom:  6px;
  letter-spacing: 0.02em;
}

/* ── Text inputs ── */
input[type="text"] {
  width:         100%;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       9px 12px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  outline:       none;
  transition:    border-color 0.15s;
}
input[type="text"]:focus   { border-color: var(--brand-blue); }
input[type="text"]::placeholder { color: var(--text-dim); }
input[type="text"].error   { border-color: var(--error); }
input[type="text"].valid   { border-color: var(--success); }

.input-hint {
  font-size:   11px;
  color:       var(--text-dim);
  margin-top:  5px;
  font-family: var(--font-mono);
}

/* ── Select ── */
select {
  width:         100%;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       9px 12px;
  color:         var(--text);
  font-family:   var(--font-body);
  font-size:     13px;
  outline:       none;
  cursor:        pointer;
  transition:    border-color 0.15s;
  appearance:    none;
}
select:focus { border-color: var(--brand-blue); }

/* ── Buttons ── */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     9px 18px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size:   13px;
  cursor:      pointer;
  border:      none;
  transition:  opacity 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:not(:disabled):hover { background: #2f8abf; }

.btn-ghost {
  background: transparent;
  color:      var(--text-muted);
  border:     1px solid var(--border);
}
.btn-ghost:not(:disabled):hover {
  color:        var(--text);
  border-color: var(--border-hover);
}

/* ── Actions row ── */
.actions-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  20px;
}

/* ── Status / feedback bar ── */
.status-bar {
  display:       none;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  border-radius: var(--radius);
  font-size:     13px;
  margin-top:    16px;
  border:        1px solid transparent;
}
.status-bar.visible { display: flex; }
.status-bar.info    { background: rgba(39,121,167,0.10); border-color: rgba(39,121,167,0.3); color: #6ab8e0; }
.status-bar.success { background: rgba(46,168,126,0.10); border-color: rgba(46,168,126,0.3); color: #4cc9a0; }
.status-bar.error   { background: rgba(201,79,79,0.10);  border-color: rgba(201,79,79,0.3);  color: #e07070; }
.status-bar.loading { background: rgba(39,121,167,0.07); border-color: var(--border);        color: var(--text-muted); }

/* ── Spinner ── */
.spinner {
  width:         14px;
  height:        14px;
  border:        2px solid var(--border);
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
  flex-shrink:   0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.divider {
  height:     1px;
  background: var(--border);
  margin:     20px 0;
}

/* ── Watch folder / option grid ── */
.option-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   10px;
  margin-top:            4px;
}

.option-card {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       14px 14px 12px;
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
  user-select:   none;
  position:      relative;
}
.option-card:hover {
  border-color: var(--border-hover);
  background:   #1e2020;
}
.option-card.selected {
  border-color: var(--brand-blue);
  background:   rgba(39,121,167,0.08);
}
.option-card input[type="radio"] {
  position:       absolute;
  opacity:        0;
  pointer-events: none;
}
.option-card .oc-name {
  font-weight:   500;
  font-size:     13px;
  color:         var(--text);
  margin-bottom: 4px;
  padding-right: 18px;
}
.option-card .oc-desc {
  font-size:   11px;
  color:       var(--text-muted);
  line-height: 1.4;
}
.option-card .oc-path {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-dim);
  margin-top:  8px;
  word-break:  break-all;
}
.option-card .oc-check {
  position:      absolute;
  top:           10px;
  right:         10px;
  width:         14px;
  height:        14px;
  border:        1px solid var(--border);
  border-radius: 50%;
  background:    var(--surface);
  transition:    all 0.15s;
}
.option-card.selected .oc-check {
  background:   var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow:   inset 0 0 0 2px var(--surface-2);
}

/* ── Badge ── */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 7px;
  border-radius:  20px;
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-blue { background: rgba(39,121,167,0.15); color: #6ab8e0; }
.badge-green { background: rgba(46,168,126,0.15); color: #4cc9a0; }