:root {
  --sf-radius: .5rem;
  --sf-gap: .75rem;
  --sf-muted: #6c757d;
  --sf-heading: #212529;
}

.card { border-radius: var(--sf-radius); }
.card-header { background: #f8f9fa; font-weight: 600; color: var(--sf-heading); }

.form-label { font-weight: 500; }
.form-text { font-size: .925rem; color: var(--sf-muted); }

.form-control,
.form-select {
  border-radius: var(--sf-radius);
  transition: box-shadow .2s, border-color .2s;
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
  border-color: #86b7fe;
}

.is-invalid { border-color: #dc3545 !important; }
.is-valid { border-color: #198754 !important; }

.row.g-3 { row-gap: var(--sf-gap); }
.list-group-item { padding: .75rem 1rem; }
.badge { font-weight: 500; }

.btn { border-radius: var(--sf-radius); font-weight: 500; }
.btn { margin-right: .75rem; margin-bottom: .75rem; }
.btn:last-child { margin-right: 0; }
.card-body .btn { margin-top: .25rem; }
.form-actions { margin-top: .5rem; }
.form-actions .btn + .btn { margin-left: .75rem; }
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-primary:active { filter: brightness(0.9); }
.btn-outline-primary { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline-primary:hover { background-color: var(--brand-primary); color: #fff; }
.btn-outline-secondary { border-color: #6c757d; color: #6c757d; }
.btn-outline-secondary:hover { background-color: #6c757d; color: #fff; }
.btn-outline-danger { border-color: #dc3545; color: #dc3545; }
.btn-outline-danger:hover { background-color: #dc3545; color: #fff; }

#dragDropArea { border: 2px dashed var(--brand-primary); border-radius: var(--sf-radius); }
#dragDropArea.bg-light { background: #f8fafc; }

#uploadProgressBar.bg-primary { background-color: var(--brand-primary) !important; }
/* palette extensions */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary) !important; }
.badge.bg-primary { background-color: var(--brand-primary) !important; color: #fff !important; }
.btn-brand-red { background-color: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.btn-brand-red:hover { filter: brightness(0.95); }
.btn-brand-green { background-color: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.btn-brand-green:hover { filter: brightness(0.95); }
.btn-brand-yellow { background-color: var(--brand-yellow); border-color: var(--brand-yellow); color: #212529; }
.btn-brand-yellow:hover { filter: brightness(0.95); }
.btn-brand-orange { background-color: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.btn-brand-orange:hover { filter: brightness(0.95); }
#uploadStatus { min-height: 1.25rem; }

.toast .toast-body { font-weight: 500; }
.alert { margin-top: .5rem; }

.container { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 768px) { .container { padding-right: 1.5rem; } }
@media (min-width: 992px) { .container { padding-right: 2rem; } }
@media (min-width: 768px) { .container { padding-left: 1.5rem; } }
@media (min-width: 992px) { .container { padding-left: 2rem; } }
.card-header { padding: .75rem 1rem; }
.card-body { padding: 1rem 1.25rem; }
.form-label { margin-bottom: .35rem; }
.form-control, .form-select, textarea { padding: .5rem .75rem; }
.mb-3 { margin-bottom: 1rem !important; }
.list-group.list-group-flush { margin-top: .5rem; }
#dragDropArea { padding: 1.25rem; }
#uploadProgress { margin-top: .5rem; }
#filesList .list-group-item { padding: .5rem .75rem; margin-bottom: .5rem; }