/* components.css */

/* Buttons */
.btn {
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
  text-transform: uppercase;
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.btn-outline-info {
  border-color: #17a2b8;
  color: #17a2b8;
}

.btn-outline-info:hover {
  background-color: #17a2b8;
  color: #fff;
}

.btn-outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

/* Badges / Icons */
.status-icon {
  font-size: 1.2rem;
  margin-right: 0.25rem;
}

/* Form Inputs */
.form-control,
.form-control-file {
  background-color: #222;
  border: 1px solid #555;
  color: #fff;
}

.form-control:focus {
  background-color: #222;
  color: #fff;
  border-color: #888;
  box-shadow: none;
}

/* Cards */
.card {
  background-color: #1b1b1b;
  border: 1px solid #333;
  border-radius: 8px;
}

.card-header {
  background-color: #222;
  border-bottom: 1px solid #333;
  color: #ffc107;
}

/* Alerts */
.alert {
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.alert-warning {
  background-color: #856404;
  color: #fff3cd;
}

.alert-danger {
  background-color: #721c24;
  color: #f8d7da;
}

/* Modals */
.modal-content {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}

.modal-header,
.modal-footer {
  border-color: #333;
}

.modal-title {
  color: #ffc107;
}