/**
 * Matrix Bootstrap compatibility layer
 * Minimal styles so matrix tools work without loading full Bootstrap.
 * Use until each tool is fully converted to tool-card, tool-input, etc.
 */
.matrix-calc .card,
.matrix-classifier .card,
.matrix-calc .tool-card,
.matrix-classifier .tool-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.matrix-calc .card-header,
.matrix-classifier .card-header,
.matrix-calc .tool-card-header,
.matrix-classifier .tool-card-header {
  background: var(--tool-gradient, linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%));
  color: #fff;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.matrix-calc .card-body,
.matrix-classifier .card-body,
.matrix-calc .tool-card-body,
.matrix-classifier .tool-card-body {
  padding: 0.75rem 1rem;
}
.matrix-calc .form-group,
.matrix-classifier .form-group { margin-bottom: 0.875rem }
.matrix-calc .form-control,
.matrix-classifier .form-control,
.matrix-calc .tool-input,
.matrix-classifier .tool-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #0f172a);
  font-family: inherit;
}
.matrix-calc .form-control:focus,
.matrix-classifier .form-control:focus,
.matrix-calc .tool-input:focus,
.matrix-classifier .tool-input:focus {
  outline: none;
  border-color: var(--tool-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.matrix-calc textarea.form-control,
.matrix-calc textarea.tool-input { resize: vertical; font-family: var(--font-mono, monospace) }
.matrix-calc .text-muted { color: var(--text-muted, #94a3b8) }
.matrix-calc small.text-muted,
.matrix-calc .tool-form-hint { font-size: 0.75rem; margin-top: 0.25rem; display: block; color: var(--text-secondary, #64748b) }
.matrix-calc .btn,
.matrix-classifier .btn,
.matrix-calc .tool-action-btn,
.matrix-classifier .tool-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.15s;
}
.matrix-calc .btn-primary,
.matrix-calc .tool-action-btn {
  background: var(--tool-gradient, linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%));
  color: #fff;
}
.matrix-calc .btn-outline-secondary,
.matrix-calc .btn-outline-info,
.matrix-calc .btn-outline-primary,
.matrix-calc .btn-outline-success {
  background: transparent;
  border: 1.5px solid var(--border, #e2e8f0);
  color: var(--text-secondary, #475569);
}
.matrix-calc .btn-outline-primary { border-color: var(--tool-primary); color: var(--tool-primary) }
.matrix-calc .btn-outline-info { border-color: var(--info, #3b82f6); color: var(--info) }
.matrix-calc .btn-outline-success { border-color: var(--success, #10b981); color: var(--success) }
.matrix-calc .btn:hover { opacity: 0.9 }
.matrix-calc .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem }
.matrix-calc .btn-block { width: 100%; display: block }
.matrix-calc .d-flex { display: flex }
.matrix-calc .flex-wrap { flex-wrap: wrap }
.matrix-calc .align-items-center { align-items: center }
.matrix-calc .align-items-start { align-items: flex-start }
.matrix-calc .justify-content-between { justify-content: space-between }
.matrix-calc .mr-1 { margin-right: 0.25rem }
.matrix-calc .mr-2 { margin-right: 0.5rem }
.matrix-calc .ml-1 { margin-left: 0.25rem }
.matrix-calc .mb-1 { margin-bottom: 0.25rem }
.matrix-calc .mb-2 { margin-bottom: 0.5rem }
.matrix-calc .mb-3 { margin-bottom: 1rem }
.matrix-calc .mt-2 { margin-top: 0.5rem }
.matrix-calc .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem }
.matrix-calc .custom-control { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem }
.matrix-calc .custom-control-input { width: 1.125rem; height: 1.125rem; accent-color: var(--tool-primary) }
.matrix-calc .custom-control-label { font-size: 0.875rem; color: var(--text-secondary) }
.matrix-calc .custom-switch .custom-control-input { width: 2.5rem }
.matrix-calc .text-danger { color: var(--error, #ef4444) }
.matrix-calc .text-center { text-align: center }
.matrix-calc .alert-danger { padding: 1rem; background: rgba(239,68,68,0.1); border: 1px solid var(--error); border-radius: 0.5rem; color: var(--error) }
.matrix-calc .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem }
.matrix-calc .col-6 { flex: 0 0 50%; padding: 0 0.75rem }
.matrix-calc .col-lg-4 { flex: 0 0 100%; padding: 0 0.75rem }
.matrix-calc .col-lg-8 { flex: 0 0 100%; padding: 0 0.75rem }
@media (min-width: 992px) {
  .matrix-calc .col-lg-4 { flex: 0 0 33.333% }
  .matrix-calc .col-lg-8 { flex: 0 0 66.666% }
}
@media (min-width: 768px) { .matrix-calc .col-md-12 { flex: 0 0 100% } }
.matrix-calc .container { max-width: 100%; padding: 0 1rem }
.matrix-calc .mt-4 { margin-top: 1.5rem }
.matrix-calc .mt-5 { margin-top: 2rem }
.matrix-calc .h5 { font-size: 1.25rem }
.matrix-calc .h6 { font-size: 1rem }
.matrix-calc .mb-0 { margin-bottom: 0 }